ai-design-system 0.1.0

package/components/composites/index.ts

@@ -0,0 +1,90 @@
+/**
+ * Blocks
+ *
+ * Central export point for all block components.
+ * Blocks are composite components that extend AI elements with enhanced functionality.
+ */
+
+// ToolCallDisplay Block
+export { ToolCallDisplay } from './ToolCallDisplay'
+export type { ToolCallDisplayProps, ToolCall } from './ToolCallDisplay'
+
+// AgentIndicator Block
+export { AgentIndicator } from './AgentIndicator'
+export type { AgentIndicatorProps, SubAgent } from './AgentIndicator'
+
+// UserMessage Block
+export { UserMessage } from './UserMessage'
+export type { UserMessageProps, UserMessageData } from './UserMessage'
+
+// SpecialistMessage Block
+export { SpecialistMessage } from './SpecialistMessage'
+export type { SpecialistMessageProps, SpecialistMessageData } from './SpecialistMessage'
+
+// OrchestratorMessage Block
+export { OrchestratorMessage } from './OrchestratorMessage'
+export type { OrchestratorMessageProps, OrchestratorMessageData } from './OrchestratorMessage'
+
+// PromptInput Block
+export { PromptInput } from './PromptInput'
+export type { PromptInputBlockProps } from './PromptInput'
+
+// FileQueue Block
+export { FileQueue, FileStatusBadge } from './FileQueue'
+export type { FileQueueProps, FileChangeData, FileStatusBadgeProps, FileStatus } from './FileQueue'
+
+// Confirmation Block
+export { Confirmation } from './Confirmation'
+export type { ConfirmationProps } from './Confirmation'
+
+// CommentBox Block
+export { CommentBox } from './CommentBox'
+export type { CommentBoxProps } from '@/types/ai-editor'
+
+// DocumentEditor Block
+export { DocumentEditor } from './DocumentEditor'
+export type { DocumentEditorProps } from '@/types/ai-editor'
+
+// ModeToggle Composite
+export { ModeToggle } from './ModeToggle'
+export type { ModeToggleProps } from './ModeToggle'
+
+// ThemeSelector Composite
+export { ThemeSelector } from './ThemeSelector'
+export type { ThemeSelectorProps, Theme } from './ThemeSelector'
+
+// TablePagination Composite
+export { TablePagination } from './TablePagination'
+export type { TablePaginationProps } from './TablePagination'
+
+// TableToolbar Composite
+export { TableToolbar } from './TableToolbar'
+export type { TableToolbarProps } from './TableToolbar'
+
+// StatsCard Composite
+export { StatsCard } from './StatsCard'
+export type { StatsCardProps } from './StatsCard'
+
+// NavigationList Composite
+export { NavigationList } from './NavigationList'
+export type { NavigationListProps, NavigationItem } from './NavigationList'
+
+// NavUser Composite
+export { NavUser } from './NavUser'
+export type { NavUserProps } from './NavUser'
+
+// AppHeader Composite
+export { AppHeader } from './AppHeader'
+export type { AppHeaderProps } from './AppHeader'
+
+// InteractiveChart Composite
+export { InteractiveChart } from './InteractiveChart'
+export type { InteractiveChartProps } from './InteractiveChart'
+
+// DataTable Composite
+export { DataTable } from './DataTable'
+export type { DataTableProps } from './DataTable'
+
+// PageContainer Composite
+export { PageContainer } from './PageContainer'
+export type { PageContainerProps } from './PageContainer'

package/components/features/AIDocEditor/AIDocEditor.behaviors.stories.tsx

