canopycms 0.0.0 → 0.0.2

package/src/editor/editor-utils.ts

@@ -1,303 +0,0 @@
-import type { CollectionItem, ListEntriesResponse } from '../api/entries'
-import type { ContentFormat, EntrySchema, FlatSchemaItem } from '../config'
-import type { FormValue } from './FormRenderer'
-import type { EditorEntry, EditorCollection } from './Editor'
-import type { TreeNodeData } from '@mantine/core'
-// Import directly from normalize to avoid pulling in server-only branch.ts
-import { normalizeCollectionPath } from '../paths/normalize'
-export { normalizeCollectionPath }
-
-export interface PreviewContext {
-  branchName?: string
-  previewBaseByCollection?: Record<string, string>
-}
-
-export const encodeSlug = (value?: string): string =>
-  (value ?? '')
-    .split('/')
-    .filter(Boolean)
-    .map((segment) => encodeURIComponent(segment))
-    .join('/')
-
-export const buildPreviewSrc = (
-  entry: {
-    collectionPath?: string
-    collectionName?: string
-    slug?: string
-    itemType?: string
-    previewSrc?: string
-  },
-  { branchName, previewBaseByCollection, contentRoot }: PreviewContext & { contentRoot?: string },
-): string => {
-  if (entry.previewSrc) return entry.previewSrc
-  const appendBranch = (url: string) => {
-    if (!branchName) return url
-    const separator = url.includes('?') ? '&' : '?'
-    return `${url}${separator}branch=${encodeURIComponent(branchName)}`
-  }
-
-  // Root-level entries have collectionPath === contentRoot (e.g., 'content')
-  const isRootEntry = contentRoot && entry.collectionPath === contentRoot
-
-  if (isRootEntry) {
-    // Check for custom preview URL in previewBaseByCollection
-    const customPreview = previewBaseByCollection?.[`${contentRoot}/${entry.slug}`]
-    if (customPreview) {
-      return appendBranch(customPreview)
-    }
-    // Default root entries to root path
-    return appendBranch('/')
-  }
-
-  const base =
-    (entry.collectionPath && previewBaseByCollection?.[entry.collectionPath]) ??
-    (entry.collectionName && previewBaseByCollection?.[entry.collectionName])
-  if (!base) {
-    // Build URL from collection path + slug
-    const collectionPath = entry.collectionPath ? normalizeCollectionPath(entry.collectionPath) : ''
-    const encoded = encodeSlug(entry.slug)
-    const segments = [collectionPath, encoded].filter(Boolean)
-    const url = segments.length > 0 ? `/${segments.join('/')}` : '/'
-    return appendBranch(url)
-  }
-  const trimmed = base.endsWith('/') ? base.slice(0, -1) : base
-  const encoded = encodeSlug(entry.slug)
-  const url = encoded ? `${trimmed}/${encoded}` : trimmed || '/'
-  return appendBranch(url)
-}
-
-export const normalizeContentPayload = (raw: unknown): FormValue => {
-  const candidate = raw as Record<string, unknown> | undefined
-  const data = (candidate?.data as Record<string, unknown> | undefined) ?? candidate
-  if (data && typeof data === 'object' && 'format' in data && 'data' in data) {
-    const format = data.format as ContentFormat
-    const payloadData = (data.data as Record<string, unknown>) ?? {}
-    if (format === 'json') return payloadData
-    return {
-      ...payloadData,
-      body:
-        typeof (data as Record<string, unknown>).body === 'string'
-          ? (data as Record<string, unknown>).body
-          : '',
-    }
-  }
-  return (data as FormValue) ?? {}
-}
-
-export const buildWritePayload = (
-  entry: { collectionPath?: string; slug?: string; format?: ContentFormat },
-  value: FormValue,
-) => {
-  if (!entry.format) return value
-  if (entry.format === 'json') {
-    return {
-      format: 'json' as const,
-      data: value,
-    }
-  }
-  const { body, ...rest } = value
-  return {
-    format: entry.format,
-    data: rest,
-    body: typeof body === 'string' ? body : '',
-  }
-}
-
-interface BuildEntriesFromListParams {
-  response: ListEntriesResponse
-  branchName: string
-  resolvePreviewSrc: (
-    entry: Pick<CollectionItem, 'collectionPath' | 'collectionName' | 'slug' | 'entryType'>,
-  ) => string
-  contentRoot: string
-  flatSchema: FlatSchemaItem[]
-}
-
-export const buildEntriesFromListResponse = ({
-  response,
-  branchName,
-  resolvePreviewSrc,
-  contentRoot,
-  flatSchema,
-}: BuildEntriesFromListParams): EditorEntry[] => {
-  return response.entries.map((entry) => {
-    // Resolve schema from flatSchema using parentPath + name
-    let schema: EntrySchema = []
-    if (entry.collectionPath && entry.entryType) {
-      const entryTypeItem = flatSchema.find(
-        (item) =>
-          item.type === 'entry-type' &&
-          item.parentPath === entry.collectionPath &&
-          item.name === entry.entryType,
-      )
-      if (entryTypeItem && entryTypeItem.type === 'entry-type') {
-        schema = entryTypeItem.schema
-      }
-    }
-
-    const isRootEntry = entry.collectionPath === contentRoot
-    const apiPath = isRootEntry
-      ? `/api/canopycms/${branchName}/content/${encodeURIComponent(entry.slug)}`
-      : `/api/canopycms/${branchName}/content/${encodeURIComponent(entry.collectionPath)}/${encodeURIComponent(entry.slug)}`
-
-    return {
-      path: entry.logicalPath,
-      contentId: entry.contentId,
-      label: entry.title || entry.slug || entry.collectionName || entry.collectionPath,
-      status: entry.exists === false ? 'missing' : (entry.entryType ?? 'entry'),
-      schema: schema,
-      apiPath,
-      previewSrc: resolvePreviewSrc(entry),
-      collectionPath: entry.collectionPath,
-      collectionName: entry.collectionName,
-      slug: entry.slug,
-      format: entry.format,
-      type: 'entry' as const,
-      canEdit: entry.canEdit,
-    }
-  })
-}
-
-/**
- * Builds a map of collection IDs to their labels for breadcrumb display.
- * Recursively walks through nested collections to build a flat map.
- *
- * @param collections - The collection tree structure
- * @returns A Map where keys are collection IDs (paths) and values are labels
- */
-export const buildCollectionLabels = (collections?: EditorCollection[]): Map<string, string> => {
-  const map = new Map<string, string>()
-  if (!collections) return map
-
-  const walk = (nodes: EditorCollection[]) => {
-    for (const c of nodes) {
-      map.set(c.path, c.label ?? c.name)
-      if (c.children) {
-        walk(c.children)
-      }
-    }
-  }
-  walk(collections)
-  return map
-}
-
-/**
- * Builds breadcrumb segments for an entry based on its collection hierarchy.
- *
- * @param currentEntry - The entry to build breadcrumbs for (or undefined for root)
- * @param collectionLabels - Map of collection IDs to labels
- * @returns Array of breadcrumb segment strings, starting with 'All Files'
- *
- * @example
- * ```ts
- * // Entry in nested collection
- * const entry = { collectionPath: 'content/docs/guides', slug: 'config' }
- * const labels = new Map([
- *   ['content', 'Content'],
- *   ['content/docs', 'Documentation'],
- *   ['content/docs/guides', 'Guides']
- * ])
- * buildBreadcrumbSegments(entry, labels)
- * // Returns: ['All Files', 'Documentation', 'Guides']
- * ```
- */
-export const buildBreadcrumbSegments = (
-  currentEntry: EditorEntry | undefined,
-  collectionLabels: Map<string, string>,
-): string[] => {
-  if (!currentEntry) return ['All Files']
-  const segments = ['All Files']
-
-  // Show collection hierarchy for entries that belong to a collection
-  if (currentEntry.collectionPath) {
-    // Split the collectionPath into path parts and build cumulative paths
-    // e.g., "content/documentation/guides" -> ["content/documentation", "content/documentation/guides"]
-    const parts = currentEntry.collectionPath.split('/').filter(Boolean)
-    for (let i = 1; i < parts.length; i++) {
-      const pathUpToHere = parts.slice(0, i + 1).join('/')
-      const label = collectionLabels.get(pathUpToHere)
-      if (label) {
-        segments.push(label)
-      }
-    }
-  }
-
-  // Add slug path segments (for nested slugs like "folder/file")
-  const slugSegments = (currentEntry.slug ?? '').split('/').filter(Boolean)
-  if (slugSegments.length > 1) {
-    segments.push(...slugSegments.slice(0, -1))
-  }
-
-  return segments
-}
-
-/**
- * Calculates which collection nodes need to be expanded to show the path to a specific entry.
- * Recursively walks the tree to find the target entry and marks all ancestor collections as expanded.
- *
- * @param entryPath - The entry path to find (e.g., "blog/my-post")
- * @param treeData - The tree data structure from Mantine Tree
- * @returns Record<string, boolean> - Expanded state object where keys are collection node values
- *
- * @example
- * ```ts
- * const treeData = [
- *   {
- *     value: 'collection:blog',
- *     children: [
- *       { value: 'blog/post-1' },
- *       {
- *         value: 'collection:blog/featured',
- *         children: [{ value: 'blog/featured/my-post' }]
- *       }
- *     ]
- *   }
- * ]
- * calculatePathToEntry('blog/featured/my-post', treeData)
- * // Returns: { 'collection:blog': true, 'collection:blog/featured': true }
- * ```
- */
-export const calculatePathToEntry = (
-  entryPath: string | undefined,
-  treeData: TreeNodeData[],
-): Record<string, boolean> => {
-  if (!entryPath) return {}
-
-  const pathToExpand: Record<string, boolean> = {}
-
-  /**
-   * Recursive function to find entry and mark parent collections as expanded.
-   * @param nodes - Current level of tree nodes to search
-   * @param ancestors - Accumulated ancestor node values (collection IDs) from root to current position
-   * @returns true if the target entry was found in this subtree
-   */
-  const findAndMarkPath = (nodes: TreeNodeData[], ancestors: string[]): boolean => {
-    for (const node of nodes) {
-      // Found the target entry
-      if (node.value === entryPath) {
-        // Mark all ancestors as expanded
-        for (const ancestor of ancestors) {
-          pathToExpand[ancestor] = true
-        }
-        return true
-      }
-
-      // Search children recursively if they exist
-      if (node.children && node.children.length > 0) {
-        const currentPath = [...ancestors, node.value]
-        const found = findAndMarkPath(node.children, currentPath)
-
-        if (found) {
-          // Mark this node as expanded since the target was found in its subtree
-          pathToExpand[node.value] = true
-          return true
-        }
-      }
-    }
-
-    return false
-  }
-
-  findAndMarkPath(treeData, [])
-  return pathToExpand
-}

