Validator Overhaul

docs/comparison.md

@@ -25,7 +25,7 @@ Feature/Capability Key:
 | Nested object/array fields                        | ✅                                           | ❓                             | ❓                                     | ❓                                               | ❓                                     |
 | Async validation                                  | ✅                                           | ❓                             | ❓                                     | ❓                                               | ❓                                     |
 | Built-in async validation debounce                | ✅                                           | ❓                             | ❓                                     | ❓                                               | ❓                                     |
-| Schema-based Validation                           | 🔶                                           | ❓                             | ❓                                     | ❓                                               | ❓                                     |
+| Schema-based Validation                           | ✅                                          | ❓                             | ❓                                     | ❓                                               | ❓                                     |
 
 [bpl-tanstack-form]: https://bundlephobia.com/result?p=@tanstack/react-form
 [bp-tanstack-form]: https://badgen.net/bundlephobia/minzip/@tanstack/react-form?label=💾

docs/config.json

@@ -49,6 +49,10 @@
         {
           "label": "FieldApi",
           "to": "reference/fieldApi"
+        },
+        {
+          "label": "Types",
+          "to": "reference/types"
         }
       ]
     }

docs/framework/react/quick-start.md

@@ -15,9 +15,9 @@ export default function App() {
     defaultValues: {
       fullName: '',
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values)
+      console.log(value)
     },
   })
 

docs/framework/react/reference/Field.md

@@ -3,22 +3,31 @@ id: field
 title: Field
 ---
 
-### `FieldComponent<TParentData>`
+### `FieldComponent<TParentData, TFormValidator>`
 
 A type alias representing a field component for a specific form data type.
 
 ```tsx
-export type FieldComponent = <TField extends DeepKeys<TParentData>>({
+export type FieldComponent<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> = <
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>({
   children,
   ...fieldOptions
-}: {
-  children: (
-    fieldApi: FieldApi<DeepValue<TParentData, TField>, TParentData>,
-  ) => any
-  name: TField
-} & Omit<
-  FieldOptions<DeepValue<TParentData, TField>, TParentData>,
-  'name'
+}: FieldComponentProps<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  TData
 >) => any
 ```
 
@@ -27,39 +36,35 @@ A function component that takes field options and a render function as children
 ### `Field`
 
 ```tsx
-export function Field<TData, TParentData>({
+export function Field<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+>({
   children,
   ...fieldOptions
-}: { children: (fieldApi: FieldApi<TData, TParentData>) => any } & FieldOptions<
-  TData,
-  TParentData
->): any
+}: {
+  children: (
+    fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,
+  ) => any
+} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>): JSX.Element
 ```
 
 A functional React component that renders a form field.
 
 - ```tsx
-  children: (fieldApi: FieldApi<TData, TParentData>) => any
+  children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>) => any
   ```
   - A render function that takes a field API instance and returns a React element.
 - ```tsx
-  fieldOptions: FieldOptions<TData, TParentData>
+  fieldOptions: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>
   ```
   - The field options.
 
 The `Field` component uses the `useField` hook internally to manage the field instance.
 
-### `createFieldComponent`
-
-```tsx
-export function createFieldComponent<TParentData>(
-  formApi: FormApi<TParentData>,
-): FieldComponent<TParentData>
-```
-
-A factory function that creates a connected field component for a specific form API instance.
-
-- ```tsx
-  formApi: FormApi<TParentData>
-  ```
-  - The form API instance to connect the field component to.

docs/framework/react/reference/createFormFactory.md

@@ -3,34 +3,34 @@ id: createFormFactory
 title: createFormFactory
 ---
 
-### `createFormFactory`
+### `createFormFactory<TFormData, TFormValidator>`
 
 ```tsx
-export function createFormFactory<TFormData>(
-  opts?: FormOptions<TFormData>,
-): FormFactory<TFormData>
+export function createFormFactory<TFormData, TFormValidator>(
+  opts?: FormOptions<TFormData, TFormValidator>,
+): FormFactory<TFormData, TFormValidator>
 ```
 
-A function that creates a new `FormFactory<TFormData>` instance.
+A function that creates a new `FormFactory<TFormData, TFormValidator>` instance.
 
 - `opts`
-  - Optional form options and a `listen` function to be called with the form state.
+  - Optional form options.
 
-### `FormFactory<TFormData>`
+### `FormFactory<TFormData, TFormValidator>`
 
 A type representing a form factory. Form factories provide a type-safe way to interact with the form API as opposed to using the globally exported form utilities.
 
 ```tsx
-export type FormFactory<TFormData> = {
-  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>
+export type FormFactory<TFormData, TFormValidator> = {
+  useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData>
   useField: UseField<TFormData>
-  Field: FieldComponent<TFormData>
+  Field: FieldComponent<TFormData, TFormValidator>
 }
 ```
 
 - `useForm`
-  - A custom hook that creates and returns a new instance of the `FormApi<TFormData>` class.
+  - A custom hook that creates and returns a new instance of the `FormApi` class.
 - `useField`
-  - A custom hook that returns an instance of the `FieldApi<TFormData>` class.
+  - A custom hook that returns an instance of the `FieldApi` class.
 - `Field`
   - A form field component.

docs/framework/react/reference/fieldApi.md

@@ -3,11 +3,11 @@ id: fieldApi
 title: Field API
 ---
 
-### `FieldApi<TData, TParentData>`
+### `FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>`
 
