@algorithm-shift/design-system 1.2.37 → 1.2.39

package/dist/index.mjs

@@ -2801,6 +2801,159 @@ function StateProvider({ children }) {
 function useAppState() {
   return useContext(StateContext);
 }
+
+// src/components/Form/Wrapper.tsx
+import React18, { useMemo as useMemo2 } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, Controller } from "react-hook-form";
+import { z } from "zod";
+import { jsx as jsx55 } from "react/jsx-runtime";
+function generateZodSchema(data) {
+  const fields = data.reduce((acc, f) => {
+    const name = f.name || "unnamed";
+    const message = f.message || `${name} is invalid`;
+    const passwordLen = f.passwordLength;
+    let fieldSchema = z.string({ message });
+    switch (f.type) {
+      case "Text":
+      case "Search":
+        fieldSchema = z.string({ message });
+        if (f?.min && f?.min !== "") fieldSchema = fieldSchema.min(f.min);
+        else if (f.isRequired) fieldSchema = fieldSchema.min(1, { message: `${message}. Cannot be empty` });
+        if (f?.max && f?.max !== "") fieldSchema = fieldSchema.max(f.max);
+        if (f?.email) fieldSchema = fieldSchema.email();
+        if (f?.url) fieldSchema = fieldSchema.url();
+        if (f?.regex) fieldSchema = fieldSchema.regex(new RegExp(f.regex));
+        break;
+      case "Email":
+        fieldSchema = z.email({ message });
+        break;
+      case "Password":
+        fieldSchema = z.string({ message }).min(passwordLen, { message: `Password must be at least ${passwordLen} characters long` });
+        break;
+      case "Phone":
+        fieldSchema = z.string().transform((val) => val.replace(/\D/g, "")).transform((val) => val.slice(-10)).refine((val) => {
+          return val.length === 10;
+        }, {
+          message: "Phone number must be 10 digits long"
+        });
+        break;
+      case "DatePicker":
+        fieldSchema = z.iso.date({ message });
+        break;
+      case "FileInput":
+        fieldSchema = z.instanceof(File, { message: "Please select a file" });
+        if (f?.maxSize) {
+          fieldSchema = fieldSchema.refine(
+            (file) => file.size <= f.maxSize,
+            { message: `File size must be less than ${f.maxSize / 1024 / 1024}MB` }
+          );
+        }
+        if (f?.acceptedTypes) {
+          fieldSchema = fieldSchema.refine(
+            (file) => f.acceptedTypes.includes(file.type),
+            { message: `File type must be one of: ${f.acceptedTypes.join(", ")}` }
+          );
+        }
+        break;
+      case "Checkbox":
+        fieldSchema = z.boolean({ message });
+        break;
+      case "Dropdown":
+        fieldSchema = z.string({ message });
+        break;
+      case "NumberInput":
+        fieldSchema = z.number({ message });
+        if (f?.min !== void 0) fieldSchema = fieldSchema.min(f.min);
+        if (f?.max !== void 0) fieldSchema = fieldSchema.max(f.max);
+        break;
+      default:
+        fieldSchema = z.any();
+    }
+    if (!f.isRequired) fieldSchema = fieldSchema.optional();
+    acc[name] = fieldSchema;
+    return acc;
+  }, {});
+  return z.object(fields);
+}
+var FormWrapper = ({
+  validation,
+  defaultValues,
+  children,
+  onSubmit,
+  onReset
+}) => {
+  const schema = useMemo2(() => {
+    if (!validation || validation.length === 0) return null;
+    return generateZodSchema(validation);
+  }, [validation]);
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+    reset
+  } = useForm({
+    resolver: schema ? zodResolver(schema) : void 0,
+    defaultValues
+  });
+  const formSubmit = (data) => {
+    if (onSubmit) onSubmit(data);
+  };
+  const handleReset = () => {
+    reset();
+    if (onReset) onReset();
+  };
+  return /* @__PURE__ */ jsx55(
+    "form",
+    {
+      onSubmit: handleSubmit(formSubmit),
+      onReset: handleReset,
+      className: cn(
+        "space-y-4 min-h-[100px] h-auto flex justify-between flex-col"
+      ),
+      children: /* @__PURE__ */ jsx55("div", { className: "min-h-[50px]", children: React18.Children.map(children, (child) => {
+        const processChild = (child2) => {
+          if (React18.isValidElement(child2)) {
+            const node = child2.props?.node;
+            if (node?.category === "Form Controls") {
+              const name = node.properties?.name || "unnamed";
+              return /* @__PURE__ */ jsx55("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx55(
+                Controller,
+                {
+                  name,
+                  control,
+                  render: ({ field: controllerField }) => {
+                    const childElement = child2;
+                    return React18.cloneElement(childElement, {
+                      input: {
+                        ...controllerField,
+                        value: controllerField.value || "",
+                        hasFormContainer: true,
+                        validateOnMount: true,
+                        errorMessage: errors[name]?.message || null
+                      },
+                      children: void 0
+                    });
+                  }
+                }
+              ) }, node.id);
+            }
+            if (child2.props?.children) {
+              const childElement = child2;
+              return React18.cloneElement(childElement, {
+                children: React18.Children.map(childElement.props.children, processChild)
+              });
+            }
+            return React18.cloneElement(child2);
+          }
+          return child2;
+        };
+        return processChild(child);
+      }) })
+    }
+  );
+};
+var Wrapper_default = FormWrapper;
 export {
   BarChart_default as BarChart,
   Button_default as Button,
@@ -2813,6 +2966,7 @@ export {
   EmailComposer,
   FileInput_default as FileInput,
   Flex_default as FlexLayout,
+  Wrapper_default as Form,
   Grid_default as GridLayout,
   Image_default as Image,
   Logo_default as Logo,