feat: Add Yup and Zod validator support (#462)

* chore: first pass

* chore: onto something I think

* chore: closer but no cigar

* chore: infer validator

* chore: infer zod

* feat: add validation transformer logic

* chore: fix typings for react adapter

* chore: fix issue with `this` not being defined properly

* chore: mostly update FieldInfo types from Vue

* chore: work on fixing type inferencing

* fix: make ValidatorType optional

* chore: make TName restriction easier to grok

* chore: fix React types

* chore: fix Vue types

* chore: fix typing issues

* chore: fix various linting items

* chore: fix ESlint and validation logic

* chore: fix inferencing from formdata

* chore: fix form inferencing

* chore: fix React TS types to match form validator logic

* chore: fix Vue types

* chore: migrate zod validation to dedicated package

* chore: add first integration test for zod adapter

* chore: enable non-validator types to be passed to validator

* feat: add yup 1.x adapter

* chore: add functionality and tests for form-wide validators

* chore: fix typings of async validation types

* fix: async validation should now run as-expected more often

* chore: add async tests for Yup validator

* chore: rename packages to match naming schema better

* chore: add Zod examples for React and Vue

* chore: add React and Vue Yup support

* chore: fix formatting

* chore: fix CI types

* chore: initial work to drastically improve docs

* docs: improve docs for validation

* docs: add adapter validation docs

Author: crutchcorn

docs/config.json

@@ -30,8 +30,12 @@
       "label": "Guides",
       "children": [
         {
-          "label": "Important Defaults",
-          "to": "guides/important-defaults"
+          "label": "Basic Concepts",
+          "to": "guides/basic-concepts"
+        },
+        {
+          "label": "Form Validation",
+          "to": "guides/validation"
         }
       ]
     },
@@ -89,6 +93,14 @@
             {
               "label": "Simple",
               "to": "framework/react/examples/simple"
+            },
+            {
+              "label": "Yup",
+              "to": "framework/react/examples/yup"
+            },
+            {
+              "label": "Zod",
+              "to": "framework/react/examples/zod"
             }
           ]
         }
@@ -133,6 +145,14 @@
             {
               "label": "Simple",
               "to": "framework/vue/examples/simple"
+            },
+            {
+              "label": "Yup",
+              "to": "framework/vue/examples/yup"
+            },
+            {
+              "label": "Zod",
+              "to": "framework/vue/examples/zod"
             }
           ]
         }

docs/guides/basic-concepts.md

@@ -5,9 +5,7 @@ title: Basic Concepts and Terminology
 
 # Basic Concepts and Terminology
 
-> Some of these docs may be inaccurate due to an API shift in `0.11.0`. If you're interested in helping us fix these issues, please [join our Discord](https://tlinz.com/discord) and reach out in the `#form` channel.
-
-This page introduces the basic concepts and terminology used in the @tanstack/react-form library. Familiarizing yourself with these concepts will help you better understand and work with the library.
+This page introduces the basic concepts and terminology used in the `@tanstack/react-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library.
 
 ## Form Factory
 
@@ -86,7 +84,7 @@ Example:
 
 ## Validation
 
-@tanstack/react-form provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the form.Field component using the validate and validateAsync props.
+`@tanstack/react-form` provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the form.Field component using the validate and validateAsync props.
 
 Example:
 
@@ -111,9 +109,34 @@ Example:
 />
 ```
 
+## Validation Adapters
+
+In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter` and `@tanstack/yup-form-adapter` to enable usage with common schema validation tools like [Yup](https://github.com/jquense/yup) and [Zod](https://zod.dev/).
+
+Example:
+
+```tsx
+<form.Field
+  name="firstName"
+  onChange={z
+    .string()
+    .min(3, "First name must be at least 3 characters")}
+  onChangeAsyncDebounceMs={500}
+  onChangeAsync={z.string().refine(
+    async (value) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return !value.includes("error");
+    },
+    {
+      message: "No 'error' allowed in first name",
+    },
+  )}
+/>
+```
+
 ## Reactivity
 
-@tanstack/react-form offers various ways to subscribe to form and field state changes, such as the form.useStore hook, the form.Subscribe component, and the form.useField hook. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
+`@tanstack/react-form` offers various ways to subscribe to form and field state changes, such as the `form.useStore` hook, the `form.Subscribe` component, and the `form.useField` hook. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
 
 Example:
 
@@ -240,8 +263,5 @@ Example:
 />
 ```
 
-These are the basic concepts and terminology used in the @tanstack/react-form library. Understanding these concepts will help you work more effectively with the library and create complex forms with ease.
+These are the basic concepts and terminology used in the `@tanstack/react-form` library. Understanding these concepts will help you work more effectively with the library and create complex forms with ease.
 
-```
-
-```