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

package/src/canvas/widgets/githubUrl.js

@@ -0,0 +1,82 @@
+const GH_HOST_RE = /^(www\.)?github\.com$/i
+const ISSUE_PATH_RE = /^\/([^/]+)\/([^/]+)\/issues\/(\d+)\/?$/
+const DISCUSSION_PATH_RE = /^\/([^/]+)\/([^/]+)\/discussions\/(\d+)\/?$/
+const PULL_REQUEST_PATH_RE = /^\/([^/]+)\/([^/]+)\/pull\/(\d+)\/?$/
+const ISSUE_COMMENT_HASH_RE = /^#issuecomment-(\d+)$/i
+const DISCUSSION_COMMENT_HASH_RE = /^#discussioncomment-(\d+)$/i
+
+function toNumber(raw) {
+  const value = Number.parseInt(raw, 10)
+  return Number.isFinite(value) ? value : null
+}
+
+/**
+ * Parse supported GitHub embed URLs (issues, discussions, comments).
+ * @param {string} rawUrl
+ * @returns {null | {
+ *   kind: 'issue' | 'discussion' | 'comment',
+ *   parentKind: 'issue' | 'discussion',
+ *   owner: string,
+ *   repo: string,
+ *   number: number,
+ *   commentId?: number
+ * }}
+ */
+export function parseGitHubUrl(rawUrl) {
+  try {
+    const parsed = new URL(rawUrl)
+    if (!GH_HOST_RE.test(parsed.hostname)) return null
+
+    const issueMatch = parsed.pathname.match(ISSUE_PATH_RE)
+    if (issueMatch) {
+      const [, owner, repo, numberRaw] = issueMatch
+      const number = toNumber(numberRaw)
+      if (!number) return null
+
+      const commentMatch = parsed.hash.match(ISSUE_COMMENT_HASH_RE)
+      if (commentMatch) {
+        const commentId = toNumber(commentMatch[1])
+        if (!commentId) return null
+        return { kind: 'comment', parentKind: 'issue', owner, repo, number, commentId }
+      }
+
+      if (parsed.hash) return null
+      return { kind: 'issue', parentKind: 'issue', owner, repo, number }
+    }
+
+    const discussionMatch = parsed.pathname.match(DISCUSSION_PATH_RE)
+    if (discussionMatch) {
+      const [, owner, repo, numberRaw] = discussionMatch
+      const number = toNumber(numberRaw)
+      if (!number) return null
+
+      const commentMatch = parsed.hash.match(DISCUSSION_COMMENT_HASH_RE)
+      if (commentMatch) {
+        const commentId = toNumber(commentMatch[1])
+        if (!commentId) return null
+        return { kind: 'comment', parentKind: 'discussion', owner, repo, number, commentId }
+      }
+
+      if (parsed.hash) return null
+      return { kind: 'discussion', parentKind: 'discussion', owner, repo, number }
+    }
+
+    const prMatch = parsed.pathname.match(PULL_REQUEST_PATH_RE)
+    if (prMatch) {
+      const [, owner, repo, numberRaw] = prMatch
+      const number = toNumber(numberRaw)
+      if (!number) return null
+
+      if (parsed.hash) return null
+      return { kind: 'pull_request', parentKind: 'pull_request', owner, repo, number }
+    }
+  } catch {
+    return null
+  }
+
+  return null
+}
+
+export function isGitHubEmbedUrl(rawUrl) {
+  return parseGitHubUrl(rawUrl) !== null
+}

