@cosxai/ui 1.0.0-alpha.1 → 1.0.0-alpha.2

package/src/components/forms.test.tsx

@@ -1,280 +0,0 @@
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useState } from 'react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { axe } from 'vitest-axe';
-
-import { a11y } from '../../test/a11y';
-import { Checkbox } from './Checkbox';
-import { Field } from './Field';
-import { Input } from './Input';
-import { RadioGroup } from './Radio';
-import { Select, type SelectOption } from './Select';
-import { Switch } from './Switch';
-import { Textarea } from './Textarea';
-
-
-describe('Field, Input, Textarea', () => {
-  it('ties label, hint and error to the input', () => {
-    render(<Input label="Email" hint="We send the code here" />);
-    const input = screen.getByLabelText('Email');
-    expect(input).toHaveAccessibleDescription('We send the code here');
-    expect(input).not.toHaveAttribute('aria-invalid');
-  });
-
-  it('an error replaces the hint and sets aria-invalid', () => {
-    render(<Input label="Code" hint="6 digits" error="That code has expired. Send a new one." />);
-    const input = screen.getByLabelText('Code');
-    expect(input).toHaveAttribute('aria-invalid', 'true');
-    expect(input).toHaveAccessibleDescription('That code has expired. Send a new one.');
-    expect(screen.queryByText('6 digits')).toBeNull();
-  });
-
-  it('a Field wraps any control, including a Textarea', () => {
-    render(
-      <Field label="Note" error="Say what changed.">
-        <Textarea />
-      </Field>,
-    );
-    const ta = screen.getByLabelText('Note');
-    expect(ta.tagName).toBe('TEXTAREA');
-    expect(ta).toHaveAttribute('aria-invalid', 'true');
-  });
-
-  it('keeps prefix and suffix inside the frame and types', async () => {
-    const onChange = vi.fn();
-    render(<Input label="Amount" prefix="£" suffix="GBP" onChange={onChange} />);
-    await userEvent.type(screen.getByLabelText('Amount'), '12');
-    expect(onChange).toHaveBeenCalledTimes(2);
-    expect(screen.getByText('£')).toBeInTheDocument();
-  });
-
-  it('disabled and read-only are native', () => {
-    render(
-      <>
-        <Input label="A" disabled />
-        <Input label="B" readOnly value="x" />
-      </>,
-    );
-    expect(screen.getByLabelText('A')).toBeDisabled();
-    expect(screen.getByLabelText('B')).toHaveAttribute('readonly');
-  });
-
-  it('passes axe', async () => {
-    const { container } = render(
-      <div>
-        <Input label="Email" hint="Work address" />
-        <Input label="Code" error="That code has expired." />
-        <Textarea label="Note" />
-      </div>,
-    );
-    expect(await a11y(container)).toHaveNoViolations();
-  });
-});
-
-const PEOPLE: SelectOption[] = [
-  { value: 'hv', label: 'Harbour Ventures', meta: '3 projects', group: 'Customers' },
-  { value: 'hw', label: 'Hardwick Family Office', group: 'Customers' },
-  { value: 'kb', label: 'Kowloon Bay', meta: 'Archived', group: 'Customers', disabled: true },
-  { value: 'lw', label: 'Li Wei', group: 'Staff' },
-  { value: 'am', label: 'Anna Kowalski', group: 'Staff' },
-];
-
-function Controlled(props: { options?: SelectOption[] | string[]; searchable?: boolean }) {
-  const [v, setV] = useState<string | undefined>(undefined);
-  return (
-    <Field label="Customer">
-      <Select options={props.options ?? PEOPLE} value={v} onChange={setV} searchable={props.searchable} />
-    </Field>
-  );
-}
-
-describe('Select', () => {
-  it('is a labelled combobox that opens a listbox with options', async () => {
-    render(<Controlled />);
-    const trigger = screen.getByRole('combobox', { name: 'Customer' });
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    await userEvent.click(trigger);
-    const list = await screen.findByRole('listbox');
-    expect(within(list).getAllByRole('option')).toHaveLength(5);
-    expect(within(list).getByRole('group', { name: 'Staff' })).toBeInTheDocument();
-  });
-
-  it('keyboard: arrows skip disabled rows, Home/End jump, Enter chooses', async () => {
-    const user = userEvent.setup();
-    render(<Controlled />);
-    const trigger = screen.getByRole('combobox', { name: 'Customer' });
-    trigger.focus();
-    await user.keyboard('{ArrowDown}');
-    const list = await screen.findByRole('listbox');
-    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Harbour Ventures, 3 projects' }).id);
-    await user.keyboard('{ArrowDown}{ArrowDown}');
-    // Kowloon Bay (disabled) is skipped
-    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Li Wei' }).id);
-    await user.keyboard('{End}');
-    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Anna Kowalski' }).id);
-    await user.keyboard('{Home}{Enter}');
-    expect(trigger).toHaveTextContent('Harbour Ventures');
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('a letter jumps to it (closed and open)', async () => {
-    const user = userEvent.setup();
-    render(<Controlled />);
-    const trigger = screen.getByRole('combobox', { name: 'Customer' });
-    trigger.focus();
-    await user.keyboard('l');
-    const list = await screen.findByRole('listbox');
-    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Li Wei' }).id);
-    await user.keyboard('i'); // fast typing matches a prefix: "li"
-    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Li Wei' }).id);
-    const later = Date.now() + 1000; // a pause starts a new search
-    const spy = vi.spyOn(Date, 'now').mockReturnValue(later);
-    await user.keyboard('a');
-    expect(list).toHaveAttribute('aria-activedescendant', screen.getByRole('option', { name: 'Anna Kowalski' }).id);
-    spy.mockRestore();
-  });
-
-  it('Escape closes without choosing', async () => {
-    const user = userEvent.setup();
-    render(<Controlled />);
-    const trigger = screen.getByRole('combobox', { name: 'Customer' });
-    await user.click(trigger);
-    await screen.findByRole('listbox');
-    await user.keyboard('{Escape}');
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    expect(trigger).toHaveTextContent('Choose one');
-  });
-
-  it('disabled rows stay visible and cannot be chosen', async () => {
-    const user = userEvent.setup();
-    render(<Controlled />);
-    await user.click(screen.getByRole('combobox', { name: 'Customer' }));
-    const row = await screen.findByRole('option', { name: 'Kowloon Bay, Archived' });
-    expect(row).toHaveAttribute('aria-disabled', 'true');
-    await user.click(row);
-    expect(screen.getByRole('combobox', { name: 'Customer' })).toHaveTextContent('Choose one');
-  });
-
-  it('turns the filter on above 8 options and filters', async () => {
-    const user = userEvent.setup();
-    const many = ['Passport', 'Visa', 'BRP', 'Payslip', 'P60', 'Bank statement', 'Tenancy', 'Council tax', 'Utility bill'];
-    render(<Controlled options={many} />);
-    await user.click(screen.getByRole('combobox', { name: 'Customer' }));
-    const filter = await screen.findByRole('combobox', { name: 'Filter' });
-    expect(filter).toHaveFocus();
-    await user.type(filter, 'pa');
-    expect(within(screen.getByRole('listbox')).getAllByRole('option').map((o) => o.textContent)).toEqual(['Passport', 'Payslip']);
-    await user.keyboard('{ArrowDown}{Enter}');
-    expect(screen.getByRole('combobox', { name: 'Customer' })).toHaveTextContent('Passport');
-  });
-
-  it('shows the empty text when nothing matches', async () => {
-    const user = userEvent.setup();
-    render(<Controlled searchable />);
-    await user.click(screen.getByRole('combobox', { name: 'Customer' }));
-    await user.type(await screen.findByRole('combobox', { name: 'Filter' }), 'zzz');
-    expect(screen.getByText('Nothing matches that.')).toBeInTheDocument();
-  });
-
-  it('is invalid and described inside a Field with an error', () => {
-    render(
-      <Field label="Customer" error="Choose who this is for.">
-        <Select options={PEOPLE} />
-      </Field>,
-    );
-    const trigger = screen.getByRole('combobox', { name: 'Customer' });
-    expect(trigger).toHaveAttribute('aria-invalid', 'true');
-    expect(trigger).toHaveAccessibleDescription('Choose who this is for.');
-  });
-
-  it('passes axe (closed and open)', async () => {
-    const user = userEvent.setup();
-    const { container } = render(<Controlled />);
-    expect(await a11y(container)).toHaveNoViolations();
-    await user.click(screen.getByRole('combobox', { name: 'Customer' }));
-    await screen.findByRole('listbox');
-    // the open menu lives in a portal on <body>; 'region' is a page-level rule
-    const open = await axe(document.body, { rules: { 'color-contrast': { enabled: false }, region: { enabled: false } } });
-    expect(open).toHaveNoViolations();
-  });
-});
-
-describe('Checkbox', () => {
-  it('the label toggles; space toggles', async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<Checkbox label="Can comment" description="Recipients can leave comments" onChange={onChange} />);
-    const box = screen.getByRole('checkbox', { name: 'Can comment' });
-    expect(box).toHaveAccessibleDescription('Recipients can leave comments');
-    await user.click(screen.getByText('Can comment'));
-    expect(onChange).toHaveBeenLastCalledWith(true);
-    box.focus();
-    await user.keyboard(' ');
-    expect(onChange).toHaveBeenCalledTimes(2);
-  });
-
-  it('shows the mixed state', () => {
-    render(<Checkbox label="All documents" checked="indeterminate" />);
-    expect(screen.getByRole('checkbox', { name: 'All documents' })).toHaveAttribute('aria-checked', 'mixed');
-  });
-
-  it('disabled explains why and does not toggle', async () => {
-    const onChange = vi.fn();
-    render(<Checkbox label="Can forward" description="Turned off by the upstream share" disabled onChange={onChange} />);
-    const box = screen.getByRole('checkbox', { name: 'Can forward' });
-    expect(box).toBeDisabled();
-    expect(box).toHaveAccessibleDescription('Turned off by the upstream share');
-    await userEvent.click(screen.getByText('Can forward'));
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});
-
-describe('RadioGroup', () => {
-  it('arrow keys move and choose', async () => {
-    const user = userEvent.setup();
-    function R() {
-      const [v, setV] = useState('view');
-      return <RadioGroup aria-label="Access" options={[{ value: 'view', label: 'View' }, { value: 'comment', label: 'Comment' }, { value: 'edit', label: 'Edit' }]} value={v} onChange={setV} />;
-    }
-    render(<R />);
-    const view = screen.getByRole('radio', { name: 'View' });
-    expect(view).toBeChecked();
-    view.focus();
-    // Radix moves focus on a timer and selects while the arrow is held —
-    // hold it like a real key press.
-    await user.keyboard('{ArrowDown>}');
-    await new Promise((r) => setTimeout(r, 0));
-    await user.keyboard('{/ArrowDown}');
-    expect(screen.getByRole('radio', { name: 'Comment' })).toBeChecked();
-    expect(screen.getByRole('radio', { name: 'Comment' })).toHaveFocus();
-  });
-});
-
-describe('Switch', () => {
-  it('is a switch; space and the label flip it at once', async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<Switch label="Require two-step verification" description="Including customers" onChange={onChange} />);
-    const sw = screen.getByRole('switch', { name: 'Require two-step verification' });
-    expect(sw).toHaveAttribute('aria-checked', 'false');
-    expect(sw).toHaveAccessibleDescription('Including customers');
-    sw.focus();
-    await user.keyboard(' ');
-    expect(onChange).toHaveBeenLastCalledWith(true);
-    await user.click(screen.getByText('Require two-step verification'));
-    expect(onChange).toHaveBeenCalledTimes(2);
-  });
-
-  it('checkbox, radio and switch pass axe', async () => {
-    const { container } = render(
-      <div>
-        <Checkbox label="Can comment" description="Recipients can leave comments" checked />
-        <RadioGroup aria-label="Access" options={['View', 'Comment']} value="View" />
-        <Switch label="Organise new documents" checked />
-      </div>,
-    );
-    expect(await a11y(container)).toHaveNoViolations();
-  });
-});

