Form Validation

"use client";

import { useState } from "react";

import {
  MessagePopover,
  type MessageItem,
} from "@/components/f-ui/message-popover/message-popover";
import { FooterToolbar } from "@/components/f-ui/page/footer-toolbar";
import { Button } from "@/components/ui/button";

const MESSAGES: MessageItem[] = [
  {
    id: "e1",
    severity: "error",
    title: "Missing unit price",
    subtitle: "Line 2 · Unit price",
    group: "Line items",
    description: "Enter a price greater than 0.",
  },
  {
    id: "w1",
    severity: "warning",
    title: "Qty looks high",
    subtitle: "Line 1 · Qty",
    group: "Line items",
    description: "Confirm quantity on line 1 before submit.",
  },
];

/**
 * Footer left = Message Popover; finalizing actions on the right.
 * Open after Validate / blocked Submit — not on every draft keystroke.
 */
export function ObjectMessagingFooterPopoverDemo() {
  const [open, setOpen] = useState(false);
  const [items] = useState(MESSAGES);

  return (
    <div className="overflow-hidden rounded-xl border bg-card">
      <div className="space-y-2 border-b px-6 py-3">
        <p className="text-sm font-medium">Purchase request · PR-1042</p>
        <p className="text-xs text-muted-foreground">
          Draft edits stay quiet. Click Validate to open the object message list.
        </p>
        <Button
          type="button"
          variant="outline"
          onClick={() => setOpen(true)}
        >
          Validate
        </Button>
      </div>
      <FooterToolbar
        className="border-t-0"
        extra={
          <MessagePopover
            items={items}
            open={open}
            onOpenChange={setOpen}
          />
        }
      >
        <Button type="button" variant="outline">
          Save draft
        </Button>
        <Button
          type="button"
          onClick={() => setOpen(true)}
        >
          Submit
        </Button>
      </FooterToolbar>
    </div>
  );
}

"use client";

import { useMemo } from "react";
import { toast } from "sonner";

import { defineEditableColumns } from "@/components/f-ui/editable-table/define-editable-columns";
import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { Input } from "@/components/f-ui/formily/connects/input";
import { NumberInput } from "@/components/f-ui/formily/connects/number-input";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormErrorSummary } from "@/components/f-ui/formily/form-error-summary";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { f } from "@/components/f-ui/field-types/catalog";
import { Button } from "@/components/ui/button";

type Line = { id: string; sku: string; qty: number };

type Values = {
  customer: string;
  lines: Line[];
};

const columns = defineEditableColumns<Line>({
  sku: {
    ...f.text({ label: "SKU" }),
    size: 140,
    field: { component: [Input], required: true },
  },
  qty: {
    ...f.number({ label: "Qty" }),
    size: 96,
    field: {
      component: [NumberInput, { surface: "tableCell", min: 1 }],
      required: true,
      validator: (v) => (Number(v) > 0 ? undefined : "must be > 0"),
    },
  },
});

