@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/Chart/Chart.fragment.tsx

@@ -1,226 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import {
-  LineChart,
-  Line,
-  BarChart,
-  Bar,
-  AreaChart,
-  Area,
-  PieChart,
-  Pie,
-  Cell,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-} from 'recharts';
-import { ChartContainer, ChartTooltip, ChartLegend } from '.';
-
-// Sample data
-const monthlyData = [
-  { month: 'Jan', revenue: 4000, users: 2400 },
-  { month: 'Feb', revenue: 3000, users: 1398 },
-  { month: 'Mar', revenue: 5000, users: 3800 },
-  { month: 'Apr', revenue: 4500, users: 3200 },
-  { month: 'May', revenue: 6000, users: 4300 },
-  { month: 'Jun', revenue: 5500, users: 4100 },
-];
-
-const deviceData = [
-  { device: 'Desktop', sessions: 4500 },
-  { device: 'Mobile', sessions: 3200 },
-  { device: 'Tablet', sessions: 1800 },
-  { device: 'Other', sessions: 500 },
-];
-
-const browserData = [
-  { name: 'Chrome', value: 55, color: 'var(--fui-color-accent)' },
-  { name: 'Firefox', value: 20, color: 'var(--fui-color-info)' },
-  { name: 'Safari', value: 15, color: 'var(--fui-color-success)' },
-  { name: 'Edge', value: 10, color: 'var(--fui-color-warning)' },
-];
-
-export default defineFragment({
-  component: ChartContainer,
-
-  meta: {
-    name: 'Chart',
-    description: 'Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.',
-    category: 'display',
-    status: 'stable',
-    tags: ['chart', 'graph', 'data-visualization', 'recharts'],
-    since: '0.3.0',
-    dependencies: [
-      { name: 'recharts', version: '>=2.0.0', reason: 'Chart rendering engine' },
-    ],
-  },
-
-  usage: {
-    when: [
-      'Displaying data trends over time',
-      'Comparing categorical data',
-      'Showing distribution or composition',
-      'Dashboard data visualizations',
-    ],
-    whenNot: [
-      'Simple numeric values (use Text or Badge)',
-      'Progress toward a goal (use Progress)',
-      'Tabular data without visualization (use Table)',
-    ],
-    guidelines: [
-      'Use ChartContainer to wrap recharts chart components',
-      'Define a ChartConfig to map data keys to labels and colors (and optionally icons for custom legend/tooltip UIs)',
-      'Use FUI CSS variables for colors so charts adapt to theme changes',
-      'Use ChartTooltip and ChartLegend for consistent themed overlays',
-      'ChartTooltip and ChartLegend accept custom content renderers for advanced formatting',
-    ],
-    accessibility: [
-      'Charts include recharts accessibilityLayer by default',
-      'Provide meaningful labels in ChartConfig for screen readers',
-      'Consider providing a data table alternative for complex charts',
-    ],
-  },
-
-  props: {
-    config: {
-      type: 'object',
-      description: 'ChartConfig mapping data keys to labels/colors (optional icon per series)',
-    },
-    children: {
-      type: 'element',
-      description: 'A recharts chart component (LineChart, BarChart, etc.)',
-    },
-    summary: {
-      type: 'string',
-      description: 'Non-visual summary announced to assistive technology users',
-    },
-    dataTable: {
-      type: 'node',
-      description: 'Optional accessible data table or textual fallback',
-    },
-  },
-
-  relations: [
-    { component: 'Card', relationship: 'parent', note: 'Charts are typically placed inside Cards' },
-    { component: 'Progress', relationship: 'alternative', note: 'Use Progress for single-value completion' },
-    { component: 'Table', relationship: 'sibling', note: 'Combine with Table for full data views' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'config: ChartConfig - maps data keys to labels and theme colors',
-      'children: ReactElement - recharts chart component',
-      'Chart.Tooltip / Chart.Legend support custom content renderers for advanced overlays',
-    ],
-    scenarioTags: [
-      'display.chart',
-      'data.visualization',
-      'dashboard.analytics',
-    ],
-    a11yRules: ['A11Y_CHART_LABEL'],
-  },
-
-  variants: [
-    {
-      name: 'Line Chart',
-      description: 'Multi-series line chart showing trends over time',
-      render: () => (
-        <div style={{ width: '100%', height: 300 }}>
-          <ChartContainer
-            config={{
-              revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },
-              users: { label: 'Users', color: 'var(--fui-color-info)' },
-            }}
-          >
-            <LineChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="month" />
-              <YAxis />
-              <ChartTooltip />
-              <ChartLegend />
-              <Line type="monotone" dataKey="revenue" stroke="var(--fui-color-accent)" strokeWidth={2} dot={false} />
-              <Line type="monotone" dataKey="users" stroke="var(--fui-color-info)" strokeWidth={2} dot={false} />
-            </LineChart>
-          </ChartContainer>
-        </div>
-      ),
-    },
-    {
-      name: 'Bar Chart',
-      description: 'Categorical bar chart comparing device sessions',
-      render: () => (
-        <div style={{ width: '100%', height: 300 }}>
-          <ChartContainer
-            config={{
-              sessions: { label: 'Sessions', color: 'var(--fui-color-accent)' },
-            }}
-          >
-            <BarChart data={deviceData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="device" />
-              <YAxis />
-              <ChartTooltip />
-              <Bar dataKey="sessions" fill="var(--fui-color-accent)" radius={[4, 4, 0, 0]} />
-            </BarChart>
-          </ChartContainer>
-        </div>
-      ),
-    },
-    {
-      name: 'Area Chart',
-      description: 'Filled area chart showing revenue trend',
-      render: () => (
-        <div style={{ width: '100%', height: 300 }}>
-          <ChartContainer
-            config={{
-              revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },
-            }}
-          >
-            <AreaChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="month" />
-              <YAxis />
-              <ChartTooltip />
-              <Area type="monotone" dataKey="revenue" stroke="var(--fui-color-accent)" fill="var(--fui-color-accent)" fillOpacity={0.15} strokeWidth={2} />
-            </AreaChart>
-          </ChartContainer>
-        </div>
-      ),
-    },
-    {
-      name: 'Pie Chart',
-      description: 'Donut chart showing browser share distribution',
-      render: () => (
-        <div style={{ width: '100%', height: 300 }}>
-          <ChartContainer
-            config={{
-              Chrome: { label: 'Chrome', color: 'var(--fui-color-accent)' },
-              Firefox: { label: 'Firefox', color: 'var(--fui-color-info)' },
-              Safari: { label: 'Safari', color: 'var(--fui-color-success)' },
-              Edge: { label: 'Edge', color: 'var(--fui-color-warning)' },
-            }}
-          >
-            <PieChart>
-              <ChartTooltip />
-              <ChartLegend />
-              <Pie
-                data={browserData}
-                dataKey="value"
-                nameKey="name"
-                cx="50%"
-                cy="50%"
-                innerRadius={60}
-                outerRadius={90}
-                strokeWidth={2}
-              >
-                {browserData.map((entry) => (
-                  <Cell key={entry.name} fill={entry.color} />
-                ))}
-              </Pie>
-            </PieChart>
-          </ChartContainer>
-        </div>
-      ),
-    },
-  ],
-});

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

