@godxjp/ui 31.31.8 → 32.0.1

package/docs/data-entry/form-dynamic-fields.tsx

@@ -1,199 +0,0 @@
-import { useState } from "react";
-import { z } from "zod";
-import { Alert, AlertDescription } from "@godxjp/ui/feedback";
-import { Input, Select } from "@godxjp/ui/data-entry";
-import { Button } from "@godxjp/ui/general";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import {
-  FormFieldArray,
-  FormFieldControl,
-  FormRoot,
-  useFormDisabled,
-  useFormWatch,
-  useZodForm,
-} from "@godxjp/ui/form";
-
-const schema = z.object({
-  plan: z.enum(["standard", "enterprise"]),
-  contacts: z
-    .array(
-      z.object({
-        name: z.string().min(1, "担当者名を入力してください"),
-        email: z.string().email("有効なメールアドレスを入力してください"),
-      }),
-    )
-    .min(1, "担当者を 1 名以上登録してください"),
-});
-
-type Values = z.infer<typeof schema>;
-
-const emptyContact = { name: "", email: "" };
-
-/** Counter driven by useFormWatch — re-renders on `contacts` only, not on every keystroke elsewhere. */
-function ContactCount() {
-  const contacts = useFormWatch<Values>("contacts");
-  return (
-    <CardDescription>
-      {`登録済み ${Array.isArray(contacts) ? contacts.length : 0} 名 · 行の追加・削除・並べ替えは送信値の順序にそのまま反映されます。`}
-    </CardDescription>
-  );
-}
-
-/** Action buttons are not fields, so they read the form-level disabled state themselves. */
-function Actions({ onReset }: { onReset: () => void }) {
-  const disabled = useFormDisabled();
-  return (
-    <Flex gap="sm" wrap>
-      <Button type="submit" disabled={disabled}>
-        保存
-      </Button>
-      <Button type="reset" variant="outline" disabled={disabled} onClick={onReset}>
-        リセット
-      </Button>
-    </Flex>
-  );
-}
-
-export default function Demo() {
-  const [status, setStatus] = useState<"idle" | "saved" | "failed">("idle");
-  const [locked, setLocked] = useState(false);
-  const form = useZodForm(schema, {
-    defaultValues: {
-      plan: "standard",
-      contacts: [{ name: "田中 花子", email: "tanaka@example.jp" }],
-    },
-  });
-
-  return (
-    <PageContainer
-      title="FormFieldArray"
-      subtitle="動的な繰り返しフィールド · watch / disabled / reset / 送信失敗"
-    >
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>請求先の担当者</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <FormRoot
-            form={form}
-            layout="horizontal"
-            disabled={locked}
-            onSubmit={() => setStatus("saved")}
-            onSubmitFailed={() => setStatus("failed")}
-            onReset={() => setStatus("idle")}
-          >
-            <ContactCount />
-            {status === "failed" && (
-              <Alert tone="destructive">
-                <AlertDescription>
-                  入力内容を確認してください。最初のエラー項目へ移動しました。
-                </AlertDescription>
-              </Alert>
-            )}
-            {status === "saved" && (
-              <Alert tone="success">
-                <AlertDescription>保存しました。</AlertDescription>
-              </Alert>
-            )}
-
-            <FormFieldControl<Values> name="plan" label="プラン">
-              {(field) => (
-                <Select
-                  {...field}
-                  value={typeof field.value === "string" ? field.value : "standard"}
-                  onValueChange={field.onValueChange}
-                  options={[
-                    { value: "standard", label: "スタンダード" },
-                    { value: "enterprise", label: "エンタープライズ" },
-                  ]}
-                />
-              )}
-            </FormFieldControl>
-
-            <FormFieldArray<Values, "contacts"> name="contacts">
-              {({ fields, append, remove, move, error, disabled }) => (
-                <>
-                  {error && (
-                    <Alert tone="destructive">
-                      <AlertDescription>{error}</AlertDescription>
-                    </Alert>
-                  )}
-                  {fields.map((row, position) => (
-                    <Card key={row.key} variant="outline">
-                      <CardContent>
-                        <Flex direction="col" gap="md">
-                          <FormFieldControl<Values>
-                            name={`${row.name}.name`}
-                            label={`担当者 ${position + 1} · 氏名`}
-                            required
-                          >
-                            {(field) => (
-                              <Input
-                                {...field}
-                                value={typeof field.value === "string" ? field.value : ""}
-                              />
-                            )}
-                          </FormFieldControl>
-                          <FormFieldControl<Values>
-                            name={`${row.name}.email`}
-                            label={`担当者 ${position + 1} · メール`}
-                            required
-                          >
-                            {(field) => (
-                              <Input
-                                {...field}
-                                type="email"
-                                value={typeof field.value === "string" ? field.value : ""}
-                              />
-                            )}
-                          </FormFieldControl>
-                          <Flex gap="sm" wrap>
-                            <Button
-                              type="button"
-                              variant="outline"
-                              size="sm"
-                              disabled={disabled || position === 0}
-                              onClick={() => move(row.index, row.index - 1)}
-                            >
-                              {`担当者 ${position + 1} を上へ`}
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="destructive"
-                              size="sm"
-                              disabled={disabled || fields.length === 1}
-                              onClick={() => remove(row.index)}
-                            >
-                              {`担当者 ${position + 1} を削除`}
-                            </Button>
-                          </Flex>
-                        </Flex>
-                      </CardContent>
-                    </Card>
-                  ))}
-                  <Button
-                    type="button"
-                    variant="outline"
-                    disabled={disabled}
-                    onClick={() => append(emptyContact)}
-                  >
-                    担当者を追加
-                  </Button>
-                </>
-              )}
-            </FormFieldArray>
-
-            <Actions onReset={() => setStatus("idle")} />
-          </FormRoot>
-        </CardContent>
-      </Card>
-
-      <Flex gap="sm" wrap>
-        <Button type="button" variant="ghost" onClick={() => setLocked((value) => !value)}>
-          {locked ? "フォームのロックを解除" : "フォーム全体をロック (disabled)"}
-        </Button>
-      </Flex>
-    </PageContainer>
-  );
-}

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