package/src/editor/env.ts

@@ -1,4 +0,0 @@
-/**
- * Tiny helper to check for browser environment.
- */
-export const isBrowser = (): boolean => typeof window !== 'undefined'

package/src/editor/fields/BlockField.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { useState } from 'react'
-
-import type { BlockConfig, FieldConfig } from '../../config'
-import type { BlockInstance } from './BlockField'
-import { BlockField } from './BlockField'
-import { MarkdownField } from './MarkdownField'
-import { TextField } from './TextField'
-
-const meta: Meta<typeof BlockField> = {
-  title: 'Editor/Fields/Block',
-  component: BlockField,
-}
-
-export default meta
-type Story = StoryObj<typeof BlockField>
-
-export const Default: Story = {
-  render: () => {
-    const templates: BlockConfig[] = [
-      {
-        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 [blocks, setBlocks] = useState<BlockInstance[]>([
-      { template: 'hero', value: { headline: 'Hello', body: 'Intro text' } },
-      {
-        template: 'cta',
-        value: { title: 'Call to action', ctaText: 'Click me' },
-      },
-    ])
-
-    const renderWidget = (field: FieldConfig, value: unknown, onChange: (v: unknown) => void) => {
-      if (field.type === 'string') {
-        return (
-          <TextField
-            label={field.label ?? field.name}
-            value={typeof value === 'string' ? value : ''}
-            onChange={(v) => onChange(v)}
-          />
-        )
-      }
-      if (field.type === 'markdown' || field.type === 'mdx') {
-        return (
-          <MarkdownField
-            label={field.label ?? field.name}
-            value={typeof value === 'string' ? value : ''}
-            onChange={(v) => onChange(v)}
-          />
-        )
-      }
-      return <div className="text-xs text-gray-500">Unsupported field: {field.type}</div>
-    }
-
-    return (
-      <BlockField
-        label="Blocks"
-        templates={templates}
-        value={blocks}
-        onChange={(next) => setBlocks(next)}
-        renderField={(field, val, update, _path) => renderWidget(field, val, update)}
-        path={['blocks']}
-      />
-    )
-  },
-}

package/src/editor/fields/BlockField.tsx

@@ -1,267 +0,0 @@
-import React, { useMemo, useState } from 'react'
-
-let blockKeyCounter = 0
-
-import { ActionIcon, Button, Group, Paper, Select, Stack, Text } from '@mantine/core'
-import {
-  DndContext,
-  type DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core'
-import {
-  SortableContext,
-  arrayMove,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-
-import type { BlockConfig, FieldConfig } from '../../config'
-import { formatCanopyPath } from '../canopy-path'
-
-export interface BlockInstance {
-  template: string
-  value: Record<string, unknown>
-}
-
-export type RenderField = (
-  field: FieldConfig,
-  value: unknown,
-  onChange: (v: unknown) => void,
-  path: Array<string | number>,
-) => React.ReactNode
-
-export interface BlockFieldProps {
-  label?: string
-  templates: BlockConfig[]
-  value: BlockInstance[]
-  onChange: (blocks: BlockInstance[]) => void
-  renderField: RenderField
-  path: Array<string | number>
-  dataCanopyField?: string
-}
-
-const findTemplate = (templates: BlockConfig[], name: string) =>
-  templates.find((t) => t.name === name)
-
-const SortableBlock: React.FC<{
-  id: string
-  children: React.ReactNode
-}> = ({ id, children }) => {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id,
-  })
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.85 : 1,
-  }
-
-  return (
-    <Paper ref={setNodeRef} withBorder radius="md" p="sm" shadow="xs" style={style}>
-      <Group align="flex-start" gap="sm">
-        <ActionIcon
-          key="drag-handle"
-          variant="subtle"
-          aria-label="Drag to reorder"
-          {...attributes}
-          {...listeners}
-          style={{ cursor: 'grab' }}
-        >
-          ⇅
-        </ActionIcon>
-        <div key="content" style={{ flex: 1, minWidth: 0, width: '100%' }}>
-          {children}
-        </div>
-      </Group>
-    </Paper>
-  )
-}
-
-export const BlockField: React.FC<BlockFieldProps> = ({
-  label,
-  templates,
-  value,
-  onChange,
-  renderField,
-  path,
-  dataCanopyField,
-}) => {
-  const [itemKeys, setItemKeys] = useState<string[]>(() =>
-    value.map(() => `block-${blockKeyCounter++}`),
-  )
-  const [pendingTemplate, setPendingTemplate] = useState<string | null>(null)
-
-  // Sync itemKeys length with value length (adjust state during render)
-  if (value.length > itemKeys.length) {
-    const extras = Array.from(
-      { length: value.length - itemKeys.length },
-      () => `block-${blockKeyCounter++}`,
-    )
-    setItemKeys((prev) => [...prev, ...extras])
-  } else if (value.length < itemKeys.length) {
-    setItemKeys((prev) => prev.slice(0, value.length))
-  }
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  )
-
-  const addBlock = (templateName: string) => {
-    const template = findTemplate(templates, templateName)
-    if (!template) return
-    onChange([...value, { template: templateName, value: {} }])
-    setItemKeys((prev) => [
-      ...prev,
-      `block-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-    ])
-  }
-
-  const moveBlock = (from: number, to: number) => {
-    if (from === to || from < 0 || to < 0 || from >= value.length || to >= value.length) return
-    onChange(arrayMove(value, from, to))
-    setItemKeys((prev) => arrayMove(prev, from, to))
-  }
-
-  const removeBlock = (index: number) => {
-    onChange(value.filter((_, idx) => idx !== index))
-    setItemKeys((prev) => prev.filter((_, idx) => idx !== index))
-  }
-
-  const updateBlockValue = (index: number, val: Record<string, unknown>) => {
-    const next = [...value]
-    next[index] = { ...next[index], value: val }
-    onChange(next)
-  }
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event
-    if (!over || active.id === over.id) return
-
-    const oldIndex = itemKeys.indexOf(String(active.id))
-    const newIndex = itemKeys.indexOf(String(over.id))
-    if (oldIndex === -1 || newIndex === -1) return
-    moveBlock(oldIndex, newIndex)
-  }
-
-  const selectableTemplates = useMemo(
-    () => templates.map((t) => ({ value: t.name, label: t.label ?? t.name })),
-    [templates],
-  )
-
-  return (
-    <Paper
-      withBorder
-      radius="md"
-      p="md"
-      bg="gray.0"
-      data-canopy-field={dataCanopyField ?? formatCanopyPath(path)}
-      shadow="xs"
-    >
-      <Stack gap="sm">
-        <Group justify="space-between">
-          <Text size="xs" fw={700} c="dimmed">
-            {label ?? 'Blocks'}
-          </Text>
-          <Select
-            aria-label="Add block"
-            placeholder="Add block..."
-            data={selectableTemplates}
-            value={pendingTemplate}
-            onChange={(next) => {
-              if (next) {
-                addBlock(next)
-              }
-              setPendingTemplate(null)
-            }}
-            allowDeselect
-            size="xs"
-            w={180}
-          />
-        </Group>
-
-        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
-          <SortableContext items={itemKeys} strategy={verticalListSortingStrategy}>
-            <Stack gap="sm">
-              {value.map((block, idx) => {
-                const template = findTemplate(templates, block.template)
-                const currentPath = [...path, idx]
-
-                return (
-                  <SortableBlock key={itemKeys[idx]} id={itemKeys[idx]}>
-                    <Stack gap="xs">
-                      <Group justify="space-between" align="flex-start">
-                        <Text size="sm" fw={600}>
-                          {template?.label ?? block.template ?? 'Unknown block'}
-                        </Text>
-                        <Group gap={4}>
-                          <ActionIcon
-                            variant="light"
-                            aria-label="Move block up"
-                            disabled={idx === 0}
-                            onClick={() => moveBlock(idx, idx - 1)}
-                          >
-                            ↑
-                          </ActionIcon>
-                          <ActionIcon
-                            variant="light"
-                            aria-label="Move block down"
-                            disabled={idx === value.length - 1}
-                            onClick={() => moveBlock(idx, idx + 1)}
-                          >
-                            ↓
-                          </ActionIcon>
-                          <Button
-                            variant="subtle"
-                            color="red"
-                            size="xs"
-                            onClick={() => removeBlock(idx)}
-                          >
-                            Remove
-                          </Button>
-                        </Group>
-                      </Group>
-
-                      {template ? (
-                        <Stack gap="sm">
-                          {template.fields.map((f: FieldConfig) => (
-                            <React.Fragment key={f.name}>
-                              {renderField(
-                                f,
-                                block.value?.[f.name],
-                                (next) =>
-                                  updateBlockValue(idx, {
-                                    ...block.value,
-                                    [f.name]: next,
-                                  }),
-                                [...currentPath, f.name],
-                              )}
-                            </React.Fragment>
-                          ))}
-                        </Stack>
-                      ) : (
-                        <Text size="xs" c="red">
-                          No template found for &quot;{block.template}&quot;
-                        </Text>
-                      )}
-                    </Stack>
-                  </SortableBlock>
-                )
-              })}
-            </Stack>
-          </SortableContext>
-        </DndContext>
-      </Stack>
-    </Paper>
-  )
-}
-
-export default BlockField

package/src/editor/fields/CodeField.tsx

@@ -1,41 +0,0 @@
-import React, { useId } from 'react'
-
-import { Textarea } from '@mantine/core'
-
-export interface CodeFieldProps {
-  id?: string
-  label?: string
-  value: string
-  onChange: (value: string) => void
-  language?: string
-  dataCanopyField?: string
-}
-
-// Placeholder for Monaco integration; host app can provide custom renderer for production.
-export const CodeField: React.FC<CodeFieldProps> = ({
-  id,
-  label,
-  value,
-  onChange,
-  language,
-  dataCanopyField,
-}) => {
-  const generatedId = useId()
-  const inputId = id ?? generatedId
-  return (
-    <Textarea
-      id={inputId}
-      label={label}
-      value={value}
-      onChange={(e) => onChange(e.currentTarget.value)}
-      placeholder={language ? `Code (${language})` : 'Code'}
-      autosize
-      minRows={6}
-      size="sm"
-      data-canopy-field={dataCanopyField}
-      styles={{ input: { fontFamily: 'Menlo, Consolas, monospace' } }}
-    />
-  )
-}
-
-export default CodeField