@godxjp/ui 31.31.8 → 32.0.0

package/docs/showcase/table-conditional-format.tsx

@@ -1,367 +0,0 @@
-/**
- * Showcase · table-conditional-format — 条件付き書式 (V19)
- *
- * Conditional row / cell formatting by threshold on a 勤怠 (attendance) summary:
- *   - 遅刻 (late arrivals) ≥ 5回   → 行全体を danger(茜) で淡くティント
- *   - 早退 (early leave) > 2.0h     → セルを attention(朱) で強調
- *   - 残業 (overtime) ≥ 45h         → セルを warning(山吹) で注意喚起
- *
- * すべて semantic token 経由（bg-destructive/10・text-attention・text-warning-foreground）で、
- * raw hex は一切使わない。閾値判定は純粋関数に集約し、書式は token クラスにマップする。
- *
- * GAP: DataTable の ColumnDef は per-row / per-cell の className フックを持たない
- *      (render は ReactNode を返すのみ)。行全体のティントには @godxjp/ui が同梱する
- *      実 primitive の Table / TableRow ファミリ（DataTable 内部と同一）で組み立て、
- *      TableRow に token クラスを渡す。セル単位の書式は ColumnDef でも表現できるため、
- *      下段で DataTable + render の cell-only 版も併示する。
- */
-import * as React from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  type ColumnDef,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { cn } from "@godxjp/ui/lib/utils";
-
-// ── 勤怠データ（当月締め · 製造部 第2ライン） ────────────────────────────────
-type Attendance = {
-  id: string;
-  name: string;
-  dept: string;
-  workdays: number; // 出勤日数
-  late: number; // 遅刻回数
-  earlyLeaveHours: number; // 早退時間 (h)
-  overtime: number; // 残業時間 (h)
-  status: "approved" | "pending" | "review";
-};
-
-const ROWS: Attendance[] = [
-  {
-    id: "E-1042",
-    name: "田中 美咲",
-    dept: "製造1課",
-    workdays: 20,
-    late: 1,
-    earlyLeaveHours: 0,
-    overtime: 12.5,
-    status: "approved",
-  },
-  {
-    id: "E-1043",
-    name: "佐藤 健",
-    dept: "製造1課",
-    workdays: 19,
-    late: 6,
-    earlyLeaveHours: 1.5,
-    overtime: 8,
-    status: "review",
-  },
-  {
-    id: "E-1044",
-    name: "鈴木 陽子",
-    dept: "製造2課",
-    workdays: 20,
-    late: 0,
-    earlyLeaveHours: 2.5,
-    overtime: 31,
-    status: "pending",
-  },
-  {
-    id: "E-1045",
-    name: "高橋 大輔",
-    dept: "製造2課",
-    workdays: 18,
-    late: 3,
-    earlyLeaveHours: 0,
-    overtime: 46.5,
-    status: "review",
-  },
-  {
-    id: "E-1046",
-    name: "伊藤 さくら",
-    dept: "検査課",
-    workdays: 20,
-    late: 0,
-    earlyLeaveHours: 0,
-    overtime: 4,
-    status: "approved",
-  },
-  {
-    id: "E-1047",
-    name: "渡辺 翔",
-    dept: "検査課",
-    workdays: 17,
-    late: 8,
-    earlyLeaveHours: 3.0,
-    overtime: 22,
-    status: "review",
-  },
-  {
-    id: "E-1048",
-    name: "山本 直樹",
-    dept: "出荷課",
-    workdays: 20,
-    late: 2,
-    earlyLeaveHours: 0.5,
-    overtime: 15,
-    status: "approved",
-  },
-  {
-    id: "E-1049",
-    name: "中村 あおい",
-    dept: "出荷課",
-    workdays: 19,
-    late: 5,
-    earlyLeaveHours: 2.25,
-    overtime: 48,
-    status: "review",
-  },
-];
-
-// ── 閾値（しきい値） ───────────────────────────────────────────────────────
-const LATE_DANGER = 5; // 遅刻 ≥ 5回 → 行ティント (danger 茜)
-const EARLY_ATTENTION = 2; // 早退 > 2.0h → セル強調 (attention 朱)
-const OVERTIME_WARNING = 45; // 残業 ≥ 45h → セル注意 (warning 山吹)
-
-const isLateRow = (r: Attendance) => r.late >= LATE_DANGER;
-const isEarlyCell = (r: Attendance) => r.earlyLeaveHours > EARLY_ATTENTION;
-const isOvertimeCell = (r: Attendance) => r.overtime >= OVERTIME_WARNING;
-
-const num = new Intl.NumberFormat("ja-JP", { maximumFractionDigits: 2 });
-const hours = (h: number) => `${num.format(h)}h`;
-
-// ── 凡例（しきい値の色対応を明示） ─────────────────────────────────────────
-const LEGEND: Array<{ swatch: string; label: string }> = [
-  {
-    swatch: "bg-destructive/15 border-destructive/40",
-    label: `遅刻 ${LATE_DANGER}回以上 → 行を強調（茜）`,
-  },
-  {
-    swatch: "bg-attention/15 border-attention/40",
-    label: `早退 ${EARLY_ATTENTION}.0h 超 → セル強調（朱）`,
-  },
-  {
-    swatch: "bg-warning/15 border-warning/40",
-    label: `残業 ${OVERTIME_WARNING}h 以上 → セル注意（山吹）`,
-  },
-];
-
-function Legend() {
-  return (
-    <Flex direction="row" wrap gap="md" align="center">
-      {LEGEND.map((l) => (
-        <Flex key={l.label} direction="row" align="center" gap="xs">
-          <span
-            aria-hidden="true"
-            className={cn("inline-block size-3 rounded-sm border", l.swatch)}
-          />
-          <Text size="xs" tone="muted">
-            {l.label}
-          </Text>
-        </Flex>
-      ))}
-    </Flex>
-  );
-}
-
-export default function Demo() {
-  // ── 下段 DataTable 用カラム（セル単位の条件付き書式は render で表現可能） ──
-  const columns: ColumnDef<Attendance>[] = [
-    { key: "id", header: "社員番号", width: "w-24" },
-    { key: "name", header: "氏名" },
-    { key: "dept", header: "部署", hiddenOnMobile: true },
-    {
-      key: "late",
-      header: "遅刻",
-      align: "right",
-      sortable: true,
-      render: (r) => (
-        <Text
-          tabular
-          tone={r.late >= LATE_DANGER ? "destructive" : "default"}
-          weight={r.late >= LATE_DANGER ? "medium" : "regular"}
-        >
-          {r.late}回
-        </Text>
-      ),
-    },
-    {
-      key: "earlyLeaveHours",
-      header: "早退",
-      align: "right",
-      sortable: true,
-      render: (r) =>
-        isEarlyCell(r) ? (
-          <Badge tone="warning" shape="sharp">
-            <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
-              {hours(r.earlyLeaveHours)}
-            </Text>
-          </Badge>
-        ) : (
-          <Text tabular>{hours(r.earlyLeaveHours)}</Text>
-        ),
-    },
-    {
-      key: "overtime",
-      header: "残業",
-      align: "right",
-      sortable: true,
-      render: (r) =>
-        isOvertimeCell(r) ? (
-          <Badge tone="warning" shape="sharp">
-            <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
-              {hours(r.overtime)}
-            </Text>
-          </Badge>
-        ) : (
-          <Text tabular>{hours(r.overtime)}</Text>
-        ),
-    },
-    {
-      key: "status",
-      header: "承認",
-      align: "center",
-      render: (r) => <Badge status={r.status} />,
-    },
-  ];
-
-  return (
-    <PageContainer
-      title="条件付き書式"
-      subtitle="しきい値による行・セルの自動強調 · 遅刻≥5回で行（茜）・早退>2.0hでセル（朱）・残業≥45hでセル（山吹）"
-      density="compact"
-    >
-      <Flex direction="col" gap="lg">
-        {/* ── 行レベル + セルレベルの条件付き書式（実 Table primitive で合成） ── */}
-        <Card>
-          <CardHeader>
-            <Flex direction="row" wrap align="center" justify="between" gap="sm">
-              <CardTitle level={2}>勤怠サマリ · 製造部（当月締め）</CardTitle>
-              <Text size="xs" tone="muted" tabular>
-                対象 {ROWS.length}名 · 2026-05
-              </Text>
-            </Flex>
-            <Legend />
-          </CardHeader>
-          <CardContent flush>
-            <Table>
-              <TableHeader className="bg-secondary">
-                <TableRow>
-                  <TableHead className="w-24">社員番号</TableHead>
-                  <TableHead>氏名</TableHead>
-                  <TableHead className="hidden md:table-cell">部署</TableHead>
-                  <TableHead className="text-end">出勤</TableHead>
-                  <TableHead className="text-end">遅刻</TableHead>
-                  <TableHead className="text-end">早退</TableHead>
-                  <TableHead className="text-end">残業</TableHead>
-                  <TableHead className="text-center">承認</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {ROWS.map((r) => {
-                  const lateRow = isLateRow(r);
-                  return (
-                    <TableRow
-                      key={r.id}
-                      // 行レベル条件付き書式: 遅刻≥5回 → danger(茜) で淡くティント。
-                      // semantic token のみ（bg-destructive/…）。hover でも判別できるよう強めに上書き。
-                      className={cn(lateRow && "bg-destructive/[0.07] hover:bg-destructive/10")}
-                      // しきい値超過行はスクリーンリーダーにも明示。
-                      aria-label={
-                        lateRow ? `${r.name} · 遅刻が基準値（${LATE_DANGER}回）以上` : undefined
-                      }
-                    >
-                      <TableCell className="font-mono text-xs">{r.id}</TableCell>
-                      <TableCell className="font-medium">
-                        <Flex direction="row" align="center" gap="xs">
-                          {r.name}
-                          {lateRow && (
-                            <Badge tone="destructive" variant="outline">
-                              遅刻多
-                            </Badge>
-                          )}
-                        </Flex>
-                      </TableCell>
-                      <TableCell className="text-muted-foreground hidden md:table-cell">
-                        {r.dept}
-                      </TableCell>
-                      <TableCell className="text-end tabular-nums">{r.workdays}日</TableCell>
-                      {/* 遅刻セル: しきい値以上は茜文字で前景強調 */}
-                      <TableCell className="text-end">
-                        <Text
-                          tabular
-                          tone={lateRow ? "destructive" : "default"}
-                          weight={lateRow ? "medium" : "regular"}
-                        >
-                          {r.late}回
-                        </Text>
-                      </TableCell>
-                      {/* 早退セル: > 2.0h は attention(朱) で背景＋前景強調 */}
-                      <TableCell className="text-end">
-                        {isEarlyCell(r) ? (
-                          <Badge tone="warning" shape="sharp">
-                            <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
-                              {hours(r.earlyLeaveHours)}
-                            </Text>
-                          </Badge>
-                        ) : (
-                          <Text tone="muted" tabular>
-                            {hours(r.earlyLeaveHours)}
-                          </Text>
-                        )}
-                      </TableCell>
-                      {/* 残業セル: ≥ 45h は warning(山吹) で注意 */}
-                      <TableCell className="text-end">
-                        {isOvertimeCell(r) ? (
-                          <Badge tone="warning" shape="sharp">
-                            <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
-                              {hours(r.overtime)}
-                            </Text>
-                          </Badge>
-                        ) : (
-                          <Text tabular>{hours(r.overtime)}</Text>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-center">
-                        <Badge status={r.status} />
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-
-        {/* ── DataTable 版（セル単位の条件付き書式は ColumnDef.render で表現） ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>DataTable 版 · セル単位の条件付き書式</CardTitle>
-            <Text size="xs" tone="muted">
-              ColumnDef.render 内でしきい値判定 → token クラスを付与。行全体のティントは ColumnDef
-              では表現できないため上段の実 Table 合成を参照（gapNotes 参照）。
-            </Text>
-          </CardHeader>
-          <CardContent flush>
-            <DataTable data={ROWS} columns={columns} getRowId={(r) => r.id}>
-              <DataTable.Content />
-            </DataTable>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}