feat: valibot form adapter (#499)

* feat: mount method on FormApi

* fix solid-form test case

* fix: added form.mount() to tests

* feat: valibot-form-adapter

* chore: add missing config items

* docs: add Valibot React example

* docs: add Solid Valibot example

* docs: add valibot Vue example

* fix: valibot async adapter now works

* docs: add docs for valibot adapter

---------

Co-authored-by: Corbin Crutchley <[email protected]>

docs/config.json

@@ -101,6 +101,10 @@
             {
               "label": "Zod",
               "to": "framework/react/examples/zod"
+            },
+            {
+              "label": "Valibot",
+              "to": "framework/react/examples/valibot"
             }
           ]
         }
@@ -153,6 +157,10 @@
             {
               "label": "Zod",
               "to": "framework/vue/examples/zod"
+            },
+            {
+              "label": "Valibot",
+              "to": "framework/vue/examples/valibot"
             }
           ]
         }
@@ -205,6 +213,10 @@
             {
               "label": "Zod",
               "to": "framework/solid/examples/zod"
+            },
+            {
+              "label": "Valibot",
+              "to": "framework/solid/examples/valibot"
             }
           ]
         }

docs/guides/basic-concepts.md

@@ -109,7 +109,7 @@ 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/).
+In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
 
 Example:
 

docs/guides/validation.md

@@ -246,16 +246,18 @@ This will debounce every async call with a 500ms delay. You can even override th
 > This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
 
 
-## Adapter-Based Validation (Zod, Yup)
+## Adapter-Based Validation (Zod, Yup, Valibot)
 
-While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Yup](https://github.com/jquense/yup) and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
+While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
 
 Luckily, we support both of these libraries through official adapters:
 
 ```bash
 $ npm install @tanstack/zod-form-adapter zod
 # or
 $ npm install @tanstack/yup-form-adapter yup
+# or
+$ npm install @tanstack/valibot-form-adapter valibot
 ```
 
 Once done, we can add the adapter to the `validator` property  on the form or field:

docs/installation.md

@@ -21,4 +21,6 @@ In addition, we support both Zod and Yup as validators through official validato
 $ npm i @tanstack/zod-form-adapter zod
 # or
 $ npm i @tanstack/yup-form-adapter yup
+# or
+$ npm i @tanstack/valibot-form-adapter valibot
 ```

examples/react/simple/package.json

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@tanstack/react-form": "0.8.1",
-    "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "@tanstack/form-core": "0.8.1",

examples/react/valibot/.eslintrc.cjs

@@ -0,0 +1,15 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  extends: ["plugin:react/recommended", "plugin:react-hooks/recommended"],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: "./tsconfig.json",
+  },
+  rules: {
+    "react/no-children-prop": "off",
+  },
+};
+
+module.exports = config;

examples/react/valibot/.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/react/valibot/.prettierrc

@@ -0,0 +1 @@
+{}

examples/react/valibot/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`

examples/react/valibot/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>TanStack Form React Valibot Example App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/react/valibot/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tanstack/form-example-react-valibot",
+  "version": "0.0.1",
+  "main": "src/index.jsx",
+  "scripts": {
+    "dev": "vite --port=3001",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-form": "0.7.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "valibot": "^0.20.1",
+    "@tanstack/valibot-form-adapter": "0.7.2",
+    "@tanstack/form-core": "0.7.2",
+    "@tanstack/zod-form-adapter": "0.7.2",
+    "@tanstack/vue-form": "0.7.2",
+    "@tanstack/yup-form-adapter": "0.7.2",
+    "@tanstack/solid-form": "0.7.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.4",
+    "vite": "^4.4.9"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "nx": {
+    "implicitDependencies": [
+      "@tanstack/form-core",
+      "@tanstack/react-form",
+      "@tanstack/zod-form-adapter"
+    ],
+    "targets": {
+      "test:types": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  }
+}

examples/react/valibot/src/index.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { useForm } from "@tanstack/react-form";
+import { valibotValidator } from "@tanstack/valibot-form-adapter";
+import { string, minLength, stringAsync, PipeResult } from "valibot";
+import type { FieldApi } from "@tanstack/react-form";
+
+function FieldInfo({ field }: { field: FieldApi<any, any, unknown, unknown> }) {
+  return (
+    <>
+      {field.state.meta.touchedErrors ? (
+        <em>{field.state.meta.touchedErrors}</em>
+      ) : null}
+      {field.state.meta.isValidating ? "Validating..." : null}
+    </>
+  );
+}
+
+export default function App() {
+  const form = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+    },
+    onSubmit: async (values) => {
+      // Do something with form data
+      console.log(values);
+    },
+    // Add a validator to support Valibot usage in Form and Field
+    validator: valibotValidator,
+  });
+
+  return (
+    <div>
+      <h1>Valibot Form Example</h1>
+      <form.Provider>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          <div>
+            {/* A type-safe field component*/}
+            <form.Field
+              name="firstName"
+              onChange={string([
+                minLength(3, "First name must be at least 3 characters"),
+              ])}
+              onChangeAsyncDebounceMs={500}
+              onChangeAsync={stringAsync([
+                async (value) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1000));
+                  return (
+                    value.includes("error")
+                      ? {
+                          issues: [
+                            {
+                              input: value,
+                              validation: "firstName",
+                              message: "No 'error' allowed in first name",
+                            },
+                          ],
+                        }
+                      : { output: value }
+                  ) as PipeResult<string>;
+                },
+              ])}
+              children={(field) => {
+                // Avoid hasty abstractions. Render props are great!
+                return (
+                  <>
+                    <label htmlFor={field.name}>First Name:</label>
+                    <input
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
+                    <FieldInfo field={field} />
+                  </>
+                );
+              }}
+            />
+          </div>
+          <div>
+            <form.Field
+              name="lastName"
+              children={(field) => (
+                <>
+                  <label htmlFor={field.name}>Last Name:</label>
+                  <input
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                  <FieldInfo field={field} />
+                </>
+              )}
+            />
+          </div>
+          <form.Subscribe
+            selector={(state) => [state.canSubmit, state.isSubmitting]}
+            children={([canSubmit, isSubmitting]) => (
+              <button type="submit" disabled={!canSubmit}>
+                {isSubmitting ? "..." : "Submit"}
+              </button>
+            )}
+          />
+        </form>
+      </form.Provider>
+    </div>
+  );
+}
+
+const rootElement = document.getElementById("root")!;
+
+createRoot(rootElement).render(<App />);

examples/react/valibot/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "noEmit": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"]
+  }
+}

examples/react/yup/package.json

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@tanstack/react-form": "0.8.1",
-    "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "yup": "^1.3.2",

examples/react/zod/package.json

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@tanstack/react-form": "0.8.1",
-    "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "zod": "^3.21.4",

examples/solid/valibot/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?