@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,377 +0,0 @@
-/**
- * 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">
-                        {/* Weekday over its date reads as ONE label — no seam between the lines. */}
-                        <Flex direction="col" gap="none" className="leading-tight">
-                          <Text weight="medium">{d.label}</Text>
-                          <Text size="2xs" tone="muted" tabular>
-                            {d.date}
-                          </Text>
-                        </Flex>
-                      </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>
-  );
-}