canopycms 0.0.0 → 0.0.2

package/src/editor/hooks/useDraftManager.test.ts

@@ -1,375 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { useDraftManager } from './useDraftManager'
-import type { EditorEntry } from '../Editor'
-import { unsafeAsLogicalPath, unsafeAsContentId } from '../../paths/test-utils'
-
-// Mock notifications
-vi.mock('@mantine/notifications', () => ({
-  notifications: {
-    show: vi.fn(),
-  },
-}))
-
-describe('useDraftManager', () => {
-  const mockEntry: EditorEntry = {
-    path: unsafeAsLogicalPath('entry1'),
-    contentId: unsafeAsContentId('abc123def456'), // 12-char content ID
-    label: 'Test Entry',
-    collectionPath: unsafeAsLogicalPath('posts'),
-    collectionName: 'posts',
-    slug: 'test',
-    type: 'entry',
-    apiPath: '/api/canopycms/main/content/posts/test',
-    format: 'mdx',
-    schema: [],
-  }
-
-  const mockLoadEntry = vi.fn()
-  const mockSaveEntry = vi.fn()
-  const mockSetBusy = vi.fn()
-
-  const defaultOptions = {
-    branchName: 'main',
-    selectedPath: 'entry1',
-    currentEntry: mockEntry,
-    entries: [mockEntry],
-    loadEntry: mockLoadEntry,
-    saveEntry: mockSaveEntry,
-    setBusy: mockSetBusy,
-  }
-
-  beforeEach(() => {
-    // Mock localStorage
-    const localStorageMock = (() => {
-      let store: Record<string, string> = {}
-      return {
-        getItem: (key: string) => store[key] || null,
-        setItem: (key: string, value: string) => {
-          store[key] = value
-        },
-        removeItem: (key: string) => {
-          delete store[key]
-        },
-        clear: () => {
-          store = {}
-        },
-      }
-    })()
-    Object.defineProperty(window, 'localStorage', {
-      value: localStorageMock,
-      writable: true,
-    })
-
-    mockLoadEntry.mockResolvedValue({
-      title: 'Loaded Title',
-      body: 'Loaded Content',
-    })
-    mockSaveEntry.mockResolvedValue({
-      title: 'Saved Title',
-      body: 'Saved Content',
-    })
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    window.localStorage.clear()
-  })
-
-  it('initializes with empty drafts', () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    expect(result.current.drafts).toEqual({})
-    expect(result.current.loadedValues).toEqual({})
-    expect(result.current.modifiedCount).toBe(0)
-    expect(result.current.editedFiles).toEqual([])
-  })
-
-  it('initializes with initialValues', () => {
-    const initialValues = {
-      abc123def456: { title: 'Initial', body: 'Content' },
-    }
-    const { result } = renderHook(() => useDraftManager({ ...defaultOptions, initialValues }))
-
-    expect(result.current.drafts).toEqual(initialValues)
-  })
-
-  it('computes selectedValue and effectiveValue', () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    act(() => {
-      result.current.setDrafts({
-        abc123def456: { title: 'Draft', body: 'Draft Content' },
-      })
-    })
-
-    expect(result.current.selectedValue).toEqual({
-      title: 'Draft',
-      body: 'Draft Content',
-    })
-    expect(result.current.effectiveValue).toEqual({
-      title: 'Draft',
-      body: 'Draft Content',
-    })
-  })
-
-  it('falls back to loadedValue when no draft exists', () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    act(() => {
-      result.current.setLoadedValues({
-        abc123def456: { title: 'Loaded', body: 'Loaded Content' },
-      })
-    })
-
-    expect(result.current.selectedValue).toBeUndefined()
-    expect(result.current.loadedValue).toEqual({
-      title: 'Loaded',
-      body: 'Loaded Content',
-    })
-    expect(result.current.effectiveValue).toEqual({
-      title: 'Loaded',
-      body: 'Loaded Content',
-    })
-  })
-
-  it('computes modifiedCount correctly', () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    expect(result.current.modifiedCount).toBe(0)
-
-    act(() => {
-      result.current.setDrafts({
-        abc123def456: { title: 'Draft 1' },
-        xyz789uvw123: { title: 'Draft 2' },
-        mno456pqr789: { title: 'Draft 3' },
-      })
-    })
-
-    expect(result.current.modifiedCount).toBe(3)
-  })
-
-  it('computes editedFiles correctly', () => {
-    const entries = [
-      mockEntry,
-      {
-        ...mockEntry,
-        path: unsafeAsLogicalPath('entry2'),
-        contentId: unsafeAsContentId('xyz789uvw123'),
-        label: 'Entry 2',
-      },
-      {
-        ...mockEntry,
-        path: unsafeAsLogicalPath('entry3'),
-        contentId: unsafeAsContentId('mno456pqr789'),
-        label: 'Entry 3',
-      },
-    ]
-
-    const { result } = renderHook(() => useDraftManager({ ...defaultOptions, entries }))
-
-    act(() => {
-      result.current.setDrafts({
-        abc123def456: { title: 'Draft 1' },
-        xyz789uvw123: { title: 'Draft 2' },
-      })
-    })
-
-    expect(result.current.editedFiles).toEqual([
-      { path: 'entry1', label: 'Test Entry' },
-      { path: 'entry2', label: 'Entry 2' },
-    ])
-  })
-
-  it('restores drafts from localStorage on mount', () => {
-    window.localStorage.setItem(
-      'canopycms:drafts:main',
-      JSON.stringify({
-        abc123def456: { title: 'Restored', body: 'From Storage' },
-      }),
-    )
-
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    waitFor(() => {
-      expect(result.current.drafts).toEqual({
-        abc123def456: { title: 'Restored', body: 'From Storage' },
-      })
-    })
-  })
-
-  it('persists drafts to localStorage when changed', () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    act(() => {
-      result.current.setDrafts({
-        abc123def456: { title: 'New Draft', body: 'Content' },
-      })
-    })
-
-    const stored = window.localStorage.getItem('canopycms:drafts:main')
-    expect(stored).toBe(JSON.stringify({ abc123def456: { title: 'New Draft', body: 'Content' } }))
-  })
-
-  it('saves draft successfully', async () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    act(() => {
-      result.current.setDrafts({
-        abc123def456: { title: 'Draft', body: 'Content' },
-      })
-    })
-
-    await act(async () => {
-      await result.current.handleSave()
-    })
-
-    expect(mockSaveEntry).toHaveBeenCalledWith(mockEntry, {
-      title: 'Draft',
-      body: 'Content',
-    })
-    expect(mockSetBusy).toHaveBeenCalledWith(true)
-    expect(mockSetBusy).toHaveBeenCalledWith(false)
-    expect(result.current.drafts.abc123def456).toEqual({
-      title: 'Saved Title',
-      body: 'Saved Content',
-    })
-    expect(result.current.loadedValues.abc123def456).toEqual({
-      title: 'Saved Title',
-      body: 'Saved Content',
-    })
-  })
-
-  it('handles save error', async () => {
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-    mockSaveEntry.mockRejectedValueOnce(new Error('Save failed'))
-
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    act(() => {
-      result.current.setDrafts({ abc123def456: { title: 'Draft' } })
-    })
-
-    await act(async () => {
-      await result.current.handleSave()
-    })
-
-    expect(mockSetBusy).toHaveBeenCalledWith(false)
-    consoleErrorSpy.mockRestore()
-  })
-
-  it('does not save when no currentEntry', async () => {
-    const { result } = renderHook(() =>
-      useDraftManager({ ...defaultOptions, currentEntry: undefined }),
-    )
-
-    await act(async () => {
-      await result.current.handleSave()
-    })
-
-    expect(mockSaveEntry).not.toHaveBeenCalled()
-  })
-
-  it('discards all drafts', () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    act(() => {
-      result.current.setDrafts({
-        abc123def456: { title: 'Draft' },
-        xyz789uvw123: { title: 'Draft 2' },
-      })
-    })
-
-    act(() => {
-      result.current.handleDiscardDrafts()
-    })
-
-    expect(result.current.drafts).toEqual({})
-    // After discarding, localStorage is removed, but the effect will write {} next
-    const stored = window.localStorage.getItem('canopycms:drafts:main')
-    expect(stored === null || stored === '{}').toBe(true)
-  })
-
-  it('discards single file draft', () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    act(() => {
-      result.current.setDrafts({
-        abc123def456: { title: 'Draft 1' },
-        xyz789uvw123: { title: 'Draft 2' },
-      })
-    })
-
-    act(() => {
-      result.current.handleDiscardFileDraft()
-    })
-
-    expect(result.current.drafts).toEqual({
-      xyz789uvw123: { title: 'Draft 2' },
-    })
-  })
-
-  it('reloads entry from server', async () => {
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    await act(async () => {
-      await result.current.handleReload()
-    })
-
-    expect(mockLoadEntry).toHaveBeenCalledWith(mockEntry)
-    expect(mockSetBusy).toHaveBeenCalledWith(true)
-    expect(mockSetBusy).toHaveBeenCalledWith(false)
-    expect(result.current.loadedValues.abc123def456).toEqual({
-      title: 'Loaded Title',
-      body: 'Loaded Content',
-    })
-    expect(result.current.drafts.abc123def456).toEqual({
-      title: 'Loaded Title',
-      body: 'Loaded Content',
-    })
-  })
-
-  it('handles reload error', async () => {
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-    mockLoadEntry.mockRejectedValueOnce(new Error('Load failed'))
-
-    const { result } = renderHook(() => useDraftManager(defaultOptions))
-
-    await act(async () => {
-      await result.current.handleReload()
-    })
-
-    expect(mockSetBusy).toHaveBeenCalledWith(false)
-    consoleErrorSpy.mockRestore()
-  })
-
-  it('does not reload when no currentEntry', async () => {
-    const { result } = renderHook(() =>
-      useDraftManager({ ...defaultOptions, currentEntry: undefined }),
-    )
-
-    await act(async () => {
-      await result.current.handleReload()
-    })
-
-    expect(mockLoadEntry).not.toHaveBeenCalled()
-  })
-
-  it('updates storageKey when branchName changes', () => {
-    const { result, rerender } = renderHook((props) => useDraftManager(props), {
-      initialProps: defaultOptions,
-    })
-
-    act(() => {
-      result.current.setDrafts({ abc123def456: { title: 'Draft' } })
-    })
-
-    expect(window.localStorage.getItem('canopycms:drafts:main')).toBeTruthy()
-
-    rerender({ ...defaultOptions, branchName: 'feature' })
-
-    waitFor(() => {
-      expect(window.localStorage.getItem('canopycms:drafts:feature')).toBeTruthy()
-    })
-  })
-})

