@godxjp/ui 19.1.0 → 19.2.0

package/docs/showcase/table-footer-totals.tsx

@@ -0,0 +1,311 @@
+/**
+ * Showcase · table-footer-totals — 合計行 (V17)
+ *
+ * A 勤怠 (attendance) summary table whose numeric columns roll up into a sticky
+ * FOOTER totals row. The footer survives vertical scroll: the header stays
+ * pinned to the top, the totals stay pinned to the bottom, and the body of
+ * 部署 × 従業員 rows scrolls between them.
+ *
+ * GAP → composition note
+ * ──────────────────────
+ * `DataTable` (src/components/data-display/data-table.tsx) has NO footer slot:
+ * its compound API is Toolbar / SelectAll / BulkActions / DensityToggle /
+ * Content / Pagination — `DataTable.Content` renders <thead>+<tbody> only.
+ * The `Table` family (src/components/data-display/table.tsx) likewise exports
+ * Table / TableHeader / TableBody / TableHead / TableRow / TableCell — there is
+ * NO `TableFooter` / <tfoot> primitive. A footer totals row is therefore not
+ * expressible through DataTable. Per the rules I compose it from the real
+ * Table primitives plus a semantic <tfoot> (a real HTML table section, not a
+ * hand-rolled control), and record the missing capability in gapNotes.
+ *
+ * DNA: compact density, small heading, tabular-nums on every numeric column,
+ * fixed colour signalling (warning 山吹 = 残業 over threshold, info 群青 =
+ * mid 残業, success 若竹 = on-plan, destructive 茜 = 遅刻 lateness — Badge has
+ * no attention/朱 tone), quiet JP copy, no emoji.
+ */
+import * as React from "react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+// ── Data ────────────────────────────────────────────────────────────────────
+// 2026年5月度 勤怠サマリ — 従業員ごとの月次集計。数値列を合計行へ畳み込む。
+
+type Row = {
+  id: string;
+  name: string;
+  dept: string;
+  workDays: number; // 勤務日数
+  overtime: number; // 残業時間 (h)
+  late: number; // 遅刻回数
+  paidLeave: number; // 有給取得 (日)
+  pay: number; // 総支給額 (¥)
+};
+
+const ROWS: Row[] = [
+  {
+    id: "E-1042",
+    name: "佐藤 美咲",
+    dept: "営業一課",
+    workDays: 20,
+    overtime: 12.5,
+    late: 0,
+    paidLeave: 1,
+    pay: 318500,
+  },
+  {
+    id: "E-1043",
+    name: "鈴木 健太",
+    dept: "営業一課",
+    workDays: 21,
+    overtime: 28.0,
+    late: 2,
+    paidLeave: 0,
+    pay: 352000,
+  },
+  {
+    id: "E-1051",
+    name: "高橋 直樹",
+    dept: "営業二課",
+    workDays: 19,
+    overtime: 6.0,
+    late: 0,
+    paidLeave: 2,
+    pay: 301200,
+  },
+  {
+    id: "E-1058",
+    name: "田中 彩花",
+    dept: "営業二課",
+    workDays: 20,
+    overtime: 15.5,
+    late: 1,
+    paidLeave: 1,
+    pay: 309800,
+  },
+  {
+    id: "E-1064",
+    name: "伊藤 拓海",
+    dept: "開発部",
+    workDays: 21,
+    overtime: 31.5,
+    late: 0,
+    paidLeave: 0,
+    pay: 388400,
+  },
+  {
+    id: "E-1067",
+    name: "渡辺 さくら",
+    dept: "開発部",
+    workDays: 18,
+    overtime: 8.0,
+    late: 3,
+    paidLeave: 3,
+    pay: 295600,
+  },
+  {
+    id: "E-1071",
+    name: "山本 涼介",
+    dept: "開発部",
+    workDays: 20,
+    overtime: 22.0,
+    late: 0,
+    paidLeave: 1,
+    pay: 364100,
+  },
+  {
+    id: "E-1078",
+    name: "中村 結衣",
+    dept: "管理部",
+    workDays: 21,
+    overtime: 4.5,
+    late: 0,
+    paidLeave: 0,
+    pay: 286000,
+  },
+  {
+    id: "E-1082",
+    name: "小林 大輔",
+    dept: "管理部",
+    workDays: 19,
+    overtime: 18.0,
+    late: 1,
+    paidLeave: 2,
+    pay: 333700,
+  },
+  {
+    id: "E-1090",
+    name: "加藤 七海",
+    dept: "管理部",
+    workDays: 20,
+    overtime: 9.5,
+    late: 0,
+    paidLeave: 1,
+    pay: 298400,
+  },
+];
+
+// ── Aggregation (the totals row) ──────────────────────────────────────────────
+
+const totals = ROWS.reduce(
+  (acc, r) => ({
+    workDays: acc.workDays + r.workDays,
+    overtime: acc.overtime + r.overtime,
+    late: acc.late + r.late,
+    paidLeave: acc.paidLeave + r.paidLeave,
+    pay: acc.pay + r.pay,
+  }),
+  { workDays: 0, overtime: 0, late: 0, paidLeave: 0, pay: 0 },
+);
+
+const yen = new Intl.NumberFormat("ja-JP", {
+  style: "currency",
+  currency: "JPY",
+  maximumFractionDigits: 0,
+});
+const hours = new Intl.NumberFormat("ja-JP", {
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
+const count = new Intl.NumberFormat("ja-JP");
+
+// 残業 fixed-mapping: ≥25h 山吹(warning), ≥15h 群青(info), 以下 若竹(success).
+function overtimeTone(h: number): "warning" | "info" | "success" {
+  if (h >= 25) return "warning";
+  if (h >= 15) return "info";
+  return "success";
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="勤怠サマリ"
+      subtitle="2026年5月度 · 全10名 · 合計行は縦スクロールでも固定"
+      density="compact"
+    >
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle level={2}>従業員別 月次集計</CardTitle>
+          <Text size="xs" tone="muted" tabular>
+            対象 {ROWS.length} 名
+          </Text>
+        </CardHeader>
+        {/* flush so the table meets the card edge; vertical scroll inside the
+            card with header pinned top and totals pinned bottom. */}
+        <CardContent flush>
+          <div className="max-h-80 overflow-auto">
+            <Table>
+              <TableHeader className="bg-secondary sticky top-0 z-10">
+                <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-end">総支給額</TableHead>
+                </TableRow>
+              </TableHeader>
+
+              <TableBody>
+                {ROWS.map((r) => (
+                  <TableRow key={r.id}>
+                    <TableCell className="font-mono text-xs">{r.id}</TableCell>
+                    <TableCell className="font-medium">{r.name}</TableCell>
+                    <TableCell className="text-muted-foreground hidden md:table-cell">
+                      {r.dept}
+                    </TableCell>
+                    <TableCell className="text-end tabular-nums">
+                      {count.format(r.workDays)}
+                    </TableCell>
+                    <TableCell className="text-end tabular-nums">
+                      <Badge tone={overtimeTone(r.overtime)} variant="outline">
+                        {hours.format(r.overtime)}h
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-end tabular-nums">
+                      {r.late > 0 ? (
+                        <Badge tone="destructive" variant="outline">
+                          {count.format(r.late)}
+                        </Badge>
+                      ) : (
+                        <Text tone="muted">0</Text>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-end tabular-nums">
+                      {count.format(r.paidLeave)}
+                    </TableCell>
+                    <TableCell className="text-end tabular-nums">{yen.format(r.pay)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+
+              {/* Sticky footer totals row. No TableFooter primitive exists, so we
+                  use a semantic <tfoot> with the same cell primitives. It is
+                  pinned to the bottom of the scroll container. */}
+              <tfoot className="bg-secondary sticky bottom-0 z-10">
+                <TableRow className="hover:bg-secondary border-t-2">
+                  <TableCell className="font-semibold">合計</TableCell>
+                  <TableCell />
+                  <TableCell className="hidden md:table-cell" />
+                  <TableCell className="text-end font-semibold tabular-nums">
+                    {count.format(totals.workDays)}
+                  </TableCell>
+                  <TableCell className="text-end font-semibold tabular-nums">
+                    {hours.format(totals.overtime)}h
+                  </TableCell>
+                  <TableCell className="text-end font-semibold tabular-nums">
+                    {count.format(totals.late)}
+                  </TableCell>
+                  <TableCell className="text-end font-semibold tabular-nums">
+                    {count.format(totals.paidLeave)}
+                  </TableCell>
+                  <TableCell className="text-end font-semibold tabular-nums">
+                    {yen.format(totals.pay)}
+                  </TableCell>
+                </TableRow>
+              </tfoot>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Flex direction="row" align="center" gap="xs" className="mt-3">
+        <Text size="xs" tone="muted">
+          残業 凡例:
+        </Text>
+        <Badge tone="success" variant="outline">
+          ~15h
+        </Badge>
+        <Badge tone="info" variant="outline">
+          15h~
+        </Badge>
+        <Badge tone="warning" variant="outline">
+          25h~
+        </Badge>
+        <Text size="xs" tone="muted" className="ms-2">
+          遅刻:
+        </Text>
+        <Badge tone="destructive" variant="outline">
+          回数
+        </Badge>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/showcase/table-grouped-subtotals.tsx

@@ -0,0 +1,388 @@
+/**
+ * Showcase · table-grouped-subtotals — グループ集計 (V11)
+ *
+ * 勤怠の部署別グループ集計。グループヘッダー行（部署名 + 人数 + 右寄せ数値小計）と
+ * 折りたたみ可能なグループ、最下部に総計行を備えた DataTable パターン。
+ *
+ * GAP: DataTable には「グループ行 / 折りたたみグループ / グループ小計 / 総計フッター」が
+ * ないため、real な Table ファミリ（Table/TableHeader/TableBody/TableRow/TableHead/
+ * TableCell）+ Button(折りたたみトグル) + Badge(人数/状態) + Card で COMPOSE している。
+ * 生の <table> や手書きコントロールは一切使わず、全て @godxjp/ui プリミティブのみ。
+ *
+ * DNA: compact 密度・小見出し・tabular-nums の数値列・固定カラーシグナル
+ * (success 若竹 / warning 山吹 / attention 朱 = 遅刻 / info 群青)・静かな JP コピー・絵文字なし。
+ */
+import * as React from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+// ── 型 ────────────────────────────────────────────────────────────────────────
+
+type AttendanceStatus = "present" | "late" | "leave-early";
+
+type Employee = {
+  id: string;
+  name: string;
+  /** 勤務日数 */
+  days: number;
+  /** 総労働時間（時間） */
+  work: number;
+  /** 残業時間（時間） */
+  overtime: number;
+  /** 遅刻回数 */
+  late: number;
+  status: AttendanceStatus;
+};
+
+type Group = {
+  id: string;
+  /** 部署名 */
+  label: string;
+  members: Employee[];
+};
+
+// ── ダミーデータ（2026年5月度・部署別）─────────────────────────────────────────
+
+const GROUPS: Group[] = [
+  {
+    id: "sales",
+    label: "営業部",
+    members: [
+      {
+        id: "E-1042",
+        name: "佐藤 健一",
+        days: 21,
+        work: 176.5,
+        overtime: 12.0,
+        late: 0,
+        status: "present",
+      },
+      {
+        id: "E-1051",
+        name: "鈴木 美咲",
+        days: 20,
+        work: 168.0,
+        overtime: 4.5,
+        late: 2,
+        status: "late",
+      },
+      {
+        id: "E-1063",
+        name: "高橋 涼",
+        days: 21,
+        work: 171.0,
+        overtime: 8.0,
+        late: 0,
+        status: "present",
+      },
+      {
+        id: "E-1077",
+        name: "田中 由美",
+        days: 19,
+        work: 152.5,
+        overtime: 0.0,
+        late: 0,
+        status: "leave-early",
+      },
+    ],
+  },
+  {
+    id: "dev",
+    label: "開発部",
+    members: [
+      {
+        id: "E-2008",
+        name: "伊藤 大輔",
+        days: 21,
+        work: 180.0,
+        overtime: 22.5,
+        late: 0,
+        status: "present",
+      },
+      {
+        id: "E-2015",
+        name: "渡辺 翔太",
+        days: 21,
+        work: 178.5,
+        overtime: 18.0,
+        late: 1,
+        status: "late",
+      },
+      {
+        id: "E-2031",
+        name: "山本 彩",
+        days: 20,
+        work: 165.0,
+        overtime: 9.5,
+        late: 0,
+        status: "present",
+      },
+    ],
+  },
+  {
+    id: "support",
+    label: "カスタマーサポート部",
+    members: [
+      {
+        id: "E-3004",
+        name: "中村 拓也",
+        days: 22,
+        work: 176.0,
+        overtime: 6.0,
+        late: 0,
+        status: "present",
+      },
+      {
+        id: "E-3019",
+        name: "小林 結衣",
+        days: 20,
+        work: 160.0,
+        overtime: 2.0,
+        late: 3,
+        status: "late",
+      },
+    ],
+  },
+];
+
+// ── フォーマッタ ────────────────────────────────────────────────────────────────
+
+const hours = new Intl.NumberFormat("ja-JP", {
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
+const fmtH = (n: number) => `${hours.format(n)}h`;
+
+const STATUS_LABEL: Record<AttendanceStatus, string> = {
+  present: "出勤",
+  late: "遅刻あり",
+  "leave-early": "早退あり",
+};
+
+// 固定カラーシグナル: 出勤=success若竹 / 遅刻=attention(=warning 山吹) / 早退=info群青
+const STATUS_TONE: Record<AttendanceStatus, "success" | "warning" | "info"> = {
+  present: "success",
+  late: "warning",
+  "leave-early": "info",
+};
+
+type Subtotal = { days: number; work: number; overtime: number; late: number };
+
+function subtotal(members: Employee[]): Subtotal {
+  return members.reduce<Subtotal>(
+    (acc, m) => ({
+      days: acc.days + m.days,
+      work: acc.work + m.work,
+      overtime: acc.overtime + m.overtime,
+      late: acc.late + m.late,
+    }),
+    { days: 0, work: 0, overtime: 0, late: 0 },
+  );
+}
+
+function grandTotal(groups: Group[]): Subtotal {
+  return groups.reduce<Subtotal>(
+    (acc, g) => {
+      const s = subtotal(g.members);
+      return {
+        days: acc.days + s.days,
+        work: acc.work + s.work,
+        overtime: acc.overtime + s.overtime,
+        late: acc.late + s.late,
+      };
+    },
+    { days: 0, work: 0, overtime: 0, late: 0 },
+  );
+}
+
+// ── グループヘッダー行（部署名 + 人数バッジ + 右寄せ数値小計 + 折りたたみ）──────────
+
+function GroupHeaderRow({
+  group,
+  open,
+  onToggle,
+}: {
+  group: Group;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  const s = subtotal(group.members);
+  const Chevron = open ? ChevronDown : ChevronRight;
+  return (
+    <TableRow className="bg-secondary hover:bg-secondary border-b">
+      <TableCell className="py-2 ps-2 pe-0" colSpan={2}>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onToggle}
+          aria-expanded={open}
+          aria-controls={`grp-${group.id}`}
+          className="h-7 gap-2 font-medium"
+        >
+          <Chevron className="text-muted-foreground size-4" aria-hidden="true" />
+          {group.label}
+          <Badge variant="outline" tone="neutral" className="ms-1">
+            {group.members.length}名
+          </Badge>
+        </Button>
+      </TableCell>
+      <TableCell className="py-2 text-end font-medium tabular-nums">{s.days}日</TableCell>
+      <TableCell className="py-2 text-end font-medium tabular-nums">{fmtH(s.work)}</TableCell>
+      <TableCell className="py-2 text-end font-medium tabular-nums">{fmtH(s.overtime)}</TableCell>
+      <TableCell className="py-2 text-end tabular-nums">
+        {s.late > 0 ? (
+          <Badge variant="outline" tone="warning">
+            {s.late}回
+          </Badge>
+        ) : (
+          <Text tone="muted" weight="medium">
+            0回
+          </Text>
+        )}
+      </TableCell>
+      <TableCell className="py-2" />
+    </TableRow>
+  );
+}
+
+// ── 明細行 ──────────────────────────────────────────────────────────────────────
+
+function MemberRow({ m }: { m: Employee }) {
+  return (
+    <TableRow>
+      <TableCell className="text-muted-foreground ps-10 font-mono text-xs">{m.id}</TableCell>
+      <TableCell>{m.name}</TableCell>
+      <TableCell className="text-end tabular-nums">{m.days}日</TableCell>
+      <TableCell className="text-end tabular-nums">{fmtH(m.work)}</TableCell>
+      <TableCell className="text-end tabular-nums">{fmtH(m.overtime)}</TableCell>
+      <TableCell className="text-end tabular-nums">
+        {m.late > 0 ? m.late : <Text tone="muted">—</Text>}
+        {m.late > 0 ? "回" : ""}
+      </TableCell>
+      <TableCell className="text-center">
+        <Badge variant="outline" tone={STATUS_TONE[m.status]}>
+          {STATUS_LABEL[m.status]}
+        </Badge>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+// ── 集計テーブル ────────────────────────────────────────────────────────────────
+
+function GroupedTable({
+  groups,
+  defaultClosed = [],
+}: {
+  groups: Group[];
+  /** 初期状態で折りたたむグループ ID（静的に閉じた状態を見せる）*/
+  defaultClosed?: string[];
+}) {
+  const [closed, setClosed] = React.useState<Set<string>>(new Set(defaultClosed));
+  const toggle = (id: string) => {
+    setClosed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const total = grandTotal(groups);
+
+  return (
+    <div className="ui-data-table-root">
+      <Table>
+        <TableHeader className="bg-background sticky top-0 z-10">
+          <TableRow>
+            <TableHead className="w-40">従業員番号</TableHead>
+            <TableHead>氏名 / 部署</TableHead>
+            <TableHead className="w-20 text-end">勤務日数</TableHead>
+            <TableHead className="w-24 text-end">総労働</TableHead>
+            <TableHead className="w-24 text-end">残業</TableHead>
+            <TableHead className="w-20 text-end">遅刻</TableHead>
+            <TableHead className="w-28 text-center">状態</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {groups.map((g) => {
+            const open = !closed.has(g.id);
+            return (
+              <React.Fragment key={g.id}>
+                <GroupHeaderRow group={g} open={open} onToggle={() => toggle(g.id)} />
+                {open && g.members.map((m) => <MemberRow key={m.id} m={m} />)}
+              </React.Fragment>
+            );
+          })}
+          {/* 総計フッター行 */}
+          <TableRow className="bg-muted/40 hover:bg-muted/40 border-t-2">
+            <TableCell className="py-2 font-medium" colSpan={2}>
+              総計 · 全{groups.reduce((n, g) => n + g.members.length, 0)}名
+            </TableCell>
+            <TableCell className="py-2 text-end font-bold tabular-nums">{total.days}日</TableCell>
+            <TableCell className="py-2 text-end font-bold tabular-nums">
+              {fmtH(total.work)}
+            </TableCell>
+            <TableCell className="py-2 text-end font-bold tabular-nums">
+              {fmtH(total.overtime)}
+            </TableCell>
+            <TableCell className="py-2 text-end font-bold tabular-nums">{total.late}回</TableCell>
+            <TableCell className="py-2" />
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="グループ集計"
+      subtitle="部署別の勤怠サマリ · グループヘッダー（部署名 + 人数 + 右寄せ小計）+ 折りたたみ + 総計"
+      density="compact"
+    >
+      <Flex direction="col" gap="lg">
+        {/* 全展開（既定）— 各グループの小計と明細が同時に見える */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle level={2}>2026年5月度 勤怠集計</CardTitle>
+            <Text size="xs" tone="muted" tabular>
+              締め: 2026-05-31
+            </Text>
+          </CardHeader>
+          <CardContent flush>
+            <GroupedTable groups={GROUPS} />
+          </CardContent>
+        </Card>
+
+        {/* 折りたたみ済みの状態を静的に提示 — 「カスタマーサポート部」は閉じて小計のみ表示 */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle level={2}>折りたたみ状態</CardTitle>
+            <Text size="xs" tone="muted">
+              閉じたグループは小計のみ表示（クリックで展開）
+            </Text>
+          </CardHeader>
+          <CardContent flush>
+            <GroupedTable groups={GROUPS} defaultClosed={["support"]} />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}