@dfosco/storyboard-react 2.8.0 → 3.1.0

package/src/canvas/useCanvas.js

@@ -0,0 +1,74 @@
+import { useState, useEffect, useMemo } from 'react'
+import { getCanvasData } from '@dfosco/storyboard-core'
+
+/**
+ * Fetch fresh canvas data from the server's .canvas.json file.
+ * Falls back to build-time data if the server is unavailable.
+ */
+async function fetchCanvasFromServer(name) {
+  try {
+    const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+    const res = await fetch(`${base}/_storyboard/canvas/read?name=${encodeURIComponent(name)}`)
+    if (res.ok) return res.json()
+  } catch { /* fall back to build-time data */ }
+  return null
+}
+
+/**
+ * Hook to load canvas data by name.
+ * Uses build-time data for static config (routes, JSX path), but fetches
+ * fresh widget data from the server to pick up persisted edits.
+ *
+ * @param {string} name - Canvas name as indexed by the data plugin
+ * @returns {{ canvas: object|null, jsxExports: object|null, loading: boolean }}
+ */
+export function useCanvas(name) {
+  const buildTimeCanvas = useMemo(() => getCanvasData(name), [name])
+  const [canvas, setCanvas] = useState(buildTimeCanvas)
+  const [jsxExports, setJsxExports] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  // Fetch fresh data from server on mount
+  useEffect(() => {
+    if (!buildTimeCanvas) {
+      setCanvas(null)
+      setLoading(false)
+      return
+    }
+
+    setLoading(true)
+    fetchCanvasFromServer(name).then((fresh) => {
+      if (fresh) {
+        // Merge: use server data for widgets/sources, keep build-time for _route/_jsxModule
+        setCanvas({ ...buildTimeCanvas, ...fresh })
+      } else {
+        setCanvas(buildTimeCanvas)
+      }
+      setLoading(false)
+    })
+  }, [name, buildTimeCanvas])
+
+  useEffect(() => {
+    if (!canvas?._jsxModule) {
+      setJsxExports(null)
+      return
+    }
+
+    import(/* @vite-ignore */ canvas._jsxModule)
+      .then((mod) => {
+        const exports = {}
+        for (const [key, value] of Object.entries(mod)) {
+          if (key !== 'default' && typeof value === 'function') {
+            exports[key] = value
+          }
+        }
+        setJsxExports(exports)
+      })
+      .catch((err) => {
+        console.error(`[storyboard] Failed to load canvas JSX module: ${canvas._jsxModule}`, err)
+        setJsxExports(null)
+      })
+  }, [canvas?._jsxModule])
+
+  return { canvas, jsxExports, loading }
+}

package/src/canvas/widgets/ComponentWidget.jsx

@@ -0,0 +1,15 @@
+import WidgetWrapper from './WidgetWrapper.jsx'
+
+/**
+ * Renders a live JSX export from a .canvas.jsx companion file.
+ * Content is read-only (re-renders on HMR), only position is mutable.
+ */
+export default function ComponentWidget({ component: Component }) {
+  if (!Component) return null
+
+  return (
+    <WidgetWrapper>
+      <Component />
+    </WidgetWrapper>
+  )
+}

package/src/canvas/widgets/LinkPreview.jsx

@@ -0,0 +1,34 @@
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp, linkPreviewSchema } from './widgetProps.js'
+import styles from './LinkPreview.module.css'
+
+export default function LinkPreview({ props }) {
+  const url = readProp(props, 'url', linkPreviewSchema)
+  const title = readProp(props, 'title', linkPreviewSchema)
+
+  let hostname = ''
+  try {
+    hostname = new URL(url).hostname
+  } catch { /* invalid URL */ }
+
+  return (
+    <WidgetWrapper>
+      <div className={styles.card}>
+        <span className={styles.icon}>🔗</span>
+        <div className={styles.text}>
+          {title && <p className={styles.title}>{title}</p>}
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.url}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            {hostname || url}
+          </a>
+        </div>
+      </div>
+    </WidgetWrapper>
+  )
+}

package/src/canvas/widgets/LinkPreview.module.css

