docs-i18n 0.8.1 → 0.8.2

package/template/content/form/docs.config.json

@@ -0,0 +1,18 @@
+{
+  "sections": [
+    {
+      "label": "Getting Started",
+      "children": [
+        { "label": "Overview", "to": "overview" },
+        { "label": "Installation", "to": "installation" },
+        { "label": "Quick Start", "to": "quick-start" }
+      ]
+    },
+    {
+      "label": "Guides",
+      "children": [
+        { "label": "Validation", "to": "guides/validation" }
+      ]
+    }
+  ]
+}

package/template/content/form/en/guides/validation.md

@@ -0,0 +1,175 @@
+---
+title: Validation
+description: Learn how to validate form fields with TanStack Form
+---
+
+# Validation
+
+TanStack Form provides powerful, flexible validation that works at both the field level and form level. Validation can run on change, on blur, on submit, or asynchronously.
+
+## Field-Level Validation
+
+The most common approach is to validate individual fields. You can add validators directly to each field:
+
+```tsx
+import { useForm } from '@tanstack/react-form'
+
+function SignupForm() {
+  const form = useForm({
+    defaultValues: {
+      username: '',
+      email: '',
+      password: '',
+    },
+    onSubmit: async ({ value }) => {
+      console.log('Form submitted:', value)
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="username"
+        validators={{
+          onChange: ({ value }) => {
+            if (value.length < 3) {
+              return 'Username must be at least 3 characters'
+            }
+            return undefined
+          },
+        }}
+      >
+        {(field) => (
+          <div>
+            <label htmlFor={field.name}>Username</label>
+            <input
+              id={field.name}
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+            />
+            {field.state.meta.errors.length > 0 && (
+              <p className="text-red-500">{field.state.meta.errors.join(', ')}</p>
+            )}
+          </div>
+        )}
+      </form.Field>
+
+      <button type="submit">Sign Up</button>
+    </form>
+  )
+}
+```
+
+## Validation Timing
+
+TanStack Form supports multiple validation timings:
+
+| Timing | When it runs | Use case |
+|---|---|---|
+| `onChange` | Every keystroke | Real-time feedback |
+| `onBlur` | When field loses focus | Less intrusive UX |
+| `onSubmit` | When form is submitted | Final validation only |
+| `onChangeAsync` | Debounced on change | API-backed validation |
+| `onBlurAsync` | Async on blur | Server-side checks |
+
+```tsx
+<form.Field
+  name="email"
+  validators={{
+    onChange: ({ value }) => {
+      if (!value.includes('@')) return 'Invalid email format'
+    },
+    onChangeAsyncDebounceMs: 500,
+    onChangeAsync: async ({ value }) => {
+      const available = await checkEmailAvailable(value)
+      if (!available) return 'Email already taken'
+    },
+  }}
+>
+  {(field) => <input {...field} />}
+</form.Field>
+```
+
+## Schema Validation with Adapters
+
+TanStack Form integrates with popular schema validation libraries through adapters:
+
+### Zod Adapter
+
+```bash
+npm install @tanstack/zod-form-adapter zod
+```
+
+```tsx
+import { zodValidator } from '@tanstack/zod-form-adapter'
+import { z } from 'zod'
+
+const form = useForm({
+  defaultValues: { email: '' },
+  onSubmit: async ({ value }) => console.log(value),
+  validatorAdapter: zodValidator(),
+})
+
+// Then in fields:
+<form.Field
+  name="email"
+  validators={{
+    onChange: z.string().email('Invalid email'),
+  }}
+>
+  {(field) => <input />}
+</form.Field>
+```
+
+### Valibot Adapter
+
+```bash
+npm install @tanstack/valibot-form-adapter valibot
+```
+
+```tsx
+import { valibotValidator } from '@tanstack/valibot-form-adapter'
+import * as v from 'valibot'
+
+const form = useForm({
+  defaultValues: { email: '' },
+  onSubmit: async ({ value }) => console.log(value),
+  validatorAdapter: valibotValidator(),
+})
+```
+
+> [!NOTE]
+> Schema adapters let you use the same schema definitions for both form validation and API validation, keeping your validation logic DRY.
+
+## Form-Level Validation
+
+You can also validate the entire form at once, useful for cross-field validation:
+
+```tsx
+const form = useForm({
+  defaultValues: {
+    password: '',
+    confirmPassword: '',
+  },
+  validators: {
+    onChange: ({ value }) => {
+      if (value.password !== value.confirmPassword) {
+        return 'Passwords do not match'
+      }
+      return undefined
+    },
+  },
+  onSubmit: async ({ value }) => {
+    // handle submit
+  },
+})
+```
+
+> [!WARNING]
+> Form-level validators run on every field change by default. For expensive validation logic, use `onBlur` or `onSubmit` timing instead.

