@algorithm-shift/design-system 1.2.36 → 1.2.38

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
+import { z } from 'zod';
 import { ClassValue } from 'clsx';
 
 interface ElementProps {
@@ -192,11 +193,11 @@ interface NavbarProps extends ElementProps {
 
 declare const Modal: ({ children, onClose, label, className, style }: ModalProps) => react_jsx_runtime.JSX.Element;
 
-declare const Flex: ({ children, className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
+declare const Flex: ({ children, className, style, ...props }: ElementProps) => react_jsx_runtime.JSX.Element;
 
-declare const Grid: ({ children, className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
+declare const Grid: ({ children, className, style, ...props }: ElementProps) => react_jsx_runtime.JSX.Element;
 
-declare const Container: ({ children, className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
+declare const Container: ({ children, className, style, ...props }: ElementProps) => react_jsx_runtime.JSX.Element;
 
 declare const ButtonWrapper: ({ className, style, textContent, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
@@ -299,6 +300,16 @@ type CanvasAction = {
 };
 declare function stateReducer(state: CanvasState, action: CanvasAction): CanvasState;
 
+interface FormWrapperProps<T extends z.ZodObject<any>> {
+    validation?: any[];
+    formName?: string;
+    defaultValues?: Partial<z.infer<T>> | any;
+    children?: React$1.ReactNode;
+    onSubmit?: (data: z.infer<T>) => void;
+    onReset?: () => void;
+}
+declare const FormWrapper: <T extends z.ZodObject<any>>({ validation, defaultValues, children, onSubmit, onReset, }: FormWrapperProps<T>) => react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ChartComponent as BarChart, ButtonWrapper as Button, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, ImageControl as Image, Logo, Modal, MultiCheckbox, Navbar, Notification, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, Profile, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Spacer, StagesComponent as Stages, StateProvider, SwitchToggle, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Typography, UrlInput as URL, cn, showSonnerToast, stateReducer, useAppState };
+export { ChartComponent as BarChart, ButtonWrapper as Button, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, FormWrapper as Form, Grid as GridLayout, ImageControl as Image, Logo, Modal, MultiCheckbox, Navbar, Notification, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, Profile, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Spacer, StagesComponent as Stages, StateProvider, SwitchToggle, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Typography, UrlInput as URL, cn, showSonnerToast, stateReducer, useAppState };

package/dist/index.js

@@ -41,6 +41,7 @@ __export(index_exports, {
   EmailComposer: () => EmailComposer,
   FileInput: () => FileInput_default,
   FlexLayout: () => Flex_default,
+  Form: () => Wrapper_default,
   GridLayout: () => Grid_default,
   Image: () => Image_default,
   Logo: () => Logo_default,
@@ -108,9 +109,10 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var Flex = ({
   children,
   className,
-  style
+  style,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ...props, className, style, children });
 };
 var Flex_default = Flex;
 
@@ -119,9 +121,10 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var Grid = ({
   children,
   className,
-  style
+  style,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...props, className, style, children });
 };
 var Grid_default = Grid;
 
@@ -130,9 +133,10 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var Container = ({
   children,
   className,
-  style
+  style,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...props, className, style, children });
 };
 var Container_default = Container;
 
@@ -2872,6 +2876,158 @@ function StateProvider({ children }) {
 function useAppState() {
   return (0, import_react15.useContext)(StateContext);
 }
+
+// src/components/Form/Wrapper.tsx
+var import_react16 = __toESM(require("react"));
+var import_zod = require("@hookform/resolvers/zod");
+var import_react_hook_form = require("react-hook-form");
+var import_zod2 = require("zod");
+var import_jsx_runtime55 = require("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 = import_zod2.z.string({ message });
+    switch (f.type) {
+      case "Text":
+      case "Search":
+        fieldSchema = import_zod2.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 = import_zod2.z.email({ message });
+        break;
+      case "Password":
+        fieldSchema = import_zod2.z.string({ message }).min(passwordLen, { message: `Password must be at least ${passwordLen} characters long` });
+        break;
+      case "Phone":
+        fieldSchema = import_zod2.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 = import_zod2.z.iso.date({ message });
+        break;
+      case "FileInput":
+        fieldSchema = import_zod2.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 = import_zod2.z.boolean({ message });
+        break;
+      case "Dropdown":
+        fieldSchema = import_zod2.z.string({ message });
+        break;
+      case "NumberInput":
+        fieldSchema = import_zod2.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 = import_zod2.z.any();
+    }
+    if (!f.isRequired) fieldSchema = fieldSchema.optional();
+    acc[name] = fieldSchema;
+    return acc;
+  }, {});
+  return import_zod2.z.object(fields);
+}
+var FormWrapper = ({
+  validation,
+  defaultValues,
+  children,
+  onSubmit,
+  onReset
+}) => {
+  const schema = (0, import_react16.useMemo)(() => {
+    if (!validation || validation.length === 0) return null;
+    return generateZodSchema(validation);
+  }, [validation]);
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+    reset
+  } = (0, import_react_hook_form.useForm)({
+    resolver: schema ? (0, import_zod.zodResolver)(schema) : void 0,
+    defaultValues
+  });
+  const formSubmit = (data) => {
+    if (onSubmit) onSubmit(data);
+  };
+  const handleReset = () => {
+    reset();
+    if (onReset) onReset();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    "form",
+    {
+      onSubmit: handleSubmit(formSubmit),
+      onReset: handleReset,
+      className: cn(
+        "space-y-4 min-h-[100px] h-auto flex justify-between flex-col"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "min-h-[50px]", children: import_react16.default.Children.map(children, (child) => {
+        const processChild = (child2) => {
+          if (import_react16.default.isValidElement(child2)) {
+            const node = child2.props?.node;
+            if (node?.category === "Form Controls") {
+              const name = node.properties?.name || "unnamed";
+              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                import_react_hook_form.Controller,
+                {
+                  name,
+                  control,
+                  render: ({ field: controllerField }) => {
+                    const childElement = child2;
+                    return import_react16.default.cloneElement(childElement, {
+                      input: {
+                        ...controllerField,
+                        hasFormContainer: true,
+                        validateOnMount: true,
+                        errorMessage: errors[name]?.message || null
+                      },
+                      children: void 0
+                    });
+                  }
+                }
+              ) }, node.id);
+            }
+            if (child2.props?.children) {
+              const childElement = child2;
+              return import_react16.default.cloneElement(childElement, {
+                children: import_react16.default.Children.map(childElement.props.children, processChild)
+              });
+            }
+            return import_react16.default.cloneElement(child2);
+          }
+          return child2;
+        };
+        return processChild(child);
+      }) })
+    }
+  );
+};
+var Wrapper_default = FormWrapper;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BarChart,
@@ -2885,6 +3041,7 @@ function useAppState() {
   EmailComposer,
   FileInput,
   FlexLayout,
+  Form,
   GridLayout,
   Image,
   Logo,