@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/DataTable/DataTable.tsx

@@ -1,154 +0,0 @@
-'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

@@ -1,123 +0,0 @@
-// @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,61 +0,0 @@
-/* DatePicker — trigger styled to match Input's height/border/radius/focus
- * 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;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sv-space-2);
-  width: 100%;
-  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;
-  color: var(--sv-color-text-primary);
-  background-color: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
-  border-radius: var(--sv-radius-md);
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-/* Same iOS auto-zoom fix as Input — see its own module.css for why. */
-@media (pointer: coarse) {
-  .trigger {
-    font-size: var(--sv-font-size-md);
-  }
-}
-
-.trigger:focus-visible {
-  outline: none;
-  border-color: var(--sv-color-accent);
-  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
-}
-
-.trigger:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.triggerValue {
-  color: var(--sv-color-text-primary);
-}
-
-.triggerPlaceholder {
-  color: var(--sv-color-text-muted);
-}
-
-.popoverBody {
-  padding: var(--sv-space-3);
-}
-
-.drawerBody {
-  padding: var(--sv-space-4);
-  padding-bottom: max(var(--sv-space-4), env(safe-area-inset-bottom));
-}

package/src/components/DatePicker/DatePicker.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useIsMobile } from '../../hooks';
-import { Calendar } from '../Calendar/Calendar';
-import { formatDateShort } from '../Calendar/dateUtils';
-import { Drawer } from '../Drawer/Drawer';
-import { Icon } from '../Icon/Icon';
-import { Popover } from '../Popover/Popover';
-import styles from './DatePicker.module.css';
-
-export interface DatePickerProps {
-  value: Date | null;
-  onChange: (date: Date) => void;
-  minDate?: Date;
-  maxDate?: Date;
-  placeholder?: string;
-  'aria-label': string;
-  disabled?: boolean;
-}
-
-// Wide enough for the 7-column Calendar grid (44px touch-target cells) plus
-// its own padding, without being so wide it looks odd as a Popover panel.
-const POPOVER_WIDTH = 320;
-
-/**
- * DatePicker — a form field pairing a compact trigger with `Calendar`:
- * `Popover` on desktop, a bottom-sheet `Drawer` on mobile (the platform's
- * standard adaptive-surface pattern, matching `Menu`). Date-only (decision
- * D6 in the mobile design-system plan) — time and range selection are future
- * scope; recurrence UI stays plugin-side.
- *
- * Unlike `Menu`, the trigger is built in rather than supplied by the caller
- * — a date picker is a form field (consistent with `Input`/`Select`), not an
- * arbitrary action-menu trigger.
- */
-export function DatePicker({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  placeholder = 'Select date',
-  'aria-label': ariaLabel,
-  disabled = false,
-}: DatePickerProps) {
-  const [open, setOpen] = useState(false);
-  const isMobile = useIsMobile();
-
-  function handleSelect(date: Date) {
-    onChange(date);
-    setOpen(false);
-  }
-
-  const trigger = (
-    <button
-      type="button"
-      className={styles.trigger}
-      disabled={disabled}
-      aria-label={ariaLabel}
-      aria-haspopup="dialog"
-      aria-expanded={open}
-      onClick={() => setOpen((o) => !o)}
-    >
-      <span className={value ? styles.triggerValue : styles.triggerPlaceholder}>
-        {value ? formatDateShort(value) : placeholder}
-      </span>
-      <Icon name="calendar" size="sm" aria-hidden />
-    </button>
-  );
-
-  const calendar = (
-    <Calendar
-      value={value}
-      onChange={handleSelect}
-      minDate={minDate}
-      maxDate={maxDate}
-      aria-label={ariaLabel}
-    />
-  );
-
-  if (isMobile) {
-    return (
-      <>
-        {trigger}
-        <Drawer open={open} onClose={() => setOpen(false)} aria-label={ariaLabel}>
-          <div className={styles.drawerBody}>{calendar}</div>
-        </Drawer>
-      </>
-    );
-  }
-
-  return (
-    <Popover
-      trigger={trigger}
-      open={open}
-      onClose={() => setOpen(false)}
-      aria-label={ariaLabel}
-      width={POPOVER_WIDTH}
-    >
-      <div className={styles.popoverBody}>{calendar}</div>
-    </Popover>
-  );
-}

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

@@ -1,89 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { DatePicker } from '../DatePicker';
-
-let mobile = false;
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      // useIsMobile's query is '(max-width: ...)'; Drawer's own
-      // prefers-reduced-motion check defaults to false — see Menu's
-      // identical test setup for why.
-      matches: query.includes('max-width') ? mobile : false,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-const JAN_15_2026 = new Date(2026, 0, 15);
-
-describe('DatePicker', () => {
-  beforeEach(() => {
-    mobile = false;
-    installMatchMedia();
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('shows the placeholder when no date is selected', () => {
-    render(
-      <DatePicker
-        value={null}
-        onChange={() => {}}
-        placeholder="Pick a date"
-        aria-label="Due date"
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Due date' }).textContent).toContain('Pick a date');
-  });
-
-  it('shows the formatted value when a date is selected', () => {
-    render(<DatePicker value={JAN_15_2026} onChange={() => {}} aria-label="Due date" />);
-    expect(screen.getByRole('button', { name: 'Due date' }).textContent).toContain('Jan 15, 2026');
-  });
-
-  it('opens the calendar as a Popover on desktop', () => {
-    render(<DatePicker value={null} onChange={() => {}} aria-label="Due date" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Due date' }));
-    const panel = screen.getByRole('dialog', { name: 'Due date' });
-    expect(panel.getAttribute('aria-modal')).toBe('false');
-    expect(screen.getByRole('grid')).toBeTruthy();
-  });
-
-  it('opens the calendar as a Drawer on mobile', () => {
-    mobile = true;
-    installMatchMedia();
-    render(<DatePicker value={null} onChange={() => {}} aria-label="Due date" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Due date' }));
-    const panel = screen.getByRole('dialog', { name: 'Due date' });
-    expect(panel.getAttribute('aria-modal')).toBe('true');
-    expect(screen.getByRole('grid')).toBeTruthy();
-  });
-
-  it('calls onChange and closes the picker when a date is selected', () => {
-    const onChange = vi.fn();
-    render(<DatePicker value={JAN_15_2026} onChange={onChange} aria-label="Due date" />);
-    fireEvent.click(screen.getByRole('button', { name: 'Due date' }));
-    fireEvent.click(screen.getByRole('button', { name: /January 20, 2026/ }));
-    expect(onChange).toHaveBeenCalledOnce();
-    const called = onChange.mock.calls[0]?.[0] as Date;
-    expect(called.getDate()).toBe(20);
-    expect(screen.queryByRole('grid')).toBeNull();
-  });
-
-  it('disables the trigger when disabled', () => {
-    render(<DatePicker value={null} onChange={() => {}} aria-label="Due date" disabled />);
-    expect((screen.getByRole('button', { name: 'Due date' }) as HTMLButtonElement).disabled).toBe(
-      true,
-    );
-  });
-});

package/src/components/DeviceOnlyGate/DeviceOnlyGate.tsx

@@ -1,58 +0,0 @@
-'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

@@ -1,45 +0,0 @@
-// @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();
-  });
-});