@tribepad/themis 1.5.9 → 1.6.0

package/src/elements/Table/Table.stories.tsx

@@ -9,7 +9,7 @@
  * @see Storybook (when running)
  */
 
-import { useState, type ReactElement } from 'react';
+import { useState, useRef, type ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Table,
@@ -18,9 +18,23 @@ import {
   Column,
   Row,
   Cell,
-  type SortDescriptor,
 } from './Table';
+import { BulkActionBar } from './BulkActionBar';
+import { TableCardList } from './TableCardList';
+import { resolveSelectedCount } from './resolveSelectedCount';
+import { useBulkActionShortcut } from './useBulkActionShortcut';
+import { useContainerNarrow } from '../../hooks/useContainerNarrow';
+import type { Selection, SortDescriptor } from './Table.types';
+import {
+  Filters,
+  FilterSearch,
+  FilterSelect,
+  FilterChips,
+  type FilterValues,
+} from '../Filters';
 import { Button } from '../Button';
+import { Dropdown } from '../Dropdown';
+import { MoreHorizontal, Mail, ArrowRight, X, Download } from 'lucide-react';
 
 // Sample data for all stories
 const sampleFiles = [
@@ -55,9 +69,13 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'bordered', 'striped'],
+      options: ['default', 'bordered'],
       description: 'Visual variant of the table',
     },
