@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/customThemes/__tests__/CustomThemeContext.test.tsx

@@ -1,64 +0,0 @@
-/**
- * CustomThemeContext — dual-catalog (doc + library) behavior, mirroring the
- * custom-templates context: merged `allThemes`, doc/library upserts, and
- * `applyTheme` copying a library theme into the doc for self-sufficiency.
- */
-
-// @vitest-environment jsdom
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import type { ReactNode } from 'react';
-import { CustomThemeProvider, useCustomThemes } from '../CustomThemeContext';
-import { clearThemeLibrary, saveLibraryTheme } from '../customThemeLibrary';
-import { compileTheme } from '@bendyline/squisq/schemas';
-import type { Theme } from '@bendyline/squisq/schemas';
-
-const t = (id: string, name = id): Theme =>
-  compileTheme({ id, name, seedColors: { primary: '#3182ce' } });
-
-function makeWrapper(docThemes: Theme[], onDocThemesChange = vi.fn()) {
-  return ({ children }: { children: ReactNode }) => (
-    <CustomThemeProvider docThemes={docThemes} onDocThemesChange={onDocThemesChange}>
-      {children}
-    </CustomThemeProvider>
-  );
-}
-
-describe('CustomThemeContext', () => {
-  beforeEach(() => clearThemeLibrary());
-
-  it('allThemes merges doc + library, doc wins on id clash', () => {
-    saveLibraryTheme(t('lib', 'Library'));
-    saveLibraryTheme(t('shared', 'Library Shared'));
-    const { result } = renderHook(() => useCustomThemes(), {
-      wrapper: makeWrapper([t('shared', 'Doc Shared')]),
-    });
-    expect(result.current!.allThemes.map((x) => x.id).sort()).toEqual(['lib', 'shared']);
-    expect(result.current!.allThemes.find((x) => x.id === 'shared')!.name).toBe('Doc Shared');
-  });
-
-  it('upsertDocTheme calls onDocThemesChange with the appended list', () => {
-    const onChange = vi.fn();
-    const { result } = renderHook(() => useCustomThemes(), { wrapper: makeWrapper([], onChange) });
-    act(() => result.current!.upsertDocTheme(t('a')));
-    expect(onChange).toHaveBeenCalledWith([expect.objectContaining({ id: 'a' })]);
-  });
-
-  it('applyTheme copies a library theme into the doc', () => {
-    const onChange = vi.fn();
-    const { result } = renderHook(() => useCustomThemes(), { wrapper: makeWrapper([], onChange) });
-    act(() => result.current!.applyTheme(t('lib')));
-    expect(onChange).toHaveBeenCalledWith([expect.objectContaining({ id: 'lib' })]);
-  });
-
-  it('applyTheme is a no-op when the theme is already in the doc', () => {
-    const onChange = vi.fn();
-    const inDoc = t('a');
-    const { result } = renderHook(() => useCustomThemes(), {
-      wrapper: makeWrapper([inDoc], onChange),
-    });
-    act(() => result.current!.applyTheme(inDoc));
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

package/src/customThemes/__tests__/CustomThemeDialog.test.tsx

@@ -1,47 +0,0 @@
-/**
- * CustomThemeDialog — the designer modal. Verifies live-preview `onChange`,
- * the two save targets, and that adding an accent yields `colorSchemes`.
- */
-
-// @vitest-environment jsdom
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { CustomThemeDialog } from '../CustomThemeDialog';
-
-describe('CustomThemeDialog', () => {
-  it('edits the name, previews live, and saves a compiled theme to the document', () => {
-    const onSave = vi.fn();
-    const onChange = vi.fn();
-    render(
-      <CustomThemeDialog value={null} onChange={onChange} onSave={onSave} onClose={() => {}} />,
-    );
-
-    fireEvent.change(screen.getByLabelText('Theme name'), { target: { value: 'Brandy' } });
-    expect(onChange).toHaveBeenCalled(); // live preview fired
-
-    fireEvent.click(screen.getByText('Save to document'));
-    expect(onSave).toHaveBeenCalledTimes(1);
-    const [theme, target] = onSave.mock.calls[0];
-    expect(target).toBe('doc');
-    expect(theme.name).toBe('Brandy');
-    expect(theme.schemaVersion).toBe('1');
-    expect(theme.id).toMatch(/^custom-/);
-  });
-
-  it('saves to the library via the library button', () => {
-    const onSave = vi.fn();
-    render(<CustomThemeDialog value={null} onSave={onSave} onClose={() => {}} />);
-    fireEvent.click(screen.getByText('Save to library'));
-    expect(onSave.mock.calls[0][1]).toBe('library');
-  });
-
-  it('adding an accent produces colorSchemes in the compiled theme', () => {
-    const onSave = vi.fn();
-    render(<CustomThemeDialog value={null} onSave={onSave} onClose={() => {}} />);
-    fireEvent.click(screen.getByText('+ Add accent'));
-    fireEvent.click(screen.getByText('Save to document'));
-    const theme = onSave.mock.calls[0][0];
-    expect(Object.keys(theme.colorSchemes).length).toBeGreaterThan(0);
-  });
-});

package/src/customThemes/__tests__/customThemeLibrary.test.ts

@@ -1,60 +0,0 @@
-/**
- * customThemeLibrary — localStorage-backed library of user-defined themes.
- * The theme analog of customTemplates' library test. Uses jsdom's localStorage.
- */
-
-// @vitest-environment jsdom
-
-import { describe, it, expect, beforeEach } from 'vitest';
-import {
-  listLibraryThemes,
-  saveLibraryTheme,
-  deleteLibraryTheme,
-  clearThemeLibrary,
-  THEME_LIBRARY_STORAGE_KEY,
-} from '../customThemeLibrary';
-import { compileTheme } from '@bendyline/squisq/schemas';
-import type { Theme } from '@bendyline/squisq/schemas';
-
-function theme(id: string, name = id): Theme {
-  return compileTheme({ id, name, seedColors: { primary: '#3182ce' } });
-}
-
-describe('customThemeLibrary', () => {
-  beforeEach(() => clearThemeLibrary());
-
-  it('save → list round-trips, sorted by name', () => {
-    saveLibraryTheme(theme('b', 'Beta'));
-    saveLibraryTheme(theme('a', 'Alpha'));
-    expect(listLibraryThemes().map((t) => t.name)).toEqual(['Alpha', 'Beta']);
-  });
-
-  it('save replaces by id', () => {
-    saveLibraryTheme(theme('a', 'Alpha'));
-    saveLibraryTheme(theme('a', 'Alpha 2'));
-    const list = listLibraryThemes();
-    expect(list).toHaveLength(1);
-    expect(list[0].name).toBe('Alpha 2');
-  });
-
-  it('delete removes by id', () => {
-    saveLibraryTheme(theme('a'));
-    saveLibraryTheme(theme('b'));
-    deleteLibraryTheme('a');
-    expect(listLibraryThemes().map((t) => t.id)).toEqual(['b']);
-  });
-
-  it('clear empties the library', () => {
-    saveLibraryTheme(theme('a'));
-    clearThemeLibrary();
-    expect(listLibraryThemes()).toEqual([]);
-  });
-
-  it('filters invalid stored entries instead of crashing sort', () => {
-    window.localStorage.setItem(
-      THEME_LIBRARY_STORAGE_KEY,
-      JSON.stringify({ version: 1, themes: [null, {}, theme('valid')] }),
-    );
-    expect(listLibraryThemes().map((entry) => entry.id)).toEqual(['valid']);
-  });
-});

package/src/customThemes/__tests__/importThemeSection.test.tsx

@@ -1,192 +0,0 @@
-/**
- * ImportThemeSection — the "infer theme from a file" affordance. Verifies the
- * draft patch handed to hosts, error handling, drop-type gating, and that a
- * designer save with imported layouts writes theme + selection + templates in
- * a single frontmatter update.
- */
-
-// @vitest-environment jsdom
-
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import type { CustomTemplateDefinition, Theme } from '@bendyline/squisq/schemas';
-import { compileTheme } from '@bendyline/squisq/schemas';
-import { ImportThemeSection } from '../ImportThemeSection';
-import { draftPatchFromImportedTheme } from '../themeDraft';
-import { EditorProvider, useEditorContext } from '../../EditorContext';
-import { PreviewSettingsProvider, usePreviewSettings } from '../../PreviewControls';
-
-const { inferMock } = vi.hoisted(() => ({ inferMock: vi.fn() }));
-vi.mock('@bendyline/squisq-formats/infer', () => ({ inferThemeFromFile: inferMock }));
-
-afterEach(() => {
-  cleanup();
-  inferMock.mockReset();
-});
-
-const importedTheme: Theme = compileTheme({
-  id: 'custom-deck',
-  name: 'Deck',
-  seedColors: { primary: '#4472c4', background: '#fdfdf8', text: '#1a1a2e' },
-  typography: {
-    titleFont: { stackId: 'playfair' },
-    bodyFont: { custom: { name: 'Aptos', fallback: 'sans-serif' } },
-  },
-  colorSchemes: { accent1: { bg: '#101020', text: '#e2e8f0', accent: '#4472c4' } },
-});
-
-const importedLayout: CustomTemplateDefinition = {
-  name: 'pptx-two-content',
-  label: 'Two Content',
-  viewport: { width: 1920, height: 1080 },
-  layers: [
-    {
-      id: 'title',
-      type: 'text',
-      position: { x: '5%', y: '10%', width: '90%', height: '20%' },
-      content: { text: '{title}', style: { fontSize: 88, color: '#111111' } },
-    },
-  ],
-};
-
-function pickFile(name = 'deck.pptx'): void {
-  const file = new File([new Uint8Array([0x50, 0x4b, 3, 4])], name);
-  fireEvent.change(screen.getByLabelText('Import theme from file'), {
-    target: { files: [file] },
-  });
-}
-
-describe('ImportThemeSection', () => {
-  it('imports a theme and hands the host a draft patch + layouts', async () => {
-    inferMock.mockResolvedValue({
-      theme: importedTheme,
-      extraction: { sourceFormat: 'pptx', colorMap: { bg1: 'lt1', tx1: 'dk1' }, warnings: [] },
-      layouts: [importedLayout],
-      warnings: ['theme: accent4 color could not be resolved; dropped'],
-    });
-    const onImported = vi.fn();
-    render(<ImportThemeSection allowLayouts onImported={onImported} />);
-
-    pickFile();
-    await waitFor(() => expect(onImported).toHaveBeenCalledTimes(1));
-
-    expect(inferMock).toHaveBeenCalledWith(expect.anything(), {
-      inferLayouts: true,
-      nameHint: 'deck',
-    });
-
-    const [patch, result] = onImported.mock.calls[0]!;
-    expect(patch.name).toBe('Deck');
-    expect(patch.seeds.primary).toBe('#4472c4');
-    expect(patch.accentsEdited).toBe(true);
-    expect(patch.accents).toEqual([{ key: 'accent1', color: '#4472c4' }]);
-    expect(patch.titleFont).toEqual({ kind: 'curated', stackId: 'playfair' });
-    expect(patch.bodyFont).toEqual({
-      kind: 'custom',
-      customName: 'Aptos',
-      customFallback: 'sans-serif',
-    });
-    // The patch never touches base or style presets.
-    expect('baseId' in patch).toBe(false);
-    expect('borderRadius' in patch).toBe(false);
-
-    expect(result.layouts).toHaveLength(1);
-    expect(result.fileName).toBe('deck.pptx');
-    expect(screen.getByText(/1 slide layout/)).toBeTruthy();
-    expect(screen.getByText(/accent4/)).toBeTruthy();
-  });
-
-  it('shows the inference error and never fires onImported', async () => {
-    inferMock.mockRejectedValue(new Error('No theme part found in this file.'));
-    const onImported = vi.fn();
-    render(<ImportThemeSection onImported={onImported} />);
-
-    pickFile();
-    await waitFor(() =>
-      expect(screen.getByRole('alert').textContent).toContain('No theme part found'),
-    );
-    expect(onImported).not.toHaveBeenCalled();
-  });
-
-  it('rejects unsupported file types dropped on the zone', async () => {
-    const onImported = vi.fn();
-    const { container } = render(<ImportThemeSection onImported={onImported} />);
-    const zone = container.querySelector('.squisq-theme-import-drop')!;
-    fireEvent.drop(zone, {
-      dataTransfer: { files: [new File(['x'], 'notes.txt')] },
-    });
-    await waitFor(() =>
-      expect(screen.getByRole('alert').textContent).toContain('Only .docx, .pptx, or .xlsx'),
-    );
-    expect(inferMock).not.toHaveBeenCalled();
-    expect(onImported).not.toHaveBeenCalled();
-  });
-});
-
-describe('draftPatchFromImportedTheme', () => {
-  it('carries seeds/fonts/accents and nothing else', () => {
-    const patch = draftPatchFromImportedTheme(importedTheme);
-    expect(Object.keys(patch).sort()).toEqual([
-      'accents',
-      'accentsEdited',
-      'bodyFont',
-      'name',
-      'seeds',
-      'titleFont',
-    ]);
-    expect(patch.seeds).toMatchObject({ primary: '#4472c4', background: '#fdfdf8' });
-  });
-});
-
-// ── Designer save with imported layouts → single frontmatter write ───
-
-function DesignerSaveHarness() {
-  const settings = usePreviewSettings();
-  const { markdownSource } = useEditorContext();
-  return (
-    <div>
-      <button type="button" onClick={() => settings.openThemeDesigner(null)}>
-        open designer
-      </button>
-      <button
-        type="button"
-        onClick={() =>
-          settings.themeDesigner?.onSave(importedTheme, 'doc', { templates: [importedLayout] })
-        }
-      >
-        save with layouts
-      </button>
-      <pre data-testid="markdown-source">{markdownSource}</pre>
-    </div>
-  );
-}
-
-function HarnessRoot() {
-  const { doc } = useEditorContext();
-  return (
-    <PreviewSettingsProvider doc={doc}>
-      <DesignerSaveHarness />
-    </PreviewSettingsProvider>
-  );
-}
-
-describe('theme designer save with imported layouts', () => {
-  it('writes theme payload, selection, and templates in one frontmatter update', async () => {
-    render(
-      <EditorProvider initialMarkdown={'# Hello\n\nBody.\n'}>
-        <HarnessRoot />
-      </EditorProvider>,
-    );
-
-    fireEvent.click(screen.getByText('open designer'));
-    fireEvent.click(screen.getByText('save with layouts'));
-
-    await waitFor(() => {
-      const source = screen.getByTestId('markdown-source').textContent ?? '';
-      expect(source).toContain('squisq-theme: custom-deck');
-      expect(source).toContain('squisq-custom-themes');
-      expect(source).toContain('squisq-custom-templates');
-      expect(source).toContain('pptx-two-content');
-    });
-  });
-});

package/src/customThemes/customThemeLibrary.ts

@@ -1,100 +0,0 @@
-/**
- * Browser-local library of user-defined custom themes.
- *
- * The theme analog of `customTemplates/library.ts`. Library themes live in
- * `localStorage` under `THEME_LIBRARY_STORAGE_KEY`. They're a cross-doc
- * convenience — a personal collection the user reuses across documents — but
- * they're NOT used by the SSR / export pipeline. When a user applies a library
- * theme to a doc, `applyTheme` (in CustomThemeContext) copies the definition
- * into the doc's `customThemes` so the doc remains self-sufficient (the
- * markdown file ships with everything it needs), exactly as applying a library
- * template copies it into `Doc.customTemplates`.
- *
- * Safe to import in SSR / Node — gracefully no-ops when `localStorage` is
- * unavailable.
- */
-
-import { validateTheme, type Theme } from '@bendyline/squisq/schemas';
-
-export const THEME_LIBRARY_STORAGE_KEY = 'squisq:custom-theme-library';
-
-interface LibraryPayload {
-  /** Schema version for forward-compatibility. */
-  version: 1;
-  themes: Theme[];
-}
-
-function safeStorage(): Storage | null {
-  try {
-    return typeof globalThis !== 'undefined' && globalThis.localStorage
-      ? globalThis.localStorage
-      : null;
-  } catch {
-    // Some browsers throw on localStorage access in private mode.
-    return null;
-  }
-}
-
-function readPayload(): LibraryPayload {
-  const storage = safeStorage();
-  if (!storage) return { version: 1, themes: [] };
-  try {
-    const raw = storage.getItem(THEME_LIBRARY_STORAGE_KEY);
-    if (!raw) return { version: 1, themes: [] };
-    const parsed = JSON.parse(raw) as Partial<LibraryPayload>;
-    if (parsed && Array.isArray(parsed.themes)) {
-      return {
-        version: 1,
-        themes: parsed.themes.filter((theme): theme is Theme => validateTheme(theme).valid),
-      };
-    }
-  } catch {
-    // Corrupt payload — drop it.
-  }
-  return { version: 1, themes: [] };
-}
-
-function writePayload(payload: LibraryPayload): void {
-  const storage = safeStorage();
-  if (!storage) return;
-  try {
-    storage.setItem(THEME_LIBRARY_STORAGE_KEY, JSON.stringify(payload));
-  } catch {
-    // Quota exceeded or storage disabled — best-effort write.
-  }
-}
-
-/** Return every theme currently in the user's library, sorted by name. */
-export function listLibraryThemes(): Theme[] {
-  const { themes } = readPayload();
-  return themes.slice().sort((a, b) => a.name.localeCompare(b.name));
-}
-
-/**
- * Insert or replace a library theme (matched by `id`). Returns the persisted
- * list so callers can update their state without re-reading.
- */
-export function saveLibraryTheme(theme: Theme): Theme[] {
-  const payload = readPayload();
-  const idx = payload.themes.findIndex((t) => t.id === theme.id);
-  if (idx >= 0) {
-    payload.themes[idx] = theme;
-  } else {
-    payload.themes.push(theme);
-  }
-  writePayload(payload);
-  return payload.themes.slice().sort((a, b) => a.name.localeCompare(b.name));
-}
-
-/** Remove a library theme by id. Returns the updated list. */
-export function deleteLibraryTheme(id: string): Theme[] {
-  const payload = readPayload();
-  payload.themes = payload.themes.filter((t) => t.id !== id);
-  writePayload(payload);
-  return payload.themes.slice().sort((a, b) => a.name.localeCompare(b.name));
-}
-
-/** Wipe the entire theme library — useful for tests and "reset" affordances. */
-export function clearThemeLibrary(): void {
-  writePayload({ version: 1, themes: [] });
-}

package/src/customThemes/index.ts

@@ -1,37 +0,0 @@
-/**
- * Public exports for the custom-theme designer + runtime — the theme analog
- * of `customTemplates/index.ts`.
- *
- *   - `<CustomThemeProvider>` wraps the editor so the picker and dialog can
- *     read/write doc + library theme lists.
- *   - `<CustomThemeDialog>` is the modal designer opened from the ThemePicker's
- *     "+ Create custom theme" affordance.
- *   - the `*LibraryTheme` helpers back the browser-local theme library.
- */
-
-export {
-  CustomThemeProvider,
-  useCustomThemes,
-  type CustomThemeContextValue,
-  type CustomThemeProviderProps,
-} from './CustomThemeContext';
-export {
-  listLibraryThemes,
-  saveLibraryTheme,
-  deleteLibraryTheme,
-  clearThemeLibrary,
-  THEME_LIBRARY_STORAGE_KEY,
-} from './customThemeLibrary';
-export { useDocCustomThemes, type DocCustomThemes } from './useDocCustomThemes';
-export {
-  CustomThemeDialog,
-  type CustomThemeDialogProps,
-  type ThemeSaveTarget,
-  type ThemeSaveExtras,
-} from './CustomThemeDialog';
-export {
-  ImportThemeSection,
-  type ImportThemeSectionProps,
-  type ImportedThemeResult,
-} from './ImportThemeSection';
-export { compileDraft, themeToDraft, draftPatchFromImportedTheme, type Draft } from './themeDraft';