バリデーション

{
  "fields": {
    "handle": {
      "input": {
        "name": "handle",
        "required": true,
        "type": "text",
        "minLength": 3,
        "maxLength": 20,
        "pattern": "^[a-z0-9_]+$"
      },
      "messages": {
        "valueMissing": "3 文字以上で入力してください",
        "tooShort": "3 文字以上で入力してください",
        "tooLong": "20 文字以内で入力してください",
        "patternMismatch": "英小文字・数字・_ で入力してください"
      },
      "secret": false
    }
  },
  "rules": [
    {
      "kind": "sameAs",
      "field": "confirm",
      "other": "password",
      "message": "パスワードが一致しません"
    }
  ]
}

// src/routes/settings/_parts/handle-schema.ts
import * as z from 'zod';

export const handleSchema = z.object({
  handle: z
    .string()
    .min(3, 'Use at least 3 characters')
    .max(20, 'Use 20 characters or fewer')
    .regex(/^[a-z0-9_]+$/u, 'Use lowercase letters, digits and _'),
});

// src/routes/settings/_parts/actions.ts
'use server';

import { parseForm } from '@k8ordo/form/server';
import type { FormState } from '@k8ordo/form/server';

import { isHandleTaken, saveHandle } from './accounts.server';
import { handleSchema } from './handle-schema';

export async function changeHandle(
  _previous: FormState,
  formData: FormData,
): Promise<FormState> {
  const parsed = parseForm(handleSchema, formData);
  if (!parsed.success) return parsed.state;
  if (await isHandleTaken(parsed.data.handle)) {
    return { ...parsed.state, errors: { handle: 'That handle is taken' } };
  }
  await saveHandle(parsed.data.handle);
  return {};
}

export async function checkHandle(
  handle: string,
): Promise<string | undefined> {
  return (await isHandleTaken(handle)) ? 'That handle is taken' : undefined;
}

// src/routes/signup/_parts/signup-definition.ts
import {
  defineForm,
  minChecked,
  requiredWhen,
  sameAs,
} from '@k8ordo/form/server';
import * as z from 'zod';

export const signup = defineForm(
  z.object({
    password: z
      .string()
      .min(8, 'Use at least 8 characters')
      .meta({ input: 'password' }),
    confirm: z.string().meta({ input: 'password' }),
    plan: z.enum(['personal', 'business'], 'Choose a plan'),
    company: z.string().max(100, 'Use 100 characters or fewer'),
    topics: z.array(z.enum(['react', 'css', 'a11y'])),
  }),
  [
    sameAs('confirm', 'password', 'The passwords do not match'),
    requiredWhen(
      'company',
      'plan',
      'business',
      'Enter your company for a business plan',
    ),
    minChecked('topics', 2, 'Pick at least two topics'),
  ],
);

// src/routes/signup/_parts/signup-form.tsx
'use client';

import { useForm } from '@k8ordo/form';
import type { FormFields } from '@k8ordo/form';
import { useActionState } from 'react';

import { signUp } from './actions';

const TOPICS = ['react', 'css', 'a11y'] as const;

type Props = {
  fields: FormFields<
    'password' | 'confirm' | 'plan' | 'company' | 'topics',
    never
  >;
};

export function SignupForm({ fields }: Props) {
  const [state, formAction] = useActionState(signUp, {});
  const form = useForm(fields, state);
  const password = form.field('password');
  const confirm = form.field('confirm');
  const plan = form.field('plan');
  const company = form.field('company');
  const topics = form.field('topics');
  const echoed = state.values?.topics ?? [];
  const checked = typeof echoed === 'string' ? [echoed] : echoed;

  return (
    <form {...form.props} action={formAction}>
      <input {...password.input} aria-label="Password" />
      {password.error !== undefined && <p>{password.error}</p>}
      <input {...confirm.input} aria-label="Confirm password" />
      {confirm.error !== undefined && <p>{confirm.error}</p>}

      <select {...plan.input} aria-label="Plan">
        <option value="personal">Personal</option>
        <option value="business">Business</option>
      </select>
      <input {...company.input} aria-label="Company" />
      {company.error !== undefined && <p>{company.error}</p>}

      <fieldset>
        <legend>Topics</legend>
        {TOPICS.map((option) => (
          <label key={option}>
            <input
              defaultChecked={checked.includes(option)}
              name={topics.input.name}
              type="checkbox"
              value={option}
            />
            {option}
          </label>
        ))}
      </fieldset>
      {topics.error !== undefined && <p>{topics.error}</p>}

      <button type="submit">Sign up</button>
    </form>
  );
}

// src/routes/signup/_parts/actions.ts
'use server';

import { parseForm } from '@k8ordo/form/server';
import type { FormState } from '@k8ordo/form/server';
import { redirect } from '@k8ordo/server/runtime';

import { createAccount } from './accounts.server';
import { signup } from './signup-definition';

export async function signUp(
  _previous: FormState,
  formData: FormData,
): Promise<FormState> {
  const parsed = parseForm(signup, formData);
  if (!parsed.success) return parsed.state;
  await createAccount(parsed.data);
  redirect('/welcome');
}

// src/routes/settings/_parts/handle-form.tsx
'use client';

import { useAsyncCheck, useForm } from '@k8ordo/form';
import type { FormFields } from '@k8ordo/form';
import { useActionState } from 'react';

import { changeHandle, checkHandle } from './actions';

type Props = {
  fields: FormFields<'handle', never>;
};

export function HandleForm({ fields }: Props) {
  const [state, formAction] = useActionState(changeHandle, {});
  const form = useForm(fields, state);
  const handle = form.field('handle');
  const taken = useAsyncCheck(checkHandle);

  return (
    <form {...form.props} action={formAction}>
      <label>
        Handle
        <input {...handle.input} {...taken.props} />
      </label>
      {handle.error !== undefined && <p>{handle.error}</p>}
      <button disabled={taken.isChecking} type="submit">
        Save
      </button>
    </form>
  );
}