+    zebra: {
+      control: 'boolean',
+      description: 'Alternating row backgrounds (on by default; orthogonal to variant)',
+    },
     size: {
       control: 'select',
       options: ['sm', 'default', 'lg'],
@@ -139,12 +157,37 @@ export const Bordered: Story = {
 };
 
 /**
- * Striped Variant
- * Table with alternating row colors for better readability
+ * Zebra striping (on by default)
+ * Alternating row colours for better readability. Disable with `zebra={false}`.
+ */
+export const Zebra: Story = {
+  render: () => (
+    <Table aria-label="Files">
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column>Size</Column>
+      </TableHeader>
+      <TableBody items={sampleFiles}>
+        {(item) => (
+          <Row key={item.id}>
+            <Cell>{item.name}</Cell>
+            <Cell>{item.type}</Cell>
+            <Cell>{item.size}</Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+/**
+ * Zebra disabled
+ * Flat rows when `zebra={false}` is passed.
  */
-export const Striped: Story = {
+export const NoZebra: Story = {
   render: () => (
-    <Table aria-label="Files" variant="striped">
+    <Table aria-label="Files" zebra={false}>
       <TableHeader>
         <Column isRowHeader>Name</Column>
         <Column>Type</Column>
@@ -610,7 +653,7 @@ export const WithActionButtons: Story = {
 
 /**
  * Full Featured Table
- * Demonstrates selection, sorting, and striped variant together
+ * Demonstrates selection, sorting, and zebra striping together
  */
 export const FullFeatured: Story = {
   render: function FullFeaturedTable(): ReactElement {
@@ -647,7 +690,6 @@ export const FullFeatured: Story = {
         </div>
         <Table
           aria-label="Candidates"
-          variant="striped"
           selectionMode="multiple"
           selectedKeys={selectedKeys}
           onSelectionChange={(keys) => setSelectedKeys(keys as 'all' | Set<string>)}
@@ -728,7 +770,7 @@ export const KeyboardNavigation: Story = {
 export const AllVariants: Story = {
   render: () => (
     <div className="space-y-8">
-      {(['default', 'bordered', 'striped'] as const).map((variant) => (
+      {(['default', 'bordered'] as const).map((variant) => (
         <div key={variant} className="space-y-2">
           <h3 className="font-semibold capitalize">{variant} Variant</h3>
           <Table aria-label={`${variant} table`} variant={variant}>
@@ -788,3 +830,418 @@ export const AllSizes: Story = {
     </div>
   ),
 };
+
+// ============================================================================
+// Recipe: Row actions menu (⋯) — reuse the Themis Dropdown (APG menu button)
+// ============================================================================
+
+/**
+ * Row actions menu
+ *
+ * The canonical per-row actions cell: a Themis `Dropdown` (APG menu button —
+ * roving tabindex, arrow/Home/End, Esc/Tab close + return focus, auto-flip near
+ * the viewport edge, all from React Aria). Themis ships NO dedicated row-actions
+ * component — compose the Dropdown instead. Keep the trigger a 44px icon button
+ * with an `aria-label` naming the row.
+ */
+export const RowActionsMenu: Story = {
+  render: () => (
+    <Table aria-label="Files">
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column align="end">Actions</Column>
+      </TableHeader>
+      <TableBody items={sampleFiles}>
+        {(item) => (
+          <Row key={item.id}>
+            <Cell>{item.name}</Cell>
+            <Cell>{item.type}</Cell>
+            <Cell align="end">
+              <Dropdown>
+                <Dropdown.Trigger>
+                  <Button
+                    variant="ghost"
+                    visualSize="icon"
+                    aria-label={`Actions for ${item.name}`}
+                  >
+                    <MoreHorizontal aria-hidden="true" />
+                  </Button>
+                </Dropdown.Trigger>
+                <Dropdown.Menu align="end" side="bottom">
+                  <Dropdown.Item onAction={() => {}}>View</Dropdown.Item>
+                  <Dropdown.Item onAction={() => {}}>Edit</Dropdown.Item>
+                  <Dropdown.Separator />
+                  <Dropdown.Item onAction={() => {}}>Delete</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </Cell>
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  ),
+};
+
+// ============================================================================
+// Recipe: Bulk actions toolbar + selection (+ "A" jump shortcut)
+// ============================================================================
+
+/**
+ * Bulk actions
+ *
+ * Multiple selection drives a {@link BulkActionBar} passed to the Table's
+ * `toolbar` slot, so it renders inside the card frame above the header. Selection
+ * is consumer-owned (`selectedKeys` + `onSelectionChange`); the count is resolved
+ * with `resolveSelectedCount` so the `'all'` sentinel is handled. `useBulkActionShortcut`
+ * lets the user press **A** — only while focus is within the table — to jump to the
+ * toolbar; `showJumpHint` advertises it.
+ */
+export const BulkActions: Story = {
+  render: function BulkActionsStory(): ReactElement {
+    const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
+    const tableRef = useRef<HTMLTableElement>(null);
+    const barRef = useRef<HTMLDivElement>(null);
+    const allKeys = sampleFiles.map((f) => f.id);
+    const selectedCount = resolveSelectedCount(selectedKeys, allKeys);
+
+    // Shortcut is scoped to the table — pressing "A" elsewhere on the page does nothing.
+    useBulkActionShortcut({ scopeRef: tableRef, toolbarRef: barRef });
+
+    const toolbar = (
+      <BulkActionBar
+        ref={barRef}
+        selectedCount={selectedCount}
+        showJumpHint
+        actions={[
+          { id: 'email', label: 'Email', icon: <Mail aria-hidden="true" /> },
+          { id: 'move', label: 'Move stage', icon: <ArrowRight aria-hidden="true" /> },
+          { id: 'reject', label: 'Reject', icon: <X aria-hidden="true" /> },
+          { id: 'export', label: 'Export', icon: <Download aria-hidden="true" /> },
+        ]}
+        onAction={() => {}}
+        onClearSelection={() => setSelectedKeys(new Set())}
+        labels={{
+          selectedCount: (n) => `${n} selected`,
+          clear: 'Clear',
+          toolbarLabel: (n) => `Bulk actions for ${n} selected`,
+          actionsAvailable: (n) => `${n} actions available`,
+          jumpHint: (key) => <>Press {key} to jump here</>,
+          jumpAnnouncement: 'Press A to jump to bulk actions',
+        }}
+      />
+    );
+
+    return (
+      <Table
+        ref={tableRef}
+        aria-label="Files"
+        toolbar={toolbar}
+        selectionMode="multiple"
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys}
+      >
+        <TableHeader>
+          <Column isRowHeader>Name</Column>
+          <Column>Type</Column>
+          <Column>Size</Column>
+        </TableHeader>
+        <TableBody items={sampleFiles}>
+          {(item) => (
+            <Row key={item.id}>
+              <Cell>{item.name}</Cell>
+              <Cell>{item.type}</Cell>
+              <Cell>{item.size}</Cell>
+            </Row>
+          )}
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+// ============================================================================
+// Recipe: responsive reflow to cards on narrow containers
+// ============================================================================
+
+/**
+ * Responsive cards
+ *
+ * `useContainerNarrow` watches the wrapper's width; below the breakpoint the
+ * page swaps `<Table>` for `<TableCardList>`. Selection + sort state are shared
+ * (consumer-owned), so they persist across the switch.
+ *
+ * The wrapper is full-width, so **resize the Storybook viewport / canvas** (or
+ * the Viewport toolbar) below ~640px and the table reflows to cards. Because it's
+ * a *container* query (not a media query), a table placed in a narrow panel cards
+ * up too — even on a wide screen.
+ */
+export const ResponsiveCards: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: function ResponsiveCardsStory(): ReactElement {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const narrow = useContainerNarrow(wrapperRef, 640);
+    const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
+    const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>(undefined);
+
+    const sorted = sortDescriptor
+      ? [...sampleFiles].sort((a, b) => {
+          const col = sortDescriptor.column as 'name' | 'type';
+          const cmp = String(a[col]).localeCompare(String(b[col]));
+          return sortDescriptor.direction === 'ascending' ? cmp : -cmp;
+        })
+      : sampleFiles;
+
+    return (
+      <div ref={wrapperRef} style={{ padding: 16 }}>
+        {narrow ? (
+          <TableCardList
+            items={sorted}
+            getRowId={(f) => f.id}
+            aria-label="Files"
+            selectionMode="multiple"
+            selectedKeys={selectedKeys}
+            onSelectionChange={setSelectedKeys}
+            sortDescriptor={sortDescriptor}
+            onSortChange={setSortDescriptor}
+            sortColumns={[
+              { id: 'name', label: 'Name' },
+              { id: 'type', label: 'Type' },
+            ]}
+            renderEmptyState={() => <span>No files</span>}
+            labels={{
+              results: (n) => `${n} files`,
+              selectAll: 'Select all',
+              sort: 'Sort',
+              sortPlaceholder: 'Sort by…',
+              sortDirection: (d) => `Sort direction: ${d}`,
+              selectItem: (item) => `Select ${(item as { name: string }).name}`,
+            }}
+            renderCard={(f) => (
+              <div className="flex flex-col gap-1">
+                <span className="font-semibold">{f.name}</span>
+                <span className="text-sm text-[var(--menu-muted)]">
+                  {f.type} · {f.size}
+                </span>
+              </div>
+            )}
+          />
+        ) : (
+          <Table
+            aria-label="Files"
+            selectionMode="multiple"
+            selectedKeys={selectedKeys}
+            onSelectionChange={setSelectedKeys}
+            sortDescriptor={sortDescriptor}
+            onSortChange={setSortDescriptor}
+          >
+            <TableHeader>
+              <Column id="name" isRowHeader allowsSorting>
+                Name
+              </Column>
+              <Column id="type" allowsSorting>
+                Type
+              </Column>
+              <Column>Size</Column>
+            </TableHeader>
+            <TableBody items={sorted}>
+              {(item) => (
+                <Row key={item.id}>
+                  <Cell>{item.name}</Cell>
+                  <Cell>{item.type}</Cell>
+                  <Cell>{item.size}</Cell>
+                </Row>
+              )}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+    );
+  },
+};
+
+// ============================================================================
+// Recipe: full mobile list page (Filters bottom-sheet + table → cards)
+// ============================================================================
+
+const candidateStages = [
+  { value: 'Interview', label: 'Interview' },
+  { value: 'Screening', label: 'Screening' },
+  { value: 'Offer', label: 'Offer' },
+  { value: 'Hired', label: 'Hired' },
+  { value: 'Rejected', label: 'Rejected' },
+];
+
+/**
+ * Mobile list page
+ *
+ * The complete responsive pattern: a single `useContainerNarrow` drives BOTH the
+ * Filters bar (collapses to a bottom-sheet) AND the table (reflows to a card list)
+ * so they switch together. Resize the Storybook canvas/viewport below ~700px to
+ * see the mobile experience; widen it for the desktop table + inline filters.
+ */
+export const MobileListPage: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: function MobileListPageStory(): ReactElement {
+    const ref = useRef<HTMLDivElement>(null);
+    const narrow = useContainerNarrow(ref, 700);
+    const [values, setValues] = useState<FilterValues>({});
+    const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
+
+    const q = typeof values.q === 'string' ? values.q.toLowerCase() : '';
+    const stage = typeof values.stage === 'string' ? values.stage : '';
+    const rows = candidatesData.filter(
+      (c) =>
+        (!q || c.name.toLowerCase().includes(q) || c.role.toLowerCase().includes(q)) &&
+        (!stage || c.status === stage)
+    );
+
+    return (
+      <div ref={ref} style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <Filters
+          values={values}
+          onChange={setValues}
+          narrow={narrow}
+          aria-label="Filter candidates"
+          labels={{
+            done: 'Done',
+            clear: 'Clear',
+            clearAll: 'Clear all',
+            close: 'Close',
+            filtersButton: 'Filters',
+          }}
+        >
+          <FilterSearch name="q" label="Search candidates" placeholder="Search name or role…" />
+          <FilterSelect name="stage" label="Stage" options={candidateStages} />
+          <FilterChips clearAllLabel="Clear all" removeChipLabel={(label) => `Remove ${label}`} />
+        </Filters>
+
+        {narrow ? (
+          <TableCardList
+            items={rows}
+            getRowId={(c) => c.id}
+            aria-label="Candidates"
+            selectionMode="multiple"
+            selectedKeys={selectedKeys}
+            onSelectionChange={setSelectedKeys}
+            renderEmptyState={() => <span>No matching candidates</span>}
+            labels={{
+              results: (n) => `${n} candidates`,
+              selectAll: 'Select all',
+              sort: 'Sort',
+              sortDirection: (d) => `Sort direction: ${d}`,
+              selectItem: (item) => `Select ${(item as { name: string }).name}`,
+            }}
+            renderCard={(c) => (
+              <div className="flex flex-col gap-1">
+                <span className="font-semibold">{c.name}</span>
+                <span className="text-sm text-[var(--menu-muted)]">{c.role}</span>
+                <span className="text-sm">
+                  {c.status} · Match {c.score}
+                </span>
+              </div>
+            )}
+          />
+        ) : (
+          <Table
+            aria-label="Candidates"
+            selectionMode="multiple"
+            selectedKeys={selectedKeys}
+            onSelectionChange={setSelectedKeys}
+          >
+            <TableHeader>
+              <Column isRowHeader>Candidate</Column>
+              <Column>Role</Column>
+              <Column>Stage</Column>
+              <Column align="end">Match</Column>
+            </TableHeader>
+            <TableBody items={rows} renderEmptyState={() => <span>No matching candidates</span>}>
+              {(item) => (
+                <Row key={item.id}>
+                  <Cell>{item.name}</Cell>
+                  <Cell>{item.role}</Cell>
+                  <Cell>{item.status}</Cell>
+                  <Cell align="end">{item.score}</Cell>
+                </Row>
+              )}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Mobile bulk actions
+ *
+ * The card list with selection + the `BulkActionBar` above it (shown in a phone-
+ * width frame). Selection is consumer-owned; the bar appears once a card is
+ * selected, announces the count, and Clear resets. (The "A" jump shortcut is
+ * desktop-only, so the hint is omitted here.)
+ */
+export const MobileBulkActions: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: function MobileBulkActionsStory(): ReactElement {
+    const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['1', '3']));
+    const allKeys = candidatesData.map((c) => c.id);
+    const selectedCount = resolveSelectedCount(selectedKeys, allKeys);
+
+    return (
+      <div
+        style={{
+          maxWidth: 390,
+          margin: '0 auto',
+          padding: 16,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 12,
+        }}
+      >
+        <BulkActionBar
+          selectedCount={selectedCount}
+          framed
+          sticky={false}
+          actions={[
+            { id: 'email', label: 'Email', icon: <Mail aria-hidden="true" /> },
+            { id: 'move', label: 'Move stage', icon: <ArrowRight aria-hidden="true" /> },
+            { id: 'reject', label: 'Reject', icon: <X aria-hidden="true" /> },
+            { id: 'export', label: 'Export', icon: <Download aria-hidden="true" /> },
+          ]}
+          onAction={() => {}}
+          onClearSelection={() => setSelectedKeys(new Set())}
+          labels={{
+            selectedCount: (n) => `${n} selected`,
+            clear: 'Clear',
+            toolbarLabel: (n) => `Bulk actions for ${n} selected`,
+            actionsAvailable: (n) => `${n} actions available`,
+          }}
+        />
+        <TableCardList
+          items={candidatesData}
+          getRowId={(c) => c.id}
+          aria-label="Candidates"
+          selectionMode="multiple"
+          selectedKeys={selectedKeys}
+          onSelectionChange={setSelectedKeys}
+          labels={{
+            results: (n) => `${n} candidates`,
+            selectAll: 'Select all',
+            sort: 'Sort',
+            sortDirection: (d) => `Sort direction: ${d}`,
+            selectItem: (item) => `Select ${(item as { name: string }).name}`,
+          }}
+          renderCard={(c) => (
+            <div className="flex flex-col gap-1">
+              <span className="font-semibold">{c.name}</span>
+              <span className="text-sm text-[var(--menu-muted)]">{c.role}</span>
+              <span className="text-sm">
+                {c.status} · Match {c.score}
+              </span>
+            </div>
+          )}
+        />
+      </div>
+    );
+  },
+};