@object-ui/components 3.3.0 → 3.3.1

package/src/stories-json/charts.stories.tsx

@@ -1,195 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Plugins/Rich Content/Charts',
-  component: SchemaRenderer,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } },
-  },
-} satisfies Meta<any>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
-
-export const BarChart: Story = {
-  render: renderStory,
-  args: {
-    type: 'bar-chart',
-    data: [
-      { name: 'Jan', value: 400 },
-      { name: 'Feb', value: 300 },
-      { name: 'Mar', value: 600 },
-      { name: 'Apr', value: 800 },
-      { name: 'May', value: 500 },
-      { name: 'Jun', value: 700 }
-    ],
-    dataKey: 'value',
-    xAxisKey: 'name',
-    height: 400,
-    color: '#3b82f6'
-  } as any,
-};
-
-export const MultiSeriesChart: Story = {
-  render: renderStory,
-  args: {
-    type: 'chart',
-    chartType: 'bar',
-    data: [
-      { name: 'Jan', sales: 400, revenue: 240 },
-      { name: 'Feb', sales: 300, revenue: 139 },
-      { name: 'Mar', sales: 600, revenue: 380 },
-      { name: 'Apr', sales: 800, revenue: 430 },
-      { name: 'May', sales: 500, revenue: 220 },
-      { name: 'Jun', sales: 700, revenue: 350 }
-    ],
-    config: {
-      sales: { label: 'Sales', color: '#3b82f6' },
-      revenue: { label: 'Revenue', color: '#10b981' }
-    },
-    xAxisKey: 'name',
-    series: [
-      { dataKey: 'sales' },
-      { dataKey: 'revenue' }
-    ]
-  } as any,
-};
-
-export const LineChart: Story = {
-  render: renderStory,
-  args: {
-    type: 'chart',
-    chartType: 'line',
-    data: [
-      { month: 'Jan', users: 120, sessions: 450 },
-      { month: 'Feb', users: 180, sessions: 620 },
-      { month: 'Mar', users: 250, sessions: 890 },
-      { month: 'Apr', users: 320, sessions: 1200 },
-      { month: 'May', users: 410, sessions: 1560 },
-      { month: 'Jun', users: 520, sessions: 1980 }
-    ],
-    config: {
-      users: { label: 'Active Users', color: '#8b5cf6' },
-      sessions: { label: 'Sessions', color: '#ec4899' }
-    },
-    xAxisKey: 'month',
-    series: [
-      { dataKey: 'users' },
-      { dataKey: 'sessions' }
-    ]
-  } as any,
-};
-
-export const AreaChart: Story = {
-  render: renderStory,
-  args: {
-    type: 'chart',
-    chartType: 'area',
-    data: [
-      { date: 'Mon', traffic: 2400 },
-      { date: 'Tue', traffic: 1398 },
-      { date: 'Wed', traffic: 9800 },
-      { date: 'Thu', traffic: 3908 },
-      { date: 'Fri', traffic: 4800 },
-      { date: 'Sat', traffic: 3800 },
-      { date: 'Sun', traffic: 4300 }
-    ],
-    config: {
-      traffic: { label: 'Website Traffic', color: '#06b6d4' }
-    },
-    xAxisKey: 'date',
-    series: [
-      { dataKey: 'traffic' }
-    ]
-  } as any,
-};
-
-export const PieChart: Story = {
-  render: renderStory,
-  args: {
-    type: 'pie-chart',
-    data: [
-      { name: 'Chrome', value: 65 },
-      { name: 'Firefox', value: 20 },
-      { name: 'Safari', value: 10 },
-      { name: 'Edge', value: 5 },
-    ],
-    xAxisKey: 'name',
-    series: [{ dataKey: 'value' }],
-    config: {
-      Chrome: { label: 'Chrome', color: 'hsl(var(--chart-1))' },
-      Firefox: { label: 'Firefox', color: 'hsl(var(--chart-2))' },
-      Safari: { label: 'Safari', color: 'hsl(var(--chart-3))' },
-      Edge: { label: 'Edge', color: 'hsl(var(--chart-4))' },
-    }
-  } as any,
-};
-
-export const DonutChart: Story = {
-  render: renderStory,
-  args: {
-    type: 'donut-chart',
-    data: [
-      { category: 'Electronics', revenue: 45000 },
-      { category: 'Clothing', revenue: 32000 },
-      { category: 'Food', revenue: 28000 },
-      { category: 'Books', revenue: 15000 },
-    ],
-    xAxisKey: 'category',
-    series: [{ dataKey: 'revenue' }],
-    config: {
-      Electronics: { label: 'Electronics', color: '#3b82f6' },
-      Clothing: { label: 'Clothing', color: '#10b981' },
-      Food: { label: 'Food', color: '#f59e0b' },
-      Books: { label: 'Books', color: '#ef4444' },
-    }
-  } as any,
-};
-
-export const RadarChart: Story = {
-  render: renderStory,
-  args: {
-    type: 'radar-chart',
-    data: [
-      { skill: 'React', score: 90 },
-      { skill: 'TypeScript', score: 85 },
-      { skill: 'Node.js', score: 80 },
-      { skill: 'Python', score: 70 },
-      { skill: 'Docker', score: 75 },
-      { skill: 'AWS', score: 65 },
-    ],
-    xAxisKey: 'skill',
-    series: [{ dataKey: 'score' }],
-    config: {
-      score: { label: 'Skill Level', color: 'hsl(var(--chart-1))' }
-    }
-  } as any,
-};
-
-export const ScatterChart: Story = {
-  render: renderStory,
-  args: {
-    type: 'scatter-chart',
-    data: [
-      { height: 160, weight: 65 },
-      { height: 165, weight: 70 },
-      { height: 170, weight: 75 },
-      { height: 175, weight: 80 },
-      { height: 180, weight: 85 },
-      { height: 185, weight: 90 },
-    ],
-    xAxisKey: 'height',
-    series: [{ dataKey: 'weight' }],
-    config: {
-      weight: { label: 'Weight (kg)', color: 'hsl(var(--chart-1))' }
-    }
-  } as any,
-};

