ai-design-system 0.1.14 → 0.1.16

package/components/composites/DocumentTabBar/DocumentTabBar.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DocumentTabBar } from './DocumentTabBar'
+import type { DocumentTabBarProps } from './DocumentTabBar'
+
+/**
+ * DocumentTabBar composite - VS Code-style document tabs
+ * 
+ * Displays open documents as closeable tabs with dirty indicators.
+ * Used by multi-document editors to allow users to switch between
+ * and manage open files.
+ */
+const meta = {
+  title: 'Composites/DocumentTabBar',
+  component: DocumentTabBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DocumentTabBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default - Single tab
+ */
+export const Default: Story = {
+  args: {
+    tabs: [
+      {
+        id: 'doc-1',
+        name: 'Untitled',
+        isDirty: false,
+        format: 'json',
+        lastModified: Date.now(),
+      },
+    ],
+    activeTabId: 'doc-1',
+  },
+}
+
+/**
+ * Multiple tabs - Mix of clean and dirty
+ */
+export const MultipleTabs: Story = {
+  args: {
+    tabs: [
+      {
+        id: 'doc-1',
+        name: 'Introduction.md',
+        isDirty: false,
+        format: 'markdown',
+        lastModified: Date.now() - 3600000,
+      },
+      {
+        id: 'doc-2',
+        name: 'Workflow.json',
+        isDirty: true,
+        format: 'json',
+        lastModified: Date.now() - 1800000,
+      },
+      {
+        id: 'doc-3',
+        name: 'Configuration.md',
+        isDirty: true,
+        format: 'markdown',
+        lastModified: Date.now(),
+      },
+    ],
+    activeTabId: 'doc-2',
+  },
+}
+
+/**
+ * Many tabs - Demonstrates horizontal scrolling
+ */
+export const ManyTabs: Story = {
+  args: {
+    tabs: Array.from({ length: 10 }).map((_, i) => ({
+      id: `doc-${i}`,
+      name: `Document-${i + 1}.md`,
+      isDirty: Math.random() > 0.6,
+      format: 'markdown' as const,
+      lastModified: Date.now() - i * 3600000,
+    })),
+    activeTabId: 'doc-5',
+  },
+}
+
+/**
+ * Long names - Tab text truncation
+ */
+export const LongTabNames: Story = {
+  args: {
+    tabs: [
+      {
+        id: 'doc-1',
+        name: 'VeryLongDocumentNameThatShouldBeTruncated.md',
+        isDirty: true,
+        format: 'markdown',
+        lastModified: Date.now(),
+      },
+      {
+        id: 'doc-2',
+        name: 'AnotherDocumentWithAnExtremelyLongNameForTesting.json',
+        isDirty: false,
+        format: 'json',
+        lastModified: Date.now(),
+      },
+    ],
+    activeTabId: 'doc-1',
+  },
+}
+
+/**
+ * Empty state - No tabs
+ */
+export const EmptyTabs: Story = {
+  args: {
+    tabs: [],
+  },
+}

package/components/composites/DocumentTabBar/DocumentTabBar.tsx

@@ -0,0 +1,137 @@
+/**
+ * DocumentTabBar Composite
+ * 
+ * VS Code-style tab bar for multi-document editors.
+ * Displays open documents as closeable tabs with dirty indicators.
+ */
+
+import React from 'react'
+import { Tabs, TabsList, TabsTrigger, Button, ScrollArea } from '@/components/primitives'
+import { X, Circle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { DocumentFile } from '@/types/ai-editor'
+
+/**
+ * Props for DocumentTabBar composite
+ */
+export interface DocumentTabBarProps {
+  /**
+   * Array of open documents
+   */
+  tabs: DocumentFile[]
+
+  /**
+   * ID of currently active document
+   */
+  activeTabId?: string
+
+  /**
+   * Callback when tab is selected
+   */
+  onTabSelect?: (documentId: string) => void
+
+  /**
+   * Callback when tab close button is clicked
+   */
+  onTabClose?: (documentId: string) => void
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+}
+
+/**
+ * DocumentTabBar - VS Code-style document tabs
+ * 
+ * Renders a horizontal tab bar for switching between open documents.
+ * Each tab shows:
+ * - Document name
+ * - Dirty indicator (when isDirty=true)
+ * - Close button (X)
+ * 
+ * Features:
+ * - Scrollable when tabs overflow horizontally
+ * - Accessible tab navigation via Radix UI Tabs
+ * - Close button to remove tabs
+ * - Dirty state indicator
+ */
+export const DocumentTabBar = React.memo<DocumentTabBarProps>(
+  ({ tabs, activeTabId, onTabSelect, onTabClose, className }) => {
+    if (tabs.length === 0) {
+      return null
+    }
+
+    return (
+      <div
+        className={cn(
+          'flex items-center border-b border-border bg-background',
+          className
+        )}
+        data-slot="document-tab-bar"
+      >
+        <ScrollArea orientation="horizontal" className="flex-1">
+          <Tabs
+            value={activeTabId || tabs[0]?.id}
+            onValueChange={onTabSelect}
+            className="h-auto flex-1"
+          >
+            <TabsList className="h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0">
+              {tabs.map((tab) => (
+                <div
+                  key={tab.id}
+                  className="flex items-center border-r border-border/50 last:border-r-0"
+                >
+                  <TabsTrigger
+                    value={tab.id}
+                    className={cn(
+                      'data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground',
+                      'rounded-none border-b-2 border-transparent data-[state=active]:border-primary',
+                      'px-3 py-2 text-sm font-medium whitespace-nowrap',
+                      'flex items-center gap-2 h-10',
+                      'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0',
+                      'transition-colors'
+                    )}
+                  >
+                    <div className="flex items-center gap-2">
+                      {/* Dirty indicator */}
+                      {tab.isDirty && (
+                        <Circle
+                          className="size-2 fill-primary text-primary flex-shrink-0"
+                          aria-label="unsaved changes"
+                        />
+                      )}
+                      {/* Tab name */}
+                      <span className="truncate max-w-[200px]">{tab.name}</span>
+                    </div>
+                  </TabsTrigger>
+
+                  {/* Close button */}
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onTabClose?.(tab.id)
+                    }}
+                    className={cn(
+                      'h-8 w-8 mr-0.5',
+                      'hover:bg-destructive/10 hover:text-destructive',
+                      'focus-visible:ring-2 focus-visible:ring-ring',
+                      'transition-colors'
+                    )}
+                    aria-label={`Close ${tab.name}`}
+                  >
+                    <X className="size-3" />
+                  </Button>
+                </div>
+              ))}
+            </TabsList>
+          </Tabs>
+        </ScrollArea>
+      </div>
+    )
+  }
+)
+
+DocumentTabBar.displayName = 'DocumentTabBar'

