@bendyline/squisq-react 0.1.2

package/src/MarkdownRenderer.tsx

@@ -0,0 +1,360 @@
+/**
+ * MarkdownRenderer Component
+ *
+ * Converts a MarkdownBlockNode[] AST into React elements for rendering
+ * markdown content as readable HTML. Used by LinearDocView to display
+ * non-annotated document sections as flowing text.
+ *
+ * Supports all block and inline node types from the markdown DOM:
+ * - Block: paragraph, heading, blockquote, list, code, table,
+ *   thematicBreak, math, htmlBlock, definitionList, directives
+ * - Inline: text, emphasis, strong, delete, inlineCode, link,
+ *   image, break, inlineMath, htmlInline, footnoteReference
+ *
+ * All elements use the `squisq-md-*` CSS class prefix for styling.
+ */
+
+import { Fragment } from 'react';
+import type {
+  MarkdownBlockNode,
+  MarkdownInlineNode,
+  MarkdownListItem,
+  MarkdownTableRow,
+  MarkdownTableCell,
+} from '@bendyline/squisq/markdown';
+
+// ── Props ──────────────────────────────────────────────────────────
+
+export interface MarkdownRendererProps {
+  /** Block-level AST nodes to render */
+  nodes: MarkdownBlockNode[];
+  /** Optional CSS class for the wrapper element */
+  className?: string;
+}
+
+// ── Inline Renderer ────────────────────────────────────────────────
+
+/** Render an array of inline nodes into React elements. */
+function renderInline(nodes: MarkdownInlineNode[], keyPrefix = ''): React.ReactNode[] {
+  return nodes.map((node, i) => {
+    const key = `${keyPrefix}i${i}`;
+    switch (node.type) {
+      case 'text':
+        return <Fragment key={key}>{node.value}</Fragment>;
+
+      case 'emphasis':
+        return (
+          <em key={key} className="squisq-md-em">
+            {renderInline(node.children, key)}
+          </em>
+        );
+
+      case 'strong':
+        return (
+          <strong key={key} className="squisq-md-strong">
+            {renderInline(node.children, key)}
+          </strong>
+        );
+
+      case 'delete':
+        return (
+          <del key={key} className="squisq-md-del">
+            {renderInline(node.children, key)}
+          </del>
+        );
+
+      case 'inlineCode':
+        return (
+          <code key={key} className="squisq-md-inline-code">
+            {node.value}
+          </code>
+        );
+
+      case 'link':
+        return (
+          <a
+            key={key}
+            className="squisq-md-link"
+            href={node.url}
+            title={node.title ?? undefined}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {renderInline(node.children, key)}
+          </a>
+        );
+
+      case 'image':
+        return (
+          <img
+            key={key}
+            className="squisq-md-image"
+            src={node.url}
+            alt={node.alt ?? ''}
+            title={node.title ?? undefined}
+          />
+        );
+
+      case 'break':
+        return <br key={key} />;
+
+      case 'inlineMath':
+        return (
+          <code key={key} className="squisq-md-inline-math">
+            {node.value}
+          </code>
+        );
+
+      case 'htmlInline':
+        return (
+          <span
+            key={key}
+            className="squisq-md-html-inline"
+            dangerouslySetInnerHTML={{ __html: node.rawHtml }}
+          />
+        );
+
+      case 'footnoteReference':
+        return (
+          <sup key={key} className="squisq-md-footnote-ref">
+            <a href={`#fn-${node.identifier}`}>[{node.label ?? node.identifier}]</a>
+          </sup>
+        );
+
+      case 'linkReference':
+        // Render as plain text (definition targets not available at render time)
+        return (
+          <span key={key} className="squisq-md-link-ref">
+            {renderInline(node.children, key)}
+          </span>
+        );
+
+      case 'imageReference':
+        return (
+          <span key={key} className="squisq-md-image-ref">
+            [{node.alt ?? node.identifier}]
+          </span>
+        );
+
+      case 'textDirective':
+        return (
+          <span key={key} className="squisq-md-text-directive" data-directive={node.name}>
+            {renderInline(node.children, key)}
+          </span>
+        );
+
+      default:
+        return null;
+    }
+  });
+}
+
+// ── Block Renderer ─────────────────────────────────────────────────
+
+/** Render a single block-level node into a React element. */
+function renderBlock(node: MarkdownBlockNode, key: string): React.ReactNode {
+  switch (node.type) {
+    case 'paragraph':
+      return (
+        <p key={key} className="squisq-md-p">
+          {renderInline(node.children, key)}
+        </p>
+      );
+
+    case 'heading': {
+      const Tag = `h${node.depth}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+      return (
+        <Tag key={key} className={`squisq-md-heading squisq-md-h${node.depth}`}>
+          {renderInline(node.children, key)}
+        </Tag>
+      );
+    }
+
+    case 'blockquote':
+      return (
+        <blockquote key={key} className="squisq-md-blockquote">
+          {renderBlocks(node.children, key)}
+        </blockquote>
+      );
+
+    case 'list':
+      if (node.ordered) {
+        return (
+          <ol key={key} className="squisq-md-list squisq-md-ol" start={node.start ?? undefined}>
+            {node.children.map((item, i) => renderListItem(item, `${key}li${i}`))}
+          </ol>
+        );
+      }
+      return (
+        <ul key={key} className="squisq-md-list squisq-md-ul">
+          {node.children.map((item, i) => renderListItem(item, `${key}li${i}`))}
+        </ul>
+      );
+
+    case 'code':
+      return (
+        <pre key={key} className="squisq-md-code-block">
+          <code className={node.lang ? `language-${node.lang}` : undefined}>{node.value}</code>
+        </pre>
+      );
+
+    case 'thematicBreak':
+      return <hr key={key} className="squisq-md-hr" />;
+
+    case 'table':
+      return renderTable(node.children, node.align, key);
+
+    case 'htmlBlock':
+      return (
+        <div
+          key={key}
+          className="squisq-md-html-block"
+          dangerouslySetInnerHTML={{ __html: node.rawHtml }}
+        />
+      );
+
+    case 'math':
+      return (
+        <pre key={key} className="squisq-md-math-block">
+          <code>{node.value}</code>
+        </pre>
+      );
+
+    case 'definition':
+      // Link definitions aren't rendered visually
+      return null;
+
+    case 'footnoteDefinition':
+      return (
+        <div key={key} className="squisq-md-footnote-def" id={`fn-${node.identifier}`}>
+          <sup>{node.label ?? node.identifier}</sup>
+          {renderBlocks(node.children, key)}
+        </div>
+      );
+
+    case 'containerDirective':
+      return (
+        <div
+          key={key}
+          className={`squisq-md-directive squisq-md-directive-${node.name}`}
+          data-directive={node.name}
+        >
+          {node.label && <div className="squisq-md-directive-label">{node.label}</div>}
+          {renderBlocks(node.children, key)}
+        </div>
+      );
+
+    case 'leafDirective':
+      return (
+        <div
+          key={key}
+          className={`squisq-md-directive squisq-md-directive-${node.name}`}
+          data-directive={node.name}
+        >
+          {renderInline(node.children, key)}
+        </div>
+      );
+
+    case 'definitionList':
+      return (
+        <dl key={key} className="squisq-md-dl">
+          {node.children.map((child, i) => {
+            if (child.type === 'definitionTerm') {
+              return (
+                <dt key={`${key}dt${i}`} className="squisq-md-dt">
+                  {renderInline(child.children, `${key}dt${i}`)}
+                </dt>
+              );
+            }
+            return (
+              <dd key={`${key}dd${i}`} className="squisq-md-dd">
+                {renderBlocks(child.children, `${key}dd${i}`)}
+              </dd>
+            );
+          })}
+        </dl>
+      );
+
+    default:
+      return null;
+  }
+}
+
+/** Render a list item, including task-list checkbox support. */
+function renderListItem(item: MarkdownListItem, key: string): React.ReactNode {
+  const isTask = item.checked !== null && item.checked !== undefined;
+  return (
+    <li key={key} className={`squisq-md-li${isTask ? ' squisq-md-task' : ''}`}>
+      {isTask && (
+        <input type="checkbox" checked={!!item.checked} readOnly className="squisq-md-checkbox" />
+      )}
+      {renderBlocks(item.children, key)}
+    </li>
+  );
+}
+
+/** Render a table from rows and alignment data. */
+function renderTable(
+  rows: MarkdownTableRow[],
+  align: (('left' | 'right' | 'center') | null)[] | undefined,
+  key: string,
+): React.ReactNode {
+  const [headerRow, ...bodyRows] = rows;
+  return (
+    <table key={key} className="squisq-md-table">
+      {headerRow && (
+        <thead>
+          <tr>
+            {headerRow.children.map((cell: MarkdownTableCell, ci: number) => (
+              <th
+                key={`${key}th${ci}`}
+                className="squisq-md-th"
+                style={align?.[ci] ? { textAlign: align[ci]! } : undefined}
+              >
+                {renderInline(cell.children, `${key}th${ci}`)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+      )}
+      {bodyRows.length > 0 && (
+        <tbody>
+          {bodyRows.map((row, ri) => (
+            <tr key={`${key}tr${ri}`}>
+              {row.children.map((cell: MarkdownTableCell, ci: number) => (
+                <td
+                  key={`${key}td${ri}-${ci}`}
+                  className="squisq-md-td"
+                  style={align?.[ci] ? { textAlign: align[ci]! } : undefined}
+                >
+                  {renderInline(cell.children, `${key}td${ri}-${ci}`)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      )}
+    </table>
+  );
+}
+
+/** Render an array of block-level nodes. */
+function renderBlocks(nodes: MarkdownBlockNode[], keyPrefix = ''): React.ReactNode[] {
+  return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`));
+}
+
+// ── Main Component ─────────────────────────────────────────────────
+
+/**
+ * Renders MarkdownBlockNode[] AST as React HTML elements.
+ *
+ * @example
+ * ```tsx
+ * <MarkdownRenderer nodes={block.contents} />
+ * ```
+ */
+export function MarkdownRenderer({ nodes, className }: MarkdownRendererProps) {
+  if (!nodes || nodes.length === 0) return null;
+
+  return <div className={`squisq-md ${className || ''}`}>{renderBlocks(nodes)}</div>;
+}

