@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/data-table/examples/antd-parity.tsx

@@ -1,257 +0,0 @@
-import { useState } from "react";
-
-import {
-  Card,
-  CardContent,
-  Badge,
-  DataTable,
-  Descriptions,
-  TableCell,
-  TableRow,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * DataTable / Descriptions — the Ant Design 6.6.2 parity surface on one screen: frozen columns
- * (`fixed`), truncation (`ellipsis`), multi-column sort (`sorter.multiple`), header filters
- * (`filters` + `onFilter`), the full `rowSelection` object, `expandable` detail rows, a `summary`
- * totals row, a `scroll` envelope and a bordered `Descriptions` on a responsive column ladder.
- *
- * It is also the MEASUREMENT surface: the frozen columns and the scroll envelope are geometry, and
- * geometry is verified against this page in a browser, not by eye.
- */
-type Line = {
-  id: string;
-  code: string;
-  partner: string;
-  note: string;
-  status: "active" | "pending" | "failed";
-  region: string;
-  owner: string;
-  updated: string;
-  amount: number;
-};
-
-const STATUS_TONE = { active: "success", pending: "warning", failed: "destructive" } as const;
-const STATUS_LABEL = { active: "有効", pending: "保留", failed: "失敗" } as const;
-
-const BASE_ROWS: Line[] = [
-  {
-    id: "L-1",
-    code: "INV-0312",
-    partner: "株式会社ベトヤ",
-    note: "四月分の請求。検収は完了しているが振込確認が未了のため保留にしている。",
-    status: "active",
-    region: "関東",
-    owner: "田中",
-    updated: "2024-04-12",
-    amount: 482000,
-  },
-  {
-    id: "L-2",
-    code: "INV-0311",
-    partner: "ハノイ物流",
-    note: "越境輸送分。通関書類の差し替えを依頼済み。",
-    status: "pending",
-    region: "海外",
-    owner: "佐藤",
-    updated: "2024-04-11",
-    amount: 128400,
-  },
-  {
-    id: "L-3",
-    code: "INV-0310",
-    partner: "GMO決済",
-    note: "決済手数料。月次で自動計上される。",
-    status: "active",
-    region: "関東",
-    owner: "田中",
-    updated: "2024-04-10",
-    amount: 64800,
-  },
-  {
-    id: "L-4",
-    code: "INV-0309",
-    partner: "東京ロジ",
-    note: "再送分。前回の請求が差し戻されたため再発行している。",
-    status: "failed",
-    region: "関東",
-    owner: "鈴木",
-    updated: "2024-04-09",
-    amount: 312000,
-  },
-  {
-    id: "L-5",
-    code: "INV-0308",
-    partner: "大阪商事",
-    note: "年間契約の四半期按分。",
-    status: "pending",
-    region: "関西",
-    owner: "鈴木",
-    updated: "2024-04-08",
-    amount: 900500,
-  },
-];
-
-/**
- * Enough rows for the `scroll.y` envelope to actually bite — five rows never reach an 18rem cap,
- * and a cap that never clips proves nothing.
- */
-const ROWS: Line[] = [
-  ...BASE_ROWS,
-  ...BASE_ROWS.map((row, i) => ({
-    ...row,
-    id: `${row.id}-b`,
-    code: `INV-02${String(10 + i).padStart(2, "0")}`,
-    updated: `2024-03-${String(10 + i).padStart(2, "0")}`,
-  })),
-];
-
-const yen = new Intl.NumberFormat("ja-JP", {
-  style: "currency",
-  currency: "JPY",
-  maximumFractionDigits: 0,
-});
-
-const columns: ColumnDef<Line>[] = [
-  // Frozen to the inline start — the identity column stays put while the grid scrolls.
-  { key: "code", header: "伝票番号", fixed: "start", width: "150px", sorter: { multiple: 2 } },
-  { key: "partner", header: "取引先", width: "220px" },
-  // One line, truncated, with the full text kept as the cell's title.
-  { key: "note", header: "備考", ellipsis: true, width: "260px" },
-  {
-    key: "status",
-    header: "状態",
-    width: "140px",
-    filters: [
-      { text: "有効", value: "active" },
-      { text: "保留", value: "pending" },
-      { text: "失敗", value: "failed" },
-    ],
-    onFilter: (value, row) => row.status === value,
-    render: (row) => <Badge tone={STATUS_TONE[row.status]}>{STATUS_LABEL[row.status]}</Badge>,
-  },
-  {
-    key: "region",
-    header: "地域",
-    width: "140px",
-    filters: [
-      { text: "関東", value: "関東" },
-      { text: "関西", value: "関西" },
-      { text: "海外", value: "海外" },
-    ],
-    filterMultiple: false,
-    onFilter: (value, row) => row.region === value,
-  },
-  { key: "owner", header: "担当", width: "140px", sorter: { multiple: 1 } },
-  {
-    key: "updated",
-    header: "更新日",
-    width: "160px",
-    sorter: true,
-    sortDirections: ["desc", "asc"],
-  },
-  // Frozen to the inline end — the amount stays readable at any scroll position.
-  {
-    key: "amount",
-    header: "金額",
-    align: "right",
-    fixed: "end",
-    width: "160px",
-    sorter: (a, b) => a.amount - b.amount,
-    render: (row) => yen.format(row.amount),
-  },
-];
-
-export default function AntdParityDemo() {
-  const [selected, setSelected] = useState<string[]>([]);
-
-  return (
-    <PageContainer title="Ant Design パリティ" subtitle="DataTable / Descriptions">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardContent flush>
-            <DataTable
-              data={ROWS}
-              columns={columns}
-              getRowId={(row) => row.id}
-              bordered
-              showSorterTooltip
-              scroll={{ x: 1400, y: "18rem" }}
-              sticky
-              rowSelection={{
-                selectedRowKeys: selected,
-                onChange: (keys) => {
-                  setSelected(keys);
-                },
-                selections: true,
-                getCheckboxProps: (row) => ({ disabled: row.status === "failed" }),
-                preserveSelectedRowKeys: true,
-              }}
-              expandable={{
-                expandedRowRender: (row) => (
-                  <Descriptions bordered columns={{ sm: 2, lg: 3 }} layout="horizontal">
-                    <Descriptions.Item label="伝票番号" mono>
-                      {row.code}
-                    </Descriptions.Item>
-                    <Descriptions.Item label="担当">{row.owner}</Descriptions.Item>
-                    <Descriptions.Item label="地域">{row.region}</Descriptions.Item>
-                    <Descriptions.Item label="備考" span="filled">
-                      {row.note}
-                    </Descriptions.Item>
-                  </Descriptions>
-                ),
-                rowExpandable: (row) => row.status !== "failed",
-              }}
-              summary={(rows) => (
-                <TableRow>
-                  <TableCell />
-                  <TableCell />
-                  <TableCell>合計</TableCell>
-                  <TableCell />
-                  <TableCell />
-                  <TableCell />
-                  <TableCell />
-                  <TableCell />
-                  <TableCell>
-                    {yen.format(rows.reduce((sum, row) => sum + row.amount, 0))}
-                  </TableCell>
-                </TableRow>
-              )}
-              onRow={(row) => ({ "data-row-key": row.id })}
-            >
-              <DataTable.Toolbar>
-                <DataTable.Search />
-                <Flex direction="row" gap="sm" align="center">
-                  <DataTable.ViewOptions />
-                  <DataTable.DensityToggle />
-                </Flex>
-              </DataTable.Toolbar>
-              <DataTable.Content />
-              <DataTable.Pagination />
-            </DataTable>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardContent>
-            <Text size="sm" tone="muted">
-              選択中: {selected.length} 件
-            </Text>
-            <Descriptions bordered columns={{ sm: 2, lg: 4 }}>
-              <Descriptions.Item label="伝票数">{ROWS.length}</Descriptions.Item>
-              <Descriptions.Item label="通貨">JPY</Descriptions.Item>
-              <Descriptions.Item label="期間">2024-04-08 ～ 2024-04-12</Descriptions.Item>
-              <Descriptions.Item label="ステータス">確定前</Descriptions.Item>
-              <Descriptions.Item label="メモ" span="filled">
-                Ant Design 6.6.2 の `bordered` と `column` レスポンシブ指定をそのまま受ける。
-              </Descriptions.Item>
-            </Descriptions>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

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

@@ -1,212 +0,0 @@
-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 / ) — 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

@@ -1,158 +0,0 @@
-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">
-          行クリック: {lastClicked}
-        </Text>
-      ) : null}
-    </PageContainer>
-  );
-}