@godxjp/ui 19.1.0 → 19.2.0

package/docs/data-display/credential-reveal.tsx

@@ -0,0 +1,145 @@
+import * as React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CredentialReveal,
+} from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@godxjp/ui/feedback";
+
+const API_KEY = "gxp_live_8Fh2kQ9wR7nZ1xV4bT6mL0cD3pS5yJ";
+const CLIENT_SECRET = "cs_9aE2rT4uY6iO8pA1sD3fG5hJ7kL9zX";
+
+/**
+ * CredentialReveal — the one-time secret pattern (device credential / API key / service-account
+ * secret). Masked by default, a show/hide toggle, a copy button that confirms the copy, an optional
+ * download, and an acknowledge action to pair with a Dialog. Composed only from real @godxjp/ui.
+ */
+export default function Demo() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <PageContainer
+      title="CredentialReveal"
+      subtitle="一度だけ表示するシークレット · マスク解除 + コピー + 期限警告"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Dialog に組み込む（推奨）</CardTitle>
+            <CardDescription>
+              APIキー発行直後の一度きり表示。onAcknowledge で「保存しました」を押すまで閉じません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button onClick={() => setOpen(true)}>APIキーを発行</Button>
+            <Dialog open={open} onOpenChange={setOpen}>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>APIキーを発行しました</DialogTitle>
+                  <DialogDescription>
+                    このキーはこの画面でのみ表示されます。安全な場所に保管してください。
+                  </DialogDescription>
+                </DialogHeader>
+                <CredentialReveal
+                  label="APIキー"
+                  secret={API_KEY}
+                  downloadable
+                  onAcknowledge={() => setOpen(false)}
+                />
+              </DialogContent>
+            </Dialog>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>インライン（マスク解除 + コピー）</CardTitle>
+            <CardDescription>
+              既定はマスク表示。目のトグルで表示、コピーボタンは成功を aria-live で通知します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CredentialReveal label="クライアントシークレット" secret={CLIENT_SECRET} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ダウンロード付き</CardTitle>
+            <CardDescription>
+              downloadable でファイル保存を提供。復旧コードやブートストラップ資格情報向け。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CredentialReveal
+              label="リカバリーコード"
+              secret="8QF2-K9WR-7NZ1-XV4B-T6ML"
+              downloadable
+              downloadFileName="recovery-code.txt"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Tone</CardTitle>
+            <CardDescription>
+              警告帯の severity は tone。warning（既定）は保管を促す通常の一度きり表示、destructive
+              は失効・再発行が必要な重大な扱い、info は運用上の補足に使います。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <CredentialReveal
+                label="サービスアカウント鍵"
+                secret="svc_3pS5yJ8Fh2kQ9wR7nZ1xV4bT"
+                tone="warning"
+              />
+              <CredentialReveal
+                label="デバイス資格情報"
+                secret="dev_7h2K9wR7nZ1xV4bT6mL0cD"
+                tone="destructive"
+              />
+              <CredentialReveal
+                label="Webhook 署名シークレット"
+                secret="whsec_1xV4bT6mL0cD3pS5yJ8Fh2kQ"
+                tone="info"
+                warning="このシークレットは Webhook 署名の検証にのみ使用します。"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Size</CardTitle>
+            <CardDescription>
+              size は資格情報行の高さと操作ボタンの寸法を決めます。xs / sm
+              は明細行や設定表の中に、md （既定）は単独のカードに、lg
+              は発行直後のダイアログで使います。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <CredentialReveal label="xs" secret="key_xs_9wR7nZ1xV4bT6mL0cD" size="xs" />
+              <CredentialReveal label="sm" secret="key_sm_9wR7nZ1xV4bT6mL0cD" size="sm" />
+              <CredentialReveal label="md（既定）" secret="key_md_9wR7nZ1xV4bT6mL0cD" size="md" />
+              <CredentialReveal label="lg" secret="key_lg_9wR7nZ1xV4bT6mL0cD" size="lg" />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/data-table/examples/approval-queue.tsx

