@sovereignfs/ui 0.41.0 → 0.54.0

package/src/components/ContextMenu/__tests__/ContextMenu.test.tsx

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { ContextMenu } from '../ContextMenu';
+
+let isMobileMatches = false;
+
+function installMatchMedia() {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches: isMobileMatches,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+}
+
+const items = [{ label: 'Delete', onSelect: vi.fn() }];
+
+describe('ContextMenu', () => {
+  beforeEach(() => {
+    isMobileMatches = false;
+    installMatchMedia();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('does not show the menu before any trigger', () => {
+    render(
+      <ContextMenu items={items} aria-label="Row actions">
+        <div>Row</div>
+      </ContextMenu>,
+    );
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('opens on right-click (desktop) and prevents the native context menu', () => {
+    render(
+      <ContextMenu items={items} aria-label="Row actions">
+        <div>Row</div>
+      </ContextMenu>,
+    );
+    const target = screen.getByText('Row');
+    const event = fireEvent.contextMenu(target, { clientX: 100, clientY: 150 });
+    expect(event).toBe(false); // fireEvent returns false when preventDefault was called
+    expect(screen.getByRole('menu')).toBeDefined();
+  });
+
+  it('selecting an item calls onSelect and closes the menu', () => {
+    const onSelect = vi.fn();
+    render(
+      <ContextMenu items={[{ label: 'Delete', onSelect }]} aria-label="Row actions">
+        <div>Row</div>
+      </ContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText('Row'), { clientX: 10, clientY: 10 });
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Delete' }));
+    expect(onSelect).toHaveBeenCalled();
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('opens via long-press on touch instead of right-click', () => {
+    vi.useFakeTimers();
+    isMobileMatches = true;
+    installMatchMedia();
+    render(
+      <ContextMenu items={items} aria-label="Row actions">
+        <div>Row</div>
+      </ContextMenu>,
+    );
+    const target = screen.getByText('Row');
+    fireEvent.pointerDown(target, { pointerType: 'touch', clientX: 10, clientY: 10 });
+    act(() => {
+      vi.advanceTimersByTime(600);
+    });
+    expect(screen.getByRole('menu')).toBeDefined();
+    vi.useRealTimers();
+  });
+});

package/src/components/DataTable/DataTable.module.css

@@ -0,0 +1,28 @@
+.sortButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+}
+
+.sortButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sv-radius-sm);
+}
+
+.sortIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--sv-icon-size-sm);
+  height: var(--sv-icon-size-sm);
+  align-items: center;
+  justify-content: center;
+}

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DataTable, type DataTableColumn } from './DataTable';
+import { StatusBadge } from '../StatusBadge/StatusBadge';
+
+interface PluginRow {
+  id: string;
+  name: string;
+  installs: number;
+  status: 'synced' | 'draft';
+}
+
+const ROWS: PluginRow[] = [
+  { id: 'tasks', name: 'sovereign-tasks', installs: 482, status: 'synced' },
+  { id: 'ledger', name: 'sovereign-ledger', installs: 219, status: 'synced' },
+  { id: 'shopper', name: 'sovereign-shopper', installs: 37, status: 'draft' },
+  { id: 'healthlog', name: 'sovereign-healthlog', installs: 1204, status: 'synced' },
+];
+
+const columns: DataTableColumn<PluginRow>[] = [
+  { key: 'name', header: 'Plugin', sortable: true },
+  { key: 'installs', header: 'Installs', sortable: true, align: 'end' },
+  {
+    key: 'status',
+    header: 'Status',
+    render: (row) => <StatusBadge status={row.status} />,
+  },
+];
+
+const meta = {
+  title: 'Components/DataTable',
+  component: DataTable,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Sortable table built on Table. Column-driven: pass columns + data instead of composing TableRow/TableCell by hand. Clicking a sortable header cycles ascending → descending → unsorted.',
+      },
+    },
+  },
+  args: { columns: [], data: [], getRowKey: (row: PluginRow) => row.id },
+} satisfies Meta<typeof DataTable<PluginRow>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: () => <DataTable columns={columns} data={ROWS} getRowKey={(row) => row.id} />,
+};
+
+export const DefaultSorted: Story = {
+  render: () => (
+    <DataTable
+      columns={columns}
+      data={ROWS}
+      getRowKey={(row) => row.id}
+      defaultSortKey="installs"
+      defaultSortDirection="desc"
+    />
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <DataTable
+      columns={columns}
+      data={[]}
+      getRowKey={(row) => row.id}
+      emptyMessage="No plugins installed"
+    />
+  ),
+};

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../Table/Table';
+import { Icon } from '../Icon/Icon';
+import { EmptyState } from '../EmptyState/EmptyState';
+import styles from './DataTable.module.css';
+
+export type SortDirection = 'asc' | 'desc';
+
+export interface DataTableColumn<T> {
+  key: string;
+  header: string;
+  sortable?: boolean;
+  /** Cell content. Defaults to String(row[key]) when omitted. */
+  render?: (row: T) => ReactNode;
+  /** Value compared when sorting by this column. Defaults to row[key].
+   * Required if `key` isn't a property on T (a computed/joined column). */
+  sortValue?: (row: T) => string | number;
+  align?: 'start' | 'end';
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  data: T[];
+  getRowKey: (row: T) => string;
+  /** Initial sort — uncontrolled after mount, like Table itself has no
+   * externally-controlled state. */
+  defaultSortKey?: string;
+  defaultSortDirection?: SortDirection;
+  emptyMessage?: string;
+  className?: string;
+}
+
+function compareValues(a: string | number, b: string | number): number {
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  return String(a).localeCompare(String(b));
+}
+
+/**
+ * DataTable — sortable table built on Table's own primitives (no
+ * virtualization or filtering — those stay out of scope, matching Table's
+ * own "not a data grid" boundary). Column-driven: pass `columns` + `data`
+ * rather than composing `<TableRow>`/`<TableCell>` by hand.
+ *
+ * Sort state is internal (uncontrolled) and click-cycles
+ * ascending → descending → unsorted for a sortable column, mirroring the
+ * "toggle → toggle → clear" pattern most sortable tables use rather than
+ * being permanently stuck in whichever direction was clicked last.
+ */
+export function DataTable<T>({
+  columns,
+  data,
+  getRowKey,
+  defaultSortKey,
+  defaultSortDirection = 'asc',
+  emptyMessage = 'No results.',
+  className,
+}: DataTableProps<T>) {
+  const [sortKey, setSortKey] = useState<string | undefined>(defaultSortKey);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(defaultSortDirection);
+
+  const sortColumn = columns.find((c) => c.key === sortKey);
+
+  const sortedData = useMemo(() => {
+    if (!sortColumn) return data;
+    const getValue =
+      sortColumn.sortValue ??
+      ((row: T) => (row as Record<string, unknown>)[sortColumn.key] as string | number);
+    const sorted = [...data].sort((a, b) => compareValues(getValue(a), getValue(b)));
+    return sortDirection === 'asc' ? sorted : sorted.reverse();
+  }, [data, sortColumn, sortDirection]);
+
+  function handleSort(column: DataTableColumn<T>) {
+    if (!column.sortable) return;
+    if (sortKey !== column.key) {
+      setSortKey(column.key);
+      setSortDirection('asc');
+    } else if (sortDirection === 'asc') {
+      setSortDirection('desc');
+    } else {
+      setSortKey(undefined);
+      setSortDirection('asc');
+    }
+  }
+
+  if (data.length === 0) {
+    return <EmptyState heading={emptyMessage} />;
+  }
+
+  return (
+    <Table className={className}>
+      <TableHead>
+        <TableRow>
+          {columns.map((column) => {
+            const isSorted = sortKey === column.key;
+            const ariaSort = !column.sortable
+              ? undefined
+              : isSorted
+                ? sortDirection === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : 'none';
+            return (
+              <TableHeaderCell
+                key={column.key}
+                aria-sort={ariaSort}
+                style={column.align === 'end' ? { textAlign: 'end' } : undefined}
+              >
+                {column.sortable ? (
+                  <button
+                    type="button"
+                    className={styles.sortButton}
+                    onClick={() => handleSort(column)}
+                  >
+                    {column.header}
+                    <span className={styles.sortIcon}>
+                      {isSorted && (
+                        <Icon
+                          name={sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'}
+                          size="sm"
+                          aria-hidden
+                        />
+                      )}
+                    </span>
+                  </button>
+                ) : (
+                  column.header
+                )}
+              </TableHeaderCell>
+            );
+          })}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {sortedData.map((row) => (
+          <TableRow key={getRowKey(row)}>
+            {columns.map((column) => (
+              <TableCell
+                key={column.key}
+                style={column.align === 'end' ? { textAlign: 'end' } : undefined}
+              >
+                {column.render
+                  ? column.render(row)
+                  : String((row as Record<string, unknown>)[column.key] ?? '')}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/DataTable/__tests__/DataTable.test.tsx

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { DataTable, type DataTableColumn } from '../DataTable';
+
+afterEach(cleanup);
+
+interface Plugin {
+  id: string;
+  name: string;
+  installs: number;
+}
+
+const data: Plugin[] = [
+  { id: 'a', name: 'Charlie', installs: 12 },
+  { id: 'b', name: 'Alpha', installs: 30 },
+  { id: 'c', name: 'Bravo', installs: 5 },
+];
+
+const columns: DataTableColumn<Plugin>[] = [
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'installs', header: 'Installs', sortable: true, align: 'end' },
+];
+
+function rowsText() {
+  return screen
+    .getAllByRole('row')
+    .slice(1)
+    .map((row) => within(row).getAllByRole('cell')[0]?.textContent);
+}
+
+describe('DataTable', () => {
+  it('renders a row per data item and a header per column', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    expect(screen.getAllByRole('row')).toHaveLength(4); // 1 header + 3 body rows
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeDefined();
+    expect(screen.getByRole('columnheader', { name: 'Installs' })).toBeDefined();
+  });
+
+  it('renders cell values from row[key] by default', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    expect(screen.getByText('Charlie')).toBeDefined();
+    expect(screen.getByText('30')).toBeDefined();
+  });
+
+  it('uses a custom render function when provided', () => {
+    const withRender: DataTableColumn<Plugin>[] = [
+      { key: 'name', header: 'Name' },
+      { key: 'installs', header: 'Installs', render: (row) => `${row.installs} installs` },
+    ];
+    render(<DataTable columns={withRender} data={data} getRowKey={(row) => row.id} />);
+    expect(screen.getByText('30 installs')).toBeDefined();
+  });
+
+  it('shows an empty state instead of a table when data is empty', () => {
+    render(
+      <DataTable
+        columns={columns}
+        data={[]}
+        getRowKey={(row) => row.id}
+        emptyMessage="No plugins"
+      />,
+    );
+    expect(screen.queryByRole('table')).toBeNull();
+    expect(screen.getByText('No plugins')).toBeDefined();
+  });
+
+  it('non-sortable columns render as plain text, not a button', () => {
+    const withPlain: DataTableColumn<Plugin>[] = [{ key: 'name', header: 'Name' }];
+    render(<DataTable columns={withPlain} data={data} getRowKey={(row) => row.id} />);
+    expect(screen.queryByRole('button', { name: 'Name' })).toBeNull();
+    expect(screen.getByRole('columnheader', { name: 'Name' }).getAttribute('aria-sort')).toBeNull();
+  });
+
+  it('clicking a sortable header sorts ascending, then descending, then clears', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
+    const button = within(nameHeader).getByRole('button');
+
+    fireEvent.click(button);
+    expect(rowsText()).toEqual(['Alpha', 'Bravo', 'Charlie']);
+    expect(nameHeader.getAttribute('aria-sort')).toBe('ascending');
+
+    fireEvent.click(button);
+    expect(rowsText()).toEqual(['Charlie', 'Bravo', 'Alpha']);
+    expect(nameHeader.getAttribute('aria-sort')).toBe('descending');
+
+    fireEvent.click(button);
+    expect(rowsText()).toEqual(['Charlie', 'Alpha', 'Bravo']);
+    expect(nameHeader.getAttribute('aria-sort')).toBe('none');
+  });
+
+  it('sorts numeric columns numerically, not lexicographically', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    const installsHeader = screen.getByRole('columnheader', { name: 'Installs' });
+    fireEvent.click(within(installsHeader).getByRole('button'));
+    expect(rowsText()).toEqual(['Bravo', 'Charlie', 'Alpha']); // 5, 12, 30
+  });
+
+  it('switching the sort column resets to ascending', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
+    const installsHeader = screen.getByRole('columnheader', { name: 'Installs' });
+    fireEvent.click(within(nameHeader).getByRole('button'));
+    fireEvent.click(within(nameHeader).getByRole('button')); // now descending
+    fireEvent.click(within(installsHeader).getByRole('button'));
+    expect(installsHeader.getAttribute('aria-sort')).toBe('ascending');
+    expect(nameHeader.getAttribute('aria-sort')).toBe('none');
+  });
+
+  it('respects defaultSortKey/defaultSortDirection', () => {
+    render(
+      <DataTable
+        columns={columns}
+        data={data}
+        getRowKey={(row) => row.id}
+        defaultSortKey="installs"
+        defaultSortDirection="desc"
+      />,
+    );
+    expect(rowsText()).toEqual(['Alpha', 'Charlie', 'Bravo']); // 30, 12, 5
+  });
+});

package/src/components/DatePicker/DatePicker.module.css

@@ -1,5 +1,7 @@
 /* DatePicker — trigger styled to match Input's height/border/radius/focus
- * ring for visual consistency as a form field. */
+ * ring for visual consistency as a form field. Kept in sync with Input's
+ * own sizing by hand (36px rendered height via explicit height +
+ * border-box, not a literal reuse of Input). */
 
 .trigger {
   display: flex;
@@ -7,7 +9,9 @@
   justify-content: space-between;
   gap: var(--sv-space-2);
   width: 100%;
-  padding: var(--sv-space-2) var(--sv-space-3);
+  height: 36px;
+  box-sizing: border-box;
+  padding: 4px var(--sv-space-3);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-sm);
   line-height: 1.5;

package/src/components/DeviceOnlyGate/DeviceOnlyGate.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { EmptyState } from '../EmptyState/EmptyState';
+
+export interface DeviceOnlyGateProps {
+  children: ReactNode;
+  /** Defaults to a generic "this app" phrasing — pass the plugin's own name. */
+  surfaceName?: string;
+  /**
+   * The caller's own `isDeviceOnlyTierAvailable()` result (from
+   * `@sovereignfs/sdk/device-client`) — taken as a plain boolean rather than
+   * computed inside this component, so `@sovereignfs/ui` never depends on
+   * `@sovereignfs/sdk` (this package must stay usable standalone, outside the
+   * plugin runtime — RFC 0073).
+   */
+  available: boolean;
+  className?: string;
+}
+
+/**
+ * DeviceOnlyGate — blocks a `device-only`-tier plugin's content from
+ * rendering on a surface that cannot provide the durable, encrypted,
+ * device-auth-gated store that tier requires, showing an explanatory empty
+ * state instead of a broken screen (research 0012, epic tasks 2.33 + 3.36).
+ *
+ * A `device-only` plugin wraps its own root content in this the same way
+ * Console and Account wrap theirs in `OfflineGate` — an opt-in pattern each
+ * surface applies to itself, not a platform-level route gate. The launcher
+ * tile's own "Phone only" badge (`useOfflineTileState`) is advisory UI on top
+ * of this; this component is the actual gate, since a user can always reach a
+ * route directly (a bookmark, a deep link) without passing through the
+ * launcher tile at all.
+ *
+ * **Not a security boundary.** Availability here is a capability signal, not
+ * an authorization check — the real protection for `device-only` data is
+ * that it is encrypted and the key requires device auth to release (epic task
+ * 1.22), so it stays inaccessible regardless of whether this gate is present,
+ * bypassed, or simply never reached (e.g. a hand-crafted request against the
+ * plugin's own API routes).
+ */
+export function DeviceOnlyGate({
+  children,
+  surfaceName,
+  available,
+  className,
+}: DeviceOnlyGateProps) {
+  if (available) return <>{children}</>;
+
+  return (
+    <EmptyState
+      icon="smartphone"
+      heading="Phone only"
+      description={`${surfaceName ?? 'This app'} is only available on a phone with secure storage set up.`}
+      className={className}
+    />
+  );
+}

package/src/components/DeviceOnlyGate/__tests__/DeviceOnlyGate.test.tsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { DeviceOnlyGate } from '../DeviceOnlyGate';
+
+describe('DeviceOnlyGate', () => {
+  afterEach(cleanup);
+
+  it('renders children unchanged when available', () => {
+    render(
+      <DeviceOnlyGate available={true}>
+        <p>Wallet content</p>
+      </DeviceOnlyGate>,
+    );
+    expect(screen.getByText('Wallet content')).toBeDefined();
+  });
+
+  it('replaces children with an explanatory empty state when unavailable', () => {
+    render(
+      <DeviceOnlyGate available={false}>
+        <p>Wallet content</p>
+      </DeviceOnlyGate>,
+    );
+    expect(screen.queryByText('Wallet content')).toBeNull();
+    expect(screen.getByText('Phone only')).toBeDefined();
+  });
+
+  it('names the surface in the message when provided', () => {
+    render(
+      <DeviceOnlyGate available={false} surfaceName="Wallet">
+        <p>Wallet content</p>
+      </DeviceOnlyGate>,
+    );
+    expect(screen.getByText(/Wallet is only available on a phone/)).toBeDefined();
+  });
+
+  it('falls back to generic phrasing with no surface name', () => {
+    render(
+      <DeviceOnlyGate available={false}>
+        <p>Wallet content</p>
+      </DeviceOnlyGate>,
+    );
+    expect(screen.getByText(/This app is only available on a phone/)).toBeDefined();
+  });
+});