package/components/composites/DocumentTabBar/index.ts

@@ -0,0 +1,2 @@
+export { DocumentTabBar } from './DocumentTabBar'
+export type { DocumentTabBarProps } from './DocumentTabBar'

package/components/composites/index.ts

@@ -49,6 +49,10 @@ export type { DocumentEditorProps } from '@/types/ai-editor'
 export { ModeToggle } from './ModeToggle'
 export type { ModeToggleProps } from './ModeToggle'
 
+// DocumentTabBar Composite
+export { DocumentTabBar } from './DocumentTabBar'
+export type { DocumentTabBarProps } from './DocumentTabBar'
+
 // ThemeSelector Composite
 export { ThemeSelector } from './ThemeSelector'
 export type { ThemeSelectorProps, Theme } from './ThemeSelector'

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

@@ -11,17 +11,17 @@ import type { Annotation } from '@/types/ai-editor'
 import { AIDocEditor } from './AIDocEditor'
 import { currentUser, sampleAnnotations, sampleContent } from './AIDocEditor.mocks'
 
-const meta: Meta<typeof AIDocEditor> = {
+const meta = {
   title: 'Features/AIDocEditor/Behaviors',
   component: AIDocEditor,
   tags: ['test'],
   parameters: {
     layout: 'fullscreen',
   },
-}
+} satisfies Meta<typeof AIDocEditor>
 
 export default meta
