@sovereignfs/ui 0.40.0 → 0.45.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/CurrencyInput/CurrencyInput.stories.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CurrencyInput } from './CurrencyInput';
+
+const meta = {
+  title: 'Components/CurrencyInput',
+  component: CurrencyInput,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Decimal amount entry that reports its value as integer cents, matching the "amounts are always smallest-unit integers" data-model convention. Preserves in-progress typing (e.g. a trailing decimal point) instead of reformatting on every keystroke.',
+      },
+    },
+  },
+  args: {
+    valueCents: null,
+    onValueChange: () => {},
+  },
+} satisfies Meta<typeof CurrencyInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledCurrencyInput({ initialCents }: { initialCents: number | null }) {
+  const [cents, setCents] = useState<number | null>(initialCents);
+  return (
+    <CurrencyInput
+      valueCents={cents}
+      onValueChange={setCents}
+      placeholder="0.00"
+      aria-label="Amount"
+    />
+  );
+}
+
+export const Empty: Story = {
+  render: () => <ControlledCurrencyInput initialCents={null} />,
+};
+
+export const Prefilled: Story = {
+  render: () => <ControlledCurrencyInput initialCents={4250} />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <CurrencyInput valueCents={1000} onValueChange={() => {}} aria-label="Amount" disabled />
+  ),
+};

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+import { Input, type InputProps } from '../Input/Input';
+
+export interface CurrencyInputProps extends Omit<
+  InputProps,
+  'value' | 'onChange' | 'type' | 'inputMode'
+> {
+  /** Smallest currency unit (cents) — never a float. Null when the field is empty or unparsable. */
+  valueCents: number | null;
+  onValueChange: (cents: number | null) => void;
+}
+
+function centsToText(cents: number): string {
+  return (cents / 100).toFixed(2);
+}
+
+function textToCents(text: string): number | null {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed)) return null;
+  return Math.round(parsed * 100);
+}
+
+/**
+ * CurrencyInput — decimal amount entry that reports its value as integer
+ * cents, matching Sovereign's "amounts are always smallest-unit integers"
+ * data-model convention (never a float in application state).
+ *
+ * Keeps its own text buffer rather than deriving display text from
+ * `valueCents` on every keystroke — reformatting mid-type (e.g. "12." → the
+ * trailing decimal point) would fight the user's cursor. It only
+ * re-syncs from `valueCents` when the prop changes to something the current
+ * text doesn't already represent (an external reset/prefill), so typing
+ * remains uninterrupted while the parsed amount stays in lockstep with the
+ * parent's state.
+ */
+export function CurrencyInput({ valueCents, onValueChange, ...rest }: CurrencyInputProps) {
+  const [text, setText] = useState(() => (valueCents != null ? centsToText(valueCents) : ''));
+
+  if (textToCents(text) !== valueCents) {
+    setText(valueCents != null ? centsToText(valueCents) : '');
+  }
+
+  return (
+    <Input
+      {...rest}
+      type="text"
+      inputMode="decimal"
+      value={text}
+      onChange={(e) => {
+        const next = e.currentTarget.value;
+        setText(next);
+        onValueChange(textToCents(next));
+      }}
+    />
+  );
+}

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/Dialog/Dialog.module.css

@@ -79,6 +79,9 @@
   }
 }
 
+/* Sizing audit: reviewed padding/radius against this scale's other
+   surfaces. --sv-radius-lg (shared with Card via .panel below) left
+   unchanged for the same blast-radius reason as Card.module.css. */
 .content {
   flex: 1 1 auto;
   overflow-y: auto;

package/src/components/HoverCard/HoverCard.module.css

@@ -0,0 +1,3 @@
+.root {
+  display: inline-flex;
+}

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HoverCard } from './HoverCard';
+import { Avatar } from '../Avatar/Avatar';
+
+const meta = {
+  title: 'Components/HoverCard',
+  component: HoverCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Hover-triggered popover on desktop, tap-to-toggle on touch. Built on Popover for positioning/collision detection — this only adds hover-intent timing and the touch fallback. Opens on keyboard focus too.',
+      },
+    },
+  },
+  args: { trigger: <span />, children: null, 'aria-label': 'Preview' },
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: () => (
+    <HoverCard
+      aria-label="User preview"
+      trigger={
+        <button
+          type="button"
+          style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
+        >
+          <Avatar name="Jane Smith" size="sm" />
+        </button>
+      }
+    >
+      <div style={{ padding: 'var(--sv-space-3)', fontSize: 14 }}>
+        <div style={{ fontWeight: 600 }}>Jane Smith</div>
+        <div style={{ color: 'var(--sv-color-text-muted)' }}>jane@example.com</div>
+      </div>
+    </HoverCard>
+  ),
+};
+
+export const WithLink: Story = {
+  render: () => (
+    <p style={{ fontSize: 14 }}>
+      Assigned to{' '}
+      <HoverCard
+        aria-label="Assignee preview"
+        trigger={
+          <a href="/console/users/jane-smith" style={{ color: 'var(--sv-color-text-primary)' }}>
+            Jane Smith
+          </a>
+        }
+      >
+        <div style={{ padding: 'var(--sv-space-3)', fontSize: 14 }}>
+          <div style={{ fontWeight: 600 }}>Jane Smith</div>
+          <div style={{ color: 'var(--sv-color-text-muted)' }}>12 tasks completed this month</div>
+        </div>
+      </HoverCard>
+      .
+    </p>
+  ),
+};