package/src/stories-json/chatbot.stories.tsx

@@ -1,349 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Plugins/Rich Content/Chatbot',
-  component: SchemaRenderer,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } },
-  },
-} satisfies Meta<any>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
-
-export const Default: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: 'welcome',
-        role: 'assistant',
-        content: 'Hello! How can I help you today?',
-      }
-    ],
-    placeholder: 'Type your message...',
-    showTimestamp: false,
-    disabled: false,
-    userAvatarFallback: 'You',
-    assistantAvatarFallback: 'AI',
-    maxHeight: '500px',
-    autoResponse: true,
-    autoResponseText: 'Thank you for your message! This is an automated response.',
-    autoResponseDelay: 1000,
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-export const WithTimestamps: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: '1',
-        role: 'assistant',
-        content: 'Hello! I\'m here to assist you.',
-        timestamp: '10:00 AM'
-      },
-      {
-        id: '2',
-        role: 'user',
-        content: 'Hi! I need help with my account.',
-        timestamp: '10:01 AM'
-      },
-      {
-        id: '3',
-        role: 'assistant',
-        content: 'I\'d be happy to help! What specific issue are you experiencing?',
-        timestamp: '10:01 AM'
-      }
-    ],
-    placeholder: 'Type your message...',
-    showTimestamp: true,
-    autoResponse: true,
-    autoResponseText: 'I understand your concern. Let me help you with that.',
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-export const CustomerSupport: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: '1',
-        role: 'system',
-        content: 'Support session started'
-      },
-      {
-        id: '2',
-        role: 'assistant',
-        content: 'Welcome to customer support! How may I assist you today?',
-      },
-      {
-        id: '3',
-        role: 'user',
-        content: 'I\'m having trouble accessing my dashboard.',
-      },
-      {
-        id: '4',
-        role: 'assistant',
-        content: 'I\'m sorry to hear that. Let me help you troubleshoot. First, can you tell me what error message you\'re seeing?',
-      }
-    ],
-    placeholder: 'Describe your issue...',
-    assistantAvatarFallback: 'CS',
-    autoResponse: true,
-    autoResponseText: 'Thank you for that information. Let me check our system.',
-    autoResponseDelay: 1500,
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-export const WithMarkdown: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: '1',
-        role: 'user',
-        content: 'Can you show me how to use markdown?',
-      },
-      {
-        id: '2',
-        role: 'assistant',
-        content: `Sure! Here are some markdown examples:
-
-**Bold text** and *italic text*
-
-# Heading 1
-## Heading 2
-
-- List item 1
-- List item 2
-- List item 3
-
-\`inline code\` and code blocks:
-
-\`\`\`javascript
-const greeting = "Hello, World!";
-console.log(greeting);
-\`\`\`
-
-> This is a blockquote
-`,
-      }
-    ],
-    placeholder: 'Type your message...',
-    enableMarkdown: true,
-    showTimestamp: false,
-    autoResponse: true,
-    autoResponseText: 'Markdown is great for formatting!',
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-export const WithCodeHighlighting: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: '1',
-        role: 'user',
-        content: 'Can you help me with a React component?',
-      },
-      {
-        id: '2',
-        role: 'assistant',
-        content: `Of course! Here's a simple React component example:
-
-\`\`\`tsx
-import React from 'react';
-
-interface ButtonProps {
-  label: string;
-  onClick: () => void;
-}
-
-export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
-  return (
-    <button
-      onClick={onClick}
-      className="px-4 py-2 bg-blue-500 text-white rounded"
-    >
-      {label}
-    </button>
-  );
-};
-\`\`\`
-
-This component accepts a \`label\` and \`onClick\` handler as props.`,
-      }
-    ],
-    placeholder: 'Ask me anything...',
-    enableMarkdown: true,
-    showTimestamp: false,
-    autoResponse: true,
-    autoResponseText: 'I can help with code examples!',
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-export const WithFileUpload: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: '1',
-        role: 'assistant',
-        content: 'You can upload files by clicking the attachment button below.',
-      }
-    ],
-    placeholder: 'Type your message or upload a file...',
-    enableFileUpload: true,
-    acceptedFileTypes: 'image/*,.pdf,.doc,.docx',
-    maxFileSize: 5242880, // 5MB
-    showTimestamp: false,
-    autoResponse: true,
-    autoResponseText: 'File received! Processing...',
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-export const StreamingResponse: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: '1',
-        role: 'user',
-        content: 'Tell me a story',
-      },
-      {
-        id: '2',
-        role: 'assistant',
-        content: 'Once upon a time in a digital world...',
-        streaming: true,
-      }
-    ],
-    placeholder: 'Type your message...',
-    enableMarkdown: true,
-    showTimestamp: false,
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-// ============================================================================
-// AI SDUI Mode Stories (service-ai integration)
-// ============================================================================
-
-/**
- * AI Streaming Mode - demonstrates schema config for service-ai backend.
- * In production, set `api` to your service-ai endpoint.
- * Without a real backend, this falls back to local auto-response.
- */
-export const AIStreamingMode: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: 'welcome',
-        role: 'assistant',
-        content: 'Hello! I\'m your AI assistant powered by service-ai. Ask me anything!',
-      }
-    ],
-    placeholder: 'Ask the AI assistant...',
-    enableMarkdown: true,
-    showTimestamp: false,
-    // AI SDUI fields — in production, set api to your endpoint:
-    // api: '/api/v1/ai/chat',
-    // model: 'gpt-4o',
-    // systemPrompt: 'You are a helpful assistant.',
-    // streamingEnabled: true,
-    // Fallback to auto-response for demo:
-    autoResponse: true,
-    autoResponseText: 'This is a demo response. In production, connect `api` to your service-ai endpoint for real streaming.',
-    autoResponseDelay: 800,
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-/**
- * AI Chat with system prompt and model config.
- */
-export const AIWithSystemPrompt: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: 'system-1',
-        role: 'system',
-        content: 'You are a customer support agent for Acme Inc.',
-      },
-      {
-        id: 'welcome',
-        role: 'assistant',
-        content: 'Welcome to Acme Support! How can I help you today?',
-      }
-    ],
-    placeholder: 'Describe your issue...',
-    enableMarkdown: true,
-    showTimestamp: true,
-    systemPrompt: 'You are a customer support agent for Acme Inc. Be helpful and professional.',
-    model: 'gpt-4o',
-    autoResponse: true,
-    autoResponseText: 'Thank you for contacting Acme Support. I\'m looking into your request.',
-    autoResponseDelay: 1200,
-    className: 'w-full max-w-2xl'
-  } as any,
-};
-
-/**
- * AI Chat including tool invocation metadata in messages.
- */
-export const AIWithToolCalls: Story = {
-  render: renderStory,
-  args: {
-    type: 'chatbot',
-    messages: [
-      {
-        id: '1',
-        role: 'user',
-        content: 'What\'s the weather in San Francisco?',
-      },
-      {
-        id: '2',
-        role: 'assistant',
-        content: 'The weather in San Francisco is currently 68°F with partly cloudy skies.',
-        toolInvocations: [
-          {
-            toolCallId: 'tc-1',
-            toolName: 'getWeather',
-            args: { city: 'San Francisco' },
-            result: { temp: 68, condition: 'Partly cloudy' },
-            state: 'result',
-          }
-        ],
-      }
-    ],
-    placeholder: 'Ask about weather, stocks, or more...',
-    enableMarkdown: true,
-    className: 'w-full max-w-2xl'
-  } as any,
-};

