canopycms 0.0.0

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

@@ -0,0 +1,215 @@
+// @vitest-environment jsdom
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { EntryTypeEditor } from './EntryTypeEditor'
+import { CanopyCMSProvider } from '../theme'
+
+// 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 renderEntryTypeEditor = (
+  props: Partial<React.ComponentProps<typeof EntryTypeEditor>> = {},
+) => {
+  const defaultProps: React.ComponentProps<typeof EntryTypeEditor> = {
+    isOpen: true,
+    editingEntryType: null,
+    availableSchemas: ['postSchema', 'pageSchema', 'authorSchema'],
+    onSave: vi.fn(),
+    onClose: vi.fn(),
+    ...props,
+  }
+
+  return {
+    ...render(
+      <CanopyCMSProvider>
+        <EntryTypeEditor {...defaultProps} />
+      </CanopyCMSProvider>,
+    ),
+    props: defaultProps,
+  }
+}
+
+describe('EntryTypeEditor', () => {
+  describe('create mode', () => {
+    it('renders create modal with empty form', () => {
+      renderEntryTypeEditor()
+
+      // Use getAllByText since "Add Entry Type" appears in both title and button
+      const addEntryTypeElements = screen.getAllByText('Add Entry Type')
+      expect(addEntryTypeElements.length).toBeGreaterThan(0)
+      expect(screen.getByLabelText(/^Name/)).toBeTruthy()
+      expect(screen.getByLabelText(/^Label/)).toBeTruthy()
+    })
+
+    it('validates name is required', async () => {
+      const user = userEvent.setup()
+      const { props } = renderEntryTypeEditor()
+
+      // Click the submit button (use getAllBy since title and button have same text)
+      const buttons = screen.getAllByRole('button', { name: /Add Entry Type/i })
+      await user.click(buttons[0])
+
+      expect(screen.getByText(/Name is required/i)).toBeTruthy()
+      expect(props.onSave).not.toHaveBeenCalled()
+    })
+
+    it('validates name format', async () => {
+      const user = userEvent.setup()
+      const { props } = renderEntryTypeEditor()
+
+      await user.type(screen.getByLabelText(/^Name/), 'Invalid Name!')
+      const buttons = screen.getAllByRole('button', { name: /Add Entry Type/i })
+      await user.click(buttons[0])
+
+      expect(screen.getByText(/must start with a letter/i)).toBeTruthy()
+      expect(props.onSave).not.toHaveBeenCalled()
+    })
+
+    it('closes modal on cancel', async () => {
+      const user = userEvent.setup()
+      const { props } = renderEntryTypeEditor()
+
+      await user.click(screen.getByRole('button', { name: /Cancel/i }))
+
+      expect(props.onClose).toHaveBeenCalled()
+    })
+
+    it('validates against duplicate entry type names', async () => {
+      const user = userEvent.setup()
+      const { props } = renderEntryTypeEditor({
+        existingEntryTypeNames: ['post', 'page', 'article'],
+      })
+
+      await user.type(screen.getByLabelText(/^Name/), 'post') // Duplicate name
+      const buttons = screen.getAllByRole('button', { name: /Add Entry Type/i })
+      await user.click(buttons[0])
+
+      expect(screen.getByText(/already exists in this collection/i)).toBeTruthy()
+      expect(props.onSave).not.toHaveBeenCalled()
+    })
+
+    it('allows name that does not duplicate existing entry types', async () => {
+      const user = userEvent.setup()
+      const { props } = renderEntryTypeEditor({
+        existingEntryTypeNames: ['post', 'page'],
+      })
+
+      await user.type(screen.getByLabelText(/^Name/), 'article') // Not a duplicate
+      const buttons = screen.getAllByRole('button', { name: /Add Entry Type/i })
+      await user.click(buttons[0])
+
+      expect(props.onSave).toHaveBeenCalled()
+    })
+  })
+
+  describe('edit mode', () => {
+    const existingEntryType = {
+      name: 'post',
+      label: 'Blog Post',
+      format: 'mdx' as const,
+      schema: 'postSchema',
+      default: true,
+      maxItems: 10,
+    }
+
+    it('renders edit modal with existing data', () => {
+      renderEntryTypeEditor({ editingEntryType: existingEntryType })
+
+      expect(screen.getByText(/Edit Entry Type: post/)).toBeTruthy()
+      const nameInput = screen.getByLabelText(/^Name/) as HTMLInputElement
+      expect(nameInput.value).toBe('post')
+      expect(nameInput.disabled).toBe(true)
+      const labelInput = screen.getByLabelText(/^Label/) as HTMLInputElement
+      expect(labelInput.value).toBe('Blog Post')
+    })
+
+    it('only includes changed fields in update', async () => {
+      const user = userEvent.setup()
+      const { props } = renderEntryTypeEditor({
+        editingEntryType: existingEntryType,
+      })
+
+      // Change only the label
+      const labelInput = screen.getByLabelText(/^Label/)
+      await user.clear(labelInput)
+      await user.type(labelInput, 'Updated Post')
+
+      await user.click(screen.getByRole('button', { name: /Save Changes/i }))
+
+      expect(props.onSave).toHaveBeenCalledWith({ label: 'Updated Post' }, false)
+    })
+  })
+
+  describe('error handling', () => {
+    it('displays external error', () => {
+      renderEntryTypeEditor({ error: 'Entry type already exists' })
+
+      expect(screen.getByText(/Entry type already exists/)).toBeTruthy()
+    })
+
+    it('shows saving state', () => {
+      renderEntryTypeEditor({ isSaving: true })
+
+      const saveButtons = screen.getAllByRole('button', {
+        name: /Add Entry Type/i,
+      })
+      expect(saveButtons[0].getAttribute('data-loading')).toBe('true')
+    })
+  })
+
+  describe('form defaults', () => {
+    it('uses first available schema as default', () => {
+      renderEntryTypeEditor({ availableSchemas: ['mySchema', 'otherSchema'] })
+
+      // The schema input should have the first schema pre-selected
+      const schemaInput = screen.getByRole('textbox', {
+        name: /Schema/,
+      }) as HTMLInputElement
+      expect(schemaInput.value).toBe('mySchema')
+    })
+
+    it('defaults format to json', () => {
+      renderEntryTypeEditor()
+
+      // Format select should show JSON as selected
+      const formatInput = screen.getByRole('textbox', {
+        name: /Format/,
+      }) as HTMLInputElement
+      expect(formatInput.value).toBe('JSON')
+    })
+  })
+})

