@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/__tests__/DocProgressBar.test.tsx

@@ -1,102 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { DocProgressBar } from '../DocProgressBar';
-import type { PlaybackState, PlaybackActions } from '../types';
-
-function makeState(overrides: Partial<PlaybackState> = {}): PlaybackState {
-  return {
-    isPlaying: true,
-    currentTime: 0,
-    totalDuration: 60,
-    currentBlockIndex: 0,
-    totalBlocks: 3,
-    docProgress: 0,
-    hasCaptions: false,
-    captionsEnabled: false,
-    captionMode: 'off',
-    currentSegmentIndex: 0,
-    currentSegmentName: null,
-    currentBlock: null,
-    ...overrides,
-  };
-}
-
-const actions: PlaybackActions = {
-  toggle: () => {},
-  restart: () => {},
-  seekTo: () => {},
-  setCaptionsEnabled: () => {},
-  cycleCaptionMode: () => {},
-};
-
-/** The progress fill is the div tagged `doc-progress-fill`. */
-function fillWidth(container: HTMLElement): string {
-  const fill = container.querySelector<HTMLElement>('[data-testid="doc-progress-fill"]');
-  if (!fill) throw new Error('progress fill not found');
-  return fill.style.width;
-}
-
-describe('DocProgressBar fill', () => {
-  it('tracks elapsed time over totalDuration (the clock/marker timeline)', () => {
-    const { container } = render(
-      <DocProgressBar
-        state={makeState({ currentTime: 12, totalDuration: 23, docProgress: 0.99 })}
-        actions={actions}
-        blockMarkers={[]}
-        expandedBlocks={[]}
-      />,
-    );
-    // Must reflect 12/23 ≈ 52%, NOT the divergent docProgress (0.99).
-    expect(fillWidth(container)).toBe(`${(12 / 23) * 100}%`);
-  });
-
-  it('is 0% when totalDuration is 0 (no divide-by-zero)', () => {
-    const { container } = render(
-      <DocProgressBar
-        state={makeState({ currentTime: 5, totalDuration: 0, docProgress: 0.5 })}
-        actions={actions}
-        blockMarkers={[]}
-        expandedBlocks={[]}
-      />,
-    );
-    expect(fillWidth(container)).toBe('0%');
-  });
-
-  it('clamps to 100% when currentTime exceeds totalDuration', () => {
-    const { container } = render(
-      <DocProgressBar
-        state={makeState({ currentTime: 30, totalDuration: 23 })}
-        actions={actions}
-        blockMarkers={[]}
-        expandedBlocks={[]}
-      />,
-    );
-    expect(fillWidth(container)).toBe('100%');
-  });
-
-  it('exposes keyboard seeking and accessible marker buttons', () => {
-    const seekTo = vi.fn();
-    render(
-      <DocProgressBar
-        state={makeState({ currentTime: 12, totalDuration: 23 })}
-        actions={{ ...actions, seekTo }}
-        blockMarkers={[
-          {
-            block: { id: 'b', startTime: 8, duration: 5, audioSegment: 0, layers: [] },
-            index: 0,
-            position: 35,
-            title: 'Chapter two',
-            isSectionStart: false,
-          },
-        ]}
-        expandedBlocks={[]}
-      />,
-    );
-    const slider = screen.getByRole('slider', { name: 'Playback position' });
-    expect(slider.getAttribute('aria-valuenow')).toBe('12');
-    fireEvent.keyDown(slider, { key: 'ArrowRight' });
-    expect(seekTo).toHaveBeenCalledWith(17);
-    fireEvent.click(screen.getByRole('button', { name: 'Seek to Chapter two' }));
-    expect(seekTo).toHaveBeenLastCalledWith(8);
-  });
-});

package/src/__tests__/JsonView.test.tsx

