@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/tables/DataTable/data-table-row.tsx

@@ -0,0 +1,231 @@
+import { ChevronRight } from '@gntik-ai/icons';
+import { Checkbox, cn, MoreMenu, TableCell, TableHead, TableRow, type MoreMenuAction, useI18n } from '@gntik-ai/ui';
+import type { CSSProperties, ReactNode } from 'react';
+import { stickyTint, type TableLayout } from './column-sizing';
+import {
+  COLUMN_VARIANT_CLASSES,
+  columnAlign,
+  formatCell,
+  selectionState,
+  type DataTableColumn,
+} from './data-table-utils';
+import { EditableCell, isCellEditable, type DataTableCellEditHandler } from './editable-cell';
+import type { DataTableLabels } from './labels';
+import type { SingleSelection } from './single-selection';
+
+/** A group as the body renders it: its rows on the current page plus header data. */
+export interface DataTableBodyGroup<T> {
+  key: string;
+  /** Visible group name (header text). */
+  label: ReactNode;
+  /** Plain-text name for button and checkbox labels. */
+  name: string;
+  /** Rows of the group on the current page. */
+  rows: readonly T[];
+  /** Ids of every row in the group (all pages): the count and the group checkbox use them. */
+  ids: readonly string[];
+}
+
+/** Row rendering shared by the plain, grouped and virtualized bodies. */
+export interface RowContext<T> {
+  labels?: Partial<DataTableLabels>;
+  columns: ReadonlyArray<DataTableColumn<T>>;
+  getRowId: (row: T) => string;
+  getRowLabel: (row: T) => string;
+  selectable: boolean;
+  selected: ReadonlySet<string>;
+  singleSelection?: SingleSelection<T>;
+  onToggleRow: (id: string) => void;
+  rowActions?: (row: T) => Array<MoreMenuAction | 'separator'>;
+  layout?: TableLayout;
+  onCellEdit?: DataTableCellEditHandler<T>;
+  /** Id of the "Press Enter or F2 to edit" hint. */
+  editHintId?: string;
+}
+
+export interface DataTableRowProps<T> extends RowContext<T> {
+  row: T;
+  /** 1-based row index in the whole table (virtualized tables). */
+  ariaRowIndex?: number;
+  style?: CSSProperties;
+}
+
+export function DataTableRow<T>({
+  labels,
+  row,
+  columns,
+  getRowId,
+  getRowLabel,
+  selectable,
+  selected,
+  singleSelection,
+  onToggleRow,
+  rowActions,
+  layout,
+  onCellEdit,
+  editHintId,
+  ariaRowIndex,
+  style,
+}: DataTableRowProps<T>) {
+  const { t } = useI18n();
+  const id = getRowId(row);
+  const selectionColumn = selectable || singleSelection != null;
+  const isSelected = singleSelection ? singleSelection.selectedId === id : selected.has(id);
+  const label = getRowLabel(row);
+  const tint = (l: TableLayout['lead'] | undefined) => stickyTint(l, { selected: selectionColumn && isSelected });
+  return (
+    <TableRow selected={selectionColumn && isSelected} aria-rowindex={ariaRowIndex} data-row-id={id} style={style}>
+      {selectionColumn && (
+        <TableCell className={cn('w-10 pe-0', layout?.lead.className, tint(layout?.lead))} style={layout?.lead.style}>
+          {singleSelection ? (
+            <span {...singleSelection.entryProps(row)} className="inline-flex">
+              <input
+                {...singleSelection.inputProps(row)}
+                className="size-4 accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed"
+              />
+            </span>
+          ) : (
+            <Checkbox
+              aria-label={labels?.selectRow?.(label) ?? t('table.selectRow', { label })}
+              checked={isSelected}
+              onCheckedChange={() => onToggleRow(id)}
+            />
+          )}
+        </TableCell>
+      )}
+      {columns.map((c) => {
+        const cl = layout?.columns.get(c.id);
+        const content = c.cell ? c.cell(row) : formatCell(c.accessor?.(row));
+        const editable = onCellEdit && editHintId && isCellEditable(c, row);
+        return (
+          <TableCell
+            key={c.id}
+            align={columnAlign(c)}
+            style={cl?.style}
+            className={cn(
+              'whitespace-nowrap',
+              cl?.style && 'overflow-hidden text-ellipsis',
+              COLUMN_VARIANT_CLASSES[c.variant ?? 'default'],
+              c.className,
+              cl?.className,
+              tint(cl),
+            )}
+          >
+            {editable ? (
+              <EditableCell
+                labels={labels}
+                row={row}
+                rowId={id}
+                rowLabel={label}
+                column={c}
+                onCellEdit={onCellEdit}
+                hintId={editHintId}
+              >
+                {content}
+              </EditableCell>
+            ) : (
+              content
+            )}
+          </TableCell>
+        );
+      })}
+      {rowActions && (
+        <TableCell
+          align="right"
+          className={cn('w-12 py-0', layout?.trail.className, tint(layout?.trail))}
+          style={layout?.trail.style}
+        >
+          <MoreMenu
+            items={rowActions(row)}
+            label={labels?.rowActions?.(label) ?? t('table.rowActions', { label })}
+            variant="ghost"
+            size="sm"
+          />
+        </TableCell>
+      )}
+    </TableRow>
+  );
+}
+
+export const groupHeadClass =
+  'h-9 bg-secondary/50 text-[12.5px] font-semibold tracking-normal normal-case text-foreground';
+
+export interface GroupHeaderRowProps<T> {
+  labels?: Partial<DataTableLabels>;
+  group: DataTableBodyGroup<T>;
+  open: boolean;
+  selectable: boolean;
+  selected: ReadonlySet<string>;
+  /** Columns spanned by the header cell (every column but the selection one). */
+  span: number;
+  collapsible: boolean;
+  onToggle?: (key: string) => void;
+  onToggleRows?: (ids: readonly string[]) => void;
+  ariaRowIndex?: number;
+  style?: CSSProperties;
+}
+
+/** The header row of a group: group checkbox, collapse button, label and count. */
+export function GroupHeaderRow<T>({
+  labels,
+  group,
+  open,
+  selectable,
+  selected,
+  span,
+  collapsible,
+  onToggle,
+  onToggleRows,
+  ariaRowIndex,
+  style,
+}: GroupHeaderRowProps<T>) {
+  const { t } = useI18n();
+  const state = selectionState(group.ids, selected);
+  const count = group.ids.length;
+  const heading = (
+    <>
+      <span className="truncate">{group.label}</span>{' '}
+      <span className="rounded-full bg-secondary px-1.5 font-mono text-[11px] font-medium text-muted-foreground tabular-nums">
+        {count}
+      </span>{' '}
+      <span className="sr-only">{labels?.groupRows?.(count) ?? (count === 1 ? 'row' : 'rows')}</span>
+    </>
+  );
+  return (
+    <TableRow className="hover:bg-transparent" aria-rowindex={ariaRowIndex} style={style} data-group-header={group.key}>
+      {selectable && (
+        <TableCell className={cn('w-10 pe-0', groupHeadClass)}>
+          <Checkbox
+            aria-label={labels?.selectGroup?.(group.name) ?? t('table.selectRow', { label: `all in ${group.name}` })}
+            checked={state.checked}
+            indeterminate={state.indeterminate}
+            disabled={count === 0}
+            onCheckedChange={() => onToggleRows?.(group.ids)}
+          />
+        </TableCell>
+      )}
+      <TableHead scope="rowgroup" colSpan={span} className={cn(groupHeadClass, collapsible && 'ps-2')}>
+        {collapsible ? (
+          <button
+            type="button"
+            aria-expanded={open}
+            onClick={() => onToggle?.(group.key)}
+            className="inline-flex max-w-full items-center gap-1.5 rounded-sm px-1 py-0.5 hover:bg-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+          >
+            <ChevronRight
+              size={14}
+              aria-hidden
+              className={cn(
+                'shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none',
+                open ? 'rotate-90' : 'rtl:-scale-x-100',
+              )}
+            />
+            {heading}
+          </button>
+        ) : (
+          <span className="inline-flex max-w-full items-center gap-1.5">{heading}</span>
+        )}
+      </TableHead>
+    </TableRow>
+  );
+}