-type Story = StoryObj<typeof AIDocEditor>
+type Story = StoryObj<typeof meta>
 
 // ============================================================================
 // CRITICAL PRIORITY TESTS (100% coverage required)
@@ -449,3 +449,208 @@ export const MultipleAnnotationsRenderCorrectly: Story = {
     expect(canvas.getByText(/Document Review Example/i)).toBeVisible()
   },
 }
+
+// ============================================================================
+// MULTI-TAB MODE TESTS
+// ============================================================================
+
+/**
+ * Test: Tab selection switches document
+ * Verifies that clicking a tab switches to the correct document
+ */
+export const TabSelectionSwitchesDocument: Story = {
+  args: {
+    documents: [
+      {
+        file: { id: 'doc-1', name: 'Doc1.md', isDirty: false, format: 'markdown', lastModified: Date.now() },
+        content: sampleContent,
+        annotations: sampleAnnotations,
+      },
+      {
+        file: { id: 'doc-2', name: 'Doc2.md', isDirty: true, format: 'markdown', lastModified: Date.now() },
+        content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Second document' }] }] },
+        annotations: [],
+      },
+    ],
+    activeDocumentId: 'doc-1',
+    currentUser,
+    mode: 'review',
+    onTabSelect: fn(),
+    onTabClose: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for tab bar to render
+    await waitFor(() => {
+      expect(canvas.getByRole('tab', { name: /Doc1.md/i })).toBeInTheDocument()
+    })
+
+    // Verify first document is active
+    expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+
+    // Click second tab
+    const secondTab = canvas.getByRole('tab', { name: /Doc2.md/i })
+    await userEvent.click(secondTab)
+
+    // Verify onTabSelect was called with correct document ID
+    await waitFor(() => {
+      expect(args.onTabSelect).toHaveBeenCalledWith('doc-2')
+    })
+  },
+}
+
+/**
+ * Test: Tab close button removes tab
+ * Verifies that clicking the close button on a tab calls onTabClose
+ */
+export const TabCloseButtonRemovesTab: Story = {
+  args: {
+    documents: [
+      {
+        file: { id: 'doc-1', name: 'Doc1.md', isDirty: false, format: 'markdown', lastModified: Date.now() },
+        content: sampleContent,
+        annotations: sampleAnnotations,
+      },
+      {
+        file: { id: 'doc-2', name: 'Doc2.md', isDirty: false, format: 'markdown', lastModified: Date.now() },
+        content: sampleContent,
+        annotations: [],
+      },
+    ],
+    activeDocumentId: 'doc-1',
+    currentUser,
+    mode: 'review',
+    onTabSelect: fn(),
+    onTabClose: fn(),
+    onAnnotationAdd: fn(),
+    onAnnotationUpdate: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for tab bar to render
+    await waitFor(() => {
+      expect(canvas.getByRole('tab', { name: /Doc1.md/i })).toBeInTheDocument()
+    })
+
+    // Find the close button for the first tab
+    const closeButtons = canvas.getAllByRole('button', { name: /Close Doc1.md/i })
+    expect(closeButtons.length).toBeGreaterThan(0)
+
+    // Click the close button
+    await userEvent.click(closeButtons[0])
+
+    // Verify onTabClose was called with correct document ID
+    await waitFor(() => {
+      expect(args.onTabClose).toHaveBeenCalledWith('doc-1')
+    })
+  },
+}
+
+/**
+ * Test: Dirty indicator displays when isDirty is true
+ * Verifies that dirty indicator (dot) shows on tab with unsaved changes
+ */
+export const DirtyIndicatorDisplaysOnUnsavedTab: Story = {
+  args: {
+    documents: [
+      {
+        file: { id: 'doc-1', name: 'Clean.md', isDirty: false, format: 'markdown', lastModified: Date.now() },
+        content: sampleContent,
+        annotations: [],
+      },
+      {
+        file: { id: 'doc-2', name: 'Dirty.md', isDirty: true, format: 'markdown', lastModified: Date.now() },
+        content: sampleContent,
+        annotations: [],
+      },
+    ],
+    activeDocumentId: 'doc-1',
+    currentUser,
+    mode: 'review',
+    onTabSelect: fn(),
+    onTabClose: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
+    
+    // Wait for tabs to render
+    await waitFor(() => {
+      expect(canvas.getByRole('tab', { name: /Clean.md/i })).toBeInTheDocument()
+      expect(canvas.getByRole('tab', { name: /Dirty.md/i })).toBeInTheDocument()
+    })
+
+    // Find dirty indicator on second tab
+    const dirtyTab = canvas.getByRole('tab', { name: /Dirty.md/i })
+    
+    // Verify dirty indicator element exists (look for aria-label or specific element)
+    // The indicator should be a small dot or icon showing unsaved state
+    const dirtyIndicator = within(dirtyTab).getByLabelText(/unsaved changes/i)
+    expect(dirtyIndicator).toBeVisible()
+  },
+}
+
+/**
+ * Test: Multi-tab annotation interactions
+ * Verifies that annotations work correctly when switching between tabs
+ */
+export const MultiTabAnnotationInteractions: Story = {
+  args: {
+    documents: [
+      {
+        file: { id: 'doc-1', name: 'Doc1.md', isDirty: false, format: 'markdown', lastModified: Date.now() },
+        content: sampleContent,
+        annotations: sampleAnnotations,
+      },
+      {
+        file: { id: 'doc-2', name: 'Doc2.md', isDirty: false, format: 'markdown', lastModified: Date.now() },
+        content: sampleContent,
+        annotations: [],
+      },
+    ],
+    activeDocumentId: 'doc-1',
+    currentUser,
+    mode: 'review',
+    onTabSelect: fn(),
+    onTabClose: 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 on first tab
+    const annotatedText = canvas.getByText(/t with various annot/i)
+    await userEvent.click(annotatedText)
+
+    // Verify CommentBox appears
+    const replyInput = await screen.findByPlaceholderText("Reply...")
+    expect(replyInput).toBeVisible()
+
+    // Switch to second tab
+    const secondTab = canvas.getByRole('tab', { name: /Doc2.md/i })
+    await userEvent.click(secondTab)
+
+    // Verify tab switched and CommentBox closed
+    await waitFor(() => {
+      expect(args.onTabSelect).toHaveBeenCalledWith('doc-2')
+    })
+
+    // Return to first tab
+    const firstTab = canvas.getByRole('tab', { name: /Doc1.md/i })
+    await userEvent.click(firstTab)
+
+    // Verify document still renders correctly
+    await waitFor(() => {
+      expect(canvas.getByText(/Document Review Example/i)).toBeInTheDocument()
+    })
+  },
+}

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

