@object-ui/components 0.3.0 → 0.5.0

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

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Views/Markdown',
+  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 Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'markdown',
+    content: '# Hello World\n\nThis is a **markdown** component with *formatting* support.\n\n- Item 1\n- Item 2\n- Item 3'
+  } as any,
+};
+
+export const CompleteExample: Story = {
+  render: renderStory,
+  args: {
+    type: 'markdown',
+    content: `# ObjectUI Documentation
+
+## Introduction
+
+ObjectUI is a **Universal, Server-Driven UI (SDUI) Engine** built on React + Tailwind + Shadcn.
+
+### Key Features
+
+- 🚀 JSON-based component definitions
+- 🎨 Beautiful UI with Shadcn components
+- ⚡ Fast and lightweight
+- 🔧 Fully customizable
+
+### Installation
+
+\`\`\`bash
+npm install @object-ui/react
+\`\`\`
+
+### Quick Start
+
+\`\`\`javascript
+import { SchemaRenderer } from '@object-ui/react';
+
+const schema = {
+  type: 'button',
+  children: [{ type: 'text', content: 'Click Me' }]
+};
+
+<SchemaRenderer schema={schema} />
+\`\`\`
+
+> **Note:** This is just a sample documentation.
+
+For more information, visit our [website](https://objectui.dev).
+`
+  } as any,
+};
+
+export const CodeExample: Story = {
+  render: renderStory,
+  args: {
+    type: 'markdown',
+    content: `## Code Snippets
+
+Here's how to create a button component:
+
+\`\`\`json
+{
+  "type": "button",
+  "props": {
+    "variant": "default"
+  },
+  "children": [
+    {
+      "type": "text",
+      "content": "Click Me"
+    }
+  ]
+}
+\`\`\`
+
+And here's a TypeScript example:
+
+\`\`\`typescript
+interface ButtonSchema {
+  type: 'button';
+  props?: {
+    variant?: 'default' | 'outline' | 'ghost';
+  };
+  children?: BaseSchema[];
+}
+\`\`\`
+`
+  } as any,
+};
+
+export const TableExample: Story = {
+  render: renderStory,
+  args: {
+    type: 'markdown',
+    content: `## Component Comparison
+
+| Feature | ObjectUI | Traditional |
+|---------|----------|-------------|
+| Development Speed | ⚡ Fast | 🐌 Slow |
+| Flexibility | 🔥 High | ⭐ Medium |
+| Learning Curve | 📚 Easy | 🎓 Steep |
+| Performance | 🚀 Excellent | ✅ Good |
+
+### Conclusion
+
+ObjectUI provides a modern approach to building user interfaces with better development speed and flexibility.
+`
+  } as any,
+};

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Menus',
+  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 DropdownMenu: Story = {
+  render: renderStory,
+  args: {
+    type: 'dropdown-menu',
+    trigger: [
+        { type: 'button', props: { variant: 'outline' }, children: [{type:'text', content: 'Open Menu'}] }
+    ],
+    label: 'My Account',
+    items: [
+        { label: 'Profile', shortcut: '⇧⌘P' },
+        { label: 'Billing', shortcut: '⌘B' },
+        { label: 'Settings', shortcut: '⌘S' },
+        { type: 'separator' },
+        { label: 'Team', children: [
+            { label: 'Invite users' },
+            { label: 'Create team' },
+        ]},
+        { type: 'separator' },
+        { label: 'Log out', shortcut: '⇧⌘Q' }
+    ]
+  } as any,
+};
+
+export const Sheet: Story = {
+  render: renderStory,
+  args: {
+    type: 'sheet',
+    trigger: [
+        { type: 'button', props: { variant: 'outline' }, children: [{type: 'text', content: 'Open Sheet'}] }
+    ],
+    title: 'Schema/Navigation/Edit profile',
+    description: 'Make changes to your profile here. Click save when you\'re done.',
+    side: 'right',
+    content: [
+         { type: 'div', className: 'grid gap-4 py-4', children: [
+             { type: 'input', label: 'Name', defaultValue: 'Pedro Duarte', wrapperClass: 'grid grid-cols-4 items-center gap-4' },
+             { type: 'input', label: 'Username', defaultValue: '@peduarte', wrapperClass: 'grid grid-cols-4 items-center gap-4' }
+         ]}
+    ],
+    footer: [
+        { type: 'button', children: [{type: 'text', content: 'Save changes'}] }
+    ]
+  } as any,
+};

