feat(webform): doc initializer

Enterprise-CMCS · Oct 25, 2023 · c9df42c · c9df42c
1 parent 46a2597
commit c9df42c
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 68 deletions.
diff --git a/src/services/ui/src/components/RHF/FieldArray.tsx b/src/services/ui/src/components/RHF/FieldArray.tsx
@@ -4,24 +4,27 @@ import { Trash2 } from "lucide-react";
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
 import { FieldArrayProps } from "./types";
+import { slotReducer } from "./utils";
+import { useEffect } from "react";
 
 export const RHFFieldArray = <TFields extends FieldValues>(
   props: FieldArrayProps<TFields>
 ) => {
   const fieldArr = useFieldArray({
     control: props.control,
     name: props.name,
+    shouldUnregister: true,
   });
 
   const onAppend = () => {
-    fieldArr.append(
-      props.fields.reduce((ACC, S) => {
-        ACC[S.name] = "";
-        return ACC;
-      }, {} as any)
-    );
+    fieldArr.append(props.fields.reduce(slotReducer, {}) as any);
   };
 
+  useEffect(() => {
+    if (fieldArr.fields.length) return;
+    fieldArr.append(props.fields.reduce(slotReducer, {}) as any);
+  }, []);
+
   return (
     <div className="flex flex-col gap-4 w-max">
       {fieldArr.fields.map((FLD, index) => {
@@ -30,10 +33,10 @@ export const RHFFieldArray = <TFields extends FieldValues>(
             {props.fields.map((SLOT) => {
               return (
                 <FormField
-                  //   shouldUnregister
                   key={`${SLOT.name}-${index}`}
                   control={props.control}
                   name={`${props.name}.${index}.${SLOT.name}` as any}
+                  {...(SLOT.rules && { rules: SLOT.rules })}
                   render={RHFSlot({
                     ...SLOT,
                     control: props.control,

diff --git a/src/services/ui/src/components/RHF/FieldGroup.tsx b/src/services/ui/src/components/RHF/FieldGroup.tsx
@@ -4,6 +4,8 @@ import { Plus } from "lucide-react";
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
 import { FieldGroupProps } from "./types";
+import { slotReducer } from "./utils";
+import { useEffect } from "react";
 
 export const FieldGroup = <TFields extends FieldValues>(
   props: FieldGroupProps<TFields>
@@ -14,14 +16,14 @@ export const FieldGroup = <TFields extends FieldValues>(
   });
 
   const onAppend = () => {
-    fieldArr.append(
-      props.fields.reduce((ACC, S) => {
-        ACC[S.name] = "";
-        return ACC;
-      }, {} as any)
-    );
+    fieldArr.append(props.fields.reduce(slotReducer, {}) as any);
   };
 
+  useEffect(() => {
+    if (fieldArr.fields.length) return;
+    fieldArr.append(props.fields.reduce(slotReducer, {}) as any);
+  }, []);
+
   return (
     <div className="flex flex-col gap-4 w-max">
       {fieldArr.fields.map((FLD, index) => {
@@ -30,10 +32,10 @@ export const FieldGroup = <TFields extends FieldValues>(
             {props.fields.map((SLOT) => {
               return (
                 <FormField
-                  //   shouldUnregister
                   key={`${SLOT.name}-${index}`}
                   control={props.control}
                   name={`${props.name}.${index}.${SLOT.name}` as any}
+                  {...(SLOT.rules && { rules: SLOT.rules })}
                   render={RHFSlot({
                     ...SLOT,
                     control: props.control,

diff --git a/src/services/ui/src/components/RHF/FormGroup.tsx b/src/services/ui/src/components/RHF/FormGroup.tsx
@@ -20,17 +20,16 @@ export const RHFFormGroup = <TFieldValues extends FieldValues>(props: {
           </div>
         )}
         <div className={props.form.wrapperStyling}>
-          {props.form.slots.map((SLOT) => {
-            return (
-              <DependencyWrapper key={SLOT.name} {...SLOT}>
-                <FormField
-                  control={props.control}
-                  name={SLOT.name as any}
-                  render={RHFSlot({ ...SLOT, control: props.control })}
-                />
-              </DependencyWrapper>
-            );
-          })}
+          {props.form.slots.map((SLOT) => (
+            <DependencyWrapper key={SLOT.name} {...SLOT}>
+              <FormField
+                control={props.control}
+                name={SLOT.name as any}
+                {...(SLOT.rules && { rules: SLOT.rules })}
+                render={RHFSlot({ ...SLOT, control: props.control })}
+              />
+            </DependencyWrapper>
+          ))}
         </div>
       </div>
     </DependencyWrapper>

diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx
@@ -118,14 +118,16 @@ export const RHFSlot = <
                           </div>
                           {field.value === OPT.value &&
                             OPT.form &&
-                            OPT.form.map((FORM: any, index: any) => (
-                              <div
-                                className="ml-[0.6rem] px-4 border-l-4 border-l-primary"
-                                key={`rhf-form-${index}-${FORM.description}`}
-                              >
-                                <RHFFormGroup form={FORM} control={control} />
-                              </div>
-                            ))}
+                            OPT.form.map((FORM: any, index: any) => {
+                              return (
+                                <div
+                                  className="ml-[0.6rem] px-4 border-l-4 border-l-primary"
+                                  key={`rhf-form-${index}-${FORM.description}`}
+                                >
+                                  <RHFFormGroup form={FORM} control={control} />
+                                </div>
+                              );
+                            })}
                           {field.value === OPT.value &&
                             OPT.slots &&
                             OPT.slots.map((SLOT: any, index: any) => (
@@ -136,7 +138,8 @@ export const RHFSlot = <
                                 <FormField
                                   control={control}
                                   name={SLOT.name}
-                                  render={RHFSlot(SLOT)}
+                                  {...(SLOT.rules && { rules: SLOT.rules })}
+                                  render={RHFSlot({ ...SLOT, control })}
                                 />
                               </div>
                             ))}
@@ -178,7 +181,8 @@ export const RHFSlot = <
                               <FormField
                                 control={control}
                                 name={SLOT.name}
-                                render={RHFSlot(SLOT)}
+                                {...(SLOT.rules && { rules: SLOT.rules })}
+                                render={RHFSlot({ ...SLOT, control })}
                               />
                             </div>
                           ))}

diff --git a/src/services/ui/src/components/RHF/types.ts b/src/services/ui/src/components/RHF/types.ts
@@ -20,11 +20,11 @@ export type RHFSlotProps = {
   labelStyling?: string;
   description?: ReactElement | string;
   dependency?: DependencyRule;
+  rules?: RegisterOptions;
 } & {
   [K in keyof RHFComponentMap]: {
     rhf: K;
     props?: RHFComponentMap[K];
-    rules?: RegisterOptions;
     fields?: K extends "FieldArray"
       ? RHFSlotProps[]
       : K extends "FieldGroup"

diff --git a/src/services/ui/src/components/RHF/utils.ts b/src/services/ui/src/components/RHF/utils.ts
@@ -47,8 +47,7 @@ export const slotReducer = (ACC: GL, SLOT: T.RHFSlotProps): GL => {
   if (SLOT.rhf === "Checkbox") {
     if (SLOT.props?.options) {
       SLOT.props.options.forEach(optionReducer);
-      const [first] = SLOT.props.options;
-      ACC[SLOT.name] = first.value;
+      ACC[SLOT.name] = [];
     }
   }
 

diff --git a/src/services/ui/src/pages/form/index.tsx b/src/services/ui/src/pages/form/index.tsx
@@ -1,40 +1,25 @@
-import { ajvResolver } from "@hookform/resolvers/ajv";
 import { useForm } from "react-hook-form";
 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",
-  properties: {
-    alt_benefit_plan_population_name: {
-      type: "string",
-      minLength: 1,
-      maxLength: 20,
-      errorMessage: {
-        minLength: "This field is required",
-      },
-    },
-    is_enrollment_available: {
-      type: "string",
-    },
-  },
-  required: ["alt_benefit_plan_population_name"],
-  additionalProperties: true,
-};
-
 export function ExampleForm() {
+  const defaultValues = documentInitializer(ABP1);
+
   const form = useForm({
-    resolver: ajvResolver(JsonFormSchema as any),
-    // shouldUnregister: true,
-    defaultValues: documentInitializer(ABP1),
+    defaultValues,
   });
 
-  const onSubmit = form.handleSubmit((data) => {
-    console.log(data);
-  });
+  const onSubmit = form.handleSubmit(
+    (data) => {
+      console.log({ data });
+    },
+    (err) => {
+      console.log({ err });
+    }
+  );
 
   return (
     <div className="max-w-screen-xl mx-auto p-4 py-8 lg:px-8">

diff --git a/src/services/ui/src/pages/form/proto.tsx b/src/services/ui/src/pages/form/proto.tsx
@@ -14,9 +14,14 @@ export const ABP1: Document = {
               rhf: "Input",
               name: "alt_benefit_plan_population_name",
               label: "Alternative Benefit Plan population name",
-              props: {
-                placeholder: "enter name",
+              rules: {
+                required: "*Required",
+                maxLength: {
+                  value: 20,
+                  message: "Max 20 Characters",
+                },
               },
+              props: { placeholder: "enter name" },
               dependency: {
                 // example of a value changing field, with multi-conditions
                 conditions: [
@@ -308,7 +313,7 @@ export const ABP1: Document = {
                                                 slots: [
                                                   {
                                                     rhf: "FieldGroup",
-                                                    name: "income_definition_specific_statewide_arr",
+                                                    name: "income_definition_region_statewide_group",
                                                     props: {
                                                       appendText: "Add Region",
                                                       removeText:
@@ -317,7 +322,7 @@ export const ABP1: Document = {
                                                     fields: [
                                                       {
                                                         rhf: "FieldArray",
-                                                        name: "income_definition_specific_statewide",
+                                                        name: "income_definition_region_statewide_arr",
                                                         fields: [
                                                           {
                                                             rhf: "Input",