@@ -1,242 +0,0 @@
-import { useState } from "react";
-
-import {
-  Cascader,
-  CheckboxGroup,
-  ColorPicker,
-  DatePicker,
-  Form,
-  FormField,
-  Input,
-  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>
-            <Form>
-              <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">
-                  <DatePicker picker="month" 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="開始日と終了日">
-                  <DatePicker range 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>
-            </Form>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>グループ系コントロール（group / radiogroup 契約）</CardTitle>
-            <CardDescription>
-              RadioGroup は role=radiogroup で完全な検証 ARIA を、CheckboxGroup は role=group で
-              ラベルと説明（エラーは説明に統合）を公開します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <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>
-            </Form>
-          </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>
-  );
-}

package/docs/data-entry/form-field/examples/create-form.tsx

@@ -1,107 +0,0 @@
-import { useState } from "react";
-
-import { Form, Field, FormField, Input, Select, Switch, Textarea } from "@godxjp/ui/data-entry";
-import { Button } from "@godxjp/ui/general";
-import { Avatar, AvatarFallback } from "@godxjp/ui/data-display";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { BookOpen, FileText, LayoutDashboard, ReceiptText, Users } from "lucide-react";
-
-/**
- * Create form — a real screen: FormField wraps each stacked control (Input /
- * Select / Textarea), Field pairs the Switch with its label, and the page's
- * footer holds the primary submit + outline cancel. The canonical data-entry
- * page, composed only from real @godxjp/ui components.
- */
-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 }] },
-];
-
-export default function Demo() {
-  const [type, setType] = useState("corp");
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="partners"
-          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">
-              キャンセル
-            </Button>
-            <Button type="submit">作成</Button>
-          </Flex>
-        }
-      >
-        <Form>
-          <Flex direction="col" gap="md" className="max-w-2xl">
-            <FormField id="cf-name" label="取引先名" required helper="最大50文字">
-              <Input id="cf-name" placeholder="株式会社ベトヤ" />
-            </FormField>
-            <FormField id="cf-code" label="取引先コード" required helper="一意のコードを入力">
-              <Input id="cf-code" placeholder="BTY-0012" />
-            </FormField>
-            <FormField id="cf-type" label="区分">
-              <Select
-                id="cf-type"
-                name="type"
-                value={type}
-                onValueChange={setType}
-                options={[
-                  { value: "corp", label: "法人" },
-                  { value: "indiv", label: "個人事業主" },
-                ]}
-              />
-            </FormField>
-            <FormField id="cf-memo" label="メモ" helper="任意">
-              <Textarea id="cf-memo" placeholder="例: 4月分から取引開始" />
-            </FormField>
-            <Field
-              id="cf-active"
-              label="取引を有効にする"
-              description="無効にすると新規取引を登録できません"
-            >
-              <Switch id="cf-active" defaultChecked />
-            </Field>
-          </Flex>
-        </Form>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/data-entry/form-field/index.md

@@ -1,8 +0,0 @@
----
-title: Overview
----
-
-The labelled-field wrapper for every stacked control — it renders the label, a required
-asterisk, a helper hint or a role="alert" error, and wires `aria-describedby` /
-`aria-invalid` onto the single child control. Use `Field` instead for a checkbox/switch
-beside its label. See Examples for a full create form.