@@ -1,123 +0,0 @@
-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: _content, ...props }: any) => <div data-testid="recharts-tooltip" {...props} />,
-  Legend: ({ content: _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.fragment.tsx

@@ -1,192 +0,0 @@
-import React, { useState } from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { Checkbox } from '.';
-
-// Stateful wrapper for interactive demos
-function StatefulCheckbox(props: React.ComponentProps<typeof Checkbox>) {
-  const [checked, setChecked] = useState(props.checked ?? props.defaultChecked ?? false);
-  return <Checkbox {...props} checked={checked} onCheckedChange={setChecked} />;
-}
-
-export default defineFragment({
-  component: Checkbox,
-
-  meta: {
-    name: 'Checkbox',
-    description: 'Binary toggle for form fields. Use for options that require explicit submission, unlike Switch which takes effect immediately.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['checkbox', 'form', 'boolean', 'selection', 'input'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Form fields requiring explicit submission',
-      'Multi-select from a list of options',
-      'Terms and conditions acceptance',
-      'Filter or preference checklists',
-    ],
-    whenNot: [
-      'Immediate effect settings (use Switch)',
-      'Single selection from options (use RadioGroup)',
-      'Selecting from many options (use Select)',
-    ],
-    guidelines: [
-      'Always include a visible label',
-      'Use description for additional context when needed',
-      'Group related checkboxes visually',
-      'Use indeterminate state for parent/child relationships',
-    ],
-    accessibility: [
-      'Proper label association',
-      'Keyboard accessible (Space to toggle)',
-      'Visible focus indicator',
-      'Indeterminate state properly announced',
-    ],
-  },
-
-  props: {
-    checked: {
-      type: 'boolean',
-      description: 'Controlled checked state',
-    },
-    defaultChecked: {
-      type: 'boolean',
-      description: 'Default checked state (uncontrolled)',
-    },
-    onCheckedChange: {
-      type: 'function',
-      description: 'Called when checked state changes',
-    },
-    onChange: {
-      type: 'function',
-      description: 'Alias for onCheckedChange: (checked: boolean) => void',
-    },
-    indeterminate: {
-      type: 'boolean',
-      description: 'Indeterminate state (partial selection)',
-      default: 'false',
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disable the checkbox',
-      default: 'false',
-    },
-    label: {
-      type: 'string',
-      description: 'Label text',
-    },
-    description: {
-      type: 'string',
-      description: 'Description text below the label',
-    },
-    size: {
-      type: 'enum',
-      description: 'Checkbox size',
-      values: ['sm', 'md', 'lg'],
-      default: 'md',
-    },
-    controlClassName: {
-      type: 'string',
-      description: 'Class name for the checkbox control element (stable styling target)',
-    },
-    contentClassName: {
-      type: 'string',
-      description: 'Class name for the label/description content wrapper',
-    },
-  },
-
-  relations: [
-    { component: 'Switch', relationship: 'alternative', note: 'Use Switch for immediate-effect settings' },
-    { component: 'Input', relationship: 'sibling', note: 'Checkbox handles boolean; Input handles text' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'checked: boolean - controlled checked state',
-      'onCheckedChange: (checked) => void - change handler',
-      'onChange: (checked) => void - alias for onCheckedChange',
-      'indeterminate: boolean - partial selection state',
-      'label: string - checkbox label',
-      'description: string - helper text',
-      'controlClassName/contentClassName - explicit styling targets for control and content',
-    ],
-    scenarioTags: [
-      'form.checkbox',
-      'form.boolean',
-      'selection.multi',
-    ],
-    a11yRules: ['A11Y_CHECKBOX_LABEL', 'A11Y_CHECKBOX_FOCUS', 'A11Y_TARGET_SIZE_MIN'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic checkbox with label',
-      render: () => <StatefulCheckbox label="Accept terms and conditions" />,
-    },
-    {
-      name: 'With Description',
-      description: 'Checkbox with helper text',
-      render: () => (
-        <StatefulCheckbox
-          label="Email notifications"
-          description="Receive email updates about your account activity"
-        />
-      ),
-    },
-    {
-      name: 'Checked',
-      description: 'Pre-checked checkbox',
-      render: () => <StatefulCheckbox defaultChecked label="Subscribe to newsletter" />,
-    },
-    {
-      name: 'Indeterminate',
-      description: 'Partial selection state',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          <Checkbox indeterminate label="Select all" />
-          <div style={{ marginLeft: '24px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
-            <StatefulCheckbox defaultChecked label="Option 1" />
-            <StatefulCheckbox label="Option 2" />
-            <StatefulCheckbox defaultChecked label="Option 3" />
-          </div>
-        </div>
-      ),
-    },
-    {
-      name: 'Sizes',
-      description: 'Available size options',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <StatefulCheckbox size="sm" label="Small checkbox" />
-          <StatefulCheckbox size="md" label="Medium checkbox" />
-          <StatefulCheckbox size="lg" label="Large checkbox" />
-        </div>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Non-interactive states',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          <Checkbox disabled label="Disabled unchecked" />
-          <Checkbox disabled checked label="Disabled checked" />
-        </div>
-      ),
-    },
-    {
-      name: 'Custom Styling Targets',
-      description: 'Use explicit class targets for control vs content styling',
-      render: () => (
-        <Checkbox
-          label="Styled checkbox"
-          description="Control and content wrappers can be targeted independently"
-          controlClassName="demo-checkbox-control"
-          contentClassName="demo-checkbox-content"
-        />
-      ),
-    },
-  ],
-});

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

@@ -1,63 +0,0 @@
-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);
-  });
-});