export function FormValidationHeaderPlusEditableTableDemo() {
  const form = useMemo(
    () =>
      createForm<Values>({
        initialValues: {
          customer: "",
          lines: [
            { id: "l1", sku: "SKU-104", qty: 2 },
            { id: "l2", sku: "", qty: 0 },
          ],
        },
      }),
    [],
  );

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        focusOnInvalid="summary"
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <FormField
          name="customer"
          kind="text"
          label="Customer"
          required
        />
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={columns}
          getRowId={(row) => row.id}
          recordCreator={{
            record: () => ({
              id: crypto.randomUUID(),
              sku: "",
              qty: 1,
            }),
          }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

"use client";

import type { Form as FormilyForm } from "@formily/core";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";

import { DesignCompare } from "@/demos/_design/design-compare";
import { defineEditableColumns } from "@/components/f-ui/editable-table/define-editable-columns";
import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { f } from "@/components/f-ui/field-types/catalog";
import { Input } from "@/components/f-ui/formily/connects/input";
import { NumberInput } from "@/components/f-ui/formily/connects/number-input";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormErrorSummary } from "@/components/f-ui/formily/form-error-summary";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import {
  formErrorBannerBodyInnerClassName,
  formErrorBannerHeadingClassName,
  formErrorBannerLinkClassName,
  formErrorBannerRootClassName,
} from "@/components/f-ui/formily/internals/form-error-banner-chrome";
import type { FormIssue } from "@/components/f-ui/formily/internals/form-issue";
import { applyFormIssues } from "@/components/f-ui/formily/internals/form-issues";
import { setFormComposing } from "@/components/f-ui/formily/internals/form-state";
import { FormPage } from "@/components/f-ui/form-page/form-page";
import { ModalForm } from "@/components/f-ui/modal-form/modal-form";
import { PageFooterSlotProvider } from "@/components/f-ui/page/page-footer-slot";
import { StepsForm } from "@/components/f-ui/steps-form/steps-form";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

type Line = { id: string; sku: string; qty: number };

const lineColumns = defineEditableColumns<Line>({
  sku: {
    ...f.text({ label: "SKU" }),
    size: 140,
    field: { component: [Input], required: true },
  },
  qty: {
    ...f.number({ label: "Qty" }),
    size: 88,
    field: {
      component: [NumberInput, { surface: "tableCell", min: 1 }],
      required: true,
      validator: (v) => (Number(v) > 0 ? undefined : "must be > 0"),
    },
  },
});

function submitCatch<T extends object>(form: FormilyForm<T>) {
  void form.submit(() => undefined).catch(() => undefined);
}

const MANY_HEADER_FIELDS = [
  "Customer",
  "PO number",
  "Buyer",
  "Ship-to",
  "Bill-to",
  "Incoterms",
  "Currency",
  "Payment terms",
  "Warehouse",
  "Carrier",
  "Contact name",
  "Contact email",
  "Cost center",
  "Project code",
  "Memo",
  "External ref",
] as const;

/** 16 empty required header fields — summary is the index and it scrolls. */
export function FormValidationManyHeaderErrorsDemo() {
  const initialValues = useMemo(() => {
    const values: Record<string, string> = {};
    for (const label of MANY_HEADER_FIELDS) {
      values[label.replace(/\s+/g, "")] = "";
    }
    return values;
  }, []);
  const form = useMemo(
    () => createForm({ initialValues }),
    [initialValues],
  );

  useEffect(() => {
    submitCatch(form);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          {MANY_HEADER_FIELDS.map((label) => (
            <FormField
              key={label}
              name={label.replace(/\s+/g, "")}
              kind="text"
              label={label}
              required
            />
          ))}
        </div>
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

function manyLines(count: number): Line[] {
  return Array.from({ length: count }, (_, i) => ({
    id: `r${i + 1}`,
    sku: i % 3 === 0 ? `SKU-${100 + i}` : "",
    qty: i % 3 === 0 ? 2 : 0,
  }));
}

/** 24 lines, most invalid — rollup scrolls; summary does not dump every cell. */
export function FormValidationManyCellErrorsDemo() {
  const form = useMemo(
    () =>
      createForm<{ customer: string; lines: Line[] }>({
        initialValues: {
          customer: "Northwind",
          lines: manyLines(24),
        },
      }),
    [],
  );

  useEffect(() => {
    submitCatch(form);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <FormField name="customer" kind="text" label="Customer" required />
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
          features={{ view: { mode: "all", maxHeight: 220 } }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

/** Cells-only page: no FormErrorSummary — rollup is the aggregate. */
export function FormValidationTableOnlyNoSummaryDemo() {
  const form = useMemo(
    () =>
      createForm<{ lines: Line[] }>({
        initialValues: {
          lines: [
            { id: "a", sku: "SKU-1", qty: 1 },
            { id: "b", sku: "", qty: 0 },
          ],
        },
      }),
    [],
  );

  useEffect(() => {
    submitCatch(form);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

/** `scope="form"` keeps only path-less issues — not header fields. */
export function FormValidationSummaryScopeFormDemo() {
  const form = useMemo(
    () =>
      createForm<{ customer: string }>({
        initialValues: { customer: "" },
      }),
    [],
  );
  const [scope, setScope] = useState<"all" | "form">("form");

  return (
    <div className="w-full max-w-md space-y-4">
      <label className="flex items-center gap-2 text-sm">
        <Switch
          checked={scope === "all"}
          onCheckedChange={(on) => setScope(on ? "all" : "form")}
        />
        <span className="text-muted-foreground">
          {scope === "all" ? 'scope="all"' : 'scope="form" (root only)'}
        </span>
      </label>
      <Form
        key={scope}
        form={form}
        onSubmit={() => ({
          status: "error" as const,
          issues: [
            {
              source: "system" as const,
              message: "Could not reach the server",
            },
          ],
        })}
      >
        <FormErrorSummary scope={scope} />
        <FormField name="customer" kind="text" label="Customer" required />
        <FormActions>
          <Button type="submit">
            Submit empty
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

/** Array-root “add at least one line” stays in the summary, not a fake Row N. */
export function FormValidationArrayRootDemo() {
  const form = useMemo(
    () =>
      createForm<{ customer: string; lines: Line[] }>({
        initialValues: { customer: "", lines: [] },
      }),
    [],
  );

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        focusOnInvalid="summary"
        onSubmit={(values) => {
          if (values.lines.length === 0) {
            return {
              status: "error" as const,
              issues: [
                {
                  source: "submit" as const,
                  path: "lines",
                  message: "Add at least one line",
                },
              ],
            };
          }
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <FormField name="customer" kind="text" label="Customer" required />
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
          recordCreator={{
            record: () => ({
              id: crypto.randomUUID(),
              sku: "",
              qty: 1,
            }),
          }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

/** Defer the loud rollup while drafting. */
export function FormValidationDraftRollupDemo() {
  const [showRollup, setShowRollup] = useState(false);
  const form = useMemo(
    () =>
      createForm<{ lines: Line[] }>({
        initialValues: {
          lines: [
            { id: "d1", sku: "", qty: 0 },
            { id: "d2", sku: "", qty: 0 },
          ],
        },
      }),
    [],
  );

  return (
    <div className="w-full max-w-2xl space-y-4">
      <label className="flex items-center gap-2 text-sm">
        <Switch checked={showRollup} onCheckedChange={setShowRollup} />
        <span className="text-muted-foreground">
          showErrorRollup={String(showRollup)}
        </span>
      </label>
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
          showErrorRollup={showRollup}
        />
        <FormActions>
          <Button type="submit">
            Validate
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

/** Two tables → two rollups. */
export function FormValidationTwoTablesDemo() {
  const form = useMemo(
    () =>
      createForm<{ charges: Line[]; notes: Line[] }>({
        initialValues: {
          charges: [{ id: "c1", sku: "", qty: 0 }],
          notes: [{ id: "n1", sku: "", qty: 0 }],
        },
      }),
    [],
  );

  useEffect(() => {
    submitCatch(form);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-6">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <p className="text-muted-foreground text-sm font-medium">Charges</p>
        <EditableTable<Line>
          name="charges"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
        />
        <p className="text-muted-foreground text-sm font-medium">Notes</p>
        <EditableTable<Line>
          name="notes"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

/** Search hides an invalid row — Submit still fails; jump reveals it. */
export function FormValidationHiddenRowSearchDemo() {
  const form = useMemo(
    () =>
      createForm<{ lines: Line[] }>({
        initialValues: {
          lines: [
            { id: "ok", sku: "WIRE-1", qty: 4 },
            { id: "bad", sku: "", qty: 0 },
            { id: "ok2", sku: "WIRE-2", qty: 2 },
          ],
        },
      }),
    [],
  );

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
          features={{ search: true }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

/** Dual scream vs one owner — wrong is stacked Banners of the same SKU, not old pink Alert chrome. */
export function FormValidationDualScreamCompareDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-2 text-sm">
          <div className={formErrorBannerRootClassName} role="presentation">
            <p className={formErrorBannerHeadingClassName}>There is a problem</p>
            <ul className={cn(formErrorBannerBodyInnerClassName, "space-y-1")}>
              <li>
                <span className={formErrorBannerLinkClassName}>SKU is required</span>
              </li>
              <li>
                <span className={formErrorBannerLinkClassName}>
                  Qty must be &gt; 0
                </span>
              </li>
            </ul>
          </div>
          <div className={formErrorBannerRootClassName}>
            <p className={formErrorBannerHeadingClassName}>
              1 row(s) need attention
            </p>
            <p
              className={cn(
                formErrorBannerBodyInnerClassName,
                formErrorBannerLinkClassName,
                "text-xs",
              )}
            >
              Row 2 · SKU: SKU is required
            </p>
          </div>
        </div>
      }
      right={<FormValidationTableOnlyNoSummaryDemo />}
    />
  );
}

export function FormValidationImeSimulateDemo() {
  const form = useMemo(
    () => createForm<{ workEmail: string }>({ initialValues: { workEmail: "" } }),
    [],
  );

  return (
    <div className="w-full max-w-md space-y-4">
      <Form
        form={form}
        revealErrors="touch"
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormField
          name="workEmail"
          kind="email"
          label="Work email"
          required
        />
        <FormActions>
          <Button
            type="button"
            variant="outline"
            onClick={() => setFormComposing(form, true)}
          >
            Start composing
          </Button>
          <Button
            type="button"
            variant="outline"
            onClick={() => setFormComposing(form, false)}
          >
            End composing
          </Button>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

export function FormValidationSecurityRootDemo() {
  const form = useMemo(
    () =>
      createForm<{ email: string; password: string }>({
        initialValues: { email: "", password: "" },
      }),
    [],
  );

  return (
    <div className="w-full max-w-md space-y-4">
      <Form
        form={form}
        onSubmit={() => ({
          status: "error" as const,
          issues: [
            {
              source: "server" as const,
              message: "Email or password is incorrect.",
            },
          ],
        })}
      >
        <FormErrorSummary title="Sign in failed" />
        <FormField name="email" kind="email" label="Email" required />
        <FormField
          name="password"
          kind="password"
          label="Password"
          required
        />
        <FormActions>
          <Button type="submit">
            Sign in
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

type ModalLines = { lines: Line[] };

export function FormValidationModalTableDemo() {
  return (
    <ModalForm<ModalLines>
      trigger={<Button variant="outline">Open line editor</Button>}
      title="Line items"
      description="Dialog default summary is root-only. Cell errors stay on the rollup."
      initialValues={{
        lines: [{ id: "m1", sku: "", qty: 0 }],
      }}
      onFinish={async () => {
        toast.success("Saved");
      }}
    >
      <EditableTable<Line>
        name="lines"
        variant="embedded"
        columns={lineColumns}
        getRowId={(row) => row.id}
      />
    </ModalForm>
  );
}

const ALL_CLASS_ISSUES: FormIssue[] = [
  {
    source: "system",
    message:
      "Could not reach the server. Retry in a few minutes. This line is intentionally long so you can see the summary wrap and scroll instead of truncating.",
  },
  {
    source: "server",
    path: "memo",
    severity: "warning",
    message: "Memo is empty — the default text will be used.",
  },
];

function mergeAfterInvalidSubmit<T extends object>(
  form: FormilyForm<T>,
  extra: FormIssue[],
) {
  void form
    .submit(() => undefined)
    .catch(() => {
      applyFormIssues(form, extra, { mode: "merge" });
    });
}

/**
 * One Submit: header, array-root, cells, root/system, warning — each on its
 * locked surface (summary vs rollup).
 */
export function FormValidationAllClassesDemo() {
  const form = useMemo(
    () =>
      createForm<{ customer: string; memo: string; lines: Line[] }>({
        initialValues: {
          customer: "",
          memo: "",
          lines: [
            { id: "ok", sku: "SKU-1", qty: 2 },
            { id: "bad", sku: "", qty: 0 },
          ],
        },
      }),
    [],
  );

  useEffect(() => {
    mergeAfterInvalidSubmit(form, ALL_CLASS_ISSUES);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <FormField name="customer" kind="text" label="Customer" required />
        <FormField name="memo" kind="text" label="Memo" />
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
        />
        <FormActions>
          <Button type="submit">
            Submit again
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

const VOLUME_HEADERS = [
  "Customer",
  "PO number",
  "Buyer",
  "Ship-to",
  "Warehouse",
  "Carrier",
  "Cost center",
  "External ref",
] as const;

/** Header volume + cell volume + root + warning in one failed Submit. */
export function FormValidationCombinedVolumeDemo() {
  const initialValues = useMemo(() => {
    const values: Record<string, string | Line[]> = {};
    for (const label of VOLUME_HEADERS) {
      values[label.replace(/\s+/g, "")] = "";
    }
    values.memo = "";
    values.lines = manyLines(16);
    return values;
  }, []);
  const form = useMemo(
    () => createForm({ initialValues }),
    [initialValues],
  );

  useEffect(() => {
    mergeAfterInvalidSubmit(form, ALL_CLASS_ISSUES);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          {VOLUME_HEADERS.map((label) => (
            <FormField
              key={label}
              name={label.replace(/\s+/g, "")}
              kind="text"
              label={label}
              required
            />
          ))}
        </div>
        <FormField name="memo" kind="text" label="Memo" />
        <EditableTable<Line>
          name="lines"
          variant="embedded"
          columns={lineColumns}
          getRowId={(row) => row.id}
          features={{ view: { mode: "all", maxHeight: 200 } }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

type Claim = { id: string; qty: number; note: string };
type NestedLine = {
  id: string;
  sku: string;
  claims: Claim[];
};

const nestedParentColumns = defineEditableColumns<NestedLine>({
  sku: {
    ...f.text({ label: "SKU" }),
    size: 140,
    field: { component: [Input], required: true },
  },
});

const nestedClaimColumns = defineEditableColumns<Claim>({
  qty: {
    ...f.number({ label: "Claim qty" }),
    size: 110,
    field: {
      component: [NumberInput, { surface: "tableCell", min: 1 }],
      required: true,
      validator: (v) => (Number(v) > 0 ? undefined : "must be > 0"),
    },
  },
  note: {
    ...f.text({ label: "Note" }),
    field: { component: [Input] },
  },
});

/** Parent cell + nested child cell — two rollup languages, still not in the page summary. */
export function FormValidationNestedTableErrorsDemo() {
  const form = useMemo(
    () =>
      createForm<{ lines: NestedLine[] }>({
        initialValues: {
          lines: [
            {
              id: "p1",
              sku: "A-100",
              claims: [{ id: "c1", qty: 0, note: "" }],
            },
            {
              id: "p2",
              sku: "",
              claims: [],
            },
          ],
        },
      }),
    [],
  );

  useEffect(() => {
    submitCatch(form);
  }, [form]);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <EditableTable<NestedLine>
          name="lines"
          variant="embedded"
          columns={nestedParentColumns}
          getRowId={(row) => row.id}
          nested={{
            path: "claims",
            columns: nestedClaimColumns,
            getChildRowId: (c) => c.id,
            defaultExpanded: true,
            recordCreator: {
              record: () => ({
                id: crypto.randomUUID(),
                qty: 1,
                note: "",
              }),
            },
          }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

/** Server / submit / system issues bypass the reveal gate — no Submit, no blur. */
export function FormValidationServerImmediateDemo() {
  const form = useMemo(
    () =>
      createForm<{ email: string; warehouse: string }>({
        initialValues: { email: "ada@example.com", warehouse: "" },
      }),
    [],
  );

  return (
    <div className="w-full max-w-md space-y-4">
      <Form
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <FormField name="email" kind="email" label="Email" required />
        <FormField name="warehouse" kind="text" label="Warehouse" required />
        <FormActions>
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              applyFormIssues(form, [
                {
                  source: "server",
                  path: "email",
                  message: "Email is already registered.",
                },
              ]);
            }}
          >
            Apply server issue
          </Button>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}

export function FormValidationFormPageShellDemo() {
  const [slot, setSlot] = useState<HTMLElement | null>(null);
  const form = useMemo(
    () =>
      createForm<{ title: string; warehouse: string; lines: Line[] }>({
        initialValues: {
          title: "",
          warehouse: "",
          lines: [{ id: "p1", sku: "", qty: 0 }],
        },
      }),
    [],
  );

  useEffect(() => {
    submitCatch(form);
  }, [form]);

  return (
    <PageFooterSlotProvider target={slot}>
      <div className="overflow-hidden rounded-xl border bg-card">
        <FormPage
          form={form}
          footerVisible
          density="compact"
          className="p-4"
          onFinish={() => {
            toast.success("Saved");
          }}
        >
          <FormField name="title" kind="text" label="Order title" required />
          <FormField name="warehouse" kind="text" label="Warehouse" required />
          <EditableTable<Line>
            name="lines"
            variant="embedded"
            columns={lineColumns}
            getRowId={(row) => row.id}
          />
        </FormPage>
        <div ref={setSlot} />
      </div>
    </PageFooterSlotProvider>
  );
}

export function FormValidationStepsTableDemo() {
  return (
    <div className="w-full max-w-2xl">
      <StepsForm
        initialValues={{
          lines: [{ id: "s1", sku: "", qty: 0 }],
        }}
        errorSummary={false}
        onFinish={async () => {
          toast.success("Queued");
        }}
      >
        <StepsForm.Step name="lines" title="Lines">
          <EditableTable<Line>
            name="lines"
            variant="embedded"
            columns={lineColumns}
            getRowId={(row) => row.id}
          />
        </StepsForm.Step>
        <StepsForm.Step name="done" title="Done">
          <p className="text-muted-foreground text-sm">
            Last step — write API would run on Submit here.
          </p>
        </StepsForm.Step>
      </StepsForm>
    </div>
  );
}

const I18N_COPY = {
  en: {
    required: "Account code is required",
    pattern: "Use letters and digits only",
  },
  zh: {
    required: "必须填写账号代码",
    pattern: "只能使用字母和数字",
  },
} as const;

export function FormValidationI18nDemo() {
  const [lang, setLang] = useState<"en" | "zh">("en");
  const copy = I18N_COPY[lang];
  const form = useMemo(
    () =>
      createForm<{ email: string; code: string }>({
        initialValues: { email: "", code: "" },
      }),
    [lang],
  );

  useEffect(() => {
    submitCatch(form);
  }, [form]);

  return (
    <div className="w-full max-w-md space-y-4">
      <label className="flex items-center gap-2 text-sm">
        <Switch
          checked={lang === "zh"}
          onCheckedChange={(on) => setLang(on ? "zh" : "en")}
        />
        <span className="text-muted-foreground">
          Custom copy: {lang === "zh" ? "zh" : "en"} (email format follows the
          docs site language)
        </span>
      </label>
      <Form
        key={lang}
        form={form}
        onSubmit={() => {
          toast.success("Submitted");
        }}
      >
        <FormErrorSummary />
        <FormField name="email" kind="email" label="Email" required />
        <FormField
          name="code"
          kind="text"
          label="Account code"
          required
          validator={(value) => {
            if (!value) return copy.required;
            if (!/^[A-Za-z0-9]+$/.test(String(value))) return copy.pattern;
            return undefined;
          }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>
    </div>
  );
}