package/src/canvas/widgets/githubUrl.test.js

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { isGitHubEmbedUrl, parseGitHubUrl } from './githubUrl.js'
+
+describe('parseGitHubUrl', () => {
+  it('classifies issue URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/issues/12')).toEqual({
+      kind: 'issue',
+      parentKind: 'issue',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 12,
+    })
+  })
+
+  it('classifies discussion URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/discussions/99')).toEqual({
+      kind: 'discussion',
+      parentKind: 'discussion',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 99,
+    })
+  })
+
+  it('classifies issue comment URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/issues/12#issuecomment-345')).toEqual({
+      kind: 'comment',
+      parentKind: 'issue',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 12,
+      commentId: 345,
+    })
+  })
+
+  it('classifies discussion comment URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/discussions/99#discussioncomment-888')).toEqual({
+      kind: 'comment',
+      parentKind: 'discussion',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 99,
+      commentId: 888,
+    })
+  })
+
+  it('classifies pull request URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/pull/12')).toEqual({
+      kind: 'pull_request',
+      parentKind: 'pull_request',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 12,
+    })
+  })
+
+  it('rejects unsupported paths and hashes', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/issues/12#random')).toBeNull()
+    expect(parseGitHubUrl('https://example.com/dfosco/storyboard/issues/12')).toBeNull()
+    expect(parseGitHubUrl('not a url')).toBeNull()
+  })
+})
+
+describe('isGitHubEmbedUrl', () => {
+  it('returns true for supported GitHub URLs', () => {
+    expect(isGitHubEmbedUrl('https://github.com/dfosco/storyboard/issues/12')).toBe(true)
+    expect(isGitHubEmbedUrl('https://github.com/dfosco/storyboard/discussions/99#discussioncomment-888')).toBe(true)
+    expect(isGitHubEmbedUrl('https://github.com/dfosco/storyboard/pull/1')).toBe(true)
+  })
+
+  it('returns false for unsupported URLs', () => {
+    expect(isGitHubEmbedUrl('https://example.com')).toBe(false)
+  })
+})

package/src/canvas/widgets/iframeDevLogs.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react'
+
+let loadedIframeCount = 0
+
+function isDevRuntime() {
+  return typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+}
+
+function toText(value) {
+  return value ? String(value) : '(no src)'
+}
+
+function logIframeEvent(event, count, meta) {
+  console.log(`[storyboard][iframe] ${event} | count=${count} | ${meta.widget}`, {
+    event,
+    count,
+    widget: meta.widget,
+    src: toText(meta.src),
+  })
+}
+
+/**
+ * Dev-only iframe load/unload logging with a live count of mounted iframes.
+ */
+export function useIframeDevLogs({ widget, loaded, src }) {
+  const metaRef = useRef({ widget, src })
+
+  useEffect(() => {
+    metaRef.current = { widget, src }
+  }, [widget, src])
+
+  useEffect(() => {
+    if (!loaded) return
+
+    loadedIframeCount += 1
+    if (isDevRuntime()) {
+      const meta = metaRef.current
+      logIframeEvent('loaded', loadedIframeCount, meta)
+    }
+
+    return () => {
+      loadedIframeCount = Math.max(0, loadedIframeCount - 1)
+      if (isDevRuntime()) {
+        const meta = metaRef.current
+        logIframeEvent('unloaded', loadedIframeCount, meta)
+      }
+    }
+  }, [loaded])
+}

package/src/canvas/widgets/iframeDevLogs.test.jsx

