canopycms 0.0.0

package/src/editor/preview-bridge.tsx

@@ -0,0 +1,294 @@
+'use client'
+
+import type { CSSProperties } from 'react'
+import { useEffect, useRef, useState } from 'react'
+
+import { formatCanopyPath, type CanopyPathSegment } from './canopy-path'
+
+export const __CANOPY_PREVIEW_CLIENT__ = true
+
+export const CANOPY_PREVIEW_MESSAGE = 'canopycms:draft:update'
+export const CANOPY_PREVIEW_FOCUS = 'canopycms:preview:focus'
+export const CANOPY_PREVIEW_HIGHLIGHT = 'canopycms:preview:highlight'
+export const CANOPY_PREVIEW_READY = 'canopycms:preview:ready'
+
+export interface DraftUpdateMessage {
+  type: typeof CANOPY_PREVIEW_MESSAGE
+  path: string
+  data?: unknown
+  isLoading?: unknown
+}
+
+export const sendDraftUpdate = (iframe: HTMLIFrameElement | null, message: DraftUpdateMessage) => {
+  if (!iframe?.contentWindow) return
+  iframe.contentWindow.postMessage(message, '*')
+}
+
+export interface PreviewFocusMessage {
+  type: typeof CANOPY_PREVIEW_FOCUS
+  entryPath: string
+  fieldPath: string
+}
+
+export interface HighlightMessage {
+  type: typeof CANOPY_PREVIEW_HIGHLIGHT
+  enabled: boolean
+}
+
+/**
+ * Convenience hook that wires draft updates, focus emitter, and highlight toggling together.
+ * Returns live data plus helpers for setting data-canopy-path attributes.
+ */
+const resolvePreviewPath = (explicit?: string): string => {
+  if (explicit) return explicit
+  if (typeof window === 'undefined') return ''
+  return `${window.location.pathname}${window.location.search}`
+}
+
+export const useCanopyPreview = <T,>(opts: { path?: string; initialData: T }) => {
+  const resolvedPath = resolvePreviewPath(opts.path)
+  const { data, isLoading } = usePreviewData<T>(resolvedPath, opts.initialData)
+  const highlightEnabled = usePreviewHighlight()
+  usePreviewFocusEmitter(resolvedPath)
+
+  const fieldProps = (canopyPath: string | CanopyPathSegment[]) => ({
+    'data-canopy-path': Array.isArray(canopyPath) ? formatCanopyPath(canopyPath) : canopyPath,
+  })
+
+  return { data, isLoading, highlightEnabled, fieldProps }
+}
+
+/**
+ * Hook for preview pages to listen for draft updates from the parent editor.
+ * Returns both data and loading state.
+ */
+export const usePreviewData = <T,>(
+  path: string,
+  initialData: T,
+): { data: T; isLoading: Record<string, boolean> } => {
+  const [data, setData] = useState<T>(initialData)
+  const [isLoading, setIsLoading] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    const handler = (event: MessageEvent) => {
+      const msg = event.data as DraftUpdateMessage
+      if (!msg || msg.type !== CANOPY_PREVIEW_MESSAGE || msg.path !== path) return
+      setData(msg.data as T)
+      if (msg.isLoading !== undefined) {
+        setIsLoading(msg.isLoading as Record<string, boolean>)
+      }
+    }
+    window.addEventListener('message', handler)
+    // Notify parent that this preview page is ready to receive draft updates.
+    // This is needed because onLoad in the parent fires before React effects run,
+    // so the first postMessage from the parent arrives before this listener is set up.
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: CANOPY_PREVIEW_READY, path }, '*')
+    }
+    return () => window.removeEventListener('message', handler)
+  }, [path])
+
+  return { data, isLoading }
+}
+
+/**
+ * Hook for preview pages to listen for highlight mode and toggle an outline on clickable elements.
+ */
+export const usePreviewHighlight = () => {
+  const [enabled, setEnabled] = useState(false)
+
+  useEffect(() => {
+    const styleId = 'canopycms-preview-highlight-style'
+    let styleEl = document.getElementById(styleId) as HTMLStyleElement | null
+    if (enabled) {
+      if (!styleEl) {
+        styleEl = document.createElement('style')
+        styleEl.id = styleId
+        styleEl.textContent = `
+          [data-canopy-path] { outline: 2px dashed rgba(79,70,229,0.6); outline-offset: 3px; cursor: pointer; }
+        `
+        document.head.appendChild(styleEl)
+      }
+    } else if (styleEl) {
+      styleEl.remove()
+    }
+  }, [enabled])
+
+  useEffect(() => {
+    const handler = (event: MessageEvent) => {
+      const msg = event.data as HighlightMessage
+      if (msg?.type !== CANOPY_PREVIEW_HIGHLIGHT) return
+      setEnabled(Boolean(msg.enabled))
+    }
+    window.addEventListener('message', handler)
+    return () => window.removeEventListener('message', handler)
+  }, [])
+
+  return enabled
+}
+
+/**
+ * Hook for preview pages to emit focus messages when elements with data-canopy-path are clicked.
+ */
+export const usePreviewFocusEmitter = (entryPath: string) => {
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null
+      if (!target) return
+      const el = target.closest<HTMLElement>('[data-canopy-path]')
+      const fieldPath = el?.dataset.canopyPath
+      if (!fieldPath || !window.parent) return
+      const msg: PreviewFocusMessage = {
+        type: CANOPY_PREVIEW_FOCUS,
+        entryPath,
+        fieldPath,
+      }
+      window.parent.postMessage(msg, '*')
+    }
+    document.addEventListener('click', handleClick)
+    return () => document.removeEventListener('click', handleClick)
+  }, [entryPath])
+}
+
+/**
+ * Lightweight iframe wrapper to keep the preview in sync with form state.
+ * It posts the latest draft data to the iframe after load and when data changes.
+ */
+export const PreviewFrame = ({
+  src,
+  path,
+  data,
+  isLoading,
+  className,
+  style,
+  highlightEnabled,
+}: {
+  src: string
+  path: string
+  data?: unknown
+  isLoading?: unknown
+  className?: string
+  style?: CSSProperties
+  highlightEnabled?: boolean
+}) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  // Show progress bar while waiting for the preview's ready handshake.
+  const [syncPending, setSyncPending] = useState(data !== undefined)
+
+  // Reset when navigating to a different entry (src change = new iframe page load).
+  const [prevSrc, setPrevSrc] = useState(src)
+  if (src !== prevSrc) {
+    setPrevSrc(src)
+    setSyncPending(data !== undefined)
+  }
+
+  // Inject the progress bar keyframe animation once per page.
+  useEffect(() => {
+    const styleId = 'canopycms-preview-sync-style'
+    if (!document.getElementById(styleId)) {
+      const el = document.createElement('style')
+      el.id = styleId
+      el.textContent = `@keyframes canopy-preview-sync { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }`
+      document.head.appendChild(el)
+    }
+  }, [])
+
+  const post = () => {
+    if (data === undefined) return
+    sendDraftUpdate(iframeRef.current, {
+      type: CANOPY_PREVIEW_MESSAGE,
+      path,
+      data,
+      isLoading,
+    })
+  }
+  const postHighlight = () => {
+    if (!iframeRef.current?.contentWindow) return
+    const msg: HighlightMessage = {
+      type: CANOPY_PREVIEW_HIGHLIGHT,
+      enabled: Boolean(highlightEnabled),
+    }
+    iframeRef.current.contentWindow.postMessage(msg, '*')
+  }
+
+  // Keep refs pointing at the latest closures so the ready handler below never goes stale.
+  const postRef = useRef(post)
+  const postHighlightRef = useRef(postHighlight)
+  useEffect(() => {
+    postRef.current = post
+    postHighlightRef.current = postHighlight
+  })
+
+  useEffect(() => {
+    post()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- post is tracked via ref
+  }, [data, isLoading])
+
+  useEffect(() => {
+    postHighlight()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- postHighlight is tracked via ref
+  }, [highlightEnabled])
+
+  // When the preview page's React effects have run and its message listener is ready,
+  // it sends CANOPY_PREVIEW_READY. We respond with the current data so the preview
+  // receives the draft even if it wasn't ready when onLoad fired.
+  useEffect(() => {
+    const handleReady = (event: MessageEvent) => {
+      if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) return
+      if ((event.data as { type?: string })?.type === CANOPY_PREVIEW_READY) {
+        postRef.current()
+        postHighlightRef.current()
+        setSyncPending(false)
+      }
+    }
+    window.addEventListener('message', handleReady)
+    return () => window.removeEventListener('message', handleReady)
+  }, [])
+
+  return (
+    <div className={className} style={{ position: 'relative', overflow: 'hidden', ...style }}>
+      {syncPending && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 3,
+            zIndex: 1,
+            overflow: 'hidden',
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              height: '100%',
+              width: '40%',
+              background: 'var(--mantine-color-blue-filled, #228be6)',
+              borderRadius: '0 2px 2px 0',
+              animation: 'canopy-preview-sync 1.5s ease-in-out infinite',
+            }}
+          />
+        </div>
+      )}
+      <iframe
+        ref={iframeRef}
+        src={src}
+        style={{
+          display: 'block',
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          border: 'none',
+        }}
+        onLoad={() => {
+          post()
+          postHighlight()
+        }}
+      />
+    </div>
+  )
+}