package/src/__tests__/BlockRenderer.test.tsx

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { BlockRenderer, VIEWPORT } from '../BlockRenderer';
+import type { Block } from '@bendyline/squisq/schemas';
+
+describe('VIEWPORT constant', () => {
+  it('has correct 1080p dimensions', () => {
+    expect(VIEWPORT.width).toBe(1920);
+    expect(VIEWPORT.height).toBe(1080);
+  });
+});
+
+describe('BlockRenderer', () => {
+  const minimalBlock: Block = {
+    id: 'test-block',
+    startTime: 0,
+    duration: 5,
+    audioSegment: 0,
+    layers: [],
+  };
+
+  it('renders an SVG element', () => {
+    const { container } = render(
+      <BlockRenderer block={minimalBlock} blockTime={0} basePath="/test" />,
+    );
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('renders with correct viewBox', () => {
+    const { container } = render(
+      <BlockRenderer block={minimalBlock} blockTime={0} basePath="/test" />,
+    );
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('viewBox')).toBe('0 0 1920 1080');
+  });
+
+  it('renders with custom viewport', () => {
+    const { container } = render(
+      <BlockRenderer
+        block={minimalBlock}
+        blockTime={0}
+        basePath="/test"
+        viewport={{ width: 1080, height: 1920 }}
+      />,
+    );
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('viewBox')).toBe('0 0 1080 1920');
+  });
+
+  it('renders text layers', () => {
+    const blockWithText: Block = {
+      id: 'text-block',
+      startTime: 0,
+      duration: 5,
+      audioSegment: 0,
+      layers: [
+        {
+          type: 'text',
+          id: 'title',
+          content: {
+            text: 'Hello World',
+            style: {
+              fontSize: 48,
+              color: '#ffffff',
+            },
+          },
+          position: { x: 100, y: 100 },
+        },
+      ],
+    };
+
+    const { container } = render(
+      <BlockRenderer block={blockWithText} blockTime={0} basePath="/test" />,
+    );
+    // Text should be rendered somewhere in the SVG
+    expect(container.textContent).toContain('Hello World');
+  });
+
+  it('renders shape layers', () => {
+    const blockWithShape: Block = {
+      id: 'shape-block',
+      startTime: 0,
+      duration: 5,
+      audioSegment: 0,
+      layers: [
+        {
+          type: 'shape',
+          id: 'bg',
+          content: {
+            shape: 'rect',
+            fill: '#000000',
+          },
+          position: { x: 0, y: 0, width: 1920, height: 1080 },
+        },
+      ],
+    };
+
+    const { container } = render(
+      <BlockRenderer block={blockWithShape} blockTime={0} basePath="/test" />,
+    );
+    const rect = container.querySelector('rect');
+    expect(rect).toBeTruthy();
+  });
+});

