@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,175 +0,0 @@
-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/examples/selectable-inbox.tsx

@@ -1,113 +0,0 @@
-import { useState } from "react";
-
-import {
-  Avatar,
-  AvatarFallback,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  ListRow,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { PageContainer } from "@godxjp/ui/layout";
-
-/**
- * A selectable inbox — `ListRow` hosted in a DataTable column (gh#1016).
- *
- * DataTable is the only primitive that selects rows; ListRow is the canonical entity row. The
- * column is marked `flush: true`, so its body cells drop their own padding and the ListRow owns
- * the inset: the avatar sits 16px from the checkbox (the same step as any other column, not 32px),
- * the row is ListRow's own height, and an unread row's band spans the whole table row — the
- * checkbox cell included. The header cell keeps its padding, so its label sits on the row's inset.
- */
-type Message = {
-  id: string;
-  from: string;
-  initials: string;
-  subject: string;
-  read: boolean;
-};
-
-const MESSAGES: Message[] = [
-  {
-    id: "m1",
-    from: "Aiko Tanaka",
-    initials: "AT",
-    subject: "April invoice is ready",
-    read: false,
-  },
-  {
-    id: "m2",
-    from: "Minh Nguyen",
-    initials: "MN",
-    subject: "Release notes for 4.2",
-    read: false,
-  },
-  {
-    id: "m3",
-    from: "Kenji Sato",
-    initials: "KS",
-    subject: "Meeting minutes",
-    read: true,
-  },
-  {
-    id: "m4",
-    from: "Lan Pham",
-    initials: "LP",
-    subject: "Access request approved",
-    read: true,
-  },
-];
-
-const columns: ColumnDef<Message>[] = [
-  {
-    key: "message",
-    header: "Message",
-    // The cell's CONTENT owns the inset — without it the cell padding stacks on the row's.
-    flush: true,
-    render: (m) => (
-      <ListRow
-        asChild
-        density="compact"
-        unread={!m.read}
-        leading={
-          <Avatar size="sm">
-            <AvatarFallback>{m.initials}</AvatarFallback>
-          </Avatar>
-        }
-        title={m.from}
-        description={m.subject}
-      >
-        <a href={`#${m.id}`} />
-      </ListRow>
-    ),
-  },
-];
-
-export default function SelectableInboxDemo() {
-  const [selected, setSelected] = useState<Set<string>>(new Set(["m2"]));
-
-  return (
-    <PageContainer title="Inbox" subtitle="DataTable selectable · ListRow in a flush column">
-      <Card>
-        <CardHeader>
-          <CardTitle>Messages</CardTitle>
-        </CardHeader>
-        <CardContent flush>
-          <DataTable
-            data={MESSAGES}
-            columns={columns}
-            getRowId={(m) => m.id}
-            getRowLabel={(m) => m.subject}
-            selectable
-            selected={selected}
-            onSelectChange={setSelected}
-            density="compact"
-          />
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/data-display/data-table/examples/server-paged.tsx

@@ -1,179 +0,0 @@
-import { useMemo, useState } from "react";
-
-import {
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardContent,
-  DataTable,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { Download, FileText, LayoutDashboard, Plus, ReceiptText } from "lucide-react";
-
-/**
- * Server-paged list (gh#705) — antd's `Table pagination`: the server returns ONE page plus the
- * total, and the table renders its own footer from `pagination={{ total, current, pageSize,
- * showTotal, onChange }}` — the real Pagination, total beside the page numbers, bottom-end. The
- * table is compact, so the pager is `size="sm"` and sits on the same control step as the toolbar
- * buttons above it. `data` is only the current page; the footer offers ceil(total / pageSize).
- *
- * Selection on a server-paged list (gh#1036): the header checkbox ticks THIS PAGE, and says so.
- * Once the page is fully ticked, `rowSelection.matching` offers every matching row; while that is
- * chosen the bulk action sends the query's filter to the server instead of a list of ids.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "会計",
-    items: [
-      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
-      { id: "journal", label: "仕訳", icon: FileText },
-      { id: "invoices", label: "請求書", icon: ReceiptText },
-    ],
-  },
-];
-
-type Invoice = {
-  id: string;
-  partner: string;
-  amount: number;
-  status: "active" | "pending" | "draft" | "failed";
-};
-
-const partners = ["株式会社ベトヤ", "ハノイ物流", "GMO決済", "東京ロジ", "大阪商事"];
-const statuses: Invoice["status"][] = ["active", "pending", "draft", "failed"];
-
-// Stands in for the server: 137 rows exist, but only one page ever reaches the table.
-const SERVER_TOTAL = 137;
-function fetchPage(page: number, pageSize: number): Invoice[] {
-  const first = (page - 1) * pageSize;
-  const count = Math.max(0, Math.min(pageSize, SERVER_TOTAL - first));
-  return Array.from({ length: count }, (_, i) => {
-    const n = first + i + 1;
-    return {
-      id: `INV-2024-${String(n).padStart(4, "0")}`,
-      partner: partners[n % partners.length],
-      amount: 12000 + ((n * 7919) % 480000),
-      status: statuses[n % statuses.length],
-    };
-  });
-}
-
-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: "取引先" },
-  {
-    key: "amount",
-    header: "金額",
-    align: "right",
-    render: (row) => <span className="tabular-nums">{yen.format(row.amount)}</span>,
-  },
-  { key: "status", header: "状態", render: (row) => <Badge status={row.status} /> },
-];
-
-export default function Demo() {
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const rows = useMemo(() => fetchPage(page, pageSize), [page, pageSize]);
-  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-  const [allMatching, setAllMatching] = useState(false);
-
-  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="サーバー側でページングされた一覧"
-        breadcrumb={[{ label: "請求書" }]}
-        extra={
-          <Button size="sm">
-            <Plus />
-            新規請求書
-          </Button>
-        }
-      >
-        <Card>
-          <CardContent flush>
-            <DataTable
-              data={rows}
-              columns={columns}
-              getRowId={(row) => row.id}
-              rowSelection={{
-                selectedRowKeys: selectedKeys,
-                onChange: (keys) => {
-                  setSelectedKeys(keys);
-                },
-                matching: {
-                  total: SERVER_TOTAL,
-                  selected: allMatching,
-                  onSelectedChange: setAllMatching,
-                },
-              }}
-              pagination={{
-                total: SERVER_TOTAL,
-                current: page,
-                pageSize,
-                pageSizeOptions: [10, 20, 50],
-                showTotal: (total, [from, to]) => `${from}〜${to} 件 / 全 ${total} 件`,
-                onChange: (nextPage, nextPageSize) => {
-                  setPage(nextPage);
-                  setPageSize(nextPageSize);
-                },
-              }}
-            >
-              <DataTable.Toolbar>
-                <Flex direction="row" align="center" gap="sm">
-                  <Button size="sm" variant="outline">
-                    <Download />
-                    エクスポート
-                  </Button>
-                  {/* While "all matching" is chosen the count is the server's, not the page's. */}
-                  <DataTable.BulkActions count={allMatching ? SERVER_TOTAL : undefined}>
-                    <Button size="sm" variant="outline">
-                      Mark as paid
-                    </Button>
-                  </DataTable.BulkActions>
-                </Flex>
-                <DataTable.ViewOptions />
-              </DataTable.Toolbar>
-            </DataTable>
-          </CardContent>
-        </Card>
-      </PageContainer>
-    </AppShell>
-  );
-}

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

@@ -1,173 +0,0 @@
-import { useState } from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  Descriptions,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * DataTable `striped` (gh#700) — a wide issue list striped by LOGICAL record. On one screen: an
- * expanded detail row (it wears its own record's stripe and does not shift the rows after it), a
- * frozen inline-end column (its opaque cells wear the stripe too), a pre-selected row (selection
- * replaces the stripe) and a toned row (the rail and wash stay visible on the stripe).
- *
- * To stripe EVERY list table in a service, the theme sets `--table-row-striped-alpha: 100%` on
- * :root once; `striped` here is the per-table form of the same switch.
- */
-type Issue = {
-  id: string;
-  key: string;
-  subject: string;
-  type: "bug" | "task" | "story";
-  assignee: string;
-  status: "active" | "pending" | "draft" | "failed";
-  priority: "高" | "中" | "低";
-  due: string;
-  milestone: string;
-};
-
-const TYPE_LABEL = { bug: "バグ", task: "タスク", story: "ストーリー" } as const;
-
-const ROWS: Issue[] = [
-  {
-    id: "1",
-    key: "OPS-128",
-    subject: "請求書 PDF の和暦表記が一部崩れる",
-    type: "bug",
-    assignee: "田中",
-    status: "active",
-    priority: "高",
-    due: "2024-04-12",
-    milestone: "4月リリース",
-  },
-  {
-    id: "2",
-    key: "OPS-127",
-    subject: "取引先マスタの一括取込に重複チェックを追加",
-    type: "story",
-    assignee: "佐藤",
-    status: "pending",
-    priority: "中",
-    due: "2024-04-15",
-    milestone: "4月リリース",
-  },
-  {
-    id: "3",
-    key: "OPS-126",
-    subject: "承認フローの差し戻し理由を必須にする",
-    type: "task",
-    assignee: "鈴木",
-    status: "draft",
-    priority: "中",
-    due: "2024-04-18",
-    milestone: "5月リリース",
-  },
-  {
-    id: "4",
-    key: "OPS-125",
-    subject: "夜間バッチが月末に二重起動する",
-    type: "bug",
-    assignee: "高橋",
-    status: "failed",
-    priority: "高",
-    due: "2024-04-10",
-    milestone: "4月リリース",
-  },
-  {
-    id: "5",
-    key: "OPS-124",
-    subject: "権限マトリクスに監査ログ閲覧を追加",
-    type: "story",
-    assignee: "伊藤",
-    status: "active",
-    priority: "低",
-    due: "2024-04-22",
-    milestone: "5月リリース",
-  },
-  {
-    id: "6",
-    key: "OPS-123",
-    subject: "CSV 出力の文字コードを選べるようにする",
-    type: "task",
-    assignee: "渡辺",
-    status: "pending",
-    priority: "低",
-    due: "2024-04-25",
-    milestone: "5月リリース",
-  },
-];
-
-const columns: ColumnDef<Issue>[] = [
-  { key: "key", header: "キー", width: "110px" },
-  { key: "type", header: "種別", width: "110px", render: (row) => TYPE_LABEL[row.type] },
-  { key: "subject", header: "件名", width: "320px" },
-  { key: "assignee", header: "担当者", width: "110px" },
-  { key: "status", header: "状態", width: "110px", render: (row) => <Badge status={row.status} /> },
-  { key: "priority", header: "優先度", width: "90px" },
-  { key: "milestone", header: "マイルストーン", width: "150px" },
-  // Frozen to the inline end: its cells are opaque, so they must wear the stripe themselves.
-  { key: "due", header: "期日", width: "130px", fixed: "end" },
-];
-
-export default function StripedListDemo() {
-  const [selected, setSelected] = useState<string[]>(["3"]);
-  const [expanded, setExpanded] = useState<string[]>(["2"]);
-
-  return (
-    <PageContainer title="課題一覧" subtitle="DataTable striped · 論理行ごとの縞模様">
-      <Card>
-        <CardHeader>
-          <CardTitle>未完了の課題</CardTitle>
-        </CardHeader>
-        <CardContent flush>
-          <DataTable
-            data={ROWS}
-            columns={columns}
-            getRowId={(row) => row.id}
-            striped
-            hoverable
-            scroll={{ x: 1240 }}
-            rowTone={(row) => (row.status === "failed" ? "destructive" : undefined)}
-            rowSelection={{
-              selectedRowKeys: selected,
-              onChange: (keys) => {
-                setSelected(keys);
-              },
-            }}
-            expandable={{
-              expandedRowKeys: expanded,
-              onExpandedRowsChange: (keys) => {
-                setExpanded(keys);
-              },
-              expandedRowRender: (row) => (
-                <Descriptions bordered columns={{ sm: 2, lg: 3 }} layout="horizontal">
-                  <Descriptions.Item label="キー" mono>
-                    {row.key}
-                  </Descriptions.Item>
-                  <Descriptions.Item label="担当者">{row.assignee}</Descriptions.Item>
-                  <Descriptions.Item label="マイルストーン">{row.milestone}</Descriptions.Item>
-                </Descriptions>
-              ),
-            }}
-          >
-            <DataTable.Content />
-          </DataTable>
-        </CardContent>
-      </Card>
-
-      <Flex direction="col" gap="xs">
-        <Text size="sm" tone="muted">
-          選択中: {selected.length} 件 · 展開中: {expanded.length} 件
-        </Text>
-      </Flex>
-    </PageContainer>
-  );
-}

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

@@ -1,9 +0,0 @@
---- 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.
-
-See the "Selectable inbox" example for a `ListRow` hosted in a selectable DataTable: mark that column `flush: true` so the cell drops its own padding and the ListRow owns the inset (gh#1016).
-
-See the "Server paged" example for selection on a server-paged list (gh#1036). `rowSelection.selectAllLabel` names the header checkbox; `rowSelection.matching={{ total, selected, onSelectedChange }}` adds the "Select all N matching rows" banner once the page is fully ticked. antd has no equivalent of `matching` — it is the Gmail / Jira / GitHub pattern, and the one deliberate deviation from antd's `rowSelection` here. While `selected` is true every row of any page shows ticked; send the query's filter to the server instead of the ids. Unticking a row or "Clear selection" reports `false`. `selections` also takes antd's `DataTable.SELECTION_ALL` / `SELECTION_INVERT` / `SELECTION_NONE` mixed with custom entries.