ai-design-system 0.1.0

package/components/composites/SpecialistMessage/SpecialistMessage.stories.tsx

@@ -0,0 +1,286 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SpecialistMessage } from './SpecialistMessage'
+import { FileText, Search, BarChart, CheckCircle } from 'lucide-react'
+
+const meta: Meta<typeof SpecialistMessage> = {
+  title: 'Composites/SpecialistMessage',
+  component: SpecialistMessage,
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof SpecialistMessage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default state - always expanded, no collapse trigger
+ */
+export const Default: Story = {
+  args: {
+    message: {
+      id: '1',
+      name: 'research-agent',
+      description: 'Conducting research on the requested topic',
+      icon: <Search className="size-4" />,
+      content: 'I conducted extensive research on the requested topic. Here are my findings: The analysis shows significant trends in the data, with key patterns emerging across multiple dimensions. I recommend proceeding with the proposed approach based on these insights.',
+      status: 'completed',
+    },
+    collapsible: false,
+    isNested: false,
+  },
+}
+
+/**
+ * With description summary - shows in header
+ */
+export const WithDescription: Story = {
+  args: {
+    message: {
+      id: '2',
+      name: 'analysis-agent',
+      description: 'Analyzing data and generating insights',
+      icon: <BarChart className="size-4" />,
+      content: 'I analyzed the data and generated comprehensive insights. Here are the key findings from my research that you should consider for the next steps in the implementation process.',
+      status: 'completed',
+    },
+    collapsible: false,
+    isNested: false,
+  },
+}
+
+/**
+ * With tool calls displayed inline
+ */
+export const WithToolCalls: Story = {
+  args: {
+    message: {
+      id: '3',
+      name: 'file-agent',
+      description: 'Processing files and generating reports',
+      icon: <FileText className="size-4" />,
+      content: 'I processed the files and generated a comprehensive report. The analysis includes data from multiple sources and provides actionable recommendations.',
+      status: 'completed',
+      toolCalls: [
+        {
+          id: 'tool_1',
+          name: 'write_file',
+          args: { filename: 'report.md', content: 'Analysis results...' },
+          result: 'File created successfully at /workspace/report.md',
+          status: 'completed',
+        },
+        {
+          id: 'tool_2',
+          name: 'read_file',
+          args: { filename: 'data.json' },
+          result: '{"records": 150, "status": "processed", "timestamp": "2024-01-15T10:30:00Z"}',
+          status: 'completed',
+        },
+        {
+          id: 'tool_3',
+          name: 'analyze_data',
+          args: { dataset: 'sales_data.csv' },
+          result: 'Analysis complete. Found 5 key trends and 12 anomalies requiring attention.',
+          status: 'completed',
+        },
+      ],
+    },
+    collapsible: false,
+    isNested: false,
+  },
+}
+
+/**
+ * Collapsible variant - collapsed by default with trigger
+ */
+export const CollapsibleCollapsed: Story = {
+  args: {
+    message: {
+      id: '4',
+      name: 'documentation-agent',
+      description: "Comprehensive review of codebase documentation completed",
+      icon: <FileText className="size-4" />,
+      content: `I've completed a comprehensive review of the codebase documentation.
+
+Here's what I found:
+
+## Current State
+The documentation covers most of the core features but lacks detailed examples in several key areas. The API reference is well-structured but could benefit from more usage scenarios.
+
+## Recommendations
+1. Add interactive code examples for each major feature
+2. Include troubleshooting guides for common issues
+3. Expand the getting started tutorial with real-world use cases
+4. Add architecture diagrams to explain system components
+5. Document best practices and anti-patterns
+
+## Implementation Plan
+I suggest prioritizing the API documentation updates first, followed by the tutorial enhancements. This approach will provide immediate value to new users while setting the foundation for more advanced documentation.
+
+The estimated effort is 2-3 weeks with a dedicated technical writer, or 4-5 weeks if handled by the engineering team alongside development work.`,
+      status: 'completed',
+    },
+    collapsible: true,
+    defaultOpen: false,
+    isNested: false,
+  },
+}
+
+/**
+ * Collapsible variant - expanded by default with trigger
+ */
+export const CollapsibleExpanded: Story = {
+  args: {
+    message: {
+      id: '5',
+      name: 'planning-agent',
+      description: 'Creating detailed implementation plan with timeline',
+      icon: <CheckCircle className="size-4" />,
+      content: 'I created a detailed implementation plan with timeline and resource allocation. The plan includes 5 phases over 6 months with clear milestones and success criteria for each phase.',
+      status: 'completed',
+    },
+    collapsible: true,
+    defaultOpen: true,
+    isNested: false,
+  },
+}
+
+/**
+ * Nested under orchestrator - indented with left margin
+ */
+export const Nested: Story = {
+  args: {
+    message: {
+      id: '6',
+      name: 'sub-agent',
+      description: 'Working on delegated sub-task',
+      content: 'This specialist message is nested under an orchestrator. Notice the left indentation indicating the hierarchical relationship.',
+      status: 'completed',
+    },
+    collapsible: false,
+    isNested: true,
+  },
+}
+
+/**
+ * Without description - only title in header
+ */
+export const WithoutDescription: Story = {
+  args: {
+    message: {
+      id: '7',
+      name: 'quick-agent',
+      content: 'Task completed successfully with no additional details needed.',
+      status: 'completed',
+    },
+    collapsible: false,
+    isNested: false,
+  },
+}
+
+/**
+ * Multiple specialists - default always-expanded style
+ */
+export const MultipleSpecialistsExpanded: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <SpecialistMessage
+        message={{
+          id: '1',
+          name: 'research-agent',
+          description: 'Gathering relevant information from multiple sources',
+          icon: <Search className="size-4" />,
+          content: 'I researched the topic and gathered relevant information from multiple sources. The findings indicate strong market demand and favorable conditions for implementation.',
+          status: 'completed',
+        }}
+        collapsible={false}
+      />
+      <SpecialistMessage
+        message={{
+          id: '2',
+          name: 'analysis-agent',
+          description: 'Performing comprehensive analysis on research data',
+          icon: <BarChart className="size-4" />,
+          content: 'Based on the research data, I performed a comprehensive analysis. The results show three key opportunities and two potential risks that should be addressed in the planning phase.',
+          status: 'completed',
+          toolCalls: [
+            {
+              id: 'tool_1',
+              name: 'analyze_market_data',
+              args: { dataset: 'market_trends.csv' },
+              result: 'Analysis complete. Market growth rate: 15% annually.',
+              status: 'completed',
+            },
+          ],
+        }}
+        collapsible={false}
+      />
+      <SpecialistMessage
+        message={{
+          id: '3',
+          name: 'planning-agent',
+          description: 'Creating implementation roadmap',
+          icon: <CheckCircle className="size-4" />,
+          content: 'I created a detailed implementation plan with timeline and resource allocation. The plan includes 5 phases over 6 months with clear milestones and success criteria.',
+          status: 'completed',
+        }}
+        collapsible={false}
+      />
+    </div>
+  ),
+}
+
+/**
+ * Multiple specialists - collapsible for space efficiency
+ */
+export const MultipleSpecialistsCollapsible: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <SpecialistMessage
+        message={{
+          id: '1',
+          name: 'research-agent',
+          description: 'Gathering relevant information from multiple sources',
+          icon: <Search className="size-4" />,
+          content: 'I researched the topic and gathered relevant information from multiple sources. The findings indicate strong market demand and favorable conditions for implementation.',
+          status: 'completed',
+        }}
+        collapsible={true}
+        defaultOpen={false}
+      />
+      <SpecialistMessage
+        message={{
+          id: '2',
+          name: 'analysis-agent',
+          description: 'Performing comprehensive analysis on research data',
+          icon: <BarChart className="size-4" />,
+          content: 'Based on the research data, I performed a comprehensive analysis. The results show three key opportunities and two potential risks that should be addressed in the planning phase.',
+          status: 'completed',
+          toolCalls: [
+            {
+              id: 'tool_1',
+              name: 'analyze_market_data',
+              args: { dataset: 'market_trends.csv' },
+              result: 'Analysis complete. Market growth rate: 15% annually.',
+              status: 'completed',
+            },
+          ],
+        }}
+        collapsible={true}
+        defaultOpen={false}
+      />
+      <SpecialistMessage
+        message={{
+          id: '3',
+          name: 'planning-agent',
+          description: 'Creating implementation roadmap',
+          icon: <CheckCircle className="size-4" />,
+          content: 'I created a detailed implementation plan with timeline and resource allocation. The plan includes 5 phases over 6 months with clear milestones and success criteria.',
+          status: 'completed',
+        }}
+        collapsible={true}
+        defaultOpen={false}
+      />
+    </div>
+  ),
+}

