canopycms 0.0.0 → 0.0.2

package/src/editor/comments/FieldWrapper.tsx

@@ -1,129 +0,0 @@
-'use client'
-
-import React, { useEffect, useRef, useState } from 'react'
-import { Box, Button } from '@mantine/core'
-import type { CommentThread } from '../../comment-store'
-import { ThreadCarousel } from './ThreadCarousel'
-
-export interface FieldWrapperProps {
-  /** Child form field element */
-  children: React.ReactNode
-  /** CanopyPath identifying this field */
-  canopyPath: string
-  /** Entry path for this field */
-  entryPath: string
-  /** All comment threads for this field */
-  threads: CommentThread[]
-  /** Whether this field is focused from a preview click (scrolls into view and highlights) */
-  autoFocus?: boolean
-  /** Current user ID */
-  currentUserId: string
-  /** Whether user can resolve threads */
-  canResolve: boolean
-  /** Handler to add a comment (receives full context) */
-  onAddComment: (
-    text: string,
-    type: 'field' | 'entry' | 'branch',
-    entryPath?: string,
-    canopyPath?: string,
-    threadId?: string,
-  ) => Promise<void>
-  /** Handler to resolve a thread */
-  onResolveThread: (threadId: string) => Promise<void>
-  /** Field label for positioning the new comment button */
-  fieldLabel?: string
-  /** Thread ID to highlight and scroll to */
-  highlightThreadId?: string
-}
-
-/**
- * Wraps a form field with inline comment functionality.
- * Shows ThreadCarousel when comments exist or when user clicks "New comment".
- */
-export const FieldWrapper: React.FC<FieldWrapperProps> = ({
-  children,
-  canopyPath,
-  entryPath,
-  threads,
-  autoFocus,
-  currentUserId,
-  canResolve,
-  onAddComment,
-  onResolveThread,
-  highlightThreadId,
-}) => {
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const [showCarousel, setShowCarousel] = useState(false)
-
-  // Show carousel if threads exist or user explicitly requested it
-  const shouldShowCarousel = threads.length > 0 || showCarousel
-
-  // Scroll to field when focused from preview
-  useEffect(() => {
-    if (autoFocus) {
-      wrapperRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      })
-    }
-  }, [autoFocus])
-
-  // Wrapper to add field context to comment handler
-  const handleAddComment = async (text: string, threadId?: string) => {
-    await onAddComment(text, 'field', entryPath, canopyPath, threadId)
-  }
-
-  return (
-    <Box ref={wrapperRef} data-canopy-field={canopyPath} pos="relative" style={{ width: '100%' }}>
-      <Box
-        style={{
-          // Add subtle highlight when auto-focused
-          outline: autoFocus ? '2px solid var(--mantine-color-blue-5)' : undefined,
-          outlineOffset: autoFocus ? 2 : undefined,
-          borderRadius: 4,
-          transition: 'outline 0.2s ease',
-        }}
-      >
-        {children}
-      </Box>
-
-      {/* Show "New comment" button when no threads and not showing carousel */}
-      {!shouldShowCarousel && (
-        <Box
-          style={{
-            position: 'absolute',
-            top: 4,
-            right: 8,
-            zIndex: 1,
-          }}
-        >
-          <Button
-            size="xs"
-            variant="subtle"
-            color="gray"
-            onClick={() => setShowCarousel(true)}
-            style={{ fontSize: '0.75rem', height: '1.5rem' }}
-            data-testid={`field-new-comment-${canopyPath}`}
-          >
-            New comment
-          </Button>
-        </Box>
-      )}
-
-      {/* Render ThreadCarousel when threads exist or user requested it */}
-      {shouldShowCarousel && (
-        <ThreadCarousel
-          threads={threads}
-          contextType="field"
-          currentUserId={currentUserId}
-          canResolve={canResolve}
-          onAddComment={handleAddComment}
-          onResolveThread={onResolveThread}
-          autoFocus={autoFocus}
-          autoOpenNewThread={showCarousel && threads.length === 0}
-          highlightThreadId={highlightThreadId}
-        />
-      )}
-    </Box>
-  )
-}

package/src/editor/comments/InlineCommentThread.test.tsx