package/template/content/form/en/installation.md

@@ -0,0 +1,63 @@
+---
+title: Installation
+description: How to install TanStack Form in your project
+---
+
+# Installation
+
+## React
+
+```bash
+npm install @tanstack/react-form
+```
+
+```bash
+pnpm add @tanstack/react-form
+```
+
+```bash
+yarn add @tanstack/react-form
+```
+
+```bash
+bun add @tanstack/react-form
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-form
+```
+
+## Angular
+
+```bash
+npm install @tanstack/angular-form
+```
+
+## Validation Adapters
+
+TanStack Form supports popular validation libraries via adapters:
+
+### Zod
+
+```bash
+npm install @tanstack/zod-form-adapter zod
+```
+
+### Valibot
+
+```bash
+npm install @tanstack/valibot-form-adapter valibot
+```
+
+### Yup
+
+```bash
+npm install @tanstack/yup-form-adapter yup
+```
+
+## Requirements
+
+- TypeScript 5.0+
+- React 18+ / Vue 3+ / Angular 17+

package/template/content/form/en/overview.md

@@ -0,0 +1,71 @@
+---
+title: TanStack Form Overview
+description: Headless, performant, and type-safe form state management
+---
+
+# TanStack Form
+
+TanStack Form is a headless, performant, and type-safe form state management library for TS/JS, React, Vue, and Angular.
+
+## Why TanStack Form?
+
+Most form libraries either sacrifice type safety for convenience or are tightly coupled to a specific framework. TanStack Form gives you both — full type safety from form values to validation errors, with adapters for React, Vue, and Angular.
+
+## Features
+
+- **Type-Safe** — Full TypeScript inference for form values, field names, and validation
+- **Framework Agnostic** — Works with React, Vue, Angular, and more
+- **Headless** — No UI opinions, bring your own components
+- **Performant** — Field-level subscriptions, no unnecessary re-renders
+- **Validation** — Built-in sync and async validation with adapter support for Zod, Valibot, and Yup
+- **Arrays & Dynamic Fields** — First-class support for array fields
+
+## Basic Example
+
+```tsx
+import { useForm } from '@tanstack/react-form'
+
+function SignupForm() {
+  const form = useForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value)
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="firstName"
+        validators={{
+          onChange: ({ value }) =>
+            !value ? 'First name is required' : undefined,
+        }}
+      >
+        {(field) => (
+          <div>
+            <label>First Name</label>
+            <input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+            />
+            {field.state.meta.errors.length > 0 && (
+              <span>{field.state.meta.errors.join(', ')}</span>
+            )}
+          </div>
+        )}
+      </form.Field>
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```

package/template/content/form/en/quick-start.md

@@ -0,0 +1,121 @@
+---
+title: Quick Start
+description: Get up and running with TanStack Form
+---
+
+# Quick Start
+
+## Create a Form
+
+Use the `useForm` hook to create a form instance:
+
+```tsx
+import { useForm } from '@tanstack/react-form'
+
+function MyForm() {
+  const form = useForm({
+    defaultValues: {
+      username: '',
+      password: '',
+    },
+    onSubmit: async ({ value }) => {
+      // Handle form submission
+      await loginUser(value)
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        form.handleSubmit()
+      }}
+    >
+      {/* Fields go here */}
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```
+
+## Add Fields
+
+Use `form.Field` to create type-safe form fields:
+
+```tsx
+<form.Field name="username">
+  {(field) => (
+    <div>
+      <label htmlFor={field.name}>Username</label>
+      <input
+        id={field.name}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+    </div>
+  )}
+</form.Field>
+```
+
+## Add Validation
+
+Add field-level validation with sync or async validators:
+
+```tsx
+<form.Field
+  name="email"
+  validators={{
+    onChange: ({ value }) => {
+      if (!value) return 'Email is required'
+      if (!value.includes('@')) return 'Invalid email address'
+      return undefined
+    },
+    onChangeAsyncDebounceMs: 500,
+    onChangeAsync: async ({ value }) => {
+      const exists = await checkEmailExists(value)
+      return exists ? 'Email already taken' : undefined
+    },
+  }}
+>
+  {(field) => (
+    <div>
+      <input
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+      {field.state.meta.errors.map((error) => (
+        <p key={error} className="text-red-500">{error}</p>
+      ))}
+    </div>
+  )}
+</form.Field>
+```
+
+## Using Zod Validation
+
+```tsx
+import { zodValidator } from '@tanstack/zod-form-adapter'
+import { z } from 'zod'
+
+const form = useForm({
+  defaultValues: { email: '' },
+  validatorAdapter: zodValidator(),
+  onSubmit: async ({ value }) => {
+    console.log(value)
+  },
+})
+
+// Then in your field:
+<form.Field
+  name="email"
+  validators={{
+    onChange: z.string().email('Invalid email'),
+  }}
+>
+  {(field) => /* ... */}
+</form.Field>
+```
+
+> [!NOTE]
+> Async validators support debouncing out of the box with `onChangeAsyncDebounceMs`.

