@terpjs/react-core 0.1.0

package/src/dataview/DataViewTable.tsx

@@ -0,0 +1,359 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { CSSProperties, ReactNode } from "react";
+
+import { injectTerpStyles } from "../styles";
+import type { UiText } from "../uiText";
+import { DataViewExpandToggle, DataViewExpandableRow } from "./DataViewExpandableRow";
+import { DataViewRowActions } from "./DataViewRowActions";
+import type { DataViewRowActionsLayout } from "./DataViewRowActions";
+import { SortAscGlyph, SortDescGlyph, SortNoneGlyph } from "./glyphs";
+import { useDataViewText } from "./internal";
+
+injectTerpStyles();
+import type { DataViewColumn, DataViewRowAction } from "./types";
+
+const MIN_COLUMN_WIDTH = 60;
+
+export interface DataViewTableProps<T> {
+  rows: T[];
+  columns: DataViewColumn<T>[];
+  getRowId: (row: T) => string;
+  onRowClick?: (row: T) => void;
+  getRowLabel?: (row: T) => UiText;
+  isMobile: boolean;
+  // Sorting
+  sorting: { id: string; desc: boolean }[];
+  onToggleSort: (columnId: string) => void;
+  // Sizing
+  columnSizing: Record<string, number>;
+  onCommitColumnSizing: (sizing: Record<string, number>) => void;
+  // Selection
+  selectionEnabled: boolean;
+  isSelected: (rowId: string) => boolean;
+  onToggleSelected: (rowId: string) => void;
+  allPageSelected: boolean;
+  somePageSelected: boolean;
+  onToggleSelectPage: () => void;
+  // Expansion
+  renderExpanded?: (row: T) => ReactNode;
+  isExpanded: (rowId: string) => boolean;
+  onToggleExpanded: (rowId: string) => void;
+  // Actions
+  rowActions?: (row: T) => DataViewRowAction<T>[];
+  rowActionsLayout: DataViewRowActionsLayout;
+}
+
+const headerCellStyle: CSSProperties = {
+  position: "relative",
+  padding: "var(--space-2) var(--space-3)",
+  textAlign: "left",
+  fontSize: "var(--font-size-xs)",
+  fontWeight: "var(--font-weight-semibold)" as never,
+  color: "var(--color-neutral-500)",
+  textTransform: "uppercase",
+  letterSpacing: "0.04em",
+  borderBottom: "1px solid var(--color-neutral-200)",
+  whiteSpace: "nowrap",
+  background: "var(--color-neutral-0)",
+};
+
+const bodyCellStyle: CSSProperties = {
+  padding: "var(--space-3)",
+  borderBottom: "1px solid var(--color-neutral-100)",
+  fontSize: "var(--font-size-sm)",
+  color: "var(--color-neutral-900)",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+};
+
+const recordButtonStyle: CSSProperties = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0,
+};
+
+/**
+ * The table layout of {@link DataView}: sortable, resizable headers; system columns
+ * (expand → select → user columns → actions); row click, selection, expansion.
+ *
+ * Width resolution precedence: pinned system columns → user-resized → static meta
+ * hint → auto (content-based).
+ */
+export function DataViewTable<T>(props: DataViewTableProps<T>) {
+  const { strings, resolve, format } = useDataViewText();
+  const tableRef = useRef<HTMLTableElement>(null);
+
+  // Live widths during a resize drag only — persisted once, on pointer-up.
+  const [liveSizing, setLiveSizing] = useState<Record<string, number> | null>(null);
+  const dragCleanupRef = useRef<(() => void) | null>(null);
+  useEffect(() => () => dragCleanupRef.current?.(), []);
+
+  const startResize = useCallback(
+    (columnId: string, startX: number) => {
+      const table = tableRef.current;
+      if (table === null) {
+        return;
+      }
+      // Snapshot every rendered width so switching from auto to fixed layout does
+      // not make the other columns jump.
+      const snapshot: Record<string, number> = {};
+      for (const th of table.querySelectorAll<HTMLTableCellElement>("th[data-column-id]")) {
+        const id = th.dataset.columnId;
+        if (id !== undefined) {
+          snapshot[id] = th.offsetWidth;
+        }
+      }
+      const startWidth = snapshot[columnId] ?? MIN_COLUMN_WIDTH;
+      let current = snapshot;
+      setLiveSizing(snapshot);
+
+      const onPointerMove = (event: PointerEvent) => {
+        const width = Math.max(MIN_COLUMN_WIDTH, startWidth + (event.clientX - startX));
+        current = { ...current, [columnId]: width };
+        setLiveSizing(current);
+      };
+      const cleanup = () => {
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+        dragCleanupRef.current = null;
+      };
+      const onPointerUp = () => {
+        cleanup();
+        setLiveSizing(null);
+        props.onCommitColumnSizing(current); // one persistence write per drag
+      };
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+      dragCleanupRef.current = cleanup;
+    },
+    [props.onCommitColumnSizing],
+  );
+
+  const widthOf = (column: DataViewColumn<T>): number | string | undefined => {
+    const live = liveSizing?.[column.id];
+    if (live !== undefined) {
+      return live;
+    }
+    const resized = props.columnSizing[column.id];
+    if (resized !== undefined) {
+      return resized;
+    }
+    return column.meta?.width;
+  };
+
+  const hasExpand = props.renderExpanded !== undefined;
+  const hasActions = props.rowActions !== undefined;
+  const columnCount =
+    props.columns.length + (hasExpand ? 1 : 0) + (props.selectionEnabled ? 1 : 0) + (hasActions ? 1 : 0);
+
+  const selectAllRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (selectAllRef.current !== null) {
+      selectAllRef.current.indeterminate = props.somePageSelected && !props.allPageSelected;
+    }
+  }, [props.somePageSelected, props.allPageSelected]);
+
+  return (
+    <table
+      ref={tableRef}
+      data-terp="dataview-table"
+      style={{
+        width: "100%",
+        borderCollapse: "collapse",
+        tableLayout: liveSizing !== null ? "fixed" : "auto",
+      }}
+    >
+      <thead>
+        <tr>
+          {hasExpand && <th style={{ ...headerCellStyle, width: 40 }} aria-hidden />}
+          {props.selectionEnabled && (
+            <th style={{ ...headerCellStyle, width: 40 }}>
+              <input
+                ref={selectAllRef}
+                type="checkbox"
+                aria-label={resolve(strings.selectAllPage)}
+                checked={props.allPageSelected}
+                onChange={props.onToggleSelectPage}
+              />
+            </th>
+          )}
+          {props.columns.map((column) => {
+            const sort = props.sorting.find((entry) => entry.id === column.id);
+            const sortable = column.enableSorting !== false;
+            const width = widthOf(column);
+            return (
+              <th
+                key={column.id}
+                data-column-id={column.id}
+                aria-sort={
+                  sort === undefined ? undefined : sort.desc ? "descending" : "ascending"
+                }
+                style={{ ...headerCellStyle, width }}
+              >
+                {sortable ? (
+                  <button
+                    type="button"
+                    onClick={() => props.onToggleSort(column.id)}
+                    style={{
+                      font: "inherit",
+                      color: "inherit",
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "var(--space-1)",
+                      background: "transparent",
+                      border: "none",
+                      padding: 0,
+                      cursor: "pointer",
+                    }}
+                  >
+                    {resolve(column.header)}
+                    {sort === undefined ? (
+                      <SortNoneGlyph size={12} style={{ opacity: 0.5 }} />
+                    ) : sort.desc ? (
+                      <SortDescGlyph size={12} />
+                    ) : (
+                      <SortAscGlyph size={12} />
+                    )}
+                  </button>
+                ) : (
+                  resolve(column.header)
+                )}
+                <span
+                  role="separator"
+                  aria-orientation="vertical"
+                  aria-label={`${resolve(strings.resizeColumn)}: ${resolve(column.meta?.label ?? column.header)}`}
+                  onPointerDown={(event) => {
+                    event.preventDefault();
+                    startResize(column.id, event.clientX);
+                  }}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    right: -3,
+                    width: 7,
+                    height: "100%",
+                    cursor: "col-resize",
+                    zIndex: 1,
+                    touchAction: "none",
+                  }}
+                />
+              </th>
+            );
+          })}
+          {hasActions && (
+            <th style={{ ...headerCellStyle, width: 56 }}>
+              <span
+                style={{
+                  position: "absolute",
+                  width: 1,
+                  height: 1,
+                  padding: 0,
+                  margin: -1,
+                  overflow: "hidden",
+                  clip: "rect(0 0 0 0)",
+                  whiteSpace: "nowrap",
+                  border: 0,
+                }}
+              >
+                {resolve(strings.actions)}
+              </span>
+            </th>
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        {props.rows.map((row) => {
+          const rowId = props.getRowId(row);
+          const expanded = props.isExpanded(rowId);
+          const clickable = props.onRowClick !== undefined;
+          return (
+            <RowGroup key={rowId}>
+              <tr
+                onClick={clickable ? () => props.onRowClick?.(row) : undefined}
+                data-terp={clickable ? "dataview-row" : undefined}
+                data-selected={props.isSelected(rowId) || undefined}
+                style={{
+                  cursor: clickable ? "pointer" : undefined,
+                  background: props.isSelected(rowId) ? "var(--color-neutral-50)" : undefined,
+                }}
+              >
+                {hasExpand && (
+                  <td style={bodyCellStyle}>
+                    <DataViewExpandToggle
+                      expanded={expanded}
+                      onToggle={() => props.onToggleExpanded(rowId)}
+                    />
+                  </td>
+                )}
+                {props.selectionEnabled && (
+                  <td style={bodyCellStyle} onClick={(event) => event.stopPropagation()}>
+                    <input
+                      type="checkbox"
+                      aria-label={resolve(strings.selectRow)}
+                      checked={props.isSelected(rowId)}
+                      onChange={() => props.onToggleSelected(rowId)}
+                    />
+                  </td>
+                )}
+                {props.columns.map((column) => (
+                  <td key={column.id} style={bodyCellStyle}>
+                    {clickable && column === props.columns[0] && (
+                      <button
+                        type="button"
+                        data-terp="dataview-row-open"
+                        aria-label={format(strings.openRow, {
+                          label: resolve(props.getRowLabel?.(row) ?? ""),
+                        })}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          props.onRowClick?.(row);
+                        }}
+                        style={recordButtonStyle}
+                      />
+                    )}
+                    {column.cell !== undefined
+                      ? column.cell(row)
+                      : formatCell(column.accessor?.(row))}
+                  </td>
+                ))}
+                {hasActions && (
+                  <td style={{ ...bodyCellStyle, textAlign: "right" }}>
+                    <DataViewRowActions
+                      row={row}
+                      actions={props.rowActions?.(row) ?? []}
+                      layout={props.rowActionsLayout}
+                      isMobile={props.isMobile}
+                    />
+                  </td>
+                )}
+              </tr>
+              {expanded && props.renderExpanded !== undefined && (
+                <DataViewExpandableRow colSpan={columnCount}>
+                  {props.renderExpanded(row)}
+                </DataViewExpandableRow>
+              )}
+            </RowGroup>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+/** Keys a row + its expansion panel together without extra DOM. */
+function RowGroup({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
+
+function formatCell(value: unknown): ReactNode {
+  if (value === null || value === undefined) {
+    return null;
+  }
+  return String(value);
+}

package/src/dataview/DataViewToolbar.tsx

@@ -0,0 +1,260 @@
+import type { ReactNode } from "react";
+
+import { Button } from "../ui/Button";
+import { Input } from "../ui/Input";
+import { Select } from "../ui/Select";
+import { DataViewColumnSettings } from "./DataViewColumnSettings";
+import type { DataViewColumnSettingsProps } from "./DataViewColumnSettings";
+import { CardsGlyph, CloseGlyph, EllipsisGlyph, SearchGlyph, TableGlyph } from "./glyphs";
+import { DataViewMenu, DataViewMenuItem, useDataViewText } from "./internal";
+import { useViewSearch } from "./hooks/useViewSearch";
+import type { DataViewBatchAction, DataViewSearchScope } from "./types";
+import type { UiText } from "../uiText";
+
+export interface DataViewToolbarProps<T> {
+  // Search
+  searchEnabled: boolean;
+  search: string;
+  onSearchChange: (search: string) => void;
+  searchPlaceholder?: UiText;
+  searchDebounceMs?: number;
+  searchScope?: DataViewSearchScope;
+  onClearFilters?: () => void;
+  hasActiveFilters: boolean;
+
+  // View controls
+  columnSettings?: DataViewColumnSettingsProps<T>;
+  layout: "table" | "cards";
+  onLayoutChange?: (layout: "table" | "cards") => void;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (pageSize: number) => void;
+
+  // Selection mode
+  selectedCount: number;
+  totalCount: number;
+  selectAllAcrossPages: boolean;
+  onSelectAllAcrossPages?: () => void;
+  onClearSelection: () => void;
+  batchActions?: DataViewBatchAction<T>[];
+  onBatchAction: (action: DataViewBatchAction<T>) => void;
+
+  isFetching: boolean;
+  /** Custom filter controls. */
+  children?: ReactNode;
+  trailing?: ReactNode;
+}
+
+/**
+ * The DataView toolbar. In its normal mode it hosts search, caller filter controls,
+ * the page-size selector, the table/cards toggle and the column-settings menu; when
+ * rows are selected it switches to selection mode ("N selected", batch actions,
+ * select-all-across-pages, clear selection).
+ */
+export function DataViewToolbar<T>(props: DataViewToolbarProps<T>) {
+  const { strings, resolve, format } = useDataViewText();
+  const search = useViewSearch(props.search, props.onSearchChange, props.searchDebounceMs ?? 0);
+
+  const selectionMode = props.selectedCount > 0;
+
+  const barStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--space-2)",
+    flexWrap: "wrap",
+    padding: "var(--space-2) var(--space-3)",
+    borderBottom: "1px solid var(--color-neutral-200)",
+    background: selectionMode ? "var(--color-neutral-50)" : "var(--color-neutral-0)",
+    borderTopLeftRadius: "var(--radius-lg)",
+    borderTopRightRadius: "var(--radius-lg)",
+    minHeight: "3rem",
+  } as const;
+
+  if (selectionMode) {
+    const inlineActions = (props.batchActions ?? []).filter((action) => action.inline !== false);
+    const overflowActions = (props.batchActions ?? []).filter((action) => action.inline === false);
+    return (
+      <div data-terp="dataview-toolbar" style={barStyle}>
+        <span style={{ fontWeight: "var(--font-weight-medium)" as never }}>
+          {format(strings.selected, { count: props.selectedCount })}
+        </span>
+        {props.onSelectAllAcrossPages !== undefined && !props.selectAllAcrossPages && (
+          <Button variant="secondary" onClick={props.onSelectAllAcrossPages}>
+            {format(strings.selectAllResults, { total: props.totalCount })}
+          </Button>
+        )}
+        <span style={{ display: "inline-flex", gap: "var(--space-2)", flexWrap: "wrap" }}>
+          {inlineActions.map((action, index) => (
+            <Button
+              key={index}
+              variant={action.variant === "destructive" ? "danger" : "secondary"}
+              onClick={() => props.onBatchAction(action)}
+            >
+              {action.icon !== undefined && (
+                <span aria-hidden style={{ display: "inline-flex", marginRight: "var(--space-1)" }}>
+                  {action.icon}
+                </span>
+              )}
+              {resolve(action.label)}
+            </Button>
+          ))}
+          {overflowActions.length > 0 && (
+            <DataViewMenu trigger={<EllipsisGlyph />} triggerLabel={resolve(strings.moreActions)}>
+              {(close) => (
+                <>
+                  {overflowActions.map((action, index) => (
+                    <DataViewMenuItem
+                      key={index}
+                      label={resolve(action.label)}
+                      icon={action.icon}
+                      destructive={action.variant === "destructive"}
+                      onSelect={() => {
+                        close();
+                        props.onBatchAction(action);
+                      }}
+                    />
+                  ))}
+                </>
+              )}
+            </DataViewMenu>
+          )}
+        </span>
+        <span style={{ flex: 1 }} />
+        <Button variant="secondary" onClick={props.onClearSelection}>
+          {resolve(strings.clearSelection)}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div data-terp="dataview-toolbar" style={barStyle}>
+      {props.searchEnabled && (
+        <span style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
+          <span
+            aria-hidden
+            style={{
+              position: "absolute",
+              left: "var(--space-2)",
+              display: "inline-flex",
+              color: "var(--color-neutral-500)",
+              pointerEvents: "none",
+            }}
+          >
+            <SearchGlyph size={14} />
+          </span>
+          <Input
+            type="search"
+            value={search.inputValue}
+            onChange={(event) => search.setInputValue(event.target.value)}
+            placeholder={resolve(props.searchPlaceholder ?? strings.searchPlaceholder)}
+            aria-label={resolve(props.searchPlaceholder ?? strings.searchPlaceholder)}
+            style={{
+              paddingLeft: "var(--space-6)",
+              paddingRight: "var(--space-6)",
+              width: "16rem",
+              maxWidth: "100%",
+            }}
+          />
+          {search.inputValue !== "" && (
+            <button
+              type="button"
+              aria-label={resolve(strings.clearSearch)}
+              onClick={search.clear}
+              style={{
+                position: "absolute",
+                right: "var(--space-1)",
+                display: "inline-flex",
+                padding: "var(--space-1)",
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                color: "var(--color-neutral-500)",
+              }}
+            >
+              <CloseGlyph size={14} />
+            </button>
+          )}
+        </span>
+      )}
+      {props.searchScope !== undefined && props.search.trim() !== "" && (
+        <Button
+          variant="secondary"
+          aria-pressed={props.searchScope.broadened}
+          onClick={() => props.searchScope?.onBroadenedChange(!props.searchScope.broadened)}
+        >
+          {resolve(
+            props.searchScope.broadened ? props.searchScope.broadenedLabel : props.searchScope.label,
+          )}
+        </Button>
+      )}
+      {props.children}
+      {props.onClearFilters !== undefined && props.hasActiveFilters && (
+        <Button variant="secondary" onClick={props.onClearFilters}>
+          {resolve(strings.clearFilters)}
+        </Button>
+      )}
+      {props.isFetching && (
+        <span
+          role="status"
+          style={{ fontSize: "var(--font-size-sm)", color: "var(--color-neutral-500)" }}
+        >
+          {resolve(strings.refreshing)}
+        </span>
+      )}
+      <span style={{ flex: 1 }} />
+      {props.onPageSizeChange !== undefined && props.pageSize !== undefined && (
+        <Select
+          value={String(props.pageSize)}
+          aria-label={resolve(strings.pageSize)}
+          onChange={(event) => props.onPageSizeChange?.(Number(event.target.value))}
+        >
+          {(props.pageSizeOptions ?? [10, 25, 50, 100]).map((option) => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </Select>
+      )}
+      {props.onLayoutChange !== undefined && (
+        <span style={{ display: "inline-flex", gap: "var(--space-1)" }}>
+          <button
+            type="button"
+            aria-label={resolve(strings.tableView)}
+            aria-pressed={props.layout === "table"}
+            onClick={() => props.onLayoutChange?.("table")}
+            style={layoutToggleStyle(props.layout === "table")}
+          >
+            <TableGlyph />
+          </button>
+          <button
+            type="button"
+            aria-label={resolve(strings.cardView)}
+            aria-pressed={props.layout === "cards"}
+            onClick={() => props.onLayoutChange?.("cards")}
+            style={layoutToggleStyle(props.layout === "cards")}
+          >
+            <CardsGlyph />
+          </button>
+        </span>
+      )}
+      {props.columnSettings !== undefined && <DataViewColumnSettings {...props.columnSettings} />}
+      {props.trailing}
+    </div>
+  );
+}
+
+function layoutToggleStyle(active: boolean) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "2rem",
+    padding: "var(--space-1) var(--space-2)",
+    background: active ? "var(--color-neutral-100)" : "transparent",
+    border: "1px solid var(--color-neutral-300)",
+    borderRadius: "var(--radius-md)",
+    cursor: "pointer",
+    color: active ? "var(--color-neutral-900)" : "var(--color-neutral-500)",
+  } as const;
+}