canopycms 0.0.0 → 0.0.2

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

@@ -1,215 +0,0 @@
-// @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

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

@@ -1,19 +0,0 @@
-/**
- * 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

@@ -1,10 +0,0 @@
-// 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

@@ -1,33 +0,0 @@
-/**
- * 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
-  }
-}