@dfosco/storyboard-react 2.3.0 → 2.5.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "2.3.0",
+    "@dfosco/storyboard-core": "2.5.0",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"
   },

package/src/vite/data-plugin.js

@@ -24,12 +24,17 @@ function parseDataFile(filePath) {
   const base = path.basename(filePath)
   const match = base.match(/^(.+)\.(flow|scene|object|record|prototype|folder)\.(jsonc?)$/)
   if (!match) return null
+
+  // Skip _-prefixed files (drafts/internal)
+  if (match[1].startsWith('_')) return null
+
+  // Skip files inside _-prefixed directories
+  const normalized = filePath.replace(/\\/g, '/')
+  if (normalized.split('/').some(seg => seg.startsWith('_'))) return null
   // Normalize .scene → .flow for backward compatibility
   const suffix = match[2] === 'scene' ? 'flow' : match[2]
   let name = match[1]
 
-  const normalized = filePath.replace(/\\/g, '/')
-
   // Detect if this file is inside a .folder/ directory
   const folderDirMatch = normalized.match(/(?:^|\/)src\/prototypes\/([^/]+)\.folder\//)
   const folderName = folderDirMatch ? folderDirMatch[1] : null
@@ -61,7 +66,22 @@ function parseDataFile(filePath) {
     }
   }
 
-  return { name, suffix, ext: match[3] }
+  // Infer route for prototype-scoped flows from their file path.
+  // Mirrors the generouted route regex: strip src/prototypes/ and *.folder/ segments.
+  let inferredRoute = null
+  if (suffix === 'flow') {
+    const protoCheck = normalized.match(/(?:^|\/)src\/prototypes\//)
+    if (protoCheck) {
+      const dirPath = normalized.substring(0, normalized.lastIndexOf('/'))
+      inferredRoute = '/' + dirPath
+        .replace(/^.*?src\/prototypes\//, '')
+        .replace(/[^/]*\.folder\//g, '')
+      // Normalize trailing slash and double slashes
+      inferredRoute = inferredRoute.replace(/\/+/g, '/').replace(/\/$/, '') || '/'
+    }
+  }
+
+  return { name, suffix, ext: match[3], inferredRoute }
 }
 
 /**
@@ -122,6 +142,7 @@ function buildIndex(root) {
   const index = { flow: {}, object: {}, record: {}, prototype: {}, folder: {} }
   const seen = {} // "name.suffix" → absolute path (for duplicate detection)
   const protoFolders = {} // prototype name → folder name (for injection)
+  const flowRoutes = {} // flow name → inferred route (for _route injection)
 
   for (const relPath of files) {
     const parsed = parseDataFile(relPath)
@@ -154,9 +175,14 @@ function buildIndex(root) {
     if (parsed.suffix === 'prototype' && parsed.folder) {
       protoFolders[parsed.name] = parsed.folder
     }
+
+    // Track inferred routes for flows
+    if (parsed.suffix === 'flow' && parsed.inferredRoute) {
+      flowRoutes[parsed.name] = parsed.inferredRoute
+    }
   }
 
-  return { index, protoFolders }
+  return { index, protoFolders, flowRoutes }
 }
 
 /**
@@ -219,10 +245,11 @@ function readModesConfig(root) {
   return fallback
 }
 
-function generateModule({ index, protoFolders }, root) {
+function generateModule({ index, protoFolders, flowRoutes }, root) {
   const declarations = []
   const INDEX_KEYS = ['flow', 'object', 'record', 'prototype', 'folder']
   const entries = { flow: [], object: [], record: [], prototype: [], folder: [] }
+  const resolvedFlowRoutes = {} // flow name → resolved route (for multi-flow logging)
   let i = 0
 
   for (const suffix of INDEX_KEYS) {
@@ -253,6 +280,19 @@ function generateModule({ index, protoFolders }, root) {
         parsed = { ...parsed, folder: protoFolders[name] }
       }
 
+      // Inject inferred _route into flow data (explicit route takes precedence)
+      if (suffix === 'flow' && flowRoutes[name] && !parsed?.route) {
+        parsed = { ...parsed, _route: flowRoutes[name] }
+      }
+
+      // Track resolved route for multi-flow logging
+      if (suffix === 'flow') {
+        const route = parsed?.route || parsed?._route || null
+        if (route) {
+          resolvedFlowRoutes[name] = { route, isDefault: parsed?.meta?.default === true }
+        }
+      }
+
       declarations.push(`const ${varName} = ${JSON.stringify(parsed)}`)
       entries[suffix].push(`  ${JSON.stringify(name)}: ${varName}`)
     }
@@ -297,6 +337,26 @@ function generateModule({ index, protoFolders }, root) {
     }
   }
 
+  // Log info when multiple flows target the same route
+  const routeGroups = {}
+  for (const [name, { route, isDefault }] of Object.entries(resolvedFlowRoutes)) {
+    if (!routeGroups[route]) routeGroups[route] = []
+    routeGroups[route].push({ name, isDefault })
+  }
+  for (const [route, flows] of Object.entries(routeGroups)) {
+    if (flows.length > 1) {
+      const labels = flows.map(f => `  - ${f.name}${f.isDefault ? ' (default)' : ''}`).join('\n')
+      console.log(`[storyboard-data] Route "${route}" has ${flows.length} flows:\n${labels}`)
+      const defaults = flows.filter(f => f.isDefault)
+      if (defaults.length > 1) {
+        console.warn(
+          `[storyboard-data] Warning: Route "${route}" has ${defaults.length} flows with meta.default: true.\n` +
+          `  Only one flow per route should be marked as default.`
+        )
+      }
+    }
+  }
+
   return [
     imports.join('\n'),
     '',

package/src/vite/data-plugin.test.js

@@ -265,6 +265,123 @@ describe('prototype scoping', () => {
   })
 })
 
+describe('flow route inference', () => {
+  it('injects _route for flows inside src/prototypes/', () => {
+    mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'Dashboard'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'Dashboard', 'default.flow.json'),
+      JSON.stringify({ title: 'Dashboard Flow' }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"_route":"/Dashboard"')
+  })
+
+  it('injects _route for flows inside .folder/ directories', () => {
+    mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'MyFolder.folder', 'Example'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'MyFolder.folder', 'Example', 'basic.flow.json'),
+      JSON.stringify({ title: 'Example Flow' }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    // .folder/ should be stripped from the inferred route
+    expect(code).toContain('"_route":"/Example"')
+    expect(code).not.toContain('MyFolder')
+  })
+
+  it('injects _route with nested path for deeply placed flows', () => {
+    mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'App', 'settings'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'App', 'settings', 'prefs.flow.json'),
+      JSON.stringify({ title: 'Settings Prefs' }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"_route":"/App/settings"')
+  })
+
+  it('does NOT inject _route for global flows outside src/prototypes/', () => {
+    mkdirSync(path.join(tmpDir, 'src', 'data'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'data', 'global.flow.json'),
+      JSON.stringify({ title: 'Global Flow' }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).not.toContain('"_route"')
+  })
+
+  it('does NOT inject _route when flow has explicit route field', () => {
+    mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'Dashboard'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'Dashboard', 'custom.flow.json'),
+      JSON.stringify({ route: '/custom-page', title: 'Custom Route' }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    // Should have the explicit route but NOT _route
+    expect(code).toContain('"route":"/custom-page"')
+    expect(code).not.toContain('"_route"')
+  })
+
+  it('logs info when multiple flows share the same route', () => {
+    mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'Dashboard'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'Dashboard', 'happy.flow.json'),
+      JSON.stringify({ title: 'Happy Path' }),
+    )
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'Dashboard', 'error.flow.json'),
+      JSON.stringify({ title: 'Error State' }),
+    )
+
+    const logSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+    const plugin = createPlugin()
+    plugin.load(RESOLVED_ID)
+
+    const routeLog = logSpy.mock.calls.find(call =>
+      typeof call[0] === 'string' && call[0].includes('Route "/Dashboard" has 2 flows')
+    )
+    expect(routeLog).toBeTruthy()
+    logSpy.mockRestore()
+  })
+
+  it('warns when multiple flows on same route have meta.default: true', () => {
+    mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'Dashboard'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'Dashboard', 'a.flow.json'),
+      JSON.stringify({ meta: { default: true }, title: 'A' }),
+    )
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'Dashboard', 'b.flow.json'),
+      JSON.stringify({ meta: { default: true }, title: 'B' }),
+    )
+
+    const logSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const plugin = createPlugin()
+    plugin.load(RESOLVED_ID)
+
+    const warnCall = warnSpy.mock.calls.find(call =>
+      typeof call[0] === 'string' && call[0].includes('meta.default: true')
+    )
+    expect(warnCall).toBeTruthy()
+    logSpy.mockRestore()
+    warnSpy.mockRestore()
+  })
+})
+
 describe('folder grouping', () => {
   it('discovers .folder.json files and keys them by folder directory name', () => {
     mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'Getting Started.folder'), { recursive: true })
@@ -367,3 +484,71 @@ describe('folder grouping', () => {
     expect(() => plugin.load(RESOLVED_ID)).toThrow(/Nested .folder directories are not supported/)
   })
 })
+
+describe('underscore prefix ignoring', () => {
+  it('ignores _-prefixed data files', () => {
+    writeFileSync(
+      path.join(tmpDir, '_draft.flow.json'),
+      JSON.stringify({ title: 'Draft' }),
+    )
+    writeFileSync(
+      path.join(tmpDir, 'visible.flow.json'),
+      JSON.stringify({ title: 'Visible' }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"Visible"')
+    expect(code).not.toContain('"Draft"')
+  })
+
+  it('ignores data files inside _-prefixed directories', () => {
+    mkdirSync(path.join(tmpDir, '_archive'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, '_archive', 'old.flow.json'),
+      JSON.stringify({ title: 'Archived' }),
+    )
+    writeFileSync(
+      path.join(tmpDir, 'current.flow.json'),
+      JSON.stringify({ title: 'Current' }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"Current"')
+    expect(code).not.toContain('"Archived"')
+  })
+
+  it('ignores prototype.json inside _-prefixed directories', () => {
+    mkdirSync(path.join(tmpDir, 'src', 'prototypes', '_WIP'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', '_WIP', 'wip.prototype.json'),
+      JSON.stringify({ meta: { title: 'Work in Progress' } }),
+    )
+    mkdirSync(path.join(tmpDir, 'src', 'prototypes', 'Live'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'prototypes', 'Live', 'live.prototype.json'),
+      JSON.stringify({ meta: { title: 'Live' } }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"Live"')
+    expect(code).not.toContain('"Work in Progress"')
+  })
+
+  it('does not ignore files with _ in the middle of the name', () => {
+    writeFileSync(
+      path.join(tmpDir, 'my_flow.flow.json'),
+      JSON.stringify({ title: 'Has Underscore' }),
+    )
+
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"Has Underscore"')
+  })
+})