@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/Editor/Editor.test.tsx

@@ -1,241 +0,0 @@
-import type { ReactNode } from 'react';
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations, act } from '../../test/utils';
-import { Editor } from './index';
-import { Button } from '../Button';
-
-function renderEditor(
-  props: {
-    placeholder?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    defaultValue?: string;
-    onValueChange?: (v: string) => void;
-    formats?: ('bold' | 'italic' | 'strikethrough' | 'link' | 'code' | 'bulletList')[];
-    toolbarIcons?: Partial<Record<'bold' | 'italic' | 'strikethrough' | 'link' | 'code' | 'bulletList', ReactNode>>;
-  } = {},
-) {
-  return render(
-    <Editor
-      placeholder={props.placeholder ?? 'Start typing your masterpiece here...'}
-      onValueChange={props.onValueChange}
-      disabled={props.disabled}
-      readOnly={props.readOnly}
-      defaultValue={props.defaultValue}
-      formats={props.formats}
-      toolbarIcons={props.toolbarIcons}
-    >
-      <Editor.Toolbar>
-        <Editor.ToolbarGroup aria-label="Text formatting">
-          {(props.formats ?? ['bold', 'italic', 'code']).map((f) => (
-            <Editor.ToolbarButton key={f} format={f} />
-          ))}
-        </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>,
-  );
-}
-
-/**
- * Find the editor content area. TipTap renders a contenteditable div,
- * the fallback renders a textarea. Both are accessible as textbox role.
- */
-function getEditorInput() {
-  // Try textarea first (markdown fallback), then contenteditable (TipTap)
-  const textarea = document.querySelector('textarea');
-  if (textarea) return textarea;
-  const contenteditable = document.querySelector('[contenteditable]');
-  if (contenteditable) return contenteditable as HTMLElement;
-  throw new Error('Could not find editor content area');
-}
-
-describe('Editor', () => {
-  it('renders editor content area with placeholder', () => {
-    renderEditor({ placeholder: 'Write here...' });
-    // TipTap stores placeholder on wrapper via data-placeholder;
-    // textarea uses native placeholder. Check either.
-    const wrapper = document.querySelector('[data-placeholder="Write here..."]');
-    const textarea = document.querySelector('textarea[placeholder="Write here..."]');
-    expect(wrapper || textarea).toBeTruthy();
-  });
-
-  it('renders toolbar with format buttons', () => {
-    renderEditor({ formats: ['bold', 'italic', 'code'] });
-    expect(screen.getByRole('button', { name: /bold/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /italic/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /code/i })).toBeInTheDocument();
-  });
-
-  it('renders custom toolbar icons from toolbarIcons', () => {
-    renderEditor({
-      formats: ['bold'],
-      toolbarIcons: {
-        bold: <span data-testid="custom-bold-icon" aria-hidden="true">B*</span>,
-      },
-    });
-    expect(screen.getByRole('button', { name: /bold/i })).toBeInTheDocument();
-    expect(screen.getByTestId('custom-bold-icon')).toBeInTheDocument();
-  });
-
-  it('renders toolbar with proper ARIA role', () => {
-    renderEditor();
-    expect(screen.getByRole('toolbar')).toBeInTheDocument();
-  });
-
-  it('renders toolbar groups with role="group"', () => {
-    renderEditor();
-    const groups = screen.getAllByRole('group');
-    expect(groups.length).toBeGreaterThanOrEqual(2);
-    expect(groups[0]).toHaveAttribute('aria-label', 'Text formatting');
-    expect(groups[1]).toHaveAttribute('aria-label', 'Actions');
-  });
-
-  it('renders status indicator with AUTO-SAVED text', () => {
-    renderEditor();
-    expect(screen.getByText('AUTO-SAVED')).toBeInTheDocument();
-  });
-
-  it('renders status indicator with aria-live="polite"', () => {
-    renderEditor();
-    const indicator = screen.getByRole('status');
-    expect(indicator).toHaveAttribute('aria-live', 'polite');
-  });
-
-  it('renders Publish button', () => {
-    renderEditor();
-    expect(screen.getByRole('button', { name: /publish/i })).toBeInTheDocument();
-  });
-
-  it('renders status bar with word and character counts', () => {
-    renderEditor({ defaultValue: 'Hello world' });
-    expect(screen.getByText('2 Words')).toBeInTheDocument();
-    expect(screen.getByText('11 Characters')).toBeInTheDocument();
-  });
-
-  it('shows singular "Word" for count of 1', () => {
-    renderEditor({ defaultValue: 'Hello' });
-    expect(screen.getByText('1 Word')).toBeInTheDocument();
-  });
-
-  it('shows 0 Words when empty', () => {
-    renderEditor({ defaultValue: '' });
-    expect(screen.getByText('0 Words')).toBeInTheDocument();
-  });
-
-  it('toolbar buttons have aria-pressed attribute', () => {
-    renderEditor({ formats: ['bold'] });
-    const boldBtn = screen.getByRole('button', { name: /bold/i });
-    expect(boldBtn).toHaveAttribute('aria-pressed', 'false');
-  });
-
-  it('supports state-aware toolbar icon render functions', () => {
-    render(
-      <Editor
-        formats={['bold']}
-        toolbarIcons={{
-          bold: ({ active, isDisabled }) => (
-            <span
-              data-testid="bold-icon-state"
-              data-active={String(active)}
-              data-disabled={String(isDisabled)}
-              aria-hidden="true"
-            />
-          ),
-        }}
-      />
-    );
-
-    const icon = screen.getByTestId('bold-icon-state');
-    expect(icon).toHaveAttribute('data-active', 'false');
-    expect(icon).toHaveAttribute('data-disabled', 'false');
-  });
-
-  it('disables toolbar buttons when editor is disabled', () => {
-    renderEditor({ disabled: true, formats: ['bold', 'italic'] });
-    expect(screen.getByRole('button', { name: /bold/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /italic/i })).toBeDisabled();
-  });
-
-  it('sets data-disabled on root when disabled', () => {
-    const { container } = renderEditor({ disabled: true });
-    const root = container.firstElementChild;
-    expect(root).toHaveAttribute('data-disabled');
-  });
-
-  it('sets contenteditable to false or disables textarea when disabled', () => {
-    renderEditor({ disabled: true });
-    const input = getEditorInput();
-    if (input instanceof HTMLTextAreaElement) {
-      expect(input).toBeDisabled();
-    } else {
-      expect(input).toHaveAttribute('contenteditable', 'false');
-    }
-  });
-
-  it('sets data-readonly on root when readOnly', () => {
-    const { container } = renderEditor({ readOnly: true });
-    const root = container.firstElementChild;
-    expect(root).toHaveAttribute('data-readonly');
-  });
-
-  it('disables toolbar buttons when readOnly', () => {
-    renderEditor({ readOnly: true, formats: ['bold'] });
-    expect(screen.getByRole('button', { name: /bold/i })).toBeDisabled();
-  });
-
-  it('renders with default toolbar and status bar when no children', () => {
-    render(
-      <Editor placeholder="Auto layout" formats={['bold', 'italic']} />,
-    );
-    expect(screen.getByRole('toolbar')).toBeInTheDocument();
-    // Check placeholder via wrapper or native textarea
-    const wrapper = document.querySelector('[data-placeholder="Auto layout"]');
-    const textarea = document.querySelector('textarea[placeholder="Auto layout"]');
-    expect(wrapper || textarea).toBeTruthy();
-    expect(screen.getByText('0 Words')).toBeInTheDocument();
-  });
-
-  it('supports async onAutoSave callbacks and updates status after resolution', async () => {
-    vi.useFakeTimers();
-    let resolveSave: (() => void) | undefined;
-    const onAutoSave = vi.fn(
-      () =>
-        new Promise<void>((resolve) => {
-          resolveSave = resolve;
-        })
-    );
-
-    render(
-      <Editor defaultValue="Hello world" onAutoSave={onAutoSave} autoSaveInterval={25}>
-        <Editor.Content />
-        <Editor.StatusIndicator />
-      </Editor>
-    );
-
-    await vi.advanceTimersByTimeAsync(25);
-    expect(onAutoSave).toHaveBeenCalledTimes(1);
-    expect(String(onAutoSave.mock.calls[0][0])).toContain('Hello world');
-    expect(screen.getByText('SAVING...')).toBeInTheDocument();
-
-    await act(async () => {
-      resolveSave?.();
-      await Promise.resolve();
-    });
-    expect(screen.getByText('AUTO-SAVED')).toBeInTheDocument();
-
-    vi.useRealTimers();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = renderEditor();
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/EmptyState/EmptyState.fragment.tsx

@@ -1,207 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { EmptyState } from '.';
-import { Button } from '../Button';
-
-// Simple placeholder icon
-const FolderIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-  </svg>
-);
-
-const SearchIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <circle cx="11" cy="11" r="8" />
-    <line x1="21" y1="21" x2="16.65" y2="16.65" />
-  </svg>
-);
-
-const InboxIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
-    <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-  </svg>
-);
-
-export default defineFragment({
-  component: EmptyState,
-
-  meta: {
-    name: 'EmptyState',
-    description: 'Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['empty', 'placeholder', 'no-data', 'zero-state', 'blank-slate'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Empty lists, tables, or search results',
-      'New user onboarding (no content yet)',
-      'Filtered views with no matches',
-      'Error states where content failed to load',
-    ],
-    whenNot: [
-      'Loading states (use skeleton or spinner)',
-      'Error messages with retry (use Alert)',
-      'Temporary messages (use Toast)',
-    ],
-    guidelines: [
-      'Always explain why the area is empty',
-      'Provide a clear action to resolve the empty state',
-      'Use appropriate icons to reinforce the message',
-      'Keep messaging positive and actionable',
-      'EmptyState compound sub-components forward DOM props for ids, aria attributes, and handlers',
-    ],
-    accessibility: [
-      'Empty state content is accessible to screen readers',
-      'Action buttons follow button accessibility guidelines',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'EmptyState content - use EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions sub-components',
-    },
-    size: {
-      type: 'enum',
-      description: 'Size variant',
-      values: ['sm', 'md', 'lg'],
-      default: 'md',
-    },
-  },
-
-  relations: [
-    { component: 'Alert', relationship: 'alternative', note: 'Use Alert for error states with retry' },
-    { component: 'Progress', relationship: 'alternative', note: 'Use Progress/Spinner for loading states' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'size: sm|md|lg (default: md)',
-      'Sub-components: EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions',
-      'Compound sub-components forward DOM props to their rendered elements',
-    ],
-    scenarioTags: [
-      'feedback.empty',
-      'onboarding.start',
-      'search.no-results',
-    ],
-    a11yRules: ['A11Y_EMPTY_STATE_CONTENT'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Icon', 'Title', 'Description', 'Actions'],
-    requiredChildren: ['Title'],
-    commonPatterns: [
-      '<EmptyState><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description></EmptyState>',
-      '<EmptyState><EmptyState.Icon>{icon}</EmptyState.Icon><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description><EmptyState.Actions><Button>{action}</Button></EmptyState.Actions></EmptyState>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic empty state with action',
-      render: () => (
-        <EmptyState>
-          <EmptyState.Icon><FolderIcon /></EmptyState.Icon>
-          <EmptyState.Title>No projects yet</EmptyState.Title>
-          <EmptyState.Description>Get started by creating your first project.</EmptyState.Description>
-          <EmptyState.Actions>
-            <Button>Create Project</Button>
-          </EmptyState.Actions>
-        </EmptyState>
-      ),
-    },
-    {
-      name: 'No Results',
-      description: 'Empty search results',
-      render: () => (
-        <EmptyState>
-          <EmptyState.Icon><SearchIcon /></EmptyState.Icon>
-          <EmptyState.Title>No results found</EmptyState.Title>
-          <EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>
-          <EmptyState.Actions>
-            <Button variant="secondary">Clear Filters</Button>
-          </EmptyState.Actions>
-        </EmptyState>
-      ),
-    },
-    {
-      name: 'With Secondary Action',
-      description: 'Empty state with two actions',
-      render: () => (
-        <EmptyState>
-          <EmptyState.Icon><InboxIcon /></EmptyState.Icon>
-          <EmptyState.Title>Inbox is empty</EmptyState.Title>
-          <EmptyState.Description>You have no new messages.</EmptyState.Description>
-          <EmptyState.Actions>
-            <Button>Compose Message</Button>
-            <Button variant="secondary">View Archive</Button>
-          </EmptyState.Actions>
-        </EmptyState>
-      ),
-    },
-    {
-      name: 'Small',
-      description: 'Compact empty state for inline use',
-      render: () => (
-        <EmptyState size="sm">
-          <EmptyState.Title>No items</EmptyState.Title>
-          <EmptyState.Description>Add items to see them here.</EmptyState.Description>
-        </EmptyState>
-      ),
-    },
-    {
-      name: 'Large',
-      description: 'Prominent empty state for full-page use',
-      render: () => (
-        <EmptyState size="lg">
-          <EmptyState.Icon><FolderIcon /></EmptyState.Icon>
-          <EmptyState.Title>Welcome to your workspace</EmptyState.Title>
-          <EmptyState.Description>
-            This is where your projects will appear. Create your first project to get started.
-          </EmptyState.Description>
-          <EmptyState.Actions>
-            <Button>Create Your First Project</Button>
-          </EmptyState.Actions>
-        </EmptyState>
-      ),
-    },
-  ],
-});

package/src/components/EmptyState/EmptyState.test.tsx

@@ -1,85 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { EmptyState } from './index';
-
-describe('EmptyState', () => {
-  it('renders children', () => {
-    render(
-      <EmptyState>
-        <EmptyState.Title>No results</EmptyState.Title>
-      </EmptyState>
-    );
-    expect(screen.getByText('No results')).toBeInTheDocument();
-  });
-
-  it('renders all compound sub-components', () => {
-    render(
-      <EmptyState>
-        <EmptyState.Icon>ICON</EmptyState.Icon>
-        <EmptyState.Title>Empty</EmptyState.Title>
-        <EmptyState.Description>Nothing to show</EmptyState.Description>
-        <EmptyState.Actions><button>Add item</button></EmptyState.Actions>
-      </EmptyState>
-    );
-    expect(screen.getByText('ICON')).toHaveClass('icon');
-    expect(screen.getByText('Empty').tagName).toBe('H3');
-    expect(screen.getByText('Nothing to show').tagName).toBe('P');
-    expect(screen.getByRole('button', { name: 'Add item' })).toBeInTheDocument();
-  });
-
-  it('applies size class', () => {
-    const { container } = render(
-      <EmptyState size="lg">
-        <EmptyState.Title>Large</EmptyState.Title>
-      </EmptyState>
-    );
-    expect(container.firstElementChild).toHaveClass('lg');
-  });
-
-  it('applies custom className', () => {
-    const { container } = render(
-      <EmptyState className="custom">
-        <EmptyState.Title>Custom</EmptyState.Title>
-      </EmptyState>
-    );
-    expect(container.firstElementChild).toHaveClass('custom');
-  });
-
-  it('defaults to md size', () => {
-    const { container } = render(
-      <EmptyState>
-        <EmptyState.Title>Default</EmptyState.Title>
-      </EmptyState>
-    );
-    expect(container.firstElementChild).toHaveClass('md');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <EmptyState>
-        <EmptyState.Icon>ICON</EmptyState.Icon>
-        <EmptyState.Title>No items found</EmptyState.Title>
-        <EmptyState.Description>Try adjusting your search</EmptyState.Description>
-      </EmptyState>
-    );
-    await expectNoA11yViolations(container);
-  });
-
-  it('forwards DOM props on compound sub-components', () => {
-    render(
-      <EmptyState>
-        <EmptyState.Icon data-testid="icon" title="placeholder">ICON</EmptyState.Icon>
-        <EmptyState.Title data-testid="title" id="empty-title">Empty</EmptyState.Title>
-        <EmptyState.Description data-testid="desc" aria-live="polite">Nothing here</EmptyState.Description>
-        <EmptyState.Actions data-testid="actions" role="group">
-          <button>Add</button>
-        </EmptyState.Actions>
-      </EmptyState>
-    );
-
-    expect(screen.getByTestId('icon')).toHaveAttribute('title', 'placeholder');
-    expect(screen.getByTestId('title')).toHaveAttribute('id', 'empty-title');
-    expect(screen.getByTestId('desc')).toHaveAttribute('aria-live', 'polite');
-    expect(screen.getByTestId('actions')).toHaveAttribute('role', 'group');
-  });
-});