@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/Dialog/Dialog.test.tsx

@@ -1,300 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
-import { Dialog } from './index';
-
-function renderDialog(props: Partial<React.ComponentProps<typeof Dialog>> = {}) {
-  return render(
-    <Dialog {...props}>
-      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
-      <Dialog.Content>
-        <Dialog.Header>
-          <Dialog.Title>Dialog Title</Dialog.Title>
-          <Dialog.Close />
-        </Dialog.Header>
-        <Dialog.Body>
-          <Dialog.Description>Dialog description text</Dialog.Description>
-          <p>Body content</p>
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Dialog.Close asChild>
-            <button>Cancel</button>
-          </Dialog.Close>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
-  );
-}
-
-describe('Dialog', () => {
-  it('opens when trigger is clicked', async () => {
-    const user = userEvent.setup();
-    renderDialog();
-
-    expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /open dialog/i }));
-    await waitFor(() => {
-      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-    });
-  });
-
-  it('closes when close button is clicked', async () => {
-    const user = userEvent.setup();
-    renderDialog({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-    });
-
-    const closeButton = screen.getByRole('button', { name: /close dialog/i });
-    await user.click(closeButton);
-
-    await waitFor(() => {
-      expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
-    });
-  });
-
-  it('close button has aria-label', async () => {
-    renderDialog({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: /close dialog/i })).toBeInTheDocument();
-    });
-  });
-
-  it('renders title and description', async () => {
-    renderDialog({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      expect(screen.getByText('Dialog description text')).toBeInTheDocument();
-    });
-  });
-
-  it('forwards html props to trigger, title, description, and close', async () => {
-    const user = userEvent.setup();
-    render(
-      <Dialog>
-        <Dialog.Trigger id="dialog-trigger">Open</Dialog.Trigger>
-        <Dialog.Content>
-          <Dialog.Title id="dialog-title">Dialog Title</Dialog.Title>
-          <Dialog.Description id="dialog-description">Dialog Description</Dialog.Description>
-          <Dialog.Close data-testid="dialog-close" />
-        </Dialog.Content>
-      </Dialog>
-    );
-
-    expect(screen.getByRole('button', { name: /open/i })).toHaveAttribute('id', 'dialog-trigger');
-    await user.click(screen.getByRole('button', { name: /open/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Dialog Title')).toHaveAttribute('id', 'dialog-title');
-      expect(screen.getByText('Dialog Description')).toHaveAttribute('id', 'dialog-description');
-      expect(screen.getByTestId('dialog-close')).toBeInTheDocument();
-    });
-  });
-
-  it('renders compound sub-components (Header, Body, Footer)', async () => {
-    renderDialog({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Body content')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-    });
-  });
-
-  it('supports size variant prop', async () => {
-    render(
-      <Dialog defaultOpen>
-        <Dialog.Trigger>Open</Dialog.Trigger>
-        <Dialog.Content size="lg">
-          <Dialog.Title>Large Dialog</Dialog.Title>
-        </Dialog.Content>
-      </Dialog>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Large Dialog')).toBeInTheDocument();
-    });
-  });
-
-  it('renders as modal by default', async () => {
-    renderDialog({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-    });
-  });
-
-  it('has no accessibility violations when open', async () => {
-    const { container } = renderDialog({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-    });
-
-    await expectNoA11yViolations(container, {
-      // Base UI focus guard spans have role="button" without labels.
-      disabledRules: ['aria-command-name'],
-    });
-  });
-
-  describe('keyboard & focus', () => {
-    it('Escape closes dialog (WCAG 2.1.1)', async () => {
-      const user = userEvent.setup();
-      renderDialog({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      });
-
-      await user.keyboard('{Escape}');
-
-      await waitFor(() => {
-        expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
-      });
-    });
-
-    it('focus moves into dialog on open (WCAG 2.4.3)', async () => {
-      const user = userEvent.setup();
-      renderDialog();
-
-      await user.click(screen.getByRole('button', { name: /open dialog/i }));
-
-      await waitFor(() => {
-        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      });
-
-      await waitFor(() => {
-        const dialog = screen.getByRole('dialog');
-        expect(dialog.contains(document.activeElement)).toBe(true);
-      });
-    });
-
-    it('focus returns to trigger on Escape (WCAG 2.4.3)', async () => {
-      const user = userEvent.setup();
-      renderDialog();
-
-      const trigger = screen.getByRole('button', { name: /open dialog/i });
-      await user.click(trigger);
-
-      await waitFor(() => {
-        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      });
-
-      await user.keyboard('{Escape}');
-
-      await waitFor(() => {
-        expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
-      });
-
-      await waitFor(() => {
-        expect(trigger).toHaveFocus();
-      });
-    });
-
-    it('focus returns to trigger on Close button click (WCAG 2.4.3)', async () => {
-      const user = userEvent.setup();
-      renderDialog();
-
-      const trigger = screen.getByRole('button', { name: /open dialog/i });
-      await user.click(trigger);
-
-      await waitFor(() => {
-        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      });
-
-      const closeButton = screen.getByRole('button', { name: /close dialog/i });
-      await user.click(closeButton);
-
-      await waitFor(() => {
-        expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
-      });
-
-      await waitFor(() => {
-        expect(trigger).toHaveFocus();
-      });
-    });
-
-    it('Tab cycles within dialog (focus trap) (WCAG 2.1.2)', async () => {
-      const user = userEvent.setup();
-      renderDialog({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      });
-
-      const dialog = screen.getByRole('dialog');
-      const closeButton = screen.getByRole('button', { name: /close dialog/i });
-      const cancelButton = screen.getByRole('button', { name: /cancel/i });
-
-      // Tab through focusable elements — focus should stay inside dialog
-      await user.tab();
-      await user.tab();
-      await user.tab();
-
-      await waitFor(() => {
-        expect(dialog.contains(document.activeElement)).toBe(true);
-      });
-
-      // Verify that close and cancel buttons are reachable
-      // Focus one of them directly and confirm containment
-      closeButton.focus();
-      expect(dialog.contains(document.activeElement)).toBe(true);
-
-      cancelButton.focus();
-      expect(dialog.contains(document.activeElement)).toBe(true);
-    });
-
-    it('Shift+Tab cycles backward (WCAG 2.1.2)', async () => {
-      const user = userEvent.setup();
-      renderDialog({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      });
-
-      const dialog = screen.getByRole('dialog');
-
-      // Shift+Tab backward multiple times — focus should remain trapped
-      await user.keyboard('{Shift>}{Tab}{/Shift}');
-      await user.keyboard('{Shift>}{Tab}{/Shift}');
-      await user.keyboard('{Shift>}{Tab}{/Shift}');
-
-      await waitFor(() => {
-        expect(dialog.contains(document.activeElement)).toBe(true);
-      });
-    });
-
-    it('role="dialog" is present when open (WCAG 4.1.2)', async () => {
-      renderDialog({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-    });
-
-    it('Cancel button closes dialog and returns focus (WCAG 2.4.3)', async () => {
-      const user = userEvent.setup();
-      renderDialog();
-
-      const trigger = screen.getByRole('button', { name: /open dialog/i });
-      await user.click(trigger);
-
-      await waitFor(() => {
-        expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      });
-
-      const cancelButton = screen.getByRole('button', { name: /cancel/i });
-      await user.click(cancelButton);
-
-      await waitFor(() => {
-        expect(screen.queryByText('Dialog Title')).not.toBeInTheDocument();
-      });
-
-      await waitFor(() => {
-        expect(trigger).toHaveFocus();
-      });
-    });
-  });
-});

package/src/components/Drawer/Drawer.fragment.tsx

@@ -1,209 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { Drawer } from '.';
-import { Button } from '../Button';
-import { Stack } from '../Stack';
-import { Input } from '../Input';
-
-export default defineFragment({
-  component: Drawer,
-
-  meta: {
-    name: 'Drawer',
-    description: 'A panel that slides in from screen edges. Extends the Dialog pattern with slide animations and edge positioning.',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['drawer', 'sheet', 'panel', 'sidebar', 'slide-over'],
-    since: '0.8.2',
-  },
-
-  usage: {
-    when: [
-      'Side panels for editing or creating content',
-      'Mobile-style bottom sheets for actions',
-      'Navigation panels that slide in from the left',
-      'Detail views that overlay the main content',
-    ],
-    whenNot: [
-      'Centered modal dialogs (use Dialog)',
-      'Non-blocking notifications (use Toast)',
-      'Permanent side navigation (use Sidebar)',
-      'Small contextual menus (use Menu or Popover)',
-    ],
-    guidelines: [
-      'Default to right side for content editing and forms',
-      'Use left side for navigation drawers',
-      'Use bottom for mobile-style action sheets',
-      'Provide clear close affordance (X button or cancel)',
-      'Keep drawer content focused on a single task',
-      'Drawer.Trigger and Drawer.Close with asChild require a single valid React element child',
-      'Set Drawer.Content initialFocus={false} when custom focus management is needed',
-    ],
-    accessibility: [
-      'Automatically traps focus within the drawer',
-      'Closes on Escape key press',
-      'Returns focus to trigger element on close',
-      'Uses role="dialog" with proper aria attributes',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Drawer content (use Drawer.Content, Drawer.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: 'Dialog', relationship: 'sibling', note: 'Use Dialog for centered modal overlays' },
-    { component: 'Sidebar', relationship: 'alternative', note: 'Use Sidebar for permanent side navigation' },
-    { component: 'Popover', relationship: 'alternative', note: 'Use Popover for small contextual content' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'open: boolean - controlled open state',
-      'onOpenChange: (open) => void - open state handler',
-      'modal: boolean - blocks page interaction (default: true)',
-      'Drawer.Content side: left|right|top|bottom - slide direction (default: right)',
-      'Drawer.Content size: sm|md|lg|xl|full - panel size',
-      'Drawer.Content initialFocus: boolean - auto-focus popup on open (default: true)',
-    ],
-    scenarioTags: [
-      'overlay.drawer',
-      'form.editor',
-      'navigation.panel',
-      'action.sheet',
-    ],
-    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: [
-      '<Drawer><Drawer.Trigger><Button>Open</Button></Drawer.Trigger><Drawer.Content><Drawer.Close /><Drawer.Header><Drawer.Title>{title}</Drawer.Title></Drawer.Header><Drawer.Body>{content}</Drawer.Body><Drawer.Footer><Drawer.Close asChild><Button variant="secondary">Cancel</Button></Drawer.Close><Button>Save</Button></Drawer.Footer></Drawer.Content></Drawer>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Right-side drawer with header, body, and footer',
-      render: () => (
-        <Drawer>
-          <Drawer.Trigger asChild>
-            <Button>Open Drawer</Button>
-          </Drawer.Trigger>
-          <Drawer.Content>
-            <Drawer.Close />
-            <Drawer.Header>
-              <Drawer.Title>Drawer Title</Drawer.Title>
-              <Drawer.Description>
-                A panel sliding in from the right.
-              </Drawer.Description>
-            </Drawer.Header>
-            <Drawer.Body>
-              <p>Drawer content goes here.</p>
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close asChild>
-                <Button variant="secondary">Cancel</Button>
-              </Drawer.Close>
-              <Button variant="primary">Save</Button>
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer>
-      ),
-    },
-    {
-      name: 'Left Side',
-      description: 'Left-side drawer for navigation',
-      render: () => (
-        <Drawer>
-          <Drawer.Trigger asChild>
-            <Button variant="secondary">Open Left</Button>
-          </Drawer.Trigger>
-          <Drawer.Content side="left">
-            <Drawer.Close />
-            <Drawer.Header>
-              <Drawer.Title>Navigation</Drawer.Title>
-            </Drawer.Header>
-            <Drawer.Body>
-              <p>Left-side drawer for navigation or filters.</p>
-            </Drawer.Body>
-          </Drawer.Content>
-        </Drawer>
-      ),
-    },
-    {
-      name: 'Bottom Sheet',
-      description: 'Bottom drawer for mobile-style actions',
-      render: () => (
-        <Drawer>
-          <Drawer.Trigger asChild>
-            <Button variant="secondary">Open Bottom Sheet</Button>
-          </Drawer.Trigger>
-          <Drawer.Content side="bottom" size="sm">
-            <Drawer.Header>
-              <Drawer.Title>Actions</Drawer.Title>
-            </Drawer.Header>
-            <Drawer.Body>
-              <p>Bottom sheet for mobile-style actions.</p>
-            </Drawer.Body>
-          </Drawer.Content>
-        </Drawer>
-      ),
-    },
-    {
-      name: 'With Form',
-      description: 'Drawer with a form layout',
-      render: () => (
-        <Drawer>
-          <Drawer.Trigger asChild>
-            <Button>Edit Settings</Button>
-          </Drawer.Trigger>
-          <Drawer.Content size="md">
-            <Drawer.Close />
-            <Drawer.Header>
-              <Drawer.Title>Settings</Drawer.Title>
-              <Drawer.Description>Update your preferences.</Drawer.Description>
-            </Drawer.Header>
-            <Drawer.Body>
-              <Stack gap="md">
-                <Input label="Display Name" placeholder="Enter name" />
-                <Input label="Email" type="email" placeholder="you@example.com" />
-              </Stack>
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close asChild>
-                <Button variant="secondary">Cancel</Button>
-              </Drawer.Close>
-              <Button variant="primary">Save Changes</Button>
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer>
-      ),
-    },
-  ],
-});