@@ -9,6 +9,7 @@
 
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor'
+import type { DocumentWithAnnotations, DocumentFile } from '@/types/ai-editor'
 
 /**
  * Sample document content for stories and tests
@@ -94,3 +95,51 @@ export const sampleAnnotations: Annotation[] = [
     },
   },
 ]
+
+/**
+ * Sample document files for multi-tab stories
+ */
+export const sampleDocumentFiles: DocumentFile[] = [
+  {
+    id: 'doc-1',
+    name: 'Introduction.md',
+    isDirty: false,
+    format: 'markdown',
+    lastModified: Date.now() - 3600000,
+  },
+  {
+    id: 'doc-2',
+    name: 'Workflow.json',
+    isDirty: true,
+    format: 'json',
+    lastModified: Date.now() - 1800000,
+  },
+  {
+    id: 'doc-3',
+    name: 'Configuration.md',
+    isDirty: false,
+    format: 'markdown',
+    lastModified: Date.now() - 900000,
+  },
+]
+
+/**
+ * Sample multi-tab documents for stories
+ */
+export const sampleMultiTabDocuments: DocumentWithAnnotations[] = [
+  {
+    file: sampleDocumentFiles[0],
+    content: sampleContent,
+    annotations: sampleAnnotations,
+  },
+  {
+    file: sampleDocumentFiles[1],
+    content: sampleContent,
+    annotations: [sampleAnnotations[0]],
+  },
+  {
+    file: sampleDocumentFiles[2],
+    content: sampleContent,
+    annotations: [],
+  },
+]