package/src/editor/schema-editor/EntryTypeEditor.tsx

@@ -0,0 +1,367 @@
+'use client'
+
+/**
+ * EntryTypeEditor - Modal for creating/editing entry types within a collection.
+ *
+ * Entry types define the structure of content items:
+ * - name: Machine-readable identifier (e.g., "post", "page")
+ * - label: Human-readable display name
+ * - format: Content format (md, mdx, json)
+ * - fields: Schema registry key for field definitions
+ * - default: Whether this is the default type for new items
+ * - maxItems: Optional limit on number of items (1 = singleton-like)
+ */
+
+import { useState, useCallback, useEffect } from 'react'
+import {
+  Modal,
+  Stack,
+  TextInput,
+  Select,
+  Switch,
+  NumberInput,
+  Group,
+  Button,
+  Text,
+  Alert,
+  Tooltip,
+} from '@mantine/core'
+import { IconAlertCircle, IconLock } from '@tabler/icons-react'
+
+import type { ContentFormat } from '../../config'
+import type { CreateEntryTypeInput, UpdateEntryTypeInput } from '../../schema/schema-store-types'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface EntryTypeFormData {
+  name: string
+  label: string
+  format: ContentFormat
+  schema: string
+  default: boolean
+  maxItems: number | undefined
+}
+
+export interface EntryTypeEditorProps {
+  /** Whether the modal is open */
+  isOpen: boolean
+  /** Entry type being edited (null for create mode) */
+  editingEntryType: {
+    name: string
+    label?: string
+    format: ContentFormat
+    schema: string
+    default?: boolean
+    maxItems?: number
+    usageCount?: number
+  } | null
+  /** Available schema keys from the registry */
+  availableSchemas: string[]
+  /** Existing entry type names in the collection (for duplicate validation) */
+  existingEntryTypeNames?: string[]
+  /** Called when save is clicked */
+  onSave: (data: CreateEntryTypeInput | UpdateEntryTypeInput, isNew: boolean) => void
+  /** Called when modal is closed */
+  onClose: () => void
+  /** Whether a save operation is in progress */
+  isSaving?: boolean
+  /** Error message to display */
+  error?: string | null
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const FORMAT_OPTIONS: { value: ContentFormat; label: string }[] = [
+  { value: 'json', label: 'JSON' },
+  { value: 'md', label: 'Markdown' },
+  { value: 'mdx', label: 'MDX' },
+]
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function EntryTypeEditor({
+  isOpen,
+  editingEntryType,
+  availableSchemas,
+  existingEntryTypeNames = [],
+  onSave,
+  onClose,
+  isSaving = false,
+  error = null,
+}: EntryTypeEditorProps) {
+  const isEditMode = editingEntryType !== null
+  const usageCount = editingEntryType?.usageCount ?? 0
+  const isLocked = isEditMode && usageCount > 0
+
+  // Form state
+  const [formData, setFormData] = useState<EntryTypeFormData>({
+    name: '',
+    label: '',
+    format: 'json',
+    schema: '',
+    default: false,
+    maxItems: undefined,
+  })
+
+  // Local validation error
+  const [validationError, setValidationError] = useState<string | null>(null)
+
+  // Reset form when modal opens or editing item changes
+  /* eslint-disable react-hooks/set-state-in-effect -- intentional: sync form state from props on open */
+  useEffect(() => {
+    if (isOpen) {
+      if (editingEntryType) {
+        setFormData({
+          name: editingEntryType.name,
+          label: editingEntryType.label || '',
+          format: editingEntryType.format,
+          schema: editingEntryType.schema,
+          default: editingEntryType.default || false,
+          maxItems: editingEntryType.maxItems,
+        })
+      } else {
+        setFormData({
+          name: '',
+          label: '',
+          format: 'json',
+          schema: availableSchemas[0] || '',
+          default: false,
+          maxItems: undefined,
+        })
+      }
+      setValidationError(null)
+    }
+  }, [isOpen, editingEntryType, availableSchemas])
+  /* eslint-enable react-hooks/set-state-in-effect */
+
+  // Update a form field
+  const updateField = useCallback(
+    <K extends keyof EntryTypeFormData>(field: K, value: EntryTypeFormData[K]) => {
+      setFormData((prev) => ({ ...prev, [field]: value }))
+      setValidationError(null)
+    },
+    [],
+  )
+
+  // Validate form
+  const validate = useCallback((): boolean => {
+    if (!isEditMode && !formData.name.trim()) {
+      setValidationError('Name is required')
+      return false
+    }
+    if (!isEditMode && !/^[a-z][a-z0-9-]*$/.test(formData.name)) {
+      setValidationError(
+        'Name must start with a letter and contain only lowercase letters, numbers, and hyphens',
+      )
+      return false
+    }
+    if (formData.name.length > 64) {
+      setValidationError('Name must be 64 characters or less')
+      return false
+    }
+    // Check for duplicate names (only in create mode)
+    if (!isEditMode && existingEntryTypeNames.includes(formData.name.trim())) {
+      setValidationError('Entry type with this name already exists in this collection')
+      return false
+    }
+    if (!formData.schema) {
+      setValidationError('Schema is required')
+      return false
+    }
+    return true
+  }, [formData, isEditMode, existingEntryTypeNames])
+
+  // Handle save
+  const handleSave = useCallback(() => {
+    if (!validate()) return
+
+    if (isEditMode) {
+      // Only include changed fields for update
+      const updates: UpdateEntryTypeInput = {}
+      if (formData.label !== (editingEntryType?.label || '')) {
+        updates.label = formData.label || undefined
+      }
+      if (formData.format !== editingEntryType?.format) {
+        updates.format = formData.format
+      }
+      if (formData.schema !== editingEntryType?.schema) {
+        updates.schema = formData.schema
+      }
+      if (formData.default !== (editingEntryType?.default || false)) {
+        updates.default = formData.default
+      }
+      if (formData.maxItems !== editingEntryType?.maxItems) {
+        updates.maxItems = formData.maxItems
+      }
+      onSave(updates, false)
+    } else {
+      // Create new entry type
+      const createData: CreateEntryTypeInput = {
+        name: formData.name.trim(),
+        format: formData.format,
+        schema: formData.schema,
+      }
+      if (formData.label.trim()) {
+        createData.label = formData.label.trim()
+      }
+      if (formData.default) {
+        createData.default = true
+      }
+      if (formData.maxItems !== undefined) {
+        createData.maxItems = formData.maxItems
+      }
+      onSave(createData, true)
+    }
+  }, [formData, isEditMode, editingEntryType, validate, onSave])
+
+  // Schema options for select
+  const schemaOptions = availableSchemas.map((key) => ({
+    value: key,
+    label: key,
+  }))
+
+  const displayError = error || validationError
+
+  return (
+    <Modal
+      opened={isOpen}
+      onClose={onClose}
+      title={isEditMode ? `Edit Entry Type: ${editingEntryType?.name}` : 'Add Entry Type'}
+      size="md"
+    >
+      <Stack gap="md">
+        {displayError && (
+          <Alert
+            icon={<IconAlertCircle size={16} />}
+            color="red"
+            title="Error"
+            withCloseButton
+            onClose={() => setValidationError(null)}
+          >
+            {displayError}
+          </Alert>
+        )}
+
+        {/* Name - only editable in create mode */}
+        <TextInput
+          label="Name"
+          description="Machine-readable identifier (e.g., post, page, article)"
+          placeholder="post"
+          value={formData.name}
+          onChange={(e) => updateField('name', e.target.value)}
+          disabled={isEditMode}
+          required={!isEditMode}
+        />
+
+        {/* Label */}
+        <TextInput
+          label="Label"
+          description="Human-readable display name"
+          placeholder="Blog Post"
+          value={formData.label}
+          onChange={(e) => updateField('label', e.target.value)}
+        />
+
+        {/* Format */}
+        <Tooltip
+          label={
+            isLocked
+              ? `Cannot change format: ${usageCount} ${usageCount === 1 ? 'entry' : 'entries'} use this type`
+              : ''
+          }
+          disabled={!isLocked}
+          withinPortal
+        >
+          <Select
+            label="Format"
+            description={
+              isLocked
+                ? `Locked (${usageCount} ${usageCount === 1 ? 'entry' : 'entries'} exist)`
+                : 'Content file format'
+            }
+            data={FORMAT_OPTIONS}
+            value={formData.format}
+            onChange={(value) => value && updateField('format', value as ContentFormat)}
+            allowDeselect={false}
+            disabled={isLocked}
+            rightSection={isLocked ? <IconLock size={14} /> : undefined}
+          />
+        </Tooltip>
+
+        {/* Schema */}
+        <Tooltip
+          label={
+            isLocked
+              ? `Cannot change schema: ${usageCount} ${usageCount === 1 ? 'entry' : 'entries'} use this type`
+              : ''
+          }
+          disabled={!isLocked}
+          withinPortal
+        >
+          <Select
+            label="Schema"
+            description={
+              isLocked
+                ? `Locked (${usageCount} ${usageCount === 1 ? 'entry' : 'entries'} exist)`
+                : 'Field definitions for this entry type'
+            }
+            data={schemaOptions}
+            value={formData.schema}
+            onChange={(value) => value && updateField('schema', value)}
+            searchable
+            required
+            placeholder="Select a schema"
+            disabled={isLocked}
+            rightSection={isLocked ? <IconLock size={14} /> : undefined}
+          />
+        </Tooltip>
+
+        {/* Default toggle */}
+        <Switch
+          label="Default entry type"
+          description="Use this type when adding new items to the collection"
+          checked={formData.default}
+          onChange={(e) => updateField('default', e.currentTarget.checked)}
+        />
+
+        {/* Max items */}
+        <NumberInput
+          label="Max Items"
+          description="Limit number of items (leave empty for unlimited, use 1 for singleton-like behavior)"
+          placeholder="Unlimited"
+          value={formData.maxItems ?? ''}
+          onChange={(value) =>
+            updateField('maxItems', typeof value === 'number' ? value : undefined)
+          }
+          min={1}
+          allowNegative={false}
+          allowDecimal={false}
+        />
+
+        {formData.maxItems === 1 && (
+          <Text size="xs" c="dimmed">
+            With maxItems=1, this entry type behaves like a singleton (e.g., homepage, settings)
+          </Text>
+        )}
+
+        {/* Actions */}
+        <Group justify="flex-end" gap="sm" mt="md">
+          <Button variant="subtle" onClick={onClose} disabled={isSaving}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} loading={isSaving}>
+            {isEditMode ? 'Save Changes' : 'Add Entry Type'}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  )
+}
+
+export default EntryTypeEditor

