canopycms 0.0.0 → 0.0.2

package/src/editor/EditorPanes.stories.tsx

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

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

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

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