@godxjp/ui 31.31.8 → 32.0.0

package/docs/showcase/table-crud-list.tsx

@@ -1,544 +0,0 @@
-/**
- * Showcase · table-crud-list — CRUD一覧 (V1)
- *
- * The canonical 勤怠 (attendance) admin 一覧 (list page), assembled entirely from real
- * @godxjp/ui primitives. This is the pattern a consumer should copy when building
- * an admin list screen:
- *
- *   header toolbar ......... PageContainer (title + `extra`) → SearchInput + primary Button
- *   filter row ............. Card + Flex + Select (部署 / 状態 / 期間) + ghost "クリア"
- *   data grid .............. DataTable (sortable columns · row selection · bulk actions ·
- *                            density toggle · row kebab via DropdownMenu)
- *   footer totals .......... CardFooter — selected count + 出勤/遅刻/承認待ち tallies (tabular-nums)
- *   pagination ............. Pagination (numbered · showTotal · showSizeChanger)
- *
- * All behaviour is real and client-driven so it is observable AT REST:
- *   - sort seeded on 勤務時間 desc (header arrow visible without clicking)
- *   - two rows pre-selected (bulk-action bar + footer tally visible without clicking)
- *   - page 2 of 4 seeded so the numbered pagination shows an active middle page
- *
- * DNA: compact density, small headings, tabular-nums on numeric/time columns, fixed
- * color signaling (success 若竹 出勤 · warning 山吹 遅刻/早退 · info 群青 シフト · danger 茜
- * 欠勤 · neutral 未提出), quiet factual JP copy, no emoji.
- */
-import * as React from "react";
-import { Download, Plus, Check, X } from "lucide-react";
-
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardFooter,
-  DataTable,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { SearchInput, Select } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  Pagination,
-} from "@godxjp/ui/navigation";
-import type { DensityProp, SortStateProp } from "@godxjp/ui/props";
-import { MoreHorizontal, Pencil, CheckCircle2, Trash2 } from "lucide-react";
-
-// ── Domain ────────────────────────────────────────────────────────────────────
-
-/** 勤怠ステータス → Badge `status` keys are mapped to fixed tones by the library:
- *  active→success / pending→warning / failed→destructive / scheduled→info / draft→neutral.
- *  We label them in JP via the column renderer. */
-type Status = "active" | "pending" | "scheduled" | "failed" | "draft";
-
-const STATUS_LABEL: Record<Status, string> = {
-  active: "出勤",
-  pending: "遅刻",
-  scheduled: "シフト",
-  failed: "欠勤",
-  draft: "未提出",
-};
-
-type Attendance = {
-  id: string;
-  code: string;
-  name: string;
-  dept: string;
-  date: string;
-  clockIn: string;
-  clockOut: string;
-  /** 勤務時間 (minutes) — numeric sort key. */
-  worked: number;
-  /** 残業 (minutes). */
-  overtime: number;
-  status: Status;
-  approved: boolean;
-};
-
-const DEPTS = ["全部署", "営業部", "開発部", "管理部", "物流部"] as const;
-
-const ROWS: Attendance[] = [
-  {
-    id: "ATT-2041",
-    code: "E-0162",
-    name: "佐藤 健",
-    dept: "開発部",
-    date: "06/03",
-    clockIn: "09:01",
-    clockOut: "19:48",
-    worked: 587,
-    overtime: 108,
-    status: "active",
-    approved: false,
-  },
-  {
-    id: "ATT-2040",
-    code: "E-0148",
-    name: "鈴木 美咲",
-    dept: "営業部",
-    date: "06/03",
-    clockIn: "09:32",
-    clockOut: "18:05",
-    worked: 453,
-    overtime: 0,
-    status: "pending",
-    approved: false,
-  },
-  {
-    id: "ATT-2039",
-    code: "E-0203",
-    name: "高橋 大輔",
-    dept: "物流部",
-    date: "06/03",
-    clockIn: "08:55",
-    clockOut: "18:00",
-    worked: 485,
-    overtime: 25,
-    status: "active",
-    approved: true,
-  },
-  {
-    id: "ATT-2038",
-    code: "E-0119",
-    name: "田中 由紀",
-    dept: "管理部",
-    date: "06/03",
-    clockIn: "—",
-    clockOut: "—",
-    worked: 0,
-    overtime: 0,
-    status: "failed",
-    approved: false,
-  },
-  {
-    id: "ATT-2037",
-    code: "E-0177",
-    name: "伊藤 翔太",
-    dept: "開発部",
-    date: "06/03",
-    clockIn: "10:02",
-    clockOut: "—",
-    worked: 0,
-    overtime: 0,
-    status: "scheduled",
-    approved: false,
-  },
-  {
-    id: "ATT-2036",
-    code: "E-0091",
-    name: "渡辺 彩",
-    dept: "営業部",
-    date: "06/03",
-    clockIn: "08:58",
-    clockOut: "17:30",
-    worked: 452,
-    overtime: 0,
-    status: "active",
-    approved: true,
-  },
-  {
-    id: "ATT-2035",
-    code: "E-0210",
-    name: "山本 拓海",
-    dept: "物流部",
-    date: "06/03",
-    clockIn: "—",
-    clockOut: "—",
-    worked: 0,
-    overtime: 0,
-    status: "draft",
-    approved: false,
-  },
-  {
-    id: "ATT-2034",
-    code: "E-0134",
-    name: "中村 真央",
-    dept: "開発部",
-    date: "06/03",
-    clockIn: "09:00",
-    clockOut: "20:15",
-    worked: 615,
-    overtime: 135,
-    status: "active",
-    approved: false,
-  },
-];
-
-// ── Formatting helpers ──────────────────────────────────────────────────────────
-
-/** minutes → H:MM (e.g. 587 → "9:47"). 0 renders as a quiet dash. */
-function fmtDuration(min: number): string {
-  if (min <= 0) return "—";
-  const h = Math.floor(min / 60);
-  const m = min % 60;
-  return `${h}:${String(m).padStart(2, "0")}`;
-}
-
-const DEPT_OPTIONS = DEPTS.map((d) => ({ value: d, label: d }));
-const STATUS_OPTIONS = [
-  { value: "all", label: "すべての状態" },
-  { value: "active", label: STATUS_LABEL.active },
-  { value: "pending", label: STATUS_LABEL.pending },
-  { value: "scheduled", label: STATUS_LABEL.scheduled },
-  { value: "failed", label: STATUS_LABEL.failed },
-  { value: "draft", label: STATUS_LABEL.draft },
-];
-const PERIOD_OPTIONS = [
-  { value: "today", label: "本日" },
-  { value: "week", label: "今週" },
-  { value: "month", label: "今月" },
-];
-
-// ── Columns ──────────────────────────────────────────────────────────────────────
-
-const columns: ColumnDef<Attendance>[] = [
-  {
-    key: "code",
-    header: "社員番号",
-    width: "w-28",
-    render: (r) => (
-      <Text size="xs" mono tabular>
-        {r.code}
-      </Text>
-    ),
-  },
-  { key: "name", header: "従業員", sortable: true },
-  { key: "dept", header: "部署", hiddenOnMobile: true },
-  {
-    key: "date",
-    header: "日付",
-    align: "center",
-    width: "w-16",
-    hiddenOnMobile: true,
-    render: (r) => <Text tabular>{r.date}</Text>,
-  },
-  {
-    key: "clockIn",
-    header: "出勤",
-    align: "center",
-    width: "w-16",
-    render: (r) => <Text tabular>{r.clockIn}</Text>,
-  },
-  {
-    key: "clockOut",
-    header: "退勤",
-    align: "center",
-    width: "w-16",
-    render: (r) => <Text tabular>{r.clockOut}</Text>,
-  },
-  {
-    key: "worked",
-    header: "勤務",
-    align: "right",
-    width: "w-16",
-    sortable: true,
-    render: (r) => <Text tabular>{fmtDuration(r.worked)}</Text>,
-  },
-  {
-    key: "overtime",
-    header: "残業",
-    align: "right",
-    width: "w-16",
-    sortable: true,
-    hiddenOnMobile: true,
-    render: (r) => (
-      <Text tone="muted" tabular>
-        {fmtDuration(r.overtime)}
-      </Text>
-    ),
-  },
-  {
-    key: "status",
-    header: "状態",
-    align: "center",
-    render: (r) => (
-      <Badge status={r.status} variant="outline">
-        {STATUS_LABEL[r.status]}
-      </Badge>
-    ),
-  },
-  {
-    key: "approved",
-    header: "承認",
-    align: "center",
-    width: "w-20",
-    render: (r) =>
-      r.approved ? (
-        <Badge tone="success" variant="outline">
-          承認済
-        </Badge>
-      ) : (
-        <Badge tone="muted" variant="outline">
-          承認待ち
-        </Badge>
-      ),
-  },
-  {
-    key: "_actions",
-    header: "",
-    ariaLabel: "操作",
-    align: "right",
-    width: "w-12",
-    render: (r) => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon-sm" aria-label={`${r.name} の操作`}>
-            <MoreHorizontal />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>
-            <Pencil />
-            編集
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <CheckCircle2 />
-            承認
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant="destructive">
-            <Trash2 />
-            削除
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-];
-
-// ── Page ──────────────────────────────────────────────────────────────────────────
-
-const PAGE_SIZE = 8;
-const TOTAL = 31; // 4 pages worth — seeds a realistic numbered pagination.
-
-export default function Demo() {
-  const [query, setQuery] = React.useState("");
-  const [dept, setDept] = React.useState<string>("全部署");
-  const [status, setStatus] = React.useState<string>("all");
-  const [period, setPeriod] = React.useState<string>("today");
-
-  // Seed sort, selection, density and page so every behaviour is visible at rest.
-  const [sort, setSort] = React.useState<SortStateProp | undefined>({
-    key: "worked",
-    direction: "desc",
-  });
-  const [selected, setSelected] = React.useState<Set<string>>(new Set(["ATT-2041", "ATT-2034"]));
-  const [density, setDensity] = React.useState<DensityProp>("compact");
-  const [page, setPage] = React.useState(2);
-  const [pageSize, setPageSize] = React.useState(PAGE_SIZE);
-
-  const hasActiveFilters =
-    query !== "" || dept !== "全部署" || status !== "all" || period !== "today";
-
-  const clearFilters = () => {
-    setQuery("");
-    setDept("全部署");
-    setStatus("all");
-    setPeriod("today");
-  };
-
-  // Client-side filter + sort so the demo is fully interactive without a backend.
-  const rows = React.useMemo(() => {
-    let out = ROWS.filter((r) => {
-      if (dept !== "全部署" && r.dept !== dept) return false;
-      if (status !== "all" && r.status !== status) return false;
-      if (query) {
-        const q = query.toLowerCase();
-        if (!r.name.toLowerCase().includes(q) && !r.code.toLowerCase().includes(q)) return false;
-      }
-      return true;
-    });
-    if (sort) {
-      const dir = sort.direction === "asc" ? 1 : -1;
-      out = [...out].sort((a, b) => {
-        const av = a[sort.key as keyof Attendance];
-        const bv = b[sort.key as keyof Attendance];
-        return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
-      });
-    }
-    return out;
-  }, [dept, status, query, sort]);
-
-  // Footer tallies over the current (filtered) page.
-  const tally = React.useMemo(
-    () => ({
-      present: rows.filter((r) => r.status === "active").length,
-      late: rows.filter((r) => r.status === "pending").length,
-      pendingApproval: rows.filter(
-        (r) => !r.approved && r.status !== "draft" && r.status !== "failed",
-      ).length,
-    }),
-    [rows],
-  );
-
-  return (
-    <PageContainer
-      title="勤怠一覧"
-      subtitle="本日 · 2026/06/03 · 開発拠点 さいたま"
-      density="compact"
-      extra={
-        <Flex direction="row" gap="sm" align="center" wrap>
-          <SearchInput
-            value={query}
-            onValueChange={setQuery}
-            onSearch={() => setPage(1)}
-            placeholder="従業員名・社員番号で検索"
-            ariaLabel="勤怠を検索"
-            className="w-full sm:w-64"
-          />
-          <Button variant="outline" size="sm">
-            <Download aria-hidden="true" />
-            CSV出力
-          </Button>
-          <Button size="sm">
-            <Plus aria-hidden="true" />
-            新規登録
-          </Button>
-        </Flex>
-      }
-    >
-      <Flex direction="col" gap="md">
-        {/* Filter row — real Select primitives, data-driven API. */}
-        <Card>
-          <CardContent>
-            <Flex direction="row" gap="sm" align="center" wrap>
-              <Select
-                options={DEPT_OPTIONS}
-                value={dept}
-                onValueChange={(v: string) => {
-                  setDept(v);
-                  setPage(1);
-                }}
-                placeholder="部署"
-                className="w-full sm:w-40"
-              />
-              <Select
-                options={STATUS_OPTIONS}
-                value={status}
-                onValueChange={(v: string) => {
-                  setStatus(v);
-                  setPage(1);
-                }}
-                placeholder="状態"
-                className="w-full sm:w-40"
-              />
-              <Select
-                options={PERIOD_OPTIONS}
-                value={period}
-                onValueChange={setPeriod}
-                placeholder="期間"
-                className="w-full sm:w-32"
-              />
-              {hasActiveFilters && (
-                <Button variant="ghost" size="sm" onClick={clearFilters}>
-                  <X aria-hidden="true" />
-                  条件をクリア
-                </Button>
-              )}
-              <Text size="xs" tone="muted" tabular className="ms-auto">
-                {rows.length} 件表示
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Data grid + footer totals, wrapped so footer reads as one surface. */}
-        <Card>
-          <CardContent flush>
-            <DataTable
-              data={rows}
-              columns={columns}
-              getRowId={(row) => row.id}
-              selectable
-              selected={selected}
-              onSelectChange={setSelected}
-              density={density}
-              onDensityChange={setDensity}
-              sort={sort}
-              onSortChange={setSort}
-              empty={<Text tone="muted">条件に一致する勤怠はありません。</Text>}
-            >
-              <DataTable.Toolbar>
-                <DataTable.BulkActions>
-                  <Button size="sm" variant="outline">
-                    <Check aria-hidden="true" />
-                    一括承認
-                  </Button>
-                  <Button size="sm" variant="outline">
-                    リマインド送信
-                  </Button>
-                </DataTable.BulkActions>
-                <DataTable.DensityToggle />
-              </DataTable.Toolbar>
-              <DataTable.Content />
-            </DataTable>
-          </CardContent>
-
-          {/* Footer totals — composed from CardFooter + Badge, not a hand-rolled bar. */}
-          <CardFooter className="flex-wrap justify-between">
-            <Flex direction="row" gap="md" align="center" wrap>
-              <Text size="xs" tone="muted">
-                選択中{" "}
-                <Text as="strong" weight="medium" tabular>
-                  {selected.size}
-                </Text>{" "}
-                件
-              </Text>
-              <Badge tone="success" variant="outline">
-                出勤{" "}
-                <Text as="span" tabular>
-                  {tally.present}
-                </Text>
-              </Badge>
-              <Badge tone="warning" variant="outline">
-                遅刻{" "}
-                <Text as="span" tabular>
-                  {tally.late}
-                </Text>
-              </Badge>
-              <Badge tone="muted" variant="outline">
-                承認待ち{" "}
-                <Text as="span" tabular>
-                  {tally.pendingApproval}
-                </Text>
-              </Badge>
-            </Flex>
-            <Pagination
-              value={page}
-              total={TOTAL}
-              pageSize={pageSize}
-              showTotal
-              showSizeChanger
-              onValueChange={(p, s) => {
-                setPage(p);
-                setPageSize(s);
-              }}
-            />
-          </CardFooter>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}