package/src/tables/DataTable/data-table-utils.ts

@@ -0,0 +1,195 @@
+import type { ReactNode } from 'react';
+
+export type SortDirectionValue = 'ascending' | 'descending';
+export type CellValue = string | number | boolean | Date | null | undefined;
+
+export type DataTableColumnVariant = 'default' | 'mono' | 'muted' | 'numeric';
+
+/** Body-cell classes of each column variant. */
+export const COLUMN_VARIANT_CLASSES: Record<DataTableColumnVariant, string> = {
+  default: '',
+  mono: 'font-mono text-[12px]',
+  muted: 'text-[12.5px] text-muted-foreground',
+  numeric: 'font-mono text-[12.5px] tabular-nums',
+};
+
+/** Effective alignment of a column (numeric columns default to right). */
+export function columnAlign<T>(column: DataTableColumn<T>): DataTableColumn<T>['align'] {
+  return column.align ?? (column.variant === 'numeric' ? 'right' : undefined);
+}
+
+/** One typed column of a DataTable. */
+export interface DataTableColumn<T> {
+  /** Stable key (sorting, visibility). */
+  id: string;
+  /** Header text; also the column's name in the visibility menu. */
+  header: string;
+  /** Raw value: used to sort, and rendered when `cell` is absent. */
+  accessor?: (row: T) => CellValue;
+  /** Custom cell rendering. */
+  cell?: (row: T) => ReactNode;
+  sortable?: boolean;
+  align?: 'left' | 'right' | 'center';
+  /** Can be hidden from the column menu (default true). */
+  hideable?: boolean;
+  /** Hidden until turned on in the column menu. */
+  defaultHidden?: boolean;
+  /**
+   * Presentational preset for the body cells: `mono` (monospace ids, regions), `muted`
+   * (secondary text), `numeric` (monospace tabular figures, right-aligned unless `align` is set).
+   */
+  variant?: DataTableColumnVariant;
+  /** Classes for the body cells (merged after the variant's). */
+  className?: string;
+  /** Classes for the header cell (e.g. a width). */
+  headClassName?: string;
+
+  /** Initial width in px (resizable or pinned tables; default 160). */
+  width?: number;
+  /** Smallest width a resize can reach (default 60). */
+  minWidth?: number;
+  /** Largest width a resize can reach (default 640). */
+  maxWidth?: number;
+  /** Shows a resize handle when the table is `resizable` (default true). */
+  resizable?: boolean;
+  /** Can be pinned from the column menu (default true). */
+  pinnable?: boolean;
+
+  /** Inline editing: Enter or F2 on the cell edits it (needs `onCellEdit` on the table). */
+  editable?: boolean | ((row: T) => boolean);
+  /** Editor of an editable cell (default a text input). */
+  editor?: DataTableCellEditor;
+  /** Value the editor starts from (default the accessor's value). */
+  editValue?: (row: T) => string | number | null | undefined;
+}
+
+/** Editor of an editable column. */
+export type DataTableCellEditor =
+  | { type: 'text'; placeholder?: string }
+  | { type: 'number'; min?: number; max?: number; step?: number }
+  | { type: 'select'; options: ReadonlyArray<{ value: string; label: string }> };
+
+export interface SortState {
+  columnId: string;
+  direction: SortDirectionValue;
+}
+
+/** Compares two cell values: nulls last, numbers and dates numerically, strings with localeCompare (numeric). */
+export function compareValues(a: CellValue, b: CellValue): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  const na = a instanceof Date ? a.getTime() : a;
+  const nb = b instanceof Date ? b.getTime() : b;
+  if (typeof na === 'number' && typeof nb === 'number') return na - nb;
+  if (typeof na === 'boolean' && typeof nb === 'boolean') return Number(na) - Number(nb);
+  return String(na).localeCompare(String(nb), undefined, { numeric: true, sensitivity: 'base' });
+}
+
+/** Client-side sort (stable). Returns the input order when there is no sort or the column has no accessor. */
+export function sortRows<T>(
+  rows: readonly T[],
+  columns: ReadonlyArray<DataTableColumn<T>>,
+  sort: SortState | null,
+): T[] {
+  const column = sort ? columns.find((c) => c.id === sort.columnId) : undefined;
+  if (!sort || !column?.accessor) return [...rows];
+  const get = column.accessor;
+  const sign = sort.direction === 'ascending' ? 1 : -1;
+  return rows
+    .map((row, index) => ({ row, index }))
+    .sort((x, y) => {
+      const va = get(x.row);
+      const vb = get(y.row);
+      // Nulls stay last in both directions.
+      if (va == null || vb == null) return compareValues(va, vb) || x.index - y.index;
+      return sign * compareValues(va, vb) || x.index - y.index;
+    })
+    .map(({ row }) => row);
+}
+
+/** Number of pages for a row count (at least 1). */
+export function pageCountOf(total: number, pageSize: number): number {
+  return Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+}
+
+/** Client-side pagination: the rows of a 1-based page (clamped to the valid range). */
+export function paginate<T>(rows: readonly T[], page: number, pageSize: number): T[] {
+  const last = pageCountOf(rows.length, pageSize);
+  const p = Math.min(Math.max(1, page), last);
+  return rows.slice((p - 1) * pageSize, p * pageSize);
+}
+
+/** Header checkbox state for the rows on screen. */
+export function selectionState(
+  visibleIds: readonly string[],
+  selected: ReadonlySet<string>,
+): { checked: boolean; indeterminate: boolean } {
+  const count = visibleIds.filter((id) => selected.has(id)).length;
+  return { checked: count > 0 && count === visibleIds.length, indeterminate: count > 0 && count < visibleIds.length };
+}
+
+/** Selects all of `ids` when not all are selected; otherwise clears them. Other selections are kept. */
+export function toggleAll(ids: readonly string[], selected: ReadonlySet<string>): Set<string> {
+  const next = new Set(selected);
+  const all = ids.length > 0 && ids.every((id) => selected.has(id));
+  for (const id of ids) {
+    if (all) next.delete(id);
+    else next.add(id);
+  }
+  return next;
+}
+
+export function toggleOne(id: string, selected: ReadonlySet<string>): Set<string> {
+  const next = new Set(selected);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  return next;
+}
+
+/** Default cell text for a raw value. */
+export function formatCell(value: CellValue): ReactNode {
+  if (value == null) return '—';
+  if (value instanceof Date) return value.toLocaleDateString();
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  return value;
+}
+
+/** Groups rows by a field key or by a function returning the group key. */
+export type DataTableGroupBy<T> = Extract<keyof T, string> | ((row: T) => string | number | null | undefined);
+
+/** One group of rows, in display order. */
+export interface DataTableGroup<T> {
+  /** Group key (`''` for rows without a value). */
+  key: string;
+  rows: T[];
+}
+
+/** Group key of a row (`''` when the value is null or undefined). */
+export function groupKeyOf<T>(row: T, groupBy: DataTableGroupBy<T>): string {
+  const value = typeof groupBy === 'function' ? groupBy(row) : (row as Record<string, unknown>)[groupBy];
+  return value == null ? '' : String(value);
+}
+
+/**
+ * Splits rows into groups, keeping the row order inside each group. Groups follow `order` (the
+ * keys' first appearance in it, e.g. the unsorted input) and then any key not seen there.
+ */
+export function groupRows<T>(
+  rows: readonly T[],
+  groupBy: DataTableGroupBy<T>,
+  order: readonly T[] = rows,
+): DataTableGroup<T>[] {
+  const groups = new Map<string, T[]>();
+  for (const row of order) {
+    const key = groupKeyOf(row, groupBy);
+    if (!groups.has(key)) groups.set(key, []);
+  }
+  for (const row of rows) {
+    const key = groupKeyOf(row, groupBy);
+    const list = groups.get(key);
+    if (list) list.push(row);
+    else groups.set(key, [row]);
+  }
+  return [...groups].filter(([, list]) => list.length > 0).map(([key, list]) => ({ key, rows: list }));
+}

