@dfosco/storyboard-react 1.15.0 → 1.15.2

package/package.json

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

package/src/hooks/useRecord.js

@@ -3,10 +3,15 @@ import { useParams } from 'react-router-dom'
 import { loadRecord } from '@dfosco/storyboard-core'
 import { deepClone, setByPath } from '@dfosco/storyboard-core'
 import { getAllParams } from '@dfosco/storyboard-core'
+import { isHideMode, getAllShadows } from '@dfosco/storyboard-core'
 import { subscribeToHash, getHashSnapshot } from '@dfosco/storyboard-core'
+import { subscribeToStorage, getStorageSnapshot } from '@dfosco/storyboard-core'
 
 /**
- * Collect hash overrides for a record and merge them into the base array.
+ * Collect overrides for a record and merge them into the base array.
+ *
+ * In normal mode reads from URL hash params; in hide mode reads from
+ * localStorage shadow snapshots.
  *
  * Hash convention: record.{recordName}.{entryId}.{field}=value
  *
@@ -18,7 +23,7 @@ import { subscribeToHash, getHashSnapshot } from '@dfosco/storyboard-core'
  * @returns {Array} Merged array
  */
 function applyRecordOverrides(baseRecords, recordName) {
-  const allParams = getAllParams()
+  const allParams = isHideMode() ? getAllShadows() : getAllParams()
   const prefix = `record.${recordName}.`
 
   // Collect only the params that target this record
@@ -87,8 +92,9 @@ export function useRecord(recordName, paramName = 'id') {
   const params = useParams()
   const paramValue = params[paramName]
 
-  // Re-render on hash changes so overrides are reactive
+  // Re-render on hash or localStorage changes so overrides are reactive
   const hashString = useSyncExternalStore(subscribeToHash, getHashSnapshot)
+  const storageString = useSyncExternalStore(subscribeToStorage, getStorageSnapshot)
 
   return useMemo(() => {
     if (!paramValue) return null
@@ -100,7 +106,7 @@ export function useRecord(recordName, paramName = 'id') {
       console.error(`[useRecord] ${err.message}`)
       return null
     }
-  }, [recordName, paramName, paramValue, hashString]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [recordName, paramName, paramValue, hashString, storageString]) // eslint-disable-line react-hooks/exhaustive-deps
 }
 
 /**
@@ -115,8 +121,9 @@ export function useRecord(recordName, paramName = 'id') {
  * const allPosts = useRecords('posts')
  */
 export function useRecords(recordName) {
-  // Re-render on hash changes so overrides are reactive
+  // Re-render on hash or localStorage changes so overrides are reactive
   const hashString = useSyncExternalStore(subscribeToHash, getHashSnapshot)
+  const storageString = useSyncExternalStore(subscribeToStorage, getStorageSnapshot)
 
   return useMemo(() => {
     try {
@@ -126,5 +133,5 @@ export function useRecords(recordName) {
       console.error(`[useRecords] ${err.message}`)
       return []
     }
-  }, [recordName, hashString]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [recordName, hashString, storageString]) // eslint-disable-line react-hooks/exhaustive-deps
 }

package/src/hooks/useRecord.test.js

@@ -1,5 +1,6 @@
-import { renderHook } from '@testing-library/react'
+import { renderHook, act } from '@testing-library/react'
 import { seedTestData, TEST_RECORDS } from '../../test-utils.js'
+import { activateHideMode, setShadow } from '@dfosco/storyboard-core'
 
 vi.mock('react-router-dom', async () => {
   const actual = await vi.importActual('react-router-dom')
@@ -79,3 +80,51 @@ describe('useRecords', () => {
     expect(newPost.title).toBe('New')
   })
 })
+
+// ── Hide mode ──
+
+describe('useRecord (hide mode)', () => {
+  beforeEach(() => {
+    act(() => { activateHideMode() })
+  })
+
+  it('reads overrides from localStorage shadow in hide mode', () => {
+    useParams.mockReturnValue({ id: 'post-1' })
+    act(() => { setShadow('record.posts.post-1.title', 'Shadow Title') })
+
+    const { result } = renderHook(() => useRecord('posts'))
+    expect(result.current.title).toBe('Shadow Title')
+  })
+
+  it('reactively updates when shadow changes in hide mode', () => {
+    useParams.mockReturnValue({ id: 'post-1' })
+    const { result } = renderHook(() => useRecord('posts'))
+    expect(result.current.title).toBe('First Post')
+
+    act(() => { setShadow('record.posts.post-1.title', 'Updated via Shadow') })
+    expect(result.current.title).toBe('Updated via Shadow')
+  })
+})
+
+describe('useRecords (hide mode)', () => {
+  beforeEach(() => {
+    act(() => { activateHideMode() })
+  })
+
+  it('applies shadow overrides to existing entries', () => {
+    act(() => { setShadow('record.posts.post-1.title', 'Hidden Update') })
+
+    const { result } = renderHook(() => useRecords('posts'))
+    const post1 = result.current.find(e => e.id === 'post-1')
+    expect(post1.title).toBe('Hidden Update')
+  })
+
+  it('creates new entries from shadow overrides', () => {
+    act(() => { setShadow('record.posts.shadow-post.title', 'New Shadow') })
+
+    const { result } = renderHook(() => useRecords('posts'))
+    const newPost = result.current.find(e => e.id === 'shadow-post')
+    expect(newPost).toBeTruthy()
+    expect(newPost.title).toBe('New Shadow')
+  })
+})