canopycms 0.0.0 → 0.0.2

package/src/editor/components/EntryCreateModal.tsx

@@ -1,193 +0,0 @@
-'use client'
-
-/**
- * EntryCreateModal - Modal for creating new entries.
- *
- * Replaces window.prompt with a proper UI for:
- * - Selecting entry type (if multiple types available)
- * - Entering slug for new entry
- * - Validation and error handling
- */
-
-import { useState, useEffect } from 'react'
-import { Modal, Stack, TextInput, Group, Button, Alert, Text, Select } from '@mantine/core'
-import { IconAlertCircle } from '@tabler/icons-react'
-
-export interface EntryType {
-  name: string
-  label?: string
-  format: 'json' | 'md' | 'mdx'
-  default?: boolean
-  maxItems?: number
-}
-
-export interface EntryCreateModalProps {
-  /** Whether the modal is open */
-  isOpen: boolean
-  /** Collection name for display */
-  collectionLabel: string
-  /** Available entry types (if multiple, show selector) */
-  entryTypes: EntryType[]
-  /** Pre-selected entry type (if specified) */
-  selectedEntryTypeName?: string
-  /** Called when create is clicked */
-  onCreate: (slug: string, entryTypeName: string) => Promise<void>
-  /** Called when modal is closed */
-  onClose: () => void
-  /** Whether a create operation is in progress */
-  isCreating?: boolean
-  /** Error message to display */
-  error?: string | null
-}
-
-export function EntryCreateModal({
-  isOpen,
-  collectionLabel,
-  entryTypes,
-  selectedEntryTypeName,
-  onCreate,
-  onClose,
-  isCreating = false,
-  error = null,
-}: EntryCreateModalProps) {
-  // Helper to get default or first entry type
-  const getDefaultEntryTypeName = () => {
-    if (selectedEntryTypeName) return selectedEntryTypeName
-    if (entryTypes.length === 1) return entryTypes[0].name
-    // Find entry type marked as default
-    const defaultType = entryTypes.find((et) => et.default)
-    return defaultType?.name || entryTypes[0]?.name || ''
-  }
-
-  const [slug, setSlug] = useState('untitled')
-  const [entryTypeName, setEntryTypeName] = useState(getDefaultEntryTypeName())
-  const [validationError, setValidationError] = useState<string | null>(null)
-
-  // Reset state when modal opens
-  useEffect(() => {
-    if (isOpen) {
-      setSlug('untitled')
-      setEntryTypeName(getDefaultEntryTypeName())
-      setValidationError(null)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, selectedEntryTypeName, entryTypes])
-
-  // Validate slug format
-  const validateSlug = (value: string): string | null => {
-    if (!value.trim()) {
-      return 'Slug cannot be empty'
-    }
-    if (value.includes('/')) {
-      return 'Slug cannot contain slashes'
-    }
-    // Simple validation - lowercase, alphanumeric + hyphens
-    if (!/^[a-z0-9][-a-z0-9]*$/.test(value)) {
-      return 'Slug must start with letter/number and contain only lowercase letters, numbers, and hyphens'
-    }
-    if (value.length > 64) {
-      return 'Slug must be 64 characters or less'
-    }
-    return null
-  }
-
-  const handleSlugChange = (value: string) => {
-    setSlug(value)
-    setValidationError(validateSlug(value))
-  }
-
-  const handleCreate = async () => {
-    const validation = validateSlug(slug)
-    if (validation) {
-      setValidationError(validation)
-      return
-    }
-    if (!entryTypeName) {
-      setValidationError('Please select an entry type')
-      return
-    }
-    await onCreate(slug, entryTypeName)
-  }
-
-  const canCreate = !validationError && slug.trim() !== '' && entryTypeName !== '' && !isCreating
-
-  const selectedType = entryTypes.find((et) => et.name === entryTypeName)
-  const typeLabel = selectedType?.label || selectedType?.name || ''
-
-  return (
-    <Modal
-      opened={isOpen}
-      onClose={onClose}
-      title={<Text fw={600}>Create New Entry</Text>}
-      size="md"
-      closeOnClickOutside={!isCreating}
-      closeOnEscape={!isCreating}
-    >
-      <Stack gap="md" data-testid="create-entry-modal">
-        {error && (
-          <Alert icon={<IconAlertCircle size={16} />} color="red" variant="light">
-            {error}
-          </Alert>
-        )}
-
-        <Text size="sm" c="dimmed">
-          Creating in: {collectionLabel}
-        </Text>
-
-        {entryTypes.length > 1 && (
-          <Select
-            label="Entry Type"
-            description="Select the type of entry to create"
-            value={entryTypeName}
-            onChange={(value) => setEntryTypeName(value || '')}
-            data={entryTypes.map((et) => ({
-              value: et.name,
-              label: et.label || et.name,
-            }))}
-            required
-            disabled={isCreating}
-            searchable
-            placeholder="Select entry type..."
-          />
-        )}
-
-        {entryTypes.length === 1 && (
-          <Text size="sm" c="dimmed">
-            Entry type: <strong>{typeLabel}</strong>
-          </Text>
-        )}
-
-        <TextInput
-          label="Slug"
-          description="URL-friendly identifier (lowercase, alphanumeric + hyphens)"
-          value={slug}
-          onChange={(e) => handleSlugChange(e.currentTarget.value)}
-          error={validationError}
-          placeholder="my-entry-slug"
-          required
-          disabled={isCreating}
-          data-autofocus
-          data-testid="entry-slug-input"
-        />
-
-        <Text size="xs" c="dimmed">
-          Preview: <code>{slug}</code>
-        </Text>
-
-        <Group justify="flex-end" gap="sm">
-          <Button variant="subtle" onClick={onClose} disabled={isCreating}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleCreate}
-            loading={isCreating}
-            disabled={!canCreate}
-            data-testid="create-entry-submit"
-          >
-            Create
-          </Button>
-        </Group>
-      </Stack>
-    </Modal>
-  )
-}

