@ttoss/forms 0.5.12 → 0.6.0

package/README.md

@@ -0,0 +1,40 @@
+# @ttoss/forms
+
+**@ttoss/forms** is a library of React form components for building form components. It is built on top of [React Hook Form](https://react-hook-form.com/) and [Yup](https://github.com/jquense/yup).
+
+## Installation
+
+```shell
+yarn add @ttoss/forms react-hook-form yup
+```
+
+## Quick Start
+
+```tsx
+import * as yup from 'yup';
+import { Button } from '@ttoss/ui';
+import { Form, FormField, yupResolver } from '@ttoss/forms';
+import { useForm } from 'react-hook-form';
+
+const schema = yup.object({
+  firstName: yup.string().required('First name is required'),
+  age: yup.number().required('Age is required'),
+  receiveEmails: yup.boolean(),
+});
+
+export const FormComponent = () => {
+  const formMethods = useForm({
+    mode: 'all',
+    resolver: yupResolver(schema),
+  });
+
+  return (
+    <Form {...formMethods} onSubmit={action('onSubmit')}>
+      <FormField.Input name="firstName" label="First Name" />
+      <FormField.Input name="age" label="Age" />
+      <FormField.Checkbox name="receiveEmails" label="Receive Emails" />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+```

package/dist/esm/index.js

@@ -18,15 +18,17 @@ var Form = ({
     children: /* @__PURE__ */ jsx(Box, {
       as: "form",
       variant: "forms.form",
-      onSubmit: formMethods.handleSubmit((data) => onSubmit(data)),
+      onSubmit: formMethods.handleSubmit((data) => {
+        return onSubmit(data);
+      }),
       sx,
       children
     })
   });
 };
 
-// src/FormFieldInput.tsx
-import { Box as Box2, Input, Label } from "@ttoss/ui";
+// src/FormFieldCheckbox.tsx
+import { Box as Box2, Checkbox, Flex, Label } from "@ttoss/ui";
 
 // src/ErrorMessage.tsx
 import { useFormContext } from "react-hook-form";
@@ -49,27 +51,67 @@ var ErrorMessage = ({
   });
 };
 
