ai-design-system 0.1.0

package/components/blocks/DocumentEditorWithComments/DocumentEditorWithComments.tsx

@@ -0,0 +1,255 @@
+/**
+ * DocumentEditorWithComments Section
+ * 
+ * Combines DocumentEditor and CommentBox blocks to provide inline commenting functionality
+ * Section layer: composes blocks and manages UI state
+ */
+
+import React, { useState, useCallback, useMemo, useEffect } from 'react'
+import { DocumentEditor } from '@/components/composites/DocumentEditor'
+import { CommentBox } from '@/components/composites/CommentBox'
+import { Card } from '@/components/primitives/Card'
+import type { JSONContent } from '@tiptap/core'
+import type { Annotation, CommentAnnotation, Range } from '@/types/ai-editor'
+
+/**
+ * Props for DocumentEditorWithComments section
+ */
+export interface DocumentEditorWithCommentsProps {
+  /** 
+   * Document content - can be either:
+   * - JSONContent: Tiptap's JSON format (default)
+   * - string: Markdown string (when format='markdown')
+   */
+  content: JSONContent | string
+  /** 
+   * Content format - determines how content prop is interpreted
+   * @default 'json'
+   */
+  format?: 'json' | 'markdown'
+  /** Array of annotations to display */
+  annotations: Annotation[]
+  /** ID of currently selected annotation */
+  selectedAnnotationId?: string
+  /** Current user ID for comment ownership */
+  currentUserId: string
+  /** Current user name for new comments and replies */
+  currentUserName: string
+  /** Whether editor is in read-only mode */
+  readOnly?: boolean
+  /** Callback when new annotation is added */
+  onAnnotationAdd?: (annotation: Annotation) => void
+  /** Callback when annotation is updated (e.g., reply added) */
+  onAnnotationUpdate?: (annotation: Annotation) => void
+  /** Additional CSS classes */
+  className?: string
+}
+
+export const DocumentEditorWithComments = React.memo<DocumentEditorWithCommentsProps>(
+  ({
+    content,
+    format = 'json',
+    annotations,
+    selectedAnnotationId,
+    currentUserId,
+    currentUserName,
+    readOnly = false,
+    onAnnotationAdd,
+    onAnnotationUpdate,
+    className,
+  }) => {
+    // Internal UI state
+    const [commentBoxVisible, setCommentBoxVisible] = useState(false)
+    const [commentBoxPosition, setCommentBoxPosition] = useState({ x: 0, y: 0 })
+    const [activeAnnotation, setActiveAnnotation] = useState<Annotation | undefined>()
+    const [selectedRange, setSelectedRange] = useState<Range | undefined>()
+    const [hoveredAnnotationId, setHoveredAnnotationId] = useState<string | null>(null)
+
+    /**
+     * Sync activeAnnotation with latest data from annotations array
+     * This ensures CommentBox shows updated data when replies are added
+     */
+    useEffect(() => {
+      if (activeAnnotation && commentBoxVisible) {
+        const updatedAnnotation = annotations.find((a) => a.id === activeAnnotation.id)
+        if (updatedAnnotation) {
+          setActiveAnnotation(updatedAnnotation)
+        }
+      }
+    }, [annotations, activeAnnotation, commentBoxVisible])
+
+    /**
+     * Handle annotation click - show CommentBox near the annotation
+     */
+    const handleAnnotationClick = useCallback(
+      (annotationId: string, position: { x: number; y: number }) => {
+        const annotation = annotations.find((a) => a.id === annotationId)
+        if (annotation) {
+          setActiveAnnotation(annotation)
+          setSelectedRange(undefined)
+          setCommentBoxPosition(position)
+          setCommentBoxVisible(true)
+        }
+      },
+      [annotations]
+    )
+
+    /**
+     * Handle text selection - show CommentBox for new comment
+     */
+    const handleTextSelect = useCallback(
+      (range: Range, text: string, position?: { x: number; y: number }) => {
+        if (readOnly || !text.trim()) return
+
+        // Show CommentBox for new comment
+        setActiveAnnotation(undefined)
+        setSelectedRange(range)
+        
+        // Use calculated position from DocumentEditor, or fallback to default
+        const finalPosition = position || { x: 600, y: 100 }
+        setCommentBoxPosition(finalPosition)
+        setCommentBoxVisible(true)
+      },
+      [readOnly]
+    )
+
+    /**
+     * Handle new comment submission
+     */
+    const handleCommentAdd = useCallback(
+      (content: JSONContent) => {
+        if (!selectedRange || !onAnnotationAdd) return
+
+        // Create new comment annotation
+        const newAnnotation: CommentAnnotation = {
+          type: 'comment',
+          id: `comment-${Date.now()}`,
+          range: selectedRange,
+          createdAt: Date.now(),
+          userId: currentUserId,
+          data: {
+            thread: [
+              {
+                id: `comment-msg-${Date.now()}`,
+                userId: currentUserId,
+                userName: currentUserName,
+                contentRich: content,
+                timestamp: Date.now(),
+              },
+            ],
+          },
+        }
+
+        onAnnotationAdd(newAnnotation)
+        setCommentBoxVisible(false)
+        setSelectedRange(undefined)
+      },
+      [selectedRange, currentUserId, currentUserName, onAnnotationAdd]
+    )
+
+    /**
+     * Handle reply to existing annotation
+     */
+    const handleCommentReply = useCallback(
+      (annotationId: string, content: JSONContent) => {
+        if (!onAnnotationUpdate) return
+
+        const annotation = annotations.find((a) => a.id === annotationId)
+        if (!annotation) return
+
+        // Add reply to the annotation's thread
+        const newComment = {
+          id: `comment-msg-${Date.now()}`,
+          userId: currentUserId,
+          userName: currentUserName,
+          contentRich: content,
+          timestamp: Date.now(),
+        }
+
+        let updatedAnnotation: Annotation
+        
+        if (annotation.type === 'comment') {
+          updatedAnnotation = {
+            ...annotation,
+            data: {
+              ...annotation.data,
+              thread: [...annotation.data.thread, newComment],
+            },
+          }
+        } else if (annotation.type === 'suggestion') {
+          updatedAnnotation = {
+            ...annotation,
+            data: {
+              ...annotation.data,
+              thread: [...annotation.data.thread, newComment],
+            },
+          }
+        } else {
+          updatedAnnotation = {
+            ...annotation,
+            data: {
+              ...annotation.data,
+              thread: [...annotation.data.thread, newComment],
+            },
+          }
+        }
+
+        onAnnotationUpdate(updatedAnnotation)
+      },
+      [annotations, currentUserId, currentUserName, onAnnotationUpdate]
+    )
+
+    /**
+     * Handle annotation hover - update hover state
+     */
+    const handleAnnotationHover = useCallback((annotationId: string | null) => {
+      setHoveredAnnotationId(annotationId)
+    }, [])
+
+    /**
+     * Handle CommentBox close - clear pending comment highlight
+     */
+    const handleCommentBoxClose = useCallback(() => {
+      setCommentBoxVisible(false)
+      setActiveAnnotation(undefined)
+      setSelectedRange(undefined) // This clears the yellow highlight
+    }, [])
+
+    // Memoize props to prevent unnecessary re-renders of DocumentEditor
+    // This is critical because re-renders trigger setContent() which clears marks
+    const documentEditorProps = useMemo(
+      () => ({
+        content,
+        format,
+        annotations,
+        selectedAnnotationId,
+        hoveredAnnotationId,
+        pendingCommentRange: selectedRange, // Pass pending range to show yellow highlight
+        onTextSelect: handleTextSelect,
+        onAnnotationClick: handleAnnotationClick,
+        onAnnotationHover: handleAnnotationHover,
+        readOnly,
+      }),
+      [content, format, annotations, selectedAnnotationId, hoveredAnnotationId, selectedRange, handleTextSelect, handleAnnotationClick, handleAnnotationHover, readOnly]
+    )
+
+    return (
+      <Card className={className}>
+        <DocumentEditor {...documentEditorProps} />
+
+        <CommentBox
+          annotation={activeAnnotation}
+          position={commentBoxPosition}
+          visible={commentBoxVisible}
+          currentUserId={currentUserId}
+          onClose={handleCommentBoxClose}
+          onCommentAdd={handleCommentAdd}
+          onCommentReply={handleCommentReply}
+        />
+      </Card>
+    )
+  }
+)
+
+DocumentEditorWithComments.displayName = 'DocumentEditorWithComments'
+

