canopycms 0.0.0

package/src/editor/components/EntryCreateModal.tsx

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

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

@@ -0,0 +1,274 @@
+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()
+  })
+})