fix: validation bugs, simpler public types, and example cleanup

.eslintrc

@@ -50,6 +50,8 @@
     "react/jsx-handler-names": 0,
     "react/jsx-fragments": 0,
     "react/no-unused-prop-types": 0,
+    "react/jsx-indent": ["error", 2],
+    "react/jsx-indent-props": ["error", 2],
     "import/export": 0,
     "max-len": [
       "error",

example/.eslintrc.cjs

@@ -71,6 +71,8 @@ module.exports = {
     'react/jsx-handler-names': 0,
     'react/jsx-fragments': 0,
     'react/no-unused-prop-types': 0,
+    'react/jsx-indent': ['error', 2],
+    'react/jsx-indent-props': ['error', 2],
     'import/export': 0,
     'max-len': ['error', { code: 120 }],
   },

example/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@radicalbit/radicalbit-design-system": "2.13.1",
+    "@radicalbit/radicalbit-design-system": "2.19.5",
     "cypress": "^13.7.3",
     "formbit": "link:..",
     "react": "^18.2.0",

example/src/__tests__/basic-form-context.cy.tsx

@@ -1,6 +1,6 @@
 import App from '../App'
 
-describe('<BasicFormHook />', () => {
+describe('<BasicFormContext />', () => {
   beforeEach(() => {
     cy.mount(<App />)
     cy.getTab('context').click()

example/src/__tests__/basic-form-hook.cy.tsx

@@ -64,7 +64,7 @@ describe('<BasicFormHook />', () => {
           cy.get('@name').should('be.empty')
         })
 
-        it('Should reset name field', () => {
+        it('Should reset surname field', () => {
           cy.get('@surname').type('Lovelace')
           cy.button('reset').click()
 

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

@@ -9,7 +9,7 @@ import { ChangeEvent } from 'react'
 import { useFakeApiContext } from '../fake-api-context'
 import { useAutoFocus } from '../../helpers/use-autofocus'
 import { success } from '../../helpers/message'
-import { FormData, schema } from './schema'
+import { type FormValues, schema } from './schema'
 
 type FieldProps = {
   value?: string,
@@ -31,7 +31,7 @@ export function BasicFormHook() {
 
   const {
     form, error, write, resetForm, submitForm, isFormInvalid, isDirty
-  } = useFormbit<FormData>({ initialValues: {}, yup: schema })
+  } = useFormbit<FormValues>({ initialValues: {}, yup: schema })
 
   const handleOnChangeName = (e: ChangeEvent<HTMLInputElement>) => write('name', e.target.value)
   const handleOnChangeSurname = (e: ChangeEvent<HTMLInputElement>) => write('surname', e.target.value)

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

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

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

@@ -8,11 +8,11 @@ import { InputRef } from 'rc-input'
 import { ChangeEvent } from 'react'
 import { useAutoFocus } from '../../helpers/use-autofocus'
 import { useHandleOnSubmit } from './use-handle-on-submit'
-import { FormData, schema } from './schema'
+import { type FormValues, schema } from './schema'
 
 export function BasicFormContext() {
   return (
-    <FormbitContextProvider schema={schema}>
+    <FormbitContextProvider initialValues={{}} schema={schema}>
       <BasicFormInner />
     </FormbitContextProvider>
   )
@@ -35,7 +35,7 @@ function BasicFormInner() {
 }
 
 function Name() {
-  const { form, error, write } = useFormbitContext<FormData>()
+  const { form, error, write } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit } = useHandleOnSubmit()
 
@@ -58,7 +58,7 @@ function Name() {
 }
 
 function Surname() {
-  const { form, error, write } = useFormbitContext<FormData>()
+  const { form, error, write } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit } = useHandleOnSubmit()
 
@@ -78,7 +78,7 @@ function Surname() {
 }
 
 function Age() {
-  const { form, error, write } = useFormbitContext<FormData>()
+  const { form, error, write } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit } = useHandleOnSubmit()
 
@@ -94,11 +94,12 @@ function Age() {
         value={form.age}
         required
       />
-    </FormField>)
+    </FormField>
+  )
 }
 
 function Actions() {
-  const { resetForm } = useFormbitContext<FormData>()
+  const { resetForm } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit, isSubmitDisabled, args: { isLoading } } = useHandleOnSubmit()
 

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

@@ -6,4 +6,4 @@ export const schema = yup.object().shape({
   age: yup.number().min(18).max(200).required()
 })
 
-export type FormData = yup.InferType<typeof schema>
+export type FormValues = yup.InferType<typeof schema>

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

@@ -2,10 +2,10 @@ import { useFormbitContext } from 'formbit'
 import { success } from '../../helpers/message'
 import { useFakeApiContext } from '../fake-api-context'
 import type { UseHandleOnSubmitResult } from './use-handle-on-submit-types'
-import type { FormData } from './schema'
+import type { FormValues } from './schema'
 
 export const useHandleOnSubmit = (): UseHandleOnSubmitResult => {
-  const { submitForm, isFormInvalid, resetForm, isDirty } = useFormbitContext<FormData>()
+  const { submitForm, isFormInvalid, resetForm, isDirty } = useFormbitContext<FormValues>()
 
   const { fakePost } = useFakeApiContext()
   const { mutate, ...args } = fakePost

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

@@ -10,7 +10,7 @@ import { InputRef } from 'rc-input'
 import { ChangeEvent, ChangeEventHandler, useRef, useState } from 'react'
 import { useAutoFocus } from '../../helpers/use-autofocus'
 import { useHandleOnSubmit } from './use-handle-on-submit'
-import { FormData, schema } from './schema'
+import { type FormValues, schema } from './schema'
 
 export function AddableFieldsForm() {
   return (
@@ -21,7 +21,7 @@ export function AddableFieldsForm() {
 }
 
 function BasicFormInner() {
-  const { form } = useFormbitContext<FormData>()
+  const { form } = useFormbitContext<FormValues>()
   const friends = form?.friends ?? []
 
   return (
@@ -34,7 +34,7 @@ function BasicFormInner() {
 
       <div className='flex flex-col gap-2 m-auto'>
         <FriendInput />
-        {friends.map((_, i) => <Friend index={i} />)}
+        {friends.map((_, i) => <Friend key={i} index={i} />)}
       </div>
 
       <Actions />
@@ -43,7 +43,7 @@ function BasicFormInner() {
 }
 
 function Name() {
-  const { form, error, write } = useFormbitContext<FormData>()
+  const { form, error, write } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit } = useHandleOnSubmit()
 
@@ -66,7 +66,7 @@ function Name() {
 }
 
 function Surname() {
-  const { form, error, write } = useFormbitContext<FormData>()
+  const { form, error, write } = useFormbitContext<FormValues>()
   const { handleOnSubmit } = useHandleOnSubmit()
 
   const handleOnChangeSurname = (e: ChangeEvent<HTMLInputElement>) => write('surname', e.target.value)
@@ -87,7 +87,7 @@ function Surname() {
 function FriendInput() {
   const inputNameRef = useRef<InputRef>(null)
 
-  const { write, form, error } = useFormbitContext<FormData>()
+  const { write, form, error } = useFormbitContext<FormValues>()
   const friends = form?.friends ?? []
 
   const [name, setName] = useState<string>()
@@ -133,22 +133,22 @@ function FriendInput() {
 }
 
 function Friend({ index }: { index: number }) {
-  const { error, write, validate, form } = useFormbitContext<FormData>()
+  const { error, write, validate, form } = useFormbitContext<FormValues>()
 
-  const name = form.friends?.[index].name
-  const surname = form.friends?.[index].surname
+  const name = form.friends?.[index]?.name
+  const surname = form.friends?.[index]?.surname
 
-  const handleOnBlurFriendName = () => validate(`headers[${index}].name`)
-  const handleOnBlurFriendSurname = () => validate(`headers[${index}].surname`)
+  const handleOnBlurFriendName = () => validate(`friends[${index}].name`)
+  const handleOnBlurFriendSurname = () => validate(`friends[${index}].surname`)
 
   const handleOnChangeFriendName: ChangeEventHandler<HTMLInputElement> =
-    ({ target }) => write(`friends[${index}].key`, target.value)
+    ({ target }) => write(`friends[${index}].name`, target.value)
   const handleOnChangeFriendSurname: ChangeEventHandler<HTMLInputElement> =
-    ({ target }) => write(`friends[${index}].key`, target.value)
+    ({ target }) => write(`friends[${index}].surname`, target.value)
 
   const handleOnRemoveFriend = () => write('friends', form.friends?.filter((_, i) => index !== i))
 
-  const errorMessage = error(`headers[${index}].name`) || error(`headers[${index}].surname`)
+  const errorMessage = error(`friends[${index}].name`) || error(`friends[${index}].surname`)
 
   return (
     <FormField key={index} message={errorMessage}>
@@ -173,7 +173,7 @@ function Friend({ index }: { index: number }) {
 }
 
 function Actions() {
-  const { resetForm } = useFormbitContext<FormData>()
+  const { resetForm } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit, isSubmitDisabled, args: { isLoading } } = useHandleOnSubmit()
 

example/src/forms/c-addable-fields/schema.ts

@@ -11,4 +11,4 @@ export const schema = yup.object().shape({
   ).required()
 })
 
-export type FormData = yup.InferType<typeof schema>
+export type FormValues = yup.InferType<typeof schema>

example/src/forms/c-addable-fields/use-handle-on-submit.tsx

@@ -2,10 +2,10 @@ import { useFormbitContext } from 'formbit'
 import { success } from '../../helpers/message'
 import { useFakeApiContext } from '../fake-api-context'
 import type { UseHandleOnSubmitResult } from './use-handle-on-submit-types'
-import type { FormData } from './schema'
+import type { FormValues } from './schema'
 
 export const useHandleOnSubmit = (): UseHandleOnSubmitResult => {
-  const { submitForm, isFormInvalid, resetForm, isDirty } = useFormbitContext<FormData>()
+  const { submitForm, isFormInvalid, resetForm, isDirty } = useFormbitContext<FormValues>()
 
   const { fakePost } = useFakeApiContext()
   const { mutate, ...args } = fakePost

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

@@ -10,15 +10,15 @@ import { InputRef } from 'rc-input'
 import { ChangeEvent } from 'react'
 import { useAutoFocus } from '../../helpers/use-autofocus'
 import { useFakeApiContext } from '../fake-api-context'
-import { FormData, schema } from './schema'
+import { type FormValues, schema } from './schema'
 import { useHandleOnSubmit } from './use-handle-on-submit'
 import { useInitializeForm } from './use-initialize-form'
 
 export function EditLikeForm() {
   return (
-      <FormbitContextProvider initialValues={{}} schema={schema}>
-        <EditLikeInner />
-      </FormbitContextProvider>
+    <FormbitContextProvider initialValues={{}} schema={schema}>
+      <EditLikeInner />
+    </FormbitContextProvider>
   )
 }
 
@@ -104,7 +104,7 @@ function IsSuccess() {
 
 function Name() {
   const ref = useAutoFocus<InputRef>()
-  const { form, error, write } = useFormbitContext<FormData>()
+  const { form, error, write } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit } = useHandleOnSubmit()
 
@@ -125,7 +125,7 @@ function Name() {
 }
 
 function Surname() {
-  const { form, error, write } = useFormbitContext<FormData>()
+  const { form, error, write } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit } = useHandleOnSubmit()
 
@@ -145,7 +145,7 @@ function Surname() {
 }
 
 function Email() {
-  const { form, error, write } = useFormbitContext<FormData>()
+  const { form, error, write } = useFormbitContext<FormValues>()
 
   const { handleOnSubmit } = useHandleOnSubmit()
 

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

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

example/src/forms/d-edit-like/use-handle-on-submit.tsx

@@ -1,11 +1,11 @@
 import { useFormbitContext } from 'formbit'
 import { success } from '../../helpers/message'
 import { useFakeApiContext } from '../fake-api-context'
-import { FormData } from './schema'
+import type { FormValues } from './schema'
 import type { UseHandleOnSubmitResult } from './use-handle-on-submit-types'
 
 export const useHandleOnSubmit = (): UseHandleOnSubmitResult => {
-  const { submitForm, isFormInvalid, resetForm, isDirty } = useFormbitContext<FormData>()
+  const { submitForm, isFormInvalid, resetForm, isDirty } = useFormbitContext<FormValues>()
 
   const { fakePost } = useFakeApiContext()
   const { mutate, ...args } = fakePost

example/src/forms/d-edit-like/use-initialize-form.ts

@@ -1,10 +1,10 @@
 import { useFormbitContext } from 'formbit'
 import { useEffect } from 'react'
 import { useFakeApiContext } from '../fake-api-context'
-import { FormData } from './schema'
+import type { FormValues } from './schema'
 
 export const useInitializeForm = () => {
-  const { initialize } = useFormbitContext<FormData>()
+  const { initialize } = useFormbitContext<FormValues>()
 
   const { fakeUser } = useFakeApiContext()
   const { data: user } = fakeUser

example/src/forms/e-multiple-steps/schema.ts

@@ -8,7 +8,7 @@ export const schema = yup.object().shape({
 
 })
 
-export type FormData = yup.InferType<typeof schema> & {
+export type FormValues = yup.InferType<typeof schema> & {
   __metadata: {
     step?: number,
     nextStep?: () => void,