@object-ui/components 0.3.0

package/src/renderers/complex/TIMELINE.md

@@ -0,0 +1,353 @@
+# Timeline Component
+
+A comprehensive, feature-rich timeline component for Object UI that supports three distinct variants: vertical, horizontal, and Gantt-style (Airtable-like) timelines.
+
+## Features
+
+- 🎯 **Three Variants**: Vertical, Horizontal, and Gantt/Airtable-style timelines
+- 🎨 **Color Variants**: Support for default, success, warning, danger, and info colors
+- 📅 **Date Formatting**: Configurable date formats (short, long, ISO)
+- ⏱️ **Time Scales**: Gantt view supports day, week, and month scales
+- 🔄 **Interactive**: Click handlers for timeline items
+- 🎭 **Icon Support**: Add custom icons or emojis to timeline markers
+- 📊 **Multi-track**: Gantt view supports multiple rows/tracks
+- 🔢 **Auto-calculated**: Automatic date range calculation for Gantt view
+- 💅 **Tailwind CSS**: Fully styled with Tailwind, customizable with className
+
+## Installation
+
+The timeline component is included in `@object-ui/components`.
+
+```bash
+npm install @object-ui/components @object-ui/react @object-ui/core
+```
+
+## Usage
+
+### Vertical Timeline
+
+Perfect for showing project milestones, history, or chronological events.
+
+```json
+{
+  "type": "timeline",
+  "variant": "vertical",
+  "dateFormat": "long",
+  "items": [
+    {
+      "time": "2024-01-15",
+      "title": "Project Kickoff",
+      "description": "Initial meeting with stakeholders and project planning",
+      "variant": "success",
+      "icon": "🚀"
+    },
+    {
+      "time": "2024-02-01",
+      "title": "Design Phase Complete",
+      "description": "UI/UX designs approved and ready for development",
+      "variant": "info",
+      "icon": "🎨"
+    },
+    {
+      "time": "2024-03-15",
+      "title": "Beta Release",
+      "description": "Internal testing phase begins",
+      "variant": "warning",
+      "icon": "⚡"
+    },
+    {
+      "time": "2024-04-01",
+      "title": "Official Launch",
+      "description": "Product goes live to all users",
+      "variant": "success",
+      "icon": "🎉"
+    }
+  ]
+}
+```
+
+### Horizontal Timeline
+
+Ideal for roadmaps, quarterly plans, or linear progressions.
+
+```json
+{
+  "type": "timeline",
+  "variant": "horizontal",
+  "dateFormat": "short",
+  "items": [
+    {
+      "time": "2024-01-01",
+      "title": "Q1 2024",
+      "description": "Planning & Design",
+      "variant": "success"
+    },
+    {
+      "time": "2024-04-01",
+      "title": "Q2 2024",
+      "description": "Development",
+      "variant": "info"
+    },
+    {
+      "time": "2024-07-01",
+      "title": "Q3 2024",
+      "description": "Testing & QA",
+      "variant": "warning"
+    },
+    {
+      "time": "2024-10-01",
+      "title": "Q4 2024",
+      "description": "Launch & Scale",
+      "variant": "success"
+    }
+  ]
+}
+```
+
+### Gantt Timeline (Airtable Style)
+
+Perfect for project management, resource planning, and multi-track timelines.
+
+```json
+{
+  "type": "timeline",
+  "variant": "gantt",
+  "dateFormat": "short",
+  "timeScale": "month",
+  "rowLabel": "Project Tasks",
+  "items": [
+    {
+      "label": "Backend Development",
+      "items": [
+        {
+          "title": "API Design",
+          "startDate": "2024-01-01",
+          "endDate": "2024-01-31",
+          "variant": "success"
+        },
+        {
+          "title": "Database Schema",
+          "startDate": "2024-01-15",
+          "endDate": "2024-02-15",
+          "variant": "info"
+        },
+        {
+          "title": "API Implementation",
+          "startDate": "2024-02-01",
+          "endDate": "2024-03-31",
+          "variant": "default"
+        }
+      ]
+    },
+    {
+      "label": "Frontend Development",
+      "items": [
+        {
+          "title": "UI Design",
+          "startDate": "2024-01-15",
+          "endDate": "2024-02-15",
+          "variant": "warning"
+        },
+        {
+          "title": "Component Library",
+          "startDate": "2024-02-01",
+          "endDate": "2024-03-15",
+          "variant": "info"
+        },
+        {
+          "title": "Integration",
+          "startDate": "2024-03-01",
+          "endDate": "2024-04-15",
+          "variant": "default"
+        }
+      ]
+    },
+    {
+      "label": "Testing & QA",
+      "items": [
+        {
+          "title": "Unit Tests",
+          "startDate": "2024-02-15",
+          "endDate": "2024-03-15",
+          "variant": "success"
+        },
+        {
+          "title": "Integration Tests",
+          "startDate": "2024-03-01",
+          "endDate": "2024-04-01",
+          "variant": "info"
+        },
+        {
+          "title": "User Acceptance Testing",
+          "startDate": "2024-04-01",
+          "endDate": "2024-04-30",
+          "variant": "danger"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Props
+
+### Common Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'vertical' \| 'horizontal' \| 'gantt'` | `'vertical'` | Timeline variant to render |
+| `dateFormat` | `'short' \| 'long' \| 'iso'` | `'short'` | Date formatting style |
+| `items` | `TimelineItem[]` | `[]` | Array of timeline items (structure varies by variant) |
+| `className` | `string` | - | Additional CSS classes |
+
+### Vertical/Horizontal Item Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `time` | `string` | ISO date string (e.g., "2024-01-15") |
+| `title` | `string` | Item title |
+| `description` | `string` | Item description |
+| `variant` | `'default' \| 'success' \| 'warning' \| 'danger' \| 'info'` | Color variant |
+| `icon` | `string` | Icon or emoji to display in marker |
+| `content` | `SchemaNode` | Custom content schema |
+| `className` | `string` | Additional CSS classes |
+
+### Gantt-Specific Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `timeScale` | `'day' \| 'week' \| 'month'` | `'month'` | Time scale for the timeline header |
+| `rowLabel` | `string` | `'Items'` | Label for the row header column |
+| `minDate` | `string` | Auto-calculated | Override minimum date (YYYY-MM-DD) |
+| `maxDate` | `string` | Auto-calculated | Override maximum date (YYYY-MM-DD) |
+
+### Gantt Item Structure
+
+```typescript
+{
+  label: string;          // Row label
+  items: Array<{
+    title: string;        // Bar label
+    startDate: string;    // ISO date string
+    endDate: string;      // ISO date string
+    variant?: string;     // Color variant
+  }>;
+}
+```
+
+## Color Variants
+
+The timeline component supports 5 color variants:
+
+- `default` - Blue (default color)
+- `success` - Green
+- `warning` - Yellow/Orange
+- `danger` - Red
+- `info` - Purple
+
+Each variant applies to markers (vertical/horizontal) or bars (Gantt).
+
+## Date Formats
+
+- `short` - MM/DD/YYYY (e.g., "1/15/2024")
+- `long` - Month DD, YYYY (e.g., "January 15, 2024")
+- `iso` - YYYY-MM-DD (e.g., "2024-01-15")
+
+## Time Scales (Gantt Only)
+
+- `day` - Daily granularity
+- `week` - Weekly granularity
+- `month` - Monthly granularity (default)
+
+## Advanced Usage
+
+### Custom Styling
+
+Use Tailwind CSS classes for custom styling:
+
+```json
+{
+  "type": "timeline",
+  "variant": "vertical",
+  "className": "max-w-3xl mx-auto",
+  "items": [
+    {
+      "time": "2024-01-15",
+      "title": "Custom Styled Item",
+      "className": "bg-blue-50 p-4 rounded-lg",
+      "variant": "info"
+    }
+  ]
+}
+```
+
+### With Custom Content
+
+You can add custom content schemas to vertical/horizontal timeline items:
+
+```json
+{
+  "type": "timeline",
+  "variant": "vertical",
+  "items": [
+    {
+      "time": "2024-01-15",
+      "title": "Custom Content",
+      "content": [
+        {
+          "type": "button",
+          "label": "View Details",
+          "className": "mt-2"
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Interactive Items
+
+Handle item clicks in Gantt view:
+
+```typescript
+// In React component
+<SchemaRenderer 
+  schema={{
+    type: 'timeline',
+    variant: 'gantt',
+    onItemClick: (item, row, rowIndex, itemIndex) => {
+      console.log('Clicked:', item.title, 'in row:', row.label);
+    },
+    items: [...]
+  }}
+/>
+```
+
+## UI Components
+
+The timeline component is built using these base UI components:
+
+### Vertical/Horizontal
+- `Timeline` - Container
+- `TimelineItem` - Individual item
+- `TimelineMarker` - Marker/dot
+- `TimelineContent` - Content wrapper
+- `TimelineTitle` - Title heading
+- `TimelineTime` - Time display
+- `TimelineDescription` - Description text
+
+### Gantt
+- `TimelineGantt` - Container
+- `TimelineGanttHeader` - Header with time scale
+- `TimelineGanttRow` - Individual row
+- `TimelineGanttLabel` - Row label
+- `TimelineGanttBar` - Task bar
+- `TimelineGanttBarContent` - Bar content/text
+
+## Examples
+
+See the [prototype app](../../examples/prototype/src/App.tsx) for comprehensive examples of all three timeline variants in action.
+
+## License
+
+MIT

package/src/renderers/complex/__tests__/data-table.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Import the component to ensure it's registered
+import '../data-table';
+
+describe('Data Table Component', () => {
+  it('should register data-table component', () => {
+    expect(ComponentRegistry.has('data-table')).toBe(true);
+  });
+
+  it('should have correct component metadata', () => {
+    const config = ComponentRegistry.getConfig('data-table');
+    expect(config).toBeDefined();
+    expect(config?.label).toBe('Data Table');
+    expect(config?.inputs).toBeDefined();
+    expect(config?.defaultProps).toBeDefined();
+  });
+
+  it('should have required inputs defined', () => {
+    const config = ComponentRegistry.getConfig('data-table');
+    const inputNames = config?.inputs?.map(input => input.name) || [];
+    
+    expect(inputNames).toContain('columns');
+    expect(inputNames).toContain('data');
+    expect(inputNames).toContain('pagination');
+    expect(inputNames).toContain('searchable');
+    expect(inputNames).toContain('selectable');
+    expect(inputNames).toContain('sortable');
+    expect(inputNames).toContain('exportable');
+    expect(inputNames).toContain('rowActions');
+  });
+
+  it('should have default props with sample data', () => {
+    const config = ComponentRegistry.getConfig('data-table');
+    expect(config?.defaultProps).toBeDefined();
+    expect(config?.defaultProps?.columns).toBeDefined();
+    expect(Array.isArray(config?.defaultProps?.columns)).toBe(true);
+    expect(config?.defaultProps?.data).toBeDefined();
+    expect(Array.isArray(config?.defaultProps?.data)).toBe(true);
+  });
+
+  it('should have correct default feature flags', () => {
+    const config = ComponentRegistry.getConfig('data-table');
+    expect(config?.defaultProps?.pagination).toBe(true);
+    expect(config?.defaultProps?.searchable).toBe(true);
+    expect(config?.defaultProps?.selectable).toBe(true);
+    expect(config?.defaultProps?.sortable).toBe(true);
+    expect(config?.defaultProps?.exportable).toBe(true);
+    expect(config?.defaultProps?.rowActions).toBe(true);
+  });
+});

package/src/renderers/complex/calendar-view.tsx

@@ -0,0 +1,219 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
+import { CalendarView } from '../../ui';
+import React from 'react';
+
+// Calendar View Renderer - Airtable-style calendar for displaying records as events
+ComponentRegistry.register('calendar-view', 
+  ({ schema, className, onAction, ...props }: { schema: CalendarViewSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
+    // Transform schema data to CalendarEvent format
+    const events = React.useMemo(() => {
+      if (!schema.data || !Array.isArray(schema.data)) return [];
+      
+      return schema.data.map((record: any, index: number) => {
+        /** Field name to use for event title display */
+        const titleField = schema.titleField || 'title';
+        /** Field name containing the event start date/time */
+        const startField = schema.startDateField || 'start';
+        /** Field name containing the event end date/time (optional) */
+        const endField = schema.endDateField || 'end';
+        /** Field name to determine event color or color category */
+        const colorField = schema.colorField || 'color';
+        /** Field name indicating if event is all-day */
+        const allDayField = schema.allDayField || 'allDay';
+        
+        const title = record[titleField] || 'Untitled';
+        const start = record[startField] ? new Date(record[startField]) : new Date();
+        const end = record[endField] ? new Date(record[endField]) : undefined;
+        const allDay = record[allDayField] !== undefined ? record[allDayField] : false;
+        
+        // Handle color mapping
+        let color = record[colorField];
+        if (color && schema.colorMapping && schema.colorMapping[color]) {
+          color = schema.colorMapping[color];
+        }
+        
+        return {
+          id: String(record.id || record._id || index),
+          title,
+          start,
+          end,
+          allDay,
+          color,
+          data: record,
+        };
+      });
+    }, [schema.data, schema.titleField, schema.startDateField, schema.endDateField, schema.colorField, schema.allDayField, schema.colorMapping]);
+
+    const handleEventClick = React.useCallback((event: any) => {
+      if (onAction) {
+        onAction({
+          type: 'event_click',
+          payload: { event: event.data, eventId: event.id }
+        });
+      }
+      if (schema.onEventClick) {
+        schema.onEventClick(event.data);
+      }
+    }, [onAction, schema]);
+
+    const handleDateClick = React.useCallback((date: Date) => {
+      if (onAction) {
+        onAction({
+          type: 'date_click',
+          payload: { date }
+        });
+      }
+      if (schema.onDateClick) {
+        schema.onDateClick(date);
+      }
+    }, [onAction, schema]);
+
+    const handleViewChange = React.useCallback((view: "month" | "week" | "day") => {
+      if (onAction) {
+        onAction({
+          type: 'view_change',
+          payload: { view }
+        });
+      }
+      if (schema.onViewChange) {
+        schema.onViewChange(view);
+      }
+    }, [onAction, schema]);
+
+    const handleNavigate = React.useCallback((date: Date) => {
+      if (onAction) {
+        onAction({
+          type: 'navigate',
+          payload: { date }
+        });
+      }
+      if (schema.onNavigate) {
+        schema.onNavigate(date);
+      }
+    }, [onAction, schema]);
+
+    return (
+      <CalendarView
+        events={events as any[]}
+        view={(schema.view as any) || 'month'}
+        currentDate={schema.currentDate ? new Date(schema.currentDate) : undefined}
+        onEventClick={handleEventClick}
+        onDateClick={schema.allowCreate || schema.onDateClick ? handleDateClick : undefined}
+        onViewChange={handleViewChange}
+        onNavigate={handleNavigate}
+        className={className}
+        {...props}
+      />
+    );
+  },
+  {
+    label: 'Calendar View',
+    inputs: [
+      { 
+        name: 'data', 
+        type: 'array', 
+        label: 'Data',
+        description: 'Array of record objects to display as events'
+      },
+      { 
+        name: 'titleField', 
+        type: 'string', 
+        label: 'Title Field',
+        defaultValue: 'title',
+        description: 'Field name to use for event title'
+      },
+      { 
+        name: 'startDateField', 
+        type: 'string', 
+        label: 'Start Date Field',
+        defaultValue: 'start',
+        description: 'Field name for event start date'
+      },
+      { 
+        name: 'endDateField', 
+        type: 'string', 
+        label: 'End Date Field',
+        defaultValue: 'end',
+        description: 'Field name for event end date (optional)'
+      },
+      { 
+        name: 'allDayField', 
+        type: 'string', 
+        label: 'All Day Field',
+        defaultValue: 'allDay',
+        description: 'Field name for all-day flag'
+      },
+      { 
+        name: 'colorField', 
+        type: 'string', 
+        label: 'Color Field',
+        defaultValue: 'color',
+        description: 'Field name for event color'
+      },
+      {
+        name: 'colorMapping',
+        type: 'object',
+        label: 'Color Mapping',
+        description: 'Map field values to colors (e.g., {meeting: "blue", deadline: "red"})'
+      },
+      { 
+        name: 'view', 
+        type: 'enum', 
+        enum: ['month', 'week', 'day'], 
+        defaultValue: 'month', 
+        label: 'View Mode',
+        description: 'Calendar view mode (month, week, or day)'
+      },
+      {
+        name: 'currentDate',
+        type: 'string',
+        label: 'Current Date',
+        description: 'ISO date string for initial calendar date'
+      },
+      { 
+        name: 'allowCreate', 
+        type: 'boolean', 
+        label: 'Allow Create',
+        defaultValue: false,
+        description: 'Allow creating events by clicking on dates'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      view: 'month',
+      titleField: 'title',
+      startDateField: 'start',
+      endDateField: 'end',
+      allDayField: 'allDay',
+      colorField: 'color',
+      allowCreate: false,
+      data: [
+        {
+          id: 1,
+          title: 'Team Meeting',
+          start: new Date(new Date().setHours(10, 0, 0, 0)).toISOString(),
+          end: new Date(new Date().setHours(11, 0, 0, 0)).toISOString(),
+          color: '#3b82f6',
+          allDay: false
+        },
+        {
+          id: 2,
+          title: 'Project Deadline',
+          start: new Date(new Date().setDate(new Date().getDate() + 3)).toISOString(),
+          color: '#ef4444',
+          allDay: true
+        },
+        {
+          id: 3,
+          title: 'Conference',
+          start: new Date(new Date().setDate(new Date().getDate() + 7)).toISOString(),
+          end: new Date(new Date().setDate(new Date().getDate() + 9)).toISOString(),
+          color: '#10b981',
+          allDay: true
+        }
+      ],
+      className: 'h-[600px] border rounded-lg'
+    }
+  }
+);

package/src/renderers/complex/carousel.tsx

@@ -0,0 +1,60 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { CarouselSchema } from '@object-ui/types';
+import { 
+  Carousel, 
+  CarouselContent, 
+  CarouselItem, 
+  CarouselPrevious, 
+  CarouselNext 
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('carousel', 
+  ({ schema, className, ...props }: { schema: CarouselSchema; className?: string; [key: string]: any }) => (
+    <Carousel 
+      opts={schema.opts} 
+      orientation={schema.orientation || 'horizontal'}
+      className={className} 
+      {...props}
+    >
+      <CarouselContent>
+        {schema.items?.map((item: any, index: number) => (
+          <CarouselItem key={index} className={schema.itemClassName}>
+             {renderChildren(item)}
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      {schema.showArrows && (
+        <>
+            <CarouselPrevious />
+            <CarouselNext />
+        </>
+      )}
+    </Carousel>
+  ),
+  {
+    label: 'Carousel',
+    inputs: [
+      { name: 'orientation', type: 'enum', enum: ['horizontal', 'vertical'], defaultValue: 'horizontal', label: 'Orientation' },
+      { name: 'showArrows', type: 'boolean', label: 'Show Arrows', defaultValue: true },
+      { 
+        name: 'items', 
+        type: 'array', 
+        label: 'Items',
+        description: 'Array of content schemas'
+      },
+      { name: 'itemClassName', type: 'string', label: 'Item CSS Class' },
+      { name: 'className', type: 'string', label: 'Container CSS Class' }
+    ],
+    defaultProps: {
+      orientation: 'horizontal',
+      showArrows: true,
+      items: [
+        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 1' }] }],
+        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 2' }] }],
+        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 3' }] }]
+      ],
+      className: 'w-full max-w-xs'
+    }
+  }
+);