package/src/stories-json/code-editor.stories.tsx

@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Plugins/Rich Content/Code Editor',
-  component: SchemaRenderer,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } },
-  },
-} satisfies Meta<any>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
-
-export const JavaScript: Story = {
-  render: renderStory,
-  args: {
-    type: 'code-editor',
-    value: '// Write your code here\nconsole.log("Hello, World!");',
-    language: 'javascript',
-    theme: 'vs-dark',
-    height: '400px',
-    readOnly: false
-  } as any,
-};
-
-export const TypeScript: Story = {
-  render: renderStory,
-  args: {
-    type: 'code-editor',
-    value: 'interface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\nconst user: User = {\n  id: 1,\n  name: "John Doe",\n  email: "john@example.com"\n};',
-    language: 'typescript',
-    theme: 'vs-dark',
-    height: '400px',
-    readOnly: false
-  } as any,
-};
-
-export const Python: Story = {
-  render: renderStory,
-  args: {
-    type: 'code-editor',
-    value: 'def greet(name):\n    """Greet a person by name."""\n    return f"Hello, {name}!"\n\nif __name__ == "__main__":\n    print(greet("World"))',
-    language: 'python',
-    theme: 'vs-dark',
-    height: '400px',
-    readOnly: false
-  } as any,
-};
-
-export const JSON: Story = {
-  render: renderStory,
-  args: {
-    type: 'code-editor',
-    value: '{\n  "name": "ObjectUI",\n  "version": "1.0.0",\n  "description": "Server-Driven UI Engine",\n  "features": [\n    "JSON-based components",\n    "React integration",\n    "Tailwind styling"\n  ]\n}',
-    language: 'json',
-    theme: 'vs-dark',
-    height: '400px',
-    readOnly: false
-  } as any,
-};
-
-export const ReadOnly: Story = {
-  render: renderStory,
-  args: {
-    type: 'code-editor',
-    value: '// This editor is read-only\nconst message = "You cannot edit this code";\nconsole.log(message);',
-    language: 'javascript',
-    theme: 'vs-dark',
-    height: '300px',
-    readOnly: true
-  } as any,
-};
-
-export const LightTheme: Story = {
-  render: renderStory,
-  args: {
-    type: 'code-editor',
-    value: 'function fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\nconsole.log(fibonacci(10));',
-    language: 'javascript',
-    theme: 'light',
-    height: '400px',
-    readOnly: false
-  } as any,
-};