package/src/editor/hooks/useDraftManager.ts

@@ -1,259 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { notifications } from '@mantine/notifications'
-import type { EditorEntry } from '../Editor'
-import type { LogicalPath } from '../../paths/types'
-import type { FormValue } from '../FormRenderer'
-import { getNotificationDuration } from '../utils/env'
-
-export interface UseDraftManagerOptions {
-  branchName: string
-  selectedPath: string
-  currentEntry: EditorEntry | undefined
-  entries: EditorEntry[]
-  initialValues?: Record<string, FormValue>
-  loadEntry: (entry: EditorEntry) => Promise<FormValue>
-  saveEntry: (entry: EditorEntry, value: FormValue) => Promise<FormValue>
-  setBusy: (busy: boolean) => void
-}
-
-export interface UseDraftManagerReturn {
-  drafts: Record<string, FormValue>
-  setDrafts: React.Dispatch<React.SetStateAction<Record<string, FormValue>>>
-  loadedValues: Record<string, FormValue>
-  setLoadedValues: React.Dispatch<React.SetStateAction<Record<string, FormValue>>>
-  selectedValue: FormValue | undefined
-  loadedValue: FormValue | undefined
-  effectiveValue: FormValue | undefined
-  modifiedCount: number
-  editedFiles: Array<{ path: LogicalPath; label: string }>
-  handleSave: () => Promise<void>
-  handleDiscardDrafts: () => void
-  handleDiscardFileDraft: () => void
-  handleReload: () => Promise<void>
-  isDirtyForEntry: (entryPath: string) => boolean
-  isSelectedDirty: () => boolean
-}
-
-/**
- * Custom hook for managing draft state (localStorage persistence, save/discard).
- *
- * Handles:
- * - Draft state management
- * - localStorage persistence (restore on mount, persist on change)
- * - Save/discard operations
- * - Reload from server
- * - Computed values (selectedValue, effectiveValue, modifiedCount, editedFiles)
- *
- * @example
- * ```tsx
- * const {
- *   drafts,
- *   effectiveValue,
- *   modifiedCount,
- *   handleSave,
- *   handleDiscardDrafts
- * } = useDraftManager({
- *   branchName,
- *   selectedPath,
- *   currentEntry,
- *   entries,
- *   loadEntry,
- *   saveEntry,
- *   setBusy
- * })
- * ```
- */
-export function useDraftManager(options: UseDraftManagerOptions): UseDraftManagerReturn {
-  const [drafts, setDrafts] = useState<Record<string, FormValue>>(() => options.initialValues ?? {})
-  const [loadedValues, setLoadedValues] = useState<Record<string, FormValue>>({})
-
-  const storageKey = useMemo(() => `canopycms:drafts:${options.branchName}`, [options.branchName])
-
-  // Draft keys are now content IDs, not paths
-  const currentId = options.currentEntry?.contentId
-  const selectedValue = currentId ? drafts[currentId] : undefined
-  const loadedValue = currentId ? loadedValues[currentId] : undefined
-  const effectiveValue = selectedValue ?? loadedValue
-
-  const modifiedCount = useMemo(() => Object.keys(drafts).length, [drafts])
-
-  const editedFiles = useMemo(() => {
-    const draftIds = Object.keys(drafts)
-    if (draftIds.length === 0) return []
-    return draftIds
-      .map((id) => {
-        const entry = options.entries.find((e) => e.contentId === id)
-        return entry ? { path: entry.path, label: entry.label } : null
-      })
-      .filter((x): x is { path: LogicalPath; label: string } => x !== null)
-  }, [drafts, options.entries])
-
-  // Clear drafts when branch changes (before localStorage restore)
-  const prevBranchRef = useRef(options.branchName)
-  useEffect(() => {
-    if (prevBranchRef.current && prevBranchRef.current !== options.branchName) {
-      setDrafts({})
-      setLoadedValues({})
-    }
-    prevBranchRef.current = options.branchName
-  }, [options.branchName])
-
-  // Restore drafts from localStorage on mount or when storageKey changes
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    try {
-      const raw = window.localStorage.getItem(storageKey)
-      if (raw) {
-        const parsed = JSON.parse(raw) as Record<string, FormValue>
-        setDrafts((prev) => ({ ...prev, ...parsed }))
-      }
-    } catch (err) {
-      console.warn('Failed to restore drafts', err)
-    }
-  }, [storageKey])
-
-  // Persist drafts to localStorage whenever they change
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    try {
-      window.localStorage.setItem(storageKey, JSON.stringify(drafts))
-    } catch (err) {
-      console.warn('Failed to persist drafts', err)
-    }
-  }, [drafts, storageKey])
-
-  const handleSave = async () => {
-    if (!options.currentEntry || !effectiveValue || !currentId) return
-    options.setBusy(true)
-    try {
-      const saved = await options.saveEntry(options.currentEntry, effectiveValue)
-      setDrafts((prev) => ({ ...prev, [currentId]: saved }))
-      setLoadedValues((prev) => ({ ...prev, [currentId]: saved }))
-      notifications.show({
-        message: 'Saved',
-        color: 'green',
-        autoClose: getNotificationDuration(4000),
-        withCloseButton: true,
-      })
-    } catch (err) {
-      console.error(err)
-      notifications.show({
-        message: 'Save failed',
-        color: 'red',
-        autoClose: getNotificationDuration(6000),
-        withCloseButton: true,
-      })
-    } finally {
-      options.setBusy(false)
-    }
-  }
-
-  const handleDiscardDrafts = () => {
-    setDrafts({})
-    try {
-      if (typeof window !== 'undefined') {
-        window.localStorage.removeItem(storageKey)
-      }
-    } catch (err) {
-      console.warn('Failed to clear drafts', err)
-    }
-    notifications.show({
-      message: 'Drafts cleared',
-      color: 'blue',
-      autoClose: getNotificationDuration(3000),
-      withCloseButton: true,
-    })
-  }
-
-  const handleDiscardFileDraft = () => {
-    if (!currentId) return
-    setDrafts((prev) => {
-      const next = { ...prev }
-      delete next[currentId]
-      return next
-    })
-    try {
-      if (typeof window !== 'undefined') {
-        const raw = window.localStorage.getItem(storageKey)
-        if (raw) {
-          const parsed = JSON.parse(raw) as Record<string, FormValue>
-          delete parsed[currentId]
-          window.localStorage.setItem(storageKey, JSON.stringify(parsed))
-        }
-      }
-    } catch (err) {
-      console.warn('Failed to clear draft for file', err)
-    }
-    notifications.show({
-      message: 'Draft cleared for file',
-      color: 'blue',
-      autoClose: getNotificationDuration(3000),
-      withCloseButton: true,
-    })
-  }
-
-  const handleReload = async () => {
-    if (!options.currentEntry || !currentId) return
-    options.setBusy(true)
-    try {
-      const loaded = await options.loadEntry(options.currentEntry)
-      setLoadedValues((prev) => ({ ...prev, [currentId]: loaded }))
-      setDrafts((prev) => ({ ...prev, [currentId]: loaded }))
-      notifications.show({
-        message: 'Reloaded',
-        color: 'blue',
-        autoClose: getNotificationDuration(3000),
-        withCloseButton: true,
-      })
-    } catch (err) {
-      console.error(err)
-      notifications.show({
-        message: 'Reload failed',
-        color: 'red',
-        autoClose: getNotificationDuration(6000),
-        withCloseButton: true,
-      })
-    } finally {
-      options.setBusy(false)
-    }
-  }
-
-  // Compute dirty state for a given entry
-  const isDirtyForEntry = (entryPath: string): boolean => {
-    // Find entry by path to get its content ID
-    const entry = options.entries.find((e) => e.path === entryPath)
-    if (!entry) return false
-
-    const id = entry.contentId
-    if (!drafts[id]) return false
-    return !loadedValues[id] || JSON.stringify(drafts[id]) !== JSON.stringify(loadedValues[id])
-  }
-
-  // Convenience helper for checking current selection
-  const isSelectedDirty = (): boolean => {
-    if (!currentId) return false
-    if (!drafts[currentId]) return false
-    return (
-      !loadedValues[currentId] ||
-      JSON.stringify(drafts[currentId]) !== JSON.stringify(loadedValues[currentId])
-    )
-  }
-
-  return {
-    drafts,
-    setDrafts,
-    loadedValues,
-    setLoadedValues,
-    selectedValue,
-    loadedValue,
-    effectiveValue,
-    modifiedCount,
-    editedFiles,
-    handleSave,
-    handleDiscardDrafts,
-    handleDiscardFileDraft,
-    handleReload,
-    isDirtyForEntry,
-    isSelectedDirty,
-  }
-}