@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/ThinkingIndicator/ThinkingIndicator.fragment.tsx

@@ -1,183 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { ThinkingIndicator } from '.';
-
-export default defineFragment({
-  component: ThinkingIndicator,
-
-  meta: {
-    name: 'ThinkingIndicator',
-    description: 'Animated indicator showing AI is processing',
-    category: 'ai',
-    status: 'stable',
-    tags: ['thinking', 'loading', 'ai', 'processing', 'indicator', 'animation'],
-  },
-
-  usage: {
-    when: [
-      'AI is processing a request and generating a response',
-      'Need visual feedback during async AI operations',
-      'Want to show multi-step progress for complex AI tasks',
-      'Indicating streaming is about to begin',
-    ],
-    whenNot: [
-      'Simple loading states (use Progress or Skeleton)',
-      'Form submission loading (use Button loading state)',
-      'Page-level loading (use Progress or Skeleton)',
-    ],
-    guidelines: [
-      'Use active prop to control visibility',
-      'Choose variant based on context (dots for chat, spinner for actions)',
-      'Enable showElapsed for longer operations',
-      'Use steps for multi-step AI workflows (tool calls, research)',
-    ],
-    accessibility: [
-      'Uses role="status" and aria-live="polite"',
-      'Provides aria-label for screen readers',
-      'Animations respect prefers-reduced-motion',
-      'Elapsed time uses tabular numbers for stability',
-    ],
-  },
-
-  props: {
-    active: {
-      type: 'boolean',
-      default: 'true',
-      description: 'Whether thinking is active',
-    },
-    label: {
-      type: 'string',
-      default: '"Thinking..."',
-      description: 'Status text',
-    },
-    variant: {
-      type: 'enum',
-      values: ['dots', 'pulse', 'spinner'],
-      default: '"dots"',
-      description: 'Animation style',
-    },
-    showElapsed: {
-      type: 'boolean',
-      default: 'false',
-      description: 'Show elapsed time',
-    },
-    steps: {
-      type: 'array',
-      description: 'Multi-step progress array',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Message',
-      relationship: 'sibling',
-      note: 'Show ThinkingIndicator while waiting for assistant message',
-    },
-    {
-      component: 'ConversationList',
-      relationship: 'parent',
-      note: 'Typically placed at bottom of ConversationList',
-    },
-    {
-      component: 'Progress',
-      relationship: 'alternative',
-      note: 'Use Progress for determinate progress',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'active: boolean - whether indicator is visible (default: true)',
-      'label: string - status text (default: "Thinking...")',
-      'variant: "dots" | "pulse" | "spinner" - animation style',
-      'showElapsed: boolean - show elapsed time',
-      'steps: ThinkingStep[] - multi-step progress',
-    ],
-    scenarioTags: [
-      'ui.loading',
-      'ui.indicator',
-      'ai.thinking',
-      'ai.processing',
-    ],
-    a11yRules: [
-      'A11Y_ARIA_LIVE',
-      'A11Y_MOTION_PREFERENCE',
-    ],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: 'Dots (Default)',
-      description: 'Bouncing dots animation',
-      render: () => (
-        <ThinkingIndicator variant="dots" label="Thinking..." />
-      ),
-    },
-    {
-      name: 'Pulse',
-      description: 'Pulsing ring animation',
-      render: () => (
-        <ThinkingIndicator variant="pulse" label="Processing..." />
-      ),
-    },
-    {
-      name: 'Spinner',
-      description: 'Rotating spinner animation',
-      render: () => (
-        <ThinkingIndicator variant="spinner" label="Loading..." />
-      ),
-    },
-    {
-      name: 'With Elapsed Time',
-      description: 'Shows time since started',
-      render: () => (
-        <ThinkingIndicator
-          variant="dots"
-          label="Generating response..."
-          showElapsed
-        />
-      ),
-    },
-    {
-      name: 'Multi-Step Progress',
-      description: 'Shows progress through multiple steps',
-      render: () => (
-        <ThinkingIndicator
-          variant="spinner"
-          label="Working..."
-          steps={[
-            { id: '1', label: 'Analyzing request', status: 'complete' },
-            { id: '2', label: 'Searching knowledge base', status: 'active' },
-            { id: '3', label: 'Generating response', status: 'pending' },
-          ]}
-        />
-      ),
-    },
-    {
-      name: 'With Error Step',
-      description: 'Shows a step that encountered an error',
-      render: () => (
-        <ThinkingIndicator
-          variant="spinner"
-          label="Retrying..."
-          steps={[
-            { id: '1', label: 'Connecting to API', status: 'complete' },
-            { id: '2', label: 'Fetching data', status: 'error' },
-            { id: '3', label: 'Retrying with fallback', status: 'active' },
-          ]}
-        />
-      ),
-    },
-    {
-      name: 'Custom Label',
-      description: 'Custom status text',
-      render: () => (
-        <ThinkingIndicator
-          variant="dots"
-          label="Claude is writing code..."
-        />
-      ),
-    },
-  ],
-});

