@fragments-sdk/ui 0.13.0 → 0.15.1

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

@@ -1,174 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } 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')[];
-  } = {},
-) {
-  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}
-    >
-      <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 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('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('has no accessibility violations', async () => {
-    const { container } = renderEditor();
-    await expectNoA11yViolations(container);
-  });
-});

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

@@ -1,205 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/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',
-    ],
-    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',
-    ],
-    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,67 +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);
-  });
-});

package/src/components/Field/Field.fragment.tsx

@@ -1,166 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Field } from '.';
-import { Input } from '../Input';
-import { Grid } from '../Grid';
-
-export default defineFragment({
-  component: Field,
-
-  meta: {
-    name: 'Field',
-    description: 'Compositional form field wrapper providing validation, labels, descriptions, and error messages. Use for advanced form needs beyond baked-in Input/Textarea props.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['form', 'field', 'validation', 'label', 'error', 'input', 'accessible'],
-    since: '0.4.0',
-  },
-
-  usage: {
-    when: [
-      'You need granular validation with match-based error messages',
-      'Custom form controls need accessible labels and descriptions',
-      'Server-side errors need to be distributed to specific fields',
-      'You need dirty/touched tracking or custom validation logic',
-    ],
-    whenNot: [
-      'Simple inputs with basic label and helper text (use Input with label prop)',
-      'Standalone selects or textareas with built-in error display',
-    ],
-    guidelines: [
-      'Always provide a Field.Label for accessibility',
-      'Wrap any form control in Field.Control to connect it to the field context',
-      'Use match prop on Field.Error for granular native validation messages',
-      'Wrap in Form to enable server-side error distribution by field name',
-    ],
-    accessibility: [
-      'Label automatically linked to control via aria-labelledby',
-      'Description linked via aria-describedby',
-      'Error messages announced to screen readers',
-      'Supports data-disabled and data-invalid attributes for styling',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Field content (Label, Control, Description, Error)',
-      required: true,
-    },
-    name: {
-      type: 'string',
-      description: 'Field name, used for error distribution from Form',
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disables the field and its control',
-    },
-    invalid: {
-      type: 'boolean',
-      description: 'Marks the field as invalid',
-    },
-    validate: {
-      type: 'function',
-      description: 'Custom validation function returning error string(s) or null',
-    },
-    validationMode: {
-      type: 'enum',
-      description: 'When to trigger validation',
-      values: ['onSubmit', 'onBlur', 'onChange'],
-    },
-    validationDebounceTime: {
-      type: 'number',
-      description: 'Debounce time in ms for onChange validation',
-    },
-  },
-
-  relations: [
-    { component: 'Input', relationship: 'alternative', note: 'Use Input for simple fields with built-in label/error' },
-    { component: 'Form', relationship: 'parent', note: 'Wrap in Form for server-side error distribution' },
-    { component: 'Fieldset', relationship: 'sibling', note: 'Use Fieldset to group related fields' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'name: string - field name for error distribution',
-      'validate: (value) => string | null - custom validation',
-      'validationMode: onSubmit|onBlur|onChange - validation trigger',
-      'Field.Control: wraps any form component (Input, Textarea, etc.)',
-      'Field.Error match: valueMissing|typeMismatch|customError|... - granular errors',
-    ],
-    scenarioTags: [
-      'form.field',
-      'form.validation',
-      'form.accessible',
-    ],
-    a11yRules: ['A11Y_FIELD_LABEL', 'A11Y_FIELD_ERROR', 'A11Y_FIELD_DESCRIPTION'],
-  },
-
-  variants: [
-    {
-      name: 'Single field',
-      description: 'A single field with label, control, and description',
-      render: () => (
-        <Field name="email">
-          <Field.Label>Email address</Field.Label>
-          <Field.Control>
-            <Input type="email" placeholder="jane@example.com" />
-          </Field.Control>
-          <Field.Description>We will never share your email.</Field.Description>
-        </Field>
-      ),
-    },
-    {
-      name: 'Two-column layout',
-      description: 'Fields arranged in a two-column grid',
-      render: () => (
-        <Grid columns={2} gap="md">
-          <Field name="firstName">
-            <Field.Label>First Name</Field.Label>
-            <Field.Control>
-              <Input placeholder="Jane" />
-            </Field.Control>
-          </Field>
-          <Field name="lastName">
-            <Field.Label>Last Name</Field.Label>
-            <Field.Control>
-              <Input placeholder="Doe" />
-            </Field.Control>
-          </Field>
-          <Grid.Item colSpan="full">
-            <Field name="email">
-              <Field.Label>Email</Field.Label>
-              <Field.Control>
-                <Input type="email" placeholder="jane@example.com" />
-              </Field.Control>
-              <Field.Error match="typeMismatch">Enter a valid email address</Field.Error>
-            </Field>
-          </Grid.Item>
-        </Grid>
-      ),
-    },
-    {
-      name: 'Custom validation',
-      description: 'Field with custom validate function',
-      render: () => (
-        <Field
-          name="age"
-          validate={(value) => {
-            const num = Number(value);
-            if (isNaN(num) || num < 18) return 'Must be 18 or older';
-            return null;
-          }}
-          validationMode="onChange"
-          validationDebounceTime={500}
-        >
-          <Field.Label>Age</Field.Label>
-          <Field.Control>
-            <Input type="number" placeholder="18" />
-          </Field.Control>
-          <Field.Description>You must be at least 18 years old.</Field.Description>
-          <Field.Error match="customError" />
-        </Field>
-      ),
-    },
-  ],
-});

package/src/components/Field/Field.test.tsx

@@ -1,65 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Field } from './index';
-
-describe('Field', () => {
-  it('renders children inside the field root', () => {
-    render(
-      <Field>
-        <Field.Label>Username</Field.Label>
-        <Field.Control><input /></Field.Control>
-      </Field>
-    );
-    expect(screen.getByText('Username')).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-  });
-
-  it('associates label with control', () => {
-    render(
-      <Field>
-        <Field.Label>Username</Field.Label>
-        <Field.Control><input /></Field.Control>
-      </Field>
-    );
-    expect(screen.getByRole('textbox')).toHaveAccessibleName('Username');
-  });
-
-  it('renders description text', () => {
-    render(
-      <Field>
-        <Field.Label>Email</Field.Label>
-        <Field.Control><input /></Field.Control>
-        <Field.Description>We will never share your email.</Field.Description>
-      </Field>
-    );
-    expect(screen.getByText('We will never share your email.')).toBeInTheDocument();
-  });
-
-  it('sets aria-invalid on control when invalid', () => {
-    render(
-      <Field invalid>
-        <Field.Label>Email</Field.Label>
-        <Field.Control><input /></Field.Control>
-      </Field>
-    );
-    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
-  });
-
-  it('exposes compound component pattern', () => {
-    expect(Field.Label).toBeDefined();
-    expect(Field.Control).toBeDefined();
-    expect(Field.Description).toBeDefined();
-    expect(Field.Error).toBeDefined();
-    expect(Field.Validity).toBeDefined();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Field>
-        <Field.Label>Accessible field</Field.Label>
-        <Field.Control><input /></Field.Control>
-      </Field>
-    );
-    await expectNoA11yViolations(container);
-  });
-});