@@ -0,0 +1,51 @@
+.card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  text-decoration: none;
+  color: inherit;
+  min-width: 240px;
+  transition: background 150ms;
+}
+
+.card:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.text {
+  overflow: hidden;
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--fgColor-default, #1f2328);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.url {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  display: block;
+}
+
+.url:hover {
+  text-decoration: underline;
+  color: var(--fgColor-accent, #0969da);
+}

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -0,0 +1,91 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp, markdownSchema } from './widgetProps.js'
+import styles from './MarkdownBlock.module.css'
+
+/**
+ * Renders markdown as plain HTML using a minimal built-in converter.
+ */
+function renderMarkdown(text) {
+  if (!text) return ''
+  return text
+    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
+    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
+    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/`(.+?)`/g, '<code>$1</code>')
+    .replace(/^- (.+)$/gm, '<li>$1</li>')
+    .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
+    .replace(/\n\n/g, '</p><p>')
+    .replace(/\n/g, '<br>')
+    .replace(/^(.+)$/gm, (line) => {
+      if (line.startsWith('<')) return line
+      return `<p>${line}</p>`
+    })
+}
+
+export default function MarkdownBlock({ props, onUpdate }) {
+  const content = readProp(props, 'content', markdownSchema)
+  const width = readProp(props, 'width', markdownSchema)
+  const [editing, setEditing] = useState(false)
+  const textareaRef = useRef(null)
+  const blockRef = useRef(null)
+  const [editHeight, setEditHeight] = useState(null)
+
+  const handleContentChange = useCallback((e) => {
+    onUpdate?.({ content: e.target.value })
+  }, [onUpdate])
+
+  useEffect(() => {
+    if (editing) {
+      // Capture the preview height before switching to editor
+      if (blockRef.current && !editHeight) {
+        setEditHeight(blockRef.current.offsetHeight)
+      }
+      if (textareaRef.current) {
+        textareaRef.current.focus()
+      }
+    } else {
+      setEditHeight(null)
+    }
+  }, [editing, editHeight])
+
+  return (
+    <WidgetWrapper>
+      <div
+        ref={blockRef}
+        className={styles.block}
+        style={{ width, minHeight: editHeight || undefined }}
+      >
+        {editing ? (
+          <textarea
+            ref={textareaRef}
+            className={styles.editor}
+            style={{ minHeight: editHeight ? editHeight - 2 : undefined }}
+            value={content}
+            onChange={handleContentChange}
+            onBlur={() => setEditing(false)}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') setEditing(false)
+            }}
+            placeholder="Write markdown…"
+          />
+        ) : (
+          <div
+            className={styles.preview}
+            onDoubleClick={() => setEditing(true)}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+            dangerouslySetInnerHTML={{
+              __html: renderMarkdown(content) || '<p class="placeholder">Double-click to edit…</p>',
+            }}
+          />
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+}

package/src/canvas/widgets/MarkdownBlock.module.css

@@ -0,0 +1,78 @@
+.block {
+  min-height: 80px;
+  background: var(--bgColor-default, #ffffff);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.preview {
+  padding: 16px 20px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--fgColor-default, #1f2328);
+  cursor: text;
+  min-height: 60px;
+}
+
+.preview h1 {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0 0 8px;
+  line-height: 1.3;
+}
+
+.preview h2 {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 0 0 6px;
+  line-height: 1.3;
+}
+
+.preview h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  line-height: 1.3;
+}
+
+.preview p {
+  margin: 0 0 8px;
+}
+
+.preview code {
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: ui-monospace, monospace;
+}
+
+.preview ul {
+  margin: 0 0 8px;
+  padding-left: 20px;
+}
+
+.preview li {
+  margin: 0 0 2px;
+}
+
+.preview :global(.placeholder) {
+  color: var(--fgColor-muted, #656d76);
+  font-style: italic;
+}
+
+.editor {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  min-height: 120px;
+  padding: 16px 20px;
+  border: none;
+  outline: none;
+  background: var(--bgColor-default, #ffffff);
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--fgColor-default, #1f2328);
+  resize: none;
+}

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -0,0 +1,179 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp, prototypeEmbedSchema } from './widgetProps.js'
+import styles from './PrototypeEmbed.module.css'
+
+export default function PrototypeEmbed({ props, onUpdate }) {
+  const src = readProp(props, 'src', prototypeEmbedSchema)
+  const width = readProp(props, 'width', prototypeEmbedSchema)
+  const height = readProp(props, 'height', prototypeEmbedSchema)
+  const zoom = readProp(props, 'zoom', prototypeEmbedSchema)
+  const label = readProp(props, 'label', prototypeEmbedSchema) || src
+
+  const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  const rawSrc = src ? `${basePath}${src}` : ''
+  const iframeSrc = rawSrc ? `${rawSrc}${rawSrc.includes('?') ? '&' : '?'}_sb_embed` : ''
+
+  const scale = zoom / 100
+
+  const [editing, setEditing] = useState(false)
+  const [interactive, setInteractive] = useState(false)
+  const inputRef = useRef(null)
+  const embedRef = useRef(null)
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
+  // Exit interactive mode when clicking outside the embed
+  useEffect(() => {
+    if (!interactive) return
+    function handlePointerDown(e) {
+      if (embedRef.current && !embedRef.current.contains(e.target)) {
+        setInteractive(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive])
+
+  const enterInteractive = useCallback(() => setInteractive(true), [])
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    const value = inputRef.current?.value?.trim() || ''
+    onUpdate?.({ src: value })
+    setEditing(false)
+  }
+
+  return (
+    <WidgetWrapper>
+      <div
+        ref={embedRef}
+        className={styles.embed}
+        style={{ width, height }}
+      >
+        {editing ? (
+          <form
+            className={styles.urlForm}
+            onSubmit={handleSubmit}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            <label className={styles.urlLabel}>Prototype URL path</label>
+            <input
+              ref={inputRef}
+              className={styles.urlInput}
+              type="text"
+              defaultValue={src}
+              placeholder="/MyPrototype/page"
+              onKeyDown={(e) => { if (e.key === 'Escape') setEditing(false) }}
+            />
+            <div className={styles.urlActions}>
+              <button type="submit" className={styles.urlSave}>Save</button>
+              <button type="button" className={styles.urlCancel} onClick={() => setEditing(false)}>Cancel</button>
+            </div>
+          </form>
+        ) : iframeSrc ? (
+          <>
+            <div className={styles.iframeContainer}>
+              <iframe
+                src={iframeSrc}
+                className={styles.iframe}
+                style={{
+                  width: width / scale,
+                  height: height / scale,
+                  transform: `scale(${scale})`,
+                  transformOrigin: '0 0',
+                }}
+                title={label || 'Prototype embed'}
+                sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+              />
+            </div>
+            {!interactive && (
+              <div
+                className={styles.dragOverlay}
+                onDoubleClick={enterInteractive}
+              />
+            )}
+          </>
+        ) : (
+          <div
+            className={styles.empty}
+            onDoubleClick={() => setEditing(true)}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+          >
+            <p>Double-click to set prototype URL</p>
+          </div>
+        )}
+        {iframeSrc && !editing && (
+          <button
+            className={styles.editBtn}
+            onClick={(e) => { e.stopPropagation(); setEditing(true) }}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Edit URL"
+            aria-label="Edit prototype URL"
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"/></svg>
+          </button>
+        )}
+        {iframeSrc && !editing && (
+          <div
+            className={styles.zoomBar}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            <button
+              className={styles.zoomBtn}
+              onClick={() => {
+                const step = zoom <= 75 ? 5 : 25
+                onUpdate?.({ zoom: Math.max(25, zoom - step) })
+              }}
+              disabled={zoom <= 25}
+              aria-label="Zoom out"
+            >−</button>
+            <span className={styles.zoomLabel}>{zoom}%</span>
+            <button
+              className={styles.zoomBtn}
+              onClick={() => {
+                const step = zoom < 75 ? 5 : 25
+                onUpdate?.({ zoom: Math.min(200, zoom + step) })
+              }}
+              disabled={zoom >= 200}
+              aria-label="Zoom in"
+            >+</button>
+          </div>
+        )}
+      </div>
+      <div
+        className={styles.resizeHandle}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          const startX = e.clientX
+          const startY = e.clientY
+          const startW = width
+          const startH = height
+          function onMove(ev) {
+            const newW = Math.max(200, startW + ev.clientX - startX)
+            const newH = Math.max(150, startH + ev.clientY - startY)
+            onUpdate?.({ width: newW, height: newH })
+          }
+          function onUp() {
+            document.removeEventListener('mousemove', onMove)
+            document.removeEventListener('mouseup', onUp)
+          }
+          document.addEventListener('mousemove', onMove)
+          document.addEventListener('mouseup', onUp)
+        }}
+        onPointerDown={(e) => e.stopPropagation()}
+      />
+    </WidgetWrapper>
+  )
+}