package/src/editor/schema-editor/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Schema Editor Components
+ *
+ * UI components for managing collection structure:
+ * - CollectionEditor: Create/edit collections and their entry types
+ * - EntryTypeEditor: Create/edit individual entry types
+ */
+
+export {
+  CollectionEditor,
+  type CollectionEditorProps,
+  type ExistingCollection,
+  type ExistingEntryType,
+} from './CollectionEditor'
+export {
+  EntryTypeEditor,
+  type EntryTypeEditorProps,
+  type EntryTypeFormData,
+} from './EntryTypeEditor'

package/src/editor/setup-test-dom.ts

@@ -0,0 +1,10 @@
+// Minimal DOM shims for Mantine in tests
+if (typeof window !== 'undefined' && !('matchMedia' in window)) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.matchMedia = () => ({
+    matches: false,
+    addListener: () => {},
+    removeListener: () => {},
+  })
+}

package/src/editor/test-setup.ts

@@ -0,0 +1,33 @@
+/**
+ * Vitest setup file for editor tests running in jsdom environment.
+ * This runs BEFORE test modules are loaded, providing browser APIs
+ * that Mantine requires at module initialization time.
+ */
+
+if (typeof window !== 'undefined') {
+  // Mantine uses matchMedia for color scheme detection at module load time
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  })
+
+  // ResizeObserver is used by various Mantine components
+  if (!window.ResizeObserver) {
+    class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+    ;(window as unknown as { ResizeObserver: typeof ResizeObserver }).ResizeObserver =
+      ResizeObserver
+  }
+}