@stigmer/react 0.4.8 → 0.5.0

package/src/resource-workbench/components/ResourceInspector.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link ResourceInspector}. */
+export interface ResourceInspectorProps {
+  /** Whether the inspector panel is currently visible. */
+  readonly open: boolean;
+  /** Called when the user closes the inspector (e.g. via the close button). */
+  readonly onClose: () => void;
+  /** The content to render inside the inspector panel. */
+  readonly children: ReactNode;
+  /** Accessible label for the panel. @default "Resource inspector" */
+  readonly "aria-label"?: string;
+  /** Additional CSS classes for the panel. */
+  readonly className?: string;
+}
+
+/**
+ * Split-panel inspector that appears to the right of the workbench
+ * content area, providing a preview of the focused resource without
+ * navigating away from the list.
+ *
+ * The inspector is a purely presentational shell — what renders inside
+ * it is determined by the consumer via the `children` prop. The parent
+ * `ResourceWorkbench` manages open/close state and passes the focused
+ * item's detail view.
+ */
+export function ResourceInspector({
+  open,
+  onClose,
+  children,
+  "aria-label": ariaLabel = "Resource inspector",
+  className,
+}: ResourceInspectorProps) {
+  if (!open) return null;
+
+  return (
+    <aside
+      role="complementary"
+      aria-label={ariaLabel}
+      className={cn(
+        "flex w-80 shrink-0 flex-col border-l border-border bg-card",
+        "lg:w-96",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between border-b border-border px-4 py-2">
+        <span className="text-xs font-medium text-muted-foreground">
+          Preview
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close inspector"
+          className={cn(
+            "inline-flex items-center justify-center rounded-sm p-1",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          <CloseIcon />
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto p-4">
+        {children}
+      </div>
+    </aside>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M3.5 3.5l7 7M10.5 3.5l-7 7" />
+    </svg>
+  );
+}

package/src/resource-workbench/components/ResourceList.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@stigmer/theme";
+import { SelectionCheckbox } from "./SelectionCheckbox";
+
+/** Props for {@link ResourceList}. */
+export interface ResourceListProps<TData> {
+  /** Items to render as compact list rows. */
+  readonly items: readonly TData[];
+  /** Render function for each row's content. */
+  readonly renderRow: (item: TData, index: number) => ReactNode;
+  /** Whether selection checkboxes are shown on rows. */
+  readonly enableSelection?: boolean;
+  /** Set of selected item IDs. */
+  readonly selectedIds?: ReadonlySet<string>;
+  /** Called when an item's selection state is toggled. */
+  readonly onToggleSelection?: (id: string) => void;
+  /** Extracts a stable unique ID from an item. */
+  readonly getItemId?: (item: TData) => string;
+  /**
+   * Render function for per-row actions (e.g. an `ActionMenu`).
+   * Shown at the end of the row.
+   */
+  readonly renderRowAction?: (item: TData) => ReactNode;
+  /** Called when a row is clicked (not when a control inside is clicked). */
+  readonly onRowClick?: (item: TData) => void;
+  /** Accessible label for the list region. @default "Resource list" */
+  readonly "aria-label"?: string;
+  /** Additional CSS classes for the list container. */
+  readonly className?: string;
+}
+
+/**
+ * Compact list view for the resource workbench.
+ *
+ * Renders items as a single-column vertical list of rows. Each row
+ * supports selection, an action slot, and click handling. Row content
+ * is customizable via the `renderRow` prop.
+ *
+ * This component renders **only the list**. Search, filters, and
+ * pagination are handled by the parent `ResourceWorkbench`.
+ */
+export function ResourceList<TData>({
+  items,
+  renderRow,
+  enableSelection = false,
+  selectedIds,
+  onToggleSelection,
+  getItemId = defaultGetId,
+  renderRowAction,
+  onRowClick,
+  "aria-label": ariaLabel = "Resource list",
+  className,
+}: ResourceListProps<TData>) {
+  return (
+    <div
+      role="list"
+      aria-label={ariaLabel}
+      className={cn("flex flex-col", className)}
+    >
+      {items.map((item, index) => {
+        const id = getItemId(item);
+        const isSelected = selectedIds?.has(id) ?? false;
+        const isClickable = !!onRowClick;
+
+        return (
+          <div
+            key={id || `row-${index}`}
+            role="listitem"
+            aria-selected={enableSelection ? isSelected : undefined}
+            onClick={
+              isClickable
+                ? (e) => {
+                    const target = e.target as HTMLElement;
+                    if (
+                      target.closest("button") ||
+                      target.closest("input") ||
+                      target.closest("[role='menu']")
+                    ) {
+                      return;
+                    }
+                    onRowClick!(item);
+                  }
+                : undefined
+            }
+            className={cn(
+              "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors",
+              isSelected && "bg-primary-subtle",
+              isClickable && "cursor-pointer hover:bg-accent-hover",
+              isClickable && "focus-within:ring-2 focus-within:ring-inset focus-within:ring-ring",
+            )}
+          >
+            {enableSelection && onToggleSelection && (
+              <SelectionCheckbox
+                checked={isSelected}
+                onChange={() => onToggleSelection(id)}
+                aria-label={`Select item ${id}`}
+              />
+            )}
+            <div className="min-w-0 flex-1">
+              {renderRow(item, index)}
+            </div>
+            {renderRowAction && (
+              <div className="ml-auto shrink-0" onClick={(e) => e.stopPropagation()}>
+                {renderRowAction(item)}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function defaultGetId<TData>(item: TData): string {
+  const r = item as Record<string, unknown>;
+  if (typeof r.id === "string") return r.id;
+  if (typeof r.slug === "string") return r.slug;
+  return "";
+}

package/src/resource-workbench/components/ResourceTable.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { flexRender, type Table, type Row } from "@tanstack/react-table";
+import { cn } from "@stigmer/theme";
+import type { SortDirection } from "../types";
+import { ColumnHeader } from "./ColumnHeader";
+import { SelectionCheckbox } from "./SelectionCheckbox";
+
+/** Props for {@link ResourceTable}. */
+export interface ResourceTableProps<TData> {
+  /** TanStack Table instance from `useResourceCollection`. */
+  readonly table: Table<TData>;
+  /** Whether row selection is enabled. */
+  readonly enableSelection?: boolean;
+  /**
+   * Render function for per-row actions (e.g. an `ActionMenu`).
+   * Shown in the last column. Omit to hide the actions column.
+   */
+  readonly renderRowAction?: (item: TData) => ReactNode;
+  /**
+   * Called when a row is clicked (but not when a checkbox or action
+   * inside the row is clicked).
+   */
+  readonly onRowClick?: (item: TData) => void;
+  /** Accessible label for the table. @default "Resources" */
+  readonly "aria-label"?: string;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Table view for the resource workbench.
+ *
+ * Renders a semantic `<table>` element using column definitions and
+ * data from a TanStack Table instance. Supports sortable column
+ * headers, row selection checkboxes, per-row action menus, and
+ * keyboard-navigable rows.
+ *
+ * This component renders **only the table**. Search, filters, view
+ * switching, and pagination are handled by the parent `ResourceWorkbench`.
+ *
+ * @example
+ * ```tsx
+ * const { table } = useResourceCollection({ ... });
+ * <ResourceTable
+ *   table={table}
+ *   enableSelection
+ *   renderRowAction={(item) => <AgentActionMenu item={item} />}
+ *   onRowClick={(item) => navigate(item.slug)}
+ * />
+ * ```
+ */
+export function ResourceTable<TData>({
+  table,
+  enableSelection = false,
+  renderRowAction,
+  onRowClick,
+  "aria-label": ariaLabel = "Resources",
+  className,
+}: ResourceTableProps<TData>) {
+  const headerGroups = table.getHeaderGroups();
+  const rows = table.getRowModel().rows;
+
+  const allSelected = table.getIsAllRowsSelected();
+  const someSelected = table.getIsSomeRowsSelected();
+
+  return (
+    <div className={cn("overflow-x-auto", className)}>
+      <table
+        role="table"
+        aria-label={ariaLabel}
+        className="w-full border-collapse text-sm"
+      >
+        <thead>
+          {headerGroups.map((headerGroup) => (
+            <tr
+              key={headerGroup.id}
+              className="border-b border-border"
+            >
+              {enableSelection && (
+                <th scope="col" className="w-10 px-3 py-2">
+                  <SelectionCheckbox
+                    checked={allSelected}
+                    indeterminate={someSelected && !allSelected}
+                    onChange={table.getToggleAllRowsSelectedHandler()
+                      ? () => table.toggleAllRowsSelected(!allSelected)
+                      : () => {}}
+                    aria-label={
+                      allSelected
+                        ? "Deselect all rows"
+                        : "Select all rows"
+                    }
+                  />
+                </th>
+              )}
+              {headerGroup.headers.map((header) => {
+                const canSort = header.column.getCanSort();
+                const sorted = header.column.getIsSorted();
+                const direction: SortDirection | null = sorted === "asc"
+                  ? "asc"
+                  : sorted === "desc"
+                    ? "desc"
+                    : null;
+
+                return (
+                  <ColumnHeader
+                    key={header.id}
+                    label={
+                      typeof header.column.columnDef.header === "string"
+                        ? header.column.columnDef.header
+                        : header.id
+                    }
+                    sortable={canSort}
+                    sortDirection={direction}
+                    onSort={
+                      canSort
+                        ? () => header.column.toggleSorting()
+                        : undefined
+                    }
+                  />
+                );
+              })}
+              {renderRowAction && (
+                <th scope="col" className="w-10 px-3 py-2">
+                  <span className="sr-only">Actions</span>
+                </th>
+              )}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.id}
+              row={row}
+              enableSelection={enableSelection}
+              renderRowAction={renderRowAction}
+              onRowClick={onRowClick}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Internal: Table row
+// ---------------------------------------------------------------------------
+
+function TableRow<TData>({
+  row,
+  enableSelection,
+  renderRowAction,
+  onRowClick,
+}: {
+  readonly row: Row<TData>;
+  readonly enableSelection: boolean;
+  readonly renderRowAction?: (item: TData) => ReactNode;
+  readonly onRowClick?: (item: TData) => void;
+}) {
+  const isSelected = row.getIsSelected();
+  const item = row.original;
+  const isClickable = !!onRowClick;
+
+  return (
+    <tr
+      className={cn(
+        "border-b border-border-muted transition-colors",
+        isSelected && "bg-primary-subtle",
+        isClickable && "cursor-pointer hover:bg-accent-hover",
+      )}
+      onClick={
+        isClickable
+          ? (e) => {
+              // Don't trigger row click when interacting with controls
+              const target = e.target as HTMLElement;
+              if (
+                target.closest("button") ||
+                target.closest("input") ||
+                target.closest("[role='menu']") ||
+                target.closest("[role='menuitem']")
+              ) {
+                return;
+              }
+              onRowClick!(item);
+            }
+          : undefined
+      }
+      aria-selected={enableSelection ? isSelected : undefined}
+    >
+      {enableSelection && (
+        <td className="w-10 px-3 py-2">
+          <SelectionCheckbox
+            checked={isSelected}
+            onChange={() => row.toggleSelected()}
+            aria-label={`Select row ${row.id}`}
+          />
+        </td>
+      )}
+      {row.getVisibleCells().map((cell) => (
+        <td
+          key={cell.id}
+          className="px-3 py-2 text-sm text-foreground"
+          style={{
+            minWidth: cell.column.columnDef.minSize
+              ? `${cell.column.columnDef.minSize}px`
+              : undefined,
+          }}
+        >
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </td>
+      ))}
+      {renderRowAction && (
+        <td className="w-10 px-3 py-2 text-right">
+          {renderRowAction(item)}
+        </td>
+      )}
+    </tr>
+  );
+}