@bendyline/squisq 1.1.1 → 1.2.1

package/src/__tests__/dataTable.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect } from 'vitest';
+import { getLayers, RenderContext } from '../doc/getLayers.js';
+import { DEFAULT_THEME } from '../schemas/themeLibrary.js';
+import { VIEWPORT_PRESETS } from '../schemas/Viewport.js';
+import type { TemplateBlock } from '../schemas/BlockTemplates.js';
+import type { TableLayer } from '../schemas/Doc.js';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeDataTableBlock(overrides: Record<string, unknown> = {}): TemplateBlock {
+  return {
+    template: 'dataTable',
+    id: 'dt-1',
+    duration: 5,
+    audioSegment: 0,
+    headers: ['Name', 'Value'],
+    rows: [
+      ['Alpha', '100'],
+      ['Beta', '200'],
+    ],
+    ...overrides,
+  } as TemplateBlock;
+}
+
+const defaultContext: RenderContext = {
+  theme: DEFAULT_THEME,
+  viewport: VIEWPORT_PRESETS.landscape,
+  blockIndex: 0,
+  totalBlocks: 5,
+};
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('dataTable template', () => {
+  it('produces layers including a table layer', () => {
+    const layers = getLayers(makeDataTableBlock(), defaultContext);
+    expect(layers.length).toBeGreaterThan(0);
+
+    const tableLayer = layers.find((l) => l.type === 'table');
+    expect(tableLayer).toBeDefined();
+  });
+
+  it('table layer contains the correct headers', () => {
+    const layers = getLayers(makeDataTableBlock(), defaultContext);
+    const tableLayer = layers.find((l) => l.type === 'table') as TableLayer;
+
+    expect(tableLayer.content.headers).toEqual(['Name', 'Value']);
+  });
+
+  it('table layer contains the correct rows', () => {
+    const layers = getLayers(makeDataTableBlock(), defaultContext);
+    const tableLayer = layers.find((l) => l.type === 'table') as TableLayer;
+
+    expect(tableLayer.content.rows).toEqual([
+      ['Alpha', '100'],
+      ['Beta', '200'],
+    ]);
+  });
+
+  it('includes a title text layer when title is provided', () => {
+    const layers = getLayers(makeDataTableBlock({ title: 'My Table' }), defaultContext);
+    const textLayers = layers.filter((l) => l.type === 'text');
+
+    expect(textLayers.length).toBeGreaterThanOrEqual(1);
+    const titleLayer = textLayers.find((l) => l.type === 'text' && l.content.text === 'My Table');
+    expect(titleLayer).toBeDefined();
+  });
+
+  it('omits title layer when no title is given', () => {
+    const layers = getLayers(makeDataTableBlock({ title: undefined }), defaultContext);
+    const textLayers = layers.filter((l) => l.type === 'text');
+
+    // Should have no text layers (only bg + table)
+    expect(textLayers.length).toBe(0);
+  });
+
+  it('includes a background layer', () => {
+    const layers = getLayers(makeDataTableBlock(), defaultContext);
+    // Background is the first layer (shape with gradient fill)
+    expect(['shape', 'image']).toContain(layers[0].type);
+  });
+
+  it('passes column alignment to the table layer', () => {
+    const layers = getLayers(makeDataTableBlock({ align: ['left', 'right'] }), defaultContext);
+    const tableLayer = layers.find((l) => l.type === 'table') as TableLayer;
+
+    expect(tableLayer.content.align).toEqual(['left', 'right']);
+  });
+
+  it('applies theme colors to table styling', () => {
+    const layers = getLayers(makeDataTableBlock(), defaultContext);
+    const tableLayer = layers.find((l) => l.type === 'table') as TableLayer;
+    const style = tableLayer.content.style;
+
+    // Style fields should be populated strings/numbers
+    expect(style.headerBackground).toBeTruthy();
+    expect(style.headerColor).toBeTruthy();
+    expect(style.cellColor).toBeTruthy();
+    expect(style.borderColor).toBeTruthy();
+    expect(typeof style.fontSize).toBe('number');
+    expect(style.fontSize).toBeGreaterThan(0);
+  });
+
+  it('adjusts table position when title is present vs absent', () => {
+    const withTitle = getLayers(makeDataTableBlock({ title: 'Title' }), defaultContext);
+    const withoutTitle = getLayers(makeDataTableBlock({ title: undefined }), defaultContext);
+
+    const tableWithTitle = withTitle.find((l) => l.type === 'table') as TableLayer;
+    const tableWithoutTitle = withoutTitle.find((l) => l.type === 'table') as TableLayer;
+
+    // Table should be positioned lower when a title is present
+    expect(tableWithTitle.position.y).not.toBe(tableWithoutTitle.position.y);
+  });
+
+  it('works with portrait viewport', () => {
+    const portraitContext: RenderContext = {
+      ...defaultContext,
+      viewport: VIEWPORT_PRESETS.portrait,
+    };
+    const layers = getLayers(makeDataTableBlock(), portraitContext);
+    expect(layers.length).toBeGreaterThan(0);
+    const tableLayer = layers.find((l) => l.type === 'table');
+    expect(tableLayer).toBeDefined();
+  });
+
+  it('handles empty rows gracefully', () => {
+    const layers = getLayers(makeDataTableBlock({ headers: ['A', 'B'], rows: [] }), defaultContext);
+    const tableLayer = layers.find((l) => l.type === 'table') as TableLayer;
+    expect(tableLayer.content.rows).toEqual([]);
+  });
+});

