@dfosco/storyboard-react 4.0.0-beta.2 → 4.0.0-beta.21

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.21",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.2",
-    "@dfosco/tiny-canvas": "4.0.0-beta.2",
+    "@dfosco/storyboard-core": "4.0.0-beta.21",
+    "@dfosco/tiny-canvas": "4.0.0-beta.21",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
-    "jsonc-parser": "^3.3.1"
+    "jsonc-parser": "^3.3.1",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-html": "^16.0.1"
   },
   "license": "MIT",
   "repository": {

package/src/canvas/CanvasControls.jsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
+import { listStories, getStoryData } from '@dfosco/storyboard-core'
 import styles from './CanvasControls.module.css'
 
 const WIDGET_TYPES = getMenuWidgetTypes()
@@ -9,6 +10,7 @@ const WIDGET_TYPES = getMenuWidgetTypes()
  */
 export default function CanvasControls({ onAddWidget }) {
   const [menuOpen, setMenuOpen] = useState(false)
+  const [storyPicker, setStoryPicker] = useState(false)
   const menuRef = useRef(null)
 
   // Close menu on outside click
@@ -17,6 +19,7 @@ export default function CanvasControls({ onAddWidget }) {
     function handlePointerDown(e) {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         setMenuOpen(false)
+        setStoryPicker(false)
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
@@ -26,14 +29,23 @@ export default function CanvasControls({ onAddWidget }) {
   const handleAddWidget = useCallback((type) => {
     onAddWidget(type)
     setMenuOpen(false)
+    setStoryPicker(false)
   }, [onAddWidget])
 
+  const handleAddStory = useCallback((storyId) => {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:add-story-widget', { detail: { storyId } }))
+    setMenuOpen(false)
+    setStoryPicker(false)
+  }, [])
+
+  const storyNames = storyPicker ? listStories() : []
+
   return (
     <div className={styles.toolbar} role="toolbar" aria-label="Canvas controls">
       <div ref={menuRef} className={styles.createGroup}>
         <button
           className={styles.btn}
-          onClick={() => setMenuOpen((v) => !v)}
+          onClick={() => { setMenuOpen((v) => !v); setStoryPicker(false) }}
           aria-label="Add widget"
           aria-expanded={menuOpen}
           title="Add widget"
@@ -42,7 +54,7 @@ export default function CanvasControls({ onAddWidget }) {
             <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
           </svg>
         </button>
-        {menuOpen && (
+        {menuOpen && !storyPicker && (
           <div className={styles.menu} role="menu">
             <div className={styles.menuLabel}>Add to canvas</div>
             {WIDGET_TYPES.map((wt) => (
@@ -55,6 +67,43 @@ export default function CanvasControls({ onAddWidget }) {
                 {wt.label}
               </button>
             ))}
+            <div className={styles.menuDivider} />
+            <button
+              className={styles.menuItem}
+              role="menuitem"
+              onClick={() => setStoryPicker(true)}
+            >
+              📖 Component
+            </button>
+          </div>
+        )}
+        {menuOpen && storyPicker && (
+          <div className={styles.menu} role="menu">
+            <div className={styles.menuLabel}>
+              <button
+                className={styles.backBtn}
+                onClick={() => setStoryPicker(false)}
+                aria-label="Back"
+              >←</button>
+              Select component
+            </div>
+            {storyNames.length === 0 && (
+              <div className={styles.menuEmpty}>No stories found</div>
+            )}
+            {storyNames.map((name) => {
+              const story = getStoryData(name)
+              return (
+                <button
+                  key={name}
+                  className={styles.menuItem}
+                  role="menuitem"
+                  onClick={() => handleAddStory(name)}
+                >
+                  {name}
+                  {story?._route && <span className={styles.menuHint}>{story._route}</span>}
+                </button>
+              )
+            })}
           </div>
         )}
       </div>

package/src/canvas/CanvasControls.module.css

@@ -102,3 +102,34 @@
 .menuItem:hover {
   background: var(--bgColor-muted, #f6f8fa);
 }
+
+.menuDivider {
+  height: 1px;
+  margin: 4px 8px;
+  background: var(--borderColor-muted, rgba(0, 0, 0, 0.1));
+}
+
+.menuHint {
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  margin-left: 8px;
+}
+
+.menuEmpty {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+  font-style: italic;
+}
+
+.backBtn {
+  all: unset;
+  cursor: pointer;
+  margin-right: 4px;
+  font-size: 13px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.backBtn:hover {
+  color: var(--fgColor-default, #1f2328);
+}

package/src/canvas/CanvasPage.dragdrop.test.jsx

@@ -0,0 +1,346 @@
+/**
+ * Tests for canvas image drag-and-drop functionality.
+ *
+ * Tests the event handling for dropping images from Finder/file manager
+ * onto the canvas, including coordinate conversion and file filtering.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { fireEvent, render, act, waitFor } from '@testing-library/react'
+import CanvasPage from './CanvasPage.jsx'
+import { addWidget, uploadImage } from './canvasApi.js'
+
+// Mock dependencies
+vi.mock('@dfosco/tiny-canvas', () => ({
+  Canvas: ({ children }) => <div data-testid="tiny-canvas">{children}</div>,
+}))
+
+const mockCanvas = {
+  title: 'Drag Drop Test Canvas',
+  widgets: [],
+  sources: [],
+  centered: false,
+  dotted: false,
+  grid: true,
+  gridSize: 24,
+  colorMode: 'auto',
+}
+
+vi.mock('./useCanvas.js', () => ({
+  useCanvas: () => ({
+    canvas: mockCanvas,
+    jsxExports: {},
+    loading: false,
+  }),
+}))
+
+vi.mock('./widgets/index.js', () => ({
+  getWidgetComponent: () => function MockWidget() {
+    return <div>mock widget</div>
+  },
+}))
+
+vi.mock('./widgets/WidgetChrome.jsx', () => ({
+  default: ({ children }) => <div data-testid="widget-chrome">{children}</div>,
+}))
+
+vi.mock('./widgets/widgetProps.js', () => ({
+  schemas: {},
+  getDefaults: () => ({}),
+}))
+
+vi.mock('./widgets/widgetConfig.js', () => ({
+  getFeatures: () => [],
+  isResizable: () => false,
+  schemas: {},
+  getMenuWidgetTypes: () => [],
+}))
+
+vi.mock('./widgets/figmaUrl.js', () => ({
+  isFigmaUrl: () => false,
+  sanitizeFigmaUrl: (url) => url,
+}))
+
+vi.mock('./canvasApi.js', () => ({
+  addWidget: vi.fn(() => Promise.resolve({ success: true, widget: { id: 'image-abc', type: 'image' } })),
+  updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
+  removeWidget: vi.fn(),
+  uploadImage: vi.fn(() => Promise.resolve({ success: true, filename: 'test-image.png' })),
+}))
+
+vi.mock('./useUndoRedo.js', () => ({
+  default: () => ({
+    snapshot: vi.fn(),
+    undo: vi.fn(),
+    redo: vi.fn(),
+    reset: vi.fn(),
+    canUndo: false,
+    canRedo: false,
+  }),
+}))
+
+// Helper to create a mock File
+function createMockImageFile(name = 'test.png', type = 'image/png') {
+  const blob = new Blob(['fake image data'], { type })
+  return new File([blob], name, { type })
+}
+
+// Helper to create a DataTransfer-like object
+function createDataTransfer(files, types = ['Files']) {
+  return {
+    files,
+    types,
+    dropEffect: 'none',
+  }
+}
+
+describe('CanvasPage image drag-and-drop', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Mock FileReader for blobToDataUrl
+    global.FileReader = class {
+      readAsDataURL() {
+        setTimeout(() => {
+          this.result = 'data:image/png;base64,fakedata'
+          this.onload?.()
+        }, 0)
+      }
+    }
+    // Mock Image for getImageDimensions
+    global.Image = class {
+      set src(val) {
+        setTimeout(() => {
+          this.naturalWidth = 800
+          this.naturalHeight = 600
+          this.onload?.()
+        }, 0)
+      }
+    }
+  })
+
+  afterEach(() => {
+    delete global.FileReader
+    delete global.Image
+  })
+
+  it('allows drop by preventing default on dragover with Files', () => {
+    render(<CanvasPage name="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
+    dragOverEvent.dataTransfer = createDataTransfer([], ['Files'])
+    dragOverEvent.preventDefault = vi.fn()
+
+    scrollContainer.dispatchEvent(dragOverEvent)
+
+    expect(dragOverEvent.preventDefault).toHaveBeenCalled()
+    expect(dragOverEvent.dataTransfer.dropEffect).toBe('copy')
+  })
+
+  it('ignores dragover without Files type (internal widget drag)', () => {
+    render(<CanvasPage name="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
+    dragOverEvent.dataTransfer = createDataTransfer([], ['text/plain'])
+    dragOverEvent.preventDefault = vi.fn()
+
+    scrollContainer.dispatchEvent(dragOverEvent)
+
+    expect(dragOverEvent.preventDefault).not.toHaveBeenCalled()
+  })
+
+  it('uploads image and creates widget on drop', async () => {
+    render(<CanvasPage name="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile('photo.png', 'image/png')
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    dropEvent.clientX = 200
+    dropEvent.clientY = 150
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    // Mock getBoundingClientRect for coordinate calculation
+    scrollContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      width: 1000,
+      height: 800,
+    })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      // Wait for async processing
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(dropEvent.preventDefault).toHaveBeenCalled()
+    expect(uploadImage).toHaveBeenCalledWith(
+      expect.stringContaining('data:image/png'),
+      'test-canvas'
+    )
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        type: 'image',
+        props: expect.objectContaining({
+          src: 'test-image.png',
+          private: false,
+        }),
+        position: expect.objectContaining({
+          x: expect.any(Number),
+          y: expect.any(Number),
+        }),
+      })
+    )
+  })
+
+  it('ignores non-image files but prevents browser default', async () => {
+    render(<CanvasPage name="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const textFile = new File(['text content'], 'readme.txt', { type: 'text/plain' })
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([textFile], ['Files'])
+    dropEvent.clientX = 200
+    dropEvent.clientY = 150
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0 })
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    // Should prevent default (stops browser from opening the file)
+    expect(dropEvent.preventDefault).toHaveBeenCalled()
+    // But should not call upload or add widget for non-image files
+    expect(uploadImage).not.toHaveBeenCalled()
+    expect(addWidget).not.toHaveBeenCalled()
+  })
+
+  it('processes multiple image files on drop', async () => {
+    render(<CanvasPage name="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const image1 = createMockImageFile('photo1.png', 'image/png')
+    const image2 = createMockImageFile('photo2.jpg', 'image/jpeg')
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([image1, image2], ['Files'])
+    dropEvent.clientX = 100
+    dropEvent.clientY = 100
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      // Wait longer for multiple async operations
+      await new Promise((r) => setTimeout(r, 150))
+    })
+
+    // Should call upload for each image
+    expect(uploadImage).toHaveBeenCalledTimes(2)
+    expect(addWidget).toHaveBeenCalledTimes(2)
+  })
+
+  it('ignores drop without Files type', async () => {
+    render(<CanvasPage name="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([], ['text/html'])
+    dropEvent.preventDefault = vi.fn()
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+    })
+
+    expect(dropEvent.preventDefault).not.toHaveBeenCalled()
+    expect(uploadImage).not.toHaveBeenCalled()
+  })
+
+  it('snaps drop position to grid when snap is enabled', async () => {
+    // Enable snap in mock data
+    const originalSnapToGrid = mockCanvas.snapToGrid
+    mockCanvas.snapToGrid = true
+
+    render(<CanvasPage name="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile()
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    // Position that should snap: 137 → 144 (gridSize 24: round(137/24)*24 = 144)
+    dropEvent.clientX = 137
+    dropEvent.clientY = 85 // 85 → 96
+
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        position: { x: 144, y: 96 },
+      })
+    )
+
+    // Restore
+    mockCanvas.snapToGrid = originalSnapToGrid
+  })
+
+  it('does not snap drop position when snap is disabled', async () => {
+    // Ensure snap is disabled (default from mock)
+    const originalSnapToGrid = mockCanvas.snapToGrid
+    mockCanvas.snapToGrid = false
+
+    render(<CanvasPage name="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile()
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    // Position should round to nearest integer, not snap to grid
+    dropEvent.clientX = 137
+    dropEvent.clientY = 85
+
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        position: { x: 137, y: 85 }, // No snapping, just rounded integers
+      })
+    )
+
+    // Restore
+    mockCanvas.snapToGrid = originalSnapToGrid
+  })
+})