package/src/editor/components/RenameEntryModal.tsx

@@ -1,152 +0,0 @@
-'use client'
-
-/**
- * RenameEntryModal - Modal for renaming entry slugs.
- *
- * Allows changing the slug (middle segment) of an entry filename.
- * The content ID is preserved, so drafts and references remain intact.
- */
-
-import { useState } from 'react'
-import { Modal, Stack, TextInput, Group, Button, Alert, Text } from '@mantine/core'
-import { IconAlertCircle } from '@tabler/icons-react'
-
-export interface RenameEntryModalProps {
-  /** Whether the modal is open */
-  isOpen: boolean
-  /** Current entry label for display */
-  entryLabel: string
-  /** Current slug value */
-  currentSlug: string
-  /** Called when save is clicked */
-  onSave: (newSlug: string) => Promise<void>
-  /** Called when modal is closed */
-  onClose: () => void
-  /** Whether a save operation is in progress */
-  isSaving?: boolean
-  /** Error message to display */
-  error?: string | null
-}
-
-export function RenameEntryModal({
-  isOpen,
-  entryLabel,
-  currentSlug,
-  onSave,
-  onClose,
-  isSaving = false,
-  error = null,
-}: RenameEntryModalProps) {
-  const [newSlug, setNewSlug] = useState(currentSlug)
-  const [validationError, setValidationError] = useState<string | null>(null)
-
-  // Reset state when modal opens (adjust state during render instead of effect)
-  const [prevIsOpen, setPrevIsOpen] = useState(isOpen)
-  const [prevSlug, setPrevSlug] = useState(currentSlug)
-  if (isOpen !== prevIsOpen || currentSlug !== prevSlug) {
-    setPrevIsOpen(isOpen)
-    setPrevSlug(currentSlug)
-    if (isOpen) {
-      setNewSlug(currentSlug)
-      setValidationError(null)
-    }
-  }
-
-  // Validate slug format
-  const validateSlug = (slug: string): string | null => {
-    if (!slug.trim()) {
-      return 'Slug cannot be empty'
-    }
-    if (slug.includes('/')) {
-      return 'Slug cannot contain slashes'
-    }
-    // Simple validation - lowercase, alphanumeric + hyphens
-    if (!/^[a-z0-9][-a-z0-9]*$/.test(slug)) {
-      return 'Slug must start with letter/number and contain only lowercase letters, numbers, and hyphens'
-    }
-    if (slug.length > 64) {
-      return 'Slug must be 64 characters or less'
-    }
-    return null
-  }
-
-  const handleSlugChange = (value: string) => {
-    setNewSlug(value)
-    setValidationError(validateSlug(value))
-  }
-
-  const handleSave = async () => {
-    const validation = validateSlug(newSlug)
-    if (validation) {
-      setValidationError(validation)
-      return
-    }
-    if (newSlug === currentSlug) {
-      onClose()
-      return
-    }
-    await onSave(newSlug)
-  }
-
-  const canSave = !validationError && newSlug.trim() !== '' && newSlug !== currentSlug && !isSaving
-
-  return (
-    <Modal
-      opened={isOpen}
-      onClose={onClose}
-      title={<Text fw={600}>Rename Entry</Text>}
-      size="md"
-      closeOnClickOutside={!isSaving}
-      closeOnEscape={!isSaving}
-    >
-      <Stack gap="md" data-testid="rename-entry-modal">
-        {error && (
-          <Alert icon={<IconAlertCircle size={16} />} color="red" variant="light">
-            {error}
-          </Alert>
-        )}
-
-        <Text size="sm" c="dimmed">
-          Renaming &quot;{entryLabel}&quot;
-        </Text>
-
-        <TextInput
-          label="Slug"
-          description="URL-friendly identifier (lowercase, alphanumeric + hyphens)"
-          value={newSlug}
-          onChange={(e) => handleSlugChange(e.currentTarget.value)}
-          error={validationError}
-          placeholder="my-entry-slug"
-          required
-          disabled={isSaving}
-          data-autofocus
-          data-testid="rename-slug-input"
-        />
-
-        <Text size="xs" c="dimmed">
-          Current: <code>{currentSlug}</code>
-          {newSlug !== currentSlug && (
-            <>
-              {' → '}
-              New: <code>{newSlug}</code>
-            </>
-          )}
-        </Text>
-
-        <Group justify="flex-end" gap="sm">
-          <Button variant="subtle" onClick={onClose} disabled={isSaving}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSave}
-            loading={isSaving}
-            disabled={!canSave}
-            data-testid="rename-entry-submit"
-          >
-            Rename
-          </Button>
-        </Group>
-      </Stack>
-    </Modal>
-  )
-}