package/src/doc/templates/dataTable.ts

@@ -0,0 +1,84 @@
+/**
+ * Data Table Template
+ *
+ * Renders a themed table with header row and data rows.
+ * Uses a TableLayer (foreignObject-based HTML table inside SVG)
+ * for proper table layout within the viewport.
+ *
+ * Adapts font sizes for different viewports and uses theme colors
+ * for header background, text, borders, and body cells.
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { DataTableInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { getThemeFont, resolveColorScheme } from '../utils/themeUtils.js';
+import { createBackgroundLayer } from './captionUtils.js';
+
+export function dataTable(input: DataTableInput, context: TemplateContext): Layer[] {
+  const { title, headers, rows, align, colorScheme } = input;
+  const { theme } = context;
+
+  const colors = resolveColorScheme(context, colorScheme);
+  const titleFontSize = scaledFontSize(48, context, true);
+  const tableFontSize = scaledFontSize(28, context, false);
+
+  const layers: Layer[] = [
+    createBackgroundLayer(
+      'bg',
+      `linear-gradient(170deg, ${theme.colors.background} 0%, #0f1520 100%)`,
+    ),
+  ];
+
+  // Optional title above the table
+  if (title) {
+    layers.push({
+      type: 'text',
+      id: 'title',
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, 'title'),
+          fontWeight: 'bold',
+          color: theme.colors.text,
+          textAlign: 'center',
+          shadow: true,
+        },
+      },
+      position: { x: '50%', y: '10%', width: '80%', anchor: 'center' },
+      animation: { type: 'fadeIn', duration: 0.8 },
+    });
+  }
+
+  // Table layer
+  layers.push({
+    type: 'table',
+    id: 'table',
+    content: {
+      headers,
+      rows,
+      align,
+      style: {
+        headerBackground: colors.accent,
+        headerColor: colors.text,
+        cellBackground: 'rgba(255,255,255,0.05)',
+        cellColor: theme.colors.text,
+        borderColor: 'rgba(255,255,255,0.12)',
+        fontSize: tableFontSize,
+        fontFamily: getThemeFont(context, 'body'),
+        headerFontFamily: getThemeFont(context, 'title'),
+        borderRadius: 8,
+      },
+    },
+    position: {
+      x: '10%',
+      y: title ? '18%' : '8%',
+      width: '80%',
+      height: title ? '74%' : '84%',
+    },
+    animation: { type: 'fadeIn', duration: 1, delay: title ? 0.4 : 0 },
+  });
+
+  return layers;
+}

package/src/doc/templates/index.ts

@@ -44,6 +44,7 @@ import { comparisonBar } from './comparisonBar.js';
 import { pullQuote } from './pullQuote.js';
 import { videoWithCaption } from './videoWithCaption.js';
 import { videoPullQuote } from './videoPullQuote.js';
+import { dataTable } from './dataTable.js';
 
 /**
  * Registry mapping template names to their implementation functions.
@@ -68,6 +69,7 @@ export const templateRegistry: TemplateRegistry = {
   pullQuote,
   videoWithCaption,
   videoPullQuote,
+  dataTable,
 };
 
 /**
@@ -565,6 +567,7 @@ export { comparisonBar } from './comparisonBar.js';
 export { pullQuote } from './pullQuote.js';
 export { videoWithCaption } from './videoWithCaption.js';
 export { videoPullQuote } from './videoPullQuote.js';
+export { dataTable } from './dataTable.js';
 
 // Re-export accent image utilities
 export { getAccentLayout, createAccentLayers, adjustY, DEFAULT_LAYOUT } from './accentImage.js';

package/src/schemas/BlockTemplates.ts

@@ -429,6 +429,24 @@ export interface VideoPullQuoteInput extends BaseTemplateBlock {
   };
 }
 
+/**
+ * Data table - renders a themed table with headers and rows.
+ * Ideal for structured data, comparisons, and reference information.
+ */
+export interface DataTableInput extends BaseTemplateBlock {
+  template: 'dataTable';
+  /** Optional title displayed above the table */
+  title?: string;
+  /** Header cell values */
+  headers: string[];
+  /** Data rows (array of cell value arrays) */
+  rows: string[][];
+  /** Per-column alignment */
+  align?: (('left' | 'right' | 'center') | null)[];
+  /** Color scheme for the table header */
+  colorScheme?: ColorScheme;
+}
+
 /**
  * Union of all template block types.
  */