package/template/content/form/ja/installation.md

@@ -0,0 +1,63 @@
+---
+title: インストール
+description: プロジェクトに TanStack Form をインストールする方法
+---
+
+# インストール
+
+## React
+
+```bash
+npm install @tanstack/react-form
+```
+
+```bash
+pnpm add @tanstack/react-form
+```
+
+```bash
+yarn add @tanstack/react-form
+```
+
+```bash
+bun add @tanstack/react-form
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-form
+```
+
+## Angular
+
+```bash
+npm install @tanstack/angular-form
+```
+
+## バリデーションアダプター
+
+TanStack Form はアダプターを通じて人気のバリデーションライブラリをサポートしています：
+
+### Zod
+
+```bash
+npm install @tanstack/zod-form-adapter zod
+```
+
+### Valibot
+
+```bash
+npm install @tanstack/valibot-form-adapter valibot
+```
+
+### Yup
+
+```bash
+npm install @tanstack/yup-form-adapter yup
+```
+
+## 必要要件
+
+- TypeScript 5.0+
+- React 18+ / Vue 3+ / Angular 17+

package/template/content/form/ja/overview.md

@@ -0,0 +1,71 @@
+---
+title: TanStack Form 概要
+description: ヘッドレスで高性能、型安全なフォーム状態管理
+---
+
+# TanStack Form
+
+TanStack Form は、TS/JS、React、Vue、Angular 向けのヘッドレスで高性能、型安全なフォーム状態管理ライブラリです。
+
+## なぜ TanStack Form を選ぶのか？
+
+ほとんどのフォームライブラリは、利便性のために型安全性を犠牲にするか、特定のフレームワークに密結合しています。TanStack Form はその両方を実現します。フォームの値からバリデーションエラーまで完全な型安全性を提供し、React、Vue、Angular のアダプターを備えています。
+
+## 特徴
+
+- **型安全** — フォームの値、フィールド名、バリデーションの完全な TypeScript 推論
+- **フレームワーク非依存** — React、Vue、Angular などで動作
+- **ヘッドレス** — UI の制約なし、独自のコンポーネントを使用
+- **高性能** — フィールドレベルのサブスクリプション、不要な再レンダリングなし
+- **バリデーション** — 組み込みの同期・非同期バリデーション、Zod、Valibot、Yup アダプターをサポート
+- **配列と動的フィールド** — 配列フィールドのファーストクラスサポート
+
+## 基本的な例
+
+```tsx
+import { useForm } from '@tanstack/react-form'
+
+function SignupForm() {
+  const form = useForm({
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value)
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="firstName"
+        validators={{
+          onChange: ({ value }) =>
+            !value ? 'First name is required' : undefined,
+        }}
+      >
+        {(field) => (
+          <div>
+            <label>First Name</label>
+            <input
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+            />
+            {field.state.meta.errors.length > 0 && (
+              <span>{field.state.meta.errors.join(', ')}</span>
+            )}
+          </div>
+        )}
+      </form.Field>
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```

package/template/content/form/zh-hans/installation.md

@@ -0,0 +1,63 @@
+---
+title: 安装
+description: 如何在项目中安装 TanStack Form
+---
+
+# 安装
+
+## React
+
+```bash
+npm install @tanstack/react-form
+```
+
+```bash
+pnpm add @tanstack/react-form
+```
+
+```bash
+yarn add @tanstack/react-form
+```
+
+```bash
+bun add @tanstack/react-form
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-form
+```
+
+## Angular
+
+```bash
+npm install @tanstack/angular-form
+```
+
+## 验证适配器
+
+TanStack Form 通过适配器支持流行的验证库：
+
+### Zod
+
+```bash
+npm install @tanstack/zod-form-adapter zod
+```
+
+### Valibot
+
+```bash
+npm install @tanstack/valibot-form-adapter valibot
+```
+
+### Yup
+
+```bash
+npm install @tanstack/yup-form-adapter yup
+```
+
+## 环境要求
+
+- TypeScript 5.0+
+- React 18+ / Vue 3+ / Angular 17+