canopycms 0.0.0

package/src/editor/CanopyEditor.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import React, { useMemo } from 'react'
+
+import type { CanopyClientConfig } from '../config'
+import type { FormValue } from './FormRenderer'
+import type { EditorProps } from './Editor'
+import { Editor } from './Editor'
+import { ApiClientProvider } from './context'
+import { buildEditorCollections, buildPreviewBaseByCollection } from './editor-config'
+
+export interface CanopyEditorProps extends Omit<
+  EditorProps,
+  | 'collections'
+  | 'previewBaseByCollection'
+  | 'title'
+  | 'subtitle'
+  | 'themeOptions'
+  | 'entries'
+  | 'contentRoot'
+  | 'operatingMode'
+> {
+  config: CanopyClientConfig
+  entries?: EditorProps['entries']
+}
+
+export const CanopyEditor: React.FC<CanopyEditorProps> = ({
+  config,
+  entries = [],
+  initialSelectedId,
+  initialValues,
+  renderPreview,
+  onCreateEntry,
+  branchName,
+}) => {
+  const collections = useMemo(() => buildEditorCollections(config.flatSchema), [config.flatSchema])
+  const previewBase = useMemo(
+    () => ({
+      ...buildPreviewBaseByCollection(config, config.flatSchema),
+      ...(config.editor?.previewBase ?? {}),
+    }),
+    [config],
+  )
+  const resolvedBranchName = branchName ?? config.defaultBaseBranch ?? 'main'
+  const resolvedTitle = config.editor?.title ?? 'CanopyCMS Editor'
+  const resolvedSubtitle = config.editor?.subtitle
+  const resolvedTheme = (config.editor?.theme as EditorProps['themeOptions']) ?? undefined
+
+  return (
+    <ApiClientProvider>
+      <Editor
+        entries={entries}
+        title={resolvedTitle}
+        subtitle={resolvedSubtitle}
+        branchName={resolvedBranchName}
+        operatingMode={config.mode}
+        initialSelectedId={initialSelectedId}
+        initialValues={initialValues as Record<string, FormValue> | undefined}
+        renderPreview={renderPreview}
+        onCreateEntry={onCreateEntry}
+        collections={collections}
+        contentRoot={config.contentRoot}
+        previewBaseByCollection={previewBase}
+        themeOptions={resolvedTheme}
+        AccountComponent={config.editor?.AccountComponent}
+        onAccountClick={config.editor?.onAccountClick}
+        onLogoutClick={config.editor?.onLogoutClick}
+      />
+    </ApiClientProvider>
+  )
+}
+
+export default CanopyEditor

package/src/editor/CanopyEditorPage.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { describe, expect, it, vi } from 'vitest'
+
+import type { CanopyEditorProps } from './CanopyEditor'
+import { CanopyEditorPage } from './CanopyEditorPage'
+
+let capturedProps: CanopyEditorProps | undefined
+
+vi.mock('./CanopyEditor', () => {
+  return {
+    __esModule: true,
+    CanopyEditor: (props: CanopyEditorProps) => {
+      capturedProps = props
+      return <div data-testid="mock-canopy-editor">{props.branchName}</div>
+    },
+  }
+})
+
+const baseConfig = {
+  schema: {
+    collections: [
+      {
+        name: 'posts',
+        path: 'posts',
+        entries: {
+          format: 'json',
+          fields: [{ name: 'title', type: 'string' }],
+        },
+      },
+    ],
+  },
+  contentRoot: 'content',
+  gitBotAuthorName: 'Bot',
+  gitBotAuthorEmail: 'bot@example.com',
+  defaultBaseBranch: 'main',
+} as const
+
+describe('CanopyEditorPage', () => {
+  it('passes search params through to CanopyEditor', () => {
+    capturedProps = undefined
+    const { render } = require('@testing-library/react') as typeof import('@testing-library/react')
+    const Page = CanopyEditorPage(baseConfig as any)
+    render(<Page searchParams={{ branch: 'feature', entry: 'id-1' }} />)
+
+    const props = capturedProps as CanopyEditorProps | undefined
+    expect(props?.branchName).toBe('feature')
+    expect(props?.initialSelectedId).toBe('id-1')
+  })
+
+  it('falls back to config defaults when search params are missing', () => {
+    capturedProps = undefined
+    const { render } = require('@testing-library/react') as typeof import('@testing-library/react')
+    const Page = CanopyEditorPage(baseConfig as any)
+    render(<Page />)
+    const props = capturedProps as CanopyEditorProps | undefined
+    expect(props?.branchName).toBe('main')
+  })
+})