@@ -449,7 +467,8 @@ export type TemplateBlock =
   | ComparisonBarInput
   | PullQuoteInput
   | VideoWithCaptionInput
-  | VideoPullQuoteInput;
+  | VideoPullQuoteInput
+  | DataTableInput;
 
 /**
  * A block can be either a raw Block or a TemplateBlock.

package/src/schemas/Doc.ts

@@ -177,7 +177,7 @@ export interface Block {
  * A visual element within a block.
  * Layers are composited back-to-front (first layer is background).
  */
-export type Layer = ImageLayer | TextLayer | ShapeLayer | MapLayer | VideoLayer;
+export type Layer = ImageLayer | TextLayer | ShapeLayer | MapLayer | VideoLayer | TableLayer;
 
 interface BaseLayer {
   /** Unique identifier for this layer */
@@ -300,6 +300,48 @@ export interface VideoLayer extends BaseLayer {
   };
 }
 
+/**
+ * Table layer - renders a data table with themed styling.
+ * Uses foreignObject inside SVG for HTML-based table layout.
+ */
+export interface TableLayer extends BaseLayer {
+  type: 'table';
+  content: {
+    /** Header cell values */
+    headers: string[];
+    /** Data rows (array of cell value arrays) */
+    rows: string[][];
+    /** Per-column alignment */
+    align?: (('left' | 'right' | 'center') | null)[];
+    /** Visual styling */
+    style: TableLayerStyle;
+  };
+}
+
+/**
+ * Styling options for a TableLayer.
+ */
+export interface TableLayerStyle {
+  /** Header row background color */
+  headerBackground: string;
+  /** Header row text color */
+  headerColor: string;
+  /** Body cell background color */
+  cellBackground: string;
+  /** Body cell text color */
+  cellColor: string;
+  /** Border/divider color */
+  borderColor: string;
+  /** Font size in pixels */
+  fontSize: number;
+  /** Font family */
+  fontFamily?: string;
+  /** Header font family (falls back to fontFamily) */
+  headerFontFamily?: string;
+  /** Corner radius for the table container */
+  borderRadius?: number;
+}
+
 /**
  * Available map tile styles from free/open-source providers.
  */