@godxjp/ui 19.0.0 → 19.2.0

package/docs/data-display/data-table/index.tsx

@@ -0,0 +1,295 @@
+import { useMemo, useState } from "react";
+
+import { AppProvider } from "@godxjp/ui/app";
+import { Badge, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@godxjp/ui/navigation";
+import type { DensityProp, SortStateProp } from "@godxjp/ui/props";
+import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
+
+/**
+ * DataTable — the admin list primitive: sticky header, sorting, bulk selection,
+ * density toggle, per-row click navigation, a loading row, and a built-in empty
+ * state (never hand-roll a data.length===0 guard). Composed only from real
+ * @godxjp/ui components.
+ */
+type Invoice = {
+  id: string;
+  partner: string;
+  amount: number;
+  status: "active" | "pending" | "draft" | "failed";
+  date: string;
+};
+
+const invoices: Invoice[] = [
+  {
+    id: "INV-0312",
+    partner: "株式会社ベトヤ",
+    amount: 482000,
+    status: "active",
+    date: "2024-04-12",
+  },
+  { id: "INV-0311", partner: "ハノイ物流", amount: 128400, status: "pending", date: "2024-04-11" },
+  { id: "INV-0310", partner: "GMO決済", amount: 64800, status: "draft", date: "2024-04-10" },
+  { id: "INV-0309", partner: "東京ロジ", amount: 312000, status: "failed", date: "2024-04-09" },
+];
+
+const yen = new Intl.NumberFormat("ja-JP", {
+  style: "currency",
+  currency: "JPY",
+  maximumFractionDigits: 0,
+});
+
+const columns: ColumnDef<Invoice>[] = [
+  { key: "id", header: "請求書番号", width: "w-32" },
+  { key: "partner", header: "取引先", sortable: true },
+  {
+    key: "amount",
+    header: "金額",
+    align: "right",
+    sortable: true,
+    render: (row) => <Text tabular>{yen.format(row.amount)}</Text>,
+  },
+  {
+    key: "status",
+    header: "状態",
+    align: "center",
+    render: (row) => <Badge status={row.status} />,
+  },
+  { key: "date", header: "発行日", align: "right", hiddenOnMobile: true },
+  {
+    key: "_actions",
+    header: "",
+    ariaLabel: "操作",
+    align: "right",
+    enableHiding: false,
+    render: (row) => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon-sm" aria-label={`${row.id} の操作`}>
+            <MoreHorizontal />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>
+            <Pencil />
+            編集
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">
+            <Trash2 />
+            削除
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+];
+
+export default function Demo() {
+  const [selected, setSelected] = useState<Set<string>>(new Set(["INV-0311"]));
+  const [sort, setSort] = useState<SortStateProp | undefined>({
+    key: "amount",
+    direction: "desc",
+  });
+  const [density, setDensity] = useState<DensityProp>("comfortable");
+
+  const rows = useMemo(() => {
+    if (!sort) return invoices;
+    const dir = sort.direction === "asc" ? 1 : -1;
+    return [...invoices].sort((a, b) => {
+      const av = a[sort.key as keyof Invoice];
+      const bv = b[sort.key as keyof Invoice];
+      return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
+    });
+  }, [sort]);
+
+  return (
+    <PageContainer
+      title="DataTable"
+      subtitle="sortable · selectable · bulk actions · row actions · loading · clickable rows · empty state"
+    >
+      <Flex direction="col" gap="lg">
+        {/* Primary: sorted (amount desc), one row preselected, clickable rows,
+            controlled density (comfortable), kebab row actions, pagination footer. */}
+        <DataTable
+          data={rows}
+          columns={columns}
+          getRowId={(row) => row.id}
+          selectable
+          selected={selected}
+          onSelectChange={setSelected}
+          onRowClick={() => {}}
+          density={density}
+          onDensityChange={setDensity}
+          sort={sort}
+          onSortChange={setSort}
+        >
+          <DataTable.Toolbar>
+            <DataTable.BulkActions>
+              <Button size="sm" variant="outline">
+                エクスポート
+              </Button>
+              <Button size="sm">入金消込</Button>
+            </DataTable.BulkActions>
+            <DataTable.DensityToggle />
+          </DataTable.Toolbar>
+          <DataTable.Content />
+          <DataTable.Pagination cursor="INV-0309" hasMore onChange={() => {}} />
+        </DataTable>
+
+        {/* The three density branches rendered statically. The DensityToggle above reaches the
+            same values, but a toggle only proves them after a click; these prove them at rest. */}
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            密度 compact（明細の一覧 · 行高さを最小に）
+          </Text>
+          <DataTable
+            data={invoices}
+            columns={columns}
+            getRowId={(row) => row.id}
+            density="compact"
+          />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            密度 default（既定 · 管理画面の標準）
+          </Text>
+          <DataTable
+            data={invoices}
+            columns={columns}
+            getRowId={(row) => row.id}
+            density="default"
+          />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            密度 comfortable（少数行 · 承認画面など読み取り重視）
+          </Text>
+          <DataTable
+            data={invoices}
+            columns={columns}
+            getRowId={(row) => row.id}
+            density="comfortable"
+          />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            読み込み中（loading=true で行を置き換え）
+          </Text>
+          <DataTable data={invoices} columns={columns} getRowId={(row) => row.id} loading />
+        </Flex>
+
+        <Flex direction="col" gap="sm" className="max-w-sm">
+          <Text as="div" weight="medium">
+            Narrow footer · VI expanded rows-per-page label
+          </Text>
+          <AppProvider defaultLocale="vi" persist={false}>
+            <DataTable data={invoices} columns={columns} getRowId={(row) => row.id}>
+              <DataTable.Pagination pageSizeOptions={[10, 20]} />
+            </DataTable>
+          </AppProvider>
+        </Flex>
+
+        <Flex direction="col" gap="sm" className="max-w-sm">
+          <Text as="div" weight="medium">
+            Narrow footer · JA rows-per-page label
+          </Text>
+          <AppProvider defaultLocale="ja" persist={false}>
+            <DataTable data={invoices} columns={columns} getRowId={(row) => row.id}>
+              <DataTable.Pagination pageSizeOptions={[10, 20]} />
+            </DataTable>
+          </AppProvider>
+        </Flex>
+
+        <Flex direction="col" gap="sm" className="max-w-sm">
+          <Text as="div" weight="medium">
+            Narrow footer · EN longest supported rows-per-page label
+          </Text>
+          <AppProvider defaultLocale="en" persist={false}>
+            <DataTable data={invoices} columns={columns} getRowId={(row) => row.id}>
+              <DataTable.Pagination pageSizeOptions={[10, 20]} />
+            </DataTable>
+          </AppProvider>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            空の状態（data が空のとき自動表示）
+          </Text>
+          <DataTable data={[]} columns={columns} getRowId={(row) => row.id} />
+        </Flex>
+
+        {/* gh#216 — the two failure states, in the same table grid as empty/loading. */}
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            エラー（error · role=&quot;alert&quot; · onRetry で再試行を表示）
+          </Text>
+          <DataTable
+            data={[]}
+            columns={columns}
+            getRowId={(row) => row.id}
+            error
+            onRetry={() => {}}
+          />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            エラー（onRetry なし · 再試行ボタンは出さない）
+          </Text>
+          <DataTable data={[]} columns={columns} getRowId={(row) => row.id} error />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            エラー（error にノードを渡して文言を差し替え）
+          </Text>
+          <DataTable
+            data={[]}
+            columns={columns}
+            getRowId={(row) => row.id}
+            error={<Text tone="muted">コード INV_FETCH_504 · リクエストID req_7f3a91c0d2</Text>}
+          />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            権限なし（denied · 403 は再試行を出さない）
+          </Text>
+          <DataTable data={[]} columns={columns} getRowId={(row) => row.id} denied />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            0 件 + numbered pagination（境界状態）
+          </Text>
+          <DataTable data={[]} columns={columns} getRowId={(row) => row.id}>
+            <DataTable.Content />
+            <DataTable.Pagination pageSizeOptions={[10, 20]} />
+          </DataTable>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            1 件 / 1 ページ + numbered pagination（境界状態）
+          </Text>
+          <DataTable data={invoices.slice(0, 1)} columns={columns} getRowId={(row) => row.id}>
+            <DataTable.Content />
+            <DataTable.Pagination pageSizeOptions={[10, 20]} />
+          </DataTable>
+        </Flex>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/descriptions.tsx

@@ -0,0 +1,143 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Descriptions,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Descriptions — responsive label/value grid for detail-page metadata. COMPOUND:
+ * the value goes in Descriptions.Item children. Never hand-roll a dl/dt/dd grid.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="Descriptions" subtitle="Label / value metadata grid for detail pages">
+      <Flex direction="col" gap="lg">
+        {/* Default columns=2 — the canonical 2-column metadata grid.
+            mono for the ID; span=2 + a long URL value shows full-row + break-all overflow. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>請求書の詳細</CardTitle>
+            <CardDescription>
+              既定は
+              columns=2。値は任意のノード（テキスト・Badge・金額）。狭い画面では1列に折り返します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Descriptions>
+              <Descriptions.Item label="請求書番号" mono>
+                INV-2024-0312
+              </Descriptions.Item>
+              <Descriptions.Item label="取引先">株式会社ベトヤ</Descriptions.Item>
+              <Descriptions.Item label="状態">
+                <Badge status="active" />
+              </Descriptions.Item>
+              <Descriptions.Item label="発行日">2024-04-12</Descriptions.Item>
+              <Descriptions.Item label="小計">
+                <Text tabular>¥438,182</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="消費税 (10%)">
+                <Text tabular>¥43,818</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="合計">
+                <Text weight="medium" tabular>
+                  ¥482,000
+                </Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="PDF リンク" mono span={2}>
+                https://invoices.vetoya.example.co.jp/2024/04/INV-2024-0312-rev2.pdf
+              </Descriptions.Item>
+            </Descriptions>
+          </CardContent>
+        </Card>
+
+        {/* layout="horizontal" — label BESIDE value (token-aligned label column), like <Form layout>.
+            Default layout is "vertical" (label over value, the cards above). */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>横並び (layout=&quot;horizontal&quot;)</CardTitle>
+            <CardDescription>
+              ラベルを値の左に揃える。`--descriptions-label-width` でラベル列幅を調整。既定は
+              layout=&quot;vertical&quot;（ラベルを上に積む、上のカード）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Descriptions columns={1} layout="horizontal">
+              <Descriptions.Item label="請求書番号" mono>
+                INV-2024-0312
+              </Descriptions.Item>
+              <Descriptions.Item label="取引先">株式会社ベトヤ</Descriptions.Item>
+              <Descriptions.Item label="状態">
+                <Badge status="active" />
+              </Descriptions.Item>
+              <Descriptions.Item label="合計">
+                <Text weight="medium" tabular>
+                  ¥482,000
+                </Text>
+              </Descriptions.Item>
+            </Descriptions>
+          </CardContent>
+        </Card>
+
+        {/* columns=1 — stacked detail panel: every item on its own row. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>取引先の詳細</CardTitle>
+            <CardDescription>columns=1。各項目を縦積みにする詳細パネル向けの構成。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Descriptions columns={1}>
+              <Descriptions.Item label="会社名">株式会社ベトヤ</Descriptions.Item>
+              <Descriptions.Item label="法人番号" mono>
+                1180001052731
+              </Descriptions.Item>
+              <Descriptions.Item label="住所">
+                東京都渋谷区神宮前5-52-2 青山オーバルビル7F
+              </Descriptions.Item>
+              <Descriptions.Item label="担当者">山田 太郎（経理部）</Descriptions.Item>
+            </Descriptions>
+          </CardContent>
+        </Card>
+
+        {/* columns=3 — dense metadata grid; span=3 makes the JSON value occupy the full width. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>システムメタデータ</CardTitle>
+            <CardDescription>
+              columns=3。識別子の多い密なメタデータ向け。mono と span でIDやJSONを整列。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Descriptions columns={3}>
+              <Descriptions.Item label="リソースID" mono>
+                inv_8f3a21c0
+              </Descriptions.Item>
+              <Descriptions.Item label="リビジョン" mono>
+                v3
+              </Descriptions.Item>
+              <Descriptions.Item label="状態">
+                <Badge status="active" />
+              </Descriptions.Item>
+              <Descriptions.Item label="作成日時" mono>
+                2024-04-12T09:31:00+09:00
+              </Descriptions.Item>
+              <Descriptions.Item label="更新日時" mono>
+                2024-04-12T14:07:55+09:00
+              </Descriptions.Item>
+              <Descriptions.Item label="作成者">山田 太郎</Descriptions.Item>
+              <Descriptions.Item label="メタデータ" mono span={3}>
+                {'{ "channel": "web", "tax_rate": 0.1, "currency": "JPY" }'}
+              </Descriptions.Item>
+            </Descriptions>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/empty-state.tsx

@@ -0,0 +1,164 @@
+import { Card, CardContent, CardHeader, CardTitle, EmptyState } from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+import {
+  AlertTriangle,
+  Archive,
+  CheckCircle2,
+  Inbox,
+  Info,
+  Plus,
+  SearchX,
+  XCircle,
+} from "lucide-react";
+
+/**
+ * EmptyState — centred zero-state with icon, title, description, and an optional
+ * CTA. Use for non-DataTable lists / zero-state pages (DataTable embeds its own).
+ *
+ * Heading hierarchy: the title is a real heading (default `<h3>`). Pick
+ * `titleLevel` for a VALID page outline (page `<h1>` → section `<h2>` → nested
+ * `<h3>`), never for visual size — the size is fixed by tokens. Below, the page
+ * title is `<h1>` (PageContainer) and each case owns a `<CardTitle level={2}>`
+ * (`<h2>`), so the empty-state titles are `titleLevel={3}` — or `titleAs="p"`
+ * when the message is not itself a heading. Composed only from real @godxjp/ui.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="EmptyState"
+      subtitle="Contextual zero-state · page / section / compact · tone · valid heading order"
+    >
+      <Flex direction="col" gap="lg">
+        {/* page — the empty condition IS the page's primary job (onboarding). */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>page：主要な空状態（オンボーディング）</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <EmptyState
+              variant="page"
+              icon={Inbox}
+              title="請求書がありません"
+              description="最初の請求書を作成して開始しましょう。"
+              titleLevel={3}
+              action={
+                <Button>
+                  <Plus />
+                  新規請求書
+                </Button>
+              }
+            />
+          </CardContent>
+        </Card>
+
+        {/* page — post-search zero result with a clear recovery. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>page：検索結果ゼロ</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <EmptyState
+              icon={SearchX}
+              title="該当する結果がありません"
+              description="フィルター条件を変更して、もう一度お試しください。"
+              titleLevel={3}
+            />
+          </CardContent>
+        </Card>
+
+        {/* section — restrained spacing for a subsection inside a normal page. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>section：セクション内の空状態</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <EmptyState
+              variant="section"
+              icon={SearchX}
+              title="このセクションに結果はありません"
+              description="ページ全体ではない、主要セクション内の空状態です。"
+              titleLevel={3}
+            />
+          </CardContent>
+        </Card>
+
+        {/* compact — secondary content; no medallion, minimal padding, and the
+            message is NOT a heading (titleAs="p") because the card already has one. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>compact：補助的な空状態</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <EmptyState
+              variant="compact"
+              title="保留中の招待はありません"
+              description="補助的な空状態はアイコンを省き、最小限の余白で表示します。"
+              titleAs="p"
+            />
+          </CardContent>
+        </Card>
+
+        {/* tone — a semantic confirmation zero-state. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tone：承認済み（success）</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <EmptyState
+              tone="success"
+              icon={CheckCircle2}
+              title="端末を承認しました"
+              description="この端末からサインインできるようになりました。"
+              titleLevel={3}
+            />
+          </CardContent>
+        </Card>
+
+        {/* tone — the remaining four steps. tone tints the icon medallion only; the copy still
+            carries the meaning, so a zero-state never relies on colour alone. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tone：warning / destructive / info / muted（既定）</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+              <EmptyState
+                variant="section"
+                tone="warning"
+                icon={AlertTriangle}
+                title="未処理の取込エラーがあります"
+                description="取込ログを確認してから再実行してください。"
+                titleLevel={3}
+              />
+              <EmptyState
+                variant="section"
+                tone="destructive"
+                icon={XCircle}
+                title="同期が停止しています"
+                description="接続資格情報の期限が切れたため、データを取得できません。"
+                titleLevel={3}
+              />
+              <EmptyState
+                variant="section"
+                tone="info"
+                icon={Info}
+                title="集計はまだ準備中です"
+                description="当月分の集計は翌営業日の午前に反映されます。"
+                titleLevel={3}
+              />
+              <EmptyState
+                variant="section"
+                tone="muted"
+                icon={Archive}
+                title="アーカイブは空です"
+                description="tone を省略したときの既定です。中立な余白として振る舞います。"
+                titleLevel={3}
+              />
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}