feat: improve TS typing and refactor examples

example/package.json

@@ -12,10 +12,10 @@
     "cypress:components": "cypress run --component"
   },
   "dependencies": {
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@radicalbit/radicalbit-design-system": "2.13.1",
     "cypress": "^13.7.3",
     "formbit": "link:..",
-    "@radicalbit/radicalbit-design-system": "1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "yup": "^1.4.0"
@@ -33,4 +33,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }
-}
+}

example/src/App.tsx

@@ -5,7 +5,7 @@ import { MultipleStepsForm } from './forms/multiple-steps'
 import { AddableFieldsForm } from './forms/addable-fields'
 import { EditLikeForm } from './forms/edit-like'
 import { FakeApiProvider } from "./forms/context/api-context"
-import FormbitLogo from "./img/formbit-logo.svg"
+import Logo from "./img/LogoRB_PositivoBN.png"
 import { WriteRemoveAllForm } from "./forms/remove-all"
 
 enum EXAMPLES {
@@ -19,50 +19,56 @@ enum EXAMPLES {
 
 function App() {
   return (
-    <div className="flex flex-col justify-center  gap-8 p-4">
-      <header>
-        <img src={FormbitLogo} alt="Formbit Logo" className="h-14 mt-4 mx-auto pe-6 block"/>
-      </header>
+    <div className="flex flex-col min-h-screen">
+      <div className="flex flex-col justify-start gap-8 p-4 flex-1">
+        <header>
+          <img src={Logo} alt="Logo" className="h-14 mt-4 mx-auto pe-6 block"/>
+        </header>
 
-      <FakeApiProvider>
-        <Tabs
-          destroyInactiveTabPane
-          defaultActiveKey={EXAMPLES.HOOK}
-          modifier='flex flex-col'
-          centered
-          items={[
-            {
-              label: 'Basic Hook',
-              key: EXAMPLES.HOOK,
-              children: <BasicFormHook />
-            },
-            {
-              label: 'Basic Context',
-              key: EXAMPLES.CONTEXT,
-              children: <BasicFormContext />
-            },
-            {
-              label: 'Multi-step Form',
-              key: EXAMPLES.MULTI,
-              children: <MultipleStepsForm />
-            },
-            {
-              label: 'Addable-Fields Form',
-              key: EXAMPLES.ADDABLE,
-              children: <AddableFieldsForm />
-            },
-            {
-              label: 'Edit Form',
-              key: EXAMPLES.EDIT,
-              children: <EditLikeForm />
-            },
-            {
-              label: 'Write/Remove All Form',
-              key: EXAMPLES.WRITEREMOVEALL,
-              children: <WriteRemoveAllForm />
-            },
-          ]} />
-      </FakeApiProvider>
+        <FakeApiProvider>
+          <Tabs
+            destroyInactiveTabPane
+            defaultActiveKey={EXAMPLES.HOOK}
+            modifier='flex flex-col'
+            centered
+            items={[
+              {
+                label: 'Basic Hook',
+                key: EXAMPLES.HOOK,
+                children: <BasicFormHook />
+              },
+              {
+                label: 'Basic Context',
+                key: EXAMPLES.CONTEXT,
+                children: <BasicFormContext />
+              },
+              {
+                label: 'Multi-step Form',
+                key: EXAMPLES.MULTI,
+                children: <MultipleStepsForm />
+              },
+              {
+                label: 'Addable-Fields Form',
+                key: EXAMPLES.ADDABLE,
+                children: <AddableFieldsForm />
+              },
+              {
+                label: 'Edit Form',
+                key: EXAMPLES.EDIT,
+                children: <EditLikeForm />
+              },
+              {
+                label: 'Write/Remove All Form',
+                key: EXAMPLES.WRITEREMOVEALL,
+                children: <WriteRemoveAllForm />
+              },
+            ]} />
+        </FakeApiProvider>
+      </div>
+
+      <footer className="text-right text-sm text-gray-500 py-8 pr-8">
+        powered by <a href="https://github.com/radicalbit/radicalbit-design-system" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-700">@radicalbit/rbit-design-system</a>
+      </footer>
     </div>
   )
 }

example/src/forms/addable-fields/index.tsx

@@ -8,12 +8,9 @@ import {
 } from "@radicalbit/radicalbit-design-system";
 import { InputRef } from 'rc-input';
 import { ChangeEvent, ChangeEventHandler, useRef, useState } from 'react';
-import * as yup from 'yup';
 import { useAutoFocus } from '../../helpers/use-autofocus';
 import { useHandleOnSubmit } from '../context/use-handle-on-submit';
-import { schema } from './schema';
-
-type FormData = yup.InferType<typeof schema>
+import { FormData, schema } from './schema';
 
 const useAddableFieldsForm = () => useFormbitContext<FormData>();
 
@@ -193,7 +190,7 @@ function Actions() {
       Submit
     </Button>
 
-    <Button onClick={resetForm} type="ghost">
+    <Button onClick={resetForm}>
       Reset
     </Button>
   </>

example/src/forms/basic-form-context/index.tsx

@@ -6,12 +6,9 @@ import {
 } from "@radicalbit/radicalbit-design-system";
 import { InputRef } from 'rc-input';
 import { ChangeEvent } from 'react';
-import * as yup from 'yup';
 import { useAutoFocus } from '../../helpers/use-autofocus';
 import { useHandleOnSubmit } from '../context/use-handle-on-submit';
-import { schema } from './schema';
-
-type FormData = yup.InferType<typeof schema>
+import { FormData, schema } from './schema';
 
 const useBasicFormContext = () => useFormbitContext<FormData>();
 
@@ -120,7 +117,7 @@ function Actions() {
         Submit
       </Button>
 
-      <Button onClick={resetForm} type="ghost">
+      <Button onClick={resetForm}>
         Reset
       </Button>
     </>

example/src/forms/basic-form-context/schema.ts

@@ -4,4 +4,6 @@ export const schema = yup.object().shape({
   name: yup.string().min(2).required(),
   surname: yup.string().min(2).required(),
   age: yup.number().min(18).required()
-});
+});
+
+export type FormData = yup.InferType<typeof schema>

example/src/forms/basic-form-hook/index.tsx

@@ -9,7 +9,7 @@ import { ChangeEvent } from 'react';
 import { usePost } from '../context/api-context';
 import { useAutoFocus } from '../../helpers/use-autofocus';
 import { success } from '../../helpers/message';
-import { schema } from './schema';
+import { FormData, schema } from './schema';
 
 type FieldProps = {
   value?: string,
@@ -28,7 +28,7 @@ type ActionsProps = {
 export function BasicFormHook() {
   const [triggerMutation, isLoading] = usePost()
 
-  const { form, error, write, resetForm, submitForm, isFormInvalid, isDirty } = useFormbit({ initialValues: {}, yup: schema });
+  const { form, error, write, resetForm, submitForm, isFormInvalid, isDirty } = useFormbit<FormData>({ initialValues: {}, yup: schema });
 
   const handleOnChangeName = (e: ChangeEvent<HTMLInputElement>) => write('name', e.target.value);
   const handleOnChangeSurname = (e: ChangeEvent<HTMLInputElement>) => write('surname', e.target.value);
@@ -99,7 +99,7 @@ function Actions({ onSubmit, onReset, isLoading, isDisabled }: ActionsProps) {
         Submit
       </Button>
 
-      <Button onClick={onReset} disabled={isDisabled} type="ghost">
+      <Button onClick={onReset} disabled={isDisabled}>
         Reset
       </Button>
     </div>

example/src/forms/basic-form-hook/schema.ts

@@ -3,4 +3,6 @@ import * as yup from 'yup'
 export const schema = yup.object().shape({
   name: yup.string().min(2).required(),
   surname: yup.string().min(2).required(),
-});
+});
+
+export type FormData = yup.InferType<typeof schema>

example/src/forms/context/use-handle-on-submit.tsx

@@ -1,9 +1,9 @@
-import { useFormbitContext } from "formbit";
+import { useFormbitContext, type FormbitValues } from "formbit";
 import { success } from "../../helpers/message";
 import { usePost } from "./api-context";
 
-type Context = {
-    __metadata: {
+type Context = FormbitValues & {
+    __metadata?: {
         resetSteps?: () => void
     }
 }
@@ -20,10 +20,11 @@ export const useHandleOnSubmit = () => {
     const handleOnSubmit = () => {
         if (isSubmitDisabled || isLoading) return;
 
-        submitForm(async ({ form }) => {
+        submitForm(async ({ form }, _setError, clearIsDirty) => {
             await triggerMutation(form);
             success(form);
             resetForm();
+            clearIsDirty();
             resetSteps?.();
         });
     };

example/src/forms/edit-like/index.tsx

@@ -7,17 +7,10 @@ import {
 } from "@radicalbit/radicalbit-design-system";
 import { InputRef } from 'rc-input';
 import { ChangeEvent, useEffect } from 'react';
-import * as yup from 'yup';
 import { FakeApiProvider, useGetUser } from '../context/api-context';
 import { useAutoFocus } from '../../helpers/use-autofocus';
 import { useHandleOnSubmit } from '../context/use-handle-on-submit';
-import { schema } from './schema';
-
-type FormData = yup.InferType<typeof schema> & {
-  __metadata?: {
-    isLoading?: boolean
-  }
-}
+import { FormData, schema } from './schema';
 
 const useEditLikeContext = () => useFormbitContext<FormData>();
 

example/src/forms/edit-like/schema.ts

@@ -4,4 +4,6 @@ export const schema = yup.object().shape({
   name: yup.string().min(2).required(),
   surname: yup.string().min(2).required(),
   email: yup.string().email().required()
-});
+});
+
+export type FormData = yup.InferType<typeof schema>

example/src/forms/multiple-steps/step-three.tsx

@@ -55,7 +55,7 @@ function Actions() {
             Submit
         </Button>
 
-        <Button onClick={handleReset} type="ghost">
+        <Button onClick={handleReset}>
             Reset
         </Button>
     </>

example/src/forms/multiple-steps/step-two.tsx

@@ -63,7 +63,7 @@ function Actions() {
 
             <Button
                 onClick={prevStep}
-                type="ghost"
+
             >
                 Prev
             </Button>

example/src/forms/multiple-steps/use-handle-next-step.ts

@@ -1,12 +1,11 @@
-import { useFormbitContext } from "formbit";
+import { useFormbitContext, type FormbitValues } from "formbit";
 import { useCallback } from "react";
 
-
-type Context = {
+type Context = FormbitValues & {
     __metadata: {
         nextStep?: () => void
     }
- }
+}
 
 export const useHandleNextStep = (fields: string[]) => {
     const { form: { __metadata }, validateAll, error } = useFormbitContext<Context>();

example/src/forms/remove-all/index.tsx

@@ -6,12 +6,9 @@ import {
 } from "@radicalbit/radicalbit-design-system";
 import { InputRef } from 'rc-input';
 import { ChangeEvent } from 'react';
-import * as yup from 'yup';
 import { useAutoFocus } from '../../helpers/use-autofocus';
 import { useHandleOnSubmit } from '../context/use-handle-on-submit';
-import { schema } from './schema';
-
-type FormData = yup.InferType<typeof schema>
+import { FormData, schema } from './schema';
 
 const useBasicFormContext = () => useFormbitContext<FormData>();
 
@@ -124,15 +121,15 @@ function Actions() {
         Submit
       </Button>
 
-      <Button onClick={resetForm} type="ghost">
+      <Button onClick={resetForm}>
         Reset
       </Button>
 
-      <Button onClick={handleRemoveAll} type="ghost">
+      <Button onClick={handleRemoveAll}>
         Remove Name, Surname
       </Button>
 
-      <Button onClick={handlWriteAll} type="ghost">
+      <Button onClick={handlWriteAll}>
         Write Name, Surname
       </Button>
 

example/src/forms/remove-all/schema.ts

@@ -4,4 +4,6 @@ export const schema = yup.object().shape({
   name: yup.string().min(2).required(),
   surname: yup.string().min(2).required(),
   age: yup.number().min(18).required()
-});
+});
+
+export type FormData = yup.InferType<typeof schema>

example/src/index.css

@@ -1,6 +1,2 @@
 @tailwind components;
 @tailwind utilities;
-
-body {
-    background: url(./img/background-image.svg) bottom left no-repeat;
-}