canopycms 0.0.0

package/src/editor/EditorPanes.stories.tsx

@@ -0,0 +1,256 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useMemo, useState } from 'react'
+
+import { Badge, Box, Group, Paper, SegmentedControl, Stack, Text, Title } from '@mantine/core'
+
+import type { FieldConfig } from '../config'
+import { EditorPanes, type PaneLayout } from './EditorPanes'
+import { FormRenderer, type FormValue } from './FormRenderer'
+
+const meta: Meta<typeof EditorPanes> = {
+  title: 'Editor/EditorPanes',
+  component: EditorPanes,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof EditorPanes>
+
+type HeroBlock = {
+  template: 'hero'
+  value: { headline?: string; body?: string }
+}
+type CtaBlock = { template: 'cta'; value: { title?: string; ctaText?: string } }
+type PostBlock = HeroBlock | CtaBlock
+
+interface PostValue {
+  slug: string
+  title: string
+  author: string
+  tags: string[]
+  published: boolean
+  body: string
+  seo: { title?: string; description?: string }
+  features: Array<{ title?: string; description?: string }>
+  blocks: PostBlock[]
+  [key: string]: unknown
+}
+
+const authors = [
+  { id: 'authors/alice', name: 'Alice' },
+  { id: 'authors/bob', name: 'Bob' },
+]
+
+const postSchema: FieldConfig[] = [
+  { name: 'title', type: 'string', label: 'Title' },
+  {
+    name: 'author',
+    type: 'reference',
+    label: 'Author',
+    options: authors.map((a) => ({ label: a.name, value: a.id })),
+    required: true,
+  },
+  {
+    name: 'tags',
+    type: 'select',
+    label: 'Tags',
+    list: true,
+    options: ['typed', 'fast', 'lambda-friendly'],
+  },
+  { name: 'published', type: 'boolean', label: 'Published' },
+  { name: 'body', type: 'mdx', label: 'Body' },
+  {
+    name: 'seo',
+    type: 'object',
+    label: 'SEO',
+    fields: [
+      { name: 'title', type: 'string', label: 'Meta title' },
+      { name: 'description', type: 'string', label: 'Meta description' },
+    ],
+  },
+  {
+    name: 'features',
+    type: 'object',
+    label: 'Key features',
+    list: true,
+    fields: [
+      { name: 'title', type: 'string' },
+      { name: 'description', type: 'string' },
+    ],
+  },
+  {
+    name: 'blocks',
+    type: 'block',
+    templates: [
+      {
+        name: 'hero',
+        label: 'Hero',
+        fields: [
+          { name: 'headline', type: 'string' },
+          { name: 'body', type: 'markdown' },
+        ],
+      },
+      {
+        name: 'cta',
+        label: 'CTA',
+        fields: [
+          { name: 'title', type: 'string' },
+          { name: 'ctaText', type: 'string' },
+        ],
+      },
+    ],
+  },
+]
+
+const initialPost: PostValue = {
+  slug: 'hello-world',
+  title: 'Hello World',
+  author: 'authors/alice',
+  tags: ['typed', 'fast'],
+  published: false,
+  body: 'Some **MDX** content that mirrors another example.',
+  seo: {
+    title: 'Hello World | CanopyCMS',
+    description: 'Welcome to the demo story.',
+  },
+  features: [
+    { title: 'Fast', description: 'Built for speed' },
+    { title: 'Typed', description: 'Type-safe content' },
+  ],
+  blocks: [
+    { template: 'hero', value: { headline: 'Hero block', body: 'Hero copy' } },
+    { template: 'cta', value: { title: 'Try CanopyCMS', ctaText: 'Click me' } },
+  ],
+}
+
+const PostPreview = ({ post, authorName }: { post: PostValue; authorName?: string }) => (
+  <Stack gap="sm">
+    <Group gap="xs" align="center">
+      <Title order={3} fw={700}>
+        {post.title}
+      </Title>
+      <Badge color={post.published ? 'green' : 'yellow'} variant="light">
+        {post.published ? 'Published' : 'Draft'}
+      </Badge>
+    </Group>
+    <Group gap="xs">
+      <Text size="sm" c="dimmed">
+        Author: {authorName ?? 'Unknown'}
+      </Text>
+      {post.tags.map((tag) => (
+        <Badge key={tag} color="brand" variant="outline">
+          {tag}
+        </Badge>
+      ))}
+    </Group>
+    <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>
+      {post.body || 'Body will render here.'}
+    </Text>
+    {post.blocks.length > 0 && (
+      <Stack gap="sm">
+        {post.blocks.map((block, idx) => {
+          if (block.template === 'hero') {
+            return (
+              <Paper key={`${block.template}-${idx}`} withBorder radius="md" p="md" shadow="xs">
+                <Text fw={600} size="sm" c="dimmed">
+                  Hero block
+                </Text>
+                <Text fw={600}>{block.value.headline}</Text>
+                <Text size="sm" c="dimmed">
+                  {block.value.body ?? 'Hero body copy'}
+                </Text>
+              </Paper>
+            )
+          }
+          const cta = (block as Extract<PostBlock, { template: 'cta' }>).value
+          return (
+            <Paper key={`${block.template}-${idx}`} withBorder radius="md" p="md" shadow="xs">
+              <Text fw={600} size="sm" c="dimmed">
+                Call to action
+              </Text>
+              <Text fw={600}>{cta.title}</Text>
+              <Text size="sm" c="dimmed">
+                {cta.ctaText ?? 'CTA copy'}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Stack>
+    )}
+    {post.features.length > 0 && (
+      <Stack gap={6}>
+        <Text size="xs" fw={600} c="dimmed">
+          Features
+        </Text>
+        <Stack gap={6}>
+          {post.features.map((feat, idx) => (
+            <Paper key={`${feat.title}-${idx}`} withBorder radius="md" p="sm">
+              <Text size="sm" fw={600}>
+                {feat.title}
+              </Text>
+              <Text size="sm" c="dimmed">
+                {feat.description}
+              </Text>
+            </Paper>
+          ))}
+        </Stack>
+      </Stack>
+    )}
+  </Stack>
+)
+
+export const Default: Story = {
+  render: () => {
+    const [layout, setLayout] = useState<PaneLayout>('side')
+    const [post, setPost] = useState<PostValue>(initialPost)
+    const authorMap = useMemo(
+      () => Object.fromEntries(authors.map((a) => [a.id, a.name])) as Record<string, string>,
+      [],
+    )
+
+    return (
+      <Box style={{ height: '90vh' }}>
+        <Stack gap="sm" h="100%">
+          <Group justify="space-between" align="center">
+            <Stack gap={2}>
+              <Text size="xs" c="dimmed">
+                Form fields on the right mirror what CanopyCMS renders in apps. Toggle layout to
+                simulate responsive editor panes.
+              </Text>
+            </Stack>
+            <SegmentedControl
+              size="xs"
+              radius="md"
+              data={[
+                { value: 'side', label: 'Side by side' },
+                { value: 'stacked', label: 'Stacked' },
+              ]}
+              value={layout}
+              onChange={(value) => setLayout(value as PaneLayout)}
+            />
+          </Group>
+          <EditorPanes
+            onLayoutChange={setLayout}
+            layout={layout}
+            preview={
+              <Box p="lg" bg="gray.0" h="100%">
+                <PostPreview post={post} authorName={authorMap[post.author]} />
+              </Box>
+            }
+            form={
+              <Box p="lg">
+                <FormRenderer
+                  fields={postSchema}
+                  value={post as unknown as FormValue}
+                  onChange={(value) => setPost(value as PostValue)}
+                />
+              </Box>
+            }
+          />
+        </Stack>
+      </Box>
+    )
+  },
+}

package/src/editor/EditorPanes.test.tsx

@@ -0,0 +1,77 @@
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import React from 'react'
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest'
+
+import { EditorPanes } from './EditorPanes'
+import { CanopyCMSProvider } from './theme'
+
+const originalWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth')
+const originalHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientHeight')
+
+beforeAll(() => {
+  // Mantine helpers expect matchMedia/ResizeObserver to exist in the browser.
+  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
+  }
+
+  Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+    configurable: true,
+    value: 1200,
+  })
+  Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+    configurable: true,
+    value: 800,
+  })
+})
+
+afterAll(() => {
+  if (originalWidth) {
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalWidth)
+  }
+  if (originalHeight) {
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', originalHeight)
+  }
+})
+
+afterEach(() => cleanup())
+
+describe('EditorPanes split panes', () => {
+  it('disables preview interactions while dragging the gutter', async () => {
+    const { container, getByTestId } = render(
+      <CanopyCMSProvider>
+        <EditorPanes preview={<div>Preview area</div>} form={<div>Form area</div>} />
+      </CanopyCMSProvider>,
+    )
+
+    const previewPane = getByTestId('preview-pane')
+    await waitFor(() => expect(container.querySelector('.Resizer')).toBeTruthy())
+    const resizer = container.querySelector('.Resizer') as HTMLElement
+
+    expect(previewPane.style.pointerEvents).toBe('')
+
+    fireEvent.mouseDown(resizer, { clientX: 200, clientY: 100, buttons: 1 })
+    expect(previewPane.style.pointerEvents).toBe('none')
+
+    fireEvent.mouseUp(resizer)
+    await waitFor(() => expect(previewPane.style.pointerEvents).toBe(''))
+  })
+})

