@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/v8/__tests__/controls.test.tsx

@@ -0,0 +1,135 @@
+/**
+ * Controls layer tests — Button, IconButton, Input, Checkbox, Switch, Toggle,
+ * Select, Slider. Covers rendering, a11y attributes, and event wiring.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Button,
+  IconButton,
+  Input,
+  Checkbox,
+  Switch,
+  Toggle,
+  Slider,
+} from '../ui/index.js';
+
+describe('Button', () => {
+  it('renders with default variant and size', () => {
+    render(<Button>Save</Button>);
+    const btn = screen.getByRole('button', { name: /save/i });
+    expect(btn).toBeInTheDocument();
+    expect(btn).toHaveAttribute('type', 'button');
+  });
+
+  it('calls onClick when clicked', async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Go</Button>);
+    await userEvent.click(screen.getByRole('button', { name: /go/i }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows loading spinner and disables interaction', () => {
+    render(<Button loading>Saving</Button>);
+    const btn = screen.getByRole('button', { name: /saving/i });
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('renders leftIcon and rightIcon', () => {
+    render(
+      <Button leftIcon={<span data-testid="li" />} rightIcon={<span data-testid="ri" />}>
+        X
+      </Button>,
+    );
+    expect(screen.getByTestId('li')).toBeInTheDocument();
+    expect(screen.getByTestId('ri')).toBeInTheDocument();
+  });
+
+  it('does not invoke onClick when disabled', async () => {
+    const onClick = vi.fn();
+    render(<Button disabled onClick={onClick}>X</Button>);
+    await userEvent.click(screen.getByRole('button', { name: /x/i }));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
+
+describe('IconButton', () => {
+  it('requires aria-label', () => {
+    render(<IconButton aria-label="Close">×</IconButton>);
+    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+  });
+
+  it('toggles active state', () => {
+    render(
+      <IconButton aria-label="Pin" active>
+        ★
+      </IconButton>,
+    );
+    const btn = screen.getByRole('button', { name: /pin/i });
+    expect(btn).toHaveAttribute('data-active', 'true');
+  });
+});
+
+describe('Input', () => {
+  it('renders with placeholder', () => {
+    render(<Input placeholder="Search…" aria-label="Search" />);
+    expect(screen.getByPlaceholderText(/search/i)).toBeInTheDocument();
+  });
+
+  it('forwards value via change handler', () => {
+    const onChange = vi.fn();
+    render(<Input aria-label="x" onChange={onChange} />);
+    fireEvent.change(screen.getByLabelText('x'), { target: { value: 'a' } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('renders leftAddon when provided', () => {
+    render(<Input leftAddon={<span data-testid="addon" />} aria-label="x" />);
+    expect(screen.getByTestId('addon')).toBeInTheDocument();
+  });
+});
+
+describe('Checkbox', () => {
+  it('renders with role=checkbox', () => {
+    render(<Checkbox aria-label="Accept" />);
+    expect(screen.getByRole('checkbox', { name: /accept/i })).toBeInTheDocument();
+  });
+
+  it('toggles checked state on click', async () => {
+    const onCheckedChange = vi.fn();
+    render(<Checkbox aria-label="Accept" onCheckedChange={onCheckedChange} />);
+    await userEvent.click(screen.getByRole('checkbox', { name: /accept/i }));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('Switch', () => {
+  it('renders with role=switch', () => {
+    render(<Switch aria-label="Dark mode" />);
+    expect(screen.getByRole('switch', { name: /dark/i })).toBeInTheDocument();
+  });
+});
+
+describe('Toggle', () => {
+  it('renders with role=button and aria-pressed', () => {
+    render(<Toggle aria-label="Bold">B</Toggle>);
+    const btn = screen.getByRole('button', { name: /bold/i });
+    expect(btn).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('invokes onPressedChange when clicked', async () => {
+    const onPressedChange = vi.fn();
+    render(<Toggle aria-label="Bold" onPressedChange={onPressedChange}>B</Toggle>);
+    await userEvent.click(screen.getByRole('button', { name: /bold/i }));
+    expect(onPressedChange).toHaveBeenCalled();
+  });
+});
+
+describe('Slider', () => {
+  it('renders with role=slider', () => {
+    render(<Slider defaultValue={[50]} aria-label="Volume" />);
+    expect(screen.getByRole('slider', { name: /volume/i })).toBeInTheDocument();
+  });
+});

package/bizar-dash/src/web/v8/__tests__/cx.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { cx } from '../ui/utils/cx.js';
+
+describe('cx', () => {
+  it('returns a single class verbatim', () => {
+    expect(cx('btn')).toBe('btn');
+  });
+
+  it('joins truthy values with a space', () => {
+    expect(cx('btn', 'btn--primary', undefined, false, null)).toBe('btn btn--primary');
+  });
+
+  it('honors object conditionals', () => {
+    expect(cx('btn', { 'btn--active': true, 'btn--disabled': false })).toBe('btn btn--active');
+  });
+
+  it('lets later tailwind utilities win', () => {
+    expect(cx('p-2', 'p-4')).toBe('p-4');
+    expect(cx('text-red-500', 'text-blue-500')).toBe('text-blue-500');
+  });
+
+  it('drops falsy values without leaving double spaces', () => {
+    expect(cx('a', undefined, 'b', null, '', 'c')).toBe('a b c');
+  });
+});

package/bizar-dash/src/web/v8/__tests__/data.test.tsx

@@ -0,0 +1,293 @@
+/**
+ * Data layer tests — Card, Badge, Chip, Avatar, StatTile, Sparkline,
+ * BarList, Timeline, Accordion, ViewHeader, Table, Kbd.
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Badge,
+  Chip,
+  Avatar,
+  StatTile,
+  StatGrid,
+  Sparkline,
+  BarList,
+  Timeline,
+  Accordion,
+  AccordionItem,
+  ViewHeader,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeader,
+  TableCell,
+  Kbd,
+} from '../ui/index.js';
+
+describe('Card', () => {
+  it('renders with default variant', () => {
+    const { container } = render(<Card>content</Card>);
+    expect(container.querySelector('.v8-card--default')).toBeInTheDocument();
+  });
+
+  it('renders header, body, footer', () => {
+    render(
+      <Card>
+        <CardHeader title="Title" description="Subtitle" action={<button>Action</button>} />
+        <CardBody>Body</CardBody>
+        <CardFooter>
+          <button>Save</button>
+        </CardFooter>
+      </Card>,
+    );
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Subtitle')).toBeInTheDocument();
+    expect(screen.getByText('Body')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+  });
+
+  it('renders interactive cursor when interactive=true', () => {
+    const { container } = render(<Card interactive>x</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card.style.cursor).toBe('pointer');
+  });
+});
+
+describe('Badge', () => {
+  it('renders tone and dot', () => {
+    render(
+      <Badge tone="success" dot>
+        Active
+      </Badge>,
+    );
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+});
+
+describe('Chip', () => {
+  it('renders children and supports remove handler', async () => {
+    let removed = false;
+    render(<Chip onRemove={() => { removed = true; }}>filter</Chip>);
+    expect(screen.getByText('filter')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: /remove/i }));
+    expect(removed).toBe(true);
+  });
+
+  it('renders selected state', () => {
+    const { container } = render(<Chip selected>x</Chip>);
+    expect(container.querySelector('.is-selected')).toBeInTheDocument();
+  });
+});
+
+describe('Avatar', () => {
+  it('derives initials from name when no src', () => {
+    render(<Avatar name="Ada Lovelace" />);
+    expect(screen.getByLabelText('Ada Lovelace')).toHaveTextContent('AL');
+  });
+
+  it('respects explicit initials override', () => {
+    render(<Avatar name="Ada Lovelace" initials="AD" />);
+    expect(screen.getByLabelText('Ada Lovelace')).toHaveTextContent('AD');
+  });
+
+  it('renders image when src provided', () => {
+    const { container } = render(<Avatar name="Ada" src="https://example.com/a.png" />);
+    const img = container.querySelector('img');
+    expect(img).toHaveAttribute('src', 'https://example.com/a.png');
+  });
+});
+
+describe('StatTile', () => {
+  it('renders label and value', () => {
+    render(<StatTile label="Active tasks" value={42} />);
+    expect(screen.getByText('Active tasks')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('renders delta with trend arrow', () => {
+    const { container } = render(
+      <StatTile label="x" value={10} delta="+5%" trend="up" />,
+    );
+    expect(screen.getByText('+5%')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('shows em-dash when loading', () => {
+    render(<StatTile label="x" value={10} loading />);
+    expect(screen.getByText('—')).toBeInTheDocument();
+  });
+});
+
+describe('StatGrid', () => {
+  it('renders children in a grid', () => {
+    const { container } = render(
+      <StatGrid cols={3}>
+        <StatTile label="A" value={1} />
+        <StatTile label="B" value={2} />
+        <StatTile label="C" value={3} />
+      </StatGrid>,
+    );
+    expect(container.querySelector('.v8-stat-grid')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+});
+
+describe('Sparkline', () => {
+  it('renders an SVG with a path for > 1 data points', () => {
+    const { container } = render(<Sparkline data={[1, 2, 3, 4, 5]} />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg?.querySelectorAll('path').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('renders no paths when only 1 data point', () => {
+    const { container } = render(<Sparkline data={[5]} />);
+    expect(container.querySelector('svg')?.querySelector('path')).toBeNull();
+  });
+});
+
+describe('BarList', () => {
+  it('renders items with values', () => {
+    render(
+      <BarList
+        items={[
+          { id: 'a', label: 'Alpha', value: 30 },
+          { id: 'b', label: 'Beta', value: 70 },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('30')).toBeInTheDocument();
+    expect(screen.getByText('70')).toBeInTheDocument();
+  });
+});
+
+describe('Timeline', () => {
+  it('renders ordered list with items', () => {
+    render(
+      <Timeline
+        items={[
+          { id: '1', title: 'Started', tone: 'info', meta: '2m ago' },
+          { id: '2', title: 'Built', description: 'tests', tone: 'success' },
+          { id: '3', title: 'Shipped', tone: 'accent' },
+        ]}
+      />,
+    );
+    const list = screen.getByRole('list');
+    expect(list).toBeInTheDocument();
+    expect(screen.getByText('Started')).toBeInTheDocument();
+    expect(screen.getByText('tests')).toBeInTheDocument();
+  });
+});
+
+describe('Accordion', () => {
+  it('expands item on trigger click', async () => {
+    render(
+      <Accordion type="single" defaultValue="a">
+        <AccordionItem value="a" title="Group A">
+          Content A
+        </AccordionItem>
+        <AccordionItem value="b" title="Group B">
+          Content B
+        </AccordionItem>
+      </Accordion>,
+    );
+    expect(screen.getByText('Content A')).toBeInTheDocument();
+    expect(screen.queryByText('Content B')).not.toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: /group b/i }));
+    expect(await screen.findByText('Content B')).toBeInTheDocument();
+  });
+});
+
+describe('ViewHeader', () => {
+  it('renders title, description, and action', () => {
+    render(
+      <ViewHeader
+        title="Tasks"
+        description="All work across the org"
+        action={<button>New task</button>}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: /tasks/i })).toBeInTheDocument();
+    expect(screen.getByText(/all work across the org/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /new task/i })).toBeInTheDocument();
+  });
+
+  it('renders breadcrumb when provided', () => {
+    render(
+      <ViewHeader
+        title="Task #42"
+        breadcrumb={[{ label: 'Tasks', onClick: () => {} }, { label: 'Task #42' }]}
+      />,
+    );
+    const nav = screen.getByRole('navigation', { name: /breadcrumb/i });
+    expect(nav).toBeInTheDocument();
+    expect(within(nav).getByText('Tasks')).toBeInTheDocument();
+    expect(within(nav).getByText('Task #42')).toBeInTheDocument();
+  });
+});
+
+describe('Table', () => {
+  it('renders rows and headers', () => {
+    render(
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Name</TableHeader>
+            <TableHeader align="right">Count</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>Alpha</TableCell>
+            <TableCell align="right">12</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('12')).toBeInTheDocument();
+  });
+
+  it('applies selected styling', () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow selected>
+            <TableCell>x</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    expect(container.querySelector('.v8-table__row.is-selected')).toBeInTheDocument();
+  });
+});
+
+describe('Kbd', () => {
+  it('renders the key label', () => {
+    render(<Kbd>⌘ K</Kbd>);
+    expect(screen.getByText('⌘ K')).toBeInTheDocument();
+  });
+});
+
+// re-export to avoid an extra import in the ViewHeader test
+function within(el: HTMLElement) {
+  return {
+    getByText: (text: string | RegExp) => {
+      const nodes = Array.from(el.querySelectorAll('*')).filter((n) => {
+        const t = (n.textContent ?? '').trim();
+        return typeof text === 'string' ? t === text : text.test(t);
+      });
+      const first = nodes[0];
+      if (!first) throw new Error(`No match for ${text}`);
+      return first;
+    },
+  };
+}

package/bizar-dash/src/web/v8/__tests__/feedback.test.tsx

@@ -0,0 +1,213 @@
+/**
+ * Feedback layer tests — Dialog, Alert, Toast, Tooltip, Skeleton, EmptyState,
+ * DropdownMenu, ContextMenu, Sheet. Covers rendering, a11y, and overlays.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Alert,
+  Banner,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogClose,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  Sheet,
+  SheetContent,
+  SheetClose,
+  Skeleton,
+  SkeletonText,
+  EmptyState,
+  TooltipProvider,
+  Tooltip,
+} from '../ui/index.js';
+
+describe('Alert', () => {
+  it('renders title and tone', () => {
+    render(<Alert tone="warning" title="Watch out">Be careful</Alert>);
+    expect(screen.getByText('Watch out')).toBeInTheDocument();
+    expect(screen.getByText('Be careful')).toBeInTheDocument();
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('uses status role for info tone', () => {
+    render(<Alert tone="info" title="Note" />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('hides icon when icon={false}', () => {
+    const { container } = render(<Alert icon={false} title="x" />);
+    expect(container.querySelector('.v8-alert svg')).toBeNull();
+  });
+});
+
+describe('Banner', () => {
+  it('renders message and supports an action slot', () => {
+    render(
+      <Banner tone="warning">
+        <span data-testid="msg">Outage in progress</span>
+      </Banner>,
+    );
+    expect(screen.getByTestId('msg')).toBeInTheDocument();
+  });
+
+  it('renders an action button via action prop', () => {
+    render(
+      <Banner tone="info" action={<button>Subscribe</button>}>
+        Heads up
+      </Banner>,
+    );
+    expect(screen.getByRole('button', { name: /subscribe/i })).toBeInTheDocument();
+  });
+});
+
+describe('Dialog', () => {
+  it('opens and closes via trigger and close', async () => {
+    render(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent title="Confirm">
+          <p>Body</p>
+          <DialogClose>Close</DialogClose>
+        </DialogContent>
+      </Dialog>,
+    );
+    await userEvent.click(screen.getByText('Open'));
+    expect(await screen.findByText('Body')).toBeInTheDocument();
+    expect(screen.getByText('Confirm')).toBeInTheDocument();
+    await userEvent.click(screen.getByText('Close'));
+    await waitFor(() => {
+      expect(screen.queryByText('Body')).not.toBeInTheDocument();
+    });
+  });
+});
+
+describe('Skeleton', () => {
+  it('renders with v8-skeleton class for pulse animation', () => {
+    const { container } = render(<Skeleton width={100} height={20} />);
+    const el = container.firstChild;
+    expect(el).toHaveClass('v8-skeleton');
+  });
+
+  it('renders multiple lines with SkeletonText', () => {
+    const { container } = render(<SkeletonText lines={3} />);
+    expect(container.querySelectorAll('.v8-skeleton').length).toBe(3);
+  });
+});
+
+describe('EmptyState', () => {
+  it('renders title and description', () => {
+    render(
+      <EmptyState
+        title="No tasks yet"
+        description="Add your first task to get started"
+      />,
+    );
+    expect(screen.getByText('No tasks yet')).toBeInTheDocument();
+    expect(screen.getByText(/add your first task/i)).toBeInTheDocument();
+  });
+
+  it('renders an action button via action prop', () => {
+    render(
+      <EmptyState title="Empty" action={<button>New task</button>} />,
+    );
+    expect(screen.getByRole('button', { name: /new task/i })).toBeInTheDocument();
+  });
+});
+
+describe('DropdownMenu', () => {
+  it('opens and lists items', async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Copy</DropdownMenuItem>
+          <DropdownMenuItem>Paste</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    await userEvent.click(screen.getByText('Menu'));
+    expect(await screen.findByText('Copy')).toBeInTheDocument();
+    expect(screen.getByText('Paste')).toBeInTheDocument();
+  });
+
+  it('renders shortcut text', async () => {
+    render(
+      <DropdownMenu defaultOpen>
+        <DropdownMenuContent>
+          <DropdownMenuItem shortcut="⌘ C">Copy</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    expect(await screen.findByText('⌘ C')).toBeInTheDocument();
+  });
+});
+
+describe('ContextMenu', () => {
+  it('renders items inside trigger', async () => {
+    render(
+      <ContextMenu>
+        <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem>Inspect</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+    expect(screen.getByText('Right-click me')).toBeInTheDocument();
+    fireEvent.contextMenu(screen.getByText('Right-click me'));
+    expect(await screen.findByText('Inspect')).toBeInTheDocument();
+  });
+});
+
+describe('Sheet', () => {
+  it('renders title and supports close', async () => {
+    render(
+      <Sheet defaultOpen>
+        <SheetContent title="Task #42">
+          <p>Detail</p>
+          <SheetClose>Done</SheetClose>
+        </SheetContent>
+      </Sheet>,
+    );
+    expect(await screen.findByText('Detail')).toBeInTheDocument();
+    expect(screen.getByText('Task #42')).toBeInTheDocument();
+  });
+
+  it('applies data-side attribute for animation', async () => {
+    render(
+      <Sheet defaultOpen>
+        <SheetContent title="x" side="right">
+          body
+        </SheetContent>
+      </Sheet>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('.v8-sheet')).toHaveAttribute('data-side', 'right');
+    });
+  });
+});
+
+describe('Tooltip', () => {
+  it('shows tooltip text on hover', async () => {
+    render(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip content="Helpful">
+          <button>Hover me</button>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    await userEvent.hover(screen.getByText('Hover me'));
+    // Radix renders the tooltip text in two nodes (visible + a11y fallback).
+    const nodes = await screen.findAllByText('Helpful');
+    expect(nodes.length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByRole('tooltip')).toBeInTheDocument();
+  });
+});