@@ -0,0 +1,451 @@
+/**
+ * AIDocEditor Behavior Tests
+ * 
+ * Tests user interactions and state changes to prevent regressions.
+ * These tests validate functionality, not visual appearance.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react'
+import { expect, fn, userEvent, within, waitFor, screen } from '@storybook/test'
+import type { Annotation } from '@/types/ai-editor'
+import { AIDocEditor } from './AIDocEditor'
+import { currentUser, sampleAnnotations, sampleContent } from './AIDocEditor.mocks'
+
+const meta: Meta<typeof AIDocEditor> = {
+  title: 'Features/AIDocEditor/Behaviors',
+  component: AIDocEditor,
+  tags: ['test'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AIDocEditor>
+
+// ============================================================================
+// CRITICAL PRIORITY TESTS (100% coverage required)
+// ============================================================================
+
+/**
+ * Test: Click annotation opens CommentBox with thread
+ * Verifies that clicking an existing annotation displays the comment thread
+ */
+export const ClickAnnotationOpensCommentBox: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Find and click the annotation (look for highlighted text)
+    // The annotation is on "t with various annot" based on sampleAnnotations
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Verify CommentBox appears with the comment thread
+    await waitFor(() => {
+      expect(canvas.getByText(/t with various annot/i)).toBeVisible()
+    })
+
+    // Verify reply input is present
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText("Reply...")).toBeInTheDocument()
+    })
+  },
+}
+
+/**
+ * Test: Reply to comment adds to thread
+ * Verifies that adding a reply calls onAnnotationUpdate with updated thread
+ */
+export const ReplyToCommentAddsToThread: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Click annotation to open CommentBox
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Wait for CommentBox and reply input
+    const replyInput = await screen.findByPlaceholderText("Reply...")
+    
+    // Type a reply
+    await userEvent.type(replyInput, 'I agree, this needs more detail')
+    
+    // Submit reply with Enter key
+    await userEvent.keyboard('{Enter}')
+
+    // Verify onAnnotationUpdate was called
+    await waitFor(() => {
+      expect(args.onAnnotationUpdate).toHaveBeenCalled()
+    })
+
+    // Verify the updated annotation has the new comment in thread
+    await waitFor(() => {
+      if (args.onAnnotationUpdate) {
+        const mockFn = args.onAnnotationUpdate as ReturnType<typeof fn>
+        const calls = mockFn.mock.calls
+        expect(calls.length).toBeGreaterThan(0)
+        const updatedAnnotation = calls[0][0] as Annotation
+        expect(updatedAnnotation.data.thread.length).toBe(2) // Original + reply
+      }
+    })
+  },
+}
+
+// ============================================================================
+// HIGH PRIORITY TESTS (90% coverage required)
+// ============================================================================
+
+/**
+ * Test: ESC key closes CommentBox
+ * Verifies that pressing ESC closes an open CommentBox
+ */
+export const EscKeyClosesCommentBox: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Click annotation to open CommentBox
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Wait for CommentBox to appear
+    const replyInput = await screen.findByPlaceholderText("Reply...")
+    expect(replyInput).toBeVisible()
+
+    // Press ESC key
+    await userEvent.keyboard('{Escape}')
+
+    // Verify CommentBox is closed (reply input should not be visible)
+    await waitFor(() => {
+      expect(screen.queryByPlaceholderText("Reply...")).not.toBeInTheDocument()
+    })
+  },
+}
+
+/**
+ * Test: Enter key submits reply
+ * Verifies that pressing Enter submits a reply without Shift
+ */
+export const EnterKeySubmitsReply: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Click annotation to open CommentBox
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Wait for CommentBox and reply input
+    const replyInput = await screen.findByPlaceholderText("Reply...")
+    
+    // Type a reply
+    await userEvent.type(replyInput, 'Test reply')
+    
+    // Submit with Enter key
+    await userEvent.keyboard('{Enter}')
+
+    // Verify onAnnotationUpdate was called
+    await waitFor(() => {
+      expect(args.onAnnotationUpdate).toHaveBeenCalled()
+    })
+  },
+}
+
+/**
+ * Test: Shift+Enter adds line break without submitting
+ * Verifies that Shift+Enter inserts a line break instead of submitting
+ */
+export const ShiftEnterAddsLineBreak: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Click annotation to open CommentBox
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Wait for CommentBox and reply input
+    const replyInput = await screen.findByPlaceholderText("Reply...") as HTMLTextAreaElement
+    
+    // Type first line
+    await userEvent.type(replyInput, 'First line')
+    
+    // Press Shift+Enter to add line break
+    await userEvent.keyboard('{Shift>}{Enter}{/Shift}')
+    
+    // Type second line
+    await userEvent.type(replyInput, 'Second line')
+
+    // Verify onAnnotationUpdate was NOT called yet (Shift+Enter doesn't submit)
+    expect(args.onAnnotationUpdate).not.toHaveBeenCalled()
+
+    // Verify textarea contains both lines with line break
+    expect(replyInput.value).toContain('First line\nSecond line')
+  },
+}
+
+// ============================================================================
+// MEDIUM PRIORITY TESTS (75% coverage required)
+// ============================================================================
+
+/**
+ * Test: CommentBox positions near annotation
+ * Verifies that CommentBox appears within viewport when annotation is clicked
+ */
+export const CommentBoxPositionsNearAnnotation: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Click annotation to open CommentBox
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Wait for CommentBox to appear
+    const replyInput = await screen.findByPlaceholderText("Reply...")
+    
+    // Verify CommentBox is visible (within viewport)
+    expect(replyInput).toBeVisible()
+    
+    // Verify CommentBox has position styling (absolute positioning)
+    const popoverContent = replyInput.closest('[role="dialog"]') || replyInput.closest('.popover-content')
+    expect(popoverContent).toBeInTheDocument()
+  },
+}
+
+/**
+ * Test: Readonly mode disables interactions
+ * Verifies that readonly mode prevents comment creation
+ */
+export const ReadonlyModeDisablesInteractions: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'readonly',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Click annotation to open CommentBox (should still work in readonly)
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Wait for CommentBox to appear
+    await waitFor(() => {
+      expect(canvas.getByText(/t with various annot/i)).toBeVisible()
+    })
+
+    // Verify reply input is present (readonly mode still allows viewing)
+    // Note: The actual readonly behavior depends on component implementation
+    // This test verifies the component renders in readonly mode
+    const replyInput = screen.queryByPlaceholderText("Reply...")
+    
+    // In readonly mode, reply input should still be present but interactions are limited
+    // The key is that onAnnotationAdd should not be called for new comments
+    expect(args.onAnnotationAdd).not.toHaveBeenCalled()
+  },
+}
+
+// ============================================================================
+// EDGE CASE TESTS (60% coverage required)
+// ============================================================================
+
+/**
+ * Test: Empty reply submission prevented
+ * Verifies that empty replies cannot be submitted
+ */
+export const EmptyReplySubmissionPrevented: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Click annotation to open CommentBox
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Wait for CommentBox and reply input
+    const replyInput = await screen.findByPlaceholderText("Reply...")
+    
+    // Try to submit empty reply with Enter
+    await userEvent.click(replyInput)
+    await userEvent.keyboard('{Enter}')
+
+    // Verify onAnnotationUpdate was NOT called (empty submission prevented)
+    expect(args.onAnnotationUpdate).not.toHaveBeenCalled()
+  },
+}
+
+/**
+ * Test: Whitespace-only reply prevented
+ * Verifies that replies with only whitespace cannot be submitted
+ */
+export const WhitespaceOnlyReplyPrevented: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations,
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Click annotation to open CommentBox
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Wait for CommentBox and reply input
+    const replyInput = await screen.findByPlaceholderText("Reply...")
+    
+    // Type only whitespace
+    await userEvent.type(replyInput, '   ')
+    
+    // Try to submit with Enter
+    await userEvent.keyboard('{Enter}')
+
+    // Verify onAnnotationUpdate was NOT called (whitespace-only prevented)
+    expect(args.onAnnotationUpdate).not.toHaveBeenCalled()
+  },
+}
+
+/**
+ * Test: Multiple annotations render correctly
+ * Verifies that multiple annotations can coexist and be clicked independently
+ */
+export const MultipleAnnotationsRenderCorrectly: Story = {
+  args: {
+    content: sampleContent,
+    annotations: sampleAnnotations, // Contains both comment and suggestion
+    currentUser,
+    mode: 'review',
+    onAnnotationClick: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for document to render
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+
+    // Verify both annotations are present in the document
+    // First annotation: comment
+    expect(canvas.getByText(/t with various annot/i)).toBeInTheDocument()
+    
+    // Second annotation: suggestion (check for the reason text or badge)
+    // Note: The exact text depends on how suggestions are rendered
+    // For now, just verify the document renders without errors
+    expect(canvas.getByText(/Document Review Example/i)).toBeVisible()
+  },
+}

