canopycms 0.0.0 → 0.0.2

package/src/editor/preview-bridge.tsx

@@ -1,294 +0,0 @@
-'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

@@ -1,238 +0,0 @@
-// @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')
-    })
-  })
-})