@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/table-bulk-actions.tsx

@@ -1,468 +0,0 @@
-/**
- * Showcase · table-bulk-actions — 一括操作 (V2)
- *
- * Pattern: row selection REPLACES the list toolbar with a dedicated bulk-action
- * bar. When nothing is selected the table shows its normal toolbar (search +
- * 部署 filter + density). The moment one row is checked, that whole toolbar row
- * is swapped for a primary-tint bar that:
- *   - states the selected count and offers a cross-page "全 N 件を選択" escalation
- *   - groups the safe batch actions (一括承認 / CSV出力) on the left
- *   - ISOLATES the one destructive action (一括削除, tone 茜/destructive) on the
- *     right, gated behind an AlertDialog confirm — never sat next to the safe ones
- *   - offers 解除 to clear the selection and restore the toolbar
- *
- * Built only from real @godxjp/ui primitives — DataTable / Button / Badge /
- * Checkbox / SearchInput / Select / AlertDialog. The swap + tint bar is an
- * app-level COMPOSITION around DataTable.Content (see gapNotes): the library's
- * built-in DataTable.BulkActions sits *inside* the toolbar and has no
- * cross-page-select / isolated-destructive / tinted-replacement behaviour, so we
- * compose it from primitives rather than fake a component.
- *
- * DNA: compact density, small headings, tabular-nums numerics, fixed colour
- * signaling (承認済 若竹/success · 申請中 山吹/warning · 要確認 朱→attention via
- * destructive-restraint, here info 群青 for シフト) , quiet JP copy, no emoji.
- */
-import * as React from "react";
-import { CheckCheck, Download, Trash2, X } from "lucide-react";
-
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  Badge,
-  type BadgeProps,
-  Card,
-  CardContent,
-  DataTable,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { SearchInput, Select } from "@godxjp/ui/data-entry";
-import { AlertDialog } from "@godxjp/ui/feedback";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { DensityProp, SortStateProp } from "@godxjp/ui/props";
-
-// ── Domain model: 勤怠申請 (attendance / leave requests awaiting approval) ──────
-
-type BadgeTone = NonNullable<BadgeProps["tone"]>;
-
-type RequestStatus = "approved" | "pending" | "review" | "shift";
-
-const STATUS_META: Record<
-  RequestStatus,
-  { label: string; tone: Extract<BadgeTone, "success" | "warning" | "destructive" | "info"> }
-> = {
-  approved: { label: "承認済", tone: "success" }, // 若竹
-  pending: { label: "申請中", tone: "warning" }, // 山吹
-  review: { label: "要確認", tone: "destructive" }, // 茜 (差戻し候補)
-  shift: { label: "シフト変更", tone: "info" }, // 群青
-};
-
-type AttendanceRequest = {
-  id: string;
-  employee: string;
-  dept: string;
-  type: string;
-  date: string;
-  hours: number;
-  status: RequestStatus;
-};
-
-const DEPARTMENTS = ["営業部", "開発部", "総務部", "カスタマーサポート"] as const;
-
-const REQUESTS: AttendanceRequest[] = [
-  {
-    id: "REQ-2041",
-    employee: "佐藤 美咲",
-    dept: "営業部",
-    type: "残業申請",
-    date: "2026-06-03",
-    hours: 2.5,
-    status: "pending",
-  },
-  {
-    id: "REQ-2040",
-    employee: "鈴木 健一",
-    dept: "開発部",
-    type: "有給休暇",
-    date: "2026-06-03",
-    hours: 8.0,
-    status: "approved",
-  },
-  {
-    id: "REQ-2039",
-    employee: "高橋 さくら",
-    dept: "総務部",
-    type: "遅刻届",
-    date: "2026-06-02",
-    hours: 1.0,
-    status: "review",
-  },
-  {
-    id: "REQ-2038",
-    employee: "田中 大輔",
-    dept: "カスタマーサポート",
-    type: "シフト変更",
-    date: "2026-06-02",
-    hours: 0,
-    status: "shift",
-  },
-  {
-    id: "REQ-2037",
-    employee: "伊藤 陽菜",
-    dept: "営業部",
-    type: "早退届",
-    date: "2026-06-01",
-    hours: 3.0,
-    status: "pending",
-  },
-  {
-    id: "REQ-2036",
-    employee: "渡辺 翔太",
-    dept: "開発部",
-    type: "残業申請",
-    date: "2026-06-01",
-    hours: 4.0,
-    status: "pending",
-  },
-  {
-    id: "REQ-2035",
-    employee: "山本 結衣",
-    dept: "総務部",
-    type: "有給休暇",
-    date: "2026-05-30",
-    hours: 8.0,
-    status: "approved",
-  },
-  {
-    id: "REQ-2034",
-    employee: "中村 拓海",
-    dept: "カスタマーサポート",
-    type: "遅刻届",
-    date: "2026-05-30",
-    hours: 0.5,
-    status: "review",
-  },
-];
-
-const TOTAL_ACROSS_PAGES = 124; // server-reported total matching the active filter
-
-const hours = new Intl.NumberFormat("ja-JP", {
-  minimumFractionDigits: 1,
-  maximumFractionDigits: 1,
-});
-
-const columns: ColumnDef<AttendanceRequest>[] = [
-  { key: "id", header: "申請番号", width: "w-28" },
-  { key: "employee", header: "従業員", sortable: true },
-  { key: "dept", header: "部署", hiddenOnMobile: true },
-  { key: "type", header: "種別", hiddenOnMobile: true },
-  { key: "date", header: "対象日", align: "right", sortable: true },
-  {
-    key: "hours",
-    header: "時間",
-    align: "right",
-    sortable: true,
-    render: (row) => <Text tabular>{row.hours === 0 ? "—" : `${hours.format(row.hours)} h`}</Text>,
-  },
-  {
-    key: "status",
-    header: "状態",
-    align: "center",
-    render: (row) => {
-      const m = STATUS_META[row.status];
-      return (
-        <Badge tone={m.tone} variant="outline">
-          {m.label}
-        </Badge>
-      );
-    },
-  },
-];
-
-// ── The bulk-action bar (composition that REPLACES the toolbar) ────────────────
-
-function BulkActionBar({
-  count,
-  total,
-  pageAllSelected,
-  spanAll,
-  onSelectSpanAll,
-  onApprove,
-  onExport,
-  onDelete,
-  onClear,
-}: {
-  count: number;
-  total: number;
-  pageAllSelected: boolean;
-  spanAll: boolean;
-  onSelectSpanAll: () => void;
-  onApprove: () => void;
-  onExport: () => void;
-  onDelete: () => void;
-  onClear: () => void;
-}) {
-  const effective = spanAll ? total : count;
-  return (
-    <Card className="bg-primary/5 border-primary/30">
-      <CardContent solo>
-        <Flex role="region" aria-label="一括操作" wrap align="center" gap="md">
-          {/* left: count + cross-page select-all escalation + safe batch actions.
-              THE `wrap`, AND THE ABSENT `min-w-0`, ARE BOTH LOAD-BEARING (gh#643). This cluster
-              used to carry `min-w-0 flex-1` — "squeeze me to nothing" — while every child inside
-              refuses to be squeezed: two `Button`s and a `whitespace-nowrap` count. At 375 the box
-              duly shrank to 113.6px, the content still ran to x=462, and it painted straight over
-              the destructive cluster beside it — 一括承認 at 264.6→360.2 under 解除 at
-              272.3→341.0, which axe reported as `target-size` with 19.2×30.2 of the button left
-              unobscured against SC 2.5.8's 24×24. Without `min-w-0` the cluster keeps a real
-              min-content width, and `wrap` is what makes that width small enough to be honest:
-              measured after, 375 puts the two clusters on separate rows (left 307px over two
-              lines, destructive below) and 1440 is unchanged — one 30.2px row, destructive still
-              pushed to x=1217.5 by `flex-1`. */}
-          <Flex direction="row" align="center" gap="sm" wrap className="flex-1">
-            <Text tone="primary" weight="medium" tabular className="whitespace-nowrap">
-              {effective}件を選択中
-            </Text>
-
-            {/* cross-page select-all: only offered once the whole page is selected */}
-            {pageAllSelected &&
-              (spanAll ? (
-                <Text size="xs" tone="muted">
-                  フィルタ条件の全{" "}
-                  <Text as="span" tabular>
-                    {total}
-                  </Text>{" "}
-                  件を選択しました
-                </Text>
-              ) : (
-                <Button variant="link" size="sm" onClick={onSelectSpanAll}>
-                  全 <span className="tabular-nums">{total}</span> 件を選択
-                </Button>
-              ))}
-
-            <span className="bg-border h-4 w-px" aria-hidden="true" />
-
-            <Button variant="outline" size="sm" onClick={onApprove}>
-              <CheckCheck aria-hidden="true" />
-              一括承認
-            </Button>
-            <Button variant="outline" size="sm" onClick={onExport}>
-              <Download aria-hidden="true" />
-              CSV出力
-            </Button>
-          </Flex>
-
-          {/* right: ISOLATED destructive action, kept apart from the safe ones */}
-          <Flex direction="row" align="center" gap="sm">
-            <Button variant="destructive" size="sm" onClick={onDelete}>
-              <Trash2 aria-hidden="true" />
-              一括削除
-            </Button>
-            <span className="bg-border h-4 w-px" aria-hidden="true" />
-            <Button variant="ghost" size="sm" onClick={onClear} aria-label="選択を解除">
-              <X aria-hidden="true" />
-              解除
-            </Button>
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-// ── The normal list toolbar (search + 部署 filter + density) ────────────────────
-
-function ListToolbar({
-  query,
-  onQuery,
-  dept,
-  onDept,
-}: {
-  query: string;
-  onQuery: (q: string) => void;
-  dept: string;
-  onDept: (d: string) => void;
-}) {
-  return (
-    <DataTable.Toolbar>
-      <Flex direction="row" align="center" gap="sm" wrap>
-        <SearchInput
-          value={query}
-          onValueChange={onQuery}
-          onSearch={onQuery}
-          placeholder="従業員・申請番号で検索"
-          className="w-56"
-        />
-        <Select
-          value={dept}
-          onValueChange={onDept}
-          options={[
-            { value: "all", label: "全部署" },
-            ...DEPARTMENTS.map((d) => ({ value: d, label: d })),
-          ]}
-          aria-label="部署で絞り込み"
-        />
-      </Flex>
-      <DataTable.DensityToggle />
-    </DataTable.Toolbar>
-  );
-}
-
-// ── A self-contained table card: owns its own selection + toolbar/bulk swap ─────
-
-function BulkSwapTable({
-  initialSelected,
-  defaultDensity = "compact",
-}: {
-  initialSelected?: string[];
-  defaultDensity?: "compact" | "comfortable";
-}) {
-  const [selected, setSelected] = React.useState<Set<string>>(() => new Set(initialSelected ?? []));
-  const [spanAll, setSpanAll] = React.useState(false);
-  const [query, setQuery] = React.useState("");
-  const [dept, setDept] = React.useState("all");
-  const [sort, setSort] = React.useState<SortStateProp | undefined>({
-    key: "date",
-    direction: "desc",
-  });
-  const [density, setDensity] = React.useState<DensityProp>(defaultDensity);
-  const [confirmDelete, setConfirmDelete] = React.useState(false);
-  const [pending, setPending] = React.useState(false);
-
-  const rows = React.useMemo(() => {
-    let list = REQUESTS;
-    if (dept !== "all") list = list.filter((r) => r.dept === dept);
-    if (query.trim()) {
-      const q = query.trim();
-      list = list.filter((r) => r.employee.includes(q) || r.id.includes(q));
-    }
-    if (!sort) return list;
-    const dir = sort.direction === "asc" ? 1 : -1;
-    return [...list].sort((a, b) => {
-      const av = a[sort.key as keyof AttendanceRequest];
-      const bv = b[sort.key as keyof AttendanceRequest];
-      return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
-    });
-  }, [dept, query, sort]);
-
-  const pageAllSelected = rows.length > 0 && rows.every((r) => selected.has(r.id));
-  const hasSelection = selected.size > 0;
-
-  const clearSelection = () => {
-    setSelected(new Set());
-    setSpanAll(false);
-  };
-
-  const onSelectChange = (next: Set<string>) => {
-    setSelected(next);
-    // any manual change drops out of the cross-page span-all mode
-    setSpanAll(false);
-  };
-
-  const confirmCount = spanAll ? TOTAL_ACROSS_PAGES : selected.size;
-
-  return (
-    <Card>
-      <CardContent flush>
-        <DataTable
-          data={rows}
-          columns={columns}
-          getRowId={(row) => row.id}
-          selectable
-          selected={selected}
-          onSelectChange={onSelectChange}
-          sort={sort}
-          onSortChange={setSort}
-          density={density}
-          onDensityChange={setDensity}
-        >
-          {/* THE SWAP: bulk bar replaces the toolbar when a row is selected */}
-          {hasSelection ? (
-            <BulkActionBar
-              count={selected.size}
-              total={TOTAL_ACROSS_PAGES}
-              pageAllSelected={pageAllSelected}
-              spanAll={spanAll}
-              onSelectSpanAll={() => {
-                setSpanAll(true);
-              }}
-              onApprove={clearSelection}
-              onExport={() => {}}
-              onDelete={() => {
-                setConfirmDelete(true);
-              }}
-              onClear={clearSelection}
-            />
-          ) : (
-            <ListToolbar query={query} onQuery={setQuery} dept={dept} onDept={setDept} />
-          )}
-
-          <DataTable.Content />
-          <DataTable.Pagination cursor="REQ-2034" hasMore onChange={() => {}} />
-        </DataTable>
-      </CardContent>
-
-      <AlertDialog
-        open={confirmDelete}
-        onOpenChange={setConfirmDelete}
-        variant="destructive"
-        title={`${confirmCount}件の申請を削除しますか`}
-        description="削除した勤怠申請は元に戻せません。承認待ちの申請も対象に含まれます。"
-        confirmLabel="削除する"
-        cancelLabel="キャンセル"
-        pending={pending}
-        onConfirm={async () => {
-          setPending(true);
-          await new Promise((r) => setTimeout(r, 800));
-          clearSelection();
-          setPending(false);
-        }}
-      />
-    </Card>
-  );
-}
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="一括操作"
-      subtitle="行を選択するとツールバーが一括操作バーに切り替わります · クロスページ選択・破壊的操作の分離"
-      density="compact"
-    >
-      <Flex direction="col" gap="lg">
-        {/* 1 · At rest, NO selection — the normal toolbar (search / 部署 / density). */}
-        <Flex direction="col" gap="sm">
-          <Flex direction="row" align="center" gap="sm">
-            <Text weight="medium">未選択 · 通常ツールバー</Text>
-            <Text size="xs" tone="muted">
-              検索・部署フィルタ・密度切替が表示される
-            </Text>
-          </Flex>
-          <BulkSwapTable />
-        </Flex>
-
-        {/* 2 · Selected (page fully selected) — toolbar SWAPPED for the bulk bar,
-            cross-page "全 124 件を選択" offered, 一括削除 isolated on the right. */}
-        <Flex direction="col" gap="sm">
-          <Flex direction="row" align="center" gap="sm">
-            <Text weight="medium">選択中 · 一括操作バー</Text>
-            <Text size="xs" tone="muted">
-              primary-tint 背景・クロスページ選択・破壊的操作を右端に隔離
-            </Text>
-          </Flex>
-          <BulkSwapTable initialSelected={REQUESTS.map((r) => r.id)} defaultDensity="comfortable" />
-        </Flex>
-
-        {/* 3 · Partial selection — a few rows checked, bulk bar shows the page
-            count without the cross-page escalation (page not fully selected). */}
-        <Flex direction="col" gap="sm">
-          <Flex direction="row" align="center" gap="sm">
-            <Text weight="medium">一部選択 · クロスページ選択なし</Text>
-            <Text size="xs" tone="muted">
-              ページ全選択でないため「全件選択」は出ない
-            </Text>
-          </Flex>
-          <BulkSwapTable initialSelected={["REQ-2041", "REQ-2037"]} />
-        </Flex>
-      </Flex>
-    </PageContainer>
-  );
-}