-// src/FormFieldInput.tsx
+// src/FormFieldCheckbox.tsx
 import { useController } from "react-hook-form";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var FormFieldInput = ({
+var FormFieldCheckbox = ({
   label,
   name
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
   } = useController({
+    name,
+    defaultValue: false
+  });
+  const id = `form-field-checkbox-${name}`;
+  return /* @__PURE__ */ jsxs(Box2, {
+    children: [
+      /* @__PURE__ */ jsxs(Flex, {
+        sx: { alignItems: "center" },
+        children: [
+          /* @__PURE__ */ jsx3(Checkbox, {
+            id,
+            ref,
+            checked: value,
+            onChange,
+            onBlur
+          }),
+          label && /* @__PURE__ */ jsx3(Label, {
+            htmlFor: id,
+            children: label
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx3(ErrorMessage, {
+        name
+      })
+    ]
+  });
+};
+
+// src/FormFieldInput.tsx
+import { Box as Box3, Input, Label as Label2 } from "@ttoss/ui";
+import { useController as useController2 } from "react-hook-form";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var FormFieldInput = ({
+  label,
+  name
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = useController2({
     name,
     defaultValue: ""
   });
   const id = `form-field-input-${name}`;
-  return /* @__PURE__ */ jsxs(Box2, {
+  return /* @__PURE__ */ jsxs2(Box3, {
     children: [
-      label && /* @__PURE__ */ jsx3(Label, {
+      label && /* @__PURE__ */ jsx4(Label2, {
         htmlFor: id,
         children: label
       }),
-      /* @__PURE__ */ jsx3(Input, {
+      /* @__PURE__ */ jsx4(Input, {
         ref,
         onChange,
         onBlur,
@@ -77,7 +119,7 @@ var FormFieldInput = ({
         name,
         id
       }),
-      /* @__PURE__ */ jsx3(ErrorMessage, {
+      /* @__PURE__ */ jsx4(ErrorMessage, {
         name
       })
     ]
@@ -85,9 +127,9 @@ var FormFieldInput = ({
 };
 
 // src/FormFieldRadio.tsx
-import { Box as Box3, Label as Label2, Radio } from "@ttoss/ui";
-import { useController as useController2 } from "react-hook-form";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Box as Box4, Label as Label3, Radio } from "@ttoss/ui";
+import { useController as useController3 } from "react-hook-form";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormFieldRadio = ({
   label,
   name,
@@ -95,23 +137,22 @@ var FormFieldRadio = ({
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = useController2({
+  } = useController3({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */ jsxs2(Box3, {
+  return /* @__PURE__ */ jsxs3(Box4, {
     children: [
-      label && /* @__PURE__ */ jsx4(Label2, {
+      label && /* @__PURE__ */ jsx5(Label3, {
         children: label
       }),
-      /* @__PURE__ */ jsx4(Box3, {
-        variant: "form.radios",
+      /* @__PURE__ */ jsx5(Box4, {
         children: options.map((option) => {
           const id = `form-field-radio-${name}-${option.value}`;
-          return /* @__PURE__ */ jsxs2(Label2, {
+          return /* @__PURE__ */ jsxs3(Label3, {
             htmlFor: id,
             children: [
-              /* @__PURE__ */ jsx4(Radio, {
+              /* @__PURE__ */ jsx5(Radio, {
                 ref,
                 onChange,
                 onBlur,
@@ -125,7 +166,7 @@ var FormFieldRadio = ({
           }, id);
         })
       }),
-      /* @__PURE__ */ jsx4(ErrorMessage, {
+      /* @__PURE__ */ jsx5(ErrorMessage, {
         name
       })
     ]
@@ -133,9 +174,9 @@ var FormFieldRadio = ({
 };
 
 // src/FormFieldSelect.tsx
-import { Box as Box4, Label as Label3, Select } from "@ttoss/ui";
-import { useController as useController3 } from "react-hook-form";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box5, Label as Label4, Select } from "@ttoss/ui";
+import { useController as useController4 } from "react-hook-form";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var FormFieldSelect = ({
   label,
   name,
@@ -144,34 +185,33 @@ var FormFieldSelect = ({
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = useController3({
+  } = useController4({
     name,
     defaultValue: ""
   });
   const id = `form-field-select-${name}`;
-  return /* @__PURE__ */ jsxs3(Box4, {
+  return /* @__PURE__ */ jsxs4(Box5, {
     children: [
-      label && /* @__PURE__ */ jsx5(Label3, {
+      label && /* @__PURE__ */ jsx6(Label4, {
         htmlFor: id,
         children: label
       }),
-      /* @__PURE__ */ jsx5(Select, {
+      /* @__PURE__ */ jsx6(Select, {
         ref,
         name,
         onChange,
         onBlur,
         value,
         arrow,
-        variant: "form.select",
+        id,
         children: options.map((option) => {
-          return /* @__PURE__ */ jsx5("option", {
+          return /* @__PURE__ */ jsx6("option", {
             value: option.value,
-            id,
             children: option.label
-          }, id);
+          }, option.label);
         })
       }),
-      /* @__PURE__ */ jsx5(ErrorMessage, {
+      /* @__PURE__ */ jsx6(ErrorMessage, {
         name
       })
     ]
@@ -185,7 +225,12 @@ var FormField = () => {
 FormField.Input = FormFieldInput;
 FormField.Radio = FormFieldRadio;
 FormField.Select = FormFieldSelect;
+FormField.Checkbox = FormFieldCheckbox;
+
+// src/index.ts
+import { yupResolver } from "@hookform/resolvers/yup";
 export {
   Form,
-  FormField
+  FormField,
+  yupResolver
 };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as react_hook_form from 'react-hook-form';
 import { FieldValues } from 'react-hook-form';
 import * as React from 'react';
 import { BoxProps } from '@ttoss/ui';
+export { yupResolver } from '@hookform/resolvers/yup';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -34,6 +35,10 @@ declare const FormField: {
         }[];
         arrow?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     }) => JSX.Element;
+    Checkbox: <TFieldValues_3 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, }: {
+        label?: string | undefined;
+        name: react_hook_form.Path<TFieldValues_3>;
+    }) => JSX.Element;
 };
 
 export { Form, FormField };

package/dist/index.js

@@ -28,7 +28,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Form: () => Form,
-  FormField: () => FormField
+  FormField: () => FormField,
+  yupResolver: () => import_yup.yupResolver
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -50,14 +51,16 @@ var Form = ({
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Box, {
       as: "form",
       variant: "forms.form",
-      onSubmit: formMethods.handleSubmit((data) => onSubmit(data)),
+      onSubmit: formMethods.handleSubmit((data) => {
+        return onSubmit(data);
+      }),
       sx,
       children
     })
   });
 };
 
-// src/FormFieldInput.tsx
+// src/FormFieldCheckbox.tsx
 var import_ui3 = require("@ttoss/ui");
 
 // src/ErrorMessage.tsx
@@ -81,27 +84,67 @@ var ErrorMessage = ({
   });
 };
 
-// src/FormFieldInput.tsx
+// src/FormFieldCheckbox.tsx
 var import_react_hook_form3 = require("react-hook-form");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var FormFieldInput = ({
+var FormFieldCheckbox = ({
   label,
   name
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
   } = (0, import_react_hook_form3.useController)({
+    name,
+    defaultValue: false
+  });
+  const id = `form-field-checkbox-${name}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Box, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
+        sx: { alignItems: "center" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Checkbox, {
+            id,
+            ref,
+            checked: value,
+            onChange,
+            onBlur
+          }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Label, {
+            htmlFor: id,
+            children: label
+          })
+        ]
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, {
+        name
+      })
+    ]
+  });
+};
+
+// src/FormFieldInput.tsx
+var import_ui4 = require("@ttoss/ui");
+var import_react_hook_form4 = require("react-hook-form");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FormFieldInput = ({
+  label,
+  name
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = (0, import_react_hook_form4.useController)({
     name,
     defaultValue: ""
   });
   const id = `form-field-input-${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
     children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Label, {
+      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Label, {
         htmlFor: id,
         children: label
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Input, {
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Input, {
         ref,
         onChange,
         onBlur,
@@ -109,7 +152,7 @@ var FormFieldInput = ({
         name,
         id
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, {
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, {
         name
       })
     ]
@@ -117,9 +160,9 @@ var FormFieldInput = ({
 };
 
 // src/FormFieldRadio.tsx
-var import_ui4 = require("@ttoss/ui");
-var import_react_hook_form4 = require("react-hook-form");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_ui5 = require("@ttoss/ui");
+var import_react_hook_form5 = require("react-hook-form");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormFieldRadio = ({
   label,
   name,
@@ -127,23 +170,22 @@ var FormFieldRadio = ({
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = (0, import_react_hook_form4.useController)({
+  } = (0, import_react_hook_form5.useController)({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, {
     children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Label, {
+      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Label, {
         children: label
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Box, {
-        variant: "form.radios",
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Box, {
         children: options.map((option) => {
           const id = `form-field-radio-${name}-${option.value}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Label, {
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Label, {
             htmlFor: id,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Radio, {
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Radio, {
                 ref,
                 onChange,
                 onBlur,
@@ -157,7 +199,7 @@ var FormFieldRadio = ({
           }, id);
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, {
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, {
         name
       })
     ]
@@ -165,9 +207,9 @@ var FormFieldRadio = ({
 };
 
 // src/FormFieldSelect.tsx
-var import_ui5 = require("@ttoss/ui");
-var import_react_hook_form5 = require("react-hook-form");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_ui6 = require("@ttoss/ui");
+var import_react_hook_form6 = require("react-hook-form");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var FormFieldSelect = ({
   label,
   name,
@@ -176,34 +218,33 @@ var FormFieldSelect = ({
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = (0, import_react_hook_form5.useController)({
+  } = (0, import_react_hook_form6.useController)({
     name,
     defaultValue: ""
   });
   const id = `form-field-select-${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui6.Box, {
     children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Label, {
+      label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Label, {
         htmlFor: id,
         children: label
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Select, {
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Select, {
         ref,
         name,
         onChange,
         onBlur,
         value,
         arrow,
-        variant: "form.select",
+        id,
         children: options.map((option) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", {
             value: option.value,
-            id,
             children: option.label
-          }, id);
+          }, option.label);
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, {
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage, {
         name
       })
     ]
@@ -217,8 +258,13 @@ var FormField = () => {
 FormField.Input = FormFieldInput;
 FormField.Radio = FormFieldRadio;
 FormField.Select = FormFieldSelect;
+FormField.Checkbox = FormFieldCheckbox;
+
+// src/index.ts
+var import_yup = require("@hookform/resolvers/yup");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Form,
-  FormField
+  FormField,
+  yupResolver
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.5.12",
+  "version": "0.6.0",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -18,22 +18,23 @@
   },
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@hookform/error-message": "^2.0.0"
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^2.9.10"
   },
   "peerDependencies": {
-    "@ttoss/ui": "^1.19.1",
+    "@ttoss/ui": "^1.23.0",
     "react": "^18.2.0",
-    "react-hook-form": "^7.36.1"
+    "react-hook-form": "^7.39.7",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@hookform/resolvers": "^2.9.8",
     "@ttoss/config": "^1.18.3",
-    "@ttoss/test-utils": "^1.16.10",
-    "@ttoss/ui": "^1.23.1",
-    "@types/jest": "^29.0.3",
-    "jest": "^29.0.3",
+    "@ttoss/test-utils": "^1.17.0",
+    "@ttoss/ui": "^1.23.2",
+    "@types/jest": "^29.2.3",
+    "jest": "^29.3.1",
     "react": "^18.2.0",
-    "react-hook-form": "^7.36.1",
+    "react-hook-form": "^7.39.7",
     "yup": "^0.32.11"
   },
   "engines": {
@@ -42,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9c6b47f9b2ff9a44358a16c9feff84ba9342346"
+  "gitHead": "eaf4015635a5476a3b59beb3c35284404c1f07d5"
 }

package/src/Form.tsx

@@ -17,7 +17,9 @@ export const Form = <TFieldValues extends FieldValues = FieldValues>({
       <Box
         as="form"
         variant="forms.form"
-        onSubmit={formMethods.handleSubmit((data) => onSubmit(data))}
+        onSubmit={formMethods.handleSubmit((data) => {
+          return onSubmit(data);
+        })}
         sx={sx}
       >
         {children}

package/src/FormField.tsx

@@ -1,3 +1,4 @@
+import { FormFieldCheckbox } from './FormFieldCheckbox';
 import { FormFieldInput } from './FormFieldInput';
 import { FormFieldRadio } from './FormFieldRadio';
 import { FormFieldSelect } from './FormFieldSelect';
@@ -11,4 +12,6 @@ FormField.Input = FormFieldInput;
 FormField.Radio = FormFieldRadio;
 FormField.Select = FormFieldSelect;
 
+FormField.Checkbox = FormFieldCheckbox;
+
 export { FormField };

package/src/FormFieldCheckbox.tsx

@@ -0,0 +1,38 @@
+import { Box, Checkbox, Flex, Label } from '@ttoss/ui';
+import { ErrorMessage } from './ErrorMessage';
+import { FieldValues, Path, useController } from 'react-hook-form';
+
+export const FormFieldCheckbox = <
+  TFieldValues extends FieldValues = FieldValues
+>({
+  label,
+  name,
+}: {
+  label?: string;
+  name: Path<TFieldValues>;
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref },
+  } = useController<any>({
+    name,
+    defaultValue: false,
+  });
+
+  const id = `form-field-checkbox-${name}`;
+
+  return (
+    <Box>
+      <Flex sx={{ alignItems: 'center' }}>
+        <Checkbox
+          id={id}
+          ref={ref}
+          checked={value}
+          onChange={onChange}
+          onBlur={onBlur}
+        />
+        {label && <Label htmlFor={id}>{label}</Label>}
+      </Flex>
+      <ErrorMessage name={name} />
+    </Box>
+  );
+};

package/src/FormFieldRadio.tsx

@@ -26,7 +26,7 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
   return (
     <Box>
       {label && <Label>{label}</Label>}
-      <Box variant="form.radios">
+      <Box>
         {options.map((option) => {
           const id = `form-field-radio-${name}-${option.value}`;
 

package/src/FormFieldSelect.tsx

@@ -39,17 +39,16 @@ export const FormFieldSelect = <
         onBlur={onBlur}
         value={value}
         arrow={arrow}
-        variant="form.select"
+        id={id}
       >
         {options.map((option) => {
           return (
-            <option key={id} value={option.value} id={id}>
+            <option key={option.label} value={option.value}>
               {option.label}
             </option>
           );
         })}
       </Select>
-
       <ErrorMessage name={name} />
     </Box>
   );

package/src/index.ts

@@ -1,2 +1,3 @@
 export { Form } from './Form';
 export { FormField } from './FormField';
+export { yupResolver } from '@hookform/resolvers/yup';

package/src/FormFieldInput.spec.tsx

@@ -1,70 +0,0 @@
-import * as yup from 'yup';
-import { Button } from '@ttoss/ui';
-import { Form } from './Form';
-import { FormFieldInput } from './FormFieldInput';
-import { render, screen, userEvent } from '@ttoss/test-utils';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-
-test('call onSubmit with correct data', async () => {
-  const user = userEvent.setup({ delay: null });
-
-  const onSubmit = jest.fn();
-
-  const RenderForm = () => {
-    const formMethods = useForm();
-
-    return (
-      <Form {...formMethods} onSubmit={onSubmit}>
-        <FormFieldInput name="input1" label="Input 1" />
-        <FormFieldInput name="input2" label="Input 2" />
-        <Button type="submit">Submit</Button>
-      </Form>
-    );
-  };
-
-  render(<RenderForm />);
-
-  await user.type(screen.getByLabelText('Input 1'), 'input1');
-
-  await user.type(screen.getByLabelText('Input 2'), 'input2');
-
-  await user.click(screen.getByText('Submit'));
-
-  expect(onSubmit).toHaveBeenCalledWith({ input1: 'input1', input2: 'input2' });
-});
-
-test('should display error messages', async () => {
-  const user = userEvent.setup({ delay: null });
-
-  const onSubmit = jest.fn();
-
-  const schema = yup.object({
-    firstName: yup.string().required('First name is required'),
-    age: yup.number().required('Age is required'),
-  });
-
-  const RenderForm = () => {
-    const formMethods = useForm({
-      defaultValues: {
-        age: 0,
-      },
-      mode: 'all',
-      resolver: yupResolver(schema),
-    });
-
-    return (
-      <Form {...formMethods} onSubmit={onSubmit}>
-        <FormFieldInput name="firstName" label="First Name" />
-        <FormFieldInput name="age" label="Age" />
-        <Button type="submit">Submit</Button>
-      </Form>
-    );
-  };
-
-  render(<RenderForm />);
-
-  await user.click(screen.getByText('Submit'));
-
-  expect(await screen.findByText('First name is required')).toBeInTheDocument();
-});

package/src/FormFieldRadio.spec.tsx

@@ -1,69 +0,0 @@
-import * as yup from 'yup';
-import { Button } from '@ttoss/ui';
-import { Form } from './Form';
-import { FormFieldRadio } from './FormFieldRadio';
-import { render, screen, userEvent } from '@ttoss/test-utils';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-
-const RADIO_OPTIONS = [
-  { value: 'Ferrari', label: 'Ferrari' },
-  { value: 'Mercedes', label: 'Mercedes' },
-  { value: 'BMW', label: 'BMW' },
-];
-
-test('call onSubmit with correct data', async () => {
-  const user = userEvent.setup({ delay: null });
-
-  const onSubmit = jest.fn();
-
-  const RenderForm = () => {
-    const formMethods = useForm();
-
-    return (
-      <Form {...formMethods} onSubmit={onSubmit}>
-        <FormFieldRadio name="car" label="Cars" options={RADIO_OPTIONS} />
-        <Button type="submit">Submit</Button>
-      </Form>
-    );
-  };
-
-  render(<RenderForm />);
-
-  await user.click(screen.getByLabelText('BMW'));
-
-  await user.click(screen.getByText('Submit'));
-
-  expect(onSubmit).toHaveBeenCalledWith({ car: 'BMW' });
-});
-
-test('should display error messages', async () => {
-  const user = userEvent.setup({ delay: null });
-
-  const onSubmit = jest.fn();
-
-  const schema = yup.object({
-    car: yup.string().required('Car is required'),
-  });
-
-  const RenderForm = () => {
-    const formMethods = useForm({
-      mode: 'all',
-      resolver: yupResolver(schema),
-    });
-
-    return (
-      <Form {...formMethods} onSubmit={onSubmit}>
-        <FormFieldRadio name="car" label="Cars" options={RADIO_OPTIONS} />
-
-        <Button type="submit">Submit</Button>
-      </Form>
-    );
-  };
-
-  render(<RenderForm />);
-
-  await user.click(screen.getByText('Submit'));
-
-  expect(await screen.findByText('Car is required')).toBeInTheDocument();
-});

package/src/FormFieldSelect.spec.tsx

@@ -1,73 +0,0 @@
-import * as yup from 'yup';
-import { Button } from '@ttoss/ui';
-import { Form } from './Form';
-import { FormFieldSelect } from './FormFieldSelect';
-import { render, screen, userEvent } from '@ttoss/test-utils';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-
-const RADIO_OPTIONS = [
-  { value: '', label: 'Select a car' },
-  { value: 'Ferrari', label: 'Ferrari' },
-  { value: 'Mercedes', label: 'Mercedes' },
-  { value: 'BMW', label: 'BMW' },
-];
-
-test('call onSubmit with correct data', async () => {
-  const user = userEvent.setup({ delay: null });
-
-  const onSubmit = jest.fn();
-
-  const RenderForm = () => {
-    const formMethods = useForm();
-
-    return (
-      <Form {...formMethods} onSubmit={onSubmit}>
-        <FormFieldSelect name="car" label="Cars" options={RADIO_OPTIONS} />
-        <Button type="submit">Submit</Button>
-      </Form>
-    );
-  };
-
-  render(<RenderForm />);
-
-  await user.selectOptions(
-    screen.getByRole('combobox'),
-    screen.getByText('BMW')
-  );
-
-  await user.click(screen.getByText('Submit'));
-
-  expect(onSubmit).toHaveBeenCalledWith({ car: 'BMW' });
-});
-
-test('should display error messages', async () => {
-  const user = userEvent.setup({ delay: null });
-
-  const onSubmit = jest.fn();
-
-  const schema = yup.object({
-    car: yup.string().required('Car is required'),
-  });
-
-  const RenderForm = () => {
-    const formMethods = useForm({
-      mode: 'all',
-      resolver: yupResolver(schema),
-    });
-
-    return (
-      <Form {...formMethods} onSubmit={onSubmit}>
-        <FormFieldSelect name="car" label="Cars" options={RADIO_OPTIONS} />
-
-        <Button type="submit">Submit</Button>
-      </Form>
-    );
-  };
-
-  render(<RenderForm />);
-
-  await user.click(screen.getByText('Submit'));
-
-  expect(await screen.findByText('Car is required')).toBeInTheDocument();
-});