ai-design-system 0.1.0

package/components/composites/CommentBox/CommentBox.tsx

@@ -0,0 +1,364 @@
+/**
+ * CommentBox Block
+ * 
+ * Floating inline panel that appears for viewing/adding comments
+ * Integrates comment thread display and reply functionality
+ * Block layer: uses primitives and AI elements only
+ */
+
+import React from 'react'
+import type { JSONContent } from '@tiptap/react'
+
+/**
+ * Extract plain text from Tiptap JSONContent
+ */
+function extractTextFromJSONContent(content: JSONContent): string {
+  if (!content) return ''
+  
+  let text = ''
+  
+  // Add text from current node
+  if (content.text) {
+    text += content.text
+  }
+  
+  // Recursively extract text from child nodes
+  if (content.content && Array.isArray(content.content)) {
+    for (const child of content.content) {
+      const childText = extractTextFromJSONContent(child)
+      // Add space between block-level elements
+      if (childText && text && content.type !== 'text') {
+        text += ' '
+      }
+      text += childText
+    }
+  }
+  
+  return text
+}
+import {
+  Popover,
+  PopoverContent,
+  Card,
+  Badge,
+} from '@/components/primitives'
+import {
+  Conversation,
+  ConversationContent,
+} from '@/components/ai-elements/conversation'
+import {
+  Message,
+  MessageAvatar,
+  MessageContent,
+} from '@/components/ai-elements/message'
+import {
+  InputGroup,
+  InputGroupTextarea,
+  InputGroupButton,
+} from '@/components/primitives/InputGroup'
+import { Send } from 'lucide-react'
+import { formatCommentDate } from '@/utils/ai-editor'
+import type { CommentBoxProps, Comment } from '@/types/ai-editor'
+import { cn } from '@/lib/utils'
+
+/**
+ * Internal component for rendering comment thread
+ */
+const CommentThreadDisplay = React.memo<{
+  comments: Comment[]
+  currentUserId: string
+  onReply?: (commentId: string, content: string) => void
+}>(({ comments, currentUserId, onReply }) => {
+  return (
+    <Conversation className="flex-none">
+      <ConversationContent className="p-0 space-y-3">
+        {comments.map((comment) => (
+          <Message
+            key={comment.id}
+            from={comment.userId === currentUserId ? 'user' : 'assistant'}
+            className="!bg-transparent !mx-0 !px-0"
+          >
+            <MessageAvatar
+              src={comment.avatarSrc || '/default-avatar.png'}
+              name={comment.userName}
+            />
+            <MessageContent variant="flat" className="!bg-transparent !px-0 !py-0">
+              <div className={cn(
+                "flex items-center gap-2 text-xs text-muted-foreground",
+                comment.userId === currentUserId && "flex-row-reverse"
+              )}>
+                <span className="font-medium text-foreground">
+                  {comment.userName}
+                </span>
+                <span>{formatCommentDate(comment.timestamp)}</span>
+                {comment.isEdited && <span className="italic">(edited)</span>}
+              </div>
+              <div className="text-sm">
+                {typeof comment.contentRich === 'string'
+                  ? comment.contentRich
+                  : extractTextFromJSONContent(comment.contentRich)}
+              </div>
+            </MessageContent>
+          </Message>
+        ))}
+
+        <InputGroup className="w-full">
+          <InputGroupTextarea
+            placeholder="Reply..."
+            className="min-h-[40px] max-h-[200px] py-2 resize-none min-w-0"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                const value = e.currentTarget.value
+                if (value.trim() && comments.length > 0 && onReply) {
+                  onReply(comments[0].id, value)
+                  e.currentTarget.value = ''
+                }
+              }
+            }}
+          />
+          <InputGroupButton
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            onClick={(e) => {
+              const textarea = e.currentTarget.parentElement?.querySelector('textarea')
+              if (textarea) {
+                const value = textarea.value
+                if (value.trim() && comments.length > 0 && onReply) {
+                  onReply(comments[0].id, value)
+                  textarea.value = ''
+                }
+              }
+            }}
+          >
+            <Send className="h-4 w-4" />
+          </InputGroupButton>
+        </InputGroup>
+      </ConversationContent>
+    </Conversation>
+  )
+})
+
+CommentThreadDisplay.displayName = 'CommentThreadDisplay'
+
+export const CommentBox = React.memo<CommentBoxProps>(
+  ({
+    annotation,
+    position,
+    visible,
+    currentUserId,
+    onClose,
+    onCommentAdd,
+    onCommentReply,
+  }) => {
+    if (!visible) return null
+
+    const handleInputSubmit = (textareaElement: HTMLTextAreaElement) => {
+      const value = textareaElement.value
+      if (!value.trim()) return
+
+      // Convert string to JSONContent format
+      const content = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: value }],
+          },
+        ],
+      }
+
+      if (!annotation) {
+        // New comment
+        onCommentAdd?.(content)
+        onClose?.()
+      } else {
+        // Reply to existing annotation
+        onCommentReply?.(annotation.id, content)
+        textareaElement.value = ''
+      }
+    }
+
+    const renderContent = () => {
+      // New comment (no annotation)
+      if (!annotation) {
+        return (
+          <div className="p-4">
+            <InputGroup className="w-full">
+              <InputGroupTextarea
+                placeholder="Add a comment..."
+                autoFocus
+                className="min-h-[40px] max-h-[200px] py-2 resize-none min-w-0"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault()
+                    handleInputSubmit(e.currentTarget)
+                  }
+                }}
+              />
+              <InputGroupButton
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                onClick={(e) => {
+                  const textarea = e.currentTarget.parentElement?.querySelector('textarea')
+                  if (textarea) {
+                    handleInputSubmit(textarea)
+                  }
+                }}
+              >
+                <Send className="h-4 w-4" />
+              </InputGroupButton>
+            </InputGroup>
+          </div>
+        )
+      }
+
+      // Existing comment annotation
+      if (annotation.type === 'comment') {
+        return (
+          <div className="p-4">
+            <CommentThreadDisplay
+              comments={annotation.data.thread}
+              currentUserId={currentUserId}
+              onReply={(_, content) => {
+                // Convert string to JSONContent format
+                const jsonContent = {
+                  type: 'doc',
+                  content: [
+                    {
+                      type: 'paragraph',
+                      content: [{ type: 'text', text: content }],
+                    },
+                  ],
+                }
+                onCommentReply?.(annotation.id, jsonContent)
+              }}
+            />
+          </div>
+        )
+      }
+
+      // Suggestion annotation (no diff display, just reason and comments)
+      if (annotation.type === 'suggestion') {
+        const { action } = annotation.data
+        const badgeConfig = {
+          insert: { label: 'Added', className: 'bg-green-500' },
+          delete: { label: 'Removed', className: 'bg-red-500' },
+          modify: { label: 'Modified', className: 'bg-yellow-500' },
+        }
+        const badge = badgeConfig[action]
+
+        return (
+          <div className="flex flex-col gap-1 p-1">
+            <div className="flex items-center gap-2">
+              {badge && (
+                <Badge variant="default" className={badge.className}>
+                  {badge.label}
+                </Badge>
+              )}
+              {annotation.data.reason && (
+                <span className="text-sm text-muted-foreground">
+                  {annotation.data.reason}
+                </span>
+              )}
+            </div>
+            {annotation.data.thread.length > 0 && (
+              <>
+                <div className="h-px bg-border" />
+                <CommentThreadDisplay
+                  comments={annotation.data.thread}
+                  currentUserId={currentUserId}
+                  onReply={(_, content) => {
+                    // Convert string to JSONContent format
+                    const jsonContent = {
+                      type: 'doc',
+                      content: [
+                        {
+                          type: 'paragraph',
+                          content: [{ type: 'text', text: content }],
+                        },
+                      ],
+                    }
+                    onCommentReply?.(annotation.id, jsonContent)
+                  }}
+                />
+              </>
+            )}
+          </div>
+        )
+      }
+
+      // Block addition annotation
+      if (annotation.type === 'block-addition') {
+        return (
+          <div className="flex flex-col gap-1 p-1">
+            <div className="flex items-center gap-2">
+              <Badge variant="default" className="bg-green-500">
+                Added
+              </Badge>
+              {annotation.data.reason && (
+                <span className="text-sm text-muted-foreground">
+                  {annotation.data.reason}
+                </span>
+              )}
+            </div>
+            {annotation.data.thread.length > 0 && (
+              <>
+                <div className="h-px bg-border" />
+                <CommentThreadDisplay
+                  comments={annotation.data.thread}
+                  currentUserId={currentUserId}
+                  onReply={(_, content) => {
+                    // Convert string to JSONContent format
+                    const jsonContent = {
+                      type: 'doc',
+                      content: [
+                        {
+                          type: 'paragraph',
+                          content: [{ type: 'text', text: content }],
+                        },
+                      ],
+                    }
+                    onCommentReply?.(annotation.id, jsonContent)
+                  }}
+                />
+              </>
+            )}
+          </div>
+        )
+      }
+
+      return null
+    }
+
+    return (
+      <Popover open={visible} modal={false}>
+        <PopoverContent
+          className="w-[400px] p-0"
+          style={{
+            position: 'absolute',
+            left: position.x,
+            top: position.y,
+          }}
+          side="right"
+          align="start"
+          onEscapeKeyDown={onClose}
+          onPointerDownOutside={(e) => {
+            // Only close if clicking outside the popover AND outside any annotation
+            const target = e.target as HTMLElement
+            const isAnnotation = target.closest('[data-comment-id], [data-suggestion-id], [data-addition-id]')
+            if (!isAnnotation) {
+              onClose?.()
+            }
+          }}
+        >
+          <Card className="border-0 shadow-none p-0">{renderContent()}</Card>
+        </PopoverContent>
+      </Popover>
+    )
+  }
+)
+
+CommentBox.displayName = 'CommentBox'