@@ -0,0 +1,81 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+
+function Probe({ widget = 'Probe', loaded = false, src = '/test' }) {
+  useIframeDevLogs({ widget, loaded, src })
+  return null
+}
+
+describe('useIframeDevLogs', () => {
+  let logSpy
+
+  beforeEach(() => {
+    window.__SB_LOCAL_DEV__ = true
+    logSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    logSpy.mockRestore()
+    delete window.__SB_LOCAL_DEV__
+  })
+
+  it('logs iframe load and unload with tally', () => {
+    const { rerender, unmount } = render(<Probe loaded={false} src="/alpha" />)
+    rerender(<Probe loaded src="/alpha" />)
+    rerender(<Probe loaded={false} src="/alpha" />)
+
+    expect(logSpy).toHaveBeenNthCalledWith(
+      1,
+      '[storyboard][iframe] loaded | count=1 | Probe',
+      { event: 'loaded', count: 1, widget: 'Probe', src: '/alpha' },
+    )
+    expect(logSpy).toHaveBeenNthCalledWith(
+      2,
+      '[storyboard][iframe] unloaded | count=0 | Probe',
+      { event: 'unloaded', count: 0, widget: 'Probe', src: '/alpha' },
+    )
+
+    unmount()
+  })
+
+  it('tracks tally across multiple loaded iframes', () => {
+    const first = render(<Probe widget="PrototypeEmbed" loaded src="/proto" />)
+    const second = render(<Probe widget="FigmaEmbed" loaded src="/figma" />)
+
+    expect(logSpy).toHaveBeenNthCalledWith(
+      1,
+      '[storyboard][iframe] loaded | count=1 | PrototypeEmbed',
+      { event: 'loaded', count: 1, widget: 'PrototypeEmbed', src: '/proto' },
+    )
+    expect(logSpy).toHaveBeenNthCalledWith(
+      2,
+      '[storyboard][iframe] loaded | count=2 | FigmaEmbed',
+      { event: 'loaded', count: 2, widget: 'FigmaEmbed', src: '/figma' },
+    )
+
+    first.unmount()
+    expect(logSpy).toHaveBeenNthCalledWith(
+      3,
+      '[storyboard][iframe] unloaded | count=1 | PrototypeEmbed',
+      { event: 'unloaded', count: 1, widget: 'PrototypeEmbed', src: '/proto' },
+    )
+
+    second.unmount()
+    expect(logSpy).toHaveBeenNthCalledWith(
+      4,
+      '[storyboard][iframe] unloaded | count=0 | FigmaEmbed',
+      { event: 'unloaded', count: 0, widget: 'FigmaEmbed', src: '/figma' },
+    )
+  })
+
+  it('does not log outside local dev runtime', () => {
+    window.__SB_LOCAL_DEV__ = false
+    const { rerender, unmount } = render(<Probe loaded={false} src="/off" />)
+    rerender(<Probe loaded src="/off" />)
+    rerender(<Probe loaded={false} src="/off" />)
+
+    expect(logSpy).not.toHaveBeenCalled()
+    unmount()
+  })
+})

package/src/canvas/widgets/index.js

@@ -4,6 +4,8 @@ import PrototypeEmbed from './PrototypeEmbed.jsx'
 import LinkPreview from './LinkPreview.jsx'
 import ImageWidget from './ImageWidget.jsx'
 import FigmaEmbed from './FigmaEmbed.jsx'
