feat(webform): doc initializer

src/services/ui/src/components/RHF/FieldArray.tsx

@@ -42,10 +42,12 @@ export const RHFFieldArray = <TFields extends FieldValues>(
                 />
               );
             })}
-            <Trash2
-              className="self-end mb-4 cursor-pointer stroke-primary"
-              onClick={() => fieldArr.remove(index)}
-            />
+            {index >= 1 && (
+              <Trash2
+                className="self-end mb-4 cursor-pointer stroke-primary"
+                onClick={() => fieldArr.remove(index)}
+              />
+            )}
           </div>
         );
       })}

src/services/ui/src/components/RHF/index.ts

@@ -2,3 +2,4 @@ export * from "./Document";
 export * from "./FormGroup";
 export * from "./Section";
 export * from "./Slot";
+export * from "./utils";

src/services/ui/src/components/RHF/types.ts

@@ -33,6 +33,13 @@ export type RHFSlotProps = {
   };
 }[keyof RHFComponentMap];
 
+export type RHFOption = {
+  label: string;
+  value: any;
+  form?: FormGroup[];
+  slots?: RHFSlotProps[];
+};
+
 export type RHFComponentMap = {
   Input: InputProps & {
     label?: ReactElement | string;
@@ -42,21 +49,11 @@ export type RHFComponentMap = {
   Switch: SwitchProps;
   Select: SelectProps;
   Radio: RadioProps & {
-    options: {
-      label: string;
-      value: any;
-      form?: FormGroup[];
-      slots?: RHFSlotProps[];
-    }[];
+    options: RHFOption[];
   };
   DatePicker: CalendarProps;
   Checkbox: {
-    options: {
-      label: string;
-      value: any;
-      form?: FormGroup[];
-      slots?: RHFSlotProps[];
-    }[];
+    options: RHFOption[];
   };
   FieldArray: any;
   FieldGroup: {

src/services/ui/src/components/RHF/utils.ts

@@ -0,0 +1,68 @@
+import * as T from "@/components/RHF/types";
+
+type GL = Record<string, any>;
+
+export const formGroupReducer = (ACC: GL, FORM: T.FormGroup) => {
+  FORM.slots.reduce(slotReducer, ACC);
+  return ACC;
+};
+
+export const slotReducer = (ACC: GL, SLOT: T.RHFSlotProps): GL => {
+  const optionReducer = (OPT: T.RHFOption) => {
+    if (OPT.form) OPT.form.reduce(formGroupReducer, ACC);
+    if (OPT.slots) OPT.slots.reduce(slotReducer, ACC);
+    return ACC;
+  };
+
+  const fieldReducer = (ACC1: GL, SLOT: T.RHFSlotProps): GL => {
+    if (SLOT.rhf === "FieldArray") {
+      return { ...ACC1, [SLOT.name]: [SLOT.fields?.reduce(fieldReducer, {})] };
+    }
+    if (SLOT.rhf === "FieldGroup") {
+      return { ...ACC1, [SLOT.name]: [SLOT.fields?.reduce(fieldReducer, {})] };
+    }
+
+    return { ...ACC1, ...slotReducer(ACC1, SLOT) };
+  };
+
+  if (SLOT.rhf === "Input") ACC[SLOT.name] = "";
+  if (SLOT.rhf === "Textarea") ACC[SLOT.name] = "";
+  if (SLOT.rhf === "Switch") ACC[SLOT.name] = false;
+  if (SLOT.rhf === "Radio") {
+    if (SLOT.props?.options) {
+      SLOT.props.options.forEach(optionReducer);
+      const [first] = SLOT.props.options;
+      ACC[SLOT.name] = first.value;
+    }
+  }
+
+  if (SLOT.rhf === "Select") {
+    if (SLOT.props?.options) {
+      SLOT.props.options.forEach(optionReducer);
+      const [first] = SLOT.props.options;
+      ACC[SLOT.name] = first.value;
+    }
+  }
+
+  if (SLOT.rhf === "Checkbox") {
+    if (SLOT.props?.options) {
+      SLOT.props.options.forEach(optionReducer);
+      const [first] = SLOT.props.options;
+      ACC[SLOT.name] = first.value;
+    }
+  }
+
+  if (SLOT.rhf === "FieldArray")
+    ACC[SLOT.name] = [SLOT.fields?.reduce(fieldReducer, {})];
+  if (SLOT.rhf === "FieldGroup")
+    ACC[SLOT.name] = [SLOT.fields?.reduce(fieldReducer, {})];
+
+  return ACC;
+};
+
+export const documentInitializer = (document: T.Document) => {
+  return document.sections.reduce((ACC, SEC) => {
+    SEC.form.reduce(formGroupReducer, ACC);
+    return ACC;
+  }, {} as any);
+};

src/services/ui/src/pages/form/index.tsx

@@ -4,6 +4,7 @@ import { Button, Form } from "@/components/Inputs";
 
 import { RHFDocument } from "@/components/RHF";
 import { ABP1 } from "./proto";
+import { documentInitializer } from "@/components/RHF";
 
 export const JsonFormSchema = {
   type: "object",
@@ -28,19 +29,7 @@ export function ExampleForm() {
   const form = useForm({
     resolver: ajvResolver(JsonFormSchema as any),
     // shouldUnregister: true,
-    defaultValues: {
-      alt_benefit_plan_population_name: "",
-      eligibility_groups: [{}],
-      is_enrollment_available: "no",
-      target_criteria: [],
-      income_target: "",
-      income_definition: "",
-      income_definition_specific: "",
-      income_definition_specific_statewide: [{}],
-      is_incremental_amount: false,
-      dollar_incremental_amount: "",
-      is_geographic_area: "no",
-    },
+    defaultValues: documentInitializer(ABP1),
   });
 
   const onSubmit = form.handleSubmit((data) => {