canopycms 0.0.0 → 0.0.2

package/src/editor/CanopyEditor.tsx

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

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

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

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

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