@rackbops/ui-react 0.2.15 → 0.2.16

package/dist/DataTable.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+export interface DataTableColumn<T> {
+    /** Unique among this table's columns; also the sort key passed back via onSort/defaultSortKey. */
+    key: string;
+    header: ReactNode;
+    render: (row: T) => ReactNode;
+    /** Right-aligns the cell (rb-num, matching the existing numeric-column class). */
+    numeric?: boolean;
+    /** Omit to make the column unsortable. Returning a number sorts numerically; a string sorts
+     * lexicographically (case-insensitive). */
+    sortValue?: (row: T) => string | number;
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    /** Groups rows under a labelled header row instead of one flat body. Sorting (if active)
+     * applies within each group, not across the whole table. */
+    groupBy?: (row: T) => string;
+    /** Known group labels in display order; any group present in the data but not listed here
+     * is appended after, sorted alphabetically. Ignored when groupBy is omitted. */
+    groupOrder?: string[];
+    defaultSortKey?: string;
+    defaultSortDirection?: "asc" | "desc";
+    /** Sticky header within a scrolling wrapper -- for a table taller than its container. */
+    sticky?: boolean;
+    emptyMessage?: ReactNode;
+}
+/**
+ * A sortable, optionally-grouped data table on the `rb-table` contract (`rb-table`, `th`, `td`,
+ * `rb-num`) plus three additions this component itself introduces: `rb-table__group-row` (a
+ * labelled group header row), `rb-table__sort` (the clickable sort-header button), and
+ * `rb-table-scroll` (a sticky-header scroll wrapper for a table taller than its container).
+ * Generic over the row type and driven entirely by the `columns`/`rows` props -- no app-specific
+ * knowledge. Originally built for Kenzen (design.md section 9's decision tables); moved here so
+ * any app on this design system can use it.
+ */
+export declare function DataTable<T>({ columns, rows, rowKey, groupBy, groupOrder, defaultSortKey, defaultSortDirection, sticky, emptyMessage, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/DataTable.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "./cx.js";
+function compareBy(column, direction) {
+    const sign = direction === "asc" ? 1 : -1;
+    return (a, b) => {
+        const av = column.sortValue?.(a) ?? "";
+        const bv = column.sortValue?.(b) ?? "";
+        if (typeof av === "number" && typeof bv === "number") {
+            return (av - bv) * sign;
+        }
+        return String(av).localeCompare(String(bv), undefined, { sensitivity: "base" }) * sign;
+    };
+}
+function sortRows(rows, columns, sort) {
+    if (!sort) {
+        return rows;
+    }
+    const column = columns.find((c) => c.key === sort.key);
+    if (!column?.sortValue) {
+        return rows;
+    }
+    return [...rows].sort(compareBy(column, sort.direction));
+}
+/** Orders group labels: those in `groupOrder` first (in that order, skipping ones with no
+ * rows), then any remaining present-in-data label sorted alphabetically. */
+function orderGroups(present, groupOrder) {
+    if (!groupOrder) {
+        return [...present].sort((a, b) => a.localeCompare(b));
+    }
+    const presentSet = new Set(present);
+    const known = groupOrder.filter((g) => presentSet.has(g));
+    const knownSet = new Set(known);
+    const rest = present.filter((g) => !knownSet.has(g)).sort((a, b) => a.localeCompare(b));
+    return [...known, ...rest];
+}
+/**
+ * A sortable, optionally-grouped data table on the `rb-table` contract (`rb-table`, `th`, `td`,
+ * `rb-num`) plus three additions this component itself introduces: `rb-table__group-row` (a
+ * labelled group header row), `rb-table__sort` (the clickable sort-header button), and
+ * `rb-table-scroll` (a sticky-header scroll wrapper for a table taller than its container).
+ * Generic over the row type and driven entirely by the `columns`/`rows` props -- no app-specific
+ * knowledge. Originally built for Kenzen (design.md section 9's decision tables); moved here so
+ * any app on this design system can use it.
+ */
+export function DataTable({ columns, rows, rowKey, groupBy, groupOrder, defaultSortKey, defaultSortDirection = "asc", sticky, emptyMessage, }) {
+    const [sort, setSort] = useState(defaultSortKey ? { key: defaultSortKey, direction: defaultSortDirection } : null);
+    if (rows.length === 0) {
+        return _jsx("p", { children: emptyMessage ?? "No data." });
+    }
+    function onHeaderClick(column) {
+        if (!column.sortValue) {
+            return;
+        }
+        setSort((current) => {
+            if (current?.key !== column.key) {
+                return { key: column.key, direction: "asc" };
+            }
+            return { key: column.key, direction: current.direction === "asc" ? "desc" : "asc" };
+        });
+    }
+    const groups = groupBy
+        ? (() => {
+            const byGroup = new Map();
+            for (const row of rows) {
+                const label = groupBy(row);
+                const bucket = byGroup.get(label);
+                if (bucket) {
+                    bucket.push(row);
+                }
+                else {
+                    byGroup.set(label, [row]);
+                }
+            }
+            return orderGroups([...byGroup.keys()], groupOrder).map((label) => {
+                // Safe: label came from byGroup's own keys.
+                const groupRows = byGroup.get(label);
+                if (!groupRows) {
+                    throw new Error(`unreachable: no rows for group ${label}`);
+                }
+                return { label, rows: sortRows(groupRows, columns, sort) };
+            });
+        })()
+        : [{ label: null, rows: sortRows(rows, columns, sort) }];
+    const table = (_jsxs("table", { className: "rb-table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column) => {
+                        const isSorted = sort?.key === column.key;
+                        // `aria-sort` claims a table-wide order; grouping only sorts within each group, so
+                        // asserting it there would tell a screen-reader user something false.
+                        const ariaSort = isSorted && !groupBy
+                            ? sort.direction === "asc"
+                                ? "ascending"
+                                : "descending"
+                            : undefined;
+                        return (_jsx("th", { scope: "col", "aria-sort": ariaSort, children: column.sortValue ? (_jsxs("button", { type: "button", className: "rb-table__sort", onClick: () => onHeaderClick(column), children: [column.header, isSorted && (_jsx("span", { "aria-hidden": "true", children: sort.direction === "asc" ? " ▲" : " ▼" }))] })) : (column.header) }, column.key));
+                    }) }) }), _jsx("tbody", { children: groups.map((group) => (_jsx(GroupRows, { group: group, columns: columns, rowKey: rowKey }, group.label ?? "__ungrouped__"))) })] }));
+    return sticky ? _jsx("div", { className: "rb-table-scroll", children: table }) : table;
+}
+function GroupRows({ group, columns, rowKey, }) {
+    return (_jsxs(_Fragment, { children: [group.label !== null && (_jsx("tr", { className: "rb-table__group-row", children: _jsx("td", { colSpan: columns.length, children: group.label }) })), group.rows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { className: cx(column.numeric && "rb-num"), children: column.render(row) }, column.key))) }, rowKey(row))))] }));
+}

