@godxjp/ui 31.31.8 → 32.0.1

package/docs/showcase/table-density.tsx

@@ -1,349 +0,0 @@
-/**
- * Showcase · table-density — 密度切替 (V4)
- *
- * One and the SAME DataTable, retuned across the three row densities of the
- * reference-design token scale:
- *
- *   compact     行高 28px (1.75rem)  — 監視・大量行向け
- *   default     行高 32px (2rem)     — 標準
- *   comfortable 行高 44px (2.75rem)  — タッチ下限 44px
- *
- * Density is a single knob: switching it only re-binds `--table-row-height`
- * (+ cell padding / control heights) via the public `ui-density-*` class —
- * the column definitions, data, sort, and selection never change. A
- * three-way ToggleGroup drives it; a numeric readout proves the px retune.
- *
- * Real @godxjp/ui primitives only: DataTable / Table family, Badge(tone),
- * ToggleGroup, Card, Button — no hand-rolled table, no raw controls.
- *
- * DNA: small headings, tabular-nums on 時刻/時間, fixed color signaling
- * (出勤=success若竹 · 遅刻=attention朱→destructive · 早退=warning山吹 ·
- * 承認待ち=info群青), quiet JP copy, no emoji.
- */
-import * as React from "react";
-import { Clock } from "lucide-react";
-
-import {
-  Badge,
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  type BadgeProps,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { TableDensityProp } from "@godxjp/ui/props";
-
-type BadgeTone = NonNullable<BadgeProps["tone"]>;
-
-// ── The three densities of the reference-design token scale ─────────────────────────
-// DataTable's own `density` prop is TableDensityProp = "compact" | "comfortable"
-// (it excludes "default"). To showcase all THREE token steps over the same table
-// we drive the row retune through the public `ui-density-*` class — the same knob
-// PageContainer's `density` prop sets — and pass the supported value to the prop
-// where it exists. See gapNotes.
-type DensityKey = "compact" | "default" | "comfortable";
-
-const DENSITY_META: Record<DensityKey, { label: string; px: number; cls: string; note: string }> = {
-  compact: { label: "compact", px: 28, cls: "ui-density-compact", note: "監視・大量行" },
-  default: { label: "default", px: 32, cls: "ui-density-default", note: "標準" },
-  comfortable: { label: "comfortable", px: 44, cls: "ui-density-comfortable", note: "タッチ 44px" },
-};
-
-const DENSITY_ORDER: DensityKey[] = ["compact", "default", "comfortable"];
-
-// `default` is not part of DataTable's density prop; fall back to compact for the
-// prop (lowest CSS precedence) and let the appended class win the cascade.
-const toTableDensityProp = (d: DensityKey): TableDensityProp =>
-  d === "comfortable" ? "comfortable" : "compact";
-
-// ── Realistic attendance data — 本日の打刻 ────────────────────────────────────────
-
-type AttendanceStatus = "present" | "late" | "leftEarly" | "pending" | "absent";
-
-type Attendance = {
-  id: string;
-  employee: string;
-  dept: string;
-  shift: string;
-  clockIn: string;
-  clockOut: string;
-  workHours: string;
-  overtime: string;
-  status: AttendanceStatus;
-};
-
-const STATUS_META: Record<AttendanceStatus, { label: string; tone: BadgeTone }> = {
-  present: { label: "出勤", tone: "success" }, // 若竹
-  late: { label: "遅刻", tone: "destructive" }, // 朱寄り — 非破壊だが注意喚起
-  leftEarly: { label: "早退", tone: "warning" }, // 山吹
-  pending: { label: "承認待ち", tone: "info" }, // 群青
-  absent: { label: "欠勤", tone: "neutral" },
-};
-
-const ROWS: Attendance[] = [
-  {
-    id: "E-1042",
-    employee: "佐藤 健一",
-    dept: "倉庫課",
-    shift: "早番 09:00–18:00",
-    clockIn: "08:54",
-    clockOut: "18:03",
-    workHours: "8.0",
-    overtime: "0.1",
-    status: "present",
-  },
-  {
-    id: "E-1043",
-    employee: "鈴木 美咲",
-    dept: "倉庫課",
-    shift: "早番 09:00–18:00",
-    clockIn: "09:21",
-    clockOut: "18:00",
-    workHours: "7.6",
-    overtime: "0.0",
-    status: "late",
-  },
-  {
-    id: "E-1051",
-    employee: "高橋 直樹",
-    dept: "検品課",
-    shift: "中番 11:00–20:00",
-    clockIn: "10:58",
-    clockOut: "16:40",
-    workHours: "5.7",
-    overtime: "0.0",
-    status: "leftEarly",
-  },
-  {
-    id: "E-1067",
-    employee: "田中 彩花",
-    dept: "出荷課",
-    shift: "遅番 13:00–22:00",
-    clockIn: "12:55",
-    clockOut: "22:18",
-    workHours: "8.4",
-    overtime: "0.4",
-    status: "pending",
-  },
-  {
-    id: "E-1078",
-    employee: "渡辺 翔太",
-    dept: "検品課",
-    shift: "早番 09:00–18:00",
-    clockIn: "08:49",
-    clockOut: "18:02",
-    workHours: "8.0",
-    overtime: "0.0",
-    status: "present",
-  },
-  {
-    id: "E-1090",
-    employee: "伊藤 結衣",
-    dept: "出荷課",
-    shift: "中番 11:00–20:00",
-    clockIn: "—",
-    clockOut: "—",
-    workHours: "0.0",
-    overtime: "0.0",
-    status: "absent",
-  },
-  {
-    id: "E-1102",
-    employee: "山本 大輔",
-    dept: "倉庫課",
-    shift: "遅番 13:00–22:00",
-    clockIn: "12:58",
-    clockOut: "22:05",
-    workHours: "8.1",
-    overtime: "0.1",
-    status: "present",
-  },
-  {
-    id: "E-1118",
-    employee: "中村 さくら",
-    dept: "検品課",
-    shift: "早番 09:00–18:00",
-    clockIn: "09:33",
-    clockOut: "18:10",
-    workHours: "7.6",
-    overtime: "0.2",
-    status: "late",
-  },
-];
-
-const num = (v: string) => <Text tabular>{v}</Text>;
-
-const columns: ColumnDef<Attendance>[] = [
-  {
-    key: "id",
-    header: "社員番号",
-    width: "w-24",
-    render: (r) => (
-      <Text size="xs" mono>
-        {r.id}
-      </Text>
-    ),
-  },
-  { key: "employee", header: "従業員", sortable: true },
-  { key: "dept", header: "部署", hiddenOnMobile: true },
-  { key: "shift", header: "シフト", hiddenOnMobile: true },
-  { key: "clockIn", header: "出勤", align: "right", render: (r) => num(r.clockIn) },
-  { key: "clockOut", header: "退勤", align: "right", render: (r) => num(r.clockOut) },
-  {
-    key: "workHours",
-    header: "実働(h)",
-    align: "right",
-    sortable: true,
-    render: (r) => num(r.workHours),
-  },
-  {
-    key: "overtime",
-    header: "残業(h)",
-    align: "right",
-    hiddenOnMobile: true,
-    render: (r) => num(r.overtime),
-  },
-  {
-    key: "status",
-    header: "状態",
-    align: "center",
-    render: (r) => {
-      const m = STATUS_META[r.status];
-      return <Badge tone={m.tone}>{m.label}</Badge>;
-    },
-  },
-];
-
-export default function Demo() {
-  const [density, setDensity] = React.useState<DensityKey>("compact");
-  const [selected, setSelected] = React.useState<Set<string>>(new Set(["E-1043"]));
-  const meta = DENSITY_META[density];
-
-  return (
-    <PageContainer
-      title="密度切替 (V4)"
-      subtitle="同一 DataTable を compact 28 / default 32 / comfortable 44 で再調整。行は --table-row-height で再バインド"
-      density="compact"
-    >
-      <Flex direction="col" gap="lg">
-        {/* Control + live readout */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>行密度</CardTitle>
-            <CardAction>
-              <Flex direction="row" align="center" gap="md">
-                <Flex align="center" gap="xs">
-                  <Text as="span" size="xs" tone="muted">
-                    <Clock className="size-3.5" aria-hidden="true" />
-                    行高
-                    <Text as="strong" weight="medium" tabular>
-                      {meta.px}px
-                    </Text>
-                    <span aria-hidden="true">·</span>
-                    {meta.note}
-                  </Text>
-                </Flex>
-                <ToggleGroup
-                  type="single"
-                  value={density}
-                  onValueChange={(v) => {
-                    if (v) setDensity(v as DensityKey);
-                  }}
-                  variant="outline"
-                  size="sm"
-                  aria-label="行密度を切り替え"
-                >
-                  {DENSITY_ORDER.map((key) => (
-                    <ToggleGroupItem
-                      key={key}
-                      value={key}
-                      aria-label={`${DENSITY_META[key].label} ${DENSITY_META[key].px}px`}
-                    >
-                      <Flex direction="row" align="center" gap="xs">
-                        <span>{DENSITY_META[key].label}</span>
-                        {/* `inherit` (gh#643): a SELECTED item fills with --primary, and `muted`
-                            is an absolute token — it measured 1.11:1 on that fill. */}
-                        <Text size="2xs" tone="inherit" tabular>
-                          {DENSITY_META[key].px}
-                        </Text>
-                      </Flex>
-                    </ToggleGroupItem>
-                  ))}
-                </ToggleGroup>
-              </Flex>
-            </CardAction>
-          </CardHeader>
-          <CardContent flush>
-            {/* The SAME DataTable. Only the density class changes — same columns,
-                data, sort and selection. The appended ui-density-* class wins the
-                token cascade so all three steps (incl. 32px default) render. */}
-            <DataTable
-              key={density}
-              data={ROWS}
-              columns={columns}
-              getRowId={(row) => row.id}
-              selectable
-              selected={selected}
-              onSelectChange={setSelected}
-              density={toTableDensityProp(density)}
-              className={meta.cls}
-            >
-              <DataTable.Toolbar>
-                <DataTable.BulkActions>
-                  <Button size="sm" variant="outline">
-                    勤怠を承認
-                  </Button>
-                  <Button size="sm" variant="outline">
-                    打刻修正
-                  </Button>
-                </DataTable.BulkActions>
-                <Text size="xs" tone="muted" tabular>
-                  {ROWS.length} 名 · 2026-06-04
-                </Text>
-              </DataTable.Toolbar>
-              <DataTable.Content />
-            </DataTable>
-          </CardContent>
-        </Card>
-
-        {/* Side-by-side reference — all three densities at rest, same table shape.
-            Proves the retune statically without toggling (Rule #2). */}
-        <Flex direction="col" gap="sm">
-          <Text weight="medium">3 密度の比較（静止状態）</Text>
-          <Flex direction="col" gap="lg">
-            {DENSITY_ORDER.map((key) => {
-              const m = DENSITY_META[key];
-              return (
-                <Card key={key}>
-                  <CardHeader>
-                    <CardTitle level={2}>{m.label}</CardTitle>
-                    <CardAction>
-                      <Text size="xs" tone="muted" tabular>
-                        行高 {m.px}px · {m.note}
-                      </Text>
-                    </CardAction>
-                  </CardHeader>
-                  <CardContent flush>
-                    <DataTable
-                      data={ROWS.slice(0, 4)}
-                      columns={columns}
-                      getRowId={(row) => row.id}
-                      density={toTableDensityProp(key)}
-                      className={m.cls}
-                    />
-                  </CardContent>
-                </Card>
-              );
-            })}
-          </Flex>
-        </Flex>
-      </Flex>
-    </PageContainer>
-  );
-}