-When using `@tanstack/react-form`, the [core field API](../../reference/fieldApi) is extended with additional methods for React-specific functionality:
+When using `@tanstack/react-form`, the [core field API](../../reference/fieldApi) is extended at type level with additional methods for React-specific functionality:
 
 - ```tsx
-  Field: FieldComponent<TData, TParentData>
+  Field: FieldComponent<TParentData, TFormValidator>
   ```
   - A pre-bound and type-safe sub-field component using this field as a root.

docs/framework/react/reference/formApi.md

@@ -3,23 +3,32 @@ id: formApi
 title: Form API
 ---
 
-### `FormApi<TFormData>`
+### `FormApi<TFormData, TFormValidator>`
 
-When using `@tanstack/react-form`, the [core form API](../../reference/formApi) is extended with additional methods for React-specific functionality:
+When using `@tanstack/react-form`, the [core form API](../../reference/formApi) is extended at type level with additional methods for React-specific functionality:
 
 - ```tsx
-  Field: FieldComponent<TFormData>
+  Provider: (props: PropsWithChildren) => JSX.Element
   ```
-  - A pre-bound and type-safe field component, specific to this forms instance.
+  - React provider use to wrap your components. Reference React's [ContextProvider]("https://react.dev/reference/react/createContext#provider")
+- ```tsx
+  Field: FieldComponent<TFormData, TFormValidator>
+  ```
+  - A React component to render form fields. With this, you can render and manage individual form fields.
 - ```tsx
   useField: UseField<TFormData>
   ```
-  - A pre-bound and type-safe custom hook to use fields from this form instance.
+  - A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
 - ```tsx
-  useStore<TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected): TSelected
+  useStore: <TSelected = NoInfer<FormState<TFormData>>>(
+        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
+  ) => TSelected
   ```
-  - A custom hook to use the form store.
+  - A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
 - ```tsx
-  Subscribe<TSelected = NoInfer<FormState<TFormData>>>(props: {selector?: (state: NoInfer<FormState<TFormData>>) => TSelected; children: ((state: NoInfer<TSelected>) => React.ReactNode) | React.ReactNode}): any
+   Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
+        children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
+  }) => JSX.Element
   ```
-  - A subscription component to provide the selected form state to children.
+  - A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.

docs/framework/react/reference/useField.md

@@ -8,44 +8,59 @@ title: useField
 A type representing a hook for using a field in a form with the given form data type.
 
 ```tsx
-export type UseField = <TField extends DeepKeys<TParentData>>(
-  opts?: { name: TField } & FieldOptions<
-    DeepValue<TParentData, TField>,
-    TParentData
+export type UseField<TParentData> = <
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+>(
+  opts?: { name: Narrow<TName> } & UseFieldOptions<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator
   >,
-) => FieldApi<DeepValue<TParentData, TField>, TParentData>
+) => FieldApi<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  DeepValue<TParentData, TName>
+>
 ```
 
 - A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
 
 ### `useField`
 
 ```tsx
-export function useField<TData, TParentData>(
-  opts: FieldOptions<TData, TParentData>,
-): FieldApi<TData, TParentData>
+export function useField<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+>(
+  opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
+): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> 
 ```
 
 A hook for managing a field in a form.
 
 - ```tsx
-  opts: FieldOptions<TData, TParentData>
+  opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>
   ```
   - An object with field options.
 
 #### Returns
 
 - ```tsx
-  FieldApi<TData, TParentData>
+  FieldApi<TParentData, TName, TFieldValidator, TFormValidator>
   ```
   - The `FieldApi` instance for the specified field.
-
-### `createUseField`
-
-```tsx
-export function createUseField<TParentData>(
-  formApi: FormApi<TParentData>,
-): UseField<TParentData>
-```
-
-A function that creates a `UseField` hook bound to the given `formApi`.

docs/framework/react/reference/useForm.md

@@ -6,70 +6,13 @@ title: useForm
 ### `useForm`
 
 ```tsx
-export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>
-```
-A custom react hook that returns an instance of the `FormApi<TData>` class.
+export function useForm<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+>(
+  opts?: FormOptions<TFormData, TFormValidator>,
+): FormApi<TFormData, TFormValidator>
+```
+A custom React Hook that returns an instance of the `FormApi` class.
 This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
 
-
-
-### `FormProps`
-
-An object type representing the form component props.
-
-- Inherits from `React.HTMLProps<HTMLFormElement>`.
-- `children: React.ReactNode`
-  - The form's child elements.
-
-```tsx
-  onSubmit: (e: FormSubmitEvent) => void
-```
-  - `onSubmit` function of type `FormSubmitEvent = React.FormEvent<HTMLFormElement>`
-
-```tsx
-  disabled: boolean
-```
-  - `disabled` boolean to disable form
-
-
-
-### Return value of `UseForm` is  `FormApi<TFormData>`
-
-- The `FormApi` contains the following properties
-
-```tsx
-Provider: (props: { children: any }) => any
-```
-- React provider use to wrap your components
-- Reference React [ContextProvider]("https://react.dev/reference/react/createContext#provider")
-
-
-
-```tsx
-   Field: FieldComponent<TFormData, TFormData>getFormProps: () => FormProps
-```
-- A React component to render form fields. With this, you can render and manage individual form fields.
-
-```tsx
-   useField: UseField<TFormData>
-```
-- A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
-
-
-```tsx
-   useStore: <TSelected = NoInfer<FormState<TFormData>>>(
-      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
-    ) => TSelected
-```
-- a `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
-
-
-```tsx
-   Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
-      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
-      children:
-        | ((state: NoInfer<TSelected>) => React.ReactNode)
-        | React.ReactNode
-    }) => any
-```
-- a `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.