@dfosco/storyboard-react 4.0.0-beta.9 → 4.0.0

package/src/hooks/useThemeState.js

@@ -0,0 +1,61 @@
+/**
+ * useThemeState — React hook for the global storyboard theme.
+ *
+ * Subscribes to the core themeStore via useSyncExternalStore so React
+ * components re-render whenever the theme changes (user action, system
+ * preference toggle, or sync-target change).
+ *
+ * Returns { theme, resolved } where `theme` may be "system" and
+ * `resolved` is always a concrete Primer theme name.
+ *
+ * useThemeSyncTargets — React hook for which UI surfaces follow the theme.
+ * Returns { prototype, toolbar, codeBoxes, canvas }.
+ */
+
+import { useSyncExternalStore } from 'react'
+import {
+  themeState,
+  themeSyncState,
+} from '@dfosco/storyboard-core'
+
+// --- useThemeState ----------------------------------------------------------
+
+function subscribeTheme(cb) {
+  return themeState.subscribe(cb)
+}
+
+let _themeSnapshot = null
+themeState.subscribe((s) => { _themeSnapshot = s })
+
+function getThemeSnapshot() {
+  return _themeSnapshot
+}
+
+/**
+ * Subscribe to the global storyboard theme.
+ * @returns {{ theme: string, resolved: string }}
+ */
+export function useThemeState() {
+  return useSyncExternalStore(subscribeTheme, getThemeSnapshot, getThemeSnapshot)
+}
+
+// --- useThemeSyncTargets ----------------------------------------------------
+
+function subscribeSyncTargets(cb) {
+  return themeSyncState.subscribe(cb)
+}
+
+let _syncSnapshot = null
+themeSyncState.subscribe((s) => { _syncSnapshot = s })
+
+function getSyncSnapshot() {
+  return _syncSnapshot
+}
+
+/**
+ * Subscribe to which UI surfaces follow the global theme.
+ * @returns {{ prototype: boolean, toolbar: boolean, codeBoxes: boolean, canvas: boolean }}
+ */
+export function useThemeSyncTargets() {
+  return useSyncExternalStore(subscribeSyncTargets, getSyncSnapshot, getSyncSnapshot)
+}

package/src/hooks/useThemeState.test.js

@@ -0,0 +1,66 @@
+import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { setTheme, setThemeSyncTarget } from '@dfosco/storyboard-core'
+import { useThemeState, useThemeSyncTargets } from './useThemeState.js'
+
+beforeEach(() => {
+  localStorage.clear()
+  // Reset to defaults
+  setTheme('system')
+})
+
+describe('useThemeState', () => {
+  it('returns { theme, resolved }', () => {
+    const { result } = renderHook(() => useThemeState())
+    expect(result.current).toHaveProperty('theme')
+    expect(result.current).toHaveProperty('resolved')
+  })
+
+  it('defaults to system theme', () => {
+    const { result } = renderHook(() => useThemeState())
+    expect(result.current.theme).toBe('system')
+    // resolved should be 'light' or 'dark' depending on matchMedia mock
+    expect(['light', 'dark']).toContain(result.current.resolved)
+  })
+
+  it('updates when setTheme is called', () => {
+    const { result } = renderHook(() => useThemeState())
+
+    act(() => {
+      setTheme('dark_dimmed')
+    })
+
+    expect(result.current.theme).toBe('dark_dimmed')
+    expect(result.current.resolved).toBe('dark_dimmed')
+  })
+
+  it('reverts to system when set back', () => {
+    const { result } = renderHook(() => useThemeState())
+
+    act(() => { setTheme('dark') })
+    expect(result.current.theme).toBe('dark')
+
+    act(() => { setTheme('system') })
+    expect(result.current.theme).toBe('system')
+  })
+})
+
+describe('useThemeSyncTargets', () => {
+  it('returns default sync targets', () => {
+    const { result } = renderHook(() => useThemeSyncTargets())
+    expect(result.current.prototype).toBe(true)
+    expect(result.current.toolbar).toBe(false)
+    expect(result.current.codeBoxes).toBe(true)
+    expect(result.current.canvas).toBe(true)
+  })
+
+  it('updates when setThemeSyncTarget is called', () => {
+    const { result } = renderHook(() => useThemeSyncTargets())
+
+    act(() => {
+      setThemeSyncTarget('toolbar', true)
+    })
+
+    expect(result.current.toolbar).toBe(true)
+  })
+})

package/src/index.js

