@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/DataTable/DataTable.test.tsx

@@ -1,233 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { DataTable, createColumns } from './index';
-
-type Person = { id: string; name: string; age: number };
-
-const columns = createColumns<Person>([
-  { key: 'name', header: 'Name' },
-  { key: 'age', header: 'Age' },
-]);
-
-const data: Person[] = [
-  { id: '1', name: 'Alice', age: 30 },
-  { id: '2', name: 'Bob', age: 25 },
-  { id: '3', name: 'Carol', age: 35 },
-];
-
-describe('DataTable', () => {
-  it('renders a table element with column headers', () => {
-    render(<DataTable columns={columns} data={data} aria-label="People" />);
-    expect(screen.getByRole('table')).toBeInTheDocument();
-    const headers = screen.getAllByRole('columnheader');
-    expect(headers).toHaveLength(2);
-    expect(headers[0]).toHaveAttribute('scope', 'col');
-    expect(headers[0]).toHaveTextContent('Name');
-    expect(headers[1]).toHaveTextContent('Age');
-  });
-
-  it('renders data rows', () => {
-    render(<DataTable columns={columns} data={data} aria-label="People" />);
-    const rows = screen.getAllByRole('row');
-    // 1 header row + 3 data rows
-    expect(rows).toHaveLength(4);
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-    expect(screen.getByText('25')).toBeInTheDocument();
-  });
-
-  it('renders caption when provided', () => {
-    render(<DataTable columns={columns} data={data} caption="People Table" aria-label="People" />);
-    expect(screen.getByText('People Table')).toBeInTheDocument();
-  });
-
-  it('shows empty state message when data is empty', () => {
-    render(
-      <DataTable
-        columns={columns}
-        data={[]}
-        emptyMessage="Nothing here"
-        caption="People Table"
-        aria-label="People"
-      />
-    );
-    expect(screen.getByText('Nothing here')).toBeInTheDocument();
-    expect(screen.getByRole('table', { name: /people/i })).toBeInTheDocument();
-    expect(screen.getByText('People Table')).toBeInTheDocument();
-  });
-
-  it('defaults to "No data available" empty message', () => {
-    render(<DataTable columns={columns} data={[]} aria-label="People" />);
-    expect(screen.getByText('No data available')).toBeInTheDocument();
-  });
-
-  it('supports sortable columns with aria-sort', async () => {
-    const user = userEvent.setup();
-    render(<DataTable columns={columns} data={data} sortable aria-label="People" />);
-    const headers = screen.getAllByRole('columnheader');
-    // Initially aria-sort="none" for sortable columns
-    expect(headers[0]).toHaveAttribute('aria-sort', 'none');
-
-    // Click the sort button inside the first header
-    const sortButton = headers[0].querySelector('button')!;
-    await user.click(sortButton);
-    expect(headers[0]).toHaveAttribute('aria-sort', 'ascending');
-
-    await user.click(sortButton);
-    expect(headers[0]).toHaveAttribute('aria-sort', 'descending');
-  });
-
-  it('calls onRowClick when a row is clicked', async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
-    render(<DataTable columns={columns} data={data} onRowClick={handleClick} aria-label="People" />);
-    const rows = screen.getAllByRole('row');
-    // rows[0] is header, rows[1] is first data row
-    await user.click(rows[1]);
-    expect(handleClick).toHaveBeenCalledWith(data[0]);
-  });
-
-  it('applies striped class when striped prop is true', () => {
-    const { container } = render(<DataTable columns={columns} data={data} striped aria-label="People" />);
-    expect(container.querySelector('.striped')).toBeInTheDocument();
-  });
-
-  it('createColumns helper generates proper column defs', () => {
-    const cols = createColumns<Person>([
-      { key: 'name', header: 'Full Name', width: 200 },
-      { key: 'age', header: 'Years', cell: (row) => `${row.age} years` },
-    ]);
-    expect(cols).toHaveLength(2);
-    expect(cols[0].id).toBe('name');
-    expect(cols[0].header).toBe('Full Name');
-    expect(cols[0].size).toBe(200);
-    expect(cols[1].id).toBe('age');
-  });
-
-  it('supports row selection', () => {
-    render(
-      <DataTable
-        columns={columns}
-        data={data}
-        selectable
-        rowSelection={{ '1': true }}
-        getRowId={(row) => row.id}
-        aria-label="People"
-      />
-    );
-    const rows = screen.getAllByRole('row');
-    // First data row (id='1') should have data-selected
-    expect(rows[1]).toHaveAttribute('data-selected');
-  });
-
-  it('supports keyboard activation of clickable rows', async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
-    render(<DataTable columns={columns} data={data} onRowClick={handleClick} aria-label="People" />);
-    const rows = screen.getAllByRole('row');
-    rows[1].focus();
-    await user.keyboard('{Enter}');
-    expect(handleClick).toHaveBeenCalledWith(data[0]);
-  });
-
-  it('renders checkbox column when showCheckbox and selectable', async () => {
-    const user = userEvent.setup();
-    render(
-      <DataTable
-        columns={columns}
-        data={data}
-        selectable
-        showCheckbox
-        getRowId={(row) => row.id}
-        aria-label="People"
-      />
-    );
-    // 2 data columns + 1 checkbox column = 3 headers
-    const headers = screen.getAllByRole('columnheader');
-    expect(headers).toHaveLength(3);
-
-    // "Select all" checkbox in header
-    const selectAll = screen.getByRole('checkbox', { name: 'Select all rows' });
-    expect(selectAll).toBeInTheDocument();
-
-    // Individual row checkboxes
-    const rowCheckboxes = screen.getAllByRole('checkbox', { name: /Select row/ });
-    expect(rowCheckboxes).toHaveLength(3);
-
-    // Click a row checkbox toggles selection
-    await user.click(rowCheckboxes[0]);
-    expect(rowCheckboxes[0]).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('does not render checkbox column when only showCheckbox without selectable', () => {
-    render(
-      <DataTable
-        columns={columns}
-        data={data}
-        showCheckbox
-        aria-label="People"
-      />
-    );
-    // Should only have the 2 data columns
-    expect(screen.getAllByRole('columnheader')).toHaveLength(2);
-    expect(screen.queryByLabelText('Select all rows')).not.toBeInTheDocument();
-  });
-
-  it('renders expandable sub-rows with expand/collapse buttons', async () => {
-    type Node = { id: string; name: string; children?: Node[] };
-    const treeData: Node[] = [
-      {
-        id: '1', name: 'Parent',
-        children: [
-          { id: '1.1', name: 'Child A' },
-          { id: '1.2', name: 'Child B' },
-        ],
-      },
-      { id: '2', name: 'Standalone' },
-    ];
-    const treeCols = createColumns<Node>([
-      { key: 'name', header: 'Name' },
-    ]);
-
-    const user = userEvent.setup();
-    render(
-      <DataTable
-        columns={treeCols}
-        data={treeData}
-        getSubRows={(row) => row.children}
-        getRowId={(row) => row.id}
-        aria-label="Tree"
-      />
-    );
-
-    // Initially only top-level rows visible (1 header + 2 data)
-    expect(screen.getAllByRole('row')).toHaveLength(3);
-    expect(screen.getByText('Parent')).toBeInTheDocument();
-    expect(screen.getByText('Standalone')).toBeInTheDocument();
-
-    // Expand button present for parent row
-    const expandBtn = screen.getByLabelText('Expand row');
-    expect(expandBtn).toHaveAttribute('aria-expanded', 'false');
-
-    // Click expand to show children
-    await user.click(expandBtn);
-    expect(screen.getAllByRole('row')).toHaveLength(5); // 1 header + 2 top + 2 children
-    expect(screen.getByText('Child A')).toBeInTheDocument();
-    expect(screen.getByText('Child B')).toBeInTheDocument();
-
-    // Button now shows "Collapse row"
-    const collapseBtn = screen.getByLabelText('Collapse row');
-    expect(collapseBtn).toHaveAttribute('aria-expanded', 'true');
-
-    // Child rows have data-depth attribute
-    const childRows = screen.getAllByRole('row').filter(r => r.getAttribute('data-depth'));
-    expect(childRows).toHaveLength(2);
-    expect(childRows[0]).toHaveAttribute('data-depth', '1');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <DataTable columns={columns} data={data} caption="People Table" aria-label="People" />
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/DatePicker/DatePicker.fragment.tsx

@@ -1,250 +0,0 @@
-import React, { useState } from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { DatePicker } from '.';
-import type { DateRange } from '.';
-import { subDays } from 'date-fns';
-
-// Stateful wrapper for single date demos
-function StatefulDatePicker(props: {
-  children: React.ReactNode;
-  placeholder?: string;
-  numberOfMonths?: number;
-  disabledDates?: any;
-  disabled?: boolean;
-}) {
-  const { children, ...rest } = props;
-  const [date, setDate] = useState<Date | null>(null);
-  return (
-    <DatePicker selected={date} onSelect={setDate} {...rest}>
-      {children}
-    </DatePicker>
-  );
-}
-
-// Stateful wrapper for range demos
-function StatefulRangePicker(props: {
-  children: React.ReactNode;
-  placeholder?: string;
-  numberOfMonths?: number;
-}) {
-  const { children, ...rest } = props;
-  const [range, setRange] = useState<DateRange | null>(null);
-  return (
-    <DatePicker mode="range" selectedRange={range} onRangeSelect={setRange} {...rest}>
-      {children}
-    </DatePicker>
-  );
-}
-
-const today = new Date();
-
-export default defineFragment({
-  component: DatePicker,
-
-  meta: {
-    name: 'DatePicker',
-    description: 'Date picker with calendar dropdown for selecting single dates or date ranges. Built on react-day-picker with seed-based theming.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['date', 'picker', 'calendar', 'range', 'form', 'input'],
-    since: '0.8.0',
-    dependencies: [
-      { name: 'react-day-picker', version: '>=9.0.0', reason: 'Calendar rendering' },
-      { name: 'date-fns', version: '>=3.0.0', reason: 'Date formatting' },
-    ],
-  },
-
-  usage: {
-    when: [
-      'Selecting a single date from a calendar',
-      'Selecting a date range (start/end)',
-      'Date inputs in forms',
-      'Filtering by date or date range',
-    ],
-    whenNot: [
-      'Time-only input - use a dedicated TimePicker',
-      'Selecting from a small set of known dates - use Select',
-      'Free-form date entry - use Input with date masking',
-    ],
-    guidelines: [
-      'Use range mode with numberOfMonths={2} for date range selection',
-      'Add presets for common ranges (Today, Last 7 days, Last 30 days)',
-      'Use disabledDates to prevent selecting past dates or unavailable dates',
-      'Provide a meaningful placeholder',
-    ],
-    accessibility: [
-      'Full keyboard navigation within the calendar grid',
-      'Arrow keys navigate between days',
-      'Escape closes the calendar',
-      'Focus returns to trigger on close',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'DatePicker trigger and content',
-      required: true,
-    },
-    mode: {
-      type: 'enum',
-      values: ['single', 'range'],
-      description: 'Selection mode',
-      default: "'single'",
-    },
-    selected: {
-      type: 'custom',
-      description: 'Controlled date (single mode). Type: Date | null',
-    },
-    selectedRange: {
-      type: 'custom',
-      description: 'Controlled range (range mode). Type: DateRange | null',
-    },
-    onSelect: {
-      type: 'function',
-      description: 'Called when a single date is selected',
-    },
-    onRangeSelect: {
-      type: 'function',
-      description: 'Called when a date range is selected',
-    },
-    numberOfMonths: {
-      type: 'number',
-      description: 'Number of months displayed side-by-side',
-      default: '1',
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disable the picker',
-      default: 'false',
-    },
-    disabledDates: {
-      type: 'custom',
-      description: 'Dates to disable (react-day-picker Matcher | Matcher[])',
-    },
-    placeholder: {
-      type: 'string',
-      description: 'Trigger placeholder text',
-    },
-  },
-
-  relations: [
-    { component: 'Select', relationship: 'alternative', note: 'Use Select for choosing from a list of options' },
-    { component: 'Input', relationship: 'sibling', note: 'Use Input for free-form text date entry' },
-    { component: 'Popover', relationship: 'composition', note: 'DatePicker uses Popover for the calendar dropdown' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'mode: "single" | "range" - selection mode',
-      'selected: Date - controlled date (single)',
-      'selectedRange: DateRange - controlled range',
-      'onSelect: (date) => void - single selection handler',
-      'onRangeSelect: (range) => void - range selection handler',
-      'numberOfMonths: number - months visible (default 1)',
-      'disabled: boolean - disable picker',
-      'disabledDates: Matcher - dates to disable',
-    ],
-    scenarioTags: [
-      'form.date',
-      'form.daterange',
-      'input.calendar',
-    ],
-    a11yRules: ['A11Y_DATEPICKER_KEYBOARD', 'A11Y_DATEPICKER_LABEL'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Trigger', 'Content', 'Calendar', 'Preset'],
-    requiredChildren: ['Trigger', 'Content'],
-    commonPatterns: [
-      '<DatePicker selected={date} onSelect={setDate}><DatePicker.Trigger placeholder="Pick a date" /><DatePicker.Content><DatePicker.Calendar /></DatePicker.Content></DatePicker>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Single date picker with default settings',
-      render: () => (
-        <StatefulDatePicker placeholder="Pick a date">
-          <DatePicker.Trigger />
-          <DatePicker.Content>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </StatefulDatePicker>
-      ),
-    },
-    {
-      name: 'Date Range',
-      description: 'Range mode with dual months',
-      render: () => (
-        <StatefulRangePicker placeholder="Select date range" numberOfMonths={2}>
-          <DatePicker.Trigger />
-          <DatePicker.Content>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </StatefulRangePicker>
-      ),
-    },
-    {
-      name: 'Multi-Month',
-      description: 'Single date with 3 months visible',
-      render: () => (
-        <StatefulDatePicker placeholder="Pick a date" numberOfMonths={3}>
-          <DatePicker.Trigger />
-          <DatePicker.Content>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </StatefulDatePicker>
-      ),
-    },
-    {
-      name: 'Disabled Dates',
-      description: 'Past dates disabled',
-      render: () => (
-        <StatefulDatePicker
-          placeholder="Select a future date"
-          disabledDates={{ before: new Date() }}
-        >
-          <DatePicker.Trigger />
-          <DatePicker.Content>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </StatefulDatePicker>
-      ),
-    },
-    {
-      name: 'With Presets',
-      description: 'Range picker with sidebar preset buttons',
-      render: () => (
-        <StatefulRangePicker placeholder="Select date range" numberOfMonths={2}>
-          <DatePicker.Trigger />
-          <DatePicker.Content>
-            <div style={{ display: 'flex', gap: '1rem' }}>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', minWidth: '8rem' }}>
-                <DatePicker.Preset range={{ from: today, to: today }}>Today</DatePicker.Preset>
-                <DatePicker.Preset range={{ from: subDays(today, 7), to: today }}>Last 7 days</DatePicker.Preset>
-                <DatePicker.Preset range={{ from: subDays(today, 30), to: today }}>Last 30 days</DatePicker.Preset>
-                <DatePicker.Preset range={{ from: subDays(today, 90), to: today }}>Last 90 days</DatePicker.Preset>
-              </div>
-              <DatePicker.Calendar />
-            </div>
-          </DatePicker.Content>
-        </StatefulRangePicker>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Disabled date picker',
-      render: () => (
-        <StatefulDatePicker placeholder="Pick a date" disabled>
-          <DatePicker.Trigger />
-          <DatePicker.Content>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </StatefulDatePicker>
-      ),
-    },
-  ],
-});