package/components/blocks/DocumentEditorWithComments/index.ts

@@ -0,0 +1,9 @@
+/**
+ * DocumentEditorWithComments Section
+ * 
+ * Exports the DocumentEditorWithComments section component
+ */
+
+export { DocumentEditorWithComments } from './DocumentEditorWithComments'
+export type { DocumentEditorWithCommentsProps } from './DocumentEditorWithComments'
+

package/components/blocks/FileChangeQueue/FileChangeQueue.stories.tsx

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileChangeQueue } from "./FileChangeQueue";
+import type { FileChangeData } from "@/components/composites/FileQueue";
+
+const meta: Meta<typeof FileChangeQueue> = {
+  title: "Blocks/FileChangeQueue",
+  component: FileChangeQueue,
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof FileChangeQueue>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample file changes for stories
+const mixedChanges: FileChangeData[] = [
+  {
+    id: "1",
+    filename: "Button.tsx",
+    status: "modified",
+    path: "src/components/primitives/Button/Button.tsx",
+  },
+  {
+    id: "2",
+    filename: "Icon.tsx",
+    status: "created",
+    path: "src/components/primitives/Icon/Icon.tsx",
+  },
+  {
+    id: "3",
+    filename: "FileQueue.tsx",
+    status: "created",
+    path: "src/components/composites/FileQueue/FileQueue.tsx",
+  },
+  {
+    id: "4",
+    filename: "OldComponent.tsx",
+    status: "deleted",
+    path: "src/components/deprecated/OldComponent.tsx",
+  },
+  {
+    id: "5",
+    filename: "README.md",
+    status: "modified",
+    path: "docs/README.md",
+  },
+  {
+    id: "6",
+    filename: "package.json",
+    status: "pending",
+    path: "package.json",
+  },
+];
+
+/**
+ * Default state - approval requested with mixed file statuses
+ */
+export const ApprovalRequested: Story = {
+  args: {
+    changes: mixedChanges,
+    title: "Review and approve these file changes",
+    state: "approval-requested",
+    approval: {},
+    onApprove: () => console.log("Approved all changes"),
+    onReject: () => console.log("Rejected all changes"),
+  },
+};
+
+/**
+ * Approved state - shows after approval
+ */
+export const Approved: Story = {
+  args: {
+    changes: mixedChanges,
+    title: "Review and approve these file changes",
+    state: "approval-responded",
+    approval: { approved: true },
+    onApprove: () => console.log("Approved all changes"),
+    onReject: () => console.log("Rejected all changes"),
+  },
+};
+
+/**
+ * Rejected state - shows after rejection
+ */
+export const Rejected: Story = {
+  args: {
+    changes: mixedChanges,
+    title: "Review and approve these file changes",
+    state: "approval-responded",
+    approval: { approved: false },
+    onApprove: () => console.log("Approved all changes"),
+    onReject: () => console.log("Rejected all changes"),
+  },
+};
+
+/**
+ * All modified files
+ */
+export const AllModified: Story = {
+  args: {
+    changes: [
+      {
+        id: "1",
+        filename: "Button.tsx",
+        status: "modified",
+        path: "src/components/primitives/Button/Button.tsx",
+      },
+      {
+        id: "2",
+        filename: "Input.tsx",
+        status: "modified",
+        path: "src/components/primitives/Input/Input.tsx",
+      },
+      {
+        id: "3",
+        filename: "Card.tsx",
+        status: "modified",
+        path: "src/components/primitives/Card/Card.tsx",
+      },
+    ],
+    title: "Review modified files",
+    state: "approval-requested",
+    approval: {},
+    onApprove: () => console.log("Approved"),
+    onReject: () => console.log("Rejected"),
+  },
+};
+
+/**
+ * Large change set
+ */
+export const LargeChangeSet: Story = {
+  args: {
+    changes: [
+      ...Array.from({ length: 15 }, (_, i) => ({
+        id: `modified-${i}`,
+        filename: `Component${i + 1}.tsx`,
+        status: "modified" as const,
+        path: `src/components/composites/Component${i + 1}/Component${i + 1}.tsx`,
+      })),
+      ...Array.from({ length: 10 }, (_, i) => ({
+        id: `created-${i}`,
+        filename: `NewComponent${i + 1}.tsx`,
+        status: "created" as const,
+        path: `src/components/new/NewComponent${i + 1}/NewComponent${i + 1}.tsx`,
+      })),
+      ...Array.from({ length: 5 }, (_, i) => ({
+        id: `deleted-${i}`,
+        filename: `OldComponent${i + 1}.tsx`,
+        status: "deleted" as const,
+        path: `src/components/deprecated/OldComponent${i + 1}.tsx`,
+      })),
+    ],
+    title: "Review 30 file changes",
+    state: "approval-requested",
+    approval: {},
+    onApprove: () => console.log("Approved"),
+    onReject: () => console.log("Rejected"),
+  },
+};
+
+/**
+ * Empty state (no changes) - should not render
+ */
+export const EmptyState: Story = {
+  args: {
+    changes: [],
+    title: "No changes to review",
+    state: "approval-requested",
+  },
+};
+
+/**
+ * Without title
+ */
+export const WithoutTitle: Story = {
+  args: {
+    changes: mixedChanges,
+    state: "approval-requested",
+    approval: {},
+    onApprove: () => console.log("Approved"),
+    onReject: () => console.log("Rejected"),
+  },
+};
+
+/**
+ * Single file change
+ */
+export const SingleFile: Story = {
+  args: {
+    changes: [
+      {
+        id: "1",
+        filename: "Button.tsx",
+        status: "modified",
+        path: "src/components/primitives/Button/Button.tsx",
+      },
+    ],
+    title: "Review single file change",
+    state: "approval-requested",
+    approval: {},
+    onApprove: () => console.log("Approved"),
+    onReject: () => console.log("Rejected"),
+  },
+};

package/components/blocks/FileChangeQueue/FileChangeQueue.tsx

@@ -0,0 +1,143 @@
+import * as React from "react";
+import { Confirmation, type ConfirmationProps } from "@/components/composites/Confirmation";
+import { FileQueue, type FileGroup } from "@/components/composites/FileQueue";
+import type { FileChangeData, FileStatus } from "@/components/composites/FileQueue";
+
+/**
+ * FileChangeQueue Section
+ *
+ * Composes FileQueue block with Confirmation block for file approval workflow.
+ * Displays file modifications with approve/reject actions.
+ */
+
+export interface FileChangeQueueProps {
+  /**
+   * Array of file changes to display
+   */
+  changes: FileChangeData[];
+  /**
+   * Title/prompt text for the confirmation
+   */
+  title?: string;
+  /**
+   * Confirmation state
+   */
+  state: ConfirmationProps["state"];
+  /**
+   * Approval data
+   */
+  approval?: ConfirmationProps["approval"];
+  /**
+   * Approve all changes callback
+   */
+  onApprove?: () => void;
+  /**
+   * Reject all changes callback
+   */
+  onReject?: () => void;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Transform file changes to groups for FileQueue
+ * Maintains existing visual appearance with status-based grouping
+ */
+const transformFileChangesToGroups = (
+  changes: FileChangeData[]
+): FileGroup[] => {
+  const statusConfig = {
+    modified: {
+      title: "Modified",
+      icon: "file-text",
+      iconColor: "text-blue-600 dark:text-blue-500",
+    },
+    created: {
+      title: "Created",
+      icon: "plus",
+      iconColor: "text-green-600 dark:text-green-500",
+    },
+    deleted: {
+      title: "Deleted",
+      icon: "x",
+      iconColor: "text-red-600 dark:text-red-500",
+    },
+    pending: {
+      title: "Pending",
+      icon: "loader-2",
+      iconColor: "text-yellow-600 dark:text-yellow-500",
+    },
+  };
+
+  const grouped: Record<FileStatus, FileChangeData[]> = {
+    modified: [],
+    created: [],
+    deleted: [],
+    pending: [],
+  };
+
+  changes.forEach((change) => {
+    grouped[change.status].push(change);
+  });
+
+  const statusOrder: FileStatus[] = ["modified", "created", "deleted", "pending"];
+
+  const result: FileGroup[] = [];
+
+  statusOrder.forEach((status) => {
+    const files = grouped[status];
+    if (files.length === 0) return;
+
+    const config = statusConfig[status];
+
+    result.push({
+      id: status,
+      title: config.title,
+      icon: config.icon,
+      iconColor: config.iconColor,
+      files: files.map((file) => ({
+        id: file.id,
+        name: file.filename,
+        path: file.path,
+      })),
+      defaultOpen: false,
+    });
+  });
+
+  return result;
+};
+
+/**
+ * FileChangeQueue component - section-level component for file approval workflow
+ */
+export const FileChangeQueue = React.memo<FileChangeQueueProps>(
+  ({ changes, title, state, approval, onApprove, onReject, className }) => {
+    // Only display if at least 1 file change exists
+    if (changes.length === 0) {
+      return null;
+    }
+
+    // Transform file changes to groups
+    const groups = React.useMemo(
+      () => transformFileChangesToGroups(changes),
+      [changes]
+    );
+
+    return (
+      <Confirmation
+        title={title}
+        state={state}
+        approval={approval}
+        onApprove={onApprove}
+        onReject={onReject}
+        className={className}
+      >
+        <FileQueue groups={groups} />
+      </Confirmation>
+    );
+  }
+);
+
+FileChangeQueue.displayName = "FileChangeQueue";

package/components/blocks/FileChangeQueue/index.ts

@@ -0,0 +1,7 @@
+/**
+ * FileChangeQueue Section
+ *
+ * Central export point for the FileChangeQueue section component and its related types.
+ */
+export { FileChangeQueue } from "./FileChangeQueue";
+export type { FileChangeQueueProps } from "./FileChangeQueue";

package/components/blocks/LayoutProvider/LayoutProvider.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { SidebarProvider } from "@/components/primitives/Sidebar"
+
+/**
+ * LayoutProvider Block
+ *
+ * Wraps SidebarProvider primitive for use in feature layer.
+ * Provides sidebar state management and CSS variables.
+ */
+
+export interface LayoutProviderProps {
+  children: React.ReactNode
+  defaultOpen?: boolean
+  sidebarWidth?: string
+  sidebarWidthIcon?: string
+}
+
+export const LayoutProvider = React.memo<LayoutProviderProps>(
+  ({ children, defaultOpen = true, sidebarWidth = "var(--spacing-sidebar-width)", sidebarWidthIcon = "var(--spacing-sidebar-width-icon)" }) => {
+    return (
+      <SidebarProvider
+        defaultOpen={defaultOpen}
+        style={{
+          "--sidebar-width": sidebarWidth,
+          "--sidebar-width-icon": sidebarWidthIcon,
+        } as React.CSSProperties}
+      >
+        {children}
+      </SidebarProvider>
+    )
+  }
+)
+
+LayoutProvider.displayName = "LayoutProvider"

package/components/blocks/LayoutProvider/index.ts

@@ -0,0 +1 @@
+export { LayoutProvider, type LayoutProviderProps } from "./LayoutProvider"

package/components/blocks/index.ts

@@ -0,0 +1,2 @@
+export { AppSidebar } from './AppSidebar'
+export type { AppSidebarProps } from './AppSidebar'