@godxjp/ui 19.1.0 → 19.3.1

package/docs/showcase/table-sticky-columns.tsx

@@ -0,0 +1,376 @@
+/**
+ * Showcase · table-sticky-columns — 固定列 (V13)
+ *
+ * Sticky/pinned first (識別子 = 従業員) + last (操作) columns over a
+ * horizontal-scroll 勤怠 matrix (week grid, `min-w` on the table). The pinned
+ * edges carry an inset shadow that reveals there is more content to scroll.
+ *
+ * GAP: @godxjp/ui `DataTable` / `ColumnDef` has NO column-pinning capability —
+ * it only sticks the HEADER row (top), not LEFT/RIGHT columns. So the pinned-
+ * column matrix is COMPOSED from the real `Table` family primitives
+ * (Table/TableHeader/TableBody/TableRow/TableHead/TableCell) with
+ * `sticky left-0` / `sticky right-0` + a background + edge shadow — no hand-
+ * rolled <table>, no raw HTML controls. Status/識別子 cells reuse Badge/Button.
+ *
+ * DNA applied: compact density, small headings, tabular-nums on the matrix,
+ * fixed color signaling (出勤 若竹/success · 遅刻 朱/attention via warning ·
+ * 欠勤 茜/destructive · 有休 群青/info), quiet JP copy, no emoji.
+ */
+import * as React from "react";
+import { Check } from "lucide-react";
+
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  Badge,
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  type BadgeProps,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+type BadgeTone = NonNullable<BadgeProps["tone"]>;
+
+// ── Domain: a one-week 勤怠 matrix per 従業員 ───────────────────────────────
+
+/** Per-day attendance mark. Tone follows the fixed attendance signaling map. */
+type Mark = "present" | "late" | "absent" | "paid" | "off";
+
+const MARK: Record<Mark, { label: string; tone: BadgeTone | "muted" }> = {
+  present: { label: "出勤", tone: "success" }, // 若竹
+  late: { label: "遅刻", tone: "warning" }, // 朱/山吹 — non-destructive attention
+  absent: { label: "欠勤", tone: "destructive" }, // 茜
+  paid: { label: "有休", tone: "info" }, // 群青
+  off: { label: "—", tone: "muted" }, // 公休 / 非番
+};
+
+const DAYS = [
+  { key: "mon", label: "月", date: "6/1" },
+  { key: "tue", label: "火", date: "6/2" },
+  { key: "wed", label: "水", date: "6/3" },
+  { key: "thu", label: "木", date: "6/4" },
+  { key: "fri", label: "金", date: "6/5" },
+  { key: "sat", label: "土", date: "6/6" },
+  { key: "sun", label: "日", date: "6/7" },
+] as const;
+
+type DayKey = (typeof DAYS)[number]["key"];
+
+type Employee = {
+  id: string;
+  name: string;
+  dept: string;
+  marks: Record<DayKey, Mark>;
+  /** 実働合計（時間） for the week. */
+  total: number;
+  /** 遅刻回数 for the week. */
+  lateCount: number;
+};
+
+const EMPLOYEES: Employee[] = [
+  {
+    id: "E-1042",
+    name: "佐藤 美咲",
+    dept: "受付",
+    marks: {
+      mon: "present",
+      tue: "present",
+      wed: "late",
+      thu: "present",
+      fri: "present",
+      sat: "off",
+      sun: "off",
+    },
+    total: 38.5,
+    lateCount: 1,
+  },
+  {
+    id: "E-1043",
+    name: "鈴木 健一",
+    dept: "倉庫",
+    marks: {
+      mon: "present",
+      tue: "late",
+      wed: "late",
+      thu: "present",
+      fri: "absent",
+      sat: "present",
+      sun: "off",
+    },
+    total: 40.0,
+    lateCount: 2,
+  },
+  {
+    id: "E-1044",
+    name: "高橋 結衣",
+    dept: "受付",
+    marks: {
+      mon: "paid",
+      tue: "paid",
+      wed: "present",
+      thu: "present",
+      fri: "present",
+      sat: "off",
+      sun: "off",
+    },
+    total: 24.0,
+    lateCount: 0,
+  },
+  {
+    id: "E-1045",
+    name: "田中 大輔",
+    dept: "配送",
+    marks: {
+      mon: "present",
+      tue: "present",
+      wed: "present",
+      thu: "present",
+      fri: "present",
+      sat: "present",
+      sun: "off",
+    },
+    total: 46.0,
+    lateCount: 0,
+  },
+  {
+    id: "E-1046",
+    name: "渡辺 さくら",
+    dept: "配送",
+    marks: {
+      mon: "absent",
+      tue: "present",
+      wed: "present",
+      thu: "late",
+      fri: "present",
+      sat: "off",
+      sun: "off",
+    },
+    total: 31.5,
+    lateCount: 1,
+  },
+  {
+    id: "E-1047",
+    name: "伊藤 翔太",
+    dept: "倉庫",
+    marks: {
+      mon: "present",
+      tue: "present",
+      wed: "present",
+      thu: "paid",
+      fri: "paid",
+      sat: "off",
+      sun: "off",
+    },
+    total: 23.0,
+    lateCount: 0,
+  },
+];
+
+// ── Sticky-edge styling (composed — DataTable cannot pin columns) ───────────
+
+/**
+ * Pinned columns must paint an opaque background (the scrolling body slides
+ * UNDER them) and a hard edge so the seam reads as "more to scroll". The edge
+ * is the `--border` token (`border-border`) — a token-only inset cue; the
+ * `bg-inherit` lets each row's tint (selected/hover) bleed into the pinned cell.
+ * Header cells inherit `bg-secondary`; body cells inherit the row background.
+ */
+const PIN_LEFT = "sticky start-0 z-20 bg-inherit border-e border-border";
+const PIN_RIGHT = "sticky end-0 z-20 bg-inherit border-s border-border";
+
+function MarkCell({ mark }: { mark: Mark }) {
+  const def = MARK[mark];
+  if (mark === "off") {
+    return (
+      <Text tone="muted" tabular>
+        —
+      </Text>
+    );
+  }
+  return (
+    <Badge tone={def.tone === "muted" ? "muted" : def.tone} variant="outline">
+      {def.label}
+    </Badge>
+  );
+}
+
+export default function Demo() {
+  const [approved, setApproved] = React.useState<Set<string>>(new Set(["E-1044"]));
+
+  const toggleApprove = (id: string) => {
+    setApproved((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  return (
+    <PageContainer
+      title="固定列 · 週次勤怠マトリクス"
+      subtitle="先頭列（従業員）と末尾列（操作）を固定し、中央の日付グリッドのみ横スクロール。固定端には inset シャドウ。"
+      density="compact"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>2026年6月 第1週</CardTitle>
+            <CardAction>
+              <Text size="xs" tone="muted" tabular>
+                従業員 {EMPLOYEES.length} 名 · 横スクロールで全日表示
+              </Text>
+            </CardAction>
+          </CardHeader>
+          <CardContent flush>
+            {/* The scroll container. `overflow-x-auto` clips; the table holds a
+                min width wider than the viewport so the matrix must scroll. */}
+            <div className="overflow-x-auto">
+              <Table className="min-w-[860px]">
+                <TableHeader className="bg-secondary [&_tr]:bg-secondary">
+                  <TableRow className="bg-secondary hover:bg-secondary">
+                    {/* Pinned-left identifier header */}
+                    <TableHead className={`${PIN_LEFT} w-56 min-w-56`}>従業員</TableHead>
+                    {DAYS.map((d) => (
+                      <TableHead key={d.key} className="text-center">
+                        <span className="flex flex-col leading-tight">
+                          <Text weight="medium">{d.label}</Text>
+                          <Text size="2xs" tone="muted" tabular>
+                            {d.date}
+                          </Text>
+                        </span>
+                      </TableHead>
+                    ))}
+                    <TableHead className="text-end tabular-nums">実働</TableHead>
+                    {/* Pinned-right action header */}
+                    <TableHead className={`${PIN_RIGHT} w-28 min-w-28 text-end`}>操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {EMPLOYEES.map((emp) => {
+                    const isApproved = approved.has(emp.id);
+                    return (
+                      <TableRow
+                        key={emp.id}
+                        data-state={isApproved ? "selected" : undefined}
+                        className={isApproved ? "bg-primary/[0.04]" : "bg-background"}
+                      >
+                        {/* Pinned-left: 識別子 (従業員 + 部署 + ID) */}
+                        <TableCell className={`${PIN_LEFT} w-56 min-w-56 align-middle`}>
+                          <Flex direction="col" className="leading-tight">
+                            <Text weight="medium">{emp.name}</Text>
+                            <Text size="2xs" tone="muted">
+                              {emp.dept} ·{" "}
+                              <Text size="2xs" tone="muted" mono tabular>
+                                {emp.id}
+                              </Text>
+                            </Text>
+                          </Flex>
+                        </TableCell>
+
+                        {/* Scrolling day grid */}
+                        {DAYS.map((d) => (
+                          <TableCell key={d.key} className="text-center align-middle">
+                            <MarkCell mark={emp.marks[d.key]} />
+                          </TableCell>
+                        ))}
+
+                        {/* 実働合計 — numeric, tabular */}
+                        <TableCell className="text-end align-middle tabular-nums">
+                          {emp.total.toFixed(1)}
+                          <Text size="2xs" tone="muted">
+                            h
+                          </Text>
+                        </TableCell>
+
+                        {/* Pinned-right: 操作 */}
+                        <TableCell className={`${PIN_RIGHT} w-28 min-w-28 text-end align-middle`}>
+                          <Button
+                            size="sm"
+                            variant={isApproved ? "outline" : "default"}
+                            onClick={() => {
+                              toggleApprove(emp.id);
+                            }}
+                            aria-pressed={isApproved}
+                          >
+                            {isApproved ? (
+                              <>
+                                <Check aria-hidden="true" />
+                                承認済
+                              </>
+                            ) : (
+                              "承認"
+                            )}
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Legend — the fixed color-signaling map, shown at rest. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>凡例</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap gap="md">
+              <Flex direction="row" align="center" gap="xs">
+                <Badge tone="success" variant="outline">
+                  出勤
+                </Badge>
+                <Text size="xs" tone="muted">
+                  通常勤務
+                </Text>
+              </Flex>
+              <Flex direction="row" align="center" gap="xs">
+                <Badge tone="warning" variant="outline">
+                  遅刻
+                </Badge>
+                <Text size="xs" tone="muted">
+                  非破壊的な注意
+                </Text>
+              </Flex>
+              <Flex direction="row" align="center" gap="xs">
+                <Badge tone="destructive" variant="outline">
+                  欠勤
+                </Badge>
+                <Text size="xs" tone="muted">
+                  未承認の不在
+                </Text>
+              </Flex>
+              <Flex direction="row" align="center" gap="xs">
+                <Badge tone="info" variant="outline">
+                  有休
+                </Badge>
+                <Text size="xs" tone="muted">
+                  有給休暇
+                </Text>
+              </Flex>
+              <Flex direction="row" align="center" gap="xs">
+                <Text tone="muted" tabular>
+                  —
+                </Text>
+                <Text size="xs" tone="muted">
+                  公休 / 非番
+                </Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}