@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/Command/Command.test.tsx

@@ -1,473 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
-import { Command } from './index';
-import { Dialog } from '../Dialog';
-
-function renderCommand(props: Partial<React.ComponentProps<typeof Command>> = {}) {
-  return render(
-    <Command {...props}>
-      <Command.Input placeholder="Type a command..." />
-      <Command.List>
-        <Command.Item onItemSelect={() => {}}>Open File</Command.Item>
-        <Command.Item onItemSelect={() => {}}>Save Document</Command.Item>
-        <Command.Item onItemSelect={() => {}}>Print</Command.Item>
-        <Command.Empty>No results found.</Command.Empty>
-      </Command.List>
-    </Command>
-  );
-}
-
-describe('Command', () => {
-  it('renders input and items', () => {
-    renderCommand();
-
-    expect(screen.getByPlaceholderText('Type a command...')).toBeInTheDocument();
-    expect(screen.getByText('Open File')).toBeInTheDocument();
-    expect(screen.getByText('Save Document')).toBeInTheDocument();
-    expect(screen.getByText('Print')).toBeInTheDocument();
-  });
-
-  it('typing filters items', async () => {
-    const user = userEvent.setup();
-    renderCommand();
-
-    const input = screen.getByPlaceholderText('Type a command...');
-    await user.type(input, 'open');
-
-    await waitFor(() => {
-      expect(screen.getByText('Open File')).toBeVisible();
-      expect(screen.getByText('Save Document')).not.toBeVisible();
-      expect(screen.getByText('Print')).not.toBeVisible();
-    });
-  });
-
-  it('filtered-out items are hidden', async () => {
-    const user = userEvent.setup();
-    renderCommand();
-
-    const input = screen.getByPlaceholderText('Type a command...');
-    await user.type(input, 'save');
-
-    await waitFor(() => {
-      expect(screen.getByText('Save Document')).toBeVisible();
-      expect(screen.getByText('Open File')).not.toBeVisible();
-    });
-  });
-
-  it('empty state shows when no matches', async () => {
-    const user = userEvent.setup();
-    renderCommand();
-
-    const input = screen.getByPlaceholderText('Type a command...');
-    await user.type(input, 'zzzzz');
-
-    await waitFor(() => {
-      expect(screen.getByText('No results found.')).toBeInTheDocument();
-    });
-  });
-
-  it('groups auto-hide when all children filtered', async () => {
-    const user = userEvent.setup();
-    render(
-      <Command>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Group heading="Files">
-            <Command.Item onItemSelect={() => {}}>Open File</Command.Item>
-          </Command.Group>
-          <Command.Group heading="Edit">
-            <Command.Item onItemSelect={() => {}}>Copy</Command.Item>
-            <Command.Item onItemSelect={() => {}}>Paste</Command.Item>
-          </Command.Group>
-          <Command.Empty>No results.</Command.Empty>
-        </Command.List>
-      </Command>
-    );
-
-    const input = screen.getByPlaceholderText('Search...');
-    await user.type(input, 'copy');
-
-    await waitFor(() => {
-      // "Files" group should be hidden since "Open File" doesn't match "copy"
-      const filesGroup = screen.getByText('Files').closest('[role="group"]');
-      expect(filesGroup).toHaveStyle({ display: 'none' });
-
-      // "Edit" group should be visible since "Copy" matches
-      const editGroup = screen.getByText('Edit').closest('[role="group"]');
-      expect(editGroup).not.toHaveStyle({ display: 'none' });
-    });
-  });
-
-  it('custom filter function works', async () => {
-    const user = userEvent.setup();
-    const customFilter = vi.fn((value: string, search: string) => {
-      // Only match exact start
-      return value.toLowerCase().startsWith(search.toLowerCase()) ? 1 : 0;
-    });
-
-    render(
-      <Command filter={customFilter}>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item onItemSelect={() => {}}>Apple</Command.Item>
-          <Command.Item onItemSelect={() => {}}>Banana</Command.Item>
-          <Command.Item onItemSelect={() => {}}>Apricot</Command.Item>
-          <Command.Empty>No results.</Command.Empty>
-        </Command.List>
-      </Command>
-    );
-
-    const input = screen.getByPlaceholderText('Search...');
-    await user.type(input, 'ap');
-
-    await waitFor(() => {
-      expect(screen.getByText('Apple')).toBeVisible();
-      expect(screen.getByText('Apricot')).toBeVisible();
-      expect(screen.getByText('Banana')).not.toBeVisible();
-    });
-  });
-
-  it('ArrowDown/ArrowUp navigates items', async () => {
-    const user = userEvent.setup();
-    renderCommand();
-
-    const input = screen.getByPlaceholderText('Type a command...');
-    input.focus();
-
-    await user.keyboard('{ArrowDown}');
-
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      expect(activeItem).toBeTruthy();
-      expect(activeItem?.textContent).toBe('Open File');
-    });
-
-    await user.keyboard('{ArrowDown}');
-
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      expect(activeItem?.textContent).toBe('Save Document');
-    });
-
-    await user.keyboard('{ArrowUp}');
-
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      expect(activeItem?.textContent).toBe('Open File');
-    });
-  });
-
-  it('Enter selects active item (calls onItemSelect)', async () => {
-    const user = userEvent.setup();
-    const onItemSelect = vi.fn();
-
-    render(
-      <Command>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item onItemSelect={onItemSelect}>First</Command.Item>
-          <Command.Item onItemSelect={() => {}}>Second</Command.Item>
-        </Command.List>
-      </Command>
-    );
-
-    const input = screen.getByPlaceholderText('Search...');
-    input.focus();
-
-    await user.keyboard('{ArrowDown}');
-    await user.keyboard('{Enter}');
-
-    expect(onItemSelect).toHaveBeenCalledTimes(1);
-  });
-
-  it('click selects item', async () => {
-    const user = userEvent.setup();
-    const onItemSelect = vi.fn();
-
-    render(
-      <Command>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item onItemSelect={onItemSelect}>Click Me</Command.Item>
-        </Command.List>
-      </Command>
-    );
-
-    await user.click(screen.getByText('Click Me'));
-    expect(onItemSelect).toHaveBeenCalledTimes(1);
-  });
-
-  it('passes selected value and event to onItemSelect', async () => {
-    const user = userEvent.setup();
-    const onItemSelect = vi.fn();
-
-    render(
-      <Command>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item onItemSelect={onItemSelect}>Click Me</Command.Item>
-        </Command.List>
-      </Command>
-    );
-
-    await user.click(screen.getByText('Click Me'));
-    expect(onItemSelect).toHaveBeenCalledWith('Click Me', expect.any(Object));
-  });
-
-  it('disabled items are skipped in keyboard nav', async () => {
-    const user = userEvent.setup();
-    render(
-      <Command>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item onItemSelect={() => {}}>First</Command.Item>
-          <Command.Item disabled onItemSelect={() => {}}>Disabled</Command.Item>
-          <Command.Item onItemSelect={() => {}}>Third</Command.Item>
-        </Command.List>
-      </Command>
-    );
-
-    const input = screen.getByPlaceholderText('Search...');
-    input.focus();
-
-    await user.keyboard('{ArrowDown}');
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      expect(activeItem?.textContent).toBe('First');
-    });
-
-    await user.keyboard('{ArrowDown}');
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      // Skips "Disabled", goes to "Third"
-      expect(activeItem?.textContent).toBe('Third');
-    });
-  });
-
-  it('Home/End jump to first/last', async () => {
-    const user = userEvent.setup();
-    renderCommand();
-
-    const input = screen.getByPlaceholderText('Type a command...');
-    input.focus();
-
-    await user.keyboard('{End}');
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      expect(activeItem?.textContent).toBe('Print');
-    });
-
-    await user.keyboard('{Home}');
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      expect(activeItem?.textContent).toBe('Open File');
-    });
-  });
-
-  it('loop={false} stops at boundaries', async () => {
-    const user = userEvent.setup();
-    render(
-      <Command loop={false}>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item onItemSelect={() => {}}>First</Command.Item>
-          <Command.Item onItemSelect={() => {}}>Last</Command.Item>
-        </Command.List>
-      </Command>
-    );
-
-    const input = screen.getByPlaceholderText('Search...');
-    input.focus();
-
-    // Navigate to last
-    await user.keyboard('{ArrowDown}');
-    await user.keyboard('{ArrowDown}');
-
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      expect(activeItem?.textContent).toBe('Last');
-    });
-
-    // Try to go past last — should stay on Last
-    await user.keyboard('{ArrowDown}');
-    await waitFor(() => {
-      const activeItem = document.querySelector('[data-active="true"]');
-      expect(activeItem?.textContent).toBe('Last');
-    });
-  });
-
-  it('search value controlled mode', async () => {
-    const user = userEvent.setup();
-    const onSearchChange = vi.fn();
-
-    render(
-      <Command search="open" onSearchChange={onSearchChange}>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item onItemSelect={() => {}}>Open File</Command.Item>
-          <Command.Item onItemSelect={() => {}}>Save</Command.Item>
-          <Command.Empty>No results.</Command.Empty>
-        </Command.List>
-      </Command>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Open File')).toBeVisible();
-      expect(screen.getByText('Save')).not.toBeVisible();
-    });
-
-    // Type in input triggers onSearchChange
-    const input = screen.getByPlaceholderText('Search...');
-    await user.type(input, 'x');
-    expect(onSearchChange).toHaveBeenCalled();
-  });
-
-  it('items with keywords match on keywords', async () => {
-    const user = userEvent.setup();
-    render(
-      <Command>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item keywords={['shortcut', 'hotkey']} onItemSelect={() => {}}>
-            Keyboard Settings
-          </Command.Item>
-          <Command.Item onItemSelect={() => {}}>Display Settings</Command.Item>
-          <Command.Empty>No results.</Command.Empty>
-        </Command.List>
-      </Command>
-    );
-
-    const input = screen.getByPlaceholderText('Search...');
-    await user.type(input, 'hotkey');
-
-    await waitFor(() => {
-      expect(screen.getByText('Keyboard Settings')).toBeVisible();
-      expect(screen.getByText('Display Settings')).not.toBeVisible();
-    });
-  });
-
-  it('compose inside Dialog (command palette usage)', async () => {
-    const user = userEvent.setup();
-    render(
-      <Dialog>
-        <Dialog.Trigger>Open Palette</Dialog.Trigger>
-        <Dialog.Content size="sm">
-          <Command>
-            <Command.Input placeholder="Search commands..." />
-            <Command.List>
-              <Command.Item onItemSelect={() => {}}>New File</Command.Item>
-              <Command.Item onItemSelect={() => {}}>Open Recent</Command.Item>
-            </Command.List>
-          </Command>
-        </Dialog.Content>
-      </Dialog>
-    );
-
-    await user.click(screen.getByRole('button', { name: /open palette/i }));
-
-    await waitFor(() => {
-      expect(screen.getByPlaceholderText('Search commands...')).toBeInTheDocument();
-      expect(screen.getByText('New File')).toBeInTheDocument();
-      expect(screen.getByText('Open Recent')).toBeInTheDocument();
-    });
-  });
-
-  it('uses unique list ids for multiple command instances', () => {
-    render(
-      <>
-        <Command>
-          <Command.Input placeholder="First search" />
-          <Command.List>
-            <Command.Item onItemSelect={() => {}}>One</Command.Item>
-          </Command.List>
-        </Command>
-        <Command>
-          <Command.Input placeholder="Second search" />
-          <Command.List>
-            <Command.Item onItemSelect={() => {}}>Two</Command.Item>
-          </Command.List>
-        </Command>
-      </>
-    );
-
-    const inputs = [
-      screen.getByPlaceholderText('First search'),
-      screen.getByPlaceholderText('Second search'),
-    ];
-    const listIds = inputs.map((input) => input.getAttribute('aria-controls'));
-
-    expect(listIds[0]).toBeTruthy();
-    expect(listIds[1]).toBeTruthy();
-    expect(listIds[0]).not.toBe(listIds[1]);
-    expect(document.getElementById(listIds[0]!)).toBeInTheDocument();
-    expect(document.getElementById(listIds[1]!)).toBeInTheDocument();
-  });
-
-  it('filters rich-label items using extracted text content', async () => {
-    const user = userEvent.setup();
-    render(
-      <Command>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Item onItemSelect={() => {}}>
-            <span>Open</span> File
-          </Command.Item>
-          <Command.Item onItemSelect={() => {}}>Save</Command.Item>
-        </Command.List>
-      </Command>
-    );
-
-    await user.type(screen.getByPlaceholderText('Search...'), 'open');
-
-    await waitFor(() => {
-      expect(screen.getByText('Save')).not.toBeVisible();
-      expect(screen.getByText('Open')).toBeVisible();
-    });
-  });
-
-  it('composes item and group html props without dropping handlers/styles', async () => {
-    const user = userEvent.setup();
-    const itemClick = vi.fn();
-    const itemKeyDown = vi.fn();
-    const itemMouseEnter = vi.fn();
-
-    render(
-      <Command>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Group heading="Files" data-testid="group" style={{ opacity: 0.5 }}>
-            <Command.Item
-              onItemSelect={() => {}}
-              data-testid="item"
-              onClick={itemClick}
-              onKeyDown={itemKeyDown}
-              onMouseEnter={itemMouseEnter}
-              tabIndex={0}
-              style={{ color: 'rgb(255, 0, 0)' }}
-            >
-              Open File
-            </Command.Item>
-          </Command.Group>
-        </Command.List>
-      </Command>
-    );
-
-    const item = screen.getByTestId('item');
-    await user.hover(item);
-    await user.click(item);
-    item.focus();
-    await user.keyboard('{Enter}');
-
-    expect(itemMouseEnter).toHaveBeenCalled();
-    expect(itemClick).toHaveBeenCalled();
-    expect(itemKeyDown).toHaveBeenCalled();
-    expect(item).toHaveStyle({ color: 'rgb(255, 0, 0)' });
-    expect(screen.getByTestId('group')).toHaveStyle({ opacity: '0.5' });
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = renderCommand();
-
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/ConversationList/ConversationList.fragment.tsx

@@ -1,170 +0,0 @@
-import React from "react";
-import { defineFragment } from "@fragments-sdk/core";
-import { ConversationList } from ".";
-import { Message } from "../Message";
-
-export default defineFragment({
-  component: ConversationList,
-
-  meta: {
-    name: "ConversationList",
-    description: "Scrollable message container with auto-scroll and history loading",
-    category: "ai",
-    status: "stable",
-    tags: ["conversation", "chat", "messages", "scroll", "ai", "list"],
-  },
-
-  usage: {
-    when: [
-      "Building a chat interface with multiple messages",
-      "Need auto-scroll behavior when new messages arrive",
-      "Require infinite scroll for loading message history",
-      "Want date separators between message groups",
-    ],
-    whenNot: [
-      "Simple list of items without chat context (use List)",
-      "Single message display (use Message directly)",
-      "Non-scrolling message layout",
-    ],
-    guidelines: [
-      'Use autoScroll="smart" for best UX (only auto-scrolls when near bottom)',
-      "Implement onScrollTop for loading older messages",
-      "ConversationList composes your onScroll handler with internal auto-scroll/history logic",
-      "Provide an emptyState for new conversations",
-      "Use DateSeparator between messages from different days",
-    ],
-    accessibility: [
-      "Uses proper ARIA roles for separators",
-      "Typing indicator has aria-label",
-      "Smooth scroll respects reduced motion preferences",
-      "Keyboard navigation works within scrollable container",
-    ],
-  },
-
-  props: {
-    children: {
-      type: "node",
-      description: "Message components",
-      required: true,
-    },
-    autoScroll: {
-      type: "union",
-      default: '"smart"',
-      description:
-        'Auto-scroll behavior: true (always), false (never), or "smart" (only when near bottom)',
-    },
-    onScrollTop: {
-      type: "function",
-      description: "Callback when user scrolls to top (for loading history). Receives the scroll event.",
-    },
-    loadingHistory: {
-      type: "boolean",
-      default: "false",
-      description: "Show loading spinner at top when loading history",
-    },
-    emptyState: {
-      type: "node",
-      description: "Content to show when conversation is empty",
-    },
-    scrollTopThreshold: {
-      type: "number",
-      default: "50",
-      description: "Pixels from top to trigger onScrollTop",
-    },
-    scrollBottomThreshold: {
-      type: "number",
-      default: "100",
-      description: "Pixels from bottom for smart auto-scroll",
-    },
-  },
-
-  relations: [
-    {
-      component: "Message",
-      relationship: "child",
-      note: "ConversationList contains Message components",
-    },
-    {
-      component: "ThinkingIndicator",
-      relationship: "child",
-      note: "Show ThinkingIndicator at bottom while awaiting response",
-    },
-    {
-      component: "Prompt",
-      relationship: "sibling",
-      note: "Typically paired with Prompt for input",
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      "children: ReactNode - Message components",
-      'autoScroll: boolean | "smart" - scroll behavior (default: "smart")',
-      "onScrollTop: (event?) => void - callback for loading history (receives scroll event)",
-      "loadingHistory: boolean - show history loading spinner",
-      "emptyState: ReactNode - empty conversation content",
-    ],
-    scenarioTags: ["ui.chat", "ui.conversation", "ai.assistant", "layout.scroll"],
-    a11yRules: ["A11Y_ARIA_ROLES", "A11Y_MOTION_PREFERENCE"],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: "Basic",
-      description: "Simple conversation with messages",
-      render: () => (
-        <ConversationList>
-          <Message role="user">
-            <Message.Content>Hello!</Message.Content>
-          </Message>
-          <Message role="assistant">
-            <Message.Content>Hi there! How can I help you today?</Message.Content>
-          </Message>
-          <Message role="user">
-            <Message.Content>Can you explain React hooks?</Message.Content>
-          </Message>
-        </ConversationList>
-      ),
-    },
-    {
-      name: "With Date Separators",
-      description: "Messages grouped by date",
-      render: () => (
-        <ConversationList>
-          <ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />
-          <Message role="user">
-            <Message.Content>A message from yesterday</Message.Content>
-          </Message>
-          <ConversationList.DateSeparator date={new Date()} />
-          <Message role="assistant">
-            <Message.Content>And a message from today!</Message.Content>
-          </Message>
-        </ConversationList>
-      ),
-    },
-    {
-      name: "With Typing Indicator",
-      description: "Shows assistant is typing",
-      render: () => (
-        <ConversationList>
-          <Message role="user">
-            <Message.Content>What is TypeScript?</Message.Content>
-          </Message>
-          <ConversationList.TypingIndicator name="Assistant" />
-        </ConversationList>
-      ),
-    },
-    {
-      name: "Loading History",
-      description: "Loading older messages",
-      render: () => (
-        <ConversationList loadingHistory>
-          <Message role="user">
-            <Message.Content>This is the latest message</Message.Content>
-          </Message>
-        </ConversationList>
-      ),
-    },
-  ],
-});