@@ -24,6 +24,7 @@ export { useHideMode } from './hooks/useHideMode.js'
 export { useUndoRedo } from './hooks/useUndoRedo.js'
 export { useFeatureFlag } from './hooks/useFeatureFlag.js'
 export { useMode } from './hooks/useMode.js'
+export { useThemeState, useThemeSyncTargets } from './hooks/useThemeState.js'
 
 // React Router integration
 export { installHashPreserver } from './hashPreserver.js'
@@ -37,6 +38,15 @@ export { FormContext } from './context/FormContext.js'
 // Viewfinder dashboard
 export { default as Viewfinder } from './Viewfinder.jsx'
 
+// Command Palette (includes BranchBar automatically)
+export { default as StoryboardCommandPalette } from './CommandPalette/CommandPalette.jsx'
+
+// Branch Bar (standalone, for consumers who don't use CommandPalette)
+export { default as BranchBar } from './BranchBar/BranchBar.jsx'
+
+// Auth Modal (standalone, for consumers who don't use CommandPalette)
+export { default as AuthModal } from './AuthModal/AuthModal.jsx'
+
 // Canvas
 export { default as CanvasPage } from './canvas/CanvasPage.jsx'
 export { useCanvas } from './canvas/useCanvas.js'

package/src/story/StoryPage.jsx

@@ -0,0 +1,117 @@
+/**
+ * StoryPage — renders a .story.jsx module at its own route.
+ *
+ * Renders only the bare component(s) with no layout chrome.
+ * When ?export=ExportName is present, renders that single export.
+ * Without ?export, renders all named exports stacked.
+ */
+import { useState, useEffect, useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
+import { getStoryData } from '@dfosco/storyboard-core'
+import { ThemeProvider, BaseStyles } from '@primer/react'
+import styles from './StoryPage.module.css'
+
+function StoryErrorFallback({ name, error }) {
+  return (
+    <div className={styles.error}>
+      <strong>{name}</strong>
+      <span>{String(error?.message || error)}</span>
+    </div>
+  )
+}
+
+export default function StoryPage({ name }) {
+  const location = useLocation()
+  const searchParams = new URLSearchParams(location.search)
+  const exportFilter = searchParams.get('export')
+  const isEmbed = searchParams.has('_sb_embed')
+
+  const story = useMemo(() => getStoryData(name), [name])
+  const [exports, setExports] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    if (!story?._storyImport) {
+      Promise.resolve().then(() => setError(`Story "${name}" not found or missing import`))
+      return
+    }
+
+    let cancelled = false
+    story._storyImport()
+      .then((mod) => {
+        if (cancelled) return
+        const namedExports = {}
+        for (const [key, value] of Object.entries(mod)) {
+          if (key !== 'default' && typeof value === 'function') {
+            namedExports[key] = value
+          }
+        }
+        setExports(namedExports)
+        setError(null)
+      })
+      .catch((err) => {
+        if (cancelled) return
+        setError(`Failed to load story "${name}": ${err.message || err}`)
+      })
+
+    return () => { cancelled = true }
+  }, [name, story])
+
+  // Signal snapshot-ready after story renders in embed mode.
+  useEffect(() => {
+    if (!isEmbed || !exports || window.parent === window) return
+    document.fonts.ready.then(() => {
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        window.__sbSnapshotReady?.()
+      }))
+    })
+  }, [isEmbed, exports])
+
+  if (error) {
+    return (
+      <StoryErrorFallback name={name} error={error} />
+    )
+  }
+
+  if (!exports) {
+    if (isEmbed) return null
+    return (
+      <div className={styles.loading}>Loading story…</div>
+    )
+  }
+
+  // Single export mode
+  if (exportFilter) {
+    const Component = exports[exportFilter]
+    if (!Component) {
+      return (
+        <StoryErrorFallback
+          name={`${name}/${exportFilter}`}
+          error={`Export "${exportFilter}" not found in story "${name}"`}
+        />
+      )
+    }
+
+    return (
+      <ThemeProvider colorMode="day">
+        <BaseStyles>
+          <Component />
+        </BaseStyles>
+      </ThemeProvider>
+    )
+  }
+
+  // All exports — render each component bare
+  const exportNames = Object.keys(exports)
+
+  return (
+    <ThemeProvider colorMode="day">
+      <BaseStyles>
+        {exportNames.map((exportName) => {
+          const Component = exports[exportName]
+          return <Component key={exportName} />
+        })}
+      </BaseStyles>
+    </ThemeProvider>
+  )
+}

package/src/story/StoryPage.module.css

@@ -0,0 +1,18 @@
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 0.875rem;
+}
+
+.error {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 1rem;
+  color: var(--fgColor-danger, #cf222e);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}