canopycms 0.0.0

package/src/editor/Editor.integration.test.tsx

@@ -0,0 +1,227 @@
+import React from 'react'
+
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
+import type { EditorEntry } from './Editor'
+import { Editor } from './Editor'
+import { ApiClientProvider } from './context'
+import { unsafeAsLogicalPath, unsafeAsContentId } from '../paths/test-utils'
+
+// Mock @mantine/modals
+vi.mock('@mantine/modals', () => ({
+  ModalsProvider: ({ children }: { children: React.ReactNode }) => children,
+  modals: {
+    openConfirmModal: vi.fn(),
+  },
+}))
+
+const originalMatchMedia = window.matchMedia
+const originalResizeObserver = window.ResizeObserver
+
+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
+  }
+})
+
+afterAll(() => {
+  if (originalMatchMedia) {
+    window.matchMedia = originalMatchMedia
+  }
+  if (originalResizeObserver) {
+    window.ResizeObserver = originalResizeObserver
+  }
+})
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+})
+
+const okJson = (data: unknown, status = 200) =>
+  new Response(JSON.stringify(data), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  })
+
+describe('Editor integration', () => {
+  it('loads an entry and persists changes via the content API', async () => {
+    const entry: EditorEntry = {
+      path: unsafeAsLogicalPath('content/posts/hello'),
+      contentId: unsafeAsContentId('def456ABC123'), // 12-char content ID (must match API response)
+      label: 'Hello',
+      status: 'entry',
+      schema: [{ name: 'title', type: 'string' }],
+      apiPath: '/api/canopycms/main/content/content/posts/hello',
+      collectionPath: unsafeAsLogicalPath('content/posts'),
+      collectionName: 'posts',
+      slug: 'hello',
+      format: 'json',
+      type: 'entry',
+    }
+
+    const fetchMock = vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
+      const url =
+        typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url
+      if (url.endsWith('/api/canopycms/branches'))
+        return Promise.resolve(okJson({ ok: false, status: 404 }, 404))
+      if (url.includes('/schema') && !url.includes('/schema/')) {
+        return Promise.resolve(
+          okJson({
+            ok: true,
+            status: 200,
+            data: {
+              schema: {},
+              flatSchema: [
+                {
+                  type: 'entry-type',
+                  logicalPath: 'content/posts/post',
+                  name: 'post',
+                  parentPath: 'content/posts',
+                  format: 'json',
+                  schemaRef: 'postSchema',
+                },
+              ],
+              entrySchemas: { postSchema: [{ name: 'title', type: 'string' }] },
+            },
+          }),
+        )
+      }
+      if (url.includes('/entries')) {
+        return Promise.resolve(
+          okJson({
+            ok: true,
+            status: 200,
+            data: {
+              collections: [
+                {
+                  logicalPath: 'content/posts',
+                  contentId: 'abc123XYZ789',
+                  name: 'posts',
+                  type: 'collection',
+                  format: 'json',
+                  schema: entry.schema,
+                  order: [],
+                },
+              ],
+              entries: [
+                {
+                  logicalPath: entry.path,
+                  contentId: 'def456ABC123',
+                  collectionPath: entry.collectionPath,
+                  collectionName: entry.collectionName,
+                  slug: entry.slug,
+                  format: entry.format,
+                  entryType: 'post',
+                  physicalPath: '/content/posts.abc123XYZ789/post.hello.def456ABC123.json',
+                  exists: true,
+                },
+              ],
+              pagination: { hasMore: false, limit: 50 },
+            },
+          }),
+        )
+      }
+      if (url === entry.apiPath && (!init || !init.method || init.method === 'GET')) {
+        return Promise.resolve(okJson({ ok: true, status: 200, data: { title: 'Loaded title' } }))
+      }
+      if (url === entry.apiPath && init?.method === 'PUT') {
+        const body = JSON.parse(init.body as string)
+        return Promise.resolve(okJson({ ok: true, status: 200, data: body.data }))
+      }
+      return Promise.resolve(okJson({ ok: true, status: 200, data: {} }))
+    })
+
+    vi.stubGlobal('fetch', fetchMock)
+
+    render(
+      <ApiClientProvider>
+        <Editor
+          entries={[entry]}
+          title="Test Editor"
+          branchName="main"
+          operatingMode="dev"
+          themeOptions={{}}
+        />
+      </ApiClientProvider>,
+    )
+
+    // Wait for the entry data to be loaded and form to render with loaded value
+    let input: HTMLInputElement
+    await waitFor(() => {
+      const el = screen.queryByRole('textbox', {
+        name: /title/i,
+      }) as HTMLInputElement | null
+      expect(el).not.toBeNull()
+      expect(el?.value).toBe('Loaded title')
+      input = el!
+    })
+
+    // Verify save button is disabled when there are no unsaved changes
+    let saveButton = await screen.findByRole('button', { name: /save file/i })
+    expect(saveButton.hasAttribute('disabled')).toBe(true)
+
+    // Make a change to the form
+    fireEvent.change(input!, { target: { value: 'Modified title' } })
+
+    // Verify save button becomes enabled after making a change
+    await waitFor(() => {
+      saveButton = screen.getByRole('button', { name: /save file/i })
+      expect(saveButton.hasAttribute('disabled')).toBe(false)
+    })
+
+    fireEvent.click(saveButton)
+
+    await waitFor(() =>
+      expect(
+        fetchMock.mock.calls.some(
+          ([url, init]) =>
+            url === entry.apiPath && (init as RequestInit | undefined)?.method === 'PUT',
+        ),
+      ).toBe(true),
+    )
+
+    const saveCall = fetchMock.mock.calls.find(
+      ([url, init]) => url === entry.apiPath && (init as RequestInit | undefined)?.method === 'PUT',
+    )
+    expect(saveCall).toBeTruthy()
+    const body = JSON.parse((saveCall?.[1] as RequestInit).body as string)
+    // With path-based routing, collection and slug are in the URL, not the body
+    expect(body).toMatchObject({
+      format: 'json',
+      data: { title: 'Modified title' },
+    })
+  })
+
+  // This test verifies the fix for the bug where the last manually expanded collection
+  // wouldn't persist when the drawer closed and reopened. The fix captures the tree's
+  // expanded state synchronously when the drawer closes, preventing race conditions
+  // with async callbacks.
+  it.skip('preserves tree expansion state when drawer closes and reopens', async () => {
+    // Test skipped: Requires full Editor render with all subcomponents.
+    // The functionality is verified by the calculatePathToEntry unit tests
+    // and manual testing in the actual application.
+  })
+})

