@godxjp/ui 19.1.0 → 19.3.1

package/docs/data-entry/form/examples/invoice-form.tsx

@@ -0,0 +1,387 @@
+import { useState } from "react";
+
+import {
+  Cascader,
+  DatePicker,
+  DateRangePicker,
+  Field,
+  Form,
+  FormField,
+  Input,
+  Select,
+  Slider,
+  Switch,
+  TagInput,
+  Textarea,
+} from "@godxjp/ui/data-entry";
+import type { DateRange } from "react-day-picker";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Avatar,
+  AvatarFallback,
+} from "@godxjp/ui/data-display";
+import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
+import { Button } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  ResponsiveGrid,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { BookOpen, FileText, LayoutDashboard, ReceiptText, Users } from "lucide-react";
+
+const sections: SidebarSectionProp[] = [
+  {
+    label: "会計",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "journal", label: "仕訳", icon: FileText },
+      { id: "invoices", label: "請求書", icon: ReceiptText },
+      { id: "partners", label: "取引先", icon: BookOpen },
+    ],
+  },
+  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
+];
+
+const EXPENSE_CATEGORIES = [
+  {
+    value: "operating",
+    label: "営業費用",
+    children: [
+      { value: "travel", label: "旅費交通費" },
+      { value: "supplies", label: "消耗品費" },
+    ],
+  },
+  {
+    value: "labor",
+    label: "人件費",
+    children: [
+      { value: "salary", label: "給与手当" },
+      { value: "bonus", label: "賞与" },
+    ],
+  },
+];
+
+/** The form's controlled value shape. */
+interface InvoiceForm {
+  partner: string;
+  code: string;
+  account: string;
+  category: string[];
+  issueDate: Date | undefined;
+  period: DateRange | undefined;
+  amount: string;
+  taxRate: number[];
+  labels: string[];
+  memo: string;
+  draft: boolean;
+}
+
+const EMPTY: InvoiceForm = {
+  partner: "",
+  code: "",
+  account: "",
+  category: [],
+  issueDate: undefined,
+  period: undefined,
+  amount: "",
+  taxRate: [10],
+  labels: [],
+  memo: "",
+  draft: false,
+};
+
+type Errors = Partial<Record<keyof InvoiceForm, string>>;
+
+/** Required-field validation — returns a message per empty required field. */
+function validate(v: InvoiceForm): Errors {
+  const e: Errors = {};
+  if (!v.partner.trim()) e.partner = "取引先名は必須です";
+  if (!v.code.trim()) e.code = "取引先コードは必須です";
+  if (!v.account) e.account = "勘定科目を選択してください";
+  if (!v.issueDate) e.issueDate = "発行日を選択してください";
+  if (!v.amount.trim()) e.amount = "金額を入力してください";
+  else if (!/^\d+$/.test(v.amount)) e.amount = "金額は半角数字で入力してください";
+  return e;
+}
+
+/**
+ * Invoice form — a complete, realistic multi-section form with the full controlled validation flow.
+ * Sections are Card blocks; the action bar (Cancel + Submit, primary rightmost — rule 41) lives in
+ * the PageContainer footer. Submitting with empty required fields renders an inline error under each
+ * field AND a summary Alert; fixing a field clears its error live; a valid submit shows a pending
+ * spinner (button disabled) then a success Alert. Composed only from real @godxjp/ui primitives.
+ */
+export default function Demo() {
+  const [v, setV] = useState<InvoiceForm>(EMPTY);
+  const [errors, setErrors] = useState<Errors>({});
+  const [status, setStatus] = useState<"idle" | "pending" | "success">("idle");
+
+  // Update one field and clear its error live (validation-on-fix).
+  function update<K extends keyof InvoiceForm>(key: K, value: InvoiceForm[K]) {
+    setV((s) => ({ ...s, [key]: value }));
+    setErrors((e) => (e[key] ? { ...e, [key]: undefined } : e));
+    if (status === "success") setStatus("idle");
+  }
+
+  function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    const next = validate(v);
+    setErrors(next);
+    if (Object.keys(next).length > 0) {
+      setStatus("idle");
+      return;
+    }
+    // Valid: simulate an async submit — spinner + disabled button, then success.
+    setStatus("pending");
+    window.setTimeout(() => setStatus("success"), 1200);
+  }
+
+  function handleReset() {
+    setV(EMPTY);
+    setErrors({});
+    setStatus("idle");
+  }
+
+  const errorCount = Object.values(errors).filter(Boolean).length;
+  const pending = status === "pending";
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="invoices"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreBooks", role: "管理コンソール", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={
+        <Topbar
+          start={
+            <Avatar className="rounded-md">
+              <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+                C
+              </AvatarFallback>
+            </Avatar>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="請求書を作成"
+        breadcrumb={[{ label: "請求書", to: "#" }, { label: "新規" }]}
+        footer={
+          <Flex direction="row" wrap gap="sm" justify="end">
+            <Button variant="outline" type="button" onClick={handleReset} disabled={pending}>
+              キャンセル
+            </Button>
+            <Button type="submit" form="invoice-form" loading={pending} loadingText="送信中…">
+              作成
+            </Button>
+          </Flex>
+        }
+      >
+        <Form id="invoice-form" onSubmit={handleSubmit}>
+          <Flex direction="col" gap="lg" className="max-w-3xl">
+            {/* Summary feedback — success after a valid submit, or an error summary on failure. */}
+            {status === "success" ? (
+              <Alert tone="success">
+                <AlertTitle>請求書を作成しました</AlertTitle>
+                <AlertDescription>
+                  {v.partner} 宛の請求書（{v.code}）を保存しました。
+                </AlertDescription>
+              </Alert>
+            ) : errorCount > 0 ? (
+              <Alert tone="destructive">
+                <AlertTitle>入力内容を確認してください</AlertTitle>
+                <AlertDescription>
+                  {errorCount} 件の必須項目が未入力です。各項目のエラーメッセージをご確認ください。
+                </AlertDescription>
+              </Alert>
+            ) : null}
+
+            {/* ── Section: 取引先 ── */}
+            <Card>
+              <CardHeader>
+                <CardTitle level={2}>取引先</CardTitle>
+                <CardDescription>請求先の取引先名とコードを入力します。</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveGrid columns={2}>
+                  <FormField
+                    id="iv-partner"
+                    label="取引先名"
+                    required
+                    helper="最大50文字"
+                    error={errors.partner}
+                  >
+                    <Input
+                      id="iv-partner"
+                      value={v.partner}
+                      onChange={(e) => update("partner", e.target.value)}
+                      placeholder="株式会社ベトヤ"
+                      disabled={pending}
+                    />
+                  </FormField>
+                  <FormField
+                    id="iv-code"
+                    label="取引先コード"
+                    required
+                    helper="一意のコード"
+                    error={errors.code}
+                  >
+                    <Input
+                      id="iv-code"
+                      value={v.code}
+                      onChange={(e) => update("code", e.target.value)}
+                      placeholder="BTY-0012"
+                      disabled={pending}
+                    />
+                  </FormField>
+                </ResponsiveGrid>
+              </CardContent>
+            </Card>
+
+            {/* ── Section: 仕訳 ── */}
+            <Card>
+              <CardHeader>
+                <CardTitle level={2}>仕訳</CardTitle>
+                <CardDescription>
+                  勘定科目・経費カテゴリ・金額・税率・日付を入力します。
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveGrid columns={2}>
+                  <FormField id="iv-account" label="勘定科目" required error={errors.account}>
+                    <Select
+                      id="iv-account"
+                      name="account"
+                      value={v.account}
+                      onValueChange={(val: string) => update("account", val)}
+                      placeholder="選択してください"
+                      disabled={pending}
+                      options={[
+                        { value: "sales", label: "売上高" },
+                        { value: "rent", label: "地代家賃" },
+                        { value: "supplies", label: "消耗品費" },
+                      ]}
+                    />
+                  </FormField>
+                  <FormField id="iv-category" label="経費カテゴリ">
+                    <Cascader
+                      id="iv-category"
+                      options={EXPENSE_CATEGORIES}
+                      value={v.category}
+                      onValueChange={(val) => update("category", val as string[])}
+                      placeholder="カテゴリを選択…"
+                      disabled={pending}
+                    />
+                  </FormField>
+                  <FormField id="iv-issue" label="発行日" required error={errors.issueDate}>
+                    <DatePicker
+                      id="iv-issue"
+                      name="issue_date"
+                      value={v.issueDate}
+                      onValueChange={(d) => update("issueDate", d)}
+                    />
+                  </FormField>
+                  <FormField id="iv-period" label="対象期間">
+                    <DateRangePicker
+                      id="iv-period"
+                      name="period"
+                      value={v.period}
+                      onValueChange={(r) => update("period", r)}
+                    />
+                  </FormField>
+                  <FormField
+                    id="iv-amount"
+                    label="金額"
+                    required
+                    helper="税抜・半角数字"
+                    error={errors.amount}
+                  >
+                    <Input
+                      id="iv-amount"
+                      inputMode="numeric"
+                      value={v.amount}
+                      onChange={(e) => update("amount", e.target.value)}
+                      placeholder="100000"
+                      disabled={pending}
+                    />
+                  </FormField>
+                  <FormField
+                    id="iv-tax"
+                    label={`消費税率: ${v.taxRate[0]}%`}
+                    helper="0% / 8% / 10%"
+                  >
+                    <Slider
+                      id="iv-tax"
+                      value={v.taxRate}
+                      onValueChange={(val) => update("taxRate", val)}
+                      min={0}
+                      max={10}
+                      step={2}
+                      name="tax_rate"
+                      aria-label="消費税率"
+                    />
+                  </FormField>
+                </ResponsiveGrid>
+              </CardContent>
+            </Card>
+
+            {/* ── Section: 補足 ── */}
+            <Card>
+              <CardHeader>
+                <CardTitle level={2}>補足</CardTitle>
+                <CardDescription>ラベル・摘要と下書き保存の設定。</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveGrid columns={2}>
+                  <FormField id="iv-labels" label="ラベル" helper="Enter またはカンマで追加">
+                    <TagInput
+                      value={v.labels}
+                      onValueChange={(val) => update("labels", val)}
+                      placeholder="ラベルを追加…"
+                      name="labels"
+                    />
+                  </FormField>
+                  <FormField id="iv-memo" label="摘要" helper="任意" colSpan={2}>
+                    <Textarea
+                      id="iv-memo"
+                      value={v.memo}
+                      onChange={(e) => update("memo", e.target.value)}
+                      placeholder="例: 4月分から取引開始"
+                      disabled={pending}
+                    />
+                  </FormField>
+                  <div style={{ gridColumn: "1 / -1" }}>
+                    <Field
+                      id="iv-draft"
+                      label="下書きとして保存する"
+                      description="送信せず下書きに保存します"
+                    >
+                      <Switch
+                        id="iv-draft"
+                        checked={v.draft}
+                        onCheckedChange={(c) => update("draft", c)}
+                        disabled={pending}
+                      />
+                    </Field>
+                  </div>
+                </ResponsiveGrid>
+              </CardContent>
+            </Card>
+          </Flex>
+        </Form>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/data-entry/form-field/examples/a11y-contract.tsx

@@ -0,0 +1,240 @@
+import { useState } from "react";
+
+import {
+  Cascader,
+  CheckboxGroup,
+  ColorPicker,
+  DatePicker,
+  DateRangePicker,
+  Form,
+  FormField,
+  Input,
+  MonthPicker,
+  RadioGroup,
+  SearchInput,
+  Select,
+  TimePicker,
+  TreeSelect,
+} from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * FormField × custom controls — the accessible-name/description/error contract.
+ *
+ * Every control below is wrapped in a FormField that provides the visible label, helper and error.
+ * FormField injects `aria-labelledby` / `aria-describedby` / `aria-errormessage` / `aria-invalid` /
+ * `aria-required` onto the control, which FORWARDS them to its real semantic focus target — the
+ * combobox trigger, the typeable input, or (for groups/ranges) the `role=group`/`role=radiogroup`
+ * container. Open a screen reader or run axe on this frame: the visible label names the actual
+ * control, not a wrapper div. Composed only from real @godxjp/ui components.
+ */
+
+const REGIONS = [
+  {
+    value: "jp",
+    label: "日本",
+    children: [
+      { value: "kanto", label: "関東", children: [{ value: "tokyo", label: "東京都" }] },
+      { value: "kansai", label: "関西", children: [{ value: "osaka", label: "大阪府" }] },
+    ],
+  },
+];
+
+const CATEGORIES = [
+  {
+    value: "acct",
+    label: "会計",
+    children: [
+      { value: "sales", label: "売上高" },
+      { value: "rent", label: "地代家賃" },
+    ],
+  },
+];
+
+const CURRENCIES = [
+  { value: "jpy", label: "日本円 (JPY)" },
+  { value: "usd", label: "米ドル (USD)" },
+  { value: "vnd", label: "ベトナムドン (VND)" },
+];
+
+export default function Demo() {
+  // Async / server validation + recovery: submit runs a fake server check, sets an error on the
+  // "code" field and focuses it; entering a valid code and resubmitting clears the error.
+  const [code, setCode] = useState("");
+  const [codeError, setCodeError] = useState<string | undefined>();
+  const [status, setStatus] = useState<"idle" | "checking" | "ok">("idle");
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setStatus("checking");
+    // Simulate a server round-trip (a real app would call its API here).
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    if (code.trim().length < 4) {
+      setCodeError("コードは4文字以上で、サーバー上で一意である必要があります");
+      setStatus("idle");
+      // Submit focus: move focus to the first invalid control by its FormField id.
+      document.getElementById("ac-code")?.focus();
+      return;
+    }
+    setCodeError(undefined);
+    setStatus("ok");
+  };
+
+  return (
+    <PageContainer
+      title="FormField × カスタムコントロール"
+      subtitle="ラベル・ヘルプ・エラーの ARIA 契約：フォーカス先の実コントロールに転送"
+    >
+      <Flex direction="col" gap="lg" className="max-w-2xl">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ポップアップ系コントロール（combobox 契約）</CardTitle>
+            <CardDescription>
+              Select（showSearch 含む）/ Cascader / TreeSelect / 各ピッカーはトリガー（combobox）に
+              aria-labelledby・aria-describedby・aria-expanded・aria-controls を転送します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="ac-account" label="勘定科目" required helper="仕訳で使用する科目">
+                <Select
+                  id="ac-account"
+                  name="account"
+                  showSearch
+                  options={[
+                    { value: "sales", label: "売上高" },
+                    { value: "rent", label: "地代家賃" },
+                    { value: "misc", label: "雑費" },
+                  ]}
+                  onValueChange={() => {}}
+                />
+              </FormField>
+              <FormField id="ac-currency" label="通貨" helper="ISO 4217">
+                <Select
+                  id="ac-currency"
+                  name="currency"
+                  options={CURRENCIES}
+                  onValueChange={() => {}}
+                />
+              </FormField>
+              <FormField id="ac-region" label="地域" helper="都道府県まで選択">
+                <Cascader id="ac-region" options={REGIONS} onValueChange={() => {}} />
+              </FormField>
+              <FormField id="ac-category" label="カテゴリ" helper="ツリーから選択">
+                <TreeSelect id="ac-category" treeData={CATEGORIES} onValueChange={() => {}} />
+              </FormField>
+              <FormField id="ac-date" label="取引日" helper="yyyy-MM-dd">
+                <DatePicker id="ac-date" name="date" />
+              </FormField>
+              <FormField id="ac-month" label="対象月" helper="yyyy/MM">
+                <MonthPicker id="ac-month" name="month" />
+              </FormField>
+              <FormField id="ac-time" label="締め時刻" helper="24時間表記">
+                <TimePicker id="ac-time" name="time" />
+              </FormField>
+              <FormField id="ac-period" label="対象期間" helper="開始日と終了日">
+                <DateRangePicker id="ac-period" name="period" />
+              </FormField>
+              <FormField id="ac-color" label="タグ色" helper="16進カラー">
+                <ColorPicker id="ac-color" onValueChange={() => {}} />
+              </FormField>
+              <FormField id="ac-search" label="取引先検索" helper="名称の一部で検索">
+                <SearchInput id="ac-search" />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>グループ系コントロール（group / radiogroup 契約）</CardTitle>
+            <CardDescription>
+              RadioGroup は role=radiogroup で完全な検証 ARIA を、CheckboxGroup は role=group で
+              ラベルと説明（エラーは説明に統合）を公開します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField
+                id="ac-method"
+                label="支払方法"
+                required
+                error="支払方法を選択してください"
+              >
+                <RadioGroup
+                  id="ac-method"
+                  options={[
+                    { value: "bank", label: "銀行振込" },
+                    { value: "card", label: "クレジットカード" },
+                    { value: "cash", label: "現金" },
+                  ]}
+                  onValueChange={() => {}}
+                />
+              </FormField>
+              <FormField id="ac-tags" label="タグ" helper="複数選択できます">
+                <CheckboxGroup
+                  id="ac-tags"
+                  orientation="horizontal"
+                  options={[
+                    { value: "urgent", label: "至急" },
+                    { value: "review", label: "要確認" },
+                    { value: "archived", label: "アーカイブ" },
+                  ]}
+                  onValueChange={() => {}}
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>エラーのタイミング・非同期検証・回復</CardTitle>
+            <CardDescription>
+              エラーは送信後にのみ表示（role=alert
+              で即時アナウンス）。修正して再送信するとエラーが解除され、 helper
+              に戻ります。送信時は最初の不正なコントロールへフォーカスします。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form onSubmit={submit} layout="vertical">
+              <Flex direction="col" gap="md">
+                <FormField
+                  id="ac-code"
+                  label="取引先コード"
+                  required
+                  helper="4文字以上・サーバー上で一意"
+                  error={codeError}
+                >
+                  <Input
+                    id="ac-code"
+                    name="code"
+                    value={code}
+                    onChange={(event) => {
+                      setCode(event.target.value);
+                      if (codeError) setCodeError(undefined);
+                    }}
+                  />
+                </FormField>
+                {status === "ok" ? (
+                  <Alert tone="success">
+                    <AlertTitle>検証に成功しました</AlertTitle>
+                    <AlertDescription>コードは利用可能です。</AlertDescription>
+                  </Alert>
+                ) : null}
+                <Flex direction="row" justify="end">
+                  <Button type="submit" loading={status === "checking"}>
+                    検証して送信
+                  </Button>
+                </Flex>
+              </Flex>
+            </Form>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}