package/components/features/AIDocEditor/AIDocEditor.mocks.ts

@@ -0,0 +1,96 @@
+/**
+ * Mock data for AIDocEditor stories and tests
+ * 
+ * This file contains reusable mock data that can be imported by:
+ * - AIDocEditor.stories.tsx (regular stories)
+ * - AIDocEditor.behaviors.stories.tsx (behavior tests)
+ * - Any other test files that need AIDocEditor mock data
+ */
+
+import type { JSONContent } from '@tiptap/core'
+import type { Annotation, User } from '@/types/ai-editor'
+
+/**
+ * Sample document content for stories and tests
+ */
+export const sampleContent: JSONContent = {
+  type: 'doc',
+  content: [
+    {
+      type: 'heading',
+      attrs: { level: 1 },
+      content: [{ type: 'text', text: 'Document Review Example' }],
+    },
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'This is a sample document with various annotations. ' },
+        { type: 'text', text: 'Some text has comments, ' },
+        { type: 'text', text: 'some has suggestions, ' },
+        { type: 'text', text: 'and some has block additions.' },
+      ],
+    },
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'The editor supports inline annotations for comments and suggestions. ' },
+        { type: 'text', text: 'Click on any highlighted text to see the annotation details.' },
+      ],
+    },
+  ],
+}
+
+/**
+ * Current user for stories and tests
+ */
+export const currentUser: User = {
+  id: 'user-1',
+  name: 'John Doe',
+  avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John',
+}
+
+/**
+ * Sample annotations for stories and tests
+ */
+export const sampleAnnotations: Annotation[] = [
+  {
+    type: 'comment',
+    id: 'comment-1',
+    range: { from: 50, to: 70 },
+    createdAt: Date.now() - 3600000,
+    userId: 'user-1',
+    data: {
+      thread: [
+        {
+          id: 'thread-1',
+          userId: 'user-1',
+          userName: 'John Doe',
+          avatarSrc: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John',
+          contentRich: {
+            type: 'doc',
+            content: [
+              {
+                type: 'paragraph',
+                content: [{ type: 'text', text: 'This section needs clarification.' }],
+              },
+            ],
+          },
+          timestamp: Date.now() - 3600000,
+        },
+      ],
+    },
+  },
+  {
+    type: 'suggestion',
+    id: 'suggestion-1',
+    range: { from: 80, to: 100 },
+    createdAt: Date.now() - 1800000,
+    userId: 'ai-1',
+    data: {
+      action: 'delete',
+      oldText: 'some has suggestions',
+      reason: 'Remove redundant text',
+      thread: [],
+    },
+  },
+]