@godxjp/ui 19.1.0 → 19.3.1

package/docs/showcase/table-pagination.tsx

@@ -0,0 +1,327 @@
+/**
+ * Showcase · table-pagination — ページネーション (V14)
+ *
+ * Three pagination modes for a 勤怠 (attendance) DataTable, shown side by side so a
+ * consumer can pick the right one for their dataset shape:
+ *
+ *   1. 番号付き + 件数選択 … numbered pages + page-size Select
+ *      → real <Pagination showSizeChanger showTotal> (navigation primitive,
+ *        which embeds the page-size Select itself). DataTable slices the page.
+ *   2. もっと読む … "load more" / infinite-style append button
+ *      → real <Button> that grows the visible window; quiet remaining-count copy.
+ *   3. カーソル / 期間ジャンプ … cursor first/next + period jump
+ *      → real <DataTable.Pagination> (cursor first/next) paired with a period
+ *        <Select> to jump between months — for time-series 勤怠 logs where
+ *        offset paging is meaningless.
+ *
+ * Each card is an INDEPENDENT pattern: its own state setters, its own data.
+ *
+ * Built ENTIRELY from real @godxjp/ui primitives. NO hand-rolled <table>, NO
+ * raw HTML controls. reference-design DNA: compact density, tabular-nums on numeric
+ * columns, fixed color signaling via Badge status/tone, small headings, quiet
+ * JP copy, no emoji.
+ */
+import * as React from "react";
+
+import {
+  Badge,
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Pagination } from "@godxjp/ui/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@godxjp/ui/data-entry";
+import { ChevronDown } from "lucide-react";
+
+// ── Domain: a 勤怠 (attendance) record ────────────────────────────────────────
+
+type AttendanceStatus = "active" | "pending" | "failed" | "scheduled";
+
+type Attendance = {
+  id: string;
+  date: string; // 勤務日
+  employee: string; // 従業員
+  dept: string; // 部署
+  clockIn: string; // 出勤
+  clockOut: string; // 退勤
+  overtime: number; // 残業 (分)
+  /** active=承認済 / pending=承認待ち / failed=打刻漏れ / scheduled=シフト予定 */
+  status: AttendanceStatus;
+};
+
+const STATUS_LABEL: Record<AttendanceStatus, string> = {
+  active: "承認済",
+  pending: "承認待ち",
+  failed: "打刻漏れ",
+  scheduled: "シフト予定",
+};
+
+const DEPTS = ["営業部", "開発部", "総務部", "物流部"] as const;
+const NAMES = [
+  "山田 太郎",
+  "佐藤 花子",
+  "鈴木 一郎",
+  "高橋 美咲",
+  "田中 健",
+  "伊藤 さくら",
+  "渡辺 大輔",
+  "中村 由美",
+];
+
+// Deterministic, realistic-looking 勤怠 rows (no Math.random — stable at rest).
+function makeRows(count: number, prefix = "ATT"): Attendance[] {
+  const statuses: AttendanceStatus[] = ["active", "active", "pending", "failed", "scheduled"];
+  return Array.from({ length: count }, (_, i) => {
+    const ot = [0, 15, 30, 45, 60, 90, 120][i % 7];
+    const startHour = 9 + (i % 2);
+    return {
+      id: `${prefix}-${String(1000 + i)}`,
+      date: `2026-06-${String((i % 28) + 1).padStart(2, "0")}`,
+      employee: NAMES[i % NAMES.length],
+      dept: DEPTS[i % DEPTS.length],
+      clockIn: `0${startHour}:${["02", "58", "31", "07"][i % 4]}`,
+      clockOut: ot ? `${18 + Math.floor(ot / 60)}:${String(ot % 60).padStart(2, "0")}` : "18:00",
+      overtime: ot,
+      status: statuses[i % statuses.length],
+    };
+  });
+}
+
+const minutesFmt = (m: number) => (m === 0 ? "—" : `${m}分`);
+
+// Columns are shared between the cards (pure data — no per-card state inside).
+const columns: ColumnDef<Attendance>[] = [
+  { key: "date", header: "勤務日", width: "w-28" },
+  { key: "employee", header: "従業員" },
+  { key: "dept", header: "部署", hiddenOnMobile: true },
+  {
+    key: "clockIn",
+    header: "出勤",
+    align: "right",
+    render: (row) => <Text tabular>{row.clockIn}</Text>,
+  },
+  {
+    key: "clockOut",
+    header: "退勤",
+    align: "right",
+    render: (row) => <Text tabular>{row.clockOut}</Text>,
+  },
+  {
+    key: "overtime",
+    header: "残業",
+    align: "right",
+    hiddenOnMobile: true,
+    render: (row) => <Text tabular>{minutesFmt(row.overtime)}</Text>,
+  },
+  {
+    key: "status",
+    header: "状態",
+    align: "center",
+    render: (row) => <Badge status={row.status}>{STATUS_LABEL[row.status]}</Badge>,
+  },
+];
+
+// ── Mode 1: numbered pages + page-size Select ─────────────────────────────────
+
+const NUMBERED_DATA = makeRows(83, "OFS");
+
+function NumberedPaginationCard() {
+  const [page, setPage] = React.useState(2); // start mid-set so prev/next are both live
+  const [pageSize, setPageSize] = React.useState(10);
+
+  const start = (page - 1) * pageSize;
+  const rows = NUMBERED_DATA.slice(start, start + pageSize);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>番号付き + 件数選択</CardTitle>
+        <CardAction>
+          <Text size="xs" tone="muted" tabular>
+            全 {NUMBERED_DATA.length} 件
+          </Text>
+        </CardAction>
+      </CardHeader>
+      <CardContent flush>
+        <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />
+      </CardContent>
+      <CardContent className="border-t">
+        <Pagination
+          value={page}
+          total={NUMBERED_DATA.length}
+          pageSize={pageSize}
+          pageSizeOptions={[10, 20, 50]}
+          showSizeChanger
+          showTotal={(total, [from, to]) => `${from}–${to} / ${total} 件`}
+          onValueChange={(nextPage, nextSize) => {
+            setPage(nextPage);
+            setPageSize(nextSize);
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+// ── Mode 2: load-more button ─────────────────────────────────────────────────
+
+const LOADMORE_DATA = makeRows(42, "LDM");
+const LOADMORE_STEP = 8;
+
+function LoadMoreCard() {
+  // Mid-load state at rest: some rows already revealed, more remaining.
+  const [visible, setVisible] = React.useState(LOADMORE_STEP * 2);
+  const [loading, setLoading] = React.useState(false);
+
+  const rows = LOADMORE_DATA.slice(0, visible);
+  const remaining = LOADMORE_DATA.length - visible;
+  const done = remaining <= 0;
+
+  const loadMore = () => {
+    if (done || loading) return;
+    setLoading(true);
+    // Simulate a fetch so the disabled-while-pending state is observable.
+    window.setTimeout(() => {
+      setVisible((v) => Math.min(v + LOADMORE_STEP, LOADMORE_DATA.length));
+      setLoading(false);
+    }, 900);
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>もっと読む</CardTitle>
+        <CardAction>
+          <Text size="xs" tone="muted" tabular>
+            {rows.length} / {LOADMORE_DATA.length} 件表示
+          </Text>
+        </CardAction>
+      </CardHeader>
+      <CardContent flush>
+        <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />
+      </CardContent>
+      <CardContent className="border-t">
+        <Flex direction="col" align="center" gap="xs">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={loadMore}
+            disabled={done}
+            loading={loading}
+            loadingText="読み込み中…"
+          >
+            {!done && <ChevronDown aria-hidden="true" />}
+            {done
+              ? "すべて表示しました"
+              : `さらに ${Math.min(LOADMORE_STEP, remaining)} 件を読み込む`}
+          </Button>
+          {!done && (
+            <Text size="xs" tone="muted" tabular>
+              残り {remaining} 件
+            </Text>
+          )}
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ── Mode 3: cursor first/next + period jump ──────────────────────────────────
+
+// Time-series 勤怠 logs grouped by month — offset paging is meaningless here,
+// so we use cursor first/next (DataTable.Pagination) + a period Select to jump.
+const PERIODS = [
+  { value: "2026-06", label: "2026年 6月" },
+  { value: "2026-05", label: "2026年 5月" },
+  { value: "2026-04", label: "2026年 4月" },
+] as const;
+
+const PERIOD_DATA: Record<string, Attendance[]> = {
+  "2026-06": makeRows(7, "CUR-06"),
+  "2026-05": makeRows(7, "CUR-05"),
+  "2026-04": makeRows(5, "CUR-04"),
+};
+
+function CursorPeriodCard() {
+  const [period, setPeriod] = React.useState<string>("2026-06");
+  // cursor === id of the last row of the previous page; undefined = first page.
+  const [cursor, setCursor] = React.useState<string | undefined>(undefined);
+
+  const all = PERIOD_DATA[period] ?? [];
+  const PAGE = 4;
+  const startIndex = cursor ? all.findIndex((r) => r.id === cursor) + 1 : 0;
+  const rows = all.slice(startIndex, startIndex + PAGE);
+  const lastVisibleId = rows.at(-1)?.id;
+  const hasMore = startIndex + PAGE < all.length;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>カーソル / 期間ジャンプ</CardTitle>
+        <CardAction>
+          <Select
+            value={period}
+            onValueChange={(v: string) => {
+              setPeriod(v);
+              setCursor(undefined); // jumping period resets the cursor to the first page
+            }}
+          >
+            <SelectTrigger size="sm" aria-label="期間を選択" className="w-36">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PERIODS.map((p) => (
+                <SelectItem key={p.value} value={p.value}>
+                  {p.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent flush>
+        <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />
+      </CardContent>
+      <CardContent className="border-t">
+        <Flex direction="row" align="center" justify="between" wrap gap="sm">
+          <Text size="xs" tone="muted" tabular>
+            {PERIODS.find((p) => p.value === period)?.label} · {all.length} 件
+          </Text>
+          <DataTable.Pagination
+            cursor={lastVisibleId}
+            hasMore={hasMore}
+            onChange={(next) => setCursor(next)}
+          />
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="ページネーション"
+      subtitle="番号付き + 件数選択 · もっと読む · カーソル / 期間ジャンプ。用途に応じて使い分ける 3 つの方式"
+      density="compact"
+    >
+      <Flex direction="col" gap="lg">
+        <NumberedPaginationCard />
+        <LoadMoreCard />
+        <CursorPeriodCard />
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/showcase/table-states.tsx

@@ -0,0 +1,366 @@
+/**
+ * Showcase · table-states — 状態 (V16)
+ *
+ * The five states a 勤怠 (attendance) DataTable must render — each shown statically,
+ * side by side, so a reader learns every state at rest without clicking:
+ *
+ *   1. loading … SkeletonTable inside the real Card+toolbar chrome, preserving
+ *                the column layout (no spinner overlay).
+ *   2. empty   … two distinct wordings — filter-empty (絞り込み結果なし, offers
+ *                「条件をクリア」) vs truly-empty (データなし, offers a create CTA).
+ *   3. error   … Alert tone="destructive" carrying an error code + request-id
+ *                (copyable, tabular-nums) + a 再試行 retry action.
+ *   4. partial … rows that DID load, with a warning Alert that one segment
+ *                failed / is stale, plus a 部分再取得 retry for the missing part.
+ *   5. ideal   … the fully-populated DataTable (sorted, status Badges).
+ *
+ * Built ENTIRELY from real @godxjp/ui primitives — DataTable / Table chrome via
+ * Card + DataTable.Toolbar, Skeleton family, Alert family, EmptyState, Badge,
+ * Button. No hand-rolled <table>, no raw controls, tokens only.
+ *
+ * DNA: compact density · small headings · tabular-nums on 時刻/件数 · fixed color
+ * signaling (success 若竹 / warning 山吹 / attention 朱 / danger 茜 / info 群青 via
+ * tone) · quiet factual JP copy · no emoji.
+ */
+import * as React from "react";
+import { Clock, Inbox, Plus, RefreshCw, SearchX } from "lucide-react";
+
+import { Button, Heading, Text } from "@godxjp/ui/general";
+import {
+  Badge,
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  EmptyState,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import {
+  Alert,
+  AlertActions,
+  AlertDescription,
+  AlertTitle,
+  SkeletonTable,
+} from "@godxjp/ui/feedback";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+// ── Domain: 勤怠 (打刻) records ────────────────────────────────────────────────
+
+type Punch = {
+  id: string;
+  employee: string;
+  dept: string;
+  clockIn: string;
+  clockOut: string;
+  workH: string;
+  status: "present" | "late" | "early" | "pending";
+};
+
+/** 勤怠ステータス → Badge tone (fixed color signaling). */
+const STATUS_META: Record<
+  Punch["status"],
+  { label: string; tone: "success" | "warning" | "info" | "neutral" }
+> = {
+  // 出勤 = 若竹(success) · 遅刻 = 山吹(warning, non-destructive lateness) ·
+  // 早退 = 群青(info) · 承認待ち = neutral(quiet, not a warning yet).
+  present: { label: "出勤", tone: "success" },
+  late: { label: "遅刻", tone: "warning" },
+  early: { label: "早退", tone: "info" },
+  pending: { label: "承認待ち", tone: "neutral" },
+};
+
+const COLUMNS: ColumnDef<Punch>[] = [
+  { key: "employee", header: "従業員", width: "w-40" },
+  { key: "dept", header: "部署", hiddenOnMobile: true },
+  {
+    key: "clockIn",
+    header: "出勤",
+    align: "right",
+    render: (r) => <Text tabular>{r.clockIn}</Text>,
+  },
+  {
+    key: "clockOut",
+    header: "退勤",
+    align: "right",
+    render: (r) => <Text tabular>{r.clockOut}</Text>,
+  },
+  {
+    key: "workH",
+    header: "実働",
+    align: "right",
+    hiddenOnMobile: true,
+    render: (r) => <Text tabular>{r.workH}</Text>,
+  },
+  {
+    key: "status",
+    header: "状態",
+    align: "center",
+    render: (r) => (
+      <Badge tone={STATUS_META[r.status].tone} variant="outline">
+        {STATUS_META[r.status].label}
+      </Badge>
+    ),
+  },
+];
+
+const ROWS: Punch[] = [
+  {
+    id: "EMP-1042",
+    employee: "佐藤 美咲",
+    dept: "受付",
+    clockIn: "08:58",
+    clockOut: "18:02",
+    workH: "8.0h",
+    status: "present",
+  },
+  {
+    id: "EMP-1043",
+    employee: "鈴木 一郎",
+    dept: "倉庫",
+    clockIn: "09:14",
+    clockOut: "18:05",
+    workH: "7.8h",
+    status: "late",
+  },
+  {
+    id: "EMP-1044",
+    employee: "高橋 結衣",
+    dept: "経理",
+    clockIn: "08:55",
+    clockOut: "16:30",
+    workH: "6.6h",
+    status: "early",
+  },
+  {
+    id: "EMP-1045",
+    employee: "田中 健太",
+    dept: "配送",
+    clockIn: "08:49",
+    clockOut: "—",
+    workH: "—",
+    status: "pending",
+  },
+  {
+    id: "EMP-1046",
+    employee: "伊藤 さくら",
+    dept: "受付",
+    clockIn: "08:52",
+    clockOut: "18:00",
+    workH: "8.1h",
+    status: "present",
+  },
+];
+
+/** Only the segment that succeeded in the `partial` case (倉庫 fetch failed). */
+const PARTIAL_ROWS = ROWS.filter((r) => r.dept !== "倉庫");
+
+// ── Local chrome: a titled section that frames each state demo ─────────────────
+
+function StateSection({
+  step,
+  title,
+  note,
+  children,
+}: {
+  step: string;
+  title: string;
+  note: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Flex direction="col" gap="sm">
+      <Flex direction="row" align="baseline" gap="sm" wrap>
+        <Text size="xs" tone="muted" tabular>
+          {step}
+        </Text>
+        <Heading level={3} as="h2">
+          {title}
+        </Heading>
+        <Text size="xs" tone="muted">
+          {note}
+        </Text>
+      </Flex>
+      {children}
+    </Flex>
+  );
+}
+
+/** Shared table-card shell: the toolbar chrome stays identical across states so
+ *  the loading skeleton visibly preserves the table's column layout. */
+function TableShell({
+  caption,
+  children,
+}: {
+  caption: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>本日の打刻</CardTitle>
+        <CardAction>
+          <Text size="xs" tone="muted">
+            {caption}
+          </Text>
+        </CardAction>
+      </CardHeader>
+      <CardContent flush>{children}</CardContent>
+    </Card>
+  );
+}
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="DataTable の状態"
+      subtitle="勤怠一覧が取りうる 5 つの状態。loading · empty(絞り込み / データなし) · error · partial · ideal をすべて静止状態で並べて確認する。"
+      density="compact"
+    >
+      <Flex direction="col" gap="lg">
+        {/* 1 ─ loading: skeleton that preserves the column layout */}
+        <StateSection
+          step="1 / 5"
+          title="読み込み中"
+          note="列レイアウトを保持した SkeletonTable。スピナーオーバーレイは使わない。"
+        >
+          <TableShell caption="取得中…">
+            <SkeletonTable rows={5} columns={6} />
+          </TableShell>
+        </StateSection>
+
+        {/* 2 ─ empty: filter-empty vs truly-empty wording */}
+        <StateSection
+          step="2 / 5"
+          title="空"
+          note="「絞り込み結果なし」と「データなし」は文言とアクションを使い分ける。"
+        >
+          <Flex direction="col" gap="md" className="md:flex-row md:[&>*]:flex-1">
+            <TableShell caption="絞り込み: 部署=倉庫 / 状態=遅刻">
+              {/* filter-empty: data exists, the FILTER matched nothing → clear filters */}
+              <DataTable
+                data={[]}
+                columns={COLUMNS}
+                getRowId={(r) => r.id}
+                empty={
+                  <EmptyState
+                    icon={SearchX}
+                    title="条件に一致する打刻はありません"
+                    description="絞り込み条件を緩めるか、条件をクリアしてください。"
+                    action={
+                      <Button variant="outline" size="sm">
+                        条件をクリア
+                      </Button>
+                    }
+                  />
+                }
+              />
+            </TableShell>
+
+            <TableShell caption="2026-06-04 · 打刻 0 件">
+              {/* truly-empty: no data at all for the day → create / 打刻登録 CTA */}
+              <DataTable
+                data={[]}
+                columns={COLUMNS}
+                getRowId={(r) => r.id}
+                empty={
+                  <EmptyState
+                    icon={Inbox}
+                    title="本日の打刻はまだありません"
+                    description="従業員が打刻すると、ここに一覧が表示されます。"
+                    action={
+                      <Button size="sm">
+                        <Plus aria-hidden="true" />
+                        打刻を登録
+                      </Button>
+                    }
+                  />
+                }
+              />
+            </TableShell>
+          </Flex>
+        </StateSection>
+
+        {/* 3 ─ error: code + request-id + retry */}
+        <StateSection
+          step="3 / 5"
+          title="エラー"
+          note="エラーコード・リクエストID・再試行を明示する。"
+        >
+          <TableShell caption="取得に失敗しました">
+            <div className="p-4">
+              <Alert tone="destructive">
+                <AlertTitle>勤怠データを取得できませんでした</AlertTitle>
+                <AlertDescription>
+                  サーバーが応答しませんでした。時間をおいて再試行してください。
+                  <br />
+                  <Text tone="muted">
+                    コード <code className="tabular-nums">ATTEND_FETCH_504</code> ・ リクエストID{" "}
+                    <code className="tabular-nums">req_7f3a91c0d2</code>
+                  </Text>
+                </AlertDescription>
+                <AlertActions>
+                  <Button variant="outline" size="sm">
+                    <RefreshCw aria-hidden="true" />
+                    再試行
+                  </Button>
+                </AlertActions>
+              </Alert>
+            </div>
+          </TableShell>
+        </StateSection>
+
+        {/* 4 ─ partial: some rows loaded, one segment failed / stale */}
+        <StateSection
+          step="4 / 5"
+          title="部分的"
+          note="一部のみ取得できた状態。失敗した区分だけを再取得できる。"
+        >
+          <TableShell caption="4 / 5 部署を表示中">
+            <div>
+              <div className="p-4 pb-0">
+                <Alert tone="warning">
+                  <AlertTitle>一部のデータを取得できませんでした</AlertTitle>
+                  <AlertDescription>
+                    「倉庫」部署の打刻が取得できなかったため、最新ではない可能性があります。
+                    <br />
+                    <Text tone="muted">
+                      コード <code className="tabular-nums">ATTEND_PARTIAL_倉庫</code> ・
+                      リクエストID <code className="tabular-nums">req_7f3a91c0e8</code>
+                    </Text>
+                  </AlertDescription>
+                  <AlertActions>
+                    <Button variant="outline" size="sm">
+                      <RefreshCw aria-hidden="true" />
+                      倉庫を再取得
+                    </Button>
+                  </AlertActions>
+                </Alert>
+              </div>
+              <DataTable data={PARTIAL_ROWS} columns={COLUMNS} getRowId={(r) => r.id} />
+            </div>
+          </TableShell>
+        </StateSection>
+
+        {/* 5 ─ ideal: fully populated */}
+        <StateSection
+          step="5 / 5"
+          title="理想"
+          note="全件取得済み。状態は Badge tone で固定マッピング表示。"
+        >
+          <TableShell
+            caption={
+              <Flex direction="row" align="center" gap="xs">
+                <Clock className="size-3" aria-hidden="true" />
+                <Text tabular>5 件 · 14:32 更新</Text>
+              </Flex>
+            }
+          >
+            <DataTable data={ROWS} columns={COLUMNS} getRowId={(r) => r.id} />
+          </TableShell>
+        </StateSection>
+      </Flex>
+    </PageContainer>
+  );
+}