@@ -0,0 +1,212 @@
+import { useState } from "react";
+
+import { Badge, Card, CardContent, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@godxjp/ui/navigation";
+import { ClipboardCheck, LayoutDashboard, MoreHorizontal, ScrollText } from "lucide-react";
+
+/**
+ * Access-approval queue (SCR-105 / gh#253) — the canonical five-column approval collection driven
+ * by the TanStack-powered DataTable, at 1440 · 1024 · 390 with ONLY public API.
+ *
+ * The whole responsive contract is two props: `preset="action-collection"` on the DataTable and a
+ * `priority` on each `ColumnDef`. Below the collapse step the package swaps the desktop intrinsic
+ * column widths for the token-owned priority measures (`--table-action-collection-*`) under
+ * `table-layout: fixed`, lets cells wrap, and releases the surface's
+ * `--table-surface-min-inline-size` floor — so 申請者 · 対象 · 理由 · 申請日時 · 操作 all stay
+ * inside the initial 390px frame. No page-local CSS, no consumer width, no hidden column, no
+ * horizontal scroll.
+ *
+ * It stays a REAL table at every width — `<thead>` / `<th scope>` / `<tr>` / `<td>` are untouched,
+ * sorting keeps `aria-sort`, and the row-action affordance is the column whose measure is reserved
+ * first, so it can never be pushed outside the viewport. Content is JA + EN + VI, including a
+ * deliberately long reason and a long resource path.
+ */
+type AccessRequest = {
+  id: string;
+  requester: string;
+  requesterMail: string;
+  target: string;
+  reason: string;
+  requestedAt: string;
+  state: "pending" | "escalated";
+};
+
+const requests: AccessRequest[] = [
+  {
+    id: "req-1041",
+    requester: "田中 太郎",
+    requesterMail: "taro.tanaka@example.co.jp",
+    target: "会計 / 請求書エクスポート",
+    reason: "月次決算のため請求データの一括出力権限が必要です。",
+    requestedAt: "2026-08-03T09:12:00+09:00",
+    state: "pending",
+  },
+  {
+    id: "req-1042",
+    requester: "Nguyễn Thị Hồng Ánh",
+    requesterMail: "hong.anh.nguyen@example.vn",
+    target: "Kho vận / Quản trị phiếu xuất kho khu vực miền Nam",
+    reason:
+      "Cần quyền quản trị để xử lý phiếu xuất kho tồn đọng của chi nhánh miền Nam trong kỳ kiểm kê quý III.",
+    requestedAt: "2026-08-03T11:47:00+09:00",
+    state: "escalated",
+  },
+  {
+    id: "req-1043",
+    requester: "Margaret Whitmore-Ashcombe",
+    requesterMail: "margaret.whitmore@example.com",
+    target: "Identity / Service account administration",
+    reason: "Rotating the service-account credentials scheduled for the August maintenance window.",
+    requestedAt: "2026-08-04T02:05:00+09:00",
+    state: "pending",
+  },
+  {
+    id: "req-1044",
+    requester: "佐藤 花子",
+    requesterMail: "hanako.sato@example.co.jp",
+    target: "勤怠 / 部門レポート",
+    reason: "部門別の残業集計を確認するため。",
+    requestedAt: "2026-08-04T08:30:00+09:00",
+    state: "pending",
+  },
+];
+
+// ISO-8601 input → locale/timezone-aware display via Intl (never hand-built).
+const requestedAtFormat = new Intl.DateTimeFormat("ja-JP", {
+  dateStyle: "short",
+  timeStyle: "short",
+  timeZone: "Asia/Tokyo",
+});
+
+const sections: SidebarSectionProp[] = [
+  {
+    label: "運用",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "approvals", label: "アクセス承認", icon: ClipboardCheck },
+      { id: "audit", label: "監査ログ", icon: ScrollText },
+    ],
+  },
+];
+
+// `priority` is the column-priority contract: primary = the row's subject, secondary = its target,
+// meta = a low-priority stamp, actions = the affordance whose measure is reserved first. The
+// free-text 理由 column is deliberately UNMARKED — it takes whatever space is left.
+const columns: ColumnDef<AccessRequest>[] = [
+  {
+    key: "requester",
+    header: "申請者",
+    priority: "primary",
+    sortable: true,
+    render: (row) => (
+      <Flex direction="col" gap="xs" align="start">
+        <Text size="sm">{row.requester}</Text>
+        <Text size="xs" tone="muted">
+          {row.requesterMail}
+        </Text>
+      </Flex>
+    ),
+  },
+  {
+    key: "target",
+    header: "対象",
+    priority: "secondary",
+    render: (row) => (
+      <Flex direction="col" gap="xs" align="start">
+        <Text size="sm">{row.target}</Text>
+        {row.state === "escalated" && <Badge tone="warning">エスカレーション</Badge>}
+      </Flex>
+    ),
+  },
+  {
+    key: "reason",
+    header: "理由",
+    render: (row) => <Text size="sm">{row.reason}</Text>,
+  },
+  {
+    key: "requestedAt",
+    header: "申請日時",
+    priority: "meta",
+    sortable: true,
+    render: (row) => (
+      <Text size="xs" tone="muted">
+        <time dateTime={row.requestedAt}>
+          {requestedAtFormat.format(new Date(row.requestedAt))}
+        </time>
+      </Text>
+    ),
+  },
+  {
+    key: "actions",
+    header: "",
+    ariaLabel: "操作",
+    priority: "actions",
+    enableHiding: false,
+    render: (row) => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="xs" aria-label={`${row.requester} の申請の操作`}>
+            <MoreHorizontal aria-hidden="true" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>承認する</DropdownMenuItem>
+          <DropdownMenuItem>却下する</DropdownMenuItem>
+          <DropdownMenuItem>詳細を表示</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+];
+
+export default function DataTableApprovalQueue() {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          product={{ name: "GodX Platform", role: "運用管理" }}
+          activeId="approvals"
+          sections={sections}
+        />
+      }
+      topbar={<Topbar start={<Text weight="medium">アクセス承認</Text>} />}
+    >
+      <PageContainer
+        title="アクセス承認"
+        subtitle="Access approval · Phê duyệt truy cập"
+        density="compact"
+        variant="flush"
+      >
+        <Card>
+          <CardContent flush>
+            <DataTable
+              data={requests}
+              columns={columns}
+              getRowId={(row) => row.id}
+              preset="action-collection"
+              collapseBelow="sm"
+              selected={selected}
+              onSelectChange={setSelected}
+            />
+          </CardContent>
+        </Card>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/data-display/data-table/examples/grid-features.tsx

@@ -0,0 +1,158 @@
+import { useState } from "react";
+
+import { Card, CardContent, Badge, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Download, CheckCircle2 } from "lucide-react";
+
+/**
+ * DataTable — full TanStack feature set (the former DataGrid). One unified
+ * DataTable now drives column sort, global search, column visibility ("set
+ * view"), per-page + numbered pagination, row selection + bulk actions, and
+ * density — all on the lean `data` + `columns` API. This demo runs CLIENT mode
+ * (manual* flags default to false) so it sorts/filters/paginates in-browser on
+ * the sample rows. Composed only from real @godxjp/ui components.
+ */
+type Invoice = {
+  id: string;
+  partner: string;
+  amount: number;
+  status: "active" | "pending" | "failed" | "draft";
+  date: string;
+};
+
+const STATUS_TONE = {
+  active: "success",
+  pending: "warning",
+  failed: "destructive",
+  draft: "neutral",
+} as const;
+
+const STATUS_LABEL = {
+  active: "有効",
+  pending: "保留",
+  failed: "失敗",
+  draft: "下書き",
+} as const;
+
+const ROWS: 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" },
+  { id: "INV-0308", partner: "大阪商事", amount: 905000, status: "active", date: "2024-04-08" },
+  { id: "INV-0307", partner: "名古屋運輸", amount: 47300, status: "active", date: "2024-04-07" },
+  {
+    id: "INV-0306",
+    partner: "福岡トレード",
+    amount: 218900,
+    status: "pending",
+    date: "2024-04-06",
+  },
+  { id: "INV-0305", partner: "札幌興業", amount: 73200, status: "draft", date: "2024-04-05" },
+  { id: "INV-0304", partner: "横浜物産", amount: 564000, status: "active", date: "2024-04-04" },
+  { id: "INV-0303", partner: "京都製作所", amount: 99800, status: "failed", date: "2024-04-03" },
+  { id: "INV-0302", partner: "神戸海運", amount: 341500, status: "active", date: "2024-04-02" },
+  { id: "INV-0301", partner: "仙台流通", amount: 28600, status: "pending", date: "2024-04-01" },
+];
+
+const currencyFormatter = new Intl.NumberFormat("ja-JP", {
+  style: "currency",
+  currency: "JPY",
+  maximumFractionDigits: 0,
+});
+const yen = (n: number) => currencyFormatter.format(n);
+
+const columns: ColumnDef<Invoice>[] = [
+  { key: "id", header: "請求書番号", enableHiding: false },
+  { key: "partner", header: "取引先", sortable: true },
+  {
+    key: "amount",
+    header: "金額",
+    align: "right",
+    sortable: true,
+    render: (row) => (
+      <Text as="div" weight="medium" tabular className="text-end">
+        {yen(row.amount)}
+      </Text>
+    ),
+  },
+  {
+    key: "status",
+    header: "状態",
+    render: (row) => <Badge tone={STATUS_TONE[row.status]}>{STATUS_LABEL[row.status]}</Badge>,
+  },
+  {
+    key: "date",
+    header: "発行日",
+    align: "right",
+    render: (row) => (
+      <Text as="div" tabular className="text-end">
+        {row.date}
+      </Text>
+    ),
+  },
+];
+
+export default function Demo() {
+  const [lastClicked, setLastClicked] = useState<string>();
+
+  return (
+    <PageContainer
+      title="DataTable · グリッド機能"
+      subtitle="TanStack Table 駆動 · 並べ替え・検索・列の表示切替・ページング・選択（@godxjp/ui/data-display）"
+    >
+      <Card>
+        <CardContent flush>
+          <DataTable
+            columns={columns}
+            data={ROWS}
+            getRowId={(r) => r.id}
+            selectable
+            onRowClick={(r) => setLastClicked(r.id)}
+          >
+            <DataTable.Toolbar>
+              <DataTable.BulkActions>
+                {(count) => (
+                  <Flex direction="row" align="center" gap="sm">
+                    <Text weight="medium" tabular>
+                      {count} 件選択
+                    </Text>
+                    <Button variant="outline" size="sm">
+                      <Download className="size-4" aria-hidden="true" />
+                      エクスポート
+                    </Button>
+                    <Button size="sm">
+                      <CheckCircle2 className="size-4" aria-hidden="true" />
+                      入金消込
+                    </Button>
+                  </Flex>
+                )}
+              </DataTable.BulkActions>
+              <Flex direction="row" align="center" gap="sm" wrap className="ms-auto">
+                <DataTable.Search />
+                <DataTable.ViewOptions />
+                <DataTable.DensityToggle />
+              </Flex>
+            </DataTable.Toolbar>
+
+            <DataTable.Content />
+            <DataTable.Pagination pageSizeOptions={[5, 10, 20]} />
+          </DataTable>
+        </CardContent>
+      </Card>
+
+      {lastClicked ? (
+        <Text as="p" tone="muted" className="mt-3">
+          行クリック: {lastClicked}
+        </Text>
+      ) : null}
+    </PageContainer>
+  );
+}