package/src/stories-json/collapsible.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Primitives/Data Display/Collapsible',
-  component: SchemaRenderer,
-  parameters: { layout: 'centered' },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } }
-  }
-} satisfies Meta<typeof SchemaRenderer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
-
-export const Collapsible: Story = {
-  render: renderStory,
-  args: {
-    type: 'collapsible',
-    className: 'w-[350px] space-y-2',
-    trigger: [
-        { 
-            type: 'div', 
-            className: 'flex items-center justify-between space-x-4 px-4 py-2 hover:bg-muted/50 rounded-md cursor-pointer',
-            children: [
-                { type: 'text', content: '@peduarte starred 3 repositories' },
-                { type: 'icon', name: 'chevrons-up-down', className: 'h-4 w-4' }
-            ]
-        }
-    ],
-    content: [
-         { type: 'div', className: 'rounded-md border p-2 mb-2', children: [{type:'text', content: '@radix-ui/primitives'}] },
-         { type: 'div', className: 'rounded-md border p-2', children: [{type:'text', content: '@radix-ui/react'}] }
-    ]
-  } as any,
-};

package/src/stories-json/controls.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Primitives/Data Entry/Controls',
-  component: SchemaRenderer,
-  parameters: { layout: 'centered' },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } }
-  }
-} satisfies Meta<typeof SchemaRenderer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
-
-export const Checkbox: Story = {
-  render: renderStory,
-  args: {
-    type: 'checkbox',
-    label: 'Accept terms and conditions',
-    id: 'terms1'
-  } as any,
-};
-
-export const Switch: Story = {
-  render: renderStory,
-  args: {
-    type: 'switch',
-    label: 'Airplane Mode',
-    id: 'airplane-mode'
-  } as any,
-};