@fragments-sdk/ui 0.7.4 → 0.7.5

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Button } from './index';
+
+describe('Button', () => {
+  it('renders with children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await user.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('applies variant classes', () => {
+    const { rerender } = render(<Button variant="primary">Btn</Button>);
+    expect(screen.getByRole('button')).toHaveClass('primary');
+
+    rerender(<Button variant="danger">Btn</Button>);
+    expect(screen.getByRole('button')).toHaveClass('danger');
+  });
+
+  it('applies size classes', () => {
+    render(<Button size="lg">Btn</Button>);
+    expect(screen.getByRole('button')).toHaveClass('lg');
+  });
+
+  it('renders as an anchor when as="a"', () => {
+    render(<Button as="a" href="/test">Link</Button>);
+    const link = screen.getByRole('link', { name: 'Link' });
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  it('supports disabled state', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<Button ref={ref}>Ref</Button>);
+    expect(ref).toHaveBeenCalled();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Button>Accessible</Button>);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { ButtonGroup } from './index';
+
+describe('ButtonGroup', () => {
+  it('renders children buttons', () => {
+    render(
+      <ButtonGroup>
+        <button>Save</button>
+        <button>Cancel</button>
+      </ButtonGroup>
+    );
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
+
+  it('applies gap class', () => {
+    const { container } = render(
+      <ButtonGroup gap="md">
+        <button>A</button>
+      </ButtonGroup>
+    );
+    expect(container.firstElementChild).toHaveClass('gap-md');
+  });
+
+  it('applies wrap class when wrap is true', () => {
+    const { container } = render(
+      <ButtonGroup wrap>
+        <button>A</button>
+      </ButtonGroup>
+    );
+    expect(container.firstElementChild).toHaveClass('wrap');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <ButtonGroup>
+        <button>OK</button>
+        <button>Cancel</button>
+      </ButtonGroup>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Card/Card.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Card } from './index';
+
+describe('Card', () => {
+  it('renders as <article> by default', () => {
+    render(<Card>Content</Card>);
+    expect(screen.getByRole('article')).toBeInTheDocument();
+  });
+
+  it('renders as <button> when onClick is provided', () => {
+    render(<Card onClick={() => {}}>Click me</Card>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.queryByRole('article')).not.toBeInTheDocument();
+  });
+
+  it('applies variant classes', () => {
+    const { rerender } = render(<Card variant="outlined">Content</Card>);
+    expect(screen.getByRole('article')).toHaveClass('outlined');
+
+    rerender(<Card variant="elevated">Content</Card>);
+    expect(screen.getByRole('article')).toHaveClass('elevated');
+  });
+
+  it('applies padding classes', () => {
+    render(<Card padding="lg">Content</Card>);
+    expect(screen.getByRole('article')).toHaveClass('paddingLg');
+  });
+
+  it('fires onClick callback', async () => {
+    const handleClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Card onClick={handleClick}>Click me</Card>);
+    await user.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders compound sub-components', () => {
+    render(
+      <Card>
+        <Card.Header>Header</Card.Header>
+        <Card.Title>Title</Card.Title>
+        <Card.Description>Description</Card.Description>
+        <Card.Body>Body</Card.Body>
+        <Card.Footer>Footer</Card.Footer>
+      </Card>
+    );
+    expect(screen.getByText('Header')).toHaveClass('header');
+    expect(screen.getByText('Title').tagName).toBe('H3');
+    expect(screen.getByText('Description').tagName).toBe('P');
+    expect(screen.getByText('Body')).toHaveClass('body');
+    expect(screen.getByText('Footer')).toHaveClass('footer');
+  });
+
+  it('adds interactive class when onClick is provided', () => {
+    render(<Card onClick={() => {}}>Content</Card>);
+    expect(screen.getByRole('button')).toHaveClass('interactive');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Card>
+        <Card.Header>
+          <Card.Title>Card Title</Card.Title>
+        </Card.Header>
+        <Card.Body>Card body content</Card.Body>
+      </Card>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Chart/Chart.test.tsx

@@ -0,0 +1,123 @@
+import { describe, it, expect, vi } from 'vitest';
+import * as React from 'react';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import {
+  ChartContainer,
+  ChartTooltipContent,
+  ChartLegendContent,
+  useChartConfig,
+  type ChartConfig,
+} from './index';
+
+// Mock recharts to avoid SVG rendering issues in jsdom
+vi.mock('recharts', () => ({
+  Tooltip: ({ content, ...props }: any) => <div data-testid="recharts-tooltip" {...props} />,
+  Legend: ({ content, ...props }: any) => <div data-testid="recharts-legend" {...props} />,
+}));
+
+const config: ChartConfig = {
+  revenue: { label: 'Revenue', color: '#3b82f6' },
+  expenses: { label: 'Expenses', color: '#ef4444' },
+};
+
+describe('ChartContainer', () => {
+  it('renders a container with role="img"', () => {
+    render(
+      <ChartContainer config={config}>
+        <div>chart</div>
+      </ChartContainer>
+    );
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+
+  it('applies default aria-label "Chart"', () => {
+    render(
+      <ChartContainer config={config}>
+        <div>chart</div>
+      </ChartContainer>
+    );
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'Chart');
+  });
+
+  it('renders summary text for screen readers', () => {
+    render(
+      <ChartContainer config={config} summary="Revenue vs Expenses over time">
+        <div>chart</div>
+      </ChartContainer>
+    );
+    expect(screen.getByText('Revenue vs Expenses over time')).toBeInTheDocument();
+  });
+
+  it('provides config context via useChartConfig', () => {
+    function Consumer() {
+      const ctx = useChartConfig();
+      return <span>{ctx.revenue.label}</span>;
+    }
+    render(
+      <ChartContainer config={config}>
+        <Consumer />
+      </ChartContainer>
+    );
+    expect(screen.getByText('Revenue')).toBeInTheDocument();
+  });
+
+  it('throws when useChartConfig is used outside ChartContainer', () => {
+    function Consumer() {
+      useChartConfig();
+      return null;
+    }
+    expect(() => render(<Consumer />)).toThrow('useChartConfig must be used within a <ChartContainer>');
+  });
+});
+
+describe('ChartTooltipContent', () => {
+  it('renders nothing when not active', () => {
+    const { container } = render(
+      <ChartTooltipContent active={false} payload={[]} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders payload items when active', () => {
+    render(
+      <ChartTooltipContent
+        active
+        payload={[{ name: 'revenue', value: 100, dataKey: 'revenue', color: '#3b82f6' }]}
+        label="Jan"
+      />
+    );
+    expect(screen.getByText('Jan')).toBeInTheDocument();
+    expect(screen.getByText('100')).toBeInTheDocument();
+  });
+});
+
+describe('ChartLegendContent', () => {
+  it('renders legend items from payload', () => {
+    render(
+      <ChartLegendContent
+        payload={[
+          { value: 'revenue', dataKey: 'revenue', color: '#3b82f6' },
+          { value: 'expenses', dataKey: 'expenses', color: '#ef4444' },
+        ]}
+      />
+    );
+    expect(screen.getByText('revenue')).toBeInTheDocument();
+    expect(screen.getByText('expenses')).toBeInTheDocument();
+  });
+
+  it('renders nothing with empty payload', () => {
+    const { container } = render(<ChartLegendContent payload={[]} />);
+    expect(container.innerHTML).toBe('');
+  });
+});
+
+describe('Chart accessibility', () => {
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <ChartContainer config={config} aria-label="Revenue chart" summary="Shows revenue data">
+        <div>chart content</div>
+      </ChartContainer>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Checkbox } from './index';
+
+describe('Checkbox', () => {
+  it('renders a checkbox role', () => {
+    render(<Checkbox aria-label="Accept" />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  it('toggles checked state on click', async () => {
+    const user = userEvent.setup();
+    render(<Checkbox aria-label="Accept" defaultChecked={false} />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+    await user.click(checkbox);
+    expect(checkbox).toBeChecked();
+  });
+
+  it('renders as checked when checked prop is true', () => {
+    render(<Checkbox aria-label="Accept" checked onCheckedChange={() => {}} />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  it('supports indeterminate state via aria-checked=mixed', () => {
+    render(<Checkbox aria-label="Select all" indeterminate />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  it('renders label text', () => {
+    render(<Checkbox label="I agree" />);
+    expect(screen.getByText('I agree')).toBeInTheDocument();
+  });
+
+  it('renders description text', () => {
+    render(<Checkbox label="Subscribe" description="Get weekly updates" />);
+    expect(screen.getByText('Get weekly updates')).toBeInTheDocument();
+  });
+
+  it('disables the checkbox', () => {
+    render(<Checkbox aria-label="Accept" disabled />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('sets required attribute', () => {
+    render(<Checkbox aria-label="Accept" required />);
+    expect(screen.getByRole('checkbox')).toBeRequired();
+  });
+
+  it('calls onCheckedChange with the new value on click', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Checkbox aria-label="Accept" onCheckedChange={handleChange} />);
+    await user.click(screen.getByRole('checkbox'));
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange.mock.calls[0][0]).toBe(true);
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Checkbox label="Accessible checkbox" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Chip/Chip.module.scss

@@ -166,7 +166,7 @@
   border-bottom-right-radius: var(--fui-radius-full, $fui-radius-full);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+  background-color: transparent;
   border: 1px solid transparent;
   border-left-color: var(--fui-border, $fui-border);
 
@@ -179,6 +179,59 @@
   }
 }
 
+// Match remove button visuals to chip variant/state so the compound control
+// remains visually coherent across seeds/themes.
+.filled + .remove {
+  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+}
+
+.outlined + .remove {
+  background-color: transparent;
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+}
+
+.soft + .remove {
+  background-color: var(--fui-color-info-bg, $fui-color-info-bg);
+  color: var(--fui-color-info, $fui-color-info);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+}
+
+.selected + .remove {
+  background-color: var(--fui-color-accent, $fui-color-accent);
+  color: var(--fui-text-inverse, $fui-text-inverse);
+  border-left-color: transparent;
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-color-accent-active, $fui-color-accent-active);
+  }
+}
+
 // Chip.Group
 .group {
   display: flex;

package/src/components/Chip/Chip.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Chip } from './index';
+
+describe('Chip', () => {
+  it('renders with correct text', () => {
+    render(<Chip>Tag</Chip>);
+    expect(screen.getByRole('button', { name: 'Tag' })).toBeInTheDocument();
+  });
+
+  it('applies variant classes', () => {
+    render(<Chip variant="outlined">Outlined</Chip>);
+    expect(screen.getByRole('button', { name: 'Outlined' })).toHaveClass('outlined');
+  });
+
+  it('sets aria-pressed for selected state', () => {
+    const { rerender } = render(<Chip selected>Active</Chip>);
+    expect(screen.getByRole('button', { name: 'Active' })).toHaveAttribute('aria-pressed', 'true');
+
+    rerender(<Chip selected={false}>Active</Chip>);
+    expect(screen.getByRole('button', { name: 'Active' })).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('renders remove button with aria-label when onRemove is provided', () => {
+    const handleRemove = vi.fn();
+    render(<Chip onRemove={handleRemove}>Removable</Chip>);
+    expect(screen.getByRole('button', { name: /remove removable/i })).toBeInTheDocument();
+  });
+
+  it('fires onRemove when remove button is clicked', async () => {
+    const handleRemove = vi.fn();
+    const user = userEvent.setup();
+    render(<Chip onRemove={handleRemove}>Delete me</Chip>);
+    await user.click(screen.getByRole('button', { name: /remove delete me/i }));
+    expect(handleRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires onClick callback', async () => {
+    const handleClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Chip onClick={handleClick}>Clickable</Chip>);
+    await user.click(screen.getByRole('button', { name: 'Clickable' }));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Chip>Accessible chip</Chip>);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/CodeBlock/CodeBlock.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
+import { CodeBlock } from './index';
+
+// Mock shiki to avoid loading real syntax highlighting in tests
+vi.mock('shiki', () => ({
+  codeToHtml: vi.fn(() => Promise.resolve('<pre class="shiki"><code>highlighted code</code></pre>')),
+}));
+
+describe('CodeBlock', () => {
+  it('renders pre and code elements', async () => {
+    const { container } = render(<CodeBlock code="const x = 1;" />);
+    // Initially shows loading state with pre/code
+    expect(container.querySelector('pre')).toBeInTheDocument();
+    expect(container.querySelector('code')).toBeInTheDocument();
+  });
+
+  it('renders a copy button by default', () => {
+    render(<CodeBlock code="const x = 1;" />);
+    expect(screen.getByRole('button', { name: /copy code/i })).toBeInTheDocument();
+  });
+
+  it('hides copy button when showCopy is false', () => {
+    render(<CodeBlock code="const x = 1;" showCopy={false} />);
+    expect(screen.queryByRole('button', { name: /copy/i })).not.toBeInTheDocument();
+  });
+
+  it('shows language-highlighted content after shiki resolves', async () => {
+    render(<CodeBlock code="const x = 1;" language="typescript" />);
+    await waitFor(() => {
+      expect(screen.getByText('highlighted code')).toBeInTheDocument();
+    });
+  });
+
+  it('renders title and caption when provided', () => {
+    render(<CodeBlock code="x = 1" title="Example" caption="A simple example" />);
+    expect(screen.getByText('Example')).toBeInTheDocument();
+    expect(screen.getByText('A simple example')).toBeInTheDocument();
+  });
+
+  it('renders filename in header', () => {
+    render(<CodeBlock code="x = 1" filename="app.ts" />);
+    expect(screen.getByText('app.ts')).toBeInTheDocument();
+  });
+
+  it('copies code to clipboard on copy button click', async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      writable: true,
+      configurable: true,
+    });
+
+    render(<CodeBlock code="const x = 1;" />);
+    await user.click(screen.getByRole('button', { name: /copy code/i }));
+    expect(writeText).toHaveBeenCalledWith('const x = 1;');
+  });
+
+  it('supports collapsible mode', async () => {
+    const user = userEvent.setup();
+    const longCode = Array.from({ length: 20 }, (_, i) => `line ${i + 1}`).join('\n');
+    render(<CodeBlock code={longCode} collapsible defaultCollapsed collapsedLines={5} />);
+    // Should show expand button
+    const expandBtn = screen.getByRole('button', { name: /expand code/i });
+    expect(expandBtn).toBeInTheDocument();
+    expect(expandBtn).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(expandBtn);
+    const collapseBtn = screen.getByRole('button', { name: /collapse code/i });
+    expect(collapseBtn).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<CodeBlock code="const x = 1;" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Collapsible/Collapsible.test.tsx

@@ -0,0 +1,103 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Collapsible } from './index';
+
+function renderCollapsible(props: Partial<React.ComponentProps<typeof Collapsible>> = {}) {
+  return render(
+    <Collapsible {...props}>
+      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+      <Collapsible.Content>Collapsible content here</Collapsible.Content>
+    </Collapsible>
+  );
+}
+
+describe('Collapsible', () => {
+  it('renders the trigger', () => {
+    renderCollapsible();
+    expect(screen.getByRole('button', { name: /toggle/i })).toBeInTheDocument();
+  });
+
+  it('opens content when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    renderCollapsible();
+
+    expect(screen.queryByText('Collapsible content here')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /toggle/i }));
+    expect(screen.getByText('Collapsible content here')).toBeInTheDocument();
+  });
+
+  it('closes content when trigger is clicked again', async () => {
+    const user = userEvent.setup();
+    renderCollapsible({ defaultOpen: true });
+
+    expect(screen.getByText('Collapsible content here')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /toggle/i }));
+    expect(screen.queryByText('Collapsible content here')).not.toBeInTheDocument();
+  });
+
+  it('sets aria-expanded on the trigger', async () => {
+    const user = userEvent.setup();
+    renderCollapsible();
+
+    const trigger = screen.getByRole('button', { name: /toggle/i });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('links trigger aria-controls to content id', () => {
+    renderCollapsible({ defaultOpen: true });
+    const trigger = screen.getByRole('button', { name: /toggle/i });
+    const contentId = trigger.getAttribute('aria-controls');
+    expect(contentId).toBeTruthy();
+    expect(document.getElementById(contentId!)).toBeInTheDocument();
+  });
+
+  it('supports controlled open prop', () => {
+    const { rerender } = render(
+      <Collapsible open={false}>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible>
+    );
+
+    expect(screen.queryByText('Content')).not.toBeInTheDocument();
+
+    rerender(
+      <Collapsible open={true}>
+        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+        <Collapsible.Content>Content</Collapsible.Content>
+      </Collapsible>
+    );
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('fires onOpenChange callback', async () => {
+    const onOpenChange = vi.fn();
+    const user = userEvent.setup();
+    renderCollapsible({ onOpenChange });
+
+    await user.click(screen.getByRole('button', { name: /toggle/i }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it('does not toggle when disabled', async () => {
+    const user = userEvent.setup();
+    renderCollapsible({ disabled: true });
+
+    const trigger = screen.getByRole('button', { name: /toggle/i });
+    expect(trigger).toBeDisabled();
+
+    await user.click(trigger);
+    expect(screen.queryByText('Collapsible content here')).not.toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = renderCollapsible({ defaultOpen: true });
+    await expectNoA11yViolations(container);
+  });
+});