@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/table-compact-kintone.tsx

@@ -1,438 +0,0 @@
-/**
- * Showcase · table-compact-kintone — 高密度グリッド (V18)
- *
- * kintone 風の高密度グリッド: 28px 行 (compact density)・1px の薄い罫線・多列・
- * 数値列は tabular-nums。日次勤怠サマリを 1 画面で俯瞰する管理者向けレイアウト。
- *
- * 構成マップ (kintone のブロック → 実 @godxjp/ui プリミティブ):
- *   ページ枠 ........... PageContainer (density="compact", 小さい見出し)
- *   ツールバー ......... DataTable.Toolbar + DensityToggle + Button
- *   一括操作 ........... DataTable.BulkActions (選択 > 0 で表示)
- *   多列グリッド ....... DataTable.Content (compact = 28px 行・薄い罫線)
- *   状態セル ........... Badge tone (success 若竹 / warning 山吹 / destructive 茜 / info 群青)
- *   数値列 ............. tabular-nums (出勤/退勤/実働/残業/遅刻分)
- *   ページネーション ... DataTable.Pagination
- *
- * DNA: compact 28px 密度・固定カラーシグナリング・tabular 数値・小さい見出し・
- *      静かな日本語コピー・絵文字なし。すべて実プリミティブ。
- */
-import * as React from "react";
-
-import { Badge, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@godxjp/ui/navigation";
-import type { DensityProp, SortStateProp } from "@godxjp/ui/props";
-import { Check, MoreHorizontal, Pencil } from "lucide-react";
-
-// ── 勤怠データ (日次・kintone のレコード相当) ────────────────────────────────────
-
-type Attendance = {
-  id: string; // 従業員番号
-  name: string; // 氏名
-  dept: string; // 部署
-  shift: string; // シフト
-  clockIn: string; // 出勤
-  clockOut: string; // 退勤
-  work: number; // 実働 (分)
-  overtime: number; // 残業 (分)
-  late: number; // 遅刻 (分)
-  early: number; // 早退 (分)
-  status: AttendanceStatus; // 勤怠区分
-  approved: ApprovalState; // 承認
-};
-
-type AttendanceStatus = "present" | "late" | "early" | "leave" | "absent";
-type ApprovalState = "approved" | "pending" | "rejected";
-
-const STATUS_META: Record<
-  AttendanceStatus,
-  { label: string; tone: "success" | "warning" | "destructive" | "info" }
-> = {
-  present: { label: "出勤", tone: "success" }, // 若竹
-  late: { label: "遅刻", tone: "warning" }, // 山吹
-  early: { label: "早退", tone: "warning" }, // 山吹
-  leave: { label: "有給", tone: "info" }, // 群青
-  absent: { label: "欠勤", tone: "destructive" }, // 茜
-};
-
-const APPROVAL_META: Record<
-  ApprovalState,
-  { label: string; tone: "success" | "warning" | "destructive" }
-> = {
-  approved: { label: "承認済", tone: "success" },
-  pending: { label: "未承認", tone: "warning" },
-  rejected: { label: "差戻し", tone: "destructive" },
-};
-
-const ROWS: Attendance[] = [
-  {
-    id: "E-1024",
-    name: "佐藤 健太",
-    dept: "製造一課",
-    shift: "日勤",
-    clockIn: "08:58",
-    clockOut: "18:12",
-    work: 495,
-    overtime: 72,
-    late: 0,
-    early: 0,
-    status: "present",
-    approved: "approved",
-  },
-  {
-    id: "E-1031",
-    name: "鈴木 美咲",
-    dept: "製造一課",
-    shift: "日勤",
-    clockIn: "09:14",
-    clockOut: "18:03",
-    work: 469,
-    overtime: 63,
-    late: 14,
-    early: 0,
-    status: "late",
-    approved: "pending",
-  },
-  {
-    id: "E-1042",
-    name: "高橋 大輔",
-    dept: "製造二課",
-    shift: "夜勤",
-    clockIn: "21:02",
-    clockOut: "06:01",
-    work: 480,
-    overtime: 60,
-    late: 2,
-    early: 0,
-    status: "present",
-    approved: "approved",
-  },
-  {
-    id: "E-1055",
-    name: "田中 彩花",
-    dept: "品質保証",
-    shift: "日勤",
-    clockIn: "08:55",
-    clockOut: "16:40",
-    work: 405,
-    overtime: 0,
-    late: 0,
-    early: 80,
-    status: "early",
-    approved: "pending",
-  },
-  {
-    id: "E-1063",
-    name: "伊藤 翔",
-    dept: "物流",
-    shift: "早番",
-    clockIn: "06:00",
-    clockOut: "15:02",
-    work: 482,
-    overtime: 62,
-    late: 0,
-    early: 0,
-    status: "present",
-    approved: "approved",
-  },
-  {
-    id: "E-1078",
-    name: "渡辺 真奈",
-    dept: "品質保証",
-    shift: "日勤",
-    clockIn: "—",
-    clockOut: "—",
-    work: 0,
-    overtime: 0,
-    late: 0,
-    early: 0,
-    status: "leave",
-    approved: "approved",
-  },
-  {
-    id: "E-1089",
-    name: "山本 拓也",
-    dept: "製造二課",
-    shift: "夜勤",
-    clockIn: "—",
-    clockOut: "—",
-    work: 0,
-    overtime: 0,
-    late: 0,
-    early: 0,
-    status: "absent",
-    approved: "rejected",
-  },
-  {
-    id: "E-1094",
-    name: "中村 由香",
-    dept: "製造一課",
-    shift: "日勤",
-    clockIn: "09:32",
-    clockOut: "18:20",
-    work: 488,
-    overtime: 80,
-    late: 32,
-    early: 0,
-    status: "late",
-    approved: "pending",
-  },
-  {
-    id: "E-1102",
-    name: "小林 直樹",
-    dept: "物流",
-    shift: "遅番",
-    clockIn: "13:01",
-    clockOut: "22:04",
-    work: 483,
-    overtime: 63,
-    late: 1,
-    early: 0,
-    status: "present",
-    approved: "approved",
-  },
-  {
-    id: "E-1118",
-    name: "加藤 千尋",
-    dept: "品質保証",
-    shift: "日勤",
-    clockIn: "08:57",
-    clockOut: "17:35",
-    work: 458,
-    overtime: 35,
-    late: 0,
-    early: 0,
-    status: "present",
-    approved: "approved",
-  },
-  {
-    id: "E-1127",
-    name: "吉田 颯太",
-    dept: "製造二課",
-    shift: "日勤",
-    clockIn: "09:06",
-    clockOut: "18:01",
-    work: 475,
-    overtime: 61,
-    late: 6,
-    early: 0,
-    status: "late",
-    approved: "pending",
-  },
-  {
-    id: "E-1133",
-    name: "山田 結衣",
-    dept: "製造一課",
-    shift: "早番",
-    clockIn: "06:01",
-    clockOut: "14:30",
-    work: 449,
-    overtime: 0,
-    late: 1,
-    early: 30,
-    status: "early",
-    approved: "pending",
-  },
-];
-
-// 分 → H:MM 表記 (実働・残業列。tabular-nums で桁を揃える)
-function toHm(mins: number): string {
-  if (mins <= 0) return "0:00";
-  const h = Math.floor(mins / 60);
-  const m = mins % 60;
-  return `${h}:${String(m).padStart(2, "0")}`;
-}
-
-// 数値セルの共通レンダラ。0 は控えめに、値ありは右寄せ tabular-nums。
-function num(value: string, muted = false) {
-  return (
-    <Text tabular tone={muted ? "muted" : "default"}>
-      {value}
-    </Text>
-  );
-}
-
-const columns: ColumnDef<Attendance>[] = [
-  {
-    key: "id",
-    header: "社員番号",
-    width: "w-24",
-    render: (r) => (
-      <Text as="code" size="xs" tabular>
-        {r.id}
-      </Text>
-    ),
-  },
-  { key: "name", header: "氏名", width: "w-28", sortable: true },
-  { key: "dept", header: "部署", width: "w-24", hiddenOnMobile: true },
-  { key: "shift", header: "シフト", width: "w-20", align: "center", hiddenOnMobile: true },
-  {
-    key: "clockIn",
-    header: "出勤",
-    width: "w-16",
-    align: "right",
-    render: (r) => num(r.clockIn, r.clockIn === "—"),
-  },
-  {
-    key: "clockOut",
-    header: "退勤",
-    width: "w-16",
-    align: "right",
-    render: (r) => num(r.clockOut, r.clockOut === "—"),
-  },
-  {
-    key: "work",
-    header: "実働",
-    width: "w-16",
-    align: "right",
-    sortable: true,
-    render: (r) => num(toHm(r.work), r.work === 0),
-  },
-  {
-    key: "overtime",
-    header: "残業",
-    width: "w-16",
-    align: "right",
-    sortable: true,
-    render: (r) => num(toHm(r.overtime), r.overtime === 0),
-  },
-  {
-    key: "late",
-    header: "遅刻",
-    width: "w-14",
-    align: "right",
-    hiddenOnMobile: true,
-    render: (r) => num(r.late ? `${r.late}分` : "0", r.late === 0),
-  },
-  {
-    key: "early",
-    header: "早退",
-    width: "w-14",
-    align: "right",
-    hiddenOnMobile: true,
-    render: (r) => num(r.early ? `${r.early}分` : "0", r.early === 0),
-  },
-  {
-    key: "status",
-    header: "勤怠区分",
-    width: "w-24",
-    align: "center",
-    render: (r) => {
-      const m = STATUS_META[r.status];
-      return (
-        <Badge tone={m.tone} variant="outline">
-          {m.label}
-        </Badge>
-      );
-    },
-  },
-  {
-    key: "approved",
-    header: "承認",
-    width: "w-24",
-    align: "center",
-    hiddenOnMobile: true,
-    render: (r) => {
-      const m = APPROVAL_META[r.approved];
-      return (
-        <Badge tone={m.tone} variant="outline">
-          {m.label}
-        </Badge>
-      );
-    },
-  },
-  {
-    key: "_actions",
-    header: "",
-    ariaLabel: "操作",
-    width: "w-10",
-    align: "right",
-    render: (r) => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon-sm" aria-label={`${r.name} の操作`}>
-            <MoreHorizontal />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>
-            <Pencil />
-            打刻修正
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>
-            <Check />
-            承認
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-];
-
-export default function Demo() {
-  // 未承認の 2 行を初期選択 (一括操作バーを at rest で見せる)
-  const [selected, setSelected] = React.useState<Set<string>>(new Set(["E-1031", "E-1094"]));
-  // 残業の多い順に初期ソート
-  const [sort, setSort] = React.useState<SortStateProp | undefined>({
-    key: "overtime",
-    direction: "desc",
-  });
-  // 高密度を明示 (controlled compact = 28px 行)
-  const [density, setDensity] = React.useState<DensityProp>("compact");
-
-  const rows = React.useMemo(() => {
-    if (!sort) return ROWS;
-    const dir = sort.direction === "asc" ? 1 : -1;
-    return [...ROWS].sort((a, b) => {
-      const av = a[sort.key as keyof Attendance];
-      const bv = b[sort.key as keyof Attendance];
-      return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
-    });
-  }, [sort]);
-
-  return (
-    <PageContainer
-      title="勤怠グリッド"
-      subtitle="2026/06/04 (木) · 製造部 全課 · 高密度表示 (28px 行 · 13 列)"
-      density="compact"
-    >
-      <Flex direction="col" gap="md">
-        <DataTable
-          data={rows}
-          columns={columns}
-          getRowId={(row) => row.id}
-          selectable
-          selected={selected}
-          onSelectChange={setSelected}
-          density={density}
-          onDensityChange={setDensity}
-          sort={sort}
-          onSortChange={setSort}
-        >
-          <DataTable.Toolbar>
-            <DataTable.BulkActions>
-              <Button size="sm" variant="outline">
-                CSV 出力
-              </Button>
-              <Button size="sm">一括承認</Button>
-            </DataTable.BulkActions>
-            <Text size="xs" tone="muted" tabular>
-              全 {ROWS.length} 名
-            </Text>
-            <DataTable.DensityToggle />
-          </DataTable.Toolbar>
-          <DataTable.Content />
-          <DataTable.Pagination cursor="E-1133" hasMore onChange={() => {}} />
-        </DataTable>
-      </Flex>
-    </PageContainer>
-  );
-}