package/src/editor/EditorPanes.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import React, { useMemo, useRef, useState, useEffect } from 'react'
+
+import { Box, Paper, rem } from '@mantine/core'
+import SplitPane, { type SplitPaneProps } from 'react-split-pane'
+
+export type PaneLayout = 'side' | 'stacked'
+
+export interface EditorPanesProps {
+  layout?: PaneLayout
+  onLayoutChange?: (layout: PaneLayout) => void
+  preview?: React.ReactNode
+  form?: React.ReactNode
+}
+
+export const EditorPanes: React.FC<EditorPanesProps> = ({
+  layout: layoutProp = 'side',
+  onLayoutChange: _,
+  preview,
+  form,
+}) => {
+  const TypedSplitPane = SplitPane as unknown as React.ComponentType<
+    React.PropsWithChildren<SplitPaneProps>
+  >
+  const splitContainerRef = useRef<HTMLDivElement>(null)
+  const [layout, setLayout] = useState<PaneLayout>(layoutProp)
+  const [sidePrimarySize, setSidePrimarySize] = useState<number>(52)
+  const [stackedPrimarySize, setStackedPrimarySize] = useState<number>(58)
+  // Turn off iframe/pane pointer events while dragging so the gutter keeps receiving mouse events.
+  const [isDragging, setIsDragging] = useState(false)
+
+  useEffect(() => {
+    setLayout(layoutProp)
+  }, [layoutProp])
+
+  const direction = layout === 'side' ? 'vertical' : 'horizontal'
+  const primarySize = useMemo(
+    () => (layout === 'side' ? sidePrimarySize : stackedPrimarySize),
+    [layout, sidePrimarySize, stackedPrimarySize],
+  )
+
+  const resizerStyle = useMemo(
+    () => ({
+      background:
+        layout === 'side'
+          ? 'linear-gradient(90deg, var(--mantine-color-gray-0), var(--mantine-color-gray-1))'
+          : 'linear-gradient(180deg, var(--mantine-color-gray-0), var(--mantine-color-gray-1))',
+      boxShadow: isDragging
+        ? 'inset 0 0 0 1px var(--mantine-color-brand-4), 0 0 0 1px var(--mantine-color-brand-1)'
+        : 'inset 0 0 0 1px var(--mantine-color-gray-3)',
+      cursor: layout === 'side' ? 'col-resize' : 'row-resize',
+      width: layout === 'side' ? rem(12) : '100%',
+      height: layout === 'side' ? '100%' : rem(12),
+      margin: layout === 'side' ? `0 -${rem(2)}` : `-${rem(2)} 0`,
+      borderRadius: layout === 'side' ? rem(0) : rem(0),
+      transition: 'box-shadow 120ms ease, background 120ms ease',
+      flexShrink: 0,
+    }),
+    [isDragging, layout],
+  )
+
+  const updateSizeFromPixels = (nextPixels: number, nextLayout: PaneLayout) => {
+    const total =
+      nextLayout === 'side'
+        ? (splitContainerRef.current?.clientWidth ?? 0)
+        : (splitContainerRef.current?.clientHeight ?? 0)
+    // Guard: ensure valid dimensions before calculating
+    if (!total || total <= 0 || nextPixels <= 0) return
+    const percent = Math.min(85, Math.max(15, (nextPixels / total) * 100))
+    if (nextLayout === 'side') {
+      setSidePrimarySize(percent)
+    } else {
+      setStackedPrimarySize(percent)
+    }
+  }
+
+  return (
+    <Box h="100%" style={{ minHeight: '70vh' }}>
+      <Paper
+        radius={0}
+        shadow="xs"
+        withBorder
+        style={{
+          display: 'flex',
+          height: '100%',
+          minHeight: 0,
+          overflow: 'hidden',
+          flexDirection: layout === 'side' ? 'row' : 'column',
+          width: '100%',
+        }}
+      >
+        <Box
+          ref={splitContainerRef}
+          style={{ display: 'flex', flex: 1, minHeight: 0, width: '100%' }}
+        >
+          <TypedSplitPane
+            split={direction}
+            minSize={120}
+            size={`${primarySize}%`}
+            allowResize
+            onChange={(next) => updateSizeFromPixels(next, layout)}
+            onDragStarted={() => setIsDragging(true)}
+            onDragFinished={(next) => {
+              updateSizeFromPixels(next, layout)
+              setIsDragging(false)
+            }}
+            style={{
+              position: 'relative',
+              minHeight: 0,
+              width: '100%',
+              height: '100%',
+              userSelect: isDragging ? 'none' : undefined,
+            }}
+            paneStyle={{
+              minWidth: 0,
+              minHeight: 0,
+              display: 'flex',
+              overflow: 'auto',
+            }}
+            resizerStyle={resizerStyle}
+          >
+            <Box
+              data-testid="preview-pane"
+              style={{
+                minWidth: 0,
+                minHeight: 0,
+                overflow: 'auto',
+                flex: 1,
+                pointerEvents: isDragging ? 'none' : undefined,
+              }}
+            >
+              <Box
+                h="100%"
+                w="100%"
+                style={{
+                  minHeight: '100%',
+                  minWidth: 0,
+                  overflow: 'auto',
+                  flex: 1,
+                  pointerEvents: isDragging ? 'none' : undefined,
+                }}
+              >
+                {preview ?? 'Preview'}
+              </Box>
+            </Box>
+            <Box
+              data-testid="form-pane"
+              style={{
+                minWidth: 0,
+                minHeight: 0,
+                overflow: 'auto',
+                flex: 1,
+                pointerEvents: isDragging ? 'none' : undefined,
+              }}
+            >
+              <Box
+                h="100%"
+                w="100%"
+                style={{
+                  padding: 20,
+                  minHeight: '100%',
+                  minWidth: 0,
+                  overflow: 'auto',
+                  flex: 1,
+                  pointerEvents: isDragging ? 'none' : undefined,
+                  backgroundColor: 'var(--mantine-color-gray-1)',
+                }}
+              >
+                {form ?? 'Form'}
+              </Box>
+            </Box>
+          </TypedSplitPane>
+        </Box>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditorPanes

package/src/editor/EntryNavigator.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { EntryNavigator } from './EntryNavigator'
+import { unsafeAsLogicalPath } from '../paths/test-utils'
+
+const meta: Meta<typeof EntryNavigator> = {
+  title: 'Editor/EntryNavigator',
+  component: EntryNavigator,
+}
+
+export default meta
+type Story = StoryObj<typeof EntryNavigator>
+
+const posts = [
+  {
+    path: unsafeAsLogicalPath('posts/hello-world'),
+    label: 'Hello World',
+    collection: 'posts',
+  },
+  {
+    path: unsafeAsLogicalPath('posts/mermaid-demo'),
+    label: 'Mermaid Demo',
+    collection: 'posts',
+  },
+]
+
+const entries = [{ path: unsafeAsLogicalPath('home'), label: 'Home', collection: 'home' }]
+
+export const Grouped: Story = {
+  render: () => (
+    <div className="w-80">
+      <EntryNavigator
+        selectedPath="posts/hello-world"
+        onSelect={(id) => alert(`Select ${id}`)}
+        collections={[
+          {
+            path: unsafeAsLogicalPath('home'),
+            label: 'Home',
+            type: 'entry',
+            entries: entries,
+          },
+          {
+            path: unsafeAsLogicalPath('posts'),
+            label: 'Posts',
+            type: 'collection',
+            entries: posts,
+            onAdd: () => alert('Add post'),
+          },
+        ]}
+      />
+    </div>
+  ),
+}
+
+export const FlatList: Story = {
+  render: () => (
+    <div className="w-80">
+      <EntryNavigator
+        items={[...entries, ...posts]}
+        selectedPath="home"
+        onSelect={(id) => alert(`Select ${id}`)}
+      />
+    </div>
+  ),
+}