package/src/editor/CanopyEditorPage.tsx

@@ -0,0 +1,25 @@
+import type { CanopyClientConfig } from '../config'
+import { CanopyEditor } from './CanopyEditor'
+
+export const CanopyEditorPage = (config: CanopyClientConfig) => {
+  const CanopyEditorPageInner = ({
+    searchParams,
+  }: {
+    searchParams?: { branch?: string; entry?: string }
+  }) => {
+    const branchName = searchParams?.branch ?? config.defaultBaseBranch ?? 'main'
+    const initialSelectedId = searchParams?.entry
+    return (
+      <CanopyEditor
+        config={config}
+        branchName={branchName}
+        initialSelectedId={initialSelectedId}
+        entries={[]}
+      />
+    )
+  }
+  CanopyEditorPageInner.displayName = 'CanopyEditorPage'
+  return CanopyEditorPageInner
+}
+
+export default CanopyEditorPage

package/src/editor/CommentsPanel.stories.tsx

@@ -0,0 +1,184 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CommentsPanel } from './CommentsPanel'
+import type { CommentThread } from '../comment-store'
+
+const meta: Meta<typeof CommentsPanel> = {
+  title: 'Editor/CommentsPanel',
+  component: CommentsPanel,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof CommentsPanel>
+
+const sampleThreads: CommentThread[] = [
+  {
+    id: 'thread-1',
+    type: 'field',
+    entryPath: 'blog/intro',
+    canopyPath: 'title',
+    authorId: 'alice',
+    resolved: false,
+    createdAt: new Date(Date.now() - 3600000).toISOString(),
+    comments: [
+      {
+        id: 'comment-1',
+        threadId: 'thread-1',
+        userId: 'alice',
+        timestamp: new Date(Date.now() - 3600000).toISOString(),
+        text: 'This heading should be more descriptive. What about "Getting Started with Our Platform"?',
+      },
+      {
+        id: 'comment-2',
+        threadId: 'thread-1',
+        userId: 'bob',
+        timestamp: new Date(Date.now() - 1800000).toISOString(),
+        text: "Good suggestion! I'll update it.",
+      },
+    ],
+  },
+  {
+    id: 'thread-2',
+    type: 'entry',
+    entryPath: 'blog/intro',
+    authorId: 'charlie',
+    resolved: false,
+    createdAt: new Date(Date.now() - 7200000).toISOString(),
+    comments: [
+      {
+        id: 'comment-3',
+        threadId: 'thread-2',
+        userId: 'charlie',
+        timestamp: new Date(Date.now() - 7200000).toISOString(),
+        text: 'Please add alt text to all images before submitting.',
+      },
+    ],
+  },
+  {
+    id: 'thread-3',
+    type: 'field',
+    entryPath: 'pages/about',
+    canopyPath: 'hero.image',
+    authorId: 'alice',
+    resolved: true,
+    createdAt: new Date(Date.now() - 86400000).toISOString(),
+    resolvedBy: 'bob',
+    resolvedAt: new Date(Date.now() - 43200000).toISOString(),
+    comments: [
+      {
+        id: 'comment-4',
+        threadId: 'thread-3',
+        userId: 'alice',
+        timestamp: new Date(Date.now() - 86400000).toISOString(),
+        text: 'Can we add a team photo here?',
+      },
+      {
+        id: 'comment-5',
+        threadId: 'thread-3',
+        userId: 'bob',
+        timestamp: new Date(Date.now() - 43200000).toISOString(),
+        text: 'Done! Added the photo from our last retreat.',
+      },
+    ],
+  },
+]
+
+export const Default: Story = {
+  args: {
+    branchName: 'feature/new-content',
+    comments: sampleThreads,
+    canResolve: true,
+    onAddComment: async (text: string, threadId?: string) => {
+      console.log('Add comment:', { text, threadId })
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    },
+    onResolveThread: async (threadId: string) => {
+      console.log('Resolve thread:', threadId)
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    },
+    onClose: () => console.log('Close panel'),
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    branchName: 'feature/empty-branch',
+    comments: [],
+    canResolve: true,
+    onAddComment: async (text: string) => {
+      console.log('Add comment:', text)
+    },
+    onResolveThread: async (threadId: string) => {
+      console.log('Resolve thread:', threadId)
+    },
+    onClose: () => console.log('Close panel'),
+  },
+}
+
+export const ViewerOnly: Story = {
+  args: {
+    branchName: 'feature/review-only',
+    comments: sampleThreads,
+    canResolve: false,
+    onAddComment: async (text: string, threadId?: string) => {
+      console.log('Add comment:', { text, threadId })
+    },
+    onResolveThread: async (threadId: string) => {
+      console.log('Resolve thread (should not be called):', threadId)
+    },
+    onClose: () => console.log('Close panel'),
+  },
+}
+
+export const ManyComments: Story = {
+  args: {
+    branchName: 'feature/active-discussion',
+    comments: [
+      ...sampleThreads,
+      {
+        id: 'thread-4',
+        type: 'branch',
+        authorId: 'dan',
+        resolved: false,
+        createdAt: new Date(Date.now() - 600000).toISOString(),
+        comments: [
+          {
+            id: 'comment-6',
+            threadId: 'thread-4',
+            userId: 'dan',
+            timestamp: new Date(Date.now() - 600000).toISOString(),
+            text: 'What about adding a call-to-action button at the end?',
+          },
+        ],
+      },
+      {
+        id: 'thread-5',
+        type: 'field',
+        entryPath: 'products/widget',
+        canopyPath: 'pricing.monthly',
+        authorId: 'eve',
+        resolved: false,
+        createdAt: new Date(Date.now() - 300000).toISOString(),
+        comments: [
+          {
+            id: 'comment-7',
+            threadId: 'thread-5',
+            userId: 'eve',
+            timestamp: new Date(Date.now() - 300000).toISOString(),
+            text: 'The pricing information here is outdated.',
+          },
+        ],
+      },
+    ],
+    canResolve: true,
+    onAddComment: async (text: string, threadId?: string) => {
+      console.log('Add comment:', { text, threadId })
+    },
+    onResolveThread: async (threadId: string) => {
+      console.log('Resolve thread:', threadId)
+    },
+    onClose: () => console.log('Close panel'),
+  },
+}

package/src/editor/CommentsPanel.tsx

@@ -0,0 +1,338 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  Badge,
+  Button,
+  Drawer,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Textarea,
+  Title,
+  Switch,
+} from '@mantine/core'
+import type { CommentThread } from '../comment-store'
+import type { UserSearchResult } from '../auth/types'
+import { UserBadge } from './components/UserBadge'
+
+export interface CommentsPanelProps {
+  branchName: string
+  comments: CommentThread[]
+  canResolve: boolean
+  onAddComment: (
+    text: string,
+    type: 'field' | 'entry' | 'branch',
+    entryPath?: string,
+    canopyPath?: string,
+    threadId?: string,
+  ) => Promise<void>
+  onResolveThread: (threadId: string) => Promise<void>
+  onClose: () => void
+  /** Jump to field and auto-expand inline comments */
+  onJumpToField?: (entryPath: string, canopyPath: string, threadId: string) => void
+  /** Jump to entry comments (top of form) */
+  onJumpToEntry?: (entryPath: string, threadId: string) => void
+  /** Open branch manager */
+  onJumpToBranch?: (threadId: string) => void
+  /** Optional function to fetch user metadata for displaying user badges */
+  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
+}
+
+export const CommentsPanel: React.FC<CommentsPanelProps> = ({
+  branchName,
+  comments,
+  canResolve,
+  onAddComment,
+  onResolveThread,
+  onClose,
+  onJumpToField,
+  onJumpToEntry,
+  onJumpToBranch,
+  onGetUserMetadata,
+}) => {
+  const [newCommentText, setNewCommentText] = useState('')
+  const [replyTo, setReplyTo] = useState<string | null>(null)
+  const [showResolved, setShowResolved] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const filteredThreads = showResolved ? comments : comments.filter((t) => !t.resolved)
+
+  const handleAddComment = async () => {
+    if (!newCommentText.trim()) return
+
+    setIsSubmitting(true)
+    try {
+      if (replyTo) {
+        // Reply to existing thread - get context from the thread
+        const thread = comments.find((t) => t.id === replyTo)
+        if (thread) {
+          await onAddComment(
+            newCommentText,
+            thread.type,
+            thread.entryPath,
+            thread.canopyPath,
+            replyTo,
+          )
+        }
+      } else {
+        // New branch-level comment (default for panel)
+        await onAddComment(newCommentText, 'branch', undefined, undefined, undefined)
+      }
+      setNewCommentText('')
+      setReplyTo(null)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleResolve = async (threadId: string) => {
+    setIsSubmitting(true)
+    try {
+      await onResolveThread(threadId)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const formatTimestamp = (timestamp: string) => {
+    try {
+      const date = new Date(timestamp)
+      return date.toLocaleString()
+    } catch {
+      return timestamp
+    }
+  }
+
+  return (
+    <Drawer
+      opened
+      onClose={onClose}
+      position="right"
+      size={420}
+      title={
+        <div>
+          <Title order={4}>Comments</Title>
+          <Text size="xs" c="dimmed">
+            {branchName}
+          </Text>
+        </div>
+      }
+    >
+      <Stack gap="md" h="100%" style={{ display: 'flex', flexDirection: 'column' }}>
+        {/* Add new comment */}
+        <Paper withBorder p="md">
+          <Stack gap="sm">
+            {replyTo && (
+              <Group justify="space-between">
+                <Text size="xs" c="dimmed">
+                  Replying to thread
+                </Text>
+                <Button size="xs" variant="subtle" onClick={() => setReplyTo(null)}>
+                  Cancel
+                </Button>
+              </Group>
+            )}
+            <Textarea
+              placeholder={replyTo ? 'Write a reply...' : 'Write a comment...'}
+              value={newCommentText}
+              onChange={(e) => setNewCommentText(e.target.value)}
+              minRows={3}
+              disabled={isSubmitting}
+              data-testid="comment-textarea"
+            />
+            <Button
+              onClick={handleAddComment}
+              size="sm"
+              loading={isSubmitting}
+              disabled={!newCommentText.trim()}
+              data-testid="comment-submit"
+            >
+              {replyTo ? 'Reply' : 'Add Comment'}
+            </Button>
+          </Stack>
+        </Paper>
+
+        {/* Filter toggle */}
+        <Group justify="space-between">
+          <Text size="sm" fw={500}>
+            {filteredThreads.length} {filteredThreads.length === 1 ? 'thread' : 'threads'}
+          </Text>
+          <Switch
+            label="Show resolved"
+            checked={showResolved}
+            onChange={(e) => setShowResolved(e.currentTarget.checked)}
+            size="sm"
+          />
+        </Group>
+
+        {/* Comment threads */}
+        <ScrollArea style={{ flex: 1 }}>
+          {filteredThreads.length === 0 ? (
+            <Text size="sm" c="dimmed" ta="center" py="xl">
+              {showResolved ? 'No comments yet' : 'No unresolved comments'}
+            </Text>
+          ) : (
+            <Stack gap="md">
+              {filteredThreads.map((thread) => (
+                <Paper
+                  key={thread.id}
+                  withBorder
+                  p="md"
+                  bg={thread.resolved ? 'gray.0' : undefined}
+                  data-testid="comment-thread"
+                >
+                  <Stack gap="xs">
+                    <Group justify="space-between" align="flex-start">
+                      <Group gap="xs">
+                        <Badge
+                          size="xs"
+                          variant="outline"
+                          color={
+                            thread.type === 'field'
+                              ? 'blue'
+                              : thread.type === 'entry'
+                                ? 'grape'
+                                : 'gray'
+                          }
+                        >
+                          {thread.type}
+                        </Badge>
+                        {thread.entryPath && (
+                          <Badge size="xs" variant="light">
+                            {thread.entryPath}
+                          </Badge>
+                        )}
+                        {thread.canopyPath && (
+                          <Badge size="xs" variant="dot">
+                            {thread.canopyPath}
+                          </Badge>
+                        )}
+                        {thread.resolved && (
+                          <Badge size="xs" color="green" variant="light">
+                            Resolved
+                          </Badge>
+                        )}
+                      </Group>
+                      <Group gap="xs">
+                        {canResolve && !thread.resolved && (
+                          <Button
+                            size="xs"
+                            variant="subtle"
+                            color="green"
+                            onClick={() => handleResolve(thread.id)}
+                            loading={isSubmitting}
+                          >
+                            Resolve
+                          </Button>
+                        )}
+                      </Group>
+                    </Group>
+
+                    {/* Jump to navigation buttons */}
+                    <Group gap="xs">
+                      {thread.type === 'field' &&
+                        thread.entryPath &&
+                        thread.canopyPath &&
+                        onJumpToField && (
+                          <Button
+                            size="xs"
+                            variant="light"
+                            onClick={() => {
+                              onJumpToField(thread.entryPath!, thread.canopyPath!, thread.id)
+                              onClose()
+                            }}
+                          >
+                            Jump to field
+                          </Button>
+                        )}
+                      {thread.type === 'entry' && thread.entryPath && onJumpToEntry && (
+                        <Button
+                          size="xs"
+                          variant="light"
+                          onClick={() => {
+                            onJumpToEntry(thread.entryPath!, thread.id)
+                            onClose()
+                          }}
+                        >
+                          Jump to entry
+                        </Button>
+                      )}
+                      {thread.type === 'branch' && onJumpToBranch && (
+                        <Button
+                          size="xs"
+                          variant="light"
+                          onClick={() => {
+                            onJumpToBranch(thread.id)
+                            onClose()
+                          }}
+                        >
+                          Go to branch
+                        </Button>
+                      )}
+                    </Group>
+
+                    {thread.comments.map((comment, idx) => (
+                      <div key={comment.id}>
+                        {idx > 0 && (
+                          <div
+                            style={{
+                              borderTop: '1px solid var(--mantine-color-gray-3)',
+                              margin: '8px 0',
+                            }}
+                          />
+                        )}
+                        <Stack gap={4}>
+                          <Group gap="xs">
+                            {onGetUserMetadata ? (
+                              <UserBadge
+                                userId={comment.userId}
+                                getUserMetadata={onGetUserMetadata}
+                                variant="avatar-name"
+                                size="xs"
+                                showEmailTooltip={true}
+                                showBadge={true}
+                                badgeVariant="light"
+                                color="gray"
+                              />
+                            ) : (
+                              <Text size="xs" fw={500}>
+                                {comment.userId}
+                              </Text>
+                            )}
+                            <Text size="xs" c="dimmed">
+                              {formatTimestamp(comment.timestamp)}
+                            </Text>
+                          </Group>
+                          <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>
+                            {comment.text}
+                          </Text>
+                        </Stack>
+                      </div>
+                    ))}
+
+                    {!thread.resolved && (
+                      <Button
+                        size="xs"
+                        variant="subtle"
+                        onClick={() => {
+                          setReplyTo(thread.id)
+                          setNewCommentText('')
+                        }}
+                        mt="xs"
+                      >
+                        Reply
+                      </Button>
+                    )}
+                  </Stack>
+                </Paper>
+              ))}
+            </Stack>
+          )}
+        </ScrollArea>
+      </Stack>
+    </Drawer>
+  )
+}