package/dist/Tabstrip.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+export interface TabstripTab {
+    /** Unique among this strip's tabs; what `onSelect` reports and `selected` matches. */
+    id: string;
+    label: ReactNode;
+    /** Optional trailing count/badge, e.g. how many items the tab holds. */
+    badge?: ReactNode;
+}
+export interface TabstripProps {
+    tabs: TabstripTab[];
+    selected: string;
+    onSelect: (id: string) => void;
+    /** Names the strip for assistive tech, e.g. "View". */
+    label: string;
+}
+/**
+ * A controlled tab strip on the `rb-tabstrip` contract -- the design system's existing
+ * top-level-view-nav pattern (bordered pill buttons; the active tab gets accent text, a wash,
+ * and an accent-tinted border), previously a two-theme "extra" (arcane-obsidian/arcane-parchment)
+ * with no React wrapper. This component gives every theme the same pattern via shared tokens,
+ * and adds `.rb-tabstrip__badge` to the contract for an optional trailing count.
+ *
+ * Controlled rather than self-stateful so the selected tab can be lifted -- a caller that wants
+ * it in the URL, or restored across a data reload, cannot do that with internal state.
+ *
+ * Implements the ARIA tabs pattern: `role="tablist"` with roving `tabIndex`, so the strip is a
+ * SINGLE tab stop and arrow keys move between tabs -- a plain row of buttons would instead make
+ * a keyboard user tab through every one to reach the content. Left/Right wrap at both ends, and
+ * Home/End jump to the first/last, which is what that pattern specifies. `aria-controls` is
+ * deliberately not asserted, since this component cannot know the panel's id and claiming a
+ * relationship that does not exist would mislead a screen-reader user.
+ */
+export declare function Tabstrip({ tabs, selected, onSelect, label }: TabstripProps): import("react").JSX.Element;

