@polderlabs/bizar 7.0.4 → 8.0.0

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();
+  });
+});

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

@@ -0,0 +1,105 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { GoalCard } from '../ui/goals/GoalCard';
+import { KeyResult } from '../ui/goals/KeyResult';
+
+describe('GoalCard', () => {
+  it('renders title, description, status, and progress', () => {
+    render(
+      <GoalCard
+        id="g1"
+        title="Ship v8 dashboard"
+        description="Rewrite the dashboard from scratch with a real component library."
+        status="on-track"
+        progress={0.42}
+      />,
+    );
+    expect(screen.getByText(/Ship v8 dashboard/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Rewrite the dashboard from scratch with a real component library\./i),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/on track/i)).toBeInTheDocument();
+    expect(screen.getByText(/42% complete/i)).toBeInTheDocument();
+  });
+
+  it('shows key results counter when provided', () => {
+    render(
+      <GoalCard
+        id="g1"
+        title="g"
+        status="at-risk"
+        progress={0.2}
+        keyResultsDone={2}
+        keyResultsTotal={5}
+      />,
+    );
+    expect(screen.getByText(/2 \/ 5 key results/i)).toBeInTheDocument();
+  });
+
+  it('shows due + owner labels', () => {
+    render(
+      <GoalCard
+        id="g1"
+        title="g"
+        status="on-track"
+        progress={0.1}
+        due="Q3 2026"
+        ownerName="alex"
+      />,
+    );
+    expect(screen.getByText(/Q3 2026/i)).toBeInTheDocument();
+    expect(screen.getByText(/alex/i)).toBeInTheDocument();
+  });
+
+  it('invokes onOpen when clicked', async () => {
+    const onOpen = vi.fn();
+    render(<GoalCard id="g1" title="g" status="on-track" progress={0} onOpen={onOpen} />);
+    await userEvent.click(screen.getByRole('button', { name: /g/i }));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders done status without progress display errors', () => {
+    render(<GoalCard id="g1" title="Shipped" status="done" progress={1} />);
+    expect(screen.getByText(/100% complete/i)).toBeInTheDocument();
+  });
+});
+
+describe('KeyResult', () => {
+  it('renders title with status icon and toggles on click', async () => {
+    const onToggle = vi.fn();
+    render(
+      <KeyResult id="kr1" title="Publish RFC" status="in-progress" progress={0.5} onToggle={onToggle} />,
+    );
+    expect(screen.getByText(/publish rfc/i)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: /mark as done/i }));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the "mark as not done" label when status is done', () => {
+    render(<KeyResult id="kr1" title="Done thing" status="done" progress={1} onToggle={() => {}} />);
+    expect(screen.getByRole('button', { name: /mark as not done/i })).toBeInTheDocument();
+  });
+
+  it('hides the progress bar when not-started', () => {
+    const { container } = render(
+      <KeyResult id="kr1" title="Plan ahead" status="not-started" progress={0} />,
+    );
+    expect(container.querySelector('.v8-progress')).toBeNull();
+  });
+
+  it('shows metric and assignee captions', () => {
+    render(
+      <KeyResult
+        id="kr1"
+        title="metric kr"
+        status="in-progress"
+        progress={0.47}
+        metric="47 / 100"
+        assignee="sam"
+      />,
+    );
+    expect(screen.getByText(/47 \/ 100/i)).toBeInTheDocument();
+    expect(screen.getByText(/@sam/i)).toBeInTheDocument();
+  });
+});