@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Drawer/Drawer.test.tsx

@@ -1,254 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
-import { Drawer } from './index';
-
-function renderDrawer(
-  props: Partial<React.ComponentProps<typeof Drawer>> = {},
-  contentProps: Partial<React.ComponentProps<typeof Drawer.Content>> = {},
-) {
-  return render(
-    <Drawer {...props}>
-      <Drawer.Trigger>Open Drawer</Drawer.Trigger>
-      <Drawer.Content {...contentProps}>
-        <Drawer.Header>
-          <Drawer.Title>Drawer Title</Drawer.Title>
-          <Drawer.Close />
-        </Drawer.Header>
-        <Drawer.Body>
-          <Drawer.Description>Drawer description text</Drawer.Description>
-          <p>Body content</p>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <Drawer.Close asChild>
-            <button>Cancel</button>
-          </Drawer.Close>
-        </Drawer.Footer>
-      </Drawer.Content>
-    </Drawer>
-  );
-}
-
-describe('Drawer', () => {
-  it('opens when trigger is clicked', async () => {
-    const user = userEvent.setup();
-    renderDrawer();
-
-    expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /open drawer/i }));
-    await waitFor(() => {
-      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-    });
-  });
-
-  it('closes when close button is clicked', async () => {
-    const user = userEvent.setup();
-    renderDrawer({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-    });
-
-    const closeButton = screen.getByRole('button', { name: /close drawer/i });
-    await user.click(closeButton);
-
-    await waitFor(() => {
-      expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
-    });
-  });
-
-  it('renders title and description', async () => {
-    renderDrawer({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-      expect(screen.getByText('Drawer description text')).toBeInTheDocument();
-    });
-  });
-
-  it('forwards html props to trigger, title, description, and close', async () => {
-    const user = userEvent.setup();
-    render(
-      <Drawer>
-        <Drawer.Trigger id="drawer-trigger">Open</Drawer.Trigger>
-        <Drawer.Content>
-          <Drawer.Header>
-            <Drawer.Title id="drawer-title">Drawer Title</Drawer.Title>
-            <Drawer.Close data-testid="drawer-close" />
-          </Drawer.Header>
-          <Drawer.Body>
-            <Drawer.Description id="drawer-description">Drawer Description</Drawer.Description>
-          </Drawer.Body>
-        </Drawer.Content>
-      </Drawer>
-    );
-
-    expect(screen.getByRole('button', { name: /open/i })).toHaveAttribute('id', 'drawer-trigger');
-    await user.click(screen.getByRole('button', { name: /open/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Drawer Title')).toHaveAttribute('id', 'drawer-title');
-      expect(screen.getByText('Drawer Description')).toHaveAttribute('id', 'drawer-description');
-      expect(screen.getByTestId('drawer-close')).toBeInTheDocument();
-    });
-  });
-
-  it('renders compound sub-components (Header, Body, Footer)', async () => {
-    renderDrawer({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Body content')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-    });
-  });
-
-  it('supports side prop', async () => {
-    renderDrawer({ defaultOpen: true }, { side: 'left' });
-
-    await waitFor(() => {
-      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-    });
-  });
-
-  it('supports size prop', async () => {
-    renderDrawer({ defaultOpen: true }, { size: 'lg' });
-
-    await waitFor(() => {
-      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-    });
-  });
-
-  it('has no accessibility violations when open', async () => {
-    const { container } = renderDrawer({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Drawer 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 drawer', async () => {
-      const user = userEvent.setup();
-      renderDrawer({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-      });
-
-      await user.keyboard('{Escape}');
-
-      await waitFor(() => {
-        expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
-      });
-    });
-
-    it('focus moves into drawer on open', async () => {
-      const user = userEvent.setup();
-      renderDrawer();
-
-      await user.click(screen.getByRole('button', { name: /open drawer/i }));
-
-      await waitFor(() => {
-        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-      });
-
-      await waitFor(() => {
-        const dialog = screen.getByRole('dialog');
-        expect(dialog.contains(document.activeElement)).toBe(true);
-      });
-    });
-
-    it('focus returns to trigger on close', async () => {
-      const user = userEvent.setup();
-      renderDrawer();
-
-      const trigger = screen.getByRole('button', { name: /open drawer/i });
-      await user.click(trigger);
-
-      await waitFor(() => {
-        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-      });
-
-      await user.keyboard('{Escape}');
-
-      await waitFor(() => {
-        expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
-      });
-
-      await waitFor(() => {
-        expect(trigger).toHaveFocus();
-      });
-    });
-
-    it('Tab cycles within drawer (focus trap)', async () => {
-      const user = userEvent.setup();
-      renderDrawer({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-      });
-
-      const dialog = screen.getByRole('dialog');
-
-      // Tab through focusable elements — focus should stay inside drawer
-      await user.tab();
-      await user.tab();
-      await user.tab();
-
-      await waitFor(() => {
-        expect(dialog.contains(document.activeElement)).toBe(true);
-      });
-    });
-
-    it('Shift+Tab cycles backward', async () => {
-      const user = userEvent.setup();
-      renderDrawer({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-      });
-
-      const dialog = screen.getByRole('dialog');
-
-      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', async () => {
-      renderDrawer({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-    });
-
-    it('backdrop click closes drawer', async () => {
-      const user = userEvent.setup();
-      renderDrawer({ defaultOpen: true });
-
-      await waitFor(() => {
-        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
-      });
-
-      // Click the backdrop (outside the drawer content)
-      const backdrop = document.querySelector('[data-open]');
-      if (backdrop) {
-        await user.click(backdrop as HTMLElement);
-      }
-
-      await waitFor(() => {
-        expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
-      });
-    });
-  });
-});

package/src/components/Editor/Editor.fragment.tsx

@@ -1,322 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Editor } from '.';
-import { Button } from '../Button';
-
-export default defineFragment({
-  component: Editor,
-
-  meta: {
-    name: 'Editor',
-    description: 'Rich text editor with formatting toolbar, auto-save, and word count',
-    category: 'forms',
-    status: 'stable',
-    tags: ['editor', 'rich-text', 'markdown', 'toolbar', 'writing', 'blog', 'content'],
-    dependencies: [
-      { name: '@tiptap/react', version: '>=2.0.0', reason: 'Rich text editor framework' },
-      { name: '@tiptap/starter-kit', version: '>=2.0.0', reason: 'Default extensions (bold, italic, lists, etc.)' },
-      { name: '@tiptap/extension-link', version: '>=2.0.0', reason: 'Link support in rich text mode' },
-    ],
-  },
-
-  usage: {
-    when: [
-      'Building blog post or article editors',
-      'Need rich text editing with formatting controls',
-      'Content management with auto-save and word count',
-      'Markdown or WYSIWYG editing interfaces',
-    ],
-    whenNot: [
-      'Simple single-line text input (use Input)',
-      'Plain multi-line without formatting (use Textarea)',
-      'Chat/AI prompt input (use Prompt)',
-      'Code editing (use CodeBlock)',
-    ],
-    guidelines: [
-      'Use compound pattern for custom toolbar layouts',
-      'Install @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link for rich text mode',
-      'Falls back to a markdown-aware textarea when TipTap is not installed',
-      'Use onAutoSave for periodic content persistence',
-      'Use size prop (sm/md/lg) to control editor height',
-      'Use maxLength to show character limit with visual warning states',
-      'New formats (headings, blockquote, orderedList, undo, redo) are opt-in via the formats prop',
-    ],
-    accessibility: [
-      'Toolbar has role="toolbar" with aria-label',
-      'Format buttons use aria-pressed to indicate active state',
-      'Action buttons (undo/redo) omit aria-pressed since they are not toggles',
-      'Status indicator uses aria-live="polite" for save status announcements',
-      'Keyboard shortcuts match standard text editor conventions (Ctrl+B, Ctrl+I, etc.)',
-      'Global shortcuts (e.g., Sidebar Ctrl+B) automatically yield when focus is inside the Editor',
-      'Focus ring appears on the editor container when any child element is focused',
-    ],
-  },
-
-  props: {
-    value: {
-      type: 'string',
-      description: 'Controlled editor value',
-    },
-    defaultValue: {
-      type: 'string',
-      description: 'Default value for uncontrolled usage',
-    },
-    onValueChange: {
-      type: 'function',
-      description: 'Called when content changes',
-    },
-    placeholder: {
-      type: 'string',
-      default: '"Start typing..."',
-      description: 'Placeholder text shown when empty',
-    },
-    disabled: {
-      type: 'boolean',
-      default: 'false',
-      description: 'Disable the editor',
-    },
-    readOnly: {
-      type: 'boolean',
-      default: 'false',
-      description: 'Make the editor read-only',
-    },
-    formats: {
-      type: 'array',
-      default: '["bold", "italic", "strikethrough", "link", "code", "bulletList"]',
-      description: 'Which format buttons to show in the toolbar',
-    },
-    toolbar: {
-      type: 'boolean',
-      default: 'true',
-      description: 'Show default toolbar',
-    },
-    statusBar: {
-      type: 'boolean',
-      default: 'true',
-      description: 'Show default status bar with word/character counts',
-    },
-    onAutoSave: {
-      type: 'function',
-      description: 'Auto-save callback, called at autoSaveInterval',
-    },
-    autoSaveInterval: {
-      type: 'number',
-      default: '30000',
-      description: 'Auto-save interval in milliseconds',
-    },
-    size: {
-      type: 'string',
-      default: '"md"',
-      description: 'Editor size preset: "sm" (120px), "md" (200px), or "lg" (400px)',
-    },
-    maxLength: {
-      type: 'number',
-      description: 'Maximum character count. Shows counter in status bar with warning (90%) and error (over limit) states',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Prompt',
-      relationship: 'sibling',
-      note: 'Prompt is for AI/chat input; Editor is for long-form content editing',
-    },
-    {
-      component: 'Textarea',
-      relationship: 'alternative',
-      note: 'Use Textarea for simple multi-line input without formatting toolbar',
-    },
-    {
-      component: 'Input',
-      relationship: 'alternative',
-      note: 'Use Input for single-line text input',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: string - controlled editor value',
-      'onValueChange: (value: string) => void - change callback',
-      'placeholder: string - hint text (default: "Start typing...")',
-      'disabled: boolean - disables interaction',
-      'readOnly: boolean - prevents editing',
-      'formats: EditorFormat[] - toolbar buttons (default: all 6)',
-      'toolbar: boolean - show default toolbar (default: true)',
-      'statusBar: boolean - show word/char counts (default: true)',
-      'onAutoSave: (value: string) => void - auto-save handler',
-      'size: "sm" | "md" | "lg" - editor height preset (default: "md")',
-      'maxLength: number - character limit with visual indicator',
-    ],
-    scenarioTags: [
-      'form.editor',
-      'form.richtext',
-      'ui.blog-editor',
-      'ui.content-editor',
-    ],
-    a11yRules: [
-      'A11Y_TOOLBAR_ROLE',
-      'A11Y_BUTTON_LABEL',
-      'A11Y_LIVE_REGION',
-    ],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Editor with default toolbar and status bar',
-      render: () => (
-        <Editor placeholder="Start typing your masterpiece here..." />
-      ),
-    },
-    {
-      name: 'With Auto-Save and Publish',
-      description: 'Full compound usage with custom toolbar, auto-save indicator, and publish button',
-      render: () => (
-        <Editor
-          placeholder="Start typing your masterpiece here..."
-          onValueChange={(v) => console.log(v)}
-        >
-          <Editor.Toolbar>
-            <Editor.ToolbarGroup aria-label="Text formatting">
-              <Editor.ToolbarButton format="bold" />
-              <Editor.ToolbarButton format="italic" />
-              <Editor.ToolbarButton format="strikethrough" />
-              <Editor.ToolbarButton format="link" />
-              <Editor.ToolbarButton format="code" />
-              <Editor.ToolbarButton format="bulletList" />
-            </Editor.ToolbarGroup>
-            <Editor.ToolbarGroup aria-label="Actions">
-              <Editor.StatusIndicator status="saved" />
-              <Button variant="accent" size="sm">
-                Publish
-              </Button>
-            </Editor.ToolbarGroup>
-          </Editor.Toolbar>
-          <Editor.Content />
-          <Editor.StatusBar showWordCount showCharCount />
-        </Editor>
-      ),
-    },
-    {
-      name: 'Minimal',
-      description: 'Editor with subset of formats',
-      render: () => (
-        <Editor
-          placeholder="Quick note..."
-          formats={['bold', 'italic', 'code']}
-        />
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Non-interactive editor with content',
-      render: () => (
-        <Editor
-          defaultValue="This content cannot be edited."
-          disabled
-        />
-      ),
-    },
-    {
-      name: 'Read Only',
-      description: 'Visible content, non-editable',
-      render: () => (
-        <Editor
-          defaultValue="This content is read-only. You can select and copy text but cannot modify it."
-          readOnly
-        />
-      ),
-    },
-    {
-      name: 'Custom Toolbar',
-      description: 'Compound usage with custom toolbar layout and separator',
-      render: () => (
-        <Editor
-          placeholder="Write your blog post..."
-          onValueChange={(v) => console.log(v)}
-        >
-          <Editor.Toolbar>
-            <Editor.ToolbarGroup aria-label="Basic formatting">
-              <Editor.ToolbarButton format="bold" />
-              <Editor.ToolbarButton format="italic" />
-            </Editor.ToolbarGroup>
-            <Editor.Separator />
-            <Editor.ToolbarGroup aria-label="Advanced formatting">
-              <Editor.ToolbarButton format="link" />
-              <Editor.ToolbarButton format="code" />
-              <Editor.ToolbarButton format="bulletList" />
-            </Editor.ToolbarGroup>
-            <Editor.ToolbarGroup aria-label="Status">
-              <Editor.StatusIndicator status="saving" />
-            </Editor.ToolbarGroup>
-          </Editor.Toolbar>
-          <Editor.Content />
-          <Editor.StatusBar showWordCount showCharCount />
-        </Editor>
-      ),
-    },
-    {
-      name: 'Full Formatting',
-      description: 'All format options including headings, blockquote, ordered list, undo/redo',
-      render: () => (
-        <Editor
-          placeholder="Write an article..."
-          size="lg"
-        >
-          <Editor.Toolbar>
-            <Editor.ToolbarGroup aria-label="History">
-              <Editor.ToolbarButton format="undo" />
-              <Editor.ToolbarButton format="redo" />
-            </Editor.ToolbarGroup>
-            <Editor.Separator />
-            <Editor.ToolbarGroup aria-label="Headings">
-              <Editor.ToolbarButton format="heading1" />
-              <Editor.ToolbarButton format="heading2" />
-              <Editor.ToolbarButton format="heading3" />
-            </Editor.ToolbarGroup>
-            <Editor.Separator />
-            <Editor.ToolbarGroup aria-label="Text formatting">
-              <Editor.ToolbarButton format="bold" />
-              <Editor.ToolbarButton format="italic" />
-              <Editor.ToolbarButton format="strikethrough" />
-              <Editor.ToolbarButton format="code" />
-            </Editor.ToolbarGroup>
-            <Editor.Separator />
-            <Editor.ToolbarGroup aria-label="Block formatting">
-              <Editor.ToolbarButton format="bulletList" />
-              <Editor.ToolbarButton format="orderedList" />
-              <Editor.ToolbarButton format="blockquote" />
-              <Editor.ToolbarButton format="link" />
-            </Editor.ToolbarGroup>
-          </Editor.Toolbar>
-          <Editor.Content />
-          <Editor.StatusBar showWordCount showCharCount />
-        </Editor>
-      ),
-    },
-    {
-      name: 'With Character Limit',
-      description: 'Editor with maxLength showing character count indicator with warning and error states',
-      render: () => (
-        <Editor
-          placeholder="Write a tweet-sized message..."
-          maxLength={280}
-          size="sm"
-          formats={['bold', 'italic', 'link']}
-        />
-      ),
-    },
-    {
-      name: 'Small Size',
-      description: 'Compact editor with sm size preset (120px min-height)',
-      render: () => (
-        <Editor
-          placeholder="Quick note..."
-          size="sm"
-          formats={['bold', 'italic', 'code']}
-        />
-      ),
-    },
-  ],
-});