Merge pull request #184 from Enterprise-CMCS/finsoup

feat(webforms): RHF Validator

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

@@ -4,7 +4,7 @@ import { Trash2 } from "lucide-react";
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
 import { FieldArrayProps } from "./types";
-import { slotReducer } from "./utils";
+import { slotInitializer } from "./utils";
 import { useEffect } from "react";
 
 export const RHFFieldArray = <TFields extends FieldValues>(
@@ -17,12 +17,12 @@ export const RHFFieldArray = <TFields extends FieldValues>(
   });
 
   const onAppend = () => {
-    fieldArr.append(props.fields.reduce(slotReducer, {}) as any);
+    fieldArr.append(props.fields.reduce(slotInitializer, {}) as any);
   };
 
   useEffect(() => {
     if (fieldArr.fields.length) return;
-    fieldArr.append(props.fields.reduce(slotReducer, {}) as any);
+    fieldArr.append(props.fields.reduce(slotInitializer, {}) as any);
   }, []);
 
   return (

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

@@ -4,7 +4,7 @@ import { Plus } from "lucide-react";
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
 import { FieldGroupProps } from "./types";
-import { slotReducer } from "./utils";
+import { slotInitializer } from "./utils";
 import { useEffect } from "react";
 
 export const FieldGroup = <TFields extends FieldValues>(
@@ -17,12 +17,12 @@ export const FieldGroup = <TFields extends FieldValues>(
   });
 
   const onAppend = () => {
-    fieldArr.append(props.fields.reduce(slotReducer, {}) as any);
+    fieldArr.append(props.fields.reduce(slotInitializer, {}) as any);
   };
 
   useEffect(() => {
     if (fieldArr.fields.length) return;
-    fieldArr.append(props.fields.reduce(slotReducer, {}) as any);
+    fieldArr.append(props.fields.reduce(slotInitializer, {}) as any);
   }, []);
 
   return (

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

@@ -0,0 +1,2 @@
+export * from "./initializer";
+export * from "./validator";

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

@@ -2,27 +2,33 @@ 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);
+export const formGroupInitializer = (ACC: GL, FORM: T.FormGroup) => {
+  FORM.slots.reduce(slotInitializer, ACC);
   return ACC;
 };
 
-export const slotReducer = (ACC: GL, SLOT: T.RHFSlotProps): GL => {
+export const slotInitializer = (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);
+    if (OPT.form) OPT.form.reduce(formGroupInitializer, ACC);
+    if (OPT.slots) OPT.slots.reduce(slotInitializer, ACC);
     return ACC;
   };
 
-  const fieldReducer = (ACC1: GL, SLOT: T.RHFSlotProps): GL => {
+  const fieldInitializer = (ACC1: GL, SLOT: T.RHFSlotProps): GL => {
     if (SLOT.rhf === "FieldArray") {
-      return { ...ACC1, [SLOT.name]: [SLOT.fields?.reduce(fieldReducer, {})] };
+      return {
+        ...ACC1,
+        [SLOT.name]: [SLOT.fields?.reduce(fieldInitializer, {})],
+      };
     }
     if (SLOT.rhf === "FieldGroup") {
-      return { ...ACC1, [SLOT.name]: [SLOT.fields?.reduce(fieldReducer, {})] };
+      return {
+        ...ACC1,
+        [SLOT.name]: [SLOT.fields?.reduce(fieldInitializer, {})],
+      };
     }
 
-    return { ...ACC1, ...slotReducer(ACC1, SLOT) };
+    return { ...ACC1, ...slotInitializer(ACC1, SLOT) };
   };
 
   if (SLOT.rhf === "Input") ACC[SLOT.name] = "";
@@ -52,16 +58,16 @@ export const slotReducer = (ACC: GL, SLOT: T.RHFSlotProps): GL => {
   }
 
   if (SLOT.rhf === "FieldArray")
-    ACC[SLOT.name] = [SLOT.fields?.reduce(fieldReducer, {})];
+    ACC[SLOT.name] = [SLOT.fields?.reduce(fieldInitializer, {})];
   if (SLOT.rhf === "FieldGroup")
-    ACC[SLOT.name] = [SLOT.fields?.reduce(fieldReducer, {})];
+    ACC[SLOT.name] = [SLOT.fields?.reduce(fieldInitializer, {})];
 
   return ACC;
 };
 
 export const documentInitializer = (document: T.Document) => {
   return document.sections.reduce((ACC, SEC) => {
-    SEC.form.reduce(formGroupReducer, ACC);
+    SEC.form.reduce(formGroupInitializer, ACC);
     return ACC;
   }, {} as any);
 };

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

@@ -0,0 +1,55 @@
+import { ValidationRule } from "react-hook-form";
+
+export const INPUT_VALIDATION_RULES = {
+  max: "max",
+  min: "min",
+  maxLength: "maxLength",
+  minLength: "minLength",
+  pattern: "pattern",
+  required: "required",
+  validate: "validate",
+} as const;
+export type InputValidationRules = typeof INPUT_VALIDATION_RULES;
+export type ERROR = Record<string, string>;
+export type MaxType =
+  | InputValidationRules["max"]
+  | InputValidationRules["maxLength"];
+
+export type MinType =
+  | InputValidationRules["min"]
+  | InputValidationRules["minLength"];
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const isFunction = (value: unknown): value is Function =>
+  typeof value === "function";
+
+export const isNullOrUndefined = (value: unknown): value is null | undefined =>
+  value == null;
+
+export const isUndefined = (val: unknown): val is undefined =>
+  val === undefined;
+
+export const isDateObject = (value: unknown): value is Date =>
+  value instanceof Date;
+
+export const isObjectType = (value: unknown) => typeof value === "object";
+
+export const isString = (value: unknown): value is string =>
+  typeof value === "string";
+
+export const isObject = <T extends object>(value: unknown): value is T =>
+  !isNullOrUndefined(value) &&
+  !Array.isArray(value) &&
+  isObjectType(value) &&
+  !isDateObject(value);
+
+export const isRegex = (value: unknown): value is RegExp =>
+  value instanceof RegExp;
+
+export const getValueAndMessage = (validationData?: ValidationRule) =>
+  isObject(validationData) && !isRegex(validationData)
+    ? validationData
+    : {
+        value: validationData,
+        message: "",
+      };