@@ -1,384 +0,0 @@
-import { describe, it, expect, vi, beforeAll } from 'vitest'
-import { render, screen, waitFor, fireEvent, act } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { MantineProvider } from '@mantine/core'
-import { InlineCommentThread } from './InlineCommentThread'
-import type { CommentThread } from '../../comment-store'
-
-// Setup for Mantine components
-beforeAll(() => {
-  // Mantine color scheme helpers expect matchMedia to exist (jsdom does not provide it)
-  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
-  }
-})
-
-// Wrapper for Mantine components
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-)
-
-describe('InlineCommentThread', () => {
-  const mockThread: CommentThread = {
-    id: 'thread-1',
-    type: 'field',
-    entryPath: 'posts/hello',
-    canopyPath: 'title',
-    authorId: 'alice',
-    createdAt: new Date('2024-01-01T10:00:00Z').toISOString(),
-    resolved: false,
-    comments: [
-      {
-        id: 'comment-1',
-        threadId: 'thread-1',
-        userId: 'alice',
-        timestamp: new Date('2024-01-01T10:00:00Z').toISOString(),
-        text: 'This needs improvement',
-      },
-      {
-        id: 'comment-2',
-        threadId: 'thread-1',
-        userId: 'bob',
-        timestamp: new Date('2024-01-01T11:00:00Z').toISOString(),
-        text: 'I agree, let me revise',
-      },
-    ],
-  }
-
-  const mockResolvedThread: CommentThread = {
-    ...mockThread,
-    id: 'thread-2',
-    resolved: true,
-    resolvedBy: 'alice',
-    resolvedAt: new Date('2024-01-01T12:00:00Z').toISOString(),
-  }
-
-  it('renders all comments in thread', () => {
-    render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    expect(screen.getByText('This needs improvement')).toBeTruthy()
-    expect(screen.getByText('I agree, let me revise')).toBeTruthy()
-  })
-
-  it('shows unresolved badge when thread is not resolved', () => {
-    render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    expect(screen.getAllByText('Unresolved').length).toBeGreaterThan(0)
-    expect(screen.queryAllByText('Resolved')).toHaveLength(0)
-  })
-
-  it('shows resolved badge when thread is resolved', () => {
-    const { container } = render(
-      <InlineCommentThread
-        thread={mockResolvedThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Check that Resolved badge exists and Unresolved doesn't
-    expect(container.textContent).toContain('Resolved')
-    expect(container.textContent).not.toContain('Unresolved')
-  })
-
-  it('shows resolved metadata when thread is resolved', () => {
-    const { container } = render(
-      <InlineCommentThread
-        thread={mockResolvedThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Check that resolved metadata is present in the DOM
-    // Using container.textContent to check the full text content
-    const text = container.textContent || ''
-    expect(text).toMatch(/Resolved by.*alice/)
-  })
-
-  // TODO: Fix async interaction with Mantine Button component in tests
-  // The mock handler isn't being called despite various approaches (userEvent, fireEvent, act)
-  // This functionality works in the real app, but has issues in the test environment
-  it.skip('allows adding a reply', async () => {
-    const onAddReply = vi.fn().mockResolvedValue(undefined)
-
-    render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={onAddReply}
-        onResolve={vi.fn()}
-        currentUserId="charlie"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    const textareas = screen.getAllByPlaceholderText('Write a reply...') as HTMLTextAreaElement[]
-    const textarea = textareas[0]
-
-    // Use act to ensure state updates are flushed
-    await act(async () => {
-      fireEvent.change(textarea, { target: { value: 'My reply' } })
-    })
-
-    // Wait for the text to be in the textarea
-    await waitFor(() => {
-      expect(textarea.value).toBe('My reply')
-    })
-
-    const replyButtons = screen.getAllByRole('button', { name: /reply/i })
-
-    // Wait for button to be enabled
-    await waitFor(() => {
-      expect(replyButtons[0].getAttribute('disabled')).toBeNull()
-    })
-
-    await act(async () => {
-      fireEvent.click(replyButtons[0])
-    })
-
-    await waitFor(
-      () => {
-        expect(onAddReply).toHaveBeenCalledWith('My reply')
-      },
-      { timeout: 3000 },
-    )
-  })
-
-  it('clears reply text after successful submission', async () => {
-    const onAddReply = vi.fn().mockResolvedValue(undefined)
-    const user = userEvent.setup()
-
-    render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={onAddReply}
-        onResolve={vi.fn()}
-        currentUserId="charlie"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    const textareas = screen.getAllByPlaceholderText('Write a reply...') as HTMLTextAreaElement[]
-    const textarea = textareas[0]
-    await user.type(textarea, 'My reply')
-    expect(textarea.value).toBe('My reply')
-
-    const replyButtons = screen.getAllByRole('button', { name: /reply/i })
-    await user.click(replyButtons[0])
-
-    await waitFor(() => {
-      expect(textarea.value).toBe('')
-    })
-  })
-
-  it('shows resolve button when user can resolve and thread is unresolved', () => {
-    render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    const resolveButtons = screen.getAllByRole('button', { name: /resolve/i })
-    expect(resolveButtons.length).toBeGreaterThan(0)
-  })
-
-  it('hides resolve button when user cannot resolve', () => {
-    const { container } = render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={false}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Check that there's no button with exactly "Resolve" text
-    const buttons = Array.from(container.querySelectorAll('button'))
-    const resolveButton = buttons.find((btn) => btn.textContent === 'Resolve')
-    expect(resolveButton).toBeUndefined()
-  })
-
-  it('hides resolve button when thread is already resolved', () => {
-    const { container } = render(
-      <InlineCommentThread
-        thread={mockResolvedThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Check that there's no button with exactly "Resolve" text
-    const buttons = Array.from(container.querySelectorAll('button'))
-    const resolveButton = buttons.find((btn) => btn.textContent === 'Resolve')
-    expect(resolveButton).toBeUndefined()
-  })
-
-  // TODO: Fix async interaction with Mantine Button component in tests
-  it.skip('calls onResolve when resolve button is clicked', async () => {
-    const onResolve = vi.fn().mockResolvedValue(undefined)
-
-    render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={vi.fn()}
-        onResolve={onResolve}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    const resolveButtons = screen.getAllByRole('button', { name: /resolve/i })
-
-    // Use fireEvent with act for more reliable interaction
-    await act(async () => {
-      fireEvent.click(resolveButtons[0])
-    })
-
-    await waitFor(() => {
-      expect(onResolve).toHaveBeenCalled()
-    })
-  })
-
-  it('disables reply button when text is empty', () => {
-    render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    const replyButtons = screen.getAllByRole('button', { name: /reply/i })
-    expect(replyButtons[0].hasAttribute('disabled')).toBe(true)
-  })
-
-  it('enables reply button when text is entered', async () => {
-    const user = userEvent.setup()
-
-    render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    const replyButtons = screen.getAllByRole('button', { name: /reply/i })
-    expect(replyButtons[0].hasAttribute('disabled')).toBe(true)
-
-    const textareas = screen.getAllByPlaceholderText('Write a reply...')
-    await user.type(textareas[0], 'Some text')
-
-    expect(replyButtons[0].hasAttribute('disabled')).toBe(false)
-  })
-
-  it('formats timestamps correctly', () => {
-    const recentThread: CommentThread = {
-      ...mockThread,
-      comments: [
-        {
-          id: 'comment-recent',
-          threadId: 'thread-1',
-          userId: 'alice',
-          timestamp: new Date(Date.now() - 2 * 60 * 1000).toISOString(), // 2 minutes ago
-          text: 'Recent comment',
-        },
-      ],
-    }
-
-    render(
-      <InlineCommentThread
-        thread={recentThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    expect(screen.getByText(/2m ago/)).toBeTruthy()
-  })
-
-  it('renders multiple comments with separators', () => {
-    const { container } = render(
-      <InlineCommentThread
-        thread={mockThread}
-        onAddReply={vi.fn()}
-        onResolve={vi.fn()}
-        currentUserId="alice"
-        canResolve={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Both comments should be visible
-    expect(container.textContent).toContain('This needs improvement')
-    expect(container.textContent).toContain('I agree, let me revise')
-    // Both users should be visible
-    expect(container.textContent).toContain('alice')
-    expect(container.textContent).toContain('bob')
-  })
-})