package/src/tables/DataTable/density-toggle.tsx

@@ -0,0 +1,33 @@
+import { Rows2, Rows3 } from '@gntik-ai/icons';
+import { Toggle, ToggleGroup, type TableDensity, useI18n } from '@gntik-ai/ui';
+
+import type { DataTableLabels } from './labels';
+
+export interface DensityToggleProps {
+  labels?: Partial<DataTableLabels>;
+  value: TableDensity;
+  onChange: (density: TableDensity) => void;
+}
+
+/** Two-icon segmented control: comfortable or compact rows. */
+export function DensityToggle({ value, onChange, labels }: DensityToggleProps) {
+  const { t } = useI18n();
+  return (
+    <ToggleGroup
+      aria-label={labels?.density ?? t('table.density')}
+      size="sm"
+      value={[value]}
+      onValueChange={(v) => {
+        const next = v[0];
+        if (next === 'compact' || next === 'comfortable') onChange(next);
+      }}
+    >
+      <Toggle value="comfortable" iconOnly aria-label={labels?.comfortable ?? t('table.comfortable')}>
+        <Rows2 size={15} aria-hidden />
+      </Toggle>
+      <Toggle value="compact" iconOnly aria-label={labels?.compact ?? t('table.compact')}>
+        <Rows3 size={15} aria-hidden />
+      </Toggle>
+    </ToggleGroup>
+  );
+}