@dfosco/storyboard 0.7.1 → 0.8.1

package/src/internals/canvas/componentSetIsolate.jsx

@@ -1,300 +0,0 @@
-/**
- * Canvas Component-Set Isolate — lightweight iframe entry point.
- *
- * Renders ALL named exports from a .story.jsx module in a grid layout,
- * bypassing the full SPA bootstrap (router, StoryboardProvider, data index).
- *
- * This is the component-set equivalent of componentIsolate.jsx, which renders
- * a single export. By avoiding the full app bootstrap, component-set widgets
- * load significantly faster — especially important since each widget is an
- * iframe that would otherwise need to initialize the entire app.
- *
- * Query params:
- *   module   — absolute or base-relative path to the .story.jsx file
- *   layout   — "horizontal" (default) | "vertical"
- *   selected — export name of the currently selected cell
- *   theme    — canvas theme (light / dark / dark_dimmed)
- */
-import { createElement, Component as ReactComponent, useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react'
-import { createRoot } from 'react-dom/client'
-import { ThemeProvider, BaseStyles } from '@primer/react'
-
-// ── Primer Primitives CSS (required for CSS variables) ──────────────
-import '@primer/primitives/dist/css/base/size/size.css'
-import '@primer/primitives/dist/css/base/typography/typography.css'
-import '@primer/primitives/dist/css/base/motion/motion.css'
-import '@primer/primitives/dist/css/functional/size/border.css'
-import '@primer/primitives/dist/css/functional/size/breakpoints.css'
-import '@primer/primitives/dist/css/functional/size/size-coarse.css'
-import '@primer/primitives/dist/css/functional/size/size-fine.css'
-import '@primer/primitives/dist/css/functional/size/size.css'
-import '@primer/primitives/dist/css/functional/size/viewport.css'
-import '@primer/primitives/dist/css/functional/typography/typography.css'
-import '@primer/primitives/dist/css/functional/themes/light.css'
-import '@primer/primitives/dist/css/functional/themes/light-colorblind.css'
-import '@primer/primitives/dist/css/functional/themes/dark.css'
-import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css'
-import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css'
-import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css'
-
-import styles from '../story/ComponentSetPage.module.css'
-
-// ── Error Boundary ──────────────────────────────────────────────────
-class IsolateErrorBoundary extends ReactComponent {
-  constructor(props) {
-    super(props)
-    this.state = { error: null }
-  }
-  static getDerivedStateFromError(error) {
-    return { error }
-  }
-  render() {
-    if (this.state.error) {
-      return createElement('div', { style: errorStyle },
-        createElement('strong', null, this.props.name || 'Component'),
-        createElement('br'),
-        String(this.state.error.message || this.state.error),
-      )
-    }
-    return this.props.children
-  }
-}
-
-const errorStyle = {
-  padding: '16px',
-  color: '#cf222e',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  fontSize: '13px',
-  lineHeight: 1.5,
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-word',
-}
-
-// ── Resolve module path ─────────────────────────────────────────────
-function resolveModulePath(raw) {
-  if (!raw) return raw
-  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(raw)) return raw
-  if (!raw.startsWith('/')) return raw
-  const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-  if (!base) return raw
-  if (raw.startsWith(base)) return raw
-  return `${base}${raw}`
-}
-
-// ── Component-Set Grid (mirrors ComponentSetPage UI) ────────────────
-function ComponentSetGrid({ exports, layout, density, initialSelected }) {
-  const [selected, setSelected] = useState(initialSelected)
-  const gridRef = useRef(null)
-
-  const handleSelect = useCallback((exportName) => {
-    const next = exportName === selected ? '' : exportName
-    setSelected(next)
-
-    // Update URL without navigation
-    const params = new URLSearchParams(window.location.search)
-    if (next) params.set('selected', next)
-    else params.delete('selected')
-    window.history.replaceState(null, '', `${window.location.pathname}?${params}`)
-
-    // Notify parent widget
-    if (window.parent !== window) {
-      window.parent.postMessage({
-        type: 'storyboard:component-set:select',
-        exportName: next || null,
-      }, '*')
-    }
-  }, [selected])
-
-  // Post a sensible initial widget size to the parent. Each cell sizes to
-  // its own content via CSS; here we measure individual cells (which have
-  // intrinsic widths thanks to `minmax` + the iframe being narrow at first)
-  // and arrange them in a near-square grid to compute an initial widget size.
-  useLayoutEffect(() => {
-    const grid = gridRef.current
-    if (!grid || !exports) return
-
-    let posted = false
-    function measureAndPost() {
-      if (posted || window.parent === window) return
-      const cells = grid.querySelectorAll(`.${styles.cell}`)
-      if (cells.length === 0) return
-      let maxW = 0
-      let maxH = 0
-      cells.forEach((cell) => {
-        const r = cell.getBoundingClientRect()
-        if (r.width > maxW) maxW = r.width
-        if (r.height > maxH) maxH = r.height
-      })
-      if (maxW < 10 || maxH < 10) return
-      const count = cells.length
-      const cols = Math.max(1, Math.min(count, Math.ceil(Math.sqrt(count))))
-      const rows = Math.ceil(count / cols)
-      const gap = 16
-      const pad = 32 // 16px padding on both sides
-      const width = Math.ceil(maxW * cols + gap * (cols - 1) + pad)
-      const height = Math.ceil(maxH * rows + gap * (rows - 1) + pad)
-      posted = true
-      window.parent.postMessage({
-        type: 'storyboard:component-set:initial-size',
-        width,
-        height,
-      }, '*')
-    }
-
-    // Re-post on grid size changes too (content height changes as cells reflow).
-    // Measure from cell bounding boxes (not scrollWidth/scrollHeight) so the
-    // reported content size reflects the *natural* extent of the cells —
-    // scrollWidth always matches the container width when the widget is
-    // wider than needed, which would defeat width-snapping on resize end.
-    function postContentSize() {
-      if (window.parent === window) return
-      const cells = grid.querySelectorAll(`.${styles.cell}`)
-      if (!cells.length) return
-      const gridRect = grid.getBoundingClientRect()
-      let maxRight = 0
-      let maxBottom = 0
-      cells.forEach((cell) => {
-        const r = cell.getBoundingClientRect()
-        const right = r.right - gridRect.left
-        const bottom = r.bottom - gridRect.top
-        if (right > maxRight) maxRight = right
-        if (bottom > maxBottom) maxBottom = bottom
-      })
-      const pad = 16 // mirror grid padding
-      window.parent.postMessage({
-        type: 'storyboard:component-set:content-size',
-        width: Math.ceil(maxRight + pad),
-        height: Math.ceil(maxBottom + pad),
-      }, '*')
-    }
-    const ro = new ResizeObserver(postContentSize)
-    ro.observe(grid)
-
-    // Measure after layout + fonts settle
-    requestAnimationFrame(() => requestAnimationFrame(measureAndPost))
-    document.fonts.ready.then(() => requestAnimationFrame(measureAndPost))
-
-    return () => ro.disconnect()
-  }, [exports, layout, density])
-
-  // Signal snapshot-ready
-  useEffect(() => {
-    document.fonts.ready.then(() => {
-      requestAnimationFrame(() => requestAnimationFrame(() => {
-        window.__sbSnapshotReady?.()
-      }))
-    })
-  }, [exports])
-
-  const exportNames = Object.keys(exports)
-
-  // eslint-disable-next-line react-hooks/refs -- ref assigned to DOM element, not read during render
-  return createElement('div', {
-    ref: gridRef,
-    className: styles.grid,
-    'data-layout': layout,
-    'data-density': density,
-  },
-    exportNames.map((exportName) => {
-      const Component = exports[exportName]
-      const isSelected = exportName === selected
-      const cellStyle = typeof Component.minHeight === 'number'
-        ? { '--cell-min-h': `${Component.minHeight}px` }
-        : undefined
-      return createElement('div', {
-        key: exportName,
-        className: styles.cell,
-        'data-selected': isSelected || undefined,
-        style: cellStyle,
-      },
-        createElement('button', {
-          className: styles.cellLabel,
-          onClick: () => handleSelect(exportName),
-          'data-selected': isSelected || undefined,
-          'aria-pressed': isSelected,
-        },
-          createElement('span', { className: styles.cellRadio, 'data-selected': isSelected || undefined }),
-          createElement('span', { className: styles.cellName }, exportName),
-        ),
-        createElement('div', { className: styles.cellContent, 'data-cell-content': '' },
-          createElement(IsolateErrorBoundary, { name: exportName },
-            createElement(Component),
-          ),
-        ),
-      )
-    }),
-  )
-}
-
-// ── Main ────────────────────────────────────────────────────────────
-const params = new URLSearchParams(window.location.search)
-const modulePath = params.get('module')
-const layoutParam = params.get('layout') || 'auto'
-const layout = layoutParam === 'horizontal' ? 'wide' : layoutParam === 'vertical' ? 'tall' : layoutParam
-const density = params.get('density') || 'comfy'
-const selected = params.get('selected') || ''
-const theme = params.get('theme') || 'light'
-
-const colorMode = theme.startsWith('dark') ? 'night' : 'day'
-
-document.documentElement.setAttribute('data-color-mode', theme.startsWith('dark') ? 'dark' : 'light')
-document.documentElement.setAttribute('data-dark-theme', theme.startsWith('dark') ? theme : '')
-document.documentElement.setAttribute('data-light-theme', theme.startsWith('dark') ? '' : theme || 'light')
-document.documentElement.setAttribute('data-sb-theme', theme || 'light')
-
-// Note: we deliberately do NOT install the canvas-hmr-guard here. The guard
-// drops BOTH `full-reload` and `update` payloads server-side, which means
-// edits to the story source file never reach this iframe — no Fast Refresh,
-// no reload, nothing. Story/component-set widgets are expected to refresh
-// when the underlying .story.jsx is edited, so we let HMR through.
-void import.meta.hot
-
-const root = createRoot(document.getElementById('root'))
-
-async function mount() {
-  if (!modulePath) {
-    root.render(createElement('div', { style: errorStyle }, 'Missing module param'))
-    return
-  }
-
-  if (!modulePath.match(/\.story\.(jsx|tsx)$/)) {
-    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .story.jsx/.tsx files are allowed'))
-    return
-  }
-
-  try {
-    const resolved = resolveModulePath(modulePath)
-    const mod = await import(/* @vite-ignore */ resolved)
-
-    const namedExports = {}
-    for (const [key, value] of Object.entries(mod)) {
-      if (key !== 'default' && typeof value === 'function') {
-        // Opt-out: showcase exports that already render every variant.
-        if (value.componentSet === false) continue
-        namedExports[key] = value
-      }
-    }
-
-    if (Object.keys(namedExports).length === 0) {
-      throw new Error('No named exports found in story module')
-    }
-
-    root.render(
-      createElement(ThemeProvider, { colorMode },
-        createElement(BaseStyles, null,
-          createElement(ComponentSetGrid, { exports: namedExports, layout, density, initialSelected: selected }),
-        ),
-      ),
-    )
-  } catch (err) {
-    root.render(
-      createElement('div', { style: errorStyle },
-        createElement('strong', null, 'Component Set'),
-        createElement('br'),
-        String(err.message || err),
-      ),
-    )
-  }
-}
-
-mount()