@@ -1,111 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { JsonView } from '../jsonView';
-import type { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
-
-describe('JsonView', () => {
-  it('renders an object schema as labeled rows', () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'object',
-      properties: {
-        title: { type: 'string', title: 'Page Title' },
-        active: { type: 'boolean' },
-      },
-    };
-    const { container } = render(
-      <JsonView schema={schema} value={{ title: 'Hello', active: true }} />,
-    );
-    expect(container.textContent).toContain('Page Title');
-    expect(container.textContent).toContain('Hello');
-    expect(container.textContent).toContain('On');
-  });
-
-  it('renders an array of primitives as chips', () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'array',
-      items: { type: 'string' },
-    };
-    const { container } = render(<JsonView schema={schema} value={['a', 'b', 'c']} />);
-    expect(container.querySelectorAll('.squisq-jv-chip')).toHaveLength(3);
-  });
-
-  it('renders an array of objects as cards with itemLabel.fromField', () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'array',
-      items: {
-        type: 'object',
-        properties: {
-          heading: { type: 'string' },
-          body: { type: 'string' },
-        },
-        squisq: { itemLabel: { fromField: 'heading' } },
-      },
-    };
-    const { container } = render(
-      <JsonView
-        schema={schema}
-        value={[
-          { heading: 'Section A', body: 'Body A' },
-          { heading: 'Section B', body: 'Body B' },
-        ]}
-      />,
-    );
-    const cards = container.querySelectorAll('.squisq-jv-card');
-    expect(cards).toHaveLength(2);
-    expect(cards[0].textContent).toContain('Section A');
-    expect(cards[1].textContent).toContain('Section B');
-  });
-
-  it('renders a color value as a swatch + hex', () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'string',
-      format: 'color',
-    };
-    const { container } = render(<JsonView schema={schema} value="#ff0080" />);
-    const swatch = container.querySelector('.squisq-jv-color__swatch') as HTMLElement | null;
-    expect(swatch).not.toBeNull();
-    expect(swatch?.style.background).toContain('rgb(255, 0, 128)');
-    expect(container.textContent).toContain('#ff0080');
-  });
-
-  it('hides fields whose squisq.hidden rule matches', () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'object',
-      properties: {
-        showAuthor: { type: 'boolean' },
-        authorName: {
-          type: 'string',
-          squisq: { hidden: { field: 'showAuthor', truthy: false } },
-        },
-      },
-    };
-    const visible = render(
-      <JsonView schema={schema} value={{ showAuthor: true, authorName: 'Alex' }} />,
-    );
-    expect(visible.container.textContent).toContain('Alex');
-
-    const hidden = render(
-      <JsonView schema={schema} value={{ showAuthor: false, authorName: 'Alex' }} />,
-    );
-    expect(hidden.container.textContent).not.toContain('Alex');
-  });
-
-  it('renders empty values as the em-dash placeholder', () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'object',
-      properties: { title: { type: 'string' } },
-    };
-    const { container } = render(<JsonView schema={schema} value={{}} />);
-    expect(container.textContent).toContain('—');
-  });
-
-  it('respects squisq.enumLabels when displaying enum values', () => {
-    const schema: SquisqAnnotatedSchema = {
-      type: 'string',
-      enum: ['s', 'm', 'l'],
-      squisq: { enumLabels: { s: 'Small', m: 'Medium', l: 'Large' } },
-    };
-    const { container } = render(<JsonView schema={schema} value="m" />);
-    expect(container.textContent).toContain('Medium');
-  });
-});

package/src/__tests__/LinearDocView.test.tsx