package/components/composites/SpecialistMessage/SpecialistMessage.tsx

@@ -0,0 +1,107 @@
+import * as React from "react"
+import {
+  Plan,
+  PlanHeader,
+  PlanTitle,
+  PlanDescription,
+  PlanTrigger,
+  PlanContent,
+} from "@/components/ai-elements/plan"
+import { ToolCallDisplay, type ToolCall } from "@/components/composites/ToolCallDisplay"
+import { cn } from "@/lib/utils"
+
+/**
+ * SpecialistMessage Block
+ *
+ * A block component for displaying specialist agent messages with optional collapsible content.
+ * Uses Plan AI element for consistent styling and optional space-efficient display.
+ */
+
+export interface SpecialistMessageData {
+  id: string
+  name: string
+  description?: string
+  icon?: React.ReactNode
+  content: string
+  toolCalls?: ToolCall[]
+  status: "pending" | "active" | "completed" | "error"
+  avatarSrc?: string
+  avatarName?: string
+}
+
+export interface SpecialistMessageProps {
+  /**
+   * Specialist message data to display
+   */
+  message: SpecialistMessageData
+  /**
+   * Whether this message is nested under an orchestrator
+   */
+  isNested?: boolean
+  /**
+   * Whether the specialist message should be open by default
+   * @default false
+   */
+  defaultOpen?: boolean
+  /**
+   * Whether to show collapse/expand trigger
+   * @default false
+   */
+  collapsible?: boolean
+}
+
+/**
+ * SpecialistMessage component - displays specialist agent messages with optional collapsible content
+ */
+export const SpecialistMessage = React.memo<SpecialistMessageProps>(
+  ({ message, isNested = false, defaultOpen = false, collapsible = true }) => {
+    const hasContent = React.useMemo(
+      () => message.content && message.content.trim() !== "",
+      [message.content]
+    )
+    const hasToolCalls = React.useMemo(
+      () => message.toolCalls !== undefined && message.toolCalls.length > 0,
+      [message.toolCalls]
+    )
+
+    return (
+      <Plan
+        defaultOpen={collapsible ? defaultOpen : true}
+        className={cn(isNested && "ml-8")}
+      >
+        <PlanHeader>
+          <div>
+            <div className="mb-4 flex items-center gap-2">
+              {message.icon && message.icon}
+              <PlanTitle>{message.name}</PlanTitle>
+            </div>
+            {message.description && (
+              <PlanDescription>{message.description}</PlanDescription>
+            )}
+          </div>
+          {collapsible && <PlanTrigger />}
+        </PlanHeader>
+
+        <PlanContent>
+          {/* Message content */}
+          {hasContent && (
+            <div className="prose prose-sm dark:prose-invert max-w-none">
+              {message.content}
+            </div>
+          )}
+
+          {/* Tool calls */}
+          {hasToolCalls && (
+            <div className={cn("space-y-2", hasContent && "mt-4")}>
+              {message.toolCalls!.map((toolCall: ToolCall) => (
+                <ToolCallDisplay key={toolCall.id} toolCall={toolCall} />
+              ))}
+            </div>
+          )}
+        </PlanContent>
+      </Plan>
+    )
+  }
+)
+
+SpecialistMessage.displayName = "SpecialistMessage"

