canopycms 0.0.0 → 0.0.2

package/src/editor/comments/InlineCommentThread.tsx

@@ -1,246 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { Alert, Badge, Button, Group, Paper, Stack, Text, Textarea } from '@mantine/core'
-import { IconAlertCircle } from '@tabler/icons-react'
-import type { CommentThread } from '../../comment-store'
-import type { UserSearchResult } from '../../auth/types'
-import { UserBadge } from '../components/UserBadge'
-
-export interface InlineCommentThreadProps {
-  /** The thread to display */
-  thread: CommentThread
-  /** Handler to add a reply to this thread */
-  onAddReply: (text: string) => Promise<void>
-  /** Handler to resolve this thread */
-  onResolve: () => Promise<void>
-  /** Current user ID for permission checking */
-  currentUserId: string
-  /** Whether user can resolve threads */
-  canResolve: boolean
-  /** Optional function to fetch user metadata for displaying user badges */
-  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
-}
-
-/**
- * Individual comment thread display within the carousel.
- * Always shows full thread view with per-thread scrolling.
- */
-export const InlineCommentThread: React.FC<InlineCommentThreadProps> = ({
-  thread,
-  onAddReply,
-  onResolve,
-  currentUserId,
-  canResolve,
-  onGetUserMetadata,
-}) => {
-  const [replyText, setReplyText] = useState('')
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const handleReply = async () => {
-    if (!replyText.trim()) return
-
-    setIsSubmitting(true)
-    setError(null)
-    try {
-      await onAddReply(replyText)
-      setReplyText('')
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to add reply')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  const handleResolve = async () => {
-    setIsSubmitting(true)
-    setError(null)
-    try {
-      await onResolve()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to resolve thread')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  const canUserResolve = () => {
-    if (!canResolve) return false
-    // Thread author or user with resolver permission
-    return thread.authorId === currentUserId || canResolve
-  }
-
-  const formatTimestamp = (timestamp: string) => {
-    try {
-      const date = new Date(timestamp)
-      const now = new Date()
-      const diff = now.getTime() - date.getTime()
-      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-
-      if (days === 0) {
-        const hours = Math.floor(diff / (1000 * 60 * 60))
-        if (hours === 0) {
-          const minutes = Math.floor(diff / (1000 * 60))
-          return minutes === 0 ? 'just now' : `${minutes}m ago`
-        }
-        return `${hours}h ago`
-      }
-      return `${days}d ago`
-    } catch {
-      return timestamp
-    }
-  }
-
-  // Always show full thread view with per-thread scrolling
-  return (
-    <Paper
-      withBorder
-      p="md"
-      bg="white"
-      data-testid="inline-comment-thread"
-      style={{
-        width: '100%',
-        overflowY: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Stack gap="md">
-        <Group gap="xs">
-          {!thread.resolved && (
-            <Badge size="xs" color="orange" variant="light">
-              Unresolved
-            </Badge>
-          )}
-          {thread.resolved && (
-            <Badge size="xs" color="green" variant="light">
-              Resolved
-            </Badge>
-          )}
-        </Group>
-
-        {/* All comments in thread */}
-        <Stack gap="md">
-          {thread.comments.map((comment, idx) => (
-            <div key={comment.id}>
-              {idx > 0 && (
-                <div
-                  style={{
-                    borderTop: '1px solid var(--mantine-color-gray-3)',
-                    marginTop: 8,
-                    marginBottom: 8,
-                  }}
-                />
-              )}
-              <Stack gap={4}>
-                <Group gap="xs" justify="space-between">
-                  {onGetUserMetadata ? (
-                    <UserBadge
-                      userId={comment.userId}
-                      getUserMetadata={onGetUserMetadata}
-                      variant="avatar-name"
-                      size="xs"
-                      showEmailTooltip={true}
-                      showBadge={true}
-                      badgeVariant="light"
-                      color="gray"
-                    />
-                  ) : (
-                    <Text size="xs" fw={600}>
-                      {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>
-          ))}
-        </Stack>
-
-        {/* Error display */}
-        {error && (
-          <Alert
-            icon={<IconAlertCircle size={16} />}
-            color="red"
-            variant="light"
-            onClose={() => setError(null)}
-            withCloseButton
-          >
-            {error}
-          </Alert>
-        )}
-
-        {/* Reply box (only if not resolved) */}
-        {!thread.resolved && (
-          <Stack gap="xs">
-            <Textarea
-              placeholder="Write a reply..."
-              value={replyText}
-              onChange={(e) => setReplyText(e.target.value)}
-              minRows={2}
-              disabled={isSubmitting}
-            />
-            <Group gap="xs">
-              <Button
-                size="xs"
-                onClick={handleReply}
-                loading={isSubmitting}
-                disabled={!replyText.trim()}
-              >
-                Reply
-              </Button>
-              {canUserResolve() && (
-                <Button
-                  size="xs"
-                  variant="light"
-                  color="green"
-                  onClick={handleResolve}
-                  loading={isSubmitting}
-                  data-testid="resolve-thread-button"
-                >
-                  Resolve
-                </Button>
-              )}
-            </Group>
-          </Stack>
-        )}
-
-        {/* Resolved info */}
-        {thread.resolved && thread.resolvedBy && (
-          <Group gap={4}>
-            <Text size="xs" c="dimmed" fs="italic">
-              Resolved by
-            </Text>
-            {onGetUserMetadata ? (
-              <UserBadge
-                userId={thread.resolvedBy}
-                getUserMetadata={onGetUserMetadata}
-                variant="avatar-name"
-                size="xs"
-                showEmailTooltip={true}
-                showBadge={true}
-                badgeVariant="light"
-                color="gray"
-              />
-            ) : (
-              <Text size="xs" c="dimmed" fs="italic">
-                {thread.resolvedBy}
-              </Text>
-            )}
-            {thread.resolvedAt && (
-              <Text size="xs" c="dimmed" fs="italic">
-                {formatTimestamp(thread.resolvedAt)}
-              </Text>
-            )}
-          </Group>
-        )}
-      </Stack>
-    </Paper>
-  )
-}

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

@@ -1,393 +0,0 @@
-import { describe, it, expect, vi, beforeAll } from 'vitest'
-import { render, screen, fireEvent, act } from '@testing-library/react'
-import { MantineProvider } from '@mantine/core'
-import { ThreadCarousel } from './ThreadCarousel'
-import type { CommentThread } from '../../comment-store'
-
-// Setup for Mantine components
-beforeAll(() => {
-  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
-  }
-
-  // Mock scrollTo for carousel
-  Element.prototype.scrollTo = vi.fn() as any
-})
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-)
-
-describe('ThreadCarousel', () => {
-  const mockThreads: 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: 'First comment',
-        },
-      ],
-    },
-    {
-      id: 'thread-2',
-      type: 'field',
-      entryPath: 'posts/hello',
-      canopyPath: 'title',
-      authorId: 'bob',
-      createdAt: new Date('2024-01-01T11:00:00Z').toISOString(),
-      resolved: true,
-      resolvedBy: 'bob',
-      resolvedAt: new Date('2024-01-01T12:00:00Z').toISOString(),
-      comments: [
-        {
-          id: 'comment-2',
-          threadId: 'thread-2',
-          userId: 'bob',
-          timestamp: new Date('2024-01-01T11:00:00Z').toISOString(),
-          text: 'Second comment',
-        },
-      ],
-    },
-    {
-      id: 'thread-3',
-      type: 'field',
-      entryPath: 'posts/hello',
-      canopyPath: 'title',
-      authorId: 'charlie',
-      createdAt: new Date('2024-01-01T09:00:00Z').toISOString(),
-      resolved: false,
-      comments: [
-        {
-          id: 'comment-3',
-          threadId: 'thread-3',
-          userId: 'charlie',
-          timestamp: new Date('2024-01-01T09:00:00Z').toISOString(),
-          text: 'Third comment',
-        },
-      ],
-    },
-  ]
-
-  it('renders with no threads', () => {
-    const { container } = render(
-      <ThreadCarousel
-        threads={[]}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    expect(container.textContent).toContain('No comments yet')
-  })
-
-  it('renders thread count in header', () => {
-    const { container } = render(
-      <ThreadCarousel
-        threads={mockThreads}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    expect(container.textContent).toContain('Comments (3)')
-  })
-
-  it('shows unresolved count', () => {
-    const { container } = render(
-      <ThreadCarousel
-        threads={mockThreads}
-        label="Test Comments"
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // 2 unresolved threads out of 3 total
-    expect(container.textContent).toContain('Test Comments (3)')
-    expect(container.textContent).toContain('2 unresolved')
-  })
-
-  it('sorts unresolved threads first', () => {
-    const { container } = render(
-      <ThreadCarousel
-        threads={mockThreads}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // thread-1 and thread-3 are unresolved
-    // First comment should be visible (unresolved threads come first)
-    expect(container.textContent).toContain('First comment')
-    expect(container.textContent).toContain('Third comment')
-  })
-
-  it('shows navigation arrows when multiple threads', () => {
-    render(
-      <ThreadCarousel
-        threads={mockThreads}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    const buttons = screen.getAllByRole('button')
-    // Should have navigation buttons (previous, next)
-    const navButtons = buttons.filter((btn) => {
-      const ariaLabel = btn.getAttribute('aria-label')
-      return (
-        ariaLabel?.includes('ChevronLeft') ||
-        ariaLabel?.includes('ChevronRight') ||
-        btn.querySelector('svg') !== null
-      )
-    })
-    expect(navButtons.length).toBeGreaterThan(0)
-  })
-
-  it('shows New button', () => {
-    render(
-      <ThreadCarousel
-        threads={mockThreads}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Use getAllByText since there might be multiple New buttons
-    const newButtons = screen.getAllByText('+ New')
-    expect(newButtons.length).toBeGreaterThan(0)
-  })
-
-  // Skip - similar issue to InlineCommentThread async tests (button clicks not triggering state changes)
-  it.skip('opens new thread box when New button clicked', async () => {
-    render(
-      <ThreadCarousel
-        threads={[]}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    const newButtons = screen.getAllByText('+ New')
-    await act(async () => {
-      fireEvent.click(newButtons[0])
-    })
-
-    expect(screen.getByPlaceholderText('Start a new thread...')).toBeTruthy()
-  })
-
-  // Skip this test for now - clicking New button doesn't toggle properly in test env
-  it.skip('displays error when comment creation fails', async () => {
-    const onAddComment = vi.fn().mockRejectedValue(new Error('Network error'))
-
-    render(
-      <ThreadCarousel
-        threads={[]}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={onAddComment}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Open new thread box
-    const newButtons = screen.getAllByText('+ New')
-    await act(async () => {
-      fireEvent.click(newButtons[0])
-    })
-
-    // Type comment
-    const textarea = screen.getByPlaceholderText('Start a new thread...')
-    await act(async () => {
-      fireEvent.change(textarea, { target: { value: 'Test comment' } })
-    })
-
-    // Click create
-    const createButton = screen.getByText('Create Thread')
-    await act(async () => {
-      fireEvent.click(createButton)
-    })
-
-    // Wait for error to appear
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 100))
-    })
-
-    // Error should be displayed
-    const alerts = document.querySelectorAll('[role="alert"]')
-    expect(alerts.length).toBeGreaterThan(0)
-  })
-
-  it('shows thread counter with current position', () => {
-    const { container } = render(
-      <ThreadCarousel
-        threads={mockThreads}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Should show "1/3" initially
-    expect(container.textContent).toMatch(/1\/3/)
-  })
-
-  it('renders all threads in carousel', () => {
-    const { container } = render(
-      <ThreadCarousel
-        threads={mockThreads}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // All thread comments should be rendered (even if not visible)
-    expect(container.textContent).toContain('First comment')
-    expect(container.textContent).toContain('Second comment')
-    expect(container.textContent).toContain('Third comment')
-  })
-
-  it('auto-opens new thread box when autoOpenNewThread is true', () => {
-    render(
-      <ThreadCarousel
-        threads={[]}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-        autoOpenNewThread={true}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Should automatically show the new thread textarea
-    expect(screen.getByPlaceholderText('Start a new thread...')).toBeTruthy()
-  })
-
-  it('highlights thread when highlightThreadId is provided', async () => {
-    const { container } = render(
-      <ThreadCarousel
-        threads={mockThreads}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-        highlightThreadId="thread-2"
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Wait for highlight effect to apply
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 100))
-    })
-
-    // Check for highlight styling (outline)
-    const threadElements = container.querySelectorAll('[style*="outline"]')
-    expect(threadElements.length).toBeGreaterThan(0)
-  })
-
-  it('renders with single thread (no navigation arrows)', () => {
-    const singleThread = [mockThreads[0]]
-
-    const { container } = render(
-      <ThreadCarousel
-        threads={singleThread}
-        contextType="field"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    // Should NOT show navigation counter for single thread
-    expect(container.textContent).not.toMatch(/1\/1/)
-  })
-
-  it('uses custom label when provided', () => {
-    const { container } = render(
-      <ThreadCarousel
-        threads={mockThreads}
-        label="Entry Discussion"
-        contextType="entry"
-        currentUserId="alice"
-        canResolve={true}
-        onAddComment={vi.fn()}
-        onResolveThread={vi.fn()}
-      />,
-      { wrapper: Wrapper },
-    )
-
-    expect(container.textContent).toContain('Entry Discussion')
-  })
-})