package/docs/data-display/data-table/examples/list-page.tsx

@@ -0,0 +1,175 @@
+import { useState } from "react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  DataTable,
+  type ColumnDef,
+  Avatar,
+  AvatarFallback,
+} from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import {
+  BookOpen,
+  Download,
+  FileText,
+  LayoutDashboard,
+  Plus,
+  ReceiptText,
+  Users,
+} from "lucide-react";
+
+/**
+ * List-page screen — the DataTable sits inside a Card (CardContent flush) within
+ * a default, padded PageContainer, so the table aligns with the page header on the
+ * same gutters instead of tearing to the viewport edges. The page title + "新規"
+ * action are the header; bulk actions appear only when rows are selected. A
+ * complete, real admin list mirroring the reference-design PageContent → Card → Table shape.
+ */
+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 }] },
+];
+
+type Invoice = {
+  id: string;
+  partner: string;
+  amount: number;
+  status: "active" | "pending" | "draft" | "failed";
+  date: string;
+};
+
+const invoices: Invoice[] = [
+  {
+    id: "INV-2024-0312",
+    partner: "株式会社ベトヤ",
+    amount: 482000,
+    status: "active",
+    date: "2024-04-12",
+  },
+  {
+    id: "INV-2024-0311",
+    partner: "ハノイ物流",
+    amount: 128400,
+    status: "pending",
+    date: "2024-04-11",
+  },
+  { id: "INV-2024-0310", partner: "GMO決済", amount: 64800, status: "draft", date: "2024-04-10" },
+  {
+    id: "INV-2024-0309",
+    partner: "東京ロジ",
+    amount: 312000,
+    status: "failed",
+    date: "2024-04-09",
+  },
+  { id: "INV-2024-0308", partner: "大阪商事", amount: 96250, status: "active", date: "2024-04-08" },
+];
+
+const yen = new Intl.NumberFormat("ja-JP", {
+  style: "currency",
+  currency: "JPY",
+  maximumFractionDigits: 0,
+});
+
+const columns: ColumnDef<Invoice>[] = [
+  { key: "id", header: "請求書番号", width: "w-40" },
+  { key: "partner", header: "取引先", sortable: true },
+  {
+    key: "amount",
+    header: "金額",
+    align: "right",
+    sortable: true,
+    render: (row) => <span className="tabular-nums">{yen.format(row.amount)}</span>,
+  },
+  { key: "status", header: "状態", render: (row) => <Badge status={row.status} /> },
+  { key: "date", header: "発行日", align: "right", hiddenOnMobile: true },
+];
+
+export default function Demo() {
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  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="請求書 一覧"
+        subtitle="直近30日間の受注データ"
+        breadcrumb={[{ label: "請求書" }]}
+        extra={
+          <Flex direction="row" wrap align="center" gap="sm">
+            <Button variant="outline" size="sm">
+              <Download />
+              エクスポート
+            </Button>
+            <Button size="sm">
+              <Plus />
+              新規請求書
+            </Button>
+          </Flex>
+        }
+      >
+        <Card>
+          <CardContent flush>
+            <DataTable
+              data={invoices}
+              columns={columns}
+              getRowId={(row) => row.id}
+              selectable
+              selected={selected}
+              onSelectChange={setSelected}
+              onRowClick={() => {}}
+            >
+              <DataTable.Toolbar>
+                <DataTable.BulkActions>
+                  <Button size="sm" variant="outline">
+                    入金消込
+                  </Button>
+                  <Button size="sm" variant="outline">
+                    エクスポート
+                  </Button>
+                </DataTable.BulkActions>
+                <DataTable.DensityToggle />
+              </DataTable.Toolbar>
+            </DataTable>
+          </CardContent>
+        </Card>
+      </PageContainer>
+    </AppShell>
+  );
+}

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

@@ -0,0 +1,5 @@
+--- title: Overview ---
+
+The admin list primitive — sticky header, sorting, bulk selection, density toggle, cursor pagination, and a built-in empty/loading state. Never wrap it in a `data.length === 0` guard; the empty state renders itself. See Examples for a full list-page screen.
+
+See the "Approval queue" example.