@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/table-filter-chips.tsx

@@ -1,468 +0,0 @@
-/**
- * Showcase · table-filter-chips — フィルターチップ (V6)
- *
- * An active-filter chip bar above an attendance DataTable. Each applied filter
- * renders as a removable Badge chip (× clears that one); a "すべて解除" button
- * clears them all. The chip set drives the DataTable's filtered rows live —
- * the table count, empty state, and pagination all react to the active chips.
- *
- * Composition map (intent → real @godxjp/ui primitive):
- *   page chrome ............ PageContainer (compact density, small heading)
- *   filter controls ........ SearchInput (free text) + Select (data-driven)
- *   active-filter chips ..... Badge (tone) + an inline Button(icon) per chip
- *   clear-all .............. Button(ghost)
- *   the list ............... DataTable (sortable, selectable, bulk, empty)
- *   status cell ............ Badge tone (fixed color signaling)
- *
- * DNA: compact density, tabular-nums on times, fixed tone mapping
- * (出勤 success若竹 / 遅刻 warning山吹 / 早退 attention→warning / 欠勤 danger茜 /
- * 申請中 info群青), quiet JP copy, no emoji.
- *
- * GAP: DataTable has no built-in filter-chip bar (it ships Toolbar / BulkActions
- * / DensityToggle / Pagination only). The chip bar is composed here from real
- * primitives (Badge + Button + SearchInput + Select) and the filtering is done
- * in the consumer, then passed to DataTable as the already-filtered `data`.
- */
-import * as React from "react";
-import { X, Filter } from "lucide-react";
-
-import { Button, Text } from "@godxjp/ui/general";
-import {
-  Badge,
-  Card,
-  CardContent,
-  DataTable,
-  EmptyState,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { SearchInput, Select } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { SortStateProp } from "@godxjp/ui/props";
-
-// ── Domain ──────────────────────────────────────────────────────────────────
-
-type AttendanceStatus = "present" | "late" | "early" | "absent" | "requested";
-
-interface Record_ {
-  id: string;
-  name: string;
-  dept: "営業部" | "開発部" | "管理部" | "物流部";
-  date: string;
-  clockIn: string;
-  clockOut: string;
-  status: AttendanceStatus;
-  overtime: number; // minutes
-}
-
-// status → {label, tone}. attention(遅刻/早退) uses warning山吹; 欠勤 uses danger茜.
-const STATUS_META: Record<
-  AttendanceStatus,
-  { label: string; tone: "success" | "warning" | "destructive" | "info" }
-> = {
-  present: { label: "出勤", tone: "success" },
-  late: { label: "遅刻", tone: "warning" },
-  early: { label: "早退", tone: "warning" },
-  absent: { label: "欠勤", tone: "destructive" },
-  requested: { label: "申請中", tone: "info" },
-};
-
-const DEPTS = ["営業部", "開発部", "管理部", "物流部"] as const;
-
-const ROWS: Record_[] = [
-  {
-    id: "K-1043",
-    name: "田中 健太",
-    dept: "営業部",
-    date: "06/03",
-    clockIn: "08:58",
-    clockOut: "18:12",
-    status: "present",
-    overtime: 12,
-  },
-  {
-    id: "K-1044",
-    name: "佐藤 美咲",
-    dept: "開発部",
-    date: "06/03",
-    clockIn: "09:24",
-    clockOut: "18:40",
-    status: "late",
-    overtime: 40,
-  },
-  {
-    id: "K-1045",
-    name: "鈴木 大輔",
-    dept: "物流部",
-    date: "06/03",
-    clockIn: "07:55",
-    clockOut: "16:30",
-    status: "early",
-    overtime: 0,
-  },
-  {
-    id: "K-1046",
-    name: "高橋 由美",
-    dept: "管理部",
-    date: "06/03",
-    clockIn: "—",
-    clockOut: "—",
-    status: "absent",
-    overtime: 0,
-  },
-  {
-    id: "K-1047",
-    name: "伊藤 翔",
-    dept: "営業部",
-    date: "06/03",
-    clockIn: "08:50",
-    clockOut: "19:05",
-    status: "present",
-    overtime: 65,
-  },
-  {
-    id: "K-1048",
-    name: "渡辺 彩",
-    dept: "開発部",
-    date: "06/03",
-    clockIn: "—",
-    clockOut: "—",
-    status: "requested",
-    overtime: 0,
-  },
-  {
-    id: "K-1049",
-    name: "山本 拓也",
-    dept: "物流部",
-    date: "06/03",
-    clockIn: "09:12",
-    clockOut: "18:20",
-    status: "late",
-    overtime: 20,
-  },
-  {
-    id: "K-1050",
-    name: "中村 真央",
-    dept: "管理部",
-    date: "06/03",
-    clockIn: "08:45",
-    clockOut: "17:50",
-    status: "present",
-    overtime: 0,
-  },
-  {
-    id: "K-1051",
-    name: "小林 直樹",
-    dept: "営業部",
-    date: "06/03",
-    clockIn: "08:59",
-    clockOut: "20:10",
-    status: "present",
-    overtime: 130,
-  },
-  {
-    id: "K-1052",
-    name: "加藤 千夏",
-    dept: "開発部",
-    date: "06/03",
-    clockIn: "—",
-    clockOut: "—",
-    status: "requested",
-    overtime: 0,
-  },
-  {
-    id: "K-1053",
-    name: "吉田 蓮",
-    dept: "物流部",
-    date: "06/03",
-    clockIn: "—",
-    clockOut: "—",
-    status: "absent",
-    overtime: 0,
-  },
-  {
-    id: "K-1054",
-    name: "山田 さくら",
-    dept: "管理部",
-    date: "06/03",
-    clockIn: "09:31",
-    clockOut: "18:00",
-    status: "late",
-    overtime: 0,
-  },
-];
-
-const STATUS_OPTIONS = (Object.keys(STATUS_META) as AttendanceStatus[]).map((k) => ({
-  value: k,
-  label: STATUS_META[k].label,
-}));
-const DEPT_OPTIONS = DEPTS.map((d) => ({ value: d, label: d }));
-const OT_OPTIONS = [
-  { value: "any", label: "残業: すべて" },
-  { value: "ot", label: "残業あり" },
-  { value: "long", label: "60分以上" },
-];
-
-const minutes = (m: number) => `${m}分`;
-
-// ── Columns ─────────────────────────────────────────────────────────────────
-
-const columns: ColumnDef<Record_>[] = [
-  {
-    key: "id",
-    header: "ID",
-    width: "w-24",
-    render: (r) => (
-      <Text size="xs" mono>
-        {r.id}
-      </Text>
-    ),
-  },
-  { key: "name", header: "従業員", sortable: true },
-  { key: "dept", header: "部署", hiddenOnMobile: true },
-  {
-    key: "clockIn",
-    header: "出勤",
-    align: "right",
-    render: (r) => <Text tabular>{r.clockIn}</Text>,
-  },
-  {
-    key: "clockOut",
-    header: "退勤",
-    align: "right",
-    hiddenOnMobile: true,
-    render: (r) => <Text tabular>{r.clockOut}</Text>,
-  },
-  {
-    key: "overtime",
-    header: "残業",
-    align: "right",
-    sortable: true,
-    render: (r) => <Text tabular>{r.overtime > 0 ? minutes(r.overtime) : "—"}</Text>,
-  },
-  {
-    key: "status",
-    header: "状態",
-    align: "center",
-    render: (r) => (
-      <Badge tone={STATUS_META[r.status].tone} variant="outline">
-        {STATUS_META[r.status].label}
-      </Badge>
-    ),
-  },
-];
-
-// ── Chip ────────────────────────────────────────────────────────────────────
-
-function FilterChip({
-  tone,
-  label,
-  onRemove,
-}: {
-  tone?: "success" | "warning" | "destructive" | "info" | "neutral";
-  label: string;
-  onRemove: () => void;
-}) {
-  return (
-    <Badge tone={tone ?? "neutral"} variant="outline">
-      {label}
-      <Button
-        variant="ghost"
-        size="icon-sm"
-        className="size-4 rounded-sm"
-        aria-label={`${label} のフィルターを解除`}
-        onClick={onRemove}
-      >
-        <X className="size-3" aria-hidden="true" />
-      </Button>
-    </Badge>
-  );
-}
-
-export default function Demo() {
-  const [query, setQuery] = React.useState("田");
-  const [status, setStatus] = React.useState<AttendanceStatus | undefined>("late");
-  const [dept, setDept] = React.useState<string | undefined>(undefined);
-  const [ot, setOt] = React.useState<string>("any");
-
-  const [selected, setSelected] = React.useState<Set<string>>(new Set());
-  const [sort, setSort] = React.useState<SortStateProp | undefined>(undefined);
-
-  const hasFilters = query.trim() !== "" || !!status || !!dept || ot !== "any";
-
-  const clearAll = () => {
-    setQuery("");
-    setStatus(undefined);
-    setDept(undefined);
-    setOt("any");
-  };
-
-  // Filter → sort. The active chips drive these filtered rows.
-  const rows = React.useMemo(() => {
-    let out = ROWS.filter((r) => {
-      if (query.trim() && !`${r.name}${r.id}`.includes(query.trim())) return false;
-      if (status && r.status !== status) return false;
-      if (dept && r.dept !== dept) return false;
-      if (ot === "ot" && r.overtime <= 0) return false;
-      if (ot === "long" && r.overtime < 60) return false;
-      return true;
-    });
-    if (sort) {
-      const dir = sort.direction === "asc" ? 1 : -1;
-      out = [...out].sort((a, b) => {
-        const av = a[sort.key as keyof Record_];
-        const bv = b[sort.key as keyof Record_];
-        return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
-      });
-    }
-    return out;
-  }, [query, status, dept, ot, sort]);
-
-  return (
-    <PageContainer
-      title="勤怠一覧"
-      subtitle="フィルターチップ · 適用中の条件をチップで表示、個別/一括で解除"
-      density="compact"
-    >
-      <Flex direction="col" gap="md">
-        {/* Filter controls */}
-        <Flex direction="row" wrap align="center" gap="sm">
-          <SearchInput
-            value={query}
-            onValueChange={setQuery}
-            onSearch={setQuery}
-            placeholder="従業員・IDで検索"
-            aria-label="従業員・IDで検索"
-            className="w-full sm:w-56"
-          />
-          <Select
-            options={STATUS_OPTIONS}
-            value={status}
-            onValueChange={(v: string) => {
-              setStatus((v as AttendanceStatus) || undefined);
-            }}
-            placeholder="状態"
-          />
-          <Select
-            options={DEPT_OPTIONS}
-            value={dept}
-            onValueChange={(v: string) => {
-              setDept(v || undefined);
-            }}
-            placeholder="部署"
-          />
-          <Select
-            options={OT_OPTIONS}
-            value={ot}
-            onValueChange={(v: string) => {
-              setOt(v || "any");
-            }}
-            placeholder="残業"
-          />
-        </Flex>
-
-        {/* Active-filter chip bar — visible at rest because filters are seeded */}
-        <Card>
-          <CardContent solo>
-            <Flex direction="row" wrap align="center" gap="xs">
-              <Flex direction="row" align="center" gap="xs" className="text-muted-foreground">
-                <Filter className="size-3.5" aria-hidden="true" />
-                <Text size="xs">適用中</Text>
-              </Flex>
-
-              {!hasFilters && (
-                <Text size="xs" tone="muted">
-                  条件なし · 全 {ROWS.length} 件
-                </Text>
-              )}
-
-              {query.trim() && (
-                <FilterChip
-                  label={`検索: ${query.trim()}`}
-                  onRemove={() => {
-                    setQuery("");
-                  }}
-                />
-              )}
-              {status && (
-                <FilterChip
-                  tone={STATUS_META[status].tone}
-                  label={`状態: ${STATUS_META[status].label}`}
-                  onRemove={() => {
-                    setStatus(undefined);
-                  }}
-                />
-              )}
-              {dept && (
-                <FilterChip
-                  label={`部署: ${dept}`}
-                  onRemove={() => {
-                    setDept(undefined);
-                  }}
-                />
-              )}
-              {ot !== "any" && (
-                <FilterChip
-                  label={ot === "ot" ? "残業あり" : "残業 60分以上"}
-                  onRemove={() => {
-                    setOt("any");
-                  }}
-                />
-              )}
-
-              {hasFilters && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="ms-auto h-6 text-xs"
-                  onClick={clearAll}
-                >
-                  すべて解除
-                </Button>
-              )}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* The filtered table */}
-        <DataTable
-          data={rows}
-          columns={columns}
-          getRowId={(r) => r.id}
-          selectable
-          selected={selected}
-          onSelectChange={setSelected}
-          sort={sort}
-          onSortChange={setSort}
-          density="compact"
-          empty={
-            <EmptyState
-              variant="section"
-              titleAs="p"
-              title="該当する勤怠記録がありません"
-              description="フィルター条件を解除すると全件を表示します"
-              action={
-                <Button variant="outline" size="sm" onClick={clearAll}>
-                  フィルターを解除
-                </Button>
-              }
-            />
-          }
-        >
-          <DataTable.Toolbar>
-            <Text size="xs" tone="muted" tabular>
-              {rows.length} / {ROWS.length} 件
-            </Text>
-            <DataTable.BulkActions>
-              <Button size="sm" variant="outline">
-                CSV出力
-              </Button>
-              <Button size="sm">一括承認</Button>
-            </DataTable.BulkActions>
-            <DataTable.DensityToggle />
-          </DataTable.Toolbar>
-          <DataTable.Content />
-        </DataTable>
-      </Flex>
-    </PageContainer>
-  );
-}