@zauru-sdk/components 1.0.98 → 1.0.100

package/dist/esm/Zendesk/zendesk.config.js

@@ -1,4 +1,4 @@
-import jwt from "jsonwebtoken";
+//import jwt from "jsonwebtoken";
 export function zendeskJwt(current_user, configuration) {
     // get the INFO
     const jwtSecret = configuration.zendeskJWTSecret;
@@ -16,9 +16,10 @@ export function zendeskJwt(current_user, configuration) {
         scope: "user",
         exp: expiresIn,
     };
-    const jwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
-    return jwt.sign(payload, jwtSecret, {
-        algorithm: "HS256",
-        header: jwtHeader,
-    });
+    // const jwtHeader: jwt.JwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
+    // return jwt.sign(payload, jwtSecret, {
+    //   algorithm: "HS256",
+    //   header: jwtHeader,
+    // });
+    return {};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.98",
+  "version": "1.0.100",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -31,21 +31,24 @@
     "typescript": "^5.1.6"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^1.0.98",
-    "@zauru-sdk/hooks": "^1.0.98",
+    "@zauru-sdk/common": "^1.0.99",
+    "@zauru-sdk/hooks": "^1.0.99",
     "@zauru-sdk/icons": "^1.0.60",
     "@zauru-sdk/types": "^1.0.98",
-    "@zauru-sdk/utils": "^1.0.98",
+    "@zauru-sdk/utils": "^1.0.99",
     "framer-motion": "^11.0.8",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
     "react-data-table-component": "^7.6.2",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.53.0",
     "react-is": "^18.2.0",
     "react-select": "^5.8.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "zod": "^3.23.8"
   },
-  "gitHead": "e3b92fe4d2aea4be988540f6b233f0a27eb72a40"
+  "gitHead": "c1abff96d35de414e81db8d1cff843e430d06ff7"
 }

package/src/Alerts/StaticAlert.tsx

@@ -33,16 +33,6 @@ const getConfig = (type: string) => {
           <path d="M8.445 12.6675A.9.9 0 0 0 7.1424 13.91l2.5726 2.7448c.3679.3856.9884.3689 1.335-.036l5.591-7.0366a.9.9 0 0 0-1.3674-1.1705l-4.6548 5.9132a.4.4 0 0 1-.607.0252l-1.567-1.6826zM1.9995 12c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10z"></path>
         ),
       };
