@fragments-sdk/ui 0.10.0 → 0.11.1

package/src/components/Editor/Editor.module.scss

@@ -0,0 +1,333 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+// ============================================
+// Editor Root
+// ============================================
+
+.editor {
+  @include surface-elevated;
+  display: flex;
+  flex-direction: column;
+  min-width: 400px;
+  overflow: hidden;
+
+  // Focus ring (Enhancement #7)
+  &:focus-within:not([data-disabled]) {
+    @include focus-ring;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &[data-readonly] {
+    .contentTextarea {
+      cursor: default;
+    }
+  }
+
+  // Size variants (Enhancement #2)
+  &[data-size='sm'] {
+    .content,
+    .contentTextarea,
+    :global(.tiptap) {
+      min-height: 120px;
+    }
+  }
+
+  &[data-size='md'] {
+    .content,
+    .contentTextarea,
+    :global(.tiptap) {
+      min-height: 200px;
+    }
+  }
+
+  &[data-size='lg'] {
+    .content,
+    .contentTextarea,
+    :global(.tiptap) {
+      min-height: 400px;
+    }
+  }
+}
+
+// ============================================
+// Toolbar
+// ============================================
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
+  border-bottom: 1px solid var(--fui-border, $fui-border);
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+}
+
+// ============================================
+// Toolbar Group
+// ============================================
+
+.toolbarGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-0-5, $fui-space-0-5);
+}
+
+// ============================================
+// Toolbar Button
+// ============================================
+
+.toolbarButton {
+  @include button-reset;
+  @include interactive-base;
+  @include touch-target;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  background-color: transparent;
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.toolbarButtonActive {
+  color: var(--fui-color-accent, $fui-color-accent);
+  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+
+  &:hover:not(:disabled) {
+    color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+  }
+}
+
+// ============================================
+// Separator
+// ============================================
+
+.separator {
+  width: 1px;
+  height: 1rem;
+  background-color: var(--fui-border, $fui-border);
+  margin: 0 var(--fui-space-1, $fui-space-1);
+  flex-shrink: 0;
+}
+
+// ============================================
+// Status Indicator
+// ============================================
+
+.statusIndicator {
+  @include section-label-text;
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  white-space: nowrap;
+  padding: 0 var(--fui-space-2, $fui-space-2);
+}
+
+.statusError {
+  color: var(--fui-color-danger, $fui-color-danger);
+}
+
+// ============================================
+// Content
+// ============================================
+
+.content {
+  flex: 1;
+  min-height: 200px;
+  overflow-y: auto;
+}
+
+.contentRich {
+  // TipTap editor styling
+  :global(.tiptap) {
+    padding: var(--fui-padding-inline-md, $fui-padding-inline-md);
+    min-height: 200px;
+    outline: none;
+    @include text-base;
+    line-height: var(--fui-line-height-relaxed, $fui-line-height-relaxed);
+    font-size: var(--fui-font-size-base, $fui-font-size-base);
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    // Placeholder
+    p.is-editor-empty:first-child::before {
+      content: attr(data-placeholder);
+      float: left;
+      color: var(--fui-text-tertiary, $fui-text-tertiary);
+      pointer-events: none;
+      height: 0;
+    }
+
+    // Headings (Enhancement #4)
+    h1 {
+      font-size: var(--fui-font-size-2xl, $fui-font-size-2xl);
+      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+      margin: 0 0 var(--fui-space-3, $fui-space-3);
+    }
+
+    h2 {
+      font-size: var(--fui-font-size-xl, $fui-font-size-xl);
+      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+      margin: 0 0 var(--fui-space-2, $fui-space-2);
+    }
+
+    h3 {
+      font-size: var(--fui-font-size-lg, $fui-font-size-lg);
+      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+      margin: 0 0 var(--fui-space-2, $fui-space-2);
+    }
+
+    // Blockquote (Enhancement #5)
+    blockquote {
+      border-left: 3px solid var(--fui-color-accent, $fui-color-accent);
+      padding-left: var(--fui-space-4, $fui-space-4);
+      margin: 0 0 var(--fui-space-2, $fui-space-2);
+      color: var(--fui-text-secondary, $fui-text-secondary);
+      font-style: italic;
+    }
+
+    // Inline code
+    code {
+      background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+      border-radius: var(--fui-radius-sm, $fui-radius-sm);
+      padding: 0.15em 0.3em;
+      font-family: var(--fui-font-mono, $fui-font-mono);
+      font-size: 0.9em;
+    }
+
+    // Links
+    a {
+      color: var(--fui-color-accent, $fui-color-accent);
+      text-decoration: underline;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+      }
+    }
+
+    // Unordered lists
+    ul {
+      padding-left: var(--fui-space-5, $fui-space-5);
+      list-style-type: disc;
+    }
+
+    // Ordered lists (Enhancement #3)
+    ol {
+      padding-left: var(--fui-space-5, $fui-space-5);
+      list-style-type: decimal;
+    }
+
+    // Strikethrough
+    s {
+      text-decoration: line-through;
+    }
+
+    // Paragraphs
+    p {
+      margin: 0 0 var(--fui-space-2, $fui-space-2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.contentTextarea {
+  @include button-reset;
+  @include text-base;
+
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  padding: var(--fui-padding-inline-md, $fui-padding-inline-md);
+  background: transparent;
+  border: none;
+  resize: none;
+  overflow-y: auto;
+  line-height: var(--fui-line-height-relaxed, $fui-line-height-relaxed);
+  font-size: var(--fui-font-size-base, $fui-font-size-base);
+
+  &::placeholder {
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// ============================================
+// Status Bar
+// ============================================
+
+.statusBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
+  border-top: 1px solid var(--fui-border, $fui-border);
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+}
+
+.statusBarLeft {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-2, $fui-space-2);
+}
+
+.statusBarRight {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-2, $fui-space-2);
+  margin-left: auto;
+}
+
+.statusBarItem {
+  @include helper-text;
+  white-space: nowrap;
+}
+
+// maxLength indicator states (Enhancement #1)
+.statusBarItemWarning {
+  color: var(--fui-color-warning, $fui-color-warning);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+}
+
+.statusBarItemError {
+  color: var(--fui-color-danger, $fui-color-danger);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+}

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

@@ -0,0 +1,174 @@
+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);
+  });
+});