@sovereignfs/ui 0.41.0 → 0.45.0

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

@@ -0,0 +1,162 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { Command, type CommandItem } from '../Command';
+
+// Command renders inside Dialog, whose exit animation reads
+// prefers-reduced-motion via matchMedia, which jsdom does not implement —
+// see Dialog.test.tsx's identical setup.
+function installMatchMedia() {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+}
+
+beforeEach(installMatchMedia);
+afterEach(() => {
+  vi.unstubAllGlobals();
+  cleanup();
+});
+
+const items: CommandItem[] = [
+  { id: 'new', label: 'New conversation', onSelect: vi.fn(), group: 'Actions' },
+  {
+    id: 'export',
+    label: 'Export chat',
+    onSelect: vi.fn(),
+    group: 'Actions',
+    keywords: 'download save',
+  },
+  { id: 'profile', label: 'Go to profile', onSelect: vi.fn(), group: 'Navigation' },
+];
+
+describe('Command', () => {
+  it('renders nothing when closed', () => {
+    render(<Command open={false} onClose={vi.fn()} items={items} />);
+    expect(screen.queryByRole('combobox')).toBeNull();
+  });
+
+  it('lists all items when the query is empty', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    expect(screen.getAllByRole('option')).toHaveLength(3);
+  });
+
+  it('filters by label', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'profile' } });
+    expect(screen.getAllByRole('option')).toHaveLength(1);
+    expect(screen.getByRole('option', { name: 'Go to profile' })).toBeDefined();
+  });
+
+  it('filters by keywords in addition to the label', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'download' } });
+    expect(screen.getAllByRole('option')).toHaveLength(1);
+    expect(screen.getByRole('option', { name: 'Export chat' })).toBeDefined();
+  });
+
+  it('shows an empty state when nothing matches', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'zzz' } });
+    expect(screen.queryAllByRole('option')).toHaveLength(0);
+    expect(screen.getByText('No matching commands.')).toBeDefined();
+  });
+
+  it('renders group headers', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    expect(screen.getByText('Actions')).toBeDefined();
+    expect(screen.getByText('Navigation')).toBeDefined();
+  });
+
+  it('highlights the first item by default', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    expect(
+      screen.getByRole('option', { name: 'New conversation' }).getAttribute('aria-selected'),
+    ).toBe('true');
+  });
+
+  it('ArrowDown/ArrowUp move the highlighted item', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    const input = screen.getByRole('combobox');
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(screen.getByRole('option', { name: 'Export chat' }).getAttribute('aria-selected')).toBe(
+      'true',
+    );
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    expect(
+      screen.getByRole('option', { name: 'New conversation' }).getAttribute('aria-selected'),
+    ).toBe('true');
+  });
+
+  it('ArrowDown does not move past the last item', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    const input = screen.getByRole('combobox');
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(
+      screen.getByRole('option', { name: 'Go to profile' }).getAttribute('aria-selected'),
+    ).toBe('true');
+  });
+
+  it('resets the highlighted index when the query changes', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    const input = screen.getByRole('combobox');
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.change(input, { target: { value: 'e' } });
+    const [firstMatch] = screen.getAllByRole('option');
+    expect(firstMatch?.getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('Enter selects the highlighted item and closes', () => {
+    const onClose = vi.fn();
+    const onSelect = vi.fn();
+    const localItems: CommandItem[] = [{ id: 'a', label: 'Alpha', onSelect }];
+    render(<Command open onClose={onClose} items={localItems} />);
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' });
+    expect(onSelect).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('clicking an item selects it and closes', () => {
+    const onClose = vi.fn();
+    const onSelect = vi.fn();
+    const localItems: CommandItem[] = [{ id: 'a', label: 'Alpha', onSelect }];
+    render(<Command open onClose={onClose} items={localItems} />);
+    fireEvent.click(screen.getByRole('option', { name: 'Alpha' }));
+    expect(onSelect).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('sets aria-activedescendant to the highlighted option', () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    const input = screen.getByRole('combobox');
+    const firstOption = screen.getByRole('option', { name: 'New conversation' });
+    expect(input.getAttribute('aria-activedescendant')).toBe(firstOption.id);
+  });
+
+  it('resets the query each time it opens', () => {
+    const { rerender } = render(<Command open onClose={vi.fn()} items={items} />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'profile' } });
+    rerender(<Command open={false} onClose={vi.fn()} items={items} />);
+    rerender(<Command open onClose={vi.fn()} items={items} />);
+    expect(screen.getByRole('combobox').getAttribute('value')).toBe('');
+  });
+
+  it('focuses the input on open', async () => {
+    render(<Command open onClose={vi.fn()} items={items} />);
+    await act(async () => {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+    expect(document.activeElement).toBe(screen.getByRole('combobox'));
+  });
+});

package/src/components/ConfirmDialog/ConfirmDialog.module.css

@@ -65,7 +65,11 @@
   align-items: center;
   justify-content: center;
   gap: var(--sv-space-2);
-  padding: 13px var(--sv-space-4);
+  /* Kept in sync with Button's .md rule by hand (see design-system.md
+     "Button and Checkbox touch ergonomics" — not a literal reuse of
+     Button). Matches Button's md padding, updated alongside it (10px,
+     36px rendered height). */
+  padding: 10px var(--sv-space-4);
   border: 1px solid transparent;
   border-radius: var(--sv-radius-md);
   font-family: var(--sv-font-family);

package/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ContextMenu } from './ContextMenu';
+
+const meta = {
+  title: 'Components/ContextMenu',
+  component: ContextMenu,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "Right-click menu on desktop, long-press on touch. Desktop positioning reuses Popover's existing collision detection anchored to the click point; touch opens the same items in a Drawer bottom sheet — a floating panel at a touch point isn't a pattern touch interfaces have.",
+      },
+    },
+  },
+  args: {
+    children: <span />,
+    items: [
+      { label: 'Rename', onSelect: () => {} },
+      { label: 'Duplicate', onSelect: () => {} },
+      { type: 'separator' },
+      { label: 'Delete', destructive: true, onSelect: () => {} },
+    ],
+    'aria-label': 'Row actions',
+  },
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: (args) => (
+    <ContextMenu {...args}>
+      <div
+        style={{
+          width: 240,
+          padding: 'var(--sv-space-4)',
+          border: '1px dashed var(--sv-color-border-strong)',
+          borderRadius: 'var(--sv-radius-md)',
+          textAlign: 'center',
+          fontSize: 14,
+          color: 'var(--sv-color-text-muted)',
+        }}
+      >
+        Right-click here (or long-press on touch)
+      </div>
+    </ContextMenu>
+  ),
+};
+
+export const WithIconsAndChecked: Story = {
+  args: {
+    items: [
+      { type: 'label', label: 'Sort by' },
+      { label: 'Name', checked: true, onSelect: () => {} },
+      { label: 'Date modified', checked: false, onSelect: () => {} },
+      { type: 'separator' },
+      { label: 'Rename', icon: 'pencil', onSelect: () => {} },
+      { label: 'Delete', icon: 'trash-2', destructive: true, onSelect: () => {} },
+    ],
+  },
+  render: (args) => (
+    <ContextMenu {...args}>
+      <div
+        style={{
+          width: 240,
+          padding: 'var(--sv-space-4)',
+          border: '1px dashed var(--sv-color-border-strong)',
+          borderRadius: 'var(--sv-radius-md)',
+          textAlign: 'center',
+          fontSize: 14,
+          color: 'var(--sv-color-text-muted)',
+        }}
+      >
+        Right-click here
+      </div>
+    </ContextMenu>
+  ),
+};