package/src/editor/components/UserBadge.test.tsx

@@ -1,274 +0,0 @@
-import { describe, it, expect, vi, beforeAll, afterEach } from 'vitest'
-import { render, screen, waitFor, cleanup } from '@testing-library/react'
-import { MantineProvider } from '@mantine/core'
-import { UserBadge } from './UserBadge'
-import type { UserSearchResult } from '../../auth/types'
-
-// Setup for Mantine components
-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 as typeof ResizeObserver
-  }
-})
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-)
-
-describe('UserBadge', () => {
-  afterEach(() => {
-    cleanup()
-  })
-
-  const mockUser: UserSearchResult = {
-    id: 'user-1',
-    name: 'Alice Johnson',
-    email: 'alice@example.com',
-    avatarUrl: 'https://example.com/avatar.jpg',
-  }
-
-  const mockGetUserMetadata = vi.fn(async (userId: string): Promise<UserSearchResult | null> => {
-    if (userId === 'user-1') return mockUser
-    if (userId === 'anonymous') {
-      return { id: 'anonymous', name: 'Anonymous', email: 'public' }
-    }
-    return null
-  })
-
-  it('renders avatar + name in avatar-name mode', async () => {
-    render(
-      <UserBadge userId="user-1" getUserMetadata={mockGetUserMetadata} variant="avatar-name" />,
-      { wrapper: Wrapper },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice Johnson')).toBeTruthy()
-    })
-  })
-
-  it('renders avatar only in avatar-only mode', async () => {
-    const { container } = render(
-      <UserBadge userId="user-1" getUserMetadata={mockGetUserMetadata} variant="avatar-only" />,
-      { wrapper: Wrapper },
-    )
-
-    // Wait for loading to complete
-    await waitFor(() => {
-      const skeletons = container.querySelectorAll('[class*="Skeleton"]')
-      expect(skeletons.length).toBe(0)
-    })
-
-    // Should have avatar but no name text in the container
-    const text = container.textContent || ''
-    expect(text).not.toContain('Alice Johnson')
-  })
-
-  it('renders full info in full mode', async () => {
-    render(<UserBadge userId="user-1" getUserMetadata={mockGetUserMetadata} variant="full" />, {
-      wrapper: Wrapper,
-    })
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice Johnson')).toBeTruthy()
-      expect(screen.getByText('alice@example.com')).toBeTruthy()
-    })
-  })
-
-  it('handles anonymous user with special styling', async () => {
-    render(
-      <UserBadge userId="anonymous" getUserMetadata={mockGetUserMetadata} variant="avatar-name" />,
-      { wrapper: Wrapper },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('Anonymous (Public)')).toBeTruthy()
-    })
-  })
-
-  it('shows loading skeleton while fetching', () => {
-    const slowGetUserMetadata = vi.fn(
-      () => new Promise<UserSearchResult>((resolve) => setTimeout(() => resolve(mockUser), 100)),
-    )
-
-    const { container } = render(
-      <UserBadge userId="user-1" getUserMetadata={slowGetUserMetadata} variant="avatar-name" />,
-      { wrapper: Wrapper },
-    )
-
-    // Should show skeleton initially
-    const skeletons = container.querySelectorAll('[class*="Skeleton"]')
-    expect(skeletons.length).toBeGreaterThan(0)
-  })
-
-  it('falls back to userId on error', async () => {
-    const errorGetUserMetadata = vi.fn(async () => {
-      throw new Error('Network error')
-    })
-
-    render(
-      <UserBadge userId="user-1" getUserMetadata={errorGetUserMetadata} variant="avatar-name" />,
-      { wrapper: Wrapper },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('user-1')).toBeTruthy()
-    })
-  })
-
-  it('falls back to userId when user not found', async () => {
-    const notFoundGetUserMetadata = vi.fn(async () => null)
-
-    render(
-      <UserBadge userId="user-1" getUserMetadata={notFoundGetUserMetadata} variant="avatar-name" />,
-      { wrapper: Wrapper },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('user-1')).toBeTruthy()
-    })
-  })
-
-  it('uses cached user when provided (no API call)', async () => {
-    const cachedGetUserMetadata = vi.fn(async () => mockUser)
-
-    render(
-      <UserBadge
-        userId="user-1"
-        getUserMetadata={cachedGetUserMetadata}
-        variant="avatar-name"
-        cachedUser={mockUser}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice Johnson')).toBeTruthy()
-    })
-
-    // Should not call getUserMetadata when cachedUser is provided
-    expect(cachedGetUserMetadata).not.toHaveBeenCalled()
-  })
-
-  it('renders removal button when onRemove provided', async () => {
-    const onRemove = vi.fn()
-
-    const { container } = render(
-      <UserBadge
-        userId="user-1"
-        getUserMetadata={mockGetUserMetadata}
-        variant="avatar-name"
-        onRemove={onRemove}
-        cachedUser={mockUser}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    await waitFor(() => {
-      // Should render as Badge with removal button
-      const badges = container.querySelectorAll('[class*="Badge"]')
-      expect(badges.length).toBeGreaterThan(0)
-    })
-  })
-
-  it('generates correct initials for single word name', async () => {
-    const singleNameUser = {
-      id: 'user-2',
-      name: 'John',
-      email: 'john@example.com',
-    }
-
-    render(
-      <UserBadge
-        userId="user-2"
-        getUserMetadata={vi.fn()}
-        variant="avatar-name"
-        cachedUser={singleNameUser}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('John')).toBeTruthy()
-      // Avatar should contain 'J' initial (checking text content of Avatar)
-      const avatars = screen.getAllByText('J')
-      expect(avatars.length).toBeGreaterThan(0)
-    })
-  })
-
-  it('generates correct initials for multi-word name', async () => {
-    const multiNameUser = {
-      id: 'user-3',
-      name: 'John Doe Smith',
-      email: 'john@example.com',
-    }
-
-    render(
-      <UserBadge
-        userId="user-3"
-        getUserMetadata={vi.fn()}
-        variant="avatar-name"
-        cachedUser={multiNameUser}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    await waitFor(() => {
-      expect(screen.getByText('John Doe Smith')).toBeTruthy()
-      // Avatar should contain 'JS' initials (first + last)
-      const avatars = screen.getAllByText('JS')
-      expect(avatars.length).toBeGreaterThan(0)
-    })
-  })
-
-  it('respects size prop', async () => {
-    const { container } = render(
-      <UserBadge
-        userId="user-1"
-        getUserMetadata={vi.fn()}
-        variant="avatar-name"
-        size="lg"
-        cachedUser={mockUser}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Avatar size should be different based on size prop
-    const avatar = container.querySelector('[class*="Avatar"]')
-    expect(avatar).toBeTruthy()
-  })
-
-  it('hides email tooltip when showEmailTooltip is false', async () => {
-    render(
-      <UserBadge
-        userId="user-1"
-        getUserMetadata={vi.fn()}
-        variant="avatar-name"
-        showEmailTooltip={false}
-        cachedUser={mockUser}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Should render without tooltip wrapper
-    expect(screen.getByText('Alice Johnson')).toBeTruthy()
-  })
-})