@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/table-expandable-rows.tsx

@@ -1,496 +0,0 @@
-/**
- * Showcase · table-expandable-rows — 展開行 (V9)
- *
- * Expandable detail row pattern for a 勤怠 (attendance) admin list. Clicking a row
- * reveals an inline detail panel (border-left 3px primary) directly beneath it;
- * the toggle is EXCLUSIVE — opening one row collapses any other.
- *
- * Why compose from <Table> instead of <DataTable>:
- *   DataTable.Content renders each row from the column defs and offers no slot to
- *   inject an extra <tr> (the detail panel) between data rows, nor an expanded /
- *   exclusive-open state. So the master list is built from the real low-level
- *   Table family (Table / TableHeader / TableRow / TableHead / TableCell) — the
- *   same primitives DataTable itself uses — and the panel is a spanning <tr>.
- *   See gapNotes. Everything else (Badge tone, Button, Card, StatCard) is a real
- *   @godxjp/ui primitive; no hand-rolled controls, tokens only.
- *
- * DNA: compact density, tabular-nums on numbers, fixed color signaling
- * (success 若竹 / warning 山吹 / attention 朱 via destructive tone reserved for
- * 欠勤), small headings, quiet JP copy, no emoji.
- */
-import * as React from "react";
-import { ChevronRight, Clock, Coffee, MapPin } from "lucide-react";
-
-import {
-  Badge,
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  StatCard,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  type BadgeProps,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-type BadgeTone = NonNullable<BadgeProps["tone"]>;
-
-// ── Mock attendance data ──────────────────────────────────────────────────────────
-
-type ShiftStatus = "出勤" | "遅刻" | "早退" | "欠勤";
-
-const STATUS_TONE: Record<
-  ShiftStatus,
-  Extract<BadgeTone, "success" | "warning" | "destructive">
-> = {
-  出勤: "success",
-  遅刻: "warning",
-  早退: "warning",
-  欠勤: "destructive",
-};
-
-type DayLog = {
-  date: string;
-  weekday: string;
-  status: ShiftStatus;
-  clockIn: string;
-  clockOut: string;
-  break: string;
-  work: string;
-  note?: string;
-};
-
-type Employee = {
-  id: string;
-  code: string;
-  name: string;
-  dept: string;
-  site: string;
-  workDays: number;
-  lateCount: number;
-  overtime: string; // 残業 累計
-  status: ShiftStatus; // 直近の状態
-  days: DayLog[];
-};
-
-const EMPLOYEES: Employee[] = [
-  {
-    id: "E-1042",
-    code: "1042",
-    name: "佐藤 健太",
-    dept: "製造一課",
-    site: "埼玉センター",
-    workDays: 19,
-    lateCount: 0,
-    overtime: "12:30",
-    status: "出勤",
-    days: [
-      {
-        date: "06/02",
-        weekday: "月",
-        status: "出勤",
-        clockIn: "08:58",
-        clockOut: "18:05",
-        break: "1:00",
-        work: "8:07",
-      },
-      {
-        date: "06/03",
-        weekday: "火",
-        status: "出勤",
-        clockIn: "08:55",
-        clockOut: "19:40",
-        break: "1:00",
-        work: "9:45",
-        note: "残業 1:40（出荷対応）",
-      },
-      {
-        date: "06/04",
-        weekday: "水",
-        status: "出勤",
-        clockIn: "08:52",
-        clockOut: "18:02",
-        break: "1:00",
-        work: "8:10",
-      },
-    ],
-  },
-  {
-    id: "E-1043",
-    code: "1043",
-    name: "鈴木 美咲",
-    dept: "品質管理課",
-    site: "埼玉センター",
-    workDays: 18,
-    lateCount: 2,
-    overtime: "03:10",
-    status: "遅刻",
-    days: [
-      {
-        date: "06/02",
-        weekday: "月",
-        status: "出勤",
-        clockIn: "09:00",
-        clockOut: "18:00",
-        break: "1:00",
-        work: "8:00",
-      },
-      {
-        date: "06/03",
-        weekday: "火",
-        status: "遅刻",
-        clockIn: "09:24",
-        clockOut: "18:00",
-        break: "1:00",
-        work: "7:36",
-        note: "電車遅延（承認待ち）",
-      },
-      {
-        date: "06/04",
-        weekday: "水",
-        status: "遅刻",
-        clockIn: "09:18",
-        clockOut: "18:05",
-        break: "1:00",
-        work: "7:47",
-        note: "申請理由 未入力",
-      },
-    ],
-  },
-  {
-    id: "E-1044",
-    code: "1044",
-    name: "高橋 大輔",
-    dept: "物流課",
-    site: "千葉センター",
-    workDays: 17,
-    lateCount: 1,
-    overtime: "06:45",
-    status: "早退",
-    days: [
-      {
-        date: "06/02",
-        weekday: "月",
-        status: "出勤",
-        clockIn: "08:50",
-        clockOut: "18:10",
-        break: "1:00",
-        work: "8:20",
-      },
-      {
-        date: "06/03",
-        weekday: "火",
-        status: "早退",
-        clockIn: "08:55",
-        clockOut: "15:30",
-        break: "0:45",
-        work: "5:50",
-        note: "通院（承認済）",
-      },
-      {
-        date: "06/04",
-        weekday: "水",
-        status: "出勤",
-        clockIn: "08:48",
-        clockOut: "18:02",
-        break: "1:00",
-        work: "8:14",
-      },
-    ],
-  },
-  {
-    id: "E-1045",
-    code: "1045",
-    name: "田中 由紀",
-    dept: "総務課",
-    site: "埼玉センター",
-    workDays: 16,
-    lateCount: 0,
-    overtime: "00:00",
-    status: "欠勤",
-    days: [
-      {
-        date: "06/02",
-        weekday: "月",
-        status: "出勤",
-        clockIn: "08:59",
-        clockOut: "17:45",
-        break: "1:00",
-        work: "7:46",
-      },
-      {
-        date: "06/03",
-        weekday: "火",
-        status: "欠勤",
-        clockIn: "—",
-        clockOut: "—",
-        break: "—",
-        work: "0:00",
-        note: "有給休暇（承認済）",
-      },
-      {
-        date: "06/04",
-        weekday: "水",
-        status: "出勤",
-        clockIn: "08:57",
-        clockOut: "17:50",
-        break: "1:00",
-        work: "7:53",
-      },
-    ],
-  },
-];
-
-// ── Shared cell padding to match compact DataTable density ─────────────────────
-
-const CELL = "align-middle";
-
-function StatusBadge({ status }: { status: ShiftStatus }) {
-  return (
-    <Badge tone={STATUS_TONE[status]} variant="outline">
-      {status}
-    </Badge>
-  );
-}
-
-// ── Inline detail panel (border-left 3px primary) ──────────────────────────────
-
-function DetailPanel({ employee }: { employee: Employee }) {
-  return (
-    <Card className="border-s-primary bg-muted/30 border-s-[3px]">
-      <CardContent solo>
-        <Flex direction="col" gap="md">
-          <Flex direction="row" wrap align="center" gap="md">
-            <Text size="sm" weight="medium">
-              {employee.name} · {employee.dept}
-            </Text>
-            <Flex align="center" gap="xs">
-              <Text size="xs" tone="muted">
-                <MapPin className="size-3.5" aria-hidden="true" />
-                {employee.site}
-              </Text>
-            </Flex>
-          </Flex>
-
-          {/* KPI mini-row inside the panel — real StatCard primitives */}
-          <Flex direction="row" wrap gap="sm">
-            <StatCard label="出勤日数" value={employee.workDays} layout="inline" />
-            <StatCard
-              label="遅刻回数"
-              value={employee.lateCount}
-              layout="inline"
-              inverse
-              delta={employee.lateCount === 0 ? "問題なし" : "要確認"}
-            />
-            <StatCard
-              label="残業 累計"
-              value={<Text tabular>{employee.overtime}</Text>}
-              layout="inline"
-            />
-          </Flex>
-
-          {/* Per-day breakdown — quiet nested list, real Card chrome */}
-          <Card>
-            <CardHeader>
-              <CardTitle
-                level={2}
-                className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))]"
-              >
-                今週の打刻
-              </CardTitle>
-              <CardAction>
-                <Flex align="center" gap="xs">
-                  <Text size="xs" tone="muted">
-                    <Clock className="size-3.5" aria-hidden="true" />
-                    直近 3 日
-                  </Text>
-                </Flex>
-              </CardAction>
-            </CardHeader>
-            <CardContent flush>
-              <Table>
-                <TableHeader className="bg-secondary">
-                  <TableRow>
-                    <TableHead>日付</TableHead>
-                    <TableHead>状態</TableHead>
-                    <TableHead>出勤</TableHead>
-                    <TableHead>退勤</TableHead>
-                    <TableHead>休憩</TableHead>
-                    <TableHead className="text-end">実働</TableHead>
-                    <TableHead>備考</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {employee.days.map((d) => (
-                    <TableRow key={d.date}>
-                      <TableCell className={`${CELL} text-xs whitespace-nowrap tabular-nums`}>
-                        {d.date}（{d.weekday}）
-                      </TableCell>
-                      <TableCell className={CELL}>
-                        <StatusBadge status={d.status} />
-                      </TableCell>
-                      <TableCell className={`${CELL} tabular-nums`}>{d.clockIn}</TableCell>
-                      <TableCell className={`${CELL} tabular-nums`}>{d.clockOut}</TableCell>
-                      <TableCell className={`${CELL} text-muted-foreground tabular-nums`}>
-                        <Flex align="center" gap="xs">
-                          <Coffee className="size-3.5" aria-hidden="true" />
-                          {d.break}
-                        </Flex>
-                      </TableCell>
-                      <TableCell className={`${CELL} text-end font-medium tabular-nums`}>
-                        {d.work}
-                      </TableCell>
-                      <TableCell className={`${CELL} text-muted-foreground text-xs`}>
-                        {d.note ?? "—"}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-
-          <Flex direction="row" gap="sm">
-            <Button size="sm" variant="outline">
-              勤怠詳細を開く
-            </Button>
-            <Button size="sm">承認する</Button>
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-// ── Master list with exclusive expandable rows ─────────────────────────────────
-
-const COLSPAN = 6; // toggle + 従業員 + 部署 + 直近 + 出勤日数 + 残業
-
-function ExpandableList() {
-  // Exclusive open: a single id (or null) — opening one collapses any other.
-  const [openId, setOpenId] = React.useState<string | null>("E-1043");
-
-  const toggle = (id: string) => {
-    setOpenId((cur) => (cur === id ? null : id));
-  };
-
-  return (
-    <Table>
-      <TableHeader className="bg-secondary sticky top-0 z-10">
-        <TableRow>
-          <TableHead className="w-10" aria-label="展開" />
-          <TableHead>従業員</TableHead>
-          <TableHead>部署</TableHead>
-          <TableHead className="text-center">直近の状態</TableHead>
-          <TableHead className="text-end">出勤日数</TableHead>
-          <TableHead className="text-end">残業 累計</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {EMPLOYEES.map((emp) => {
-          const isOpen = openId === emp.id;
-          const panelId = `row-detail-${emp.id}`;
-          return (
-            <React.Fragment key={emp.id}>
-              {/* THE DISCLOSURE IS THE BUTTON, NOT THE ROW (gh#643, found by check:frame-axe).
-                  This row used to carry `tabIndex={0}` + `aria-expanded` + `aria-controls` and be
-                  the control itself. `aria-expanded` is valid on a TREEGRID row and not on a table
-                  row, so axe scored it `aria-conditional-attr` — and the row was a focus stop with
-                  no role and no name, which is the worse half of the same mistake. The chevron is
-                  now a real button: it owns the state, the name and the tab stop. Clicking the row
-                  still works, as a pointer convenience that claims no semantics of its own. */}
-              <TableRow
-                data-state={isOpen ? "selected" : undefined}
-                onClick={() => {
-                  toggle(emp.id);
-                }}
-                className="hover:bg-muted/50 cursor-pointer"
-              >
-                <TableCell className={CELL}>
-                  <Button
-                    variant="ghost"
-                    size="icon-xs"
-                    aria-expanded={isOpen}
-                    aria-controls={isOpen ? panelId : undefined}
-                    aria-label={`${emp.name} の詳細を${isOpen ? "折りたたむ" : "展開する"}`}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      toggle(emp.id);
-                    }}
-                  >
-                    <ChevronRight
-                      className={`text-muted-foreground size-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
-                      aria-hidden="true"
-                    />
-                  </Button>
-                </TableCell>
-                <TableCell className={CELL}>
-                  <Text as="div" weight="medium">
-                    {emp.name}
-                  </Text>
-                  <Text as="div" size="xs" tone="muted" tabular>
-                    {emp.id} · No.{emp.code}
-                  </Text>
-                </TableCell>
-                <TableCell className={`${CELL} text-muted-foreground`}>{emp.dept}</TableCell>
-                <TableCell className={`${CELL} text-center`}>
-                  <StatusBadge status={emp.status} />
-                </TableCell>
-                <TableCell className={`${CELL} text-end tabular-nums`}>{emp.workDays}</TableCell>
-                <TableCell className={`${CELL} text-end tabular-nums`}>{emp.overtime}</TableCell>
-              </TableRow>
-              {isOpen && (
-                <TableRow className="hover:bg-transparent">
-                  {/* `flush` — the detail panel owns its own inset, so it spans the full cell
-                      width instead of being indented by the cell padding. */}
-                  <TableCell flush colSpan={COLSPAN} id={panelId}>
-                    <DetailPanel employee={emp} />
-                  </TableCell>
-                </TableRow>
-              )}
-            </React.Fragment>
-          );
-        })}
-      </TableBody>
-    </Table>
-  );
-}
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="展開行"
-      subtitle="行クリックでインライン詳細を展開 · 排他トグル（同時に開くのは 1 行のみ）"
-      density="compact"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>従業員の勤怠（今週）</CardTitle>
-            <CardAction>
-              <Text size="xs" tone="muted" tabular>
-                4 名 · 06/04 時点
-              </Text>
-            </CardAction>
-          </CardHeader>
-          <CardContent flush>
-            <ExpandableList />
-          </CardContent>
-        </Card>
-
-        <Text as="p" size="xs" tone="muted">
-          行を選択すると直下に詳細パネル（左罫線 3px
-          primary）が開きます。別の行を開くと前の行は自動的に閉じます。 キーボードでは行に Tab
-          で移動し、Enter / Space で開閉できます。
-        </Text>
-      </Flex>
-    </PageContainer>
-  );
-}