+import CodePenEmbed from './CodePenEmbed.jsx'
+import StoryWidget from './StoryWidget.jsx'
 
 /**
  * Maps widget type strings to their React components.
@@ -16,6 +18,8 @@ export const widgetRegistry = {
   'link-preview': LinkPreview,
   'image': ImageWidget,
   'figma-embed': FigmaEmbed,
+  'codepen-embed': CodePenEmbed,
+  'story': StoryWidget,
 }
 
 /**

package/src/canvas/widgets/pasteRules.js

@@ -0,0 +1,295 @@
+/**
+ * Paste Rules — config-driven paste routing for canvas widgets.
+ *
+ * All paste routing is defined in paste.config.json (packages/core).
+ * Each rule declares a match condition and a widget type + prop template.
+ * Rules are evaluated in order — first match wins.
+ *
+ * Image paste and widget-ref paste remain in CanvasPage.jsx because they
+ * require clipboard / canvas API access that doesn't belong here.
+ */
+
+import pasteConfig from '@dfosco/storyboard-core/paste.config.json'
+
+// ---------------------------------------------------------------------------
+// Branch-prefix pattern (matches /branch--<name> at start of pathname)
+// ---------------------------------------------------------------------------
+
+const BRANCH_PREFIX_RE = /^\/branch--[^/]+/
+
+// ---------------------------------------------------------------------------
+// Paste context — captures origin + base-path once per effect cycle
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a paste context object that URL rules can query.
+ *
+ * @param {string} origin  - `window.location.origin`
+ * @param {string} basePath - `import.meta.env.BASE_URL` with trailing slash stripped
+ * @returns {PasteContext}
+ */
+export function createPasteContext(origin, basePath) {
+  const normalizedBase = basePath.replace(/\/$/, '')
+
+  return {
+    origin,
+    basePath: normalizedBase,
+    baseUrl: origin + normalizedBase,
+
+    /**
+     * Check whether a raw URL string points at the same Storyboard origin,
+     * accounting for branch-deploy prefixes.
+     * Uses parsed URL comparison (not string prefix) to avoid host spoofing.
+     */
+    isSameOrigin(text) {
+      const parsed = this.parseUrl(text)
+      if (!parsed || parsed.origin !== origin) return false
+      const pathname = parsed.pathname
+      if (normalizedBase && (pathname === normalizedBase || pathname.startsWith(normalizedBase + '/'))) return true
+      if (!normalizedBase) return true
+      return BRANCH_PREFIX_RE.test(pathname)
+    },
+
+    /**
+     * Strip the base path (or any branch prefix) from a pathname to produce a
+     * portable prototype `src` value.
+     */
+    extractSrc(pathname) {
+      if (normalizedBase && pathname.startsWith(normalizedBase)) {
+        return pathname.slice(normalizedBase.length) || '/'
+      }
+      const m = pathname.match(BRANCH_PREFIX_RE)
+      if (m) return pathname.slice(m[0].length) || '/'
+      return pathname
+    },
+
+    /**
+     * Parse text as an http(s) URL. Returns the URL object or null.
+     */
+    parseUrl(text) {
+      try {
+        const url = new URL(text)
+        return (url.protocol === 'http:' || url.protocol === 'https:') ? url : null
+      } catch {
+        return null
+      }
+    },
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Template variable resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Build the set of template variables available to prop templates.
+ *
+ * @param {string} text           - raw pasted text
+ * @param {URL|null} parsed       - parsed URL (null for non-URL text)
+ * @param {PasteContext} ctx
+ * @returns {Record<string, string>}
+ */
+export function buildTemplateVars(text, parsed, ctx) {
+  const pathname = parsed?.pathname ?? ''
+  return {
+    $url: text,
+    $text: text,
+    $pathname: pathname,
+    $src: ctx.extractSrc(pathname),
+    $search: parsed?.search ?? '',
+    $hash: parsed?.hash ?? '',
+    $hostname: parsed?.hostname ?? '',
+    $origin: parsed?.origin ?? '',
+  }
+}
+
+/**
+ * Apply URL sanitization to a value per the sanitize spec.
+ *
+ * @param {string} value         - the resolved URL string
+ * @param {{ stripParams?: string[], normalizeHost?: string }} spec
+ * @returns {string}
+ */
+export function sanitizeUrl(value, spec) {
+  try {
+    const url = new URL(value)
+    if (spec.normalizeHost) url.hostname = spec.normalizeHost
+    if (Array.isArray(spec.stripParams)) {
+      for (const p of spec.stripParams) url.searchParams.delete(p)
+    }
+    return url.toString()
+  } catch {
+    return value
+  }
+}
+
+/**
+ * Resolve a single prop value from config.
+ * - Plain values (string, number, boolean) are returned as-is.
+ * - Objects with `template` are resolved from template vars.
+ * - Objects with `sanitize` have URL sanitization applied after template resolution.
+ *
+ * @param {*} propDef             - the prop definition from config
+ * @param {Record<string, string>} vars - template variables
+ * @returns {*}
+ */
+export function resolvePropValue(propDef, vars) {
+  if (propDef == null) return propDef
+
+  // Object with template key → resolve template + optional sanitize
+  if (typeof propDef === 'object' && propDef.template) {
+    let value = propDef.template
+    for (const [varName, varValue] of Object.entries(vars)) {
+      value = value.replaceAll(varName, varValue)
+    }
+    if (propDef.sanitize) {
+      value = sanitizeUrl(value, propDef.sanitize)
+    }
+    return value
+  }
+
+  // Plain string — substitute template vars
+  if (typeof propDef === 'string') {
+    let value = propDef
+    for (const [varName, varValue] of Object.entries(vars)) {
+      value = value.replaceAll(varName, varValue)
+    }
+    return value
+  }
+
+  // Numbers, booleans, etc. — pass through
+  return propDef
+}
+
+// ---------------------------------------------------------------------------
+// Rule compilation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compile a single rule from paste.config.json into a callable
+ * `{ name, match, resolve }` object.
+ *
+ * Match conditions (all must pass when combined):
+ *   - `hostname`    — regex tested against parsed URL hostname
+ *   - `pathname`    — regex tested against parsed URL pathname
+ *   - `pattern`     — regex tested against the full pasted text
+ *   - `sameOrigin`  — boolean; delegates to ctx.isSameOrigin()
+ *   - `isUrl`       — boolean; true if text is a valid http(s) URL
+ *   - `any`         — boolean; always matches (catch-all)
+ *
+ * @param {object} ruleDef
+ * @returns {{ name: string, match: Function, resolve: Function } | null}
+ */
+export function compileRule(ruleDef) {
+  if (!ruleDef || !ruleDef.match || !ruleDef.widget) return null
+
+  const { match: matchDef, widget, props: propsDef = {}, name = 'unnamed' } = ruleDef
+
+  // Pre-compile regexes
+  const matchers = []
+
+  if (matchDef.hostname) {
+    try {
+      const re = new RegExp(matchDef.hostname)
+      matchers.push((text, parsed) => parsed !== null && re.test(parsed.hostname))
+    } catch {
+      console.warn(`[pasteRules] Invalid hostname regex in rule "${name}": ${matchDef.hostname}`)
+      return null
+    }
+  }
+
+  if (matchDef.pathname) {
+    try {
+      const re = new RegExp(matchDef.pathname)
+      matchers.push((text, parsed) => parsed !== null && re.test(parsed.pathname))
+    } catch {
+      console.warn(`[pasteRules] Invalid pathname regex in rule "${name}": ${matchDef.pathname}`)
+      return null
+    }
+  }
+
+  if (matchDef.pattern) {
+    try {
+      const re = new RegExp(matchDef.pattern)
+      matchers.push((text) => re.test(text))
+    } catch {
+      console.warn(`[pasteRules] Invalid pattern regex in rule "${name}": ${matchDef.pattern}`)
+      return null
+    }
+  }
+
+  if (matchDef.sameOrigin) {
+    matchers.push((text, parsed, ctx) => ctx.isSameOrigin(text))
+  }
+
+  if (matchDef.isUrl) {
+    matchers.push((text, parsed) => parsed !== null)
+  }
+
+  if (matchDef.any) {
+    matchers.push(() => true)
+  }
+
+  if (matchers.length === 0) {
+    console.warn(`[pasteRules] Rule "${name}" has no valid match conditions`)
+    return null
+  }
+
+  return {
+    name,
+    match(text, parsed, ctx) {
+      return matchers.every(fn => fn(text, parsed, ctx))
+    },
+    resolve(text, parsed, ctx) {
+      const vars = buildTemplateVars(text, parsed, ctx)
+      const resolvedProps = {}
+      for (const [key, def] of Object.entries(propsDef)) {
+        resolvedProps[key] = resolvePropValue(def, vars)
+      }
+      return { type: widget, props: resolvedProps }
+    },
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Compile rules from paste.config.json at import time
+// ---------------------------------------------------------------------------
+
+const COMPILED_RULES = (pasteConfig.rules || [])
+  .map(compileRule)
+  .filter(Boolean)
+
+// ---------------------------------------------------------------------------
+// Main resolver
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve pasted text into a widget `{ type, props }` by running through
+ * ordered rules from paste.config.json. Override rules (if any) run first.
+ *
+ * @param {string} text              - trimmed clipboard text
+ * @param {PasteContext} context      - from `createPasteContext()`
+ * @param {object[]} [overrideRules] - raw rule objects from storyboard.config.json canvas.pasteRules
+ * @returns {{ type: string, props: object } | null}
+ */
+export function resolvePaste(text, context, overrideRules = []) {
+  const parsed = context.parseUrl(text)
+
+  // Compile any runtime override rules (from storyboard.config.json)
+  const overrides = overrideRules.map(compileRule).filter(Boolean)
+  const allRules = [...overrides, ...COMPILED_RULES]
+
+  for (const rule of allRules) {
+    if (rule.match(text, parsed, context)) {
+      return rule.resolve(text, parsed, context)
+    }
+  }
+
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// Exports for testing
+// ---------------------------------------------------------------------------
+
+export { COMPILED_RULES, BRANCH_PREFIX_RE }