package/src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { cloneElement, useState } from 'react';
+import type { ReactElement } from 'react';
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import { useIsMobile, useLongPress } from '../../hooks';
+import { Popover } from '../Popover/Popover';
+import { Drawer } from '../Drawer/Drawer';
+import { MenuEntries, type MenuEntry, type MenuItem } from '../Menu/Menu';
+
+export interface ContextMenuProps {
+  /** The element that gets right-click (desktop) / long-press (touch)
+   * behavior — cloned with the trigger handlers, rendered as-is otherwise.
+   * Typed with `<any>` props (not a bare `ReactElement`, whose implicit
+   * `unknown` props type makes `cloneElement` reject *both* branches of
+   * the long-press/onContextMenu union below — an interface value like
+   * `LongPressHandlers` isn't assignable to an indexed props type without
+   * its own index signature) — the standard, narrowly-scoped escape hatch
+   * for "clone an arbitrary child with props not known ahead of time". */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- see comment above
+  children: ReactElement<any>;
+  items: MenuEntry[];
+  'aria-label': string;
+}
+
+/**
+ * ContextMenu — right-click menu on desktop, long-press on touch.
+ *
+ * Desktop positioning reuses `Popover`'s existing collision-detection logic
+ * rather than reimplementing it: the panel is wrapped in a zero-size,
+ * `position: fixed` anchor placed at the click coordinates, so `Popover`
+ * measures and flips against *that* point exactly as it would a normal
+ * trigger element.
+ *
+ * Touch uses `useLongPress` (which already handles the OS's own long-press
+ * callout/context-menu suppression) and opens the same items in a `Drawer`
+ * bottom sheet — the same adaptive-surface split `Menu` already uses,
+ * because a floating panel positioned at a touch point isn't a pattern
+ * touch interfaces have in the first place.
+ */
+export function ContextMenu({ children, items, 'aria-label': ariaLabel }: ContextMenuProps) {
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+  const [point, setPoint] = useState({ x: 0, y: 0 });
+
+  const longPressHandlers = useLongPress({
+    onLongPress: () => setOpen(true),
+    disabled: !isMobile,
+  });
+
+  function handleContextMenu(e: ReactMouseEvent) {
+    e.preventDefault();
+    setPoint({ x: e.clientX, y: e.clientY });
+    setOpen(true);
+  }
+
+  const wrappedChild = cloneElement(
+    children,
+    isMobile ? longPressHandlers : { onContextMenu: handleContextMenu },
+  );
+
+  const list = (
+    <MenuEntries
+      items={items}
+      onSelect={(entry: MenuItem) => {
+        setOpen(false);
+        entry.onSelect();
+      }}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {wrappedChild}
+        <Drawer open={open} onClose={() => setOpen(false)} aria-label={ariaLabel}>
+          {list}
+        </Drawer>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {wrappedChild}
+      {open && (
+        <div style={{ position: 'fixed', left: point.x, top: point.y, width: 0, height: 0 }}>
+          <Popover
+            trigger={<span />}
+            open={open}
+            onClose={() => setOpen(false)}
+            aria-label={ariaLabel}
+          >
+            {list}
+          </Popover>
+        </div>
+      )}
+    </>
+  );
+}

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"
+    />
+  ),
+};