package/dist/Tabstrip.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/**
+ * A controlled tab strip on the `rb-tabstrip` contract -- the design system's existing
+ * top-level-view-nav pattern (bordered pill buttons; the active tab gets accent text, a wash,
+ * and an accent-tinted border), previously a two-theme "extra" (arcane-obsidian/arcane-parchment)
+ * with no React wrapper. This component gives every theme the same pattern via shared tokens,
+ * and adds `.rb-tabstrip__badge` to the contract for an optional trailing count.
+ *
+ * Controlled rather than self-stateful so the selected tab can be lifted -- a caller that wants
+ * it in the URL, or restored across a data reload, cannot do that with internal state.
+ *
+ * Implements the ARIA tabs pattern: `role="tablist"` with roving `tabIndex`, so the strip is a
+ * SINGLE tab stop and arrow keys move between tabs -- a plain row of buttons would instead make
+ * a keyboard user tab through every one to reach the content. Left/Right wrap at both ends, and
+ * Home/End jump to the first/last, which is what that pattern specifies. `aria-controls` is
+ * deliberately not asserted, since this component cannot know the panel's id and claiming a
+ * relationship that does not exist would mislead a screen-reader user.
+ */
+export function Tabstrip({ tabs, selected, onSelect, label }) {
+    function onKeyDown(event) {
+        const index = tabs.findIndex((t) => t.id === selected);
+        if (index === -1) {
+            return;
+        }
+        let next = null;
+        switch (event.key) {
+            case "ArrowRight":
+                next = (index + 1) % tabs.length;
+                break;
+            case "ArrowLeft":
+                next = (index - 1 + tabs.length) % tabs.length;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        const target = tabs[next];
+        if (target) {
+            event.preventDefault();
+            onSelect(target.id);
+        }
+    }
+    // When `selected` matches no tab (a caller mid-reload passing a stale id), every tab would
+    // otherwise get tabIndex=-1 and the whole strip would drop out of the tab order entirely --
+    // a keyboard trap strictly worse than the inert arrow keys above. Fall back to making the
+    // first tab the strip's single tab stop, so it stays reachable.
+    const hasSelected = tabs.some((t) => t.id === selected);
+    return (_jsx("div", { role: "tablist", "aria-label": label, className: "rb-tabstrip", onKeyDown: onKeyDown, children: tabs.map((tab, index) => {
+            const isSelected = tab.id === selected;
+            const isTabStop = hasSelected ? isSelected : index === 0;
+            return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isSelected, 
+                // Roving tabIndex: exactly one tab is reachable by Tab, so the whole strip is one
+                // stop and the arrow keys above do the moving within it.
+                tabIndex: isTabStop ? 0 : -1, className: cx("rb-tabstrip__tab", isSelected && "rb-tabstrip__tab--active"), onClick: () => onSelect(tab.id), children: [tab.label, tab.badge !== undefined && _jsx("span", { className: "rb-tabstrip__badge", children: tab.badge })] }, tab.id));
+        }) }));
+}

package/dist/index.d.ts

@@ -7,5 +7,7 @@ export { Badge, Alert, Progress, Spinner, type BadgeProps, type AlertProps, type
 export { Dialog, type DialogProps } from "./Dialog.js";
 export { Tabs, type TabsProps, type TabItem } from "./Tabs.js";
 export { Stepper, type StepperProps, type StepperStep } from "./Stepper.js";
+export { DataTable, type DataTableProps, type DataTableColumn } from "./DataTable.js";
+export { Tabstrip, type TabstripProps, type TabstripTab } from "./Tabstrip.js";
 export { LinksIndex, type LinksIndexProps, type LinkItem, type LinkCategory, type LinkUrl, } from "./LinksIndex.js";
 export { cx } from "./cx.js";

package/dist/index.js

@@ -7,5 +7,7 @@ export { Badge, Alert, Progress, Spinner, } from "./feedback.js";
 export { Dialog } from "./Dialog.js";
 export { Tabs } from "./Tabs.js";
 export { Stepper } from "./Stepper.js";
+export { DataTable } from "./DataTable.js";
+export { Tabstrip } from "./Tabstrip.js";
 export { LinksIndex, } from "./LinksIndex.js";
 export { cx } from "./cx.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "React components styled by @rackbops/styles rackbops themes.",
   "license": "MIT",
   "repository": {