@polderlabs/bizar 6.3.0 → 7.0.1

package/bizar-dash/tests/ui/navigation/CommandPalette.test.tsx

@@ -0,0 +1,105 @@
+// tests/ui/navigation/CommandPalette.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { CommandPalette } from '../../../src/web/ui/navigation/CommandPalette';
+
+const ITEMS = [
+  {
+    id: 'a1',
+    type: 'agent' as const,
+    label: 'Odin Agent',
+    description: 'Mid-tier orchestrator',
+    onSelect: vi.fn(),
+  },
+  {
+    id: 't1',
+    type: 'task' as const,
+    label: 'Build dashboard',
+    onSelect: vi.fn(),
+  },
+  {
+    id: 'm1',
+    type: 'mod' as const,
+    label: 'Headroom',
+    onSelect: vi.fn(),
+  },
+];
+
+describe('CommandPalette', () => {
+  it('does not render when open is false', () => {
+    const { container } = render(
+      <CommandPalette open={false} onClose={() => {}} items={ITEMS} />,
+    );
+    expect(container.querySelector('.bd-cmdk')).toBeNull();
+  });
+
+  it('renders when open is true', () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('shows all items initially grouped by type', () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    expect(screen.getByText('Odin Agent')).toBeInTheDocument();
+    expect(screen.getByText('Build dashboard')).toBeInTheDocument();
+    expect(screen.getByText('Headroom')).toBeInTheDocument();
+    expect(screen.getByText('Agents')).toBeInTheDocument();
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+    expect(screen.getByText('Mods')).toBeInTheDocument();
+  });
+
+  it('filters items by fuzzy match on label/description', async () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    await userEvent.type(
+      screen.getByPlaceholderText('Search anything…'),
+      'orchestrator',
+    );
+    // Only "Odin Agent" (description contains "orchestrator") survives.
+    expect(screen.getByText('Odin Agent')).toBeInTheDocument();
+    expect(screen.queryByText('Build dashboard')).toBeNull();
+    expect(screen.queryByText('Headroom')).toBeNull();
+  });
+
+  it('shows "No results" when no items match', async () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    await userEvent.type(
+      screen.getByPlaceholderText('Search anything…'),
+      'zzzzzzz',
+    );
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+
+  it('arrow keys cycle through visible items', async () => {
+    render(<CommandPalette open={true} onClose={() => {}} items={ITEMS} />);
+    await userEvent.type(screen.getByPlaceholderText('Search anything…'), 'a');
+    // After filtering 'a' we may still see multiple results — just check
+    // that pressing ArrowDown moves activeIndex.
+    const before = document.querySelector('.bd-cmdk__item--active');
+    await userEvent.keyboard('{ArrowDown}');
+    const after = document.querySelector('.bd-cmdk__item--active');
+    // Active highlight class moved from one item to the next.
+    expect(before).not.toBe(after);
+  });
+
+  it('clicking an item triggers onSelect and closes the palette', async () => {
+    const onClose = vi.fn();
+    render(
+      <CommandPalette open={true} onClose={onClose} items={ITEMS} />,
+    );
+    await userEvent.click(screen.getByText('Headroom'));
+    expect(ITEMS[2].onSelect).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('Escape closes the palette', async () => {
+    const onClose = vi.fn();
+    render(<CommandPalette open={true} onClose={onClose} items={ITEMS} />);
+    const dialog = screen.getByRole('dialog');
+    dialog.focus();
+    // The keydown handler is on the .bd-cmdk wrapper; dispatch from there.
+    await userEvent.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalled();
+  });
+});

package/bizar-dash/tests/ui/navigation/NavGroup.test.tsx

@@ -0,0 +1,55 @@
+// tests/ui/navigation/NavGroup.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { Folder, Settings } from 'lucide-react';
+import { NavGroup } from '../../../src/web/ui/navigation/NavGroup';
+
+const ITEMS = [
+  { label: 'First', icon: Settings, href: '/first' },
+  { label: 'Second', icon: Settings, href: '/second' },
+];
+
+describe('NavGroup', () => {
+  it('renders the group label', () => {
+    render(<NavGroup label="Workspace" items={ITEMS} />);
+    expect(screen.getByText('Workspace')).toBeInTheDocument();
+  });
+
+  it('projects each item through NavLink', () => {
+    render(<NavGroup label="W" items={ITEMS} />);
+    expect(screen.getByRole('link', { name: /first/i })).toHaveAttribute(
+      'href',
+      '/first',
+    );
+    expect(screen.getByRole('link', { name: /second/i })).toHaveAttribute(
+      'href',
+      '/second',
+    );
+  });
+
+  it('toggles open/closed on header click', async () => {
+    const { container } = render(
+      <NavGroup label="W" items={ITEMS} defaultOpen={true} />,
+    );
+    // Start open
+    expect(container.querySelector('.bd-nav-group--open')).toBeInTheDocument();
+    // Click to close
+    await userEvent.click(screen.getByText('W'));
+    expect(container.querySelector('.bd-nav-group--open')).toBeNull();
+    // Click to open
+    await userEvent.click(screen.getByText('W'));
+    expect(container.querySelector('.bd-nav-group--open')).toBeInTheDocument();
+  });
+
+  it('does not toggle when collapsible is false', async () => {
+    const { container } = render(
+      <NavGroup label="W" items={ITEMS} collapsible={false} />,
+    );
+    expect(container.querySelector('.bd-nav-group--non-collapsible')).toBeInTheDocument();
+    await userEvent.click(screen.getByText('W'));
+    // Header click is a no-op when not collapsible.
+    expect(container.querySelector('.bd-nav-group--non-collapsible')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/navigation/NavLink.test.tsx

@@ -0,0 +1,61 @@
+// tests/ui/navigation/NavLink.test.tsx — Wave 2B
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Home } from 'lucide-react';
+import { NavLink } from '../../../src/web/ui/navigation/NavLink';
+
+describe('NavLink', () => {
+  it('renders an <a> when href is provided', () => {
+    render(<NavLink icon={Home} label="Home" href="/home" />);
+    const anchor = screen.getByRole('link', { name: /home/i });
+    expect(anchor.tagName).toBe('A');
+    expect(anchor).toHaveAttribute('href', '/home');
+  });
+
+  it('renders a <button> when only onClick is provided', () => {
+    const onClick = vi.fn();
+    render(<NavLink icon={Home} label="Trigger" onClick={onClick} />);
+    const btn = screen.getByRole('button', { name: /trigger/i });
+    expect(btn.tagName).toBe('BUTTON');
+  });
+
+  it('fires onClick when the button is clicked', async () => {
+    const onClick = vi.fn();
+    render(<NavLink icon={Home} label="X" onClick={onClick} />);
+    await userEvent.click(screen.getByRole('button', { name: /x/i }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a <div> when neither href nor onClick is provided', () => {
+    const { container } = render(<NavLink icon={Home} label="Plain" />);
+    const link = container.querySelector('.bd-nav-link');
+    expect(link).toBeInTheDocument();
+    expect(link?.tagName).toBe('DIV');
+  });
+
+  it('applies active state styling', () => {
+    const { container } = render(
+      <NavLink icon={Home} label="Active" href="/x" active />,
+    );
+    expect(container.querySelector('.bd-nav-link--active')).toBeInTheDocument();
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders a badge when supplied', () => {
+    render(<NavLink icon={Home} label="Tasks" href="/t" badge={7} />);
+    expect(screen.getByText('7')).toBeInTheDocument();
+  });
+
+  it('applies disabled state and blocks navigation', () => {
+    const { container } = render(
+      <NavLink icon={Home} label="Locked" href="/locked" disabled />,
+    );
+    const anchor = container.querySelector('a')!;
+    expect(anchor).toHaveAttribute('aria-disabled', 'true');
+    expect(anchor.getAttribute('href')).toBeNull();
+    expect(anchor).toHaveClass('bd-nav-link--disabled');
+  });
+});

package/bizar-dash/tests/ui/primitives/Box.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Box } from '../../../src/web/ui/primitives/Box';
+
+describe('Box', () => {
+  it('renders a div by default', () => {
+    const { container } = render(<Box>hello</Box>);
+    const el = container.firstChild as HTMLElement;
+    expect(el.tagName).toBe('DIV');
+    expect(el).toHaveClass('box');
+  });
+
+  it('renders the requested semantic tag', () => {
+    const { container } = render(<Box as="section">x</Box>);
+    expect(container.firstChild?.nodeName).toBe('SECTION');
+  });
+
+  it('composes padding/margin/bg/border classes from props', () => {
+    const { container } = render(
+      <Box p={3} m={2} bg="1" border="subtle" rounded="md" data-testid="b" />,
+    );
+    const el = screen.getByTestId('b');
+    expect(el).toHaveClass('box-p-3', 'box-m-2', 'box-bg-1', 'box-border-subtle', 'box-rounded-md');
+  });
+
+  it('renders zero values without falsy-skip', () => {
+    const { container } = render(<Box p={0} m={0} data-testid="b" />);
+    const el = screen.getByTestId('b');
+    expect(el).toHaveClass('box-p-0', 'box-m-0');
+  });
+
+  it('composes display and position classes', () => {
+    const { container } = render(
+      <Box display="flex" position="relative" data-testid="b" />,
+    );
+    const el = screen.getByTestId('b');
+    expect(el).toHaveClass('box-d-flex', 'box-pos-relative');
+  });
+
+  it('passes through arbitrary HTML attributes', () => {
+    const { container } = render(
+      <Box id="x" aria-label="region" data-foo="bar" />,
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el.id).toBe('x');
+    expect(el.getAttribute('aria-label')).toBe('region');
+    expect(el.getAttribute('data-foo')).toBe('bar');
+  });
+});

package/bizar-dash/tests/ui/primitives/Grid.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Grid } from '../../../src/web/ui/primitives/Grid';
+
+describe('Grid', () => {
+  it('renders a grid container with default 1 column', () => {
+    render(<Grid data-testid="g" />);
+    const el = screen.getByTestId('g');
+    expect(el).toHaveClass('grid', 'cols-1');
+  });
+
+  it('applies the requested column count class', () => {
+    render(<Grid cols={3} data-testid="g" />);
+    expect(screen.getByTestId('g')).toHaveClass('cols-3');
+  });
+
+  it('applies gap class from prop', () => {
+    render(<Grid cols={2} gap={5} data-testid="g" />);
+    expect(screen.getByTestId('g')).toHaveClass('gap-5');
+  });
+
+  it('switches to autoFit class when autoFit is true', () => {
+    render(<Grid autoFit cols={4} data-testid="g" />);
+    const el = screen.getByTestId('g');
+    expect(el).toHaveClass('grid-autofit');
+    expect(el).not.toHaveClass('cols-4');
+  });
+
+  it('renders children inside the grid', () => {
+    render(
+      <Grid>
+        <div data-testid="cell">x</div>
+      </Grid>,
+    );
+    expect(screen.getByTestId('cell')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/primitives/Inline.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Inline } from '../../../src/web/ui/primitives/Inline';
+
+describe('Inline', () => {
+  it('renders as a row with wrap by default', () => {
+    const { container } = render(<Inline data-testid="i">a</Inline>);
+    const el = screen.getByTestId('i');
+    expect(el).toHaveClass('inline', 'wrap');
+    expect(el).not.toHaveClass('inline-col');
+  });
+
+  it('uses gap-3 by default', () => {
+    render(<Inline data-testid="i" />);
+    expect(screen.getByTestId('i')).toHaveClass('gap-3');
+  });
+
+  it('switches direction to column', () => {
+    render(<Inline direction="column" data-testid="i" />);
+    expect(screen.getByTestId('i')).toHaveClass('inline-col');
+  });
+
+  it('applies nowrap when wrap is false', () => {
+    render(<Inline wrap={false} data-testid="i" />);
+    expect(screen.getByTestId('i')).toHaveClass('nowrap');
+  });
+
+  it('forwards alignment props', () => {
+    render(<Inline align="baseline" justify="end" data-testid="i" />);
+    const el = screen.getByTestId('i');
+    expect(el).toHaveClass('align-baseline', 'justify-end');
+  });
+});

package/bizar-dash/tests/ui/primitives/Separator.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Separator } from '../../../src/web/ui/primitives/Separator';
+
+describe('Separator', () => {
+  it('renders an <hr> by default in horizontal orientation', () => {
+    const { container } = render(<Separator />);
+    const hr = container.querySelector('hr');
+    expect(hr).toBeInTheDocument();
+    expect(hr).toHaveClass('separator');
+  });
+
+  it('applies the vertical orientation class to <hr>', () => {
+    const { container } = render(<Separator orientation="vertical" />);
+    const hr = container.querySelector('hr');
+    expect(hr).toHaveClass('separator-vertical');
+  });
+
+  it('renders a labelled separator as a div with role=separator', () => {
+    const { container } = render(<Separator label="OR" />);
+    const el = container.querySelector('[role="separator"]');
+    expect(el).toBeInTheDocument();
+    expect(el).toHaveClass('separator-with-label');
+    expect(el).toHaveTextContent('OR');
+  });
+
+  it('sets aria-orientation on the labelled variant', () => {
+    const { container } = render(
+      <Separator label="AND" orientation="horizontal" />,
+    );
+    const el = container.querySelector('[role="separator"]');
+    expect(el?.getAttribute('aria-orientation')).toBe('horizontal');
+  });
+});

package/bizar-dash/tests/ui/primitives/Stack.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Stack } from '../../../src/web/ui/primitives/Stack';
+
+describe('Stack', () => {
+  it('renders a column by default with gap-3', () => {
+    const { container } = render(
+      <Stack data-testid="s">
+        <span>a</span>
+      </Stack>,
+    );
+    const el = screen.getByTestId('s');
+    expect(el).toHaveClass('stack');
+    expect(el).toHaveClass('gap-3');
+  });
+
+  it('switches to row direction', () => {
+    const { container } = render(<Stack direction="row" data-testid="s" />);
+    expect(screen.getByTestId('s')).toHaveClass('stack-row');
+  });
+
+  it('applies alignment and justify modifiers', () => {
+    const { container } = render(
+      <Stack align="center" justify="between" data-testid="s" />,
+    );
+    const el = screen.getByTestId('s');
+    expect(el).toHaveClass('align-center', 'justify-between');
+  });
+
+  it('enables flex-wrap when wrap is true', () => {
+    const { container } = render(<Stack wrap data-testid="s" />);
+    expect(screen.getByTestId('s')).toHaveClass('wrap');
+  });
+
+  it('renders children inside the flex container', () => {
+    render(
+      <Stack>
+        <span data-testid="c1">a</span>
+        <span data-testid="c2">b</span>
+      </Stack>,
+    );
+    expect(screen.getByTestId('c1')).toBeInTheDocument();
+    expect(screen.getByTestId('c2')).toBeInTheDocument();
+  });
+});

package/bizar-dash/tests/ui/primitives/VisuallyHidden.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { VisuallyHidden } from '../../../src/web/ui/primitives/VisuallyHidden';
+
+describe('VisuallyHidden', () => {
+  it('renders its children inside a span', () => {
+    render(<VisuallyHidden>hidden text</VisuallyHidden>);
+    const el = screen.getByText('hidden text');
+    expect(el.tagName).toBe('SPAN');
+  });
+
+  it('applies the vh class for SR-only styling', () => {
+    render(<VisuallyHidden>sr-only</VisuallyHidden>);
+    expect(screen.getByText('sr-only')).toHaveClass('vh');
+  });
+
+  it('passes additional attributes through to the span', () => {
+    render(
+      <VisuallyHidden id="vh-1" data-testid="vh">
+        x
+      </VisuallyHidden>,
+    );
+    const el = screen.getByTestId('vh');
+    expect(el.id).toBe('vh-1');
+    expect(el).toHaveClass('vh');
+  });
+});