package/src/components/overlays.test.tsx

@@ -1,245 +0,0 @@
-import { act, render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useState } from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import { a11y } from '../../test/a11y';
-import { Button } from './Button';
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from './Dialog';
-import { Table, type TableSort } from './Table';
-import { TabPanel, Tabs } from './Tabs';
-import { Toaster, toast } from './Toast';
-import { Tooltip } from './Tooltip';
-
-
-describe('Tabs', () => {
-  const items = [
-    { value: 'overview', label: 'Overview' },
-    { value: 'documents', label: 'Documents', count: 3 },
-    { value: 'parties', label: 'Parties', count: 0 },
-  ];
-
-  it('arrow keys move and aria-selected follows; onChange reports the value', async () => {
-    const onChange = vi.fn();
-    render(
-      <Tabs items={items} defaultValue="overview" onChange={onChange} label="Project">
-        <TabPanel value="overview">Overview panel</TabPanel>
-        <TabPanel value="documents">Documents panel</TabPanel>
-        <TabPanel value="parties">Parties panel</TabPanel>
-      </Tabs>,
-    );
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
-    await userEvent.click(tabs[0]!);
-    await userEvent.keyboard('{ArrowRight}');
-    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
-    expect(onChange).toHaveBeenLastCalledWith('documents');
-    expect(screen.getByRole('tabpanel')).toHaveTextContent('Documents panel');
-    await userEvent.keyboard('{End}');
-    expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
-  });
-
-  it('count shows as a badge, hidden at zero', () => {
-    render(<Tabs items={items} defaultValue="overview" label="Project" />);
-    expect(screen.getByRole('tab', { name: 'Documents 3' })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: 'Parties' })).toBeInTheDocument();
-  });
-
-  it('passes axe (both variants)', async () => {
-    const { container } = render(
-      <div>
-        <Tabs items={items} defaultValue="overview" label="Underline">
-          <TabPanel value="overview">a</TabPanel>
-        </Tabs>
-        <Tabs variant="pills" items={items} defaultValue="documents" label="Pills">
-          <TabPanel value="documents">b</TabPanel>
-        </Tabs>
-      </div>,
-    );
-    expect(await a11y(container)).toHaveNoViolations();
-  });
-});
-
-describe('Dialog', () => {
-  function Revoke() {
-    return (
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="secondary">Revoke share</Button>
-        </DialogTrigger>
-        <DialogContent
-          size="sm"
-          title="Revoke this share?"
-          description="Anna loses access now."
-          footer={
-            <>
-              <DialogClose asChild>
-                <Button variant="secondary">Cancel</Button>
-              </DialogClose>
-              <Button variant="danger">Revoke share</Button>
-            </>
-          }
-        />
-      </Dialog>
-    );
-  }
-
-  it('is labelled by its title and described by its consequence', async () => {
-    render(<Revoke />);
-    await userEvent.click(screen.getByRole('button', { name: 'Revoke share' }));
-    const dialog = screen.getByRole('dialog', { name: 'Revoke this share?' });
-    expect(dialog).toHaveAccessibleDescription('Anna loses access now.');
-  });
-
-  it('traps focus, closes on Esc and returns focus to the trigger', async () => {
-    render(<Revoke />);
-    const trigger = screen.getByRole('button', { name: 'Revoke share' });
-    await userEvent.click(trigger);
-    const dialog = screen.getByRole('dialog');
-    expect(dialog.contains(document.activeElement)).toBe(true);
-    for (let i = 0; i < 6; i++) {
-      await userEvent.tab();
-      expect(dialog.contains(document.activeElement)).toBe(true);
-    }
-    await userEvent.keyboard('{Escape}');
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    expect(trigger).toHaveFocus();
-  });
-
-  it('passes axe while open', async () => {
-    render(<Revoke />);
-    await userEvent.click(screen.getByRole('button', { name: 'Revoke share' }));
-    expect(await a11y(document.body)).toHaveNoViolations();
-  });
-});
-
-describe('Toast', () => {
-  afterEach(() => {
-    act(() => toast.reset());
-    vi.useRealTimers();
-  });
-
-  it('is announced in a live region and leaves after 4s (8s with an action)', () => {
-    vi.useFakeTimers();
-    render(<Toaster />);
-    act(() => {
-      toast({ title: 'Link copied.' });
-      toast({ title: '3 files moved to Archive.', status: 'complete', action: { label: 'Undo', onClick: () => {} } });
-    });
-    // Radix announces toasts through a status live region.
-    expect(document.querySelector('[role="status"][aria-live]')).not.toBeNull();
-    expect(screen.getByText('Link copied.')).toBeInTheDocument();
-    act(() => vi.advanceTimersByTime(4100));
-    expect(screen.queryByText('Link copied.')).not.toBeInTheDocument();
-    expect(screen.getByText('3 files moved to Archive.')).toBeInTheDocument();
-    act(() => vi.advanceTimersByTime(4000));
-    expect(screen.queryByText('3 files moved to Archive.')).not.toBeInTheDocument();
-  });
-
-  it('shows the same error once per 30 seconds and at most three at once', () => {
-    render(<Toaster />);
-    act(() => {
-      expect(toast({ title: "Couldn't rename the folder.", status: 'error' })).not.toBeNull();
-      expect(toast({ title: "Couldn't rename the folder.", status: 'error' })).toBeNull();
-      toast({ title: 'One.' });
-      toast({ title: 'Two.' });
-      toast({ title: 'Three.' });
-    });
-    expect(screen.queryByText("Couldn't rename the folder.")).not.toBeInTheDocument();
-    expect(screen.getByText('Three.')).toBeInTheDocument();
-  });
-
-  it('never takes focus', () => {
-    render(
-      <>
-        <button>Work</button>
-        <Toaster />
-      </>,
-    );
-    screen.getByRole('button', { name: 'Work' }).focus();
-    act(() => void toast({ title: 'Link copied.' }));
-    expect(screen.getByRole('button', { name: 'Work' })).toHaveFocus();
-  });
-});
-
-describe('Tooltip', () => {
-  it('opens on keyboard focus as well as hover', async () => {
-    render(
-      <Tooltip content="Downloads are off for this share">
-        <button>Share</button>
-      </Tooltip>,
-    );
-    await userEvent.tab();
-    expect(screen.getByRole('button', { name: 'Share' })).toHaveFocus();
-    expect(await screen.findByRole('tooltip')).toHaveTextContent('Downloads are off for this share');
-  });
-
-  it('opens on hover', async () => {
-    render(
-      <Tooltip content="Star" delay={0}>
-        <button>☆</button>
-      </Tooltip>,
-    );
-    await userEvent.hover(screen.getByRole('button'));
-    expect(await screen.findByRole('tooltip')).toHaveTextContent('Star');
-  });
-});
-
-describe('Table', () => {
-  type Row = { id: string; status?: 'attention' | 'error'; task: string; docs: number };
-  const rows: Row[] = [
-    { id: 'T-119', task: 'Translate the term sheet', docs: 1 },
-    { id: 'T-122', status: 'error', task: 'Prepare the data room index', docs: 20 },
-    { id: 'T-131', status: 'attention', task: 'Sign the engagement letter', docs: 2 },
-  ];
-  const columns = [
-    { key: 'task', label: 'Task', sortable: true },
-    { key: 'docs', label: 'Docs', align: 'right' as const, sortable: true },
-  ];
-
-  function Sorted({ onRowClick }: { onRowClick: (r: Row) => void }) {
-    const [sort, setSort] = useState<TableSort>({ key: 'task', direction: 'asc' });
-    return <Table caption="Review queue" columns={columns} rows={rows} sort={sort} onSortChange={setSort} onRowClick={onRowClick} />;
-  }
-
-  it('sorting sets aria-sort on the header', async () => {
-    render(<Sorted onRowClick={() => {}} />);
-    const [task, docs] = screen.getAllByRole('columnheader');
-    expect(task).toHaveAttribute('aria-sort', 'ascending');
-    expect(docs).toHaveAttribute('aria-sort', 'none');
-    await userEvent.click(within(docs!).getByRole('button', { name: 'Docs' }));
-    expect(docs).toHaveAttribute('aria-sort', 'ascending');
-    await userEvent.click(within(docs!).getByRole('button', { name: 'Docs' }));
-    expect(docs).toHaveAttribute('aria-sort', 'descending');
-  });
-
-  it('rows open on click and on Enter from the keyboard', async () => {
-    const onRowClick = vi.fn();
-    render(<Sorted onRowClick={onRowClick} />);
-    const row = screen.getByRole('row', { name: /Prepare the data room index/ });
-    await userEvent.click(row);
-    expect(onRowClick).toHaveBeenLastCalledWith(rows[1]);
-    row.focus();
-    await userEvent.keyboard('{Enter}');
-    expect(onRowClick).toHaveBeenCalledTimes(2);
-  });
-
-  it('rows needing a person take a wash; the title can be a real link', () => {
-    render(<Table columns={columns} rows={rows} rowHref={(r) => `/tasks/${r.id}`} />);
-    expect(screen.getByRole('row', { name: /data room/ }).className).toMatch(/bg-error-wash/);
-    expect(screen.getByRole('row', { name: /engagement letter/ }).className).toMatch(/bg-attention-wash/);
-    expect(screen.getByRole('link', { name: 'Sign the engagement letter' })).toHaveAttribute('href', '/tasks/T-131');
-  });
-
-  it('empty and loading', () => {
-    const { rerender } = render(<Table columns={columns} rows={[]} empty="No tasks yet." />);
-    expect(screen.getByText('No tasks yet.')).toBeInTheDocument();
-    rerender(<Table columns={columns} rows={[]} loading />);
-    expect(screen.getAllByRole('columnheader')).toHaveLength(2);
-  });
-
-  it('passes axe', async () => {
-    const { container } = render(<Sorted onRowClick={() => {}} />);
-    expect(await a11y(container)).toHaveNoViolations();
-  });
-});