@object-ui/components 0.3.1 → 2.0.0

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

@@ -0,0 +1,248 @@
+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,
+};

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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,36 @@
+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,
+};

package/src/stories-json/crm-live-data.stories.tsx

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useEffect, useState, useCallback } from 'react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta: Meta = {
+  title: 'Plugins/Data Views/CRM Live Data',
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+const dataSource = createStorybookDataSource();
+
+// ==========================================
+// Helper: Fetches data from MSW and renders a schema
+// ==========================================
+const LiveDataView = ({ 
+  objectName, 
+  schema, 
+  title 
+}: { 
+  objectName: string; 
+  schema: (data: any[]) => BaseSchema;
+  title: string;
+}) => {
+    const [data, setData] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchData = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await dataSource.find(objectName, { $top: 50 });
+            setData(result.data as any[]);
+        } catch (err: any) {
+            console.error(`[CRM Live] Failed to fetch ${objectName}:`, err);
+            setError(err?.message || `Failed to fetch ${objectName}`);
+        } finally {
+            setLoading(false);
+        }
+    }, [objectName]);
+
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+
+    if (loading) return <div className="p-8 text-muted-foreground">Loading {title} from MSW API...</div>;
+    if (error) return (
+        <div className="p-8 space-y-2">
+            <div className="text-destructive font-medium">API Error: {error}</div>
+            <div className="text-sm text-muted-foreground">
+                Ensure the ObjectStack MSW runtime is running. Check browser console for logs.
+            </div>
+        </div>
+    );
+
+    return (
+        <SchemaRendererProvider dataSource={dataSource}>
+            <div className="space-y-4">
+                <h2 className="text-lg font-semibold">{title} ({data.length} records)</h2>
+                <SchemaRenderer schema={schema(data)} />
+            </div>
+        </SchemaRendererProvider>
+    );
+};
+
+// ==========================================
+// Contact Grid from MSW
+// ==========================================
+export const ContactGrid: StoryObj = {
+    name: 'Contact Grid (Live)',
+    render: () => (
+        <LiveDataView
+            objectName="contact"
+            title="Contacts"
+            schema={(data) => ({
+                type: 'object-grid',
+                objectName: 'contact',
+                columns: [
+                    { field: 'name', header: 'Name', sortable: true, filterable: true },
+                    { field: 'email', header: 'Email', sortable: true },
+                    { field: 'title', header: 'Title' },
+                    { field: 'department', header: 'Department' },
+                    { field: 'status', header: 'Status', sortable: true },
+                ],
+                data,
+                pagination: true,
+                pageSize: 10,
+                className: 'w-full',
+            } as any)}
+        />
+    ),
+};
+
+// ==========================================
+// Account Grid from MSW
+// ==========================================
+export const AccountGrid: StoryObj = {
+    name: 'Account Grid (Live)',
+    render: () => (
+        <LiveDataView
+            objectName="account"
+            title="Accounts"
+            schema={(data) => ({
+                type: 'object-grid',
+                objectName: 'account',
+                columns: [
+                    { field: 'name', header: 'Company', sortable: true, filterable: true },
+                    { field: 'industry', header: 'Industry', sortable: true },
+                    { field: 'type', header: 'Type' },
+                    { field: 'employees', header: 'Employees', type: 'number' },
+                    { field: 'phone', header: 'Phone' },
+                ],
+                data,
+                pagination: true,
+                pageSize: 10,
+                className: 'w-full',
+            } as any)}
+        />
+    ),
+};
+
+// ==========================================
+// Opportunity Grid from MSW
+// ==========================================
+export const OpportunityGrid: StoryObj = {
+    name: 'Opportunity Grid (Live)',
+    render: () => (
+        <LiveDataView
+            objectName="opportunity"
+            title="Opportunities"
+            schema={(data) => ({
+                type: 'object-grid',
+                objectName: 'opportunity',
+                columns: [
+                    { field: 'name', header: 'Opportunity', sortable: true },
+                    { field: 'amount', header: 'Amount', type: 'currency', sortable: true },
+                    { field: 'stage', header: 'Stage', sortable: true },
+                    { field: 'probability', header: 'Probability' },
+                    { field: 'close_date', header: 'Close Date', type: 'date' },
+                ],
+                data,
+                pagination: true,
+                pageSize: 10,
+                className: 'w-full',
+            } as any)}
+        />
+    ),
+};