@dfosco/storyboard-react 1.7.1 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "type": "module",
   "dependencies": {
     "@dfosco/storyboard-core": "*",

package/src/Viewfinder.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
 import { useState, useEffect, useMemo } from 'react'
 import { hash, resolveSceneRoute, getSceneMeta } from '@dfosco/storyboard-core'
-import { Link } from 'react-router-dom'
 import styles from './Viewfinder.module.css'
 
 function PlaceholderGraphic({ name }) {
@@ -127,7 +126,7 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
             {sceneNames.map((name) => {
               const meta = getSceneMeta(name)
               return (
-                <Link key={name} to={resolveSceneRoute(name, knownRoutes)} className={styles.card}>
+                <a key={name} href={resolveSceneRoute(name, knownRoutes)} className={styles.card}>
                   <div className={styles.thumbnail}>
                     <PlaceholderGraphic name={name} />
                   </div>
@@ -144,7 +143,7 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
                       </div>
                     )}
                   </div>
-                </Link>
+                </a>
               )
             })}
           </div>

package/src/Viewfinder.module.css

@@ -46,6 +46,7 @@
 .card:hover {
   border-color: var(--borderColor-accent-emphasis, #1f6feb);
   box-shadow: 0 0 0 1px var(--borderColor-accent-emphasis, #1f6feb);
+  text-decoration: none !important;
 }
 
 .thumbnail {

package/src/context.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import { useMemo } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, useLocation } from 'react-router-dom'
 // Side-effect import: seeds the core data index via init()
 import 'virtual:storyboard-data-index'
 import { loadScene, sceneExists, findRecord, deepMerge } from '@dfosco/storyboard-core'
@@ -9,20 +9,11 @@ import { StoryboardContext } from './StoryboardContext.js'
 export { StoryboardContext }
 
 /**
- * Read the ?scene= param directly from window.location.
- * Avoids useSearchParams() which re-renders on every router
- * navigation event (including hash changes), causing a flash.
- */
-function getSceneParam() {
-  return new URLSearchParams(window.location.search).get('scene')
-}
-
-/**
- * Derives a scene name from the current page pathname.
+ * Derives a scene name from a pathname.
  * "/Overview" → "Overview", "/" → "index", "/nested/Page" → "Page"
  */
-function getPageSceneName() {
-  const path = window.location.pathname.replace(/\/+$/, '') || '/'
+function getPageSceneName(pathname) {
+  const path = pathname.replace(/\/+$/, '') || '/'
   if (path === '/') return 'index'
   const last = path.split('/').pop()
   return last || 'index'
@@ -37,8 +28,10 @@ function getPageSceneName() {
  * The matched record entry is injected under the "record" key in scene data.
  */
 export default function StoryboardProvider({ sceneName, recordName, recordParam, children }) {
-  const pageScene = getPageSceneName()
-  const activeSceneName = getSceneParam() || sceneName || (sceneExists(pageScene) ? pageScene : 'default')
+  const location = useLocation()
+  const sceneParam = new URLSearchParams(location.search).get('scene')
+  const pageScene = getPageSceneName(location.pathname)
+  const activeSceneName = sceneParam || sceneName || (sceneExists(pageScene) ? pageScene : 'default')
   const params = useParams()
 
   const { data, error } = useMemo(() => {
@@ -57,7 +50,7 @@ export default function StoryboardProvider({ sceneName, recordName, recordParam,
     } catch (err) {
       return { data: null, error: err.message }
     }
-  }, [activeSceneName, recordName, recordParam, params])
+  }, [activeSceneName, recordName, recordParam, params, location.pathname])
 
   const value = {
     data,

package/src/context.test.jsx

@@ -2,10 +2,17 @@ import { render, screen } from '@testing-library/react'
 import { useContext } from 'react'
 import { init } from '@dfosco/storyboard-core'
 import StoryboardProvider, { StoryboardContext } from './context.jsx'
+import { useLocation } from 'react-router-dom'
+
+const mockUseLocation = vi.fn(() => ({ pathname: '/', search: '', hash: '' }))
 
 vi.mock('react-router-dom', async () => {
   const actual = await vi.importActual('react-router-dom')
-  return { ...actual, useParams: vi.fn(() => ({})) }
+  return {
+    ...actual,
+    useParams: vi.fn(() => ({})),
+    useLocation: (...args) => mockUseLocation(...args),
+  }
 })
 
 beforeEach(() => {
@@ -99,4 +106,73 @@ describe('StoryboardProvider', () => {
     )
     expect(screen.getByTestId('loading')).toHaveTextContent('false')
   })
+
+  it('auto-matches scene by pathname and resolves $ref data', () => {
+    init({
+      scenes: {
+        default: { title: 'Default' },
+        Repositories: {
+          '$global': ['navigation'],
+          heading: 'All repos',
+        },
+      },
+      objects: {
+        navigation: { topnav: [{ label: 'Home' }, { label: 'Repos' }] },
+      },
+      records: {},
+    })
+
+    // Simulate navigating to /base/Repositories
+    mockUseLocation.mockReturnValue({ pathname: '/base/Repositories', search: '', hash: '' })
+
+    render(
+      <StoryboardProvider>
+        <ContextReader path="heading" />
+      </StoryboardProvider>,
+    )
+    expect(screen.getByTestId('ctx')).toHaveTextContent('All repos')
+  })
+
+  it('resolves $ref objects when auto-matching scene by pathname', () => {
+    init({
+      scenes: {
+        default: { title: 'Default' },
+        Repositories: {
+          '$global': ['navigation'],
+          heading: 'All repos',
+        },
+      },
+      objects: {
+        navigation: { topnav: [{ label: 'Home' }, { label: 'Repos' }] },
+      },
+      records: {},
+    })
+
+    mockUseLocation.mockReturnValue({ pathname: '/base/Repositories', search: '', hash: '' })
+
+    function NavReader() {
+      const ctx = useContext(StoryboardContext)
+      const topnav = ctx?.data?.topnav
+      return <span data-testid="nav">{topnav ? topnav.map(n => n.label).join(',') : 'none'}</span>
+    }
+
+    render(
+      <StoryboardProvider>
+        <NavReader />
+      </StoryboardProvider>,
+    )
+    // $global navigation object should be resolved — topnav merged at root
+    expect(screen.getByTestId('nav')).toHaveTextContent('Home,Repos')
+  })
+
+  it('reads ?scene= param from location.search', () => {
+    mockUseLocation.mockReturnValue({ pathname: '/whatever', search: '?scene=other', hash: '' })
+
+    render(
+      <StoryboardProvider>
+        <ContextReader path="title" />
+      </StoryboardProvider>,
+    )
+    expect(screen.getByTestId('ctx')).toHaveTextContent('Other Scene')
+  })
 })