package/src/stories-json/metric-card.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Data Display/Metric Card',
+  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 Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'metric-card',
+    title: 'Total Revenue',
+    value: '$45,231.89',
+  } as any,
+};
+
+export const WithIcon: Story = {
+  render: renderStory,
+  args: {
+    type: 'metric-card',
+    title: 'Total Revenue',
+    value: '$45,231.89',
+    icon: 'DollarSign',
+  } as any,
+};
+
+export const WithTrendUp: Story = {
+  render: renderStory,
+  args: {
+    type: 'metric-card',
+    title: 'Total Revenue',
+    value: '$45,231.89',
+    icon: 'DollarSign',
+    trend: 'up',
+    trendValue: '+20.1%',
+    description: 'from last month'
+  } as any,
+};
+
+export const WithTrendDown: Story = {
+  render: renderStory,
+  args: {
+    type: 'metric-card',
+    title: 'Bounce Rate',
+    value: '2.4%',
+    icon: 'TrendingDown',
+    trend: 'down',
+    trendValue: '-5.2%',
+    description: 'from last month'
+  } as any,
+};
+
+export const WithTrendNeutral: Story = {
+  render: renderStory,
+  args: {
+    type: 'metric-card',
+    title: 'Active Users',
+    value: '1,234',
+    icon: 'Users',
+    trend: 'neutral',
+    trendValue: '0%',
+    description: 'no change'
+  } as any,
+};
+
+export const MultipleMetrics: Story = {
+  render: renderStory,
+  args: {
+    type: 'flex',
+    direction: 'row',
+    gap: 4,
+    children: [
+      {
+        type: 'metric-card',
+        title: 'Total Revenue',
+        value: '$45,231.89',
+        icon: 'DollarSign',
+        trend: 'up',
+        trendValue: '+20.1%',
+        description: 'from last month',
+        className: 'flex-1'
+      },
+      {
+        type: 'metric-card',
+        title: 'New Customers',
+        value: '+2,350',
+        icon: 'Users',
+        trend: 'up',
+        trendValue: '+180.1%',
+        description: 'from last month',
+        className: 'flex-1'
+      },
+      {
+        type: 'metric-card',
+        title: 'Active Sessions',
+        value: '+573',
+        icon: 'Activity',
+        trend: 'up',
+        trendValue: '+201',
+        description: 'since last hour',
+        className: 'flex-1'
+      }
+    ]
+  } as any,
+};
+
+export const LargeNumbers: Story = {
+  render: renderStory,
+  args: {
+    type: 'metric-card',
+    title: 'Total Views',
+    value: '1,234,567',
+    icon: 'Eye',
+    trend: 'up',
+    trendValue: '+45.2%',
+    description: 'from last quarter'
+  } as any,
+};
+
+export const WithDescription: Story = {
+  render: renderStory,
+  args: {
+    type: 'metric-card',
+    title: 'Conversion Rate',
+    value: '12.5%',
+    icon: 'Target',
+    description: 'above industry average'
+  } as any,
+};

package/src/stories-json/navigation-menu.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Components/Navigation Menu',
+  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 Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'navigation-menu',
+    items: [
+        { label: 'Home', href: '#' },
+        { 
+            label: 'Products', 
+            children: [
+                { label: 'Analytics', description: 'Get insights into who is clicking your links', href: '#' },
+                { label: 'Engagement', description: 'Measure active engagement with your brand', href: '#' },
+                { label: 'Security', description: 'Advanced security features', href: '#' }
+            ]
+        },
+        { label: 'Pricing', href: '#' }
+    ]
+  } as any,
+};

package/src/stories-json/object-aggrid.stories.tsx

