@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/Markdown/Markdown.fragment.tsx

@@ -1,232 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { Markdown } from '.';
-
-const defaultContent = `# Hello World
-
-This is a paragraph with **bold text** and *italic text*.
-
-Here is some \`inline code\` within a sentence.
-
-- First item
-- Second item
-- Third item
-
-> A blockquote for emphasis.
-`;
-
-const gfmTableContent = `## Data Overview
-
-| Feature    | Status    | Priority |
-|------------|-----------|----------|
-| Markdown   | Done      | High     |
-| Tables     | Done      | Medium   |
-| Task Lists | Planned   | Low      |
-
-Notes:
-- [x] Support GFM tables
-- [x] Support task lists
-- [ ] Syntax highlighting
-`;
-
-const codeBlockContent = `## Code Example
-
-Here is a JavaScript function:
-
-\`\`\`js
-function greet(name) {
-  return \\\`Hello, \\\${name}!\\\`;
-}
-
-console.log(greet('World'));
-\`\`\`
-
-And some inline code: \`const x = 42;\`
-`;
-
-const mixedContent = `# Project Update
-
-## Summary
-
-The project is progressing well. Here are the **key highlights**:
-
-1. Completed the *design system* components
-2. Added markdown rendering support
-3. Integrated with the documentation site
-
-### Performance Metrics
-
-| Metric       | Before | After  |
-|-------------|--------|--------|
-| Bundle Size | 142kb  | 98kb   |
-| Load Time   | 1.2s   | 0.8s   |
-| Lighthouse  | 72     | 95     |
-
-> These improvements were achieved through tree-shaking and code splitting.
-
-### Next Steps
-
-- [ ] Add syntax highlighting
-- [ ] Support custom themes
-- [x] GFM table support
-
----
-
-For more details, see the [documentation](#).
-`;
-
-export default defineFragment({
-  component: Markdown,
-
-  meta: {
-    name: 'Markdown',
-    description: 'Renders markdown strings as styled prose using react-markdown and remark-gfm. Supports headings, lists, tables, code blocks, blockquotes, and more.',
-    category: 'display',
-    status: 'stable',
-    tags: ['markdown', 'prose', 'content', 'text', 'ai', 'chat'],
-    since: '0.7.0',
-    dependencies: [
-      { name: 'react-markdown', version: '>=9.0.0', reason: 'Markdown parsing and rendering' },
-      { name: 'remark-gfm', version: '>=4.0.0', reason: 'GitHub Flavored Markdown support (optional)' },
-    ],
-  },
-
-  usage: {
-    when: [
-      'Rendering AI/LLM response content',
-      'Displaying user-authored markdown text',
-      'Showing documentation or readme content',
-      'Rich text display without a WYSIWYG editor',
-    ],
-    whenNot: [
-      'Plain text without formatting (use Text)',
-      'Editing markdown (use a markdown editor component)',
-      'Rendering trusted HTML directly (use dangerouslySetInnerHTML)',
-    ],
-    guidelines: [
-      'Install react-markdown and remark-gfm as peer dependencies',
-      'Use the components prop to override default element rendering',
-      'Content is sanitized by react-markdown by default',
-      'Falls back to plain text paragraphs if react-markdown is not installed',
-      'Standard div props (id, style, aria-*, data-*) are forwarded to the Markdown wrapper',
-    ],
-    accessibility: [
-      'Rendered HTML follows semantic structure (headings, lists, tables)',
-      'Links are rendered as proper anchor elements',
-      'Images include alt text from markdown syntax',
-      'Tables use proper th/td structure for screen readers',
-    ],
-  },
-
-  props: {
-    content: {
-      type: 'string',
-      description: 'Markdown string to render',
-      required: true,
-    },
-    components: {
-      type: 'object',
-      description: 'Override map for markdown element components (e.g., { h1: MyHeading }). Accepts custom renderer component signatures used by react-markdown',
-    },
-    className: {
-      type: 'string',
-      description: 'Additional CSS class name',
-    },
-  },
-
-  relations: [
-    { component: 'Text', relationship: 'alternative', note: 'Use Text for plain, non-markdown text' },
-    { component: 'CodeBlock', relationship: 'complementary', note: 'CodeBlock can be used via components prop for syntax highlighting' },
-    { component: 'Message', relationship: 'parent', note: 'Message wraps Markdown when markdown prop is true' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'content: string - Markdown string to render',
-      'components: object - Override map for element components (react-markdown renderer components)',
-      'className: string - Additional CSS class',
-      'Forwards standard HTML div attributes to the wrapper element',
-    ],
-    scenarioTags: [
-      'content.markdown',
-      'content.prose',
-      'ai.response',
-    ],
-    a11yRules: ['A11Y_SEMANTIC_HTML'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic markdown with headings, paragraphs, inline code, lists, and blockquote',
-      code: `<Markdown content={\`# Hello World
-
-This is a paragraph with **bold text** and *italic text*.
-
-Here is some \\\`inline code\\\` within a sentence.
-
-- First item
-- Second item
-- Third item
-
-> A blockquote for emphasis.
-\`} />`,
-      render: () => <Markdown content={defaultContent} />,
-    },
-    {
-      name: 'GFM Table',
-      description: 'GitHub Flavored Markdown with tables and task lists',
-      code: `<Markdown content={\`## Data Overview
-
-| Feature    | Status    | Priority |
-|------------|-----------|----------|
-| Markdown   | Done      | High     |
-| Tables     | Done      | Medium   |
-| Task Lists | Planned   | Low      |
-
-Notes:
-- [x] Support GFM tables
-- [x] Support task lists
-- [ ] Syntax highlighting
-\`} />`,
-      render: () => <Markdown content={gfmTableContent} />,
-    },
-    {
-      name: 'Code Block',
-      description: 'Markdown with fenced code blocks and inline code',
-      code: '<Markdown content={`## Code Example\\n\\nHere is a JavaScript function:\\n\\n```js\\nfunction greet(name) {\\n  return \\`Hello, ${name}!\\`;\\n}\\n```\\n\\nAnd some inline code: \\`const x = 42;\\``} />',
-      render: () => <Markdown content={codeBlockContent} />,
-    },
-    {
-      name: 'Mixed Content',
-      description: 'Complex markdown mixing headings, lists, tables, blockquotes, and task lists',
-      code: `<Markdown content={\`# Project Update
-
-## Summary
-
-The project is progressing well. Here are the **key highlights**:
-
-1. Completed the *design system* components
-2. Added markdown rendering support
-3. Integrated with the documentation site
-
-### Performance Metrics
-
-| Metric      | Before | After |
-|-------------|--------|-------|
-| Bundle Size | 142kb  | 98kb  |
-| Load Time   | 1.2s   | 0.8s  |
-| Lighthouse  | 72     | 95    |
-
-> These improvements were achieved through tree-shaking and code splitting.
-
-### Next Steps
-
-- [ ] Add syntax highlighting
-- [ ] Support custom themes
-- [x] GFM table support
-\`} />`,
-      render: () => <Markdown content={mixedContent} />,
-    },
-  ],
-});