package/components/composites/SpecialistMessage/index.ts

@@ -0,0 +1,8 @@
+/**
+ * SpecialistMessage Block
+ *
+ * Central export point for the SpecialistMessage block component and its related types.
+ */
+export { SpecialistMessage } from './SpecialistMessage'
+
+export type { SpecialistMessageProps, SpecialistMessageData } from './SpecialistMessage'

package/components/composites/StatsCard/StatsCard.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { StatsCard } from './StatsCard'
+
+const meta = {
+  title: 'Composites/StatsCard',
+  component: StatsCard,
+  tags: ['autodocs'],
+  parameters: { 
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[300px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof StatsCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'Total Revenue',
+    value: '$1,250.00',
+  },
+}
+
+export const WithTrendUp: Story = {
+  args: {
+    title: 'Total Revenue',
+    value: '$1,250.00',
+    trend: { direction: 'up', value: '+12.5%' },
+    footer: {
+      message: 'Trending up this month',
+      description: 'Visitors for the last 6 months',
+    },
+  },
+}
+
+export const WithTrendDown: Story = {
+  args: {
+    title: 'New Customers',
+    value: '1,234',
+    trend: { direction: 'down', value: '-20%' },
+    footer: {
+      message: 'Down 20% this period',
+      description: 'Acquisition needs attention',
+    },
+  },
+}
+
+export const Complete: Story = {
+  args: {
+    title: 'Active Accounts',
+    value: '45,678',
+    trend: { direction: 'up', value: '+12.5%' },
+    footer: {
+      message: 'Strong user retention',
+      description: 'Engagement exceed targets',
+    },
+  },
+}
+
+export const GrowthRate: Story = {
+  args: {
+    title: 'Growth Rate',
+    value: '4.5%',
+    trend: { direction: 'up', value: '+4.5%' },
+    footer: {
+      message: 'Steady performance increase',
+      description: 'Meets growth projections',
+    },
+  },
+}

package/components/composites/StatsCard/StatsCard.tsx

@@ -0,0 +1,81 @@
+import * as React from "react"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardFooter,
+} from "@/components/primitives/Card"
+import { Badge } from "@/components/primitives/Badge"
+import { Icon } from "@/components/primitives/Icon"
+
+export interface StatsCardProps {
+  /**
+   * Card title (e.g., "Total Revenue")
+   */
+  title: string
+  /**
+   * Main value to display (e.g., "$1,250.00")
+   */
+  value: string | number
+  /**
+   * Trend indicator with direction and percentage
+   */
+  trend?: {
+    direction: "up" | "down"
+    value: string
+  }
+  /**
+   * Footer content with primary message and secondary description
+   */
+  footer?: {
+    message: string
+    description: string
+  }
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+}
+
+export const StatsCard = React.memo<StatsCardProps>(
+  ({ title, value, trend, footer, className }) => {
+    return (
+      <Card className={className}>
+        <CardHeader>
+          <CardDescription>{title}</CardDescription>
+          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+            {value}
+          </CardTitle>
+          {trend && (
+            <CardAction>
+              <Badge variant="outline">
+                <Icon
+                  name={trend.direction === "up" ? "trending-up" : "trending-down"}
+                />
+                {trend.value}
+              </Badge>
+            </CardAction>
+          )}
+        </CardHeader>
+        {footer && (
+          <CardFooter className="flex-col items-start gap-1.5 text-sm">
+            <div className="flex flex-wrap items-center gap-2">
+              <span>{footer.message}</span>
+              {trend && (
+                <Icon
+                  name={trend.direction === "up" ? "trending-up" : "trending-down"}
+                  className="size-4"
+                />
+              )}
+            </div>
+            <div className="text-muted-foreground">{footer.description}</div>
+          </CardFooter>
+        )}
+      </Card>
+    )
+  }
+)
+
+StatsCard.displayName = "StatsCard"

package/components/composites/StatsCard/index.ts

@@ -0,0 +1,2 @@
+export { StatsCard } from './StatsCard'
+export type { StatsCardProps } from './StatsCard'

package/components/composites/TablePagination/TablePagination.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TablePagination } from './TablePagination'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getFilteredRowModel,
+} from '@tanstack/react-table'
+
+const meta = {
+  title: 'Composites/TablePagination',
+  component: TablePagination,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof TablePagination>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const data = Array.from({ length: 100 }, (_, i) => ({
+  id: i + 1,
+  name: `Item ${i + 1}`,
+}))
+
+export const Default: Story = {
+  render: () => {
+    const table = useReactTable({
+      data,
+      columns: [{ accessorKey: 'name', header: 'Name' }],
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    })
+    return <TablePagination table={table} />
+  },
+}