package/src/__tests__/DocControlsSlideshow.test.tsx

@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import { DocControlsSlideshow } from '../DocControlsSlideshow';
+import type { PlaybackState, SlideNavActions } from '../types';
+
+function makeState(overrides: Partial<PlaybackState> = {}): PlaybackState {
+  return {
+    isPlaying: false,
+    currentTime: 0,
+    totalDuration: 60,
+    currentBlockIndex: 2,
+    totalBlocks: 10,
+    docProgress: 0.2,
+    hasCaptions: false,
+    captionsEnabled: false,
+    currentSegmentIndex: 0,
+    currentSegmentName: null,
+    currentBlock: null,
+    ...overrides,
+  };
+}
+
+function makeSlideNav(overrides: Partial<SlideNavActions> = {}): SlideNavActions {
+  return {
+    nextSlide: overrides.nextSlide ?? (() => {}),
+    prevSlide: overrides.prevSlide ?? (() => {}),
+    goToSlide: overrides.goToSlide ?? (() => {}),
+  };
+}
+
+describe('DocControlsSlideshow', () => {
+  it('renders prev, next buttons and slide counter', () => {
+    const { getByTestId } = render(
+      <DocControlsSlideshow state={makeState()} slideNav={makeSlideNav()} />,
+    );
+    expect(getByTestId('slide-prev')).toBeTruthy();
+    expect(getByTestId('slide-next')).toBeTruthy();
+    expect(getByTestId('slide-counter')).toBeTruthy();
+  });
+
+  it('shows correct slide counter text', () => {
+    const { getByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 4, totalBlocks: 12 })}
+        slideNav={makeSlideNav()}
+      />,
+    );
+    expect(getByTestId('slide-counter').textContent).toBe('5 / 12');
+  });
+
+  it('disables prev button on first slide', () => {
+    const { getByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 0 })}
+        slideNav={makeSlideNav()}
+      />,
+    );
+    const prevBtn = getByTestId('slide-prev') as HTMLButtonElement;
+    expect(prevBtn.disabled).toBe(true);
+  });
+
+  it('disables next button on last slide', () => {
+    const { getByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 9, totalBlocks: 10 })}
+        slideNav={makeSlideNav()}
+      />,
+    );
+    const nextBtn = getByTestId('slide-next') as HTMLButtonElement;
+    expect(nextBtn.disabled).toBe(true);
+  });
+
+  it('enables both buttons on a middle slide', () => {
+    const { getByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: 3, totalBlocks: 10 })}
+        slideNav={makeSlideNav()}
+      />,
+    );
+    const prevBtn = getByTestId('slide-prev') as HTMLButtonElement;
+    const nextBtn = getByTestId('slide-next') as HTMLButtonElement;
+    expect(prevBtn.disabled).toBe(false);
+    expect(nextBtn.disabled).toBe(false);
+  });
+
+  it('calls nextSlide when next button is clicked', () => {
+    let called = false;
+    const nav = makeSlideNav({
+      nextSlide: () => {
+        called = true;
+      },
+    });
+    const { getByTestId } = render(<DocControlsSlideshow state={makeState()} slideNav={nav} />);
+    fireEvent.click(getByTestId('slide-next'));
+    expect(called).toBe(true);
+  });
+
+  it('calls prevSlide when prev button is clicked', () => {
+    let called = false;
+    const nav = makeSlideNav({
+      prevSlide: () => {
+        called = true;
+      },
+    });
+    const { getByTestId } = render(<DocControlsSlideshow state={makeState()} slideNav={nav} />);
+    fireEvent.click(getByTestId('slide-prev'));
+    expect(called).toBe(true);
+  });
+
+  it('shows dash for empty doc', () => {
+    const { getByTestId } = render(
+      <DocControlsSlideshow
+        state={makeState({ currentBlockIndex: -1, totalBlocks: 0 })}
+        slideNav={makeSlideNav()}
+      />,
+    );
+    expect(getByTestId('slide-counter').textContent).toBe('—');
+  });
+
+  it('has correct aria-labels', () => {
+    const { getByTestId } = render(
+      <DocControlsSlideshow state={makeState()} slideNav={makeSlideNav()} />,
+    );
+    expect(getByTestId('slide-prev').getAttribute('aria-label')).toBe('Previous slide');
+    expect(getByTestId('slide-next').getAttribute('aria-label')).toBe('Next slide');
+  });
+});