@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/DatePicker/DatePicker.test.tsx

@@ -1,343 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
-import { DatePicker } from './index';
-import type { DateRange } from './index';
-
-function renderDatePicker(props: {
-  onSelect?: (date: Date | null) => void;
-  disabled?: boolean;
-  selected?: Date | null;
-  placeholder?: string;
-} = {}) {
-  return render(
-    <DatePicker
-      placeholder={props.placeholder ?? 'Pick a date'}
-      onSelect={props.onSelect}
-      disabled={props.disabled}
-      selected={props.selected}
-    >
-      <DatePicker.Trigger />
-      <DatePicker.Content>
-        <DatePicker.Calendar />
-      </DatePicker.Content>
-    </DatePicker>
-  );
-}
-
-function renderRangePicker(props: {
-  onRangeSelect?: (range: DateRange | null) => void;
-  selectedRange?: DateRange | null;
-  numberOfMonths?: number;
-  placeholder?: string;
-} = {}) {
-  return render(
-    <DatePicker
-      mode="range"
-      placeholder={props.placeholder ?? 'Select date range'}
-      onRangeSelect={props.onRangeSelect}
-      selectedRange={props.selectedRange}
-      numberOfMonths={props.numberOfMonths ?? 2}
-    >
-      <DatePicker.Trigger />
-      <DatePicker.Content>
-        <DatePicker.Calendar />
-      </DatePicker.Content>
-    </DatePicker>
-  );
-}
-
-describe('DatePicker', () => {
-  describe('rendering', () => {
-    it('renders a trigger button', () => {
-      renderDatePicker();
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('shows placeholder text when no value selected', () => {
-      renderDatePicker({ placeholder: 'Choose date' });
-      expect(screen.getByText('Choose date')).toBeInTheDocument();
-    });
-
-    it('shows formatted date when selected', () => {
-      renderDatePicker({ selected: new Date(2025, 0, 15) });
-      // format(date, 'PPP') produces "January 15th, 2025"
-      expect(screen.getByRole('button')).toHaveTextContent('January');
-      expect(screen.getByRole('button')).toHaveTextContent('2025');
-    });
-
-    it('shows formatted range when range selected', () => {
-      const range: DateRange = {
-        from: new Date(2025, 0, 10),
-        to: new Date(2025, 0, 20),
-      };
-      renderRangePicker({ selectedRange: range });
-      expect(screen.getByRole('button')).toHaveTextContent('Jan 10, 2025');
-      expect(screen.getByRole('button')).toHaveTextContent('Jan 20, 2025');
-    });
-  });
-
-  describe('interaction', () => {
-    it('opens on click', async () => {
-      const user = userEvent.setup();
-      renderDatePicker();
-
-      await user.click(screen.getByRole('button'));
-      // DayPicker renders a grid
-      expect(await screen.findByRole('grid')).toBeInTheDocument();
-    });
-
-    it('selects a date on click', async () => {
-      const user = userEvent.setup();
-      const onSelect = vi.fn();
-      renderDatePicker({ onSelect });
-
-      await user.click(screen.getByRole('button'));
-      await screen.findByRole('grid');
-
-      // Click the 15th day button (find any visible "15" in a grid cell)
-      const dayButtons = screen.getAllByRole('gridcell');
-      const day15 = dayButtons.find((cell) => {
-        const btn = cell.querySelector('button');
-        return btn?.textContent === '15';
-      });
-      expect(day15).toBeDefined();
-      const btn = day15!.querySelector('button')!;
-      await user.click(btn);
-
-      expect(onSelect).toHaveBeenCalledWith(expect.any(Date));
-    });
-
-    it('auto-closes after single date selection', async () => {
-      const user = userEvent.setup();
-      renderDatePicker({ onSelect: vi.fn() });
-
-      await user.click(screen.getByRole('button'));
-      await screen.findByRole('grid');
-
-      const dayButtons = screen.getAllByRole('gridcell');
-      const visibleDay = dayButtons.find((cell) => {
-        const btn = cell.querySelector('button');
-        return btn?.textContent === '10';
-      });
-      const btn = visibleDay!.querySelector('button')!;
-      await user.click(btn);
-
-      await waitFor(() => {
-        expect(screen.queryByRole('grid')).not.toBeInTheDocument();
-      }, { timeout: 500 });
-    });
-
-    it('range mode: stays open after both clicks (no auto-close)', async () => {
-      const user = userEvent.setup();
-      const onRangeSelect = vi.fn();
-      renderRangePicker({ onRangeSelect, numberOfMonths: 1 });
-
-      await user.click(screen.getByRole('button'));
-      await screen.findByRole('grid');
-
-      const dayButtons = screen.getAllByRole('gridcell');
-      const day10 = dayButtons.find((cell) => {
-        const btn = cell.querySelector('button');
-        return btn?.textContent === '10';
-      });
-      await user.click(day10!.querySelector('button')!);
-
-      // Should still be open after first click
-      expect(screen.getByRole('grid')).toBeInTheDocument();
-
-      const day20 = dayButtons.find((cell) => {
-        const btn = cell.querySelector('button');
-        return btn?.textContent === '20';
-      });
-      await user.click(day20!.querySelector('button')!);
-
-      // Range mode never auto-closes — user closes via Escape or click-outside
-      expect(screen.getByRole('grid')).toBeInTheDocument();
-    });
-
-    it('preset click selects a date', async () => {
-      const user = userEvent.setup();
-      const onSelect = vi.fn();
-      const presetDate = new Date(2025, 5, 1);
-
-      render(
-        <DatePicker onSelect={onSelect}>
-          <DatePicker.Trigger placeholder="Pick a date" />
-          <DatePicker.Content>
-            <DatePicker.Preset date={presetDate}>June 1st</DatePicker.Preset>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </DatePicker>
-      );
-
-      await user.click(screen.getByRole('button', { name: /pick a date/i }));
-      await user.click(await screen.findByText('June 1st'));
-
-      expect(onSelect).toHaveBeenCalledWith(presetDate);
-    });
-
-    it('preset forwards html props', async () => {
-      const user = userEvent.setup();
-      const onSelect = vi.fn();
-      const onPresetClick = vi.fn();
-      const presetDate = new Date(2025, 5, 2);
-
-      render(
-        <DatePicker onSelect={onSelect}>
-          <DatePicker.Trigger placeholder="Pick a date" />
-          <DatePicker.Content>
-            <DatePicker.Preset
-              id="preset-june-2"
-              data-testid="preset"
-              aria-label="Preset June 2"
-              onClick={onPresetClick}
-              date={presetDate}
-            >
-              June 2nd
-            </DatePicker.Preset>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </DatePicker>
-      );
-
-      await user.click(screen.getByRole('button', { name: /pick a date/i }));
-      await user.click(screen.getByTestId('preset'));
-
-      expect(screen.getByTestId('preset')).toHaveAttribute('id', 'preset-june-2');
-      expect(onPresetClick).toHaveBeenCalled();
-      expect(onSelect).toHaveBeenCalledWith(presetDate);
-    });
-  });
-
-  describe('keyboard', () => {
-    it('Escape closes the calendar', async () => {
-      const user = userEvent.setup();
-      renderDatePicker();
-
-      await user.click(screen.getByRole('button'));
-      await screen.findByRole('grid');
-
-      await user.keyboard('{Escape}');
-      await waitFor(() => {
-        expect(screen.queryByRole('grid')).not.toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('disabled', () => {
-    it('trigger is disabled when disabled prop is true', () => {
-      renderDatePicker({ disabled: true });
-      expect(screen.getByRole('button')).toBeDisabled();
-    });
-  });
-
-  describe('controlled', () => {
-    it('reflects external selected value', () => {
-      const date = new Date(2025, 2, 20);
-      renderDatePicker({ selected: date });
-      expect(screen.getByRole('button')).toHaveTextContent('March');
-      expect(screen.getByRole('button')).toHaveTextContent('2025');
-    });
-
-    it('reflects external selectedRange value', () => {
-      const range: DateRange = {
-        from: new Date(2025, 3, 1),
-        to: new Date(2025, 3, 7),
-      };
-      renderRangePicker({ selectedRange: range });
-      expect(screen.getByRole('button')).toHaveTextContent('Apr 01, 2025');
-      expect(screen.getByRole('button')).toHaveTextContent('Apr 07, 2025');
-    });
-
-    it('requests close after single selection when open is controlled', async () => {
-      const user = userEvent.setup();
-      const onOpenChange = vi.fn();
-      const onSelect = vi.fn();
-
-      render(
-        <DatePicker open onOpenChange={onOpenChange} onSelect={onSelect}>
-          <DatePicker.Trigger placeholder="Pick a date" />
-          <DatePicker.Content>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </DatePicker>
-      );
-
-      await screen.findByRole('grid');
-
-      const dayButtons = screen.getAllByRole('gridcell');
-      const day10 = dayButtons.find((cell) => {
-        const btn = cell.querySelector('button');
-        return btn?.textContent === '10';
-      });
-
-      await user.click(day10!.querySelector('button')!);
-
-      await waitFor(() => {
-        expect(onSelect).toHaveBeenCalledWith(expect.any(Date));
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-      }, { timeout: 500 });
-    });
-  });
-
-  describe('forms', () => {
-    it('serializes selected date to a date-only hidden input value', () => {
-      render(
-        <DatePicker name="appointment" selected={new Date(2025, 0, 15)}>
-          <DatePicker.Trigger />
-          <DatePicker.Content>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </DatePicker>
-      );
-
-      const input = document.querySelector<HTMLInputElement>('input[type="hidden"][name="appointment"]');
-      expect(input).toBeTruthy();
-      expect(input?.value).toBe('2025-01-15');
-    });
-  });
-
-  describe('multi-month', () => {
-    it('renders correct number of month panels', async () => {
-      const user = userEvent.setup();
-      renderRangePicker({ numberOfMonths: 2 });
-
-      await user.click(screen.getByRole('button'));
-      const grids = await screen.findAllByRole('grid');
-      expect(grids).toHaveLength(2);
-    });
-  });
-
-  describe('a11y', () => {
-    it('has no accessibility violations (closed)', async () => {
-      const { container } = render(
-        <DatePicker>
-          <DatePicker.Trigger aria-label="Pick a date" placeholder="Pick a date" />
-          <DatePicker.Content>
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </DatePicker>
-      );
-      await expectNoA11yViolations(container);
-    });
-
-    it('has no accessibility violations (open)', async () => {
-      const user = userEvent.setup();
-      const { container } = render(
-        <DatePicker>
-          <DatePicker.Trigger aria-label="Pick a date" placeholder="Pick a date" />
-          <DatePicker.Content aria-label="Choose date">
-            <DatePicker.Calendar />
-          </DatePicker.Content>
-        </DatePicker>
-      );
-
-      await user.click(screen.getByRole('button'));
-      await screen.findByRole('grid');
-      // Disable aria-command-name: Base UI focus guard spans have role="button" without names (upstream)
-      await expectNoA11yViolations(container, {
-        disabledRules: ['aria-command-name'],
-      });
-    });
-  });
-});

package/src/components/Dialog/Dialog.fragment.tsx

@@ -1,188 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Dialog } from '.';
-import { Button } from '../Button';
-
-export default defineFragment({
-  component: Dialog,
-
-  meta: {
-    name: 'Dialog',
-    description: 'Modal overlay for focused user interactions. Use for confirmations, forms, or content requiring full attention.',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['modal', 'dialog', 'overlay', 'popup', 'confirmation'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Confirming destructive actions (delete, discard changes)',
-      'Collecting focused input (forms, settings)',
-      'Displaying content that requires acknowledgment',
-      'Multi-step workflows that need isolation',
-    ],
-    whenNot: [
-      'Simple tooltips or hints (use Tooltip)',
-      'Contextual menus (use Menu or Popover)',
-      'Non-blocking notifications (use Toast or Alert)',
-      'Simple confirmation that can be inline (use Alert)',
-    ],
-    guidelines: [
-      'Keep dialog content focused on a single task',
-      'Provide clear primary and secondary actions',
-      'Use descriptive title that explains the purpose',
-      'Allow dismissal via backdrop click or close button for non-critical dialogs',
-      'Trap focus within the dialog for accessibility',
-    ],
-    accessibility: [
-      'Automatically traps focus within the dialog',
-      'Closes on Escape key press',
-      'Returns focus to trigger element on close',
-      'Uses role="dialog" with proper aria attributes',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Dialog content (use Dialog.Content, Dialog.Header, etc.)',
-      required: true,
-    },
-    open: {
-      type: 'boolean',
-      description: 'Controlled open state',
-    },
-    defaultOpen: {
-      type: 'boolean',
-      description: 'Default open state (uncontrolled)',
-      default: 'false',
-    },
-    onOpenChange: {
-      type: 'function',
-      description: 'Called when open state changes',
-    },
-    modal: {
-      type: 'boolean',
-      description: 'Whether to render as modal (blocks interaction with rest of page)',
-      default: 'true',
-    },
-  },
-
-  relations: [
-    { component: 'Popover', relationship: 'alternative', note: 'Use Popover for non-modal contextual content' },
-    { component: 'Menu', relationship: 'alternative', note: 'Use Menu for action lists' },
-    { component: 'Alert', relationship: 'sibling', note: 'Use Alert for inline notifications' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'open: boolean - controlled open state',
-      'onOpenChange: (open) => void - open state handler',
-      'modal: boolean - blocks page interaction (default: true)',
-      'Dialog.Content size: sm|md|lg|xl|full - dialog width',
-    ],
-    scenarioTags: [
-      'overlay.modal',
-      'form.dialog',
-      'action.confirm',
-      'workflow.step',
-    ],
-    a11yRules: ['A11Y_DIALOG_FOCUS', 'A11Y_DIALOG_ESCAPE', 'A11Y_DIALOG_LABEL'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Trigger', 'Content', 'Close', 'Header', 'Title', 'Description', 'Body', 'Footer'],
-    requiredChildren: ['Content'],
-    commonPatterns: [
-      '<Dialog><Dialog.Trigger><Button>Open</Button></Dialog.Trigger><Dialog.Content><Dialog.Header><Dialog.Title>{title}</Dialog.Title></Dialog.Header><Dialog.Body>{content}</Dialog.Body><Dialog.Footer><Dialog.Close><Button variant="secondary">Cancel</Button></Dialog.Close><Button>Confirm</Button></Dialog.Footer></Dialog.Content></Dialog>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic dialog with header, body, and footer',
-      render: () => (
-        <Dialog>
-          <Dialog.Trigger asChild>
-            <Button>Open Dialog</Button>
-          </Dialog.Trigger>
-          <Dialog.Content>
-            <Dialog.Close />
-            <Dialog.Header>
-              <Dialog.Title>Dialog Title</Dialog.Title>
-              <Dialog.Description>
-                A brief description of what this dialog is for.
-              </Dialog.Description>
-            </Dialog.Header>
-            <Dialog.Body>
-              <p>Dialog content goes here. You can include forms, text, or any other content.</p>
-            </Dialog.Body>
-            <Dialog.Footer>
-              <Dialog.Close asChild>
-                <Button variant="secondary">Cancel</Button>
-              </Dialog.Close>
-              <Button variant="primary">Confirm</Button>
-            </Dialog.Footer>
-          </Dialog.Content>
-        </Dialog>
-      ),
-    },
-    {
-      name: 'Confirmation',
-      description: 'Destructive action confirmation',
-      render: () => (
-        <Dialog>
-          <Dialog.Trigger asChild>
-            <Button variant="danger">Delete Item</Button>
-          </Dialog.Trigger>
-          <Dialog.Content size="sm">
-            <Dialog.Header>
-              <Dialog.Title>Delete item?</Dialog.Title>
-              <Dialog.Description>
-                This action cannot be undone. The item will be permanently removed.
-              </Dialog.Description>
-            </Dialog.Header>
-            <Dialog.Footer>
-              <Dialog.Close asChild>
-                <Button variant="secondary">Cancel</Button>
-              </Dialog.Close>
-              <Button variant="danger">Delete</Button>
-            </Dialog.Footer>
-          </Dialog.Content>
-        </Dialog>
-      ),
-    },
-    {
-      name: 'Large',
-      description: 'Large dialog for complex content',
-      render: () => (
-        <Dialog>
-          <Dialog.Trigger asChild>
-            <Button>Open Large Dialog</Button>
-          </Dialog.Trigger>
-          <Dialog.Content size="lg">
-            <Dialog.Close />
-            <Dialog.Header>
-              <Dialog.Title>Settings</Dialog.Title>
-              <Dialog.Description>
-                Configure your application preferences.
-              </Dialog.Description>
-            </Dialog.Header>
-            <Dialog.Body>
-              <p>This dialog has more space for complex forms or content layouts.</p>
-            </Dialog.Body>
-            <Dialog.Footer>
-              <Dialog.Close asChild>
-                <Button variant="secondary">Cancel</Button>
-              </Dialog.Close>
-              <Button variant="primary">Save Changes</Button>
-            </Dialog.Footer>
-          </Dialog.Content>
-        </Dialog>
-      ),
-    },
-  ],
-});