@@ -1,426 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { fireEvent, render } from '@testing-library/react';
-import { LinearDocView } from '../LinearDocView';
-import type { Doc, Block } from '@bendyline/squisq/schemas';
-import { DARK_SURFACE, DEFAULT_THEME, LIGHT_SURFACE } from '@bendyline/squisq/schemas';
-import type {
-  MarkdownBlockNode,
-  MarkdownInlineNode,
-  MarkdownHeading,
-} from '@bendyline/squisq/markdown';
-
-// ── Helpers ────────────────────────────────────────────────────────
-
-function text(value: string): MarkdownInlineNode {
-  return { type: 'text', value };
-}
-
-function paragraph(...children: MarkdownInlineNode[]): MarkdownBlockNode {
-  return { type: 'paragraph', children };
-}
-
-function mkHeading(depth: 1 | 2 | 3, value: string): MarkdownHeading {
-  return { type: 'heading', depth, children: [text(value)] };
-}
-
-function mkBlock(overrides: Partial<Block> = {}): Block {
-  return {
-    id: 'block-1',
-    startTime: 0,
-    duration: 3,
-    audioSegment: 0,
-    ...overrides,
-  };
-}
-
-function mkDoc(blocks: Block[]): Doc {
-  return {
-    articleId: 'test-article',
-    duration: 10,
-    blocks,
-    audio: { segments: [] },
-  };
-}
-
-// ── Tests ──────────────────────────────────────────────────────────
-
-describe('LinearDocView', () => {
-  it('renders a scrollable container', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'preamble',
-        contents: [paragraph(text('Introduction text'))],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    const el = container.querySelector('.squisq-linear');
-    expect(el).toBeTruthy();
-    expect((el as HTMLElement).style.overflowY).toBe('auto');
-  });
-
-  it('globally scrolls with up and down arrows when enabled', () => {
-    const doc = mkDoc([mkBlock({ contents: [paragraph(text('Scrollable body'))] })]);
-    const { container } = render(<LinearDocView doc={doc} globalKeyboardShortcuts />);
-    const scroller = container.querySelector<HTMLElement>('.squisq-linear')!;
-    const scrollBy = vi.fn();
-    Object.defineProperty(scroller, 'scrollBy', { configurable: true, value: scrollBy });
-
-    fireEvent.keyDown(document, { key: 'ArrowDown' });
-    fireEvent.keyDown(document, { key: 'ArrowUp' });
-
-    expect(scrollBy).toHaveBeenNthCalledWith(1, { top: 64, behavior: 'smooth' });
-    expect(scrollBy).toHaveBeenNthCalledWith(2, { top: -64, behavior: 'smooth' });
-  });
-
-  it('renders preamble content (no heading)', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'preamble',
-        contents: [paragraph(text('Preamble body'))],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    // Should render paragraph but no heading
-    expect(container.textContent).toContain('Preamble body');
-    const headings = container.querySelectorAll('h1, h2, h3');
-    expect(headings.length).toBe(0);
-  });
-
-  it('renders non-annotated block with heading + content', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'section-1',
-        sourceHeading: mkHeading(2, 'My Section'),
-        contents: [paragraph(text('Section body text'))],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    expect(container.querySelector('h2')?.textContent).toBe('My Section');
-    expect(container.textContent).toContain('Section body text');
-  });
-
-  it('feeds imageWithCaption blocks the first body image as imageSrc', () => {
-    // Regression: without auto-extracting imageSrc from contents, the
-    // template renders a layer with `src=undefined` and the SVG card
-    // shows a broken image in document (linear) mode.
-    const doc = mkDoc([
-      mkBlock({
-        id: 'img-1',
-        sourceHeading: {
-          type: 'heading',
-          depth: 1,
-          children: [text('Mike Ammerlaan')],
-          templateAnnotation: { template: 'imageWithCaption' },
-        },
-        contents: [paragraph({ type: 'image', url: 'mikehome_files/profile.png', alt: 'Mike' })],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    const card = container.querySelector('.squisq-linear-card');
-    expect(card).toBeTruthy();
-    const img = card!.querySelector('image, img') as Element | null;
-    expect(img).toBeTruthy();
-    const href =
-      img!.getAttribute('href') ?? img!.getAttribute('xlink:href') ?? img!.getAttribute('src');
-    expect(href).toContain('mikehome_files/profile.png');
-  });
-
-  it('extracts imageSrc from raw HTML <img> (resized image)', () => {
-    // The WYSIWYG editor emits `<img src width>` for resized images
-    // because markdown shorthand has no width syntax. The linear view
-    // must read that form too, or every resized imageWithCaption block
-    // renders as a broken card.
-    const doc = mkDoc([
-      mkBlock({
-        id: 'img-2',
-        sourceHeading: {
-          type: 'heading',
-          depth: 1,
-          children: [text('Resized')],
-          templateAnnotation: { template: 'imageWithCaption' },
-        },
-        contents: [
-          {
-            type: 'htmlBlock',
-            rawHtml: '<img alt="resized" src="resized.png" width="194">',
-            htmlChildren: [
-              {
-                type: 'htmlElement',
-                tagName: 'img',
-                attributes: { src: 'resized.png', alt: 'resized', width: '194' },
-                children: [],
-                selfClosing: true,
-              },
-            ],
-          } as unknown as MarkdownBlockNode,
-        ],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    const card = container.querySelector('.squisq-linear-card');
-    expect(card).toBeTruthy();
-    const img = card!.querySelector('image, img') as Element | null;
-    const href =
-      img?.getAttribute('href') ?? img?.getAttribute('xlink:href') ?? img?.getAttribute('src');
-    expect(href).toContain('resized.png');
-  });
-
-  it('renders annotated block as SVG card', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'annotated-1',
-        template: 'sectionHeader',
-        sourceHeading: {
-          type: 'heading',
-          depth: 2,
-          children: [text('Visual Block')],
-          templateAnnotation: {
-            template: 'sectionHeader',
-          },
-        },
-        contents: [paragraph(text('Body'))],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    // Should have a card wrapper
-    const card = container.querySelector('.squisq-linear-card');
-    expect(card).toBeTruthy();
-    // Should contain an SVG (from BlockRenderer)
-    const svg = card?.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('renders transform-generated template blocks without authoring nodes', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'transform-stat',
-        template: 'statHighlight',
-        stat: '42%',
-        description: 'Year-over-year growth',
-      } as Partial<Block>),
-    ]);
-
-    const { container } = render(<LinearDocView doc={doc} />);
-    const section = container.querySelector('[data-block-id="transform-stat"]');
-    expect(section?.getAttribute('data-template')).toBe('statHighlight');
-    expect(section?.querySelector('.squisq-linear-card svg')).toBeTruthy();
-    expect(section?.textContent).toContain('42%');
-    expect(section?.textContent).toContain('Year-over-year growth');
-  });
-
-  it('renders children recursively', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'parent',
-        sourceHeading: mkHeading(1, 'Parent'),
-        contents: [paragraph(text('Parent body'))],
-        children: [
-          mkBlock({
-            id: 'child',
-            sourceHeading: mkHeading(2, 'Child'),
-            contents: [paragraph(text('Child body'))],
-          }),
-        ],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    expect(container.querySelector('h1')?.textContent).toBe('Parent');
-    expect(container.querySelector('h2')?.textContent).toBe('Child');
-    expect(container.textContent).toContain('Parent body');
-    expect(container.textContent).toContain('Child body');
-  });
-
-  it('assigns unique pre-order indices across nested and top-level blocks', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'parent',
-        children: [mkBlock({ id: 'child' })],
-      }),
-      mkBlock({ id: 'sibling' }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    expect(
-      Array.from(container.querySelectorAll('.squisq-linear-section')).map((node) =>
-        node.getAttribute('data-block-index'),
-      ),
-    ).toEqual(['0', '1', '2']);
-  });
-
-  it('renders multiple top-level blocks', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'b1',
-        sourceHeading: mkHeading(1, 'First'),
-        contents: [],
-      }),
-      mkBlock({
-        id: 'b2',
-        sourceHeading: mkHeading(1, 'Second'),
-        contents: [],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    const sections = container.querySelectorAll('.squisq-linear-section');
-    expect(sections.length).toBe(2);
-  });
-
-  it('does not render SVG for non-annotated blocks', () => {
-    const doc = mkDoc([
-      mkBlock({
-        id: 'plain',
-        sourceHeading: mkHeading(2, 'Plain Section'),
-        contents: [paragraph(text('Just text'))],
-      }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    expect(container.querySelector('.squisq-linear-card')).toBeNull();
-    expect(container.querySelector('svg')).toBeNull();
-  });
-
-  it('applies custom className', () => {
-    const doc = mkDoc([mkBlock({ id: 'x', contents: [] })]);
-    const { container } = render(<LinearDocView doc={doc} className="my-class" />);
-    expect(container.querySelector('.squisq-linear.my-class')).toBeTruthy();
-  });
-
-  it('sets data-block-id on each section', () => {
-    const doc = mkDoc([
-      mkBlock({ id: 'alpha', contents: [] }),
-      mkBlock({ id: 'beta', contents: [] }),
-    ]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    expect(container.querySelector('[data-block-id="alpha"]')).toBeTruthy();
-    expect(container.querySelector('[data-block-id="beta"]')).toBeTruthy();
-  });
-
-  it('uses the theme background by default', () => {
-    const doc = mkDoc([mkBlock({ id: 'b', contents: [paragraph(text('hi'))] })]);
-    const { container } = render(<LinearDocView doc={doc} />);
-    const el = container.querySelector('.squisq-linear') as HTMLElement;
-    expect(el.style.background).toBeTruthy();
-    // DEFAULT_THEME has a specific background; applying LIGHT_SURFACE below
-    // must produce a different value to prove override is working.
-    expect(el.style.background).not.toBe(LIGHT_SURFACE.background);
-  });
-
-  it('light surface overlays the theme background', () => {
-    const doc = mkDoc([mkBlock({ id: 'b', contents: [paragraph(text('hi'))] })]);
-    const { container } = render(
-      <LinearDocView doc={doc} theme={DEFAULT_THEME} surface={LIGHT_SURFACE} />,
-    );
-    const el = container.querySelector('.squisq-linear') as HTMLElement;
-    // React inline style background may round-trip as hex or rgb; compare the
-    // colour-normalized value by mounting a plain div with the expected.
-    const probe = document.createElement('div');
-    probe.style.background = LIGHT_SURFACE.background;
-    expect(el.style.background).toBe(probe.style.background);
-  });
-
-  it('dark surface overlays the theme background', () => {
-    const doc = mkDoc([mkBlock({ id: 'b', contents: [paragraph(text('hi'))] })]);
-    const { container } = render(
-      <LinearDocView doc={doc} theme={DEFAULT_THEME} surface={DARK_SURFACE} />,
-    );
-    const el = container.querySelector('.squisq-linear') as HTMLElement;
-    const probe = document.createElement('div');
-    probe.style.background = DARK_SURFACE.background;
-    expect(el.style.background).toBe(probe.style.background);
-  });
-});
-
-describe('LinearDocView markdown prop', () => {
-  it('renders from the markdown prop when no doc is given', () => {
-    const { container } = render(<LinearDocView markdown={'# From Markdown\n\nParagraph body.'} />);
-    expect(container.textContent).toContain('From Markdown');
-    expect(container.textContent).toContain('Paragraph body.');
-  });
-
-  it('adds extra spacing between blank-line-separated paragraphs', () => {
-    const { container } = render(
-      <LinearDocView markdown={'First paragraph.\n\nSecond paragraph.'} />,
-    );
-    const paragraphs = container.querySelectorAll('.squisq-md-p');
-    const styles = container.querySelector('.squisq-linear-content > style')?.textContent;
-
-    expect(paragraphs).toHaveLength(2);
-    expect(paragraphs[0]?.nextElementSibling).toBe(paragraphs[1]);
-    expect(styles).toContain('.squisq-linear-content p + p');
-    expect(styles).toContain('margin-top: 1.25em');
-  });
-
-  it('doc wins over markdown when both are provided', () => {
-    const doc = mkDoc([mkBlock({ id: 'b', contents: [paragraph(text('Doc body wins'))] })]);
-    const { container } = render(<LinearDocView doc={doc} markdown="# Markdown Loses" />);
-    expect(container.textContent).toContain('Doc body wins');
-    expect(container.textContent).not.toContain('Markdown Loses');
-  });
-
-  it('renders an empty container when neither doc nor markdown is given', () => {
-    const { container } = render(<LinearDocView />);
-    expect(container.querySelector('.squisq-linear--empty')).toBeTruthy();
-  });
-});
-
-describe('LinearDocView unknown template annotations', () => {
-  it('renders the canonical visible fallback without hidden console output', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const doc = mkDoc([
-      mkBlock({
-        id: 'unknown-1',
-        sourceHeading: {
-          type: 'heading',
-          depth: 2,
-          children: [text('Mystery Section')],
-          templateAnnotation: { template: 'no-such-template-xyz' },
-        },
-        contents: [paragraph(text('Fallback body content'))],
-      }),
-    ]);
-
-    const { container } = render(<LinearDocView doc={doc} />);
-    expect(container.textContent).toContain('Mystery Section');
-    expect(container.textContent).toContain('Fallback body content');
-    expect(container.textContent).toContain('Unknown template "no-such-template-xyz"');
-    expect(container.querySelector('.squisq-linear-card')).not.toBeNull();
-    expect(warnSpy).not.toHaveBeenCalled();
-    warnSpy.mockRestore();
-  });
-});
-
-describe('LinearDocView custom template materialization', () => {
-  it('renders document-scoped templates through the canonical API', () => {
-    const doc: Doc = {
-      ...mkDoc([
-        mkBlock({
-          id: 'custom-1',
-          sourceHeading: {
-            type: 'heading',
-            depth: 2,
-            children: [text('Custom Hero')],
-            templateAnnotation: { template: 'hero' },
-          },
-          contents: [paragraph(text('Custom body'))],
-        }),
-      ]),
-      customTemplates: [
-        {
-          name: 'hero',
-          label: 'Hero',
-          viewport: { width: 1920, height: 1080 },
-          layers: [
-            {
-              id: 'hero-title',
-              type: 'text',
-              position: { x: '5%', y: '10%', width: '90%' },
-              content: { text: '{title}: {content}', style: { fontSize: 48, color: '#000000' } },
-            },
-          ],
-        },
-      ],
-    };
-
-    const { container } = render(<LinearDocView doc={doc} />);
-    expect(container.textContent).toContain('Custom Hero: Custom body');
-    expect(container.textContent).not.toContain('Unknown template');
-  });
-});