@sovereignfs/ui 0.54.0 → 0.89.1

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

@@ -1,146 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { ConfirmDialog } from '../ConfirmDialog';
-
-// jsdom does not implement HTMLDialogElement.showModal()/close() (a
-// long-standing, documented gap) — polyfill the minimum behavior the
-// component depends on: the `open` attribute reflecting visibility, and
-// close() dispatching the native 'close' event ConfirmDialog listens for.
-beforeEach(() => {
-  HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
-    this.setAttribute('open', '');
-  };
-  HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
-    this.removeAttribute('open');
-    this.dispatchEvent(new Event('close'));
-  };
-});
-
-describe('ConfirmDialog', () => {
-  afterEach(cleanup);
-
-  it('renders the title and message when open', () => {
-    render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove passkey"
-        message="This cannot be undone."
-      />,
-    );
-    expect(screen.getByText('Remove passkey')).toBeTruthy();
-    expect(screen.getByText('This cannot be undone.')).toBeTruthy();
-  });
-
-  it('renders rich message content', () => {
-    render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove plugin"
-        message={
-          <>
-            Remove <strong>Example</strong>?
-          </>
-        }
-      />,
-    );
-    expect(screen.getByText('Example').tagName).toBe('STRONG');
-  });
-
-  it('calls onClose on Cancel', () => {
-    const onClose = vi.fn();
-    render(
-      <ConfirmDialog open onClose={onClose} onConfirm={() => {}} title="Remove" message="Sure?" />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('calls onConfirm on the confirm action, without itself closing', () => {
-    const onConfirm = vi.fn();
-    const onClose = vi.fn();
-    render(
-      <ConfirmDialog
-        open
-        onClose={onClose}
-        onConfirm={onConfirm}
-        title="Remove"
-        message="Sure?"
-        confirmLabel="Remove"
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Remove' }));
-    expect(onConfirm).toHaveBeenCalledOnce();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('uses custom confirm/cancel labels', () => {
-    render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Sign out"
-        message="Sign out of this device?"
-        confirmLabel="Sign out"
-        cancelLabel="Stay signed in"
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Sign out' })).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Stay signed in' })).toBeTruthy();
-  });
-
-  it('disables both actions and shows the error slot when pending', () => {
-    render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove plugin"
-        message="Sure?"
-        confirmLabel="Removing…"
-        pending
-        error="Server error — try again."
-      />,
-    );
-    expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(
-      true,
-    );
-    expect((screen.getByRole('button', { name: 'Removing…' }) as HTMLButtonElement).disabled).toBe(
-      true,
-    );
-    expect(screen.getByText('Server error — try again.')).toBeTruthy();
-  });
-
-  it('renders a destructive confirm action distinctly from the default variant', () => {
-    const { rerender } = render(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove"
-        message="Sure?"
-        confirmLabel="Remove"
-      />,
-    );
-    const defaultClass = screen.getByRole('button', { name: 'Remove' }).className;
-
-    rerender(
-      <ConfirmDialog
-        open
-        onClose={() => {}}
-        onConfirm={() => {}}
-        title="Remove"
-        message="Sure?"
-        confirmLabel="Remove"
-        destructive
-      />,
-    );
-    const destructiveClass = screen.getByRole('button', { name: 'Remove' }).className;
-    expect(destructiveClass).not.toBe(defaultClass);
-  });
-});

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

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

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

@@ -1,87 +0,0 @@
-// @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

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

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

@@ -1,28 +0,0 @@
-.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

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