-    case "warning":
-      return {
-        containerClassName:
-          "text-yellow-900 bg-yellow-100 border border-yellow-200 rounded-md",
-        buttonClassName:
-          "rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500",
-        path: (
-          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0v-4a1 1 0 0 1 1-1z" />
-        ),
-      };
     default:
       return {
         containerClassName:

package/src/Buttons/Button.tsx

@@ -1,4 +1,6 @@
 import type { ColorInterface } from "../NavBar/NavBar.types.js";
+import { useFormContext } from "react-hook-form";
+import { WithTooltip } from "../index.js";
 
 type Props = {
   type?: "reset" | "button" | "submit" | undefined;
@@ -28,6 +30,10 @@ export const Button = (props: Props) => {
     disabled = false,
   } = props;
 
+  const formContext = useFormContext();
+  const formHasErrors = formContext ? !formContext.formState.isValid : false;
+  const formErrors = formContext ? formContext.formState.errors : {};
+
   const COLORS = {
     green: {
       bg900: "bg-green-900",
@@ -67,17 +73,25 @@ export const Button = (props: Props) => {
 
   const inside = children ?? title;
 
-  return (
+  const errorMessage = formHasErrors
+    ? Object.values(formErrors)
+        .map((error) => error?.message?.toString())
+        .join(", ")
+    : "";
+
+  const buttonContent = (
     <button
       type={type}
       name="action"
-      disabled={loading || disabled}
+      disabled={loading || disabled || formHasErrors}
       value={name}
       onClick={onClickSave}
-      className={`ml-2 ${loading || disabled ? " bg-opacity-25 " : ""} ${
+      className={`ml-2 ${
+        loading || disabled || formHasErrors ? " bg-opacity-25 " : ""
+      } ${
         loading
           ? " cursor-progress"
-          : `${disabled ? "" : `hover:${color.bg700}`}`
+          : `${disabled || formHasErrors ? "" : `hover:${color.bg700}`}`
       } inline-flex justify-center rounded-md border border-transparent ${
         color.bg600
       } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
@@ -87,4 +101,10 @@ export const Button = (props: Props) => {
       {loading ? loadingText : inside}
     </button>
   );
+
+  return formHasErrors ? (
+    <WithTooltip text={errorMessage}>{buttonContent}</WithTooltip>
+  ) : (
+    buttonContent
+  );
 };

package/src/DynamicTable/DynamicPrintTable.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useCallback, useState, type ReactNode } from "react";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { SelectFieldWithoutValidation } from "../Form/SelectField/index.js";
-import type { SingleValue } from "react-select";
+import { TextField } from "../Form/TextField/index.js";
+import { SelectField } from "../Form/SelectField/index.js";
 import { useAppSelector } from "@zauru-sdk/redux";
 import { SelectFieldOption } from "@zauru-sdk/types";
 
@@ -43,11 +42,11 @@ export const DynamicPrintTable = ({ forwardedRef, ...props }: Props) => {
     rowIndex: number,
     defaultValue?: SelectFieldOption
   ) => (
-    <SelectFieldWithoutValidation
+    <SelectField
       key={rowIndex}
       name="item_select"
       isClearable
-      onChange={(value: SingleValue<SelectFieldOption>) => {
+      onChange={(value: SelectFieldOption | null) => {
         const selectedItem = items?.find((x) => x.value === value?.value);
         updateRow(rowIndex, selectedItem);
       }}
@@ -57,7 +56,7 @@ export const DynamicPrintTable = ({ forwardedRef, ...props }: Props) => {
   );
 
   const createItemQuantity = (rowIndex: number, defaultValue?: number) => (
-    <TextFieldWithoutValidation
+    <TextField
       key={rowIndex}
       name="item_quantity"
       type="number"

package/src/DynamicTable/DynamicTable.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { TextAreaWithoutValidation } from "../Form/TextArea/index.js";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { CheckboxWithoutValidation } from "../Form/Checkbox/index.js";
+import { TextArea } from "../Form/TextArea/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { CheckBox } from "../Form/Checkbox/index.js";
 
 type Props = {
   cellInputs?: boolean;
@@ -251,7 +251,7 @@ export const DynamicTable = (
             style={{ ...cellBordered, ...pastelGrayBackground }}
           >
             <div className="inline-flex">
-              <TextFieldWithoutValidation
+              <TextField
                 style={{ maxWidth: "45%", minWidth: "45%" }}
                 name={`column${col.id}`}
                 defaultValue={tableData[`column${col.id}`] || 1}
@@ -298,7 +298,7 @@ export const DynamicTable = (
           }}
         >
           <div className="inline-flex">
-            <TextFieldWithoutValidation
+            <TextField
               style={{ maxWidth: "45%", minWidth: "45%" }}
               name={`row${rowId}`}
               defaultValue={tableData[`row${rowId}`] || 1}
@@ -329,13 +329,13 @@ export const DynamicTable = (
               style={{ ...cellBordered, ...cellCenteredContent }}
             >
               {cellInputs ? (
-                <TextAreaWithoutValidation
+                <TextArea
                   name={cellId}
                   defaultValue={tableData[cellId] || ""}
                   onChange={(value) => handleInputChange(cellId, value)}
                 />
               ) : (
-                <CheckboxWithoutValidation
+                <CheckBox
                   name={cellId}
                   defaultValue={cellValidation}
                   onChange={(value) => {

package/src/DynamicTable/GenericDynamicTable.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { SelectFieldWithoutValidation } from "../Form/SelectField/index.js";
-import { TextFieldWithoutValidation } from "../Form/TextField/index.js";
-import { CheckboxWithoutValidation } from "../Form/Checkbox/index.js";
+import { SelectField } from "../Form/SelectField/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { CheckBox } from "../Form/Checkbox/index.js";
 import { createModal } from "../Modal/index.js";
 import { Button } from "../Buttons/index.js";
 import {
@@ -122,7 +122,6 @@ export const GenericDynamicTable = (props: Props) => {
       newDeletedData.push(deletedItem);
     }
     setDeletedData(newDeletedData);
-    onChange && onChange(tableData?.filter((x) => x.id !== rowId));
     setTableData((prevData) => prevData?.filter((x) => x.id !== rowId));
   };
 
@@ -200,10 +199,10 @@ export const GenericDynamicTable = (props: Props) => {
 
           const FieldComponent =
             column.type === "textField"
-              ? TextFieldWithoutValidation
+              ? TextField
               : column.type === "checkbox"
-              ? CheckboxWithoutValidation
-              : SelectFieldWithoutValidation;
+              ? CheckBox
+              : SelectField;
 
           const setTableValue = (columnName: string, newValue: any) => {
             setTableData((prevState) => {
@@ -361,7 +360,7 @@ export const GenericDynamicTable = (props: Props) => {
       <div className={`${className}`}>
         {searcheables.length > 0 && (
           <div>
-            <TextFieldWithoutValidation
+            <TextField
               className="mb-2"
               name="search"
               title={`Buscar por: ${searcheables

package/src/Footer/Footer.tsx

@@ -37,7 +37,7 @@ export const Footer = ({
       <div className="px-4 mx-auto flex flex-wrap items-center justify-center">
         <p className="text-white text-[1.2rem]">
           {`Creado en `} <a href={href}>Zauru</a>{" "}
-          {`con ❤️ ${new Date().getFullYear()} v.3.2`}
+          {`con ❤️ ${new Date().getFullYear()} v.2.0.0`}
         </p>
         {showConnection && (
           <div className="ml-5">

package/src/Form/Checkbox/index.tsx

@@ -1,10 +1,9 @@
-import { useAppSelector } from "@zauru-sdk/redux";
 import React, { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
 
 type Props = {
   id?: string;
   name?: string;
-  formName?: string;
   label?: string;
   defaultValue?: boolean;
   onChange?: (
@@ -12,19 +11,19 @@ type Props = {
     event: React.ChangeEvent<HTMLInputElement>
   ) => { stopUIChange: boolean } | void;
   disabled?: boolean;
-  error?: string | undefined;
   borderColor?: string;
+  required?: boolean;
 };
 
-export const CheckboxWithoutValidation = (props: Props) => {
+export const CheckBox = (props: Props) => {
   const {
     id,
     name,
     defaultValue = false,
     onChange,
     disabled = false,
-    error,
     label,
+    required = false,
   } = props;
 
   const [checked, setChecked] = useState(defaultValue);
@@ -35,6 +34,9 @@ export const CheckboxWithoutValidation = (props: Props) => {
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const isChecked = event.target.checked;
+    if (register) {
+      register.onChange(event);
+    }
     if (onChange) {
       const result = onChange(isChecked, event);
       if (result?.stopUIChange) {
@@ -44,6 +46,15 @@ export const CheckboxWithoutValidation = (props: Props) => {
     setChecked(isChecked);
   };
 
+  const {
+    register: tempRegister,
+    formState: { errors },
+  } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+  const error = errors ? errors[props.name ?? "-1"] : undefined;
+  const register = tempRegister
+    ? tempRegister(props.name ?? "-1", { required })
+    : undefined; // Solo usar register si está disponible
+
   const color = error ? "red" : "gray";
   const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
 
@@ -51,11 +62,12 @@ export const CheckboxWithoutValidation = (props: Props) => {
     <input
       type="checkbox"
       id={id ?? name}
-      name={name}
       checked={checked}
-      onChange={handleInputChange}
       className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`}
       disabled={disabled}
+      {...(register ?? {})}
+      name={name}
+      onChange={handleInputChange}
     />
   );
 
@@ -73,24 +85,15 @@ export const CheckboxWithoutValidation = (props: Props) => {
             className={`ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`}
           >
             {label}
+            {required && <span className="text-red-500">*</span>}
           </label>
         )}
       </div>
       {error && (
         <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
-          <span className="font-medium">Oops!</span> {error}
+          <span className="font-medium">Oops!</span> {error.message?.toString()}
         </p>
       )}
     </div>
   );
 };
-
-//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
-export const CheckBox = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <CheckboxWithoutValidation {...props} />;
-};

package/src/Form/Checklist/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CheckboxWithoutValidation } from "../Checkbox/index.js";
+import { CheckBox } from "../Checkbox/index.js";
 
 export type ChecklistItem = {
   id: string;
@@ -24,7 +24,7 @@ export const Checklist: React.FC<ChecklistProps> = ({ items, onChange }) => {
   return (
     <div>
       {items.map((item) => (
-        <CheckboxWithoutValidation
+        <CheckBox
           key={item.id}
           {...item}
           onChange={(value) => handleCheckboxChange(item.name, value)}

package/src/Form/DatePicker/index.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { CalendarIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
+import { useFormContext } from "react-hook-form";
 
 type Props = {
   id?: string;
   name: string;
-  formName?: string;
   title?: string;
   hint?: string;
   helpText?: string;
@@ -13,12 +12,12 @@ type Props = {
   onChange?: (value: string) => void;
   isClearable?: boolean;
   tabIndex?: number;
-  error?: string;
   disabled?: boolean;
   className?: string;
+  required?: boolean;
 };
 
-export const FormDatePickerWithoutValidation = (props: Props) => {
+export const FormDatePicker = (props: Props) => {
   const {
     id,
     name,
@@ -28,14 +27,22 @@ export const FormDatePickerWithoutValidation = (props: Props) => {
     helpText,
     onChange,
     tabIndex,
-    error,
     disabled = false,
     className = "",
     isClearable = false,
+    required = false,
   } = props;
 
   const [value, setValue] = useState<string | null>(defaultValue);
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  const {
+    register: tempRegister,
+    formState: { errors },
+  } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+  const error = errors ? errors[props.name ?? "-1"] : undefined;
+  const register = tempRegister
+    ? tempRegister(props.name ?? "-1", { required })
+    : undefined; // Solo usar register si está disponible
 
   const color = error ? "red" : "gray";
 
@@ -61,6 +68,7 @@ export const FormDatePickerWithoutValidation = (props: Props) => {
           className={`block text-sm font-medium ${textColor} ${className}`}
         >
           {title}
+          {required && <span className="text-red-500">*</span>}
         </label>
       )}
       <div className="flex relative items-center">
@@ -69,16 +77,20 @@ export const FormDatePickerWithoutValidation = (props: Props) => {
         </div>
         <input
           id={id}
-          name={name}
           tabIndex={tabIndex}
           type="date"
+          value={value ?? ""}
+          pattern="\d{4}-\d{2}-\d{2}"
+          className={`${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`}
+          {...(register ?? {})}
+          name={name}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setValue(e.target.value);
             onChange && onChange(e.target.value);
+            if (register) {
+              register.onChange(e);
+            }
           }}
-          value={value ?? ""}
-          pattern="\d{4}-\d{2}-\d{2}"
-          className={`${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`}
         ></input>
         {value && isClearable && (
           <button
@@ -108,7 +120,7 @@ export const FormDatePickerWithoutValidation = (props: Props) => {
       </div>
       {error && (
         <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
-          <span className="font-medium">Oops!</span> {error}
+          <span className="font-medium">Oops!</span> {error.message?.toString()}
         </p>
       )}
       {!error && hint && (
@@ -121,12 +133,3 @@ export const FormDatePickerWithoutValidation = (props: Props) => {
     </>
   );
 };
-
-export const FormDatePicker = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <FormDatePickerWithoutValidation {...props} />;
-};

package/src/Form/DynamicBaculoForm/index.tsx

@@ -1,4 +1,4 @@
-import { TextField, TextFieldWithoutValidation } from "../TextField/index.js";
+import { TextField } from "../TextField/index.js";
 import { TripleFieldContainer } from "../FieldContainer/index.js";
 import { DoubleFieldContainer } from "../FieldContainer/index.js";
 import { YesNo } from "../YesNo/index.js";
@@ -74,7 +74,7 @@ export function DynamicBaculoForm(props: Props) {
       }
       case "zauru_data":
         return (
-          <TextFieldWithoutValidation
+          <TextField
             key={field.id}
             title={`${field.required ? "*" : ""}${field.name}`}
             hint={field.hint}

package/src/Form/FileUpload/index.tsx

@@ -1,6 +1,6 @@
 import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
 import React, { useState } from "react";
+import { useFormContext } from "react-hook-form";
 
 type Props = {
   id?: string;
@@ -12,15 +12,15 @@ type Props = {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   readOnly?: boolean;
-  error?: string | undefined;
   fileTypes?: string[];
   showAvailableTypes?: boolean;
   className?: string;
   defaultValue?: string | File;
   download?: boolean;
+  required?: boolean;
 };
 
-export const FileUploadFieldWithoutValidation = (props: Props) => {
+export const FileUploadField = (props: Props) => {
   const {
     id,
     name,
@@ -30,14 +30,23 @@ export const FileUploadFieldWithoutValidation = (props: Props) => {
     onChange,
     disabled = false,
     readOnly = false,
-    error,
     fileTypes = [],
     showAvailableTypes = false,
     className,
     defaultValue = undefined,
     download = false,
+    required = false,
   } = props;
 
+  const {
+    register: tempRegister,
+    formState: { errors },
+  } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+  const error = errors ? errors[props.name ?? "-1"] : undefined;
+  const register = tempRegister
+    ? tempRegister(props.name ?? "-1", { required })
+    : undefined; // Solo usar register si está disponible
+
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
 
   if (typeof defaultValue == "string") {
@@ -76,17 +85,32 @@ export const FileUploadFieldWithoutValidation = (props: Props) => {
             className={`block mb-1 text-sm font-medium text-gray-700`}
           >
             {title}
+            {required && <span className="text-red-500">*</span>}
           </label>
         )}{" "}
         <div
           role="button"
           tabIndex={0}
           onClick={() => {
+            if (register) {
+              register.onChange({
+                target: {
+                  value: defaultValue,
+                },
+              });
+            }
             window.open(defaultValue, "_blank");
           }}
           onKeyDown={(event) => {
             // Permite que el evento se active con la tecla Enter
             if (event.key === "Enter") {
+              if (register) {
+                register.onChange({
+                  target: {
+                    value: defaultValue,
+                  },
+                });
+              }
               window.open(defaultValue, "_blank");
             }
           }}
@@ -164,7 +188,7 @@ export const FileUploadFieldWithoutValidation = (props: Props) => {
       </div>
       {error && (
         <p className={`mt-2 text-sm text-${color}-600`}>
-          <span className="font-medium">Oops!</span> {error}
+          <span className="font-medium">Oops!</span> {error.message?.toString()}
         </p>
       )}
       {!error && hintMessage && (
@@ -173,12 +197,3 @@ export const FileUploadFieldWithoutValidation = (props: Props) => {
     </div>
   );
 };
-
-export const FileUploadField = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <FileUploadFieldWithoutValidation {...props} />;
-};

package/src/Form/ReactZodForm/index.tsx

@@ -0,0 +1,60 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, useSubmit } from "@remix-run/react";
+import {
+  FieldValues,
+  FormProvider,
+  SubmitHandler,
+  useForm,
+} from "react-hook-form";
+import { z, ZodSchema } from "zod";
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  schema?: ZodSchema;
+  onSubmit?: SubmitHandler<FieldValues>;
+  id?: string;
+  method?: "post" | "put" | "delete" | "patch";
+};
+
+const emptySchema = z.any();
+
+export const ReactZodForm = (props: Props) => {
+  const {
+    children,
+    method = "post",
+    schema = emptySchema,
+    onSubmit,
+    id,
+  } = props;
+
+  const submit = useSubmit();
+  const methods = useForm({
+    resolver: zodResolver(schema),
+    mode: "onSubmit",
+  });
+
+  const handleSubmit: SubmitHandler<FieldValues> = (data, event) => {
+    if (onSubmit) {
+      onSubmit(data, event);
+    } else {
+      // If no onSubmit is provided, use Remix's submit function
+      submit(event?.target as HTMLFormElement, { method });
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <Form
+        onSubmit={onSubmit ? methods.handleSubmit(onSubmit) : undefined}
+        //onSubmit={methods.handleSubmit(handleSubmit)}
+        method={method}
+        id={id}
+      >
+        {children}
+      </Form>
+    </FormProvider>
+  );
+};
+
+export default ReactZodForm;