Added number example at TextInputImpl.

.prettierrc

@@ -1 +1 @@
-{ "singleQuote": true, "printWidth": 120 }
+{ "singleQuote": true, "printWidth": 120, "tabWidth": 2 }

packages/lib/examples/implementations/NestedArrFieldImpl/index.tsx

@@ -1,5 +1,6 @@
 import { useFormHandler } from '@hooks';
-import { yupSchema, FormErrorsException } from '@utils';
+import { FormErrorsException } from '@utils';
+import { yupSchema } from '@adapters';
 import { Component, createSignal, For } from 'solid-js';
 import * as yup from 'yup';
 

packages/lib/examples/implementations/TextInputImpl/index.tsx

@@ -1,30 +1,34 @@
 import { Component } from 'solid-js';
+import { TextInput } from '@example-components';
 import { useFormHandler } from '@hooks';
 import { ValidationSchema } from '@interfaces';
 
 export const TextInputImpl: Component<{ schema: ValidationSchema<any> }> = (props) => {
   const formHandler = useFormHandler(props.schema);
 
+  const submit = async (event: Event) => {
+    event.preventDefault();
+    try {
+      await formHandler.validateForm();
+      alert(JSON.stringify(formHandler.formData()));
+      formHandler.resetForm();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
     <>
-      <div>
+      <form onSubmit={submit}>
         <h3>Text input implementation</h3>
-        <label>Name</label>
-        <br />
-        <input
-          data-testid="test-input"
-          name="name"
-          placeholder="Write your name"
-          oninput={({ currentTarget: { name, value } }) => formHandler.setFieldValue(name, value)}
-          onblur={({ currentTarget: { name } }) => formHandler.validateField(name)}
-        ></input>
-        {formHandler.isFieldInvalid('name') && (
-          <>
-            <br />
-            <small style="color: red">{formHandler.getFieldError('name')}</small>
-          </>
-        )}
-      </div>
+        <div class="mb-3">
+          <TextInput data-testid="test-input" formHandler={formHandler} name="name" placeholder="Write your name" />
+        </div>
+        <div class="mb-3">
+          <TextInput formHandler={formHandler} name="age" placeholder="Write your age" type="number" />
+        </div>
+        <button>Submit</button>
+      </form>
     </>
   );
 };

packages/lib/examples/implementations/TextInputImpl/schemas.ts

@@ -4,14 +4,16 @@ import { z } from 'zod';
 
 const _ySchema: yup.SchemaOf<{
   name: string;
+  age: number;
 }> = yup.object().shape({
   name: yup.string().required(),
+  age: yup.number().required().min(1),
 });
 
 export const ySchema = yupSchema(_ySchema);
 export const zSchema = zodSchema(
   z.object({
     name: z.string().min(1, 'name is a required field'),
-    email: z.string().email(),
+    age: z.number().min(1),
   })
 );