@jinaan/uikit 0.0.0-stage → 0.1.1

package/src/data-table.tsx

@@ -0,0 +1,749 @@
+import {
+  CaretDown,
+  CaretUp,
+  CaretUpDown,
+  Columns as ColumnsIcon,
+  FunnelSimple,
+  Lock,
+  MagnifyingGlass,
+  WarningCircle,
+  X,
+} from "@phosphor-icons/react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import { Button } from "./button";
+import { Checkbox } from "./checkbox";
+import { Input } from "./input";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import { TableBody, TableCell, TableRow } from "./table";
+import { TableEmptyState } from "./table-empty-state";
+import {
+  TableSurface,
+  type TableSurfaceAction,
+  type TableSurfaceTone,
+} from "./table-surface";
+import { cn } from "./utils";
+
+export interface Column<T> {
+  id: string;
+  header: string;
+  cell: (row: T) => ReactNode;
+  sortable?: boolean;
+  sortValue?: (row: T) => string | number | null | undefined;
+  numeric?: boolean;
+  defaultHidden?: boolean;
+  align?: "left" | "right";
+  className?: string;
+  /** Column width for the fixed layout (e.g. "18rem", "20%"). Defaults to auto. */
+  width?: string;
+  /** Required columns stay visible and cannot be hidden. */
+  required?: boolean;
+}
+
+export interface DataTableFilterOption {
+  value: string;
+  label: string;
+}
+
+export interface DataTableFilter<T> {
+  id: string;
+  label: string;
+  options: DataTableFilterOption[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  /** Return true when the row matches the selected filter values. */
+  match: (row: T, values: string[]) => boolean;
+}
+
+export interface BulkAction<T> {
+  label: string;
+  icon?: ReactNode;
+  variant?: "primary" | "outline" | "destructive";
+  onRun: (rows: T[]) => void | Promise<void>;
+  disabled?: boolean;
+}
+
+export interface TabDef {
+  id: string;
+  label: string;
+}
+
+export interface DataTableError {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+interface DataTableProps<T> {
+  rows: T[];
+  columns: Column<T>[];
+  getRowId: (row: T) => string;
+
+  loading?: boolean;
+  error?: DataTableError | null;
+  empty?: {
+    icon?: ReactNode;
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+  };
+
+  search?: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    keys: (row: T) => string;
+  };
+  filters?: DataTableFilter<T>[];
+  toolbarStart?: ReactNode;
+  toolbarEnd?: ReactNode;
+
+  tabs?: TabDef[];
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
+
+  infoBanner?: ReactNode;
+
+  selectable?: boolean;
+  bulkActions?: BulkAction<T>[];
+
+  rowActions?: (row: T) => ReactNode;
+  onRowClick?: (row: T) => void;
+
+  defaultSort?: { id: string; dir: "asc" | "desc" };
+  pageSize?: number;
+  pageSizeOptions?: number[];
+
+  /** Surface preset for the table card. */
+  tone?: TableSurfaceTone;
+  /** Optional action pinned to the top-right of the header band. */
+  headerAction?: ReactNode | TableSurfaceAction;
+  /** Header band color/style overrides. */
+  headerClassName?: string;
+  /** Inner panel color/style overrides. */
+  panelClassName?: string;
+
+  className?: string;
+}
+
+const HEADER_CELL =
+  "h-[var(--table-header-h)] whitespace-nowrap px-[var(--table-pad-x)] text-left align-middle text-[0.8125rem] font-medium";
+
+const TOOLBAR_BUTTON =
+  "rounded-[6px] bg-surface text-fg shadow-xs ring-1 ring-line hover:bg-elevated hover:text-fg active:bg-elevated";
+
+function initials(name: string): string {
+  return name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((p) => p[0]?.toUpperCase() ?? "")
+    .join("");
+}
+
+/** Clerk-style identity cell: avatar + primary name + secondary line. */
+export function DataTableIdentity({
+  name,
+  secondary,
+  image,
+}: {
+  name: string;
+  secondary?: ReactNode;
+  image?: string;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <Avatar className="size-8">
+        {image ? <AvatarImage src={image} alt="" /> : null}
+        <AvatarFallback>{initials(name)}</AvatarFallback>
+      </Avatar>
+      <div className="min-w-0">
+        <div className="truncate font-medium text-table-header-active">{name}</div>
+        {secondary ? <div className="truncate text-xs text-table-muted">{secondary}</div> : null}
+      </div>
+    </div>
+  );
+}
+
+export function DataTable<T>({
+  rows,
+  columns,
+  getRowId,
+  loading = false,
+  error,
+  empty,
+  search,
+  filters,
+  toolbarStart,
+  toolbarEnd,
+  tabs,
+  activeTab,
+  onTabChange,
+  infoBanner,
+  selectable = false,
+  bulkActions,
+  rowActions,
+  onRowClick,
+  defaultSort,
+  pageSize: initialPageSize = 25,
+  pageSizeOptions = [10, 25, 50, 100],
+  tone,
+  headerAction,
+  headerClassName,
+  panelClassName,
+  className,
+}: DataTableProps<T>) {
+  const [hidden, setHidden] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      columns.filter((c) => c.defaultHidden && !c.required).map((c) => [c.id, true]),
+    ),
+  );
+  const [sort, setSort] = useState<{ id: string; dir: "asc" | "desc" } | null>(
+    defaultSort ?? null,
+  );
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [activeFilterIds, setActiveFilterIds] = useState<string[]>([]);
+
+  const visibleColumns = columns.filter((c) => !hidden[c.id]);
+  const hiddenColumns = columns.filter((c) => hidden[c.id] && !c.required);
+  const activeFilters = (filters ?? []).filter((f) => activeFilterIds.includes(f.id));
+  const filterSignature = (filters ?? [])
+    .map((f) => `${f.id}:${f.value.join(",")}`)
+    .join("|");
+
+  const filtered = useMemo(() => {
+    let next = rows;
+    for (const filter of filters ?? []) {
+      if (filter.value.length > 0) {
+        next = next.filter((row) => filter.match(row, filter.value));
+      }
+    }
+    if (!search || !search.value.trim()) return next;
+    const q = search.value.trim().toLowerCase();
+    return next.filter((r) => search.keys(r).toLowerCase().includes(q));
+  }, [rows, search, filters]);
+
+  const sorted = useMemo(() => {
+    if (!sort) return filtered;
+    const col = columns.find((c) => c.id === sort.id);
+    if (!col?.sortValue) return filtered;
+    const dir = sort.dir === "asc" ? 1 : -1;
+    return [...filtered].sort((a, b) => {
+      const av = col.sortValue!(a);
+      const bv = col.sortValue!(b);
+      if (av == null && bv == null) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      if (typeof av === "number" && typeof bv === "number") return (av - bv) * dir;
+      return String(av).localeCompare(String(bv)) * dir;
+    });
+  }, [filtered, sort, columns]);
+
+  const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
+
+  useEffect(() => {
+    setPage(0);
+  }, [search?.value, pageSize, sort?.id, sort?.dir, activeTab, filterSignature]);
+
+  useEffect(() => {
+    if (page > pageCount - 1) setPage(pageCount - 1);
+  }, [page, pageCount]);
+
+  const start = page * pageSize;
+  const pageRows = sorted.slice(start, start + pageSize);
+
+  const toggleSort = (col: Column<T>) => {
+    if (!col.sortable) return;
+    setSort((prev) =>
+      prev?.id === col.id
+        ? prev.dir === "asc"
+          ? { id: col.id, dir: "desc" }
+          : null
+        : { id: col.id, dir: "asc" },
+    );
+  };
+
+  const allSelected = pageRows.length > 0 && pageRows.every((r) => selected.has(getRowId(r)));
+  const someSelected = pageRows.some((r) => selected.has(getRowId(r)));
+  const selectedRows = rows.filter((r) => selected.has(getRowId(r)));
+
+  const toggleAll = () => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (allSelected) pageRows.forEach((r) => next.delete(getRowId(r)));
+      else pageRows.forEach((r) => next.add(getRowId(r)));
+      return next;
+    });
+  };
+
+  const toggleOne = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const hasToolbar = Boolean(search || filters?.length || toolbarStart || toolbarEnd);
+
+  // Fixed layout keeps header and body columns aligned across the two tables.
+  // When no column declares a width, give the first column more room and split
+  // the rest evenly so tables don't render as uniform stripes.
+  const anyExplicitWidth = visibleColumns.some((c) => c.width);
+  const restShare =
+    visibleColumns.length > 1 ? (100 - 30) / (visibleColumns.length - 1) : 100;
+  const dataWidths = visibleColumns.map((c, i) => {
+    if (c.width) return c.width;
+    if (anyExplicitWidth) return "auto";
+    return `${i === 0 ? 30 : restShare}%`;
+  });
+
+  const colWidths = [
+    ...(selectable ? ["2.75rem"] : []),
+    ...dataWidths,
+    ...(rowActions ? ["11rem"] : []),
+  ];
+
+  const ariaSort = (c: Column<T>) =>
+    sort?.id === c.id ? (sort.dir === "asc" ? "ascending" : "descending") : undefined;
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {tabs && tabs.length > 0 && (
+        <div className="flex items-center gap-1 border-b border-line" role="tablist">
+          {tabs.map((t) => {
+            const active = t.id === activeTab;
+            return (
+              <button
+                key={t.id}
+                type="button"
+                role="tab"
+                aria-selected={active}
+                onClick={() => onTabChange?.(t.id)}
+                className={cn(
+                  "-mb-px border-b-2 px-3 py-2 text-sm transition-colors",
+                  active
+                    ? "border-fg font-medium text-fg"
+                    : "border-transparent text-muted hover:text-fg",
+                )}
+              >
+                {t.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {hasToolbar && (
+        <div className="flex flex-wrap items-center gap-2">
+          {search && (
+            <Input
+              size="sm"
+              type="search"
+              aria-label={search.placeholder ?? "Search"}
+              placeholder={search.placeholder ?? "Search..."}
+              value={search.value}
+              onChange={(e) => search.onChange(e.target.value)}
+              onClear={() => search.onChange("")}
+              leadingIcon={<MagnifyingGlass />}
+              containerClassName="w-full sm:w-[280px]"
+              className="rounded-[6px] border-0 bg-surface shadow-xs ring-1 ring-line"
+            />
+          )}
+          {toolbarStart}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="secondary"
+                size="sm"
+                leadingIcon={<ColumnsIcon />}
+                trailingIcon={<CaretDown />}
+                className={TOOLBAR_BUTTON}
+              >
+                Columns
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-54">
+              <DropdownMenuLabel className="text-[13px]">Active columns</DropdownMenuLabel>
+              {visibleColumns.map((c) => (
+                <DropdownMenuCheckboxItem
+                  key={c.id}
+                  checked
+                  disabled={c.required}
+                  onCheckedChange={() => setHidden((prev) => ({ ...prev, [c.id]: true }))}
+                  onSelect={(e) => e.preventDefault()}
+                  className="justify-between"
+                >
+                  <span>{c.header}</span>
+                  {c.required ? <Lock className="size-3.5 text-subtle" aria-hidden /> : null}
+                </DropdownMenuCheckboxItem>
+              ))}
+              {hiddenColumns.length > 0 ? (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuLabel className="text-[13px]">Available columns</DropdownMenuLabel>
+                  {hiddenColumns.map((c) => (
+                    <DropdownMenuCheckboxItem
+                      key={c.id}
+                      checked={false}
+                      onCheckedChange={() => setHidden((prev) => ({ ...prev, [c.id]: false }))}
+                      onSelect={(e) => e.preventDefault()}
+                    >
+                      {c.header}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+                </>
+              ) : null}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {filters && filters.length > 0 ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  iconOnly
+                  aria-label="Add filter"
+                  className={TOOLBAR_BUTTON}
+                >
+                  <FunnelSimple />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-54">
+                {filters.map((filter) => (
+                  <DropdownMenuItem
+                    key={filter.id}
+                    onSelect={() =>
+                      setActiveFilterIds((prev) =>
+                        prev.includes(filter.id) ? prev : [...prev, filter.id],
+                      )
+                    }
+                  >
+                    {filter.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+          {toolbarEnd ? (
+            <div className="flex-0 sm:ml-auto [&_button]:h-8 [&_button]:rounded-[6px]">
+              {toolbarEnd}
+            </div>
+          ) : null}
+        </div>
+      )}
+
+      {activeFilters.length > 0 ? (
+        <div className="flex flex-wrap items-center gap-2">
+          {activeFilters.map((filter) => (
+            <DropdownMenu key={filter.id}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="rounded-[6px] bg-surface shadow-xs"
+                >
+                  <FunnelSimple />
+                  <span className="font-medium">{filter.label}</span>
+                  <span className="h-4 w-px bg-line" aria-hidden />
+                  <span className="text-muted">
+                    {filter.value.length > 0
+                      ? `${filter.value.length} selected`
+                      : "Enter value"}
+                  </span>
+                  <CaretDown className="text-muted" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-56">
+                <DropdownMenuLabel className="text-[13px]">
+                  Filter by {filter.label}
+                </DropdownMenuLabel>
+                {filter.options.map((option) => {
+                  const checked = filter.value.includes(option.value);
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={option.value}
+                      checked={checked}
+                      onCheckedChange={() =>
+                        filter.onChange(
+                          checked
+                            ? filter.value.filter((value) => value !== option.value)
+                            : [...filter.value, option.value],
+                        )
+                      }
+                      onSelect={(e) => e.preventDefault()}
+                    >
+                      {option.label}
+                    </DropdownMenuCheckboxItem>
+                  );
+                })}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onSelect={() => {
+                    filter.onChange([]);
+                    setActiveFilterIds((prev) => prev.filter((id) => id !== filter.id));
+                  }}
+                >
+                  Clear filter
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ))}
+          <button
+            type="button"
+            onClick={() => {
+              for (const filter of activeFilters) filter.onChange([]);
+              setActiveFilterIds([]);
+            }}
+            className="text-sm text-muted transition-colors hover:text-fg"
+          >
+            Clear filters
+          </button>
+        </div>
+      ) : null}
+
+      {infoBanner}
+
+      {selectable && selected.size > 0 && (
+        <div className="flex flex-wrap items-center gap-3 rounded-lg border border-line bg-elevated px-3 py-2 text-sm">
+          <span className="font-medium text-fg">{selected.size} selected</span>
+          <div className="flex items-center gap-2">
+            {(bulkActions ?? []).map((a) => (
+              <Button
+                key={a.label}
+                size="sm"
+                variant={a.variant ?? "outline"}
+                disabled={a.disabled}
+                onClick={() => void a.onRun(selectedRows)}
+              >
+                {a.icon}
+                {a.label}
+              </Button>
+            ))}
+          </div>
+          <button
+            type="button"
+            onClick={() => setSelected(new Set())}
+            className="ml-auto inline-flex items-center gap-1 text-xs text-muted hover:text-fg"
+          >
+            <X className="size-3.5" />
+            Clear
+          </button>
+        </div>
+      )}
+
+      <TableSurface
+        action={headerAction}
+        tone={tone}
+        headerClassName={headerClassName}
+        panelClassName={panelClassName}
+        header={
+          // Visible header: presentational so its controls stay focusable while
+          // the body table carries the semantic column headers (sr-only).
+          <table role="presentation" className="w-full table-fixed border-collapse">
+            <colgroup>
+              {colWidths.map((w, i) => (
+                <col key={i} style={{ width: w }} />
+              ))}
+            </colgroup>
+            <thead>
+              <tr>
+                {selectable && (
+                  <th className="h-[var(--table-header-h)] w-11 px-4 align-middle">
+                    <Checkbox
+                      aria-label="Select all rows"
+                      checked={allSelected ? true : someSelected ? "indeterminate" : false}
+                      onCheckedChange={toggleAll}
+                    />
+                  </th>
+                )}
+                {visibleColumns.map((c) => (
+                  <th
+                    key={c.id}
+                    className={cn(HEADER_CELL, c.align === "right" && "text-right", c.className)}
+                  >
+                    {c.sortable ? (
+                      <button
+                        type="button"
+                        aria-label={`Sort by ${c.header}`}
+                        onClick={() => toggleSort(c)}
+                        className={cn(
+                          "inline-flex items-center gap-1.5 transition-colors hover:text-table-header-active",
+                          sort?.id === c.id && "text-table-header-active",
+                        )}
+                      >
+                        {c.header}
+                        {sort?.id === c.id ? (
+                          sort.dir === "asc" ? (
+                            <CaretUp className="size-3.5" weight="bold" />
+                          ) : (
+                            <CaretDown className="size-3.5" weight="bold" />
+                          )
+                        ) : (
+                          <CaretUpDown className="size-3.5 opacity-50" />
+                        )}
+                      </button>
+                    ) : (
+                      c.header
+                    )}
+                  </th>
+                ))}
+                {rowActions && (
+                  <th className="h-[var(--table-header-h)] w-44 px-4 align-middle">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                )}
+              </tr>
+            </thead>
+          </table>
+        }
+      >
+            {loading ? (
+              <div className="space-y-2 p-4">
+                {[0, 1, 2].map((i) => (
+                  <div key={i} className="h-11 w-full animate-pulse rounded-lg bg-table-row-hover" />
+                ))}
+              </div>
+            ) : error ? (
+              <div className="flex min-h-[22rem] flex-col items-center justify-center gap-4 px-6 py-16 text-center">
+                <div className="flex size-[var(--table-empty-icon)] items-center justify-center rounded-2xl border border-table-empty-icon-border bg-table-empty-icon text-error [&_svg]:size-8">
+                  <WarningCircle weight="duotone" />
+                </div>
+                <div className="space-y-2">
+                  <p className="text-[1.75rem] font-semibold text-table-header-active">
+                    {error.title}
+                  </p>
+                  {error.description ? (
+                    <p className="mx-auto max-w-md text-base leading-relaxed text-table-muted">
+                      {error.description}
+                    </p>
+                  ) : null}
+                </div>
+                {error.action}
+              </div>
+            ) : pageRows.length === 0 ? (
+              <TableEmptyState
+                icon={empty?.icon}
+                title={empty?.title ?? "No results"}
+                description={typeof empty?.description === "string" ? empty.description : undefined}
+                action={empty?.action}
+              />
+            ) : (
+              <table className="w-full table-fixed border-collapse">
+                <colgroup>
+                  {colWidths.map((w, i) => (
+                    <col key={i} style={{ width: w }} />
+                  ))}
+                </colgroup>
+                {/* Semantic headers for assistive tech (visible header is presentational). */}
+                <thead className="sr-only">
+                  <tr>
+                    {selectable && <th scope="col">Select</th>}
+                    {visibleColumns.map((c) => (
+                      <th key={c.id} scope="col" aria-sort={ariaSort(c)}>
+                        {c.header}
+                      </th>
+                    ))}
+                    {rowActions && <th scope="col">Actions</th>}
+                  </tr>
+                </thead>
+                <TableBody>
+                  {pageRows.map((row) => {
+                    const id = getRowId(row);
+                    const isSelected = selected.has(id);
+                    return (
+                      <TableRow
+                        key={id}
+                        data-state={isSelected ? "selected" : undefined}
+                        onClick={onRowClick ? () => onRowClick(row) : undefined}
+                        className={onRowClick ? "cursor-pointer" : undefined}
+                      >
+                        {selectable && (
+                          <TableCell className="w-11 px-4" onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              aria-label="Select row"
+                              checked={isSelected}
+                              onCheckedChange={() => toggleOne(id)}
+                            />
+                          </TableCell>
+                        )}
+                        {visibleColumns.map((c) => (
+                          <TableCell
+                            key={c.id}
+                            data-numeric={c.numeric ? "" : undefined}
+                            className={cn(c.align === "right" && "text-right", c.className)}
+                          >
+                            {c.cell(row)}
+                          </TableCell>
+                        ))}
+                        {rowActions && (
+                          <TableCell className="w-44 px-4 text-right" onClick={(e) => e.stopPropagation()}>
+                            {rowActions(row)}
+                          </TableCell>
+                        )}
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </table>
+            )}
+          </TableSurface>
+
+      {!loading && !error && sorted.length > 0 && (
+        <div className="flex flex-wrap items-center justify-between gap-3 text-sm">
+          <span className="text-muted">
+            {start + 1}–{Math.min(start + pageSize, sorted.length)} of {sorted.length}
+          </span>
+          <div className="flex items-center gap-2">
+            <Select value={String(pageSize)} onValueChange={(v) => setPageSize(Number(v))}>
+              <SelectTrigger aria-label="Rows per page" className="h-8 w-[110px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {pageSizeOptions.map((n) => (
+                  <SelectItem key={n} value={String(n)}>
+                    {n} / page
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={page <= 0}
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={page >= pageCount - 1}
+              onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}