package/src/editor/Editor.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
+import type { FieldConfig } from '../config'
+import type { LogicalPath } from '../paths'
+import type { EditorEntry } from './Editor'
+import { Editor } from './Editor'
+import { unsafeAsLogicalPath, unsafeAsContentId } from '../paths/test-utils'
+
+const meta: Meta<typeof Editor> = {
+  title: 'Editor/Editor',
+  component: Editor,
+}
+
+export default meta
+type Story = StoryObj<typeof Editor>
+
+const homeFields: FieldConfig[] = [
+  {
+    name: 'hero',
+    type: 'object',
+    label: 'Hero',
+    fields: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'body', type: 'markdown', label: 'Body' },
+    ],
+  },
+]
+
+const postFields: FieldConfig[] = [
+  { name: 'title', type: 'string', label: 'Title' },
+  { name: 'body', type: 'markdown', label: 'Body' },
+]
+
+const baseEntries: EditorEntry[] = [
+  {
+    path: unsafeAsLogicalPath('home'),
+    label: 'Home',
+    status: 'page',
+    schema: homeFields,
+    apiPath: '/api/canopycms/main/content/home',
+    previewSrc: '/',
+    collectionPath: unsafeAsLogicalPath('home'),
+    collectionName: 'home',
+    format: 'json',
+    type: 'entry',
+    contentId: unsafeAsContentId('test123456789'),
+  },
+  {
+    path: unsafeAsLogicalPath('posts/hello-world'),
+    label: 'Hello World',
+    status: 'draft',
+    schema: postFields,
+    apiPath: '/api/canopycms/main/content/posts/hello-world',
+    previewSrc: '/posts/hello-world',
+    collectionPath: unsafeAsLogicalPath('posts'),
+    collectionName: 'posts',
+    format: 'json',
+    type: 'entry',
+    contentId: unsafeAsContentId('abc987XYZ654'),
+  },
+]
+
+export const WithCollections: Story = {
+  render: () => {
+    const [entries, setEntries] = useState<EditorEntry[]>(baseEntries)
+    const collections = [
+      {
+        path: unsafeAsLogicalPath('home'),
+        name: 'home',
+        label: 'Home',
+        format: 'json' as const,
+        type: 'entry' as const,
+      },
+      {
+        path: unsafeAsLogicalPath('posts'),
+        name: 'posts',
+        label: 'Posts',
+        format: 'json' as const,
+        type: 'collection' as const,
+      },
+    ]
+
+    const handleCreateEntry = (collectionPath: LogicalPath) => {
+      const slug = window.prompt(`New ${collectionPath} slug?`, 'new-post')
+      if (!slug) return
+      const newEntry: EditorEntry = {
+        path: unsafeAsLogicalPath(`${collectionPath}/${slug}`),
+        label: slug,
+        status: 'draft',
+        schema: collectionPath === 'home' ? homeFields : postFields,
+        apiPath: `/api/canopycms/main/content/${collectionPath}/${slug}`,
+        previewSrc: collectionPath === 'posts' ? `/posts/${slug}` : '/',
+        collectionPath,
+        collectionName: collectionPath,
+        slug,
+        format: 'json',
+        type: collectionPath === 'home' ? 'entry' : 'entry',
+        contentId: unsafeAsContentId(`new${Date.now()}`),
+      }
+      setEntries((prev) => [...prev, newEntry])
+    }
+
+    return (
+      <div className="h-[90vh] bg-gray-50">
+        <Editor
+          entries={entries}
+          title="CanopyCMS Editor"
+          subtitle="Schema-driven editing with preview"
+          branchName="story/branch"
+          collections={collections}
+          initialSelectedId={entries[0]?.path}
+          onCreateEntry={handleCreateEntry}
+          operatingMode="dev"
+        />
+      </div>
+    )
+  },
+}