@@ -0,0 +1,252 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+
+const meta = {
+  title: 'Views/Object Data Grid (ObjectAgGrid)',
+  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} />;
+
+// Mock data source for demonstration
+const createMockDataSource = (objectName: string, data: any[]) => {
+  const mockSchema = {
+    name: objectName,
+    label: objectName.charAt(0).toUpperCase() + objectName.slice(1),
+    fields: {} as any
+  };
+
+  // Infer fields from data
+  if (data.length > 0) {
+    const firstRow = data[0];
+    Object.keys(firstRow).forEach(key => {
+      let type = 'text';
+      const value = firstRow[key];
+      
+      if (typeof value === 'number') type = 'number';
+      else if (typeof value === 'boolean') type = 'boolean';
+      else if (key.includes('email')) type = 'email';
+      else if (key.includes('phone')) type = 'phone';
+      else if (key.includes('url') || key.includes('website')) type = 'url';
+      else if (key.includes('date')) type = 'date';
+      else if (key.includes('price') || key.includes('cost') || key.includes('amount')) type = 'currency';
+      else if (key.includes('percent') || key.includes('rate')) type = 'percent';
+      
+      mockSchema.fields[key] = {
+        name: key,
+        label: key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' '),
+        type,
+        sortable: true,
+        filterable: true
+      };
+    });
+  }
+
+  return {
+    find: async () => ({
+      data,
+      total: data.length,
+      page: 1,
+      pageSize: data.length,
+      hasMore: false
+    }),
+    getObjectSchema: async () => mockSchema
+  };
+};
+
+const contactsData = [
+  { 
+    id: '1', 
+    name: 'John Doe', 
+    email: 'john.doe@example.com', 
+    phone: '+1-555-0101',
+    company: 'Acme Corp',
+    status: 'Active',
+    created_date: '2024-01-15'
+  },
+  { 
+    id: '2', 
+    name: 'Jane Smith', 
+    email: 'jane.smith@example.com', 
+    phone: '+1-555-0102',
+    company: 'Tech Solutions',
+    status: 'Active',
+    created_date: '2024-01-20'
+  },
+  { 
+    id: '3', 
+    name: 'Bob Johnson', 
+    email: 'bob.johnson@example.com', 
+    phone: '+1-555-0103',
+    company: 'Innovate Inc',
+    status: 'Inactive',
+    created_date: '2024-02-01'
+  },
+  { 
+    id: '4', 
+    name: 'Alice Williams', 
+    email: 'alice.w@example.com', 
+    phone: '+1-555-0104',
+    company: 'Creative Studio',
+    status: 'Active',
+    created_date: '2024-02-10'
+  },
+  { 
+    id: '5', 
+    name: 'Charlie Brown', 
+    email: 'charlie.b@example.com', 
+    phone: '+1-555-0105',
+    company: 'Digital Agency',
+    status: 'Active',
+    created_date: '2024-02-15'
+  },
+];
+
+const productsData = [
+  { 
+    id: '1', 
+    name: 'Laptop Pro', 
+    category: 'Electronics',
+    price: 1299.99,
+    stock: 45,
+    rating: 4.5,
+    available: true
+  },
+  { 
+    id: '2', 
+    name: 'Wireless Mouse', 
+    category: 'Electronics',
+    price: 29.99,
+    stock: 150,
+    rating: 4.2,
+    available: true
+  },
+  { 
+    id: '3', 
+    name: 'Desk Chair', 
+    category: 'Furniture',
+    price: 299.99,
+    stock: 20,
+    rating: 4.8,
+    available: true
+  },
+  { 
+    id: '4', 
+    name: 'Monitor 27"', 
+    category: 'Electronics',
+    price: 399.99,
+    stock: 35,
+    rating: 4.6,
+    available: true
+  },
+  { 
+    id: '5', 
+    name: 'Keyboard Mechanical', 
+    category: 'Electronics',
+    price: 149.99,
+    stock: 60,
+    rating: 4.7,
+    available: false
+  },
+];
+
+export const ContactsGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-aggrid',
+    objectName: 'contacts',
+    dataSource: createMockDataSource('contacts', contactsData),
+    pagination: true,
+    pageSize: 10,
+    theme: 'quartz',
+    height: 500,
+    animateRows: true,
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const ProductsGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-aggrid',
+    objectName: 'products',
+    dataSource: createMockDataSource('products', productsData),
+    pagination: true,
+    pageSize: 10,
+    theme: 'quartz',
+    height: 500,
+    animateRows: true,
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const WithFieldSelection: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-aggrid',
+    objectName: 'contacts',
+    dataSource: createMockDataSource('contacts', contactsData),
+    fieldNames: ['name', 'email', 'company', 'status'],
+    pagination: true,
+    pageSize: 10,
+    theme: 'alpine',
+    height: 400
+  } as any,
+};
+
+export const EditableGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-aggrid',
+    objectName: 'products',
+    dataSource: createMockDataSource('products', productsData),
+    editable: true,
+    singleClickEdit: true,
+    pagination: true,
+    pageSize: 10,
+    theme: 'quartz',
+    height: 500,
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const WithExport: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-aggrid',
+    objectName: 'contacts',
+    dataSource: createMockDataSource('contacts', contactsData),
+    pagination: true,
+    pageSize: 10,
+    theme: 'quartz',
+    height: 500,
+    exportConfig: {
+      enabled: true,
+      fileName: 'contacts-export.csv'
+    }
+  } as any,
+};