package/src/components/ThinkingIndicator/ThinkingIndicator.test.tsx

@@ -1,54 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { ThinkingIndicator } from './index';
-
-describe('ThinkingIndicator', () => {
-  it('renders with role="status" and aria-label', () => {
-    render(<ThinkingIndicator />);
-    // ThinkingIndicator contains a nested Loading with role="status", so use getAllByRole
-    const statuses = screen.getAllByRole('status');
-    expect(statuses.length).toBeGreaterThanOrEqual(1);
-    const thinkingStatus = statuses.find(el => el.getAttribute('aria-label') === 'Thinking...');
-    expect(thinkingStatus).toBeTruthy();
-  });
-
-  it('accepts custom label', () => {
-    render(<ThinkingIndicator label="Processing..." />);
-    expect(screen.getByText('Processing...')).toBeInTheDocument();
-  });
-
-  it('renders nothing when active is false', () => {
-    const { container } = render(<ThinkingIndicator active={false} />);
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('renders steps when provided', () => {
-    const steps = [
-      { id: '1', label: 'Analyzing', status: 'complete' as const },
-      { id: '2', label: 'Generating', status: 'active' as const },
-      { id: '3', label: 'Reviewing', status: 'pending' as const },
-    ];
-    render(<ThinkingIndicator steps={steps} />);
-    expect(screen.getByText('Analyzing')).toBeInTheDocument();
-    expect(screen.getByText('Generating')).toBeInTheDocument();
-    expect(screen.getByText('Reviewing')).toBeInTheDocument();
-  });
-
-  it('renders step status indicators', () => {
-    const steps = [
-      { id: '1', label: 'Done', status: 'complete' as const },
-      { id: '2', label: 'Failed', status: 'error' as const },
-    ];
-    const { container } = render(<ThinkingIndicator steps={steps} />);
-    // Complete step renders a check icon (SVG), error step renders an X icon (SVG)
-    const svgs = container.querySelectorAll('svg');
-    expect(svgs.length).toBeGreaterThanOrEqual(2);
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <ThinkingIndicator label="Thinking about it" />
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Toast/Toast.fragment.tsx

@@ -1,226 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { Toast, ToastProvider, useToast } from '.';
-
-// Demo component that triggers toasts
-function ToastDemo() {
-  const { success, error, warning, info } = useToast();
-
-  return (
-    <div style={{ display: 'flex', gap: 'var(--fui-space-1)', flexWrap: 'wrap' }}>
-      <button
-        onClick={() => success({ title: 'Success!', description: 'Your changes have been saved.', id: 'save-success' })}
-        style={{ padding: 'var(--fui-space-1) var(--fui-space-2)', borderRadius: 'var(--fui-radius-md)', border: '1px solid var(--fui-color-success)', background: 'var(--fui-color-success-bg)', color: 'var(--fui-color-success)', cursor: 'pointer' }}
-      >
-        Success Toast
-      </button>
-      <button
-        onClick={() => error('Error', 'Something went wrong. Please try again.')}
-        style={{ padding: 'var(--fui-space-1) var(--fui-space-2)', borderRadius: 'var(--fui-radius-md)', border: '1px solid var(--fui-color-danger)', background: 'var(--fui-color-danger-bg)', color: 'var(--fui-color-danger)', cursor: 'pointer' }}
-      >
-        Error Toast
-      </button>
-      <button
-        onClick={() => warning('Warning', 'This action cannot be undone.')}
-        style={{ padding: 'var(--fui-space-1) var(--fui-space-2)', borderRadius: 'var(--fui-radius-md)', border: '1px solid var(--fui-color-warning)', background: 'var(--fui-color-warning-bg)', color: 'var(--fui-color-warning)', cursor: 'pointer' }}
-      >
-        Warning Toast
-      </button>
-      <button
-        onClick={() => info('Info', 'New features are available.')}
-        style={{ padding: 'var(--fui-space-1) var(--fui-space-2)', borderRadius: 'var(--fui-radius-md)', border: '1px solid var(--fui-color-info)', background: 'var(--fui-color-info-bg)', color: 'var(--fui-color-info)', cursor: 'pointer' }}
-      >
-        Info Toast
-      </button>
-    </div>
-  );
-}
-
-// Wrapped demo with provider
-function ToastDemoWrapper() {
-  return (
-    <ToastProvider position="bottom-right" duration={5000}>
-      <ToastDemo />
-    </ToastProvider>
-  );
-}
-
-export default defineFragment({
-  component: Toast,
-
-  meta: {
-    name: 'Toast',
-    description: 'Brief, non-blocking notification messages',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['notification', 'alert', 'message', 'feedback'],
-  },
-
-  usage: {
-    when: [
-      'Providing feedback after an action',
-      'Showing success/error status of operations',
-      'Non-critical information that doesn\'t require action',
-      'Temporary messages that auto-dismiss',
-    ],
-    whenNot: [
-      'Critical errors requiring user action (use Dialog)',
-      'Persistent information (use Alert)',
-      'Inline validation (use form error states)',
-      'System-wide announcements (use Banner)',
-    ],
-    guidelines: [
-      'Keep messages brief and actionable',
-      'Use appropriate variant for the message type',
-      'Auto-dismiss after reasonable duration (3-5s)',
-      'Allow manual dismissal for longer messages',
-      'Limit number of simultaneous toasts',
-      'useToast() variant helpers accept either (title, description?) or an options object for action/duration/id',
-    ],
-    accessibility: [
-      'Use role="alert" for important messages',
-      'Ensure sufficient display time for reading',
-      'Don\'t rely solely on color for meaning',
-      'Provide dismiss button with accessible label',
-    ],
-  },
-
-  props: {
-    title: {
-      type: 'string',
-      description: 'Toast title',
-    },
-    description: {
-      type: 'string',
-      description: 'Additional message content',
-    },
-    variant: {
-      type: 'enum',
-      values: ['default', 'success', 'error', 'warning', 'info'],
-      default: 'default',
-      description: 'Visual variant indicating message type',
-    },
-    duration: {
-      type: 'number',
-      default: 5000,
-      description: 'Auto-dismiss duration in ms (0 = no auto-dismiss)',
-    },
-    action: {
-      type: 'object',
-      description: 'Optional action button { label, onClick }',
-    },
-    onDismiss: {
-      type: 'function',
-      description: 'Callback when toast should be dismissed',
-    },
-    onPause: {
-      type: 'function',
-      description: 'Callback when auto-dismiss timer should pause',
-    },
-    onResume: {
-      type: 'function',
-      description: 'Callback when auto-dismiss timer should resume',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Alert',
-      relationship: 'alternative',
-      note: 'Use Alert for persistent inline messages',
-    },
-    {
-      component: 'Dialog',
-      relationship: 'alternative',
-      note: 'Use Dialog for messages requiring user action',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'title: string - toast title',
-      'description: string - additional message',
-      'variant: default|success|error|warning|info',
-      'duration: number - ms before auto-dismiss',
-      'action: { label, onClick } - optional action',
-      'ToastInput (useToast): optional id for deterministic creation/replacement flows',
-      'useToast().success/error/warning/info: (title, description?) or ({ title, description, action, duration, id })',
-    ],
-    scenarioTags: [
-      'feedback.success',
-      'feedback.error',
-      'feedback.notification',
-    ],
-    a11yRules: [
-      'A11Y_ALERT_ROLE',
-      'A11Y_TARGET_SIZE_MIN',
-    ],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Interactive toast demo - click buttons to trigger toasts (includes helper object syntax example)',
-      render: () => <ToastDemoWrapper />,
-    },
-    {
-      name: 'Success',
-      description: 'Success message variant',
-      render: () => (
-        <Toast
-          title="Success!"
-          description="Your changes have been saved."
-          variant="success"
-        />
-      ),
-    },
-    {
-      name: 'Error',
-      description: 'Error message variant',
-      render: () => (
-        <Toast
-          title="Error"
-          description="Failed to save changes. Please try again."
-          variant="error"
-        />
-      ),
-    },
-    {
-      name: 'Warning',
-      description: 'Warning message variant',
-      render: () => (
-        <Toast
-          title="Warning"
-          description="This action cannot be undone."
-          variant="warning"
-        />
-      ),
-    },
-    {
-      name: 'Info',
-      description: 'Informational message variant',
-      render: () => (
-        <Toast
-          title="New Update"
-          description="Version 2.0 is now available."
-          variant="info"
-        />
-      ),
-    },
-    {
-      name: 'With Action',
-      description: 'Toast with an action button',
-      render: () => (
-        <Toast
-          title="File deleted"
-          description="The file has been moved to trash."
-          action={{
-            label: 'Undo',
-            onClick: () => console.log('Undo clicked'),
-          }}
-        />
-      ),
-    },
-  ],
-});

package/src/components/Toast/Toast.test.tsx

@@ -1,192 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, userEvent, act, waitFor, expectNoA11yViolations } from '../../test/utils';
-import { Toast, useToast, ToastProvider } from './index';
-
-// Helper component to trigger toasts via the hook
-function ToastTrigger({
-  variant,
-  title = 'Test Toast',
-  description,
-  duration,
-  action,
-}: {
-  variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
-  title?: string;
-  description?: string;
-  duration?: number;
-  action?: { label: string; onClick: () => void };
-}) {
-  const { toast } = useToast();
-  return (
-    <button
-      onClick={() => toast({ title, description, variant, duration, action })}
-    >
-      Show Toast
-    </button>
-  );
-}
-
-function renderWithProvider(
-  ui: React.ReactElement,
-  providerProps: Partial<React.ComponentProps<typeof ToastProvider>> = {}
-) {
-  return render(
-    <ToastProvider {...providerProps}>
-      {ui}
-    </ToastProvider>
-  );
-}
-
-describe('Toast', () => {
-  beforeEach(() => {
-    vi.useFakeTimers({ shouldAdvanceTime: true });
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('renders a toast when triggered via useToast hook', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    renderWithProvider(<ToastTrigger title="Hello Toast" />);
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Hello Toast')).toBeInTheDocument();
-    });
-  });
-
-  it('renders title and description', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    renderWithProvider(
-      <ToastTrigger title="Title" description="Description text" />
-    );
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Title')).toBeInTheDocument();
-      expect(screen.getByText('Description text')).toBeInTheDocument();
-    });
-  });
-
-  it('uses role="alert" for error variant', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    renderWithProvider(<ToastTrigger variant="error" title="Error!" />);
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByRole('alert')).toBeInTheDocument();
-    });
-  });
-
-  it('uses role="alert" for warning variant', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    renderWithProvider(<ToastTrigger variant="warning" title="Warning!" />);
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByRole('alert')).toBeInTheDocument();
-    });
-  });
-
-  it('uses role="status" for default/success/info variants', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    renderWithProvider(<ToastTrigger variant="success" title="Success!" />);
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByRole('status')).toBeInTheDocument();
-    });
-  });
-
-  it('dismiss button has aria-label', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    renderWithProvider(<ToastTrigger title="Dismissable" />);
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: /dismiss notification/i })).toBeInTheDocument();
-    });
-  });
-
-  it('dismisses when dismiss button is clicked', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    renderWithProvider(<ToastTrigger title="To Dismiss" duration={0} />);
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('To Dismiss')).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByRole('button', { name: /dismiss notification/i }));
-
-    await waitFor(() => {
-      expect(screen.queryByText('To Dismiss')).not.toBeInTheDocument();
-    });
-  });
-
-  it('auto-dismisses after duration', async () => {
-    renderWithProvider(
-      <ToastTrigger title="Auto Dismiss" duration={3000} />,
-      { duration: 3000 }
-    );
-
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Auto Dismiss')).toBeInTheDocument();
-    });
-
-    await act(async () => {
-      vi.advanceTimersByTime(4000);
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByText('Auto Dismiss')).not.toBeInTheDocument();
-    });
-  });
-
-  it('renders action button when action is provided', async () => {
-    const onClick = vi.fn();
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    renderWithProvider(
-      <ToastTrigger
-        title="With Action"
-        duration={0}
-        action={{ label: 'Undo', onClick }}
-      />
-    );
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: /undo/i })).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByRole('button', { name: /undo/i }));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('has no accessibility violations', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    const { container } = renderWithProvider(
-      <ToastTrigger title="Accessible Toast" variant="info" />
-    );
-
-    await user.click(screen.getByRole('button', { name: /show toast/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Accessible Toast')).toBeInTheDocument();
-    });
-
-    await expectNoA11yViolations(container);
-  });
-});