package/src/components/Markdown/Markdown.test.tsx

@@ -1,47 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Markdown } from './index';
-
-// The Markdown component uses require() to load react-markdown lazily.
-// In test env, react-markdown may not be installed, so it will use the fallback renderer.
-// We test the fallback behavior which renders paragraphs from plain text.
-
-describe('Markdown', () => {
-  it('renders markdown content as paragraphs (fallback)', () => {
-    render(<Markdown content="Hello world" />);
-    expect(screen.getByText('Hello world')).toBeInTheDocument();
-  });
-
-  it('splits content into paragraphs on double newlines (fallback)', () => {
-    const { container } = render(
-      <Markdown content={'First paragraph\n\nSecond paragraph'} />
-    );
-    const paragraphs = container.querySelectorAll('p');
-    expect(paragraphs).toHaveLength(2);
-    expect(paragraphs[0]).toHaveTextContent('First paragraph');
-    expect(paragraphs[1]).toHaveTextContent('Second paragraph');
-  });
-
-  it('applies custom className', () => {
-    const { container } = render(<Markdown content="test" className="custom" />);
-    expect(container.firstElementChild).toHaveClass('custom');
-  });
-
-  it('renders the wrapping div with markdown class', () => {
-    const { container } = render(<Markdown content="test" />);
-    expect(container.firstElementChild).toHaveClass('markdown');
-  });
-
-  it('forwards root DOM props to the wrapper', () => {
-    render(<Markdown content="test" id="md-root" data-testid="markdown" />);
-    const root = screen.getByTestId('markdown');
-    expect(root).toHaveAttribute('id', 'md-root');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Markdown content={'# Hello\n\nSome paragraph text.\n\nAnother paragraph.'} />
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Menu/Menu.fragment.tsx

@@ -1,247 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { Menu } from '.';
-import { Button } from '../Button';
-
-function CheckedItemsMenuDemo() {
-  const [view, setView] = React.useState('grid');
-  return (
-    <Menu>
-      <Menu.Trigger asChild>
-        <Button variant="secondary">View</Button>
-      </Menu.Trigger>
-      <Menu.Content>
-        <Menu.Item checked={view === 'grid'} onSelect={() => setView('grid')}>Grid</Menu.Item>
-        <Menu.Item checked={view === 'list'} onSelect={() => setView('list')}>List</Menu.Item>
-        <Menu.Item checked={view === 'board'} onSelect={() => setView('board')}>Board</Menu.Item>
-      </Menu.Content>
-    </Menu>
-  );
-}
-
-export default defineFragment({
-  component: Menu,
-
-  meta: {
-    name: 'Menu',
-    description: 'Dropdown menu for actions and commands. Supports submenus, check items, radio groups, and keyboard shortcuts.',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['menu', 'dropdown', 'actions', 'context-menu', 'commands', 'submenu'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Overflow actions that dont fit in the toolbar',
-      'Context menus (right-click)',
-      'User account menus',
-      'Grouped actions with separators',
-      'Nested menus with submenus',
-    ],
-    whenNot: [
-      'Selecting from options (use Select)',
-      'Navigation (use Tabs or navigation components)',
-      'Form selection (use Select or RadioGroup)',
-    ],
-    guidelines: [
-      'Group related actions with Menu.Group',
-      'Use separators to divide action categories',
-      'Include keyboard shortcuts where applicable',
-      'Use danger variant for destructive actions',
-      'Keep menu items under 10-12 for usability',
-      'Use checked prop on Menu.Item for simple selection state',
-      'Use Menu.Submenu for nested secondary options',
-      'Menu.Trigger supports asChild for links/router-link components (single valid element child required)',
-    ],
-    accessibility: [
-      'Full keyboard navigation with arrow keys',
-      'Type-ahead search for items',
-      'Focus returns to trigger on close',
-      'Proper ARIA menu roles',
-      'ArrowRight opens submenus, ArrowLeft closes them',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Menu trigger and content',
-      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 menu is modal',
-      default: 'true',
-    },
-  },
-
-  relations: [
-    { component: 'Select', relationship: 'alternative', note: 'Use Select for form field selection' },
-    { component: 'Popover', relationship: 'alternative', note: 'Use Popover for rich non-action content' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'open: boolean - controlled open state',
-      'onOpenChange: (open) => void - state handler',
-      'Menu.Trigger asChild supports non-button trigger elements',
-      'Menu.Item onSelect: (event) => void - selection callback receives click event',
-      'Menu.Item danger: boolean - destructive styling',
-      'Menu.Item shortcut: string - keyboard shortcut text',
-      'Menu.Item checked: boolean - check indicator for selection state',
-    ],
-    scenarioTags: [
-      'action.menu',
-      'action.overflow',
-      'navigation.context',
-    ],
-    a11yRules: ['A11Y_MENU_KEYBOARD', 'A11Y_MENU_ROLE'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Trigger', 'Content', 'Item', 'CheckboxItem', 'RadioGroup', 'RadioItem', 'Group', 'GroupLabel', 'Separator', 'Submenu', 'SubmenuTrigger'],
-    requiredChildren: ['Trigger', 'Content'],
-    commonPatterns: [
-      '<Menu><Menu.Trigger asChild><Button>Actions</Button></Menu.Trigger><Menu.Content><Menu.Item>{action1}</Menu.Item><Menu.Separator /><Menu.Item danger>{delete}</Menu.Item></Menu.Content></Menu>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic dropdown menu',
-      render: () => (
-        <Menu>
-          <Menu.Trigger asChild>
-            <Button variant="secondary">Actions</Button>
-          </Menu.Trigger>
-          <Menu.Content>
-            <Menu.Item onSelect={() => {}}>Edit</Menu.Item>
-            <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>
-            <Menu.Separator />
-            <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>
-          </Menu.Content>
-        </Menu>
-      ),
-    },
-    {
-      name: 'With Shortcuts',
-      description: 'Menu items with keyboard shortcuts',
-      render: () => (
-        <Menu>
-          <Menu.Trigger asChild>
-            <Button variant="secondary">Edit</Button>
-          </Menu.Trigger>
-          <Menu.Content>
-            <Menu.Item shortcut="Ctrl+Z" onSelect={() => {}}>Undo</Menu.Item>
-            <Menu.Item shortcut="Ctrl+Y" onSelect={() => {}}>Redo</Menu.Item>
-            <Menu.Separator />
-            <Menu.Item shortcut="Ctrl+C" onSelect={() => {}}>Copy</Menu.Item>
-            <Menu.Item shortcut="Ctrl+V" onSelect={() => {}}>Paste</Menu.Item>
-          </Menu.Content>
-        </Menu>
-      ),
-    },
-    {
-      name: 'With Groups',
-      description: 'Menu with labeled groups',
-      render: () => (
-        <Menu>
-          <Menu.Trigger asChild>
-            <Button variant="secondary">Options</Button>
-          </Menu.Trigger>
-          <Menu.Content>
-            <Menu.Group>
-              <Menu.GroupLabel>View</Menu.GroupLabel>
-              <Menu.Item onSelect={() => {}}>Zoom In</Menu.Item>
-              <Menu.Item onSelect={() => {}}>Zoom Out</Menu.Item>
-            </Menu.Group>
-            <Menu.Separator />
-            <Menu.Group>
-              <Menu.GroupLabel>Layout</Menu.GroupLabel>
-              <Menu.Item onSelect={() => {}}>Grid View</Menu.Item>
-              <Menu.Item onSelect={() => {}}>List View</Menu.Item>
-            </Menu.Group>
-          </Menu.Content>
-        </Menu>
-      ),
-    },
-    {
-      name: 'With Checkboxes',
-      description: 'Menu with toggleable checkbox options',
-      render: () => (
-        <Menu>
-          <Menu.Trigger asChild>
-            <Button variant="secondary">Display</Button>
-          </Menu.Trigger>
-          <Menu.Content>
-            <Menu.CheckboxItem defaultChecked>Show Grid</Menu.CheckboxItem>
-            <Menu.CheckboxItem defaultChecked>Show Rulers</Menu.CheckboxItem>
-            <Menu.CheckboxItem>Show Guides</Menu.CheckboxItem>
-          </Menu.Content>
-        </Menu>
-      ),
-    },
-    {
-      name: 'With Checked Items',
-      description: 'Filter menu with check marks indicating active selections',
-      render: () => <CheckedItemsMenuDemo />,
-    },
-    {
-      name: 'With Submenu',
-      description: 'Menu with nested submenu for grouped secondary options',
-      render: () => (
-        <Menu>
-          <Menu.Trigger asChild>
-            <Button variant="secondary">File</Button>
-          </Menu.Trigger>
-          <Menu.Content>
-            <Menu.Item onSelect={() => {}}>New File</Menu.Item>
-            <Menu.Item onSelect={() => {}}>Open</Menu.Item>
-            <Menu.Separator />
-            <Menu.Submenu>
-              <Menu.SubmenuTrigger>Export As</Menu.SubmenuTrigger>
-              <Menu.Content side="right" align="start">
-                <Menu.Item onSelect={() => {}}>PNG</Menu.Item>
-                <Menu.Item onSelect={() => {}}>SVG</Menu.Item>
-                <Menu.Item onSelect={() => {}}>PDF</Menu.Item>
-              </Menu.Content>
-            </Menu.Submenu>
-            <Menu.Separator />
-            <Menu.Item danger onSelect={() => {}}>Delete</Menu.Item>
-          </Menu.Content>
-        </Menu>
-      ),
-    },
-    {
-      name: 'Link Trigger',
-      description: 'Use asChild with a non-button trigger element',
-      render: () => (
-        <Menu>
-          <Menu.Trigger asChild>
-            <a href="#menu-actions">Open menu</a>
-          </Menu.Trigger>
-          <Menu.Content>
-            <Menu.Item onSelect={() => {}}>Inspect</Menu.Item>
-            <Menu.Item onSelect={() => {}}>Rename</Menu.Item>
-          </Menu.Content>
-        </Menu>
-      ),
-    },
-  ],
-});