package/src/editor/schema-editor/CollectionEditor.test.tsx

@@ -0,0 +1,238 @@
+// @vitest-environment jsdom
+import React from 'react'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { CollectionEditor, type ExistingCollection } from './CollectionEditor'
+import { CanopyCMSProvider } from '../theme'
+import { unsafeAsLogicalPath } from '../../paths/test-utils'
+
+// Setup browser APIs
+beforeAll(() => {
+  if (!window.matchMedia) {
+    window.matchMedia = ((query: string) =>
+      ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => {},
+        removeListener: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => false,
+      }) as MediaQueryList) as typeof window.matchMedia
+  }
+
+  if (!window.ResizeObserver) {
+    class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+    ;(window as unknown as { ResizeObserver: typeof ResizeObserver }).ResizeObserver =
+      ResizeObserver
+  }
+
+  // Mock scrollIntoView for Mantine Combobox
+  Element.prototype.scrollIntoView = vi.fn()
+})
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+})
+
+const renderCollectionEditor = (
+  props: Partial<React.ComponentProps<typeof CollectionEditor>> = {},
+) => {
+  const defaultProps: React.ComponentProps<typeof CollectionEditor> = {
+    isOpen: true,
+    editingCollection: null,
+    availableSchemas: ['postSchema', 'pageSchema', 'authorSchema'],
+    onSave: vi.fn(),
+    onClose: vi.fn(),
+    ...props,
+  }
+
+  return {
+    ...render(
+      <CanopyCMSProvider>
+        <CollectionEditor {...defaultProps} />
+      </CanopyCMSProvider>,
+    ),
+    props: defaultProps,
+  }
+}
+
+describe('CollectionEditor', () => {
+  describe('create mode', () => {
+    it('renders create modal with empty form', () => {
+      renderCollectionEditor()
+
+      // Title appears in both modal header and button - use getAllByText
+      const createCollectionTexts = screen.getAllByText('Create Collection')
+      expect(createCollectionTexts.length).toBeGreaterThan(0)
+      expect(screen.getByLabelText(/^Name/)).toBeTruthy()
+      expect(screen.getByLabelText(/^Label/)).toBeTruthy()
+      expect(screen.getByText(/No entry types defined/i)).toBeTruthy()
+    })
+
+    it('validates name is required', async () => {
+      const user = userEvent.setup()
+      const { props } = renderCollectionEditor()
+
+      // Try to save without name
+      await user.click(screen.getByRole('button', { name: /Create Collection/i }))
+
+      expect(screen.getByText(/Name is required/i)).toBeTruthy()
+      expect(props.onSave).not.toHaveBeenCalled()
+    })
+
+    it('validates name format', async () => {
+      const user = userEvent.setup()
+      const { props } = renderCollectionEditor()
+
+      await user.type(screen.getByLabelText(/^Name/), 'Invalid Name!')
+      await user.click(screen.getByRole('button', { name: /Create Collection/i }))
+
+      expect(screen.getByText(/must start with a letter/i)).toBeTruthy()
+      expect(props.onSave).not.toHaveBeenCalled()
+    })
+
+    it('validates at least one entry type is required', async () => {
+      const user = userEvent.setup()
+      const { props } = renderCollectionEditor()
+
+      await user.type(screen.getByLabelText(/^Name/), 'posts')
+      await user.click(screen.getByRole('button', { name: /Create Collection/i }))
+
+      expect(screen.getByText(/At least one entry type is required/i)).toBeTruthy()
+      expect(props.onSave).not.toHaveBeenCalled()
+    })
+
+    it('opens entry type editor when clicking add entry type', async () => {
+      const user = userEvent.setup()
+      renderCollectionEditor()
+
+      await user.click(screen.getByRole('button', { name: /Add Entry Type/i }))
+
+      // Entry type modal should appear - there are now multiple "Add Entry Type" texts
+      await waitFor(() => {
+        const elements = screen.getAllByText(/Add Entry Type/i)
+        expect(elements.length).toBeGreaterThan(1) // Title and button in nested modal
+      })
+    })
+
+    it('shows parent path when provided', () => {
+      renderCollectionEditor({ parentPath: unsafeAsLogicalPath('blog') })
+
+      expect(screen.getByText(/created inside/i)).toBeTruthy()
+      expect(screen.getByText('blog')).toBeTruthy()
+    })
+
+    it('closes modal on cancel', async () => {
+      const user = userEvent.setup()
+      const { props } = renderCollectionEditor()
+
+      await user.click(screen.getByRole('button', { name: /Cancel/i }))
+
+      expect(props.onClose).toHaveBeenCalled()
+    })
+  })
+
+  describe('edit mode', () => {
+    const existingCollection: ExistingCollection = {
+      name: 'posts',
+      label: 'Blog Posts',
+      logicalPath: unsafeAsLogicalPath('posts'),
+      entries: [
+        {
+          name: 'post',
+          label: 'Post',
+          format: 'mdx',
+          schema: 'postSchema',
+          default: true,
+        },
+        {
+          name: 'featured',
+          label: 'Featured',
+          format: 'json',
+          schema: 'postSchema',
+        },
+      ],
+    }
+
+    it('renders edit modal with existing data', () => {
+      renderCollectionEditor({ editingCollection: existingCollection })
+
+      expect(screen.getByText(/Edit Collection: posts/)).toBeTruthy()
+      const nameInput = screen.getByLabelText(/^Name/) as HTMLInputElement
+      expect(nameInput.value).toBe('posts')
+      expect(nameInput.disabled).toBe(false) // Name field is now editable (it's just metadata)
+      const labelInput = screen.getByLabelText(/^Label/) as HTMLInputElement
+      expect(labelInput.value).toBe('Blog Posts')
+    })
+
+    it('displays existing entry types', () => {
+      renderCollectionEditor({ editingCollection: existingCollection })
+
+      expect(screen.getByText('post')).toBeTruthy()
+      expect(screen.getByText('featured')).toBeTruthy()
+      expect(screen.getByText('Default')).toBeTruthy() // Default badge
+    })
+
+    it('only includes changed fields in update', async () => {
+      const user = userEvent.setup()
+      const { props } = renderCollectionEditor({
+        editingCollection: existingCollection,
+      })
+
+      // Change only the label
+      const labelInput = screen.getByLabelText(/^Label/)
+      await user.clear(labelInput)
+      await user.type(labelInput, 'Updated Posts')
+
+      await user.click(screen.getByRole('button', { name: /Save Changes/i }))
+
+      expect(props.onSave).toHaveBeenCalledWith({ label: 'Updated Posts' }, false)
+    })
+
+    it('shows entry type count', () => {
+      renderCollectionEditor({ editingCollection: existingCollection })
+
+      // Both entry types should be visible
+      expect(screen.getByText('post')).toBeTruthy()
+      expect(screen.getByText('featured')).toBeTruthy()
+    })
+
+    it('shows singleton badge for single entry collection', () => {
+      const singleEntryCollection: ExistingCollection = {
+        name: 'settings',
+        logicalPath: unsafeAsLogicalPath('settings'),
+        entries: [{ name: 'config', format: 'json', schema: 'postSchema', maxItems: 1 }],
+      }
+
+      renderCollectionEditor({ editingCollection: singleEntryCollection })
+
+      expect(screen.getByText('config')).toBeTruthy()
+      expect(screen.getByText('Singleton')).toBeTruthy()
+    })
+  })
+
+  describe('error handling', () => {
+    it('displays external error', () => {
+      renderCollectionEditor({ error: 'Collection already exists' })
+
+      expect(screen.getByText(/Collection already exists/)).toBeTruthy()
+    })
+
+    it('shows saving state', () => {
+      renderCollectionEditor({ isSaving: true })
+
+      const saveButton = screen.getByRole('button', {
+        name: /Create Collection/i,
+      })
+      expect(saveButton.getAttribute('data-loading')).toBe('true')
+    })
+  })
+})