package/components/composites/CommentBox/index.ts

@@ -0,0 +1,8 @@
+/**
+ * CommentBox Block
+ * 
+ * Exports the CommentBox component
+ */
+
+export { CommentBox } from './CommentBox'
+export type { CommentBoxProps } from '@/types/ai-editor'

package/components/composites/Confirmation/Confirmation.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Confirmation } from "./Confirmation";
+import * as React from "react";
+
+const meta: Meta<typeof Confirmation> = {
+  title: "Blocks/Confirmation",
+  component: Confirmation,
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Confirmation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Approval requested state with title and actions
+ */
+export const ApprovalRequested: Story = {
+  args: {
+    title: "Do you want to delete this file?",
+    state: "approval-requested",
+    approval: {},
+    onApprove: () => console.log("Approved"),
+    onReject: () => console.log("Rejected"),
+    children: (
+      <p className="text-sm">This action cannot be undone. The file will be permanently deleted.</p>
+    ),
+  },
+};
+
+/**
+ * Approved state showing confirmed action
+ */
+export const Approved: Story = {
+  args: {
+    title: "File deletion confirmed",
+    state: "approval-responded",
+    approval: { approved: true },
+    onApprove: () => console.log("Approved"),
+    onReject: () => console.log("Rejected"),
+    children: (
+      <p className="text-sm">The file has been successfully deleted.</p>
+    ),
+  },
+};
+
+/**
+ * Rejected state showing cancelled action
+ */
+export const Rejected: Story = {
+  args: {
+    title: "File deletion cancelled",
+    state: "approval-responded",
+    approval: { approved: false },
+    onApprove: () => console.log("Approved"),
+    onReject: () => console.log("Rejected"),
+    children: (
+      <p className="text-sm">The file has not been deleted.</p>
+    ),
+  },
+};
+
+/**
+ * Interactive example with state management
+ */
+export const WithStateManagement: Story = {
+  render: () => {
+    const [state, setState] = React.useState<"approval-requested" | "approval-responded">("approval-requested");
+    const [approval, setApproval] = React.useState<{ approved: boolean } | undefined>(undefined);
+
+    const handleApprove = () => {
+      setState("approval-responded");
+      setApproval({ approved: true });
+      console.log("Approved");
+    };
+
+    const handleReject = () => {
+      setState("approval-responded");
+      setApproval({ approved: false });
+      console.log("Rejected");
+    };
+
+    const handleReset = () => {
+      setState("approval-requested");
+      setApproval(undefined);
+    };
+
+    return (
+      <div className="space-y-4">
+        {state === "approval-responded" && (
+          <div className="rounded-md border border-border bg-muted p-4">
+            <p className="text-sm">
+              {approval?.approved && "✅ Action approved!"}
+              {approval?.approved === false && "❌ Action rejected!"}
+            </p>
+            <button
+              onClick={handleReset}
+              className="mt-2 text-sm text-primary underline"
+            >
+              Reset to approval requested
+            </button>
+          </div>
+        )}
+
+        <Confirmation
+          title="Review and confirm this action"
+          state={state}
+          approval={approval}
+          onApprove={handleApprove}
+          onReject={handleReject}
+        >
+          <p className="text-sm">This is the content that needs approval. Click the buttons below to approve or reject.</p>
+        </Confirmation>
+      </div>
+    );
+  },
+};
+
+/**
+ * Without title - content only
+ */
+export const WithoutTitle: Story = {
+  args: {
+    state: "approval-requested",
+    approval: {},
+    onApprove: () => console.log("Approved"),
+    onReject: () => console.log("Rejected"),
+    children: (
+      <>
+        <p className="text-sm font-medium">Are you sure you want to proceed?</p>
+        <p className="text-xs text-muted-foreground mt-1">This action cannot be undone.</p>
+      </>
+    ),
+  },
+};
+
+/**
+ * With only approve action
+ */
+export const OnlyApprove: Story = {
+  args: {
+    title: "Acknowledge this message",
+    state: "approval-requested",
+    approval: {},
+    onApprove: () => console.log("Acknowledged"),
+    children: (
+      <p className="text-sm">Please review this information before continuing.</p>
+    ),
+  },
+};

package/components/composites/Confirmation/Confirmation.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import {
+  Confirmation as AIConfirmation,
+  ConfirmationTitle,
+  ConfirmationActions,
+  ConfirmationAction,
+} from "@/components/ai-elements/confirmation";
+import { Icon } from "@/components/primitives/Icon";
+import { cn } from "@/lib/utils";
+
+/**
+ * Confirmation Block
+ *
+ * Approval workflow component that internally manages action buttons.
+ * Wraps content with Confirmation AI element and provides approve/reject actions.
+ */
+
+// Define our own types since ToolUIPart doesn't exist in current AI SDK
+type ToolUIState =
+  | "input-streaming"
+  | "input-available"
+  | "approval-requested"
+  | "approval-responded"
+  | "output-denied"
+  | "output-available"
+  | "output-error";
+
+type ToolApproval = {
+  approved?: boolean;
+};
+
+export interface ConfirmationProps {
+  /**
+   * Title text displayed at the top of the confirmation
+   */
+  title?: string;
+  /**
+   * Callback when user approves
+   */
+  onApprove?: () => void;
+  /**
+   * Callback when user rejects
+   */
+  onReject?: () => void;
+  /**
+   * Confirmation state
+   */
+  state: ToolUIState;
+  /**
+   * Approval data
+   */
+  approval?: ToolApproval;
+  /**
+   * Content to display (e.g., FileQueue)
+   */
+  children: React.ReactNode;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * Confirmation component - manages approval workflow with internal action buttons
+ */
+export const Confirmation = React.memo<ConfirmationProps>(
+  ({ title, onApprove, onReject, state, approval, children, className }) => {
+    return (
+      <AIConfirmation state={state} approval={approval} className={cn(className)}>
+        {title && <ConfirmationTitle>{title}</ConfirmationTitle>}
+
+        {children}
+
+        <ConfirmationActions>
+          {onReject && (
+            <ConfirmationAction variant="outline" onClick={onReject}>
+              <Icon name="x" size="sm" className="mr-2" />
+              Reject All
+            </ConfirmationAction>
+          )}
+          {onApprove && (
+            <ConfirmationAction variant="default" onClick={onApprove}>
+              <Icon name="check" size="sm" className="mr-2" />
+              Approve All
+            </ConfirmationAction>
+          )}
+        </ConfirmationActions>
+      </AIConfirmation>
+    );
+  }
+);
+
+Confirmation.displayName = "Confirmation";

package/components/composites/Confirmation/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Confirmation Block
+ *
+ * Central export point for the Confirmation block component and its related types.
+ */
+export { Confirmation } from "./Confirmation";
+export type { ConfirmationProps } from "./Confirmation";

package/components/composites/DataTable/DataTable.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DataTable } from './DataTable'
+import { createColumnHelper } from '@tanstack/react-table'
+
+const meta = {
+  title: 'Composites/DataTable',
+  component: DataTable,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof DataTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+type Person = { id: number; name: string; email: string; role: string }
+const data: Person[] = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
+]
+
+const columnHelper = createColumnHelper<Person>()
+const columns = [
+  columnHelper.accessor('name', { header: 'Name' }),
+  columnHelper.accessor('email', { header: 'Email' }),
+  columnHelper.accessor('role', { header: 'Role' }),
+]
+
+export const Default: Story = {
+  args: {
+    data,
+    columns,
+    searchColumn: 'name',
+  },
+}