package/src/internals/canvas/widgets/InlineStoryRenderer.jsx

@@ -1,129 +0,0 @@
-/**
- * InlineStoryRenderer — renders a story's named export directly inside the
- * canvas React tree (no iframe).
- *
- * Wrapped in:
- *   - <ThemeProvider colorMode> + <BaseStyles> so the story's Primer theme can
- *     differ from the canvas chrome theme.
- *   - <StoryErrorBoundary> so a thrown render error stays scoped to this widget.
- *
- * Re-imports the module on `storyboard:story-index-changed` events so HMR-driven
- * story updates show without remounting the iframe shell.
- *
- * Note: stories using `useOverride` / `useFlowData` will share the canvas URL
- * hash. This is a known limitation of the inline path; iframe path remains
- * available via `canvas.inlineStories: false`.
- */
-import { useState, useEffect, useMemo } from 'react'
-import { ThemeProvider, BaseStyles } from '@primer/react'
-import { getStoryData } from '../../../core/index.js'
-import { StoryErrorBoundary } from '../StoryErrorBoundary.jsx'
-
-function resolveColorMode() {
-  if (typeof document === 'undefined') return 'day'
-  const attr = document.documentElement.getAttribute('data-color-mode')
-  if (attr === 'dark') return 'night'
-  if (attr === 'light') return 'day'
-  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'night' : 'day'
-  }
-  return 'day'
-}
-
-export default function InlineStoryRenderer({ storyId, exportName }) {
-  const [mod, setMod] = useState(null)
-  const [error, setError] = useState(null)
-  const [storyIndexKey, setStoryIndexKey] = useState(0)
-  const [colorMode, setColorMode] = useState(() => resolveColorMode())
-
-  // Track parent theme changes
-  useEffect(() => {
-    const onTheme = () => setColorMode(resolveColorMode())
-    document.addEventListener('storyboard:theme:changed', onTheme)
-    return () => document.removeEventListener('storyboard:theme:changed', onTheme)
-  }, [])
-
-  // Re-import on story index change (HMR / new exports added)
-  useEffect(() => {
-    const handler = () => setStoryIndexKey((k) => k + 1)
-    document.addEventListener('storyboard:story-index-changed', handler)
-    return () => document.removeEventListener('storyboard:story-index-changed', handler)
-  }, [])
-
-  // storyIndexKey forces re-lookup on HMR
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const story = useMemo(() => getStoryData(storyId), [storyId, storyIndexKey])
-  const lookupError = useMemo(() => {
-    if (!story) return new Error(`Story "${storyId}" not found`)
-    if (typeof story._storyImport !== 'function') return new Error(`Story "${storyId}" has no import function`)
-    return null
-  }, [story, storyId])
-
-  useEffect(() => {
-    if (lookupError) return
-    let cancelled = false
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setError(null)
-    story._storyImport()
-      .then((m) => { if (!cancelled) setMod(m) })
-      .catch((err) => { if (!cancelled) { setError(err); setMod(null) } })
-    return () => { cancelled = true }
-  }, [story, lookupError, storyIndexKey])
-
-  const displayedError = lookupError || error
-
-  const Component = useMemo(() => {
-    if (!mod) return null
-    if (exportName) {
-      const C = mod[exportName]
-      return typeof C === 'function' ? C : null
-    }
-    // No exportName — render the first named function export
-    for (const [k, v] of Object.entries(mod)) {
-      if (k !== 'default' && typeof v === 'function') return v
-    }
-    return null
-  }, [mod, exportName])
-
-  const errorStyle = {
-    padding: '16px',
-    color: '#cf222e',
-    fontFamily: 'system-ui, -apple-system, sans-serif',
-    fontSize: '13px',
-    lineHeight: 1.5,
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
-  }
-
-  if (displayedError) {
-    return (
-      <div style={errorStyle}>
-        <strong>{exportName || storyId}</strong>
-        <br />
-        {String(displayedError.message || displayedError)}
-      </div>
-    )
-  }
-  if (!mod) return null
-  if (!Component) {
-    return (
-      <div style={errorStyle}>
-        <strong>{exportName || storyId}</strong>
-        <br />
-        {exportName ? `Export "${exportName}" not found or is not a component` : 'No named exports found in story module'}
-      </div>
-    )
-  }
-
-  return (
-    <div style={{ contain: 'layout paint style', width: '100%', height: '100%', overflow: 'auto' }}>
-      <ThemeProvider colorMode={colorMode}>
-        <BaseStyles>
-          <StoryErrorBoundary name={exportName || storyId} resetKey={`${storyId}:${exportName}:${storyIndexKey}`}>
-            <Component />
-          </StoryErrorBoundary>
-        </BaseStyles>
-      </ThemeProvider>
-    </div>
-  )
-}

package/src/internals/canvas/widgets/InlineStoryRenderer.test.jsx

@@ -1,68 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { render, screen, act, waitFor } from '@testing-library/react'
-import InlineStoryRenderer from './InlineStoryRenderer.jsx'
-
-vi.mock('../../../core/index.js', () => ({
-  getStoryData: vi.fn(),
-}))
-
-import { getStoryData } from '../../../core/index.js'
-
-function GoodComponent() { return <div data-testid="good">hello</div> }
-function ThrowingComponent() { throw new Error('boom') }
-
-describe('InlineStoryRenderer', () => {
-  beforeEach(() => {
-    vi.spyOn(console, 'error').mockImplementation(() => {})
-  })
-  afterEach(() => {
-    vi.restoreAllMocks()
-    getStoryData.mockReset()
-  })
-
-  it('renders the named export when found', async () => {
-    getStoryData.mockReturnValue({
-      _storyImport: () => Promise.resolve({ Default: GoodComponent }),
-    })
-    render(<InlineStoryRenderer storyId="my-story" exportName="Default" />)
-    await waitFor(() => expect(screen.getByTestId('good')).toBeTruthy())
-  })
-
-  it('reports missing story', () => {
-    getStoryData.mockReturnValue(null)
-    render(<InlineStoryRenderer storyId="missing" exportName="Default" />)
-    expect(screen.getByText(/Story "missing" not found/)).toBeTruthy()
-  })
-
-  it('reports missing export', async () => {
-    getStoryData.mockReturnValue({
-      _storyImport: () => Promise.resolve({ Other: GoodComponent }),
-    })
-    render(<InlineStoryRenderer storyId="s" exportName="Default" />)
-    await waitFor(() => expect(screen.getByText(/Export "Default" not found/)).toBeTruthy())
-  })
-
-  it('contains thrown render errors via error boundary', async () => {
-    getStoryData.mockReturnValue({
-      _storyImport: () => Promise.resolve({ Default: ThrowingComponent }),
-    })
-    render(<InlineStoryRenderer storyId="bad" exportName="Default" />)
-    await waitFor(() => expect(screen.getByText(/boom/)).toBeTruthy())
-  })
-
-  it('re-imports on storyboard:story-index-changed', async () => {
-    let calls = 0
-    getStoryData.mockImplementation(() => ({
-      _storyImport: () => {
-        calls += 1
-        return Promise.resolve({ Default: GoodComponent })
-      },
-    }))
-    render(<InlineStoryRenderer storyId="s" exportName="Default" />)
-    await waitFor(() => expect(calls).toBe(1))
-    act(() => {
-      document.dispatchEvent(new Event('storyboard:story-index-changed'))
-    })
-    await waitFor(() => expect(calls).toBe(2))
-  })
-})

package/src/primer/ThemeSync.jsx

@@ -1,73 +0,0 @@
-/**
- * ThemeSync — invisible React component that bridges the storyboard-core
- * toolbar theme switcher with Primer's ThemeProvider context.
- *
- * Listens for `storyboard:theme:changed` custom events dispatched by the
- * core theme store and calls setColorMode/setDayScheme/setNightScheme on
- * Primer's useTheme() hook accordingly.
- *
- * On mount it reads localStorage to initialize Primer to the correct
- * scheme before the Svelte CoreUIBar has loaded.
- *
- * When prototype sync is disabled (via "Apply theme to" settings), the
- * prototype is forced to light mode regardless of the selected theme.
- */
-
-import { useEffect } from 'react'
-import { useTheme } from '@primer/react'
-
-const THEME_STORAGE_KEY = 'sb-color-scheme'
-const THEME_SYNC_STORAGE_KEY = 'sb-theme-sync'
-
-const DEFAULT_SYNC = {
-  prototype: true,
-  toolbar: false,
-  codeBoxes: true,
-}
-
-function readSyncTargets() {
-  try {
-    const raw = localStorage.getItem(THEME_SYNC_STORAGE_KEY)
-    if (!raw) return DEFAULT_SYNC
-    return { ...DEFAULT_SYNC, ...JSON.parse(raw) }
-  } catch {
-    return DEFAULT_SYNC
-  }
-}
-
-function applyToPrimer(setColorMode, setDayScheme, setNightScheme, themeValue) {
-  if (themeValue === 'system' || !themeValue) {
-    setColorMode('auto')
-    setDayScheme('light')
-    setNightScheme('dark')
-  } else {
-    setColorMode('day')
-    setDayScheme(themeValue)
-    setNightScheme(themeValue)
-  }
-}
-
-export default function ThemeSync() {
-  const { setColorMode, setDayScheme, setNightScheme } = useTheme()
-
-  // Restore saved theme on mount
-  useEffect(() => {
-    const saved = localStorage.getItem(THEME_STORAGE_KEY)
-    const syncTargets = readSyncTargets()
-    const prototypeTheme = syncTargets.prototype ? saved : 'light'
-    applyToPrimer(setColorMode, setDayScheme, setNightScheme, prototypeTheme)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Listen for theme changes from the Svelte CoreUIBar
-  useEffect(() => {
-    function handleThemeChanged(e) {
-      const { prototypeTheme } = e.detail || {}
-      if (typeof prototypeTheme !== 'string') return
-      applyToPrimer(setColorMode, setDayScheme, setNightScheme, prototypeTheme)
-    }
-    document.addEventListener('storyboard:theme:changed', handleThemeChanged)
-    return () => document.removeEventListener('storyboard:theme:changed', handleThemeChanged)
-  }, [setColorMode, setDayScheme, setNightScheme])
-
-  return null
-}

package/src/primer/index.js

@@ -1 +0,0 @@
-export { default as ThemeSync } from './ThemeSync.jsx'