@godxjp/ui 31.31.8 → 32.0.1

package/docs/data-entry/form/examples/employee-settings.tsx

@@ -1,267 +0,0 @@
-import { useState } from "react";
-
-import {
-  CheckboxGroup,
-  Field,
-  Form,
-  FormField,
-  Input,
-  RadioGroup,
-  Select,
-  Switch,
-  TimePicker,
-} from "@godxjp/ui/data-entry";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Avatar,
-  AvatarFallback,
-} from "@godxjp/ui/data-display";
-import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { Settings, ShieldCheck, User, Users } from "lucide-react";
-
-const sections: SidebarSectionProp[] = [
-  {
-    label: "設定",
-    items: [
-      { id: "profile", label: "プロフィール", icon: User },
-      { id: "members", label: "メンバー", icon: Users },
-      { id: "security", label: "セキュリティ", icon: ShieldCheck },
-      { id: "preferences", label: "環境設定", icon: Settings },
-    ],
-  },
-];
-
-/**
- * Employee settings — a horizontal-layout (labelWidth) settings screen using Card sections. Shows
- * read-only system fields (employee number, joined date), a disabled field, controlled selects and
- * choice groups, and a save flow with a pending spinner and a "保存しました" success Alert. The
- * action bar lives in the page footer (Cancel + Save, primary rightmost — rule 41). Composed only
- * from real @godxjp/ui primitives; typography via the Text primitive.
- */
-export default function Demo() {
-  const [name, setName] = useState("山田 太郎");
-  const [department, setDepartment] = useState("sales");
-  const [role, setRole] = useState("member");
-  const [notify, setNotify] = useState<string[]>(["email", "slack"]);
-  const [coreStart, setCoreStart] = useState("10:00");
-  const [coreEnd, setCoreEnd] = useState("15:00");
-  const [twoFactor, setTwoFactor] = useState(true);
-  const [status, setStatus] = useState<"idle" | "pending" | "saved">("idle");
-
-  function dirty() {
-    if (status === "saved") setStatus("idle");
-  }
-
-  function handleSave(event: React.FormEvent) {
-    event.preventDefault();
-    setStatus("pending");
-    window.setTimeout(() => setStatus("saved"), 1000);
-  }
-
-  const pending = status === "pending";
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="profile"
-          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" disabled={pending}>
-              キャンセル
-            </Button>
-            <Button type="submit" form="settings-form" loading={pending} loadingText="保存中…">
-              保存
-            </Button>
-          </Flex>
-        }
-      >
-        {/* One <form> wraps all sections (nested <form> is invalid HTML). The Form sets a default
-            horizontal layout; the 勤務・通知 fields below override to vertical per-field. */}
-        <Form id="settings-form" onSubmit={handleSave} layout="horizontal" labelWidth={140}>
-          <Flex direction="col" gap="lg" className="max-w-2xl">
-            {status === "saved" ? (
-              <Alert tone="success">
-                <AlertTitle>保存しました</AlertTitle>
-                <AlertDescription>従業員設定を更新しました。</AlertDescription>
-              </Alert>
-            ) : null}
-
-            <Card>
-              <CardHeader>
-                <CardTitle level={2}>基本情報</CardTitle>
-                <CardDescription>
-                  ラベルは固定幅の列に横並び（horizontal）。システム発番の項目は read-only。
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="ui-form">
-                  <FormField id="es-number" label="従業員番号">
-                    <Input id="es-number" readOnly value="EMP-2021-0042" />
-                  </FormField>
-                  <FormField id="es-joined" label="入社日">
-                    <Input id="es-joined" readOnly value="2021-04-01" />
-                  </FormField>
-                  <FormField id="es-name" label="氏名" required>
-                    <Input
-                      id="es-name"
-                      value={name}
-                      onChange={(e) => {
-                        setName(e.target.value);
-                        dirty();
-                      }}
-                      disabled={pending}
-                    />
-                  </FormField>
-                  <FormField id="es-email" label="メール（変更不可 · disabled）">
-                    <Input id="es-email" disabled value="taro@example.co.jp" />
-                  </FormField>
-                  <FormField id="es-dept" label="所属部署">
-                    <Select
-                      id="es-dept"
-                      name="department"
-                      value={department}
-                      onValueChange={(v: string) => {
-                        setDepartment(v);
-                        dirty();
-                      }}
-                      disabled={pending}
-                      options={[
-                        { value: "sales", label: "営業部" },
-                        { value: "accounting", label: "経理部" },
-                        { value: "engineering", label: "開発部" },
-                      ]}
-                    />
-                  </FormField>
-                  <FormField id="es-role" label="権限">
-                    <RadioGroup
-                      value={role}
-                      onValueChange={(v) => {
-                        setRole(v);
-                        dirty();
-                      }}
-                      orientation="horizontal"
-                      options={[
-                        { value: "admin", label: "管理者" },
-                        { value: "member", label: "一般" },
-                        { value: "viewer", label: "閲覧のみ" },
-                      ]}
-                    />
-                  </FormField>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle level={2}>勤務・通知</CardTitle>
-                <CardDescription>コアタイムと通知チャネル、二要素認証の設定。</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Flex direction="col" gap="md">
-                  <Flex direction="row" gap="md" wrap>
-                    <FormField id="es-core-start" label="コアタイム開始" layout="vertical">
-                      <TimePicker
-                        id="es-core-start"
-                        name="core_start"
-                        value={coreStart}
-                        onValueChange={(v) => {
-                          setCoreStart(v);
-                          dirty();
-                        }}
-                        minuteStep={15}
-                      />
-                    </FormField>
-                    <FormField id="es-core-end" label="コアタイム終了" layout="vertical">
-                      <TimePicker
-                        id="es-core-end"
-                        name="core_end"
-                        value={coreEnd}
-                        onValueChange={(v) => {
-                          setCoreEnd(v);
-                          dirty();
-                        }}
-                        minuteStep={15}
-                      />
-                    </FormField>
-                  </Flex>
-                  <FormField
-                    id="es-notify"
-                    label="通知チャネル"
-                    helper="複数選択可"
-                    layout="vertical"
-                  >
-                    <CheckboxGroup
-                      value={notify}
-                      onValueChange={(v) => {
-                        setNotify(v);
-                        dirty();
-                      }}
-                      orientation="horizontal"
-                      options={[
-                        { value: "email", label: "メール" },
-                        { value: "slack", label: "Slack" },
-                        { value: "sms", label: "SMS" },
-                      ]}
-                    />
-                  </FormField>
-                  <Field
-                    id="es-2fa"
-                    label="二要素認証を有効にする"
-                    description="ログイン時にワンタイムコードを要求します"
-                  >
-                    <Switch
-                      id="es-2fa"
-                      checked={twoFactor}
-                      onCheckedChange={(c) => {
-                        setTwoFactor(c);
-                        dirty();
-                      }}
-                      disabled={pending}
-                    />
-                  </Field>
-                  <Text tone="muted" size="xs">
-                    変更は「保存」を押すまで反映されません。
-                  </Text>
-                </Flex>
-              </CardContent>
-            </Card>
-          </Flex>
-        </Form>
-      </PageContainer>
-    </AppShell>
-  );
-}

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

@@ -1,387 +0,0 @@
-import { useState } from "react";
-
-import {
-  Cascader,
-  DatePicker,
-  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="対象期間">
-                    <DatePicker
-                      range
-                      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>
-  );
-}