@object-ui/components 0.3.0

package/src/renderers/complex/timeline.tsx

@@ -0,0 +1,466 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { TimelineSchema } from '@object-ui/types';
+import {
+  Timeline,
+  TimelineItem,
+  TimelineMarker,
+  TimelineContent,
+  TimelineTitle,
+  TimelineTime,
+  TimelineDescription,
+  TimelineHorizontal,
+  TimelineHorizontalItem,
+  TimelineGantt,
+  TimelineGanttHeader,
+  TimelineGanttRowLabels,
+  TimelineGanttGrid,
+  TimelineGanttRow,
+  TimelineGanttLabel,
+  TimelineGanttBar,
+  TimelineGanttBarContent,
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+// Constants
+const MILLISECONDS_PER_WEEK = 7 * 24 * 60 * 60 * 1000;
+
+// Helper function to calculate date range from items
+function calculateDateRange(items: any[]): { minDate: string; maxDate: string } {
+  const allDates = items.flatMap((row: any) =>
+    (row.items || []).flatMap((item: any) => [item.startDate, item.endDate])
+  );
+  
+  const minTimestamp = Math.min(...allDates.map((d: string) => new Date(d).getTime()));
+  const maxTimestamp = Math.max(...allDates.map((d: string) => new Date(d).getTime()));
+  
+  return {
+    minDate: new Date(minTimestamp).toISOString().split('T')[0],
+    maxDate: new Date(maxTimestamp).toISOString().split('T')[0],
+  };
+}
+
+// Helper function to calculate bar position and width based on dates
+function calculateBarDimensions(
+  startDate: string,
+  endDate: string,
+  minDate: string,
+  maxDate: string
+): { start: number; width: number } {
+  const start = new Date(startDate).getTime();
+  const end = new Date(endDate).getTime();
+  const min = new Date(minDate).getTime();
+  const max = new Date(maxDate).getTime();
+
+  const totalDuration = max - min;
+  const startOffset = start - min;
+  const duration = end - start;
+
+  return {
+    start: (startOffset / totalDuration) * 100,
+    width: (duration / totalDuration) * 100,
+  };
+}
+
+// Helper function to format date
+function formatDate(dateString: string, format?: string): string {
+  const date = new Date(dateString);
+  if (format === 'short') {
+    return date.toLocaleDateString();
+  }
+  if (format === 'long') {
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  }
+  return date.toISOString().split('T')[0];
+}
+
+ComponentRegistry.register(
+  'timeline',
+  ({ schema, className, ...props }: { schema: TimelineSchema; className?: string; [key: string]: any }) => {
+    const {
+      variant = 'vertical',
+      items = [],
+      dateFormat = 'short',
+      onItemClick,
+    } = schema;
+
+    // Vertical Timeline
+    if (variant === 'vertical') {
+      return (
+        <Timeline className={className} {...props}>
+          {items.map((item: any, index: number) => (
+            <TimelineItem key={index} className={item.className}>
+              <TimelineMarker variant={item.variant || 'default'}>
+                {item.icon && <span className="text-xs">{item.icon}</span>}
+              </TimelineMarker>
+              <TimelineContent>
+                {item.time && (
+                  <TimelineTime dateTime={item.time}>
+                    {formatDate(item.time, dateFormat)}
+                  </TimelineTime>
+                )}
+                {item.title && <TimelineTitle>{item.title}</TimelineTitle>}
+                {item.description && (
+                  <TimelineDescription>{item.description}</TimelineDescription>
+                )}
+                {item.content && renderChildren(item.content)}
+              </TimelineContent>
+            </TimelineItem>
+          ))}
+        </Timeline>
+      );
+    }
+
+    // Horizontal Timeline
+    if (variant === 'horizontal') {
+      return (
+        <TimelineHorizontal className={className} {...props}>
+          {items.map((item: any, index: number) => (
+            <TimelineHorizontalItem key={index} className={item.className}>
+              <div className="flex flex-col items-center">
+                <TimelineMarker variant={item.variant || 'default'}>
+                  {item.icon && <span className="text-xs">{item.icon}</span>}
+                </TimelineMarker>
+                <div className="mt-4 text-center">
+                  {item.time && (
+                    <TimelineTime dateTime={item.time}>
+                      {formatDate(item.time, dateFormat)}
+                    </TimelineTime>
+                  )}
+                  {item.title && <TimelineTitle>{item.title}</TimelineTitle>}
+                  {item.description && (
+                    <TimelineDescription className="text-center">
+                      {item.description}
+                    </TimelineDescription>
+                  )}
+                  {item.content && renderChildren(item.content)}
+                </div>
+              </div>
+              {index < items.length - 1 && (
+                <div className="absolute left-full w-16 border-t-2 border-gray-200 top-3" />
+              )}
+            </TimelineHorizontalItem>
+          ))}
+        </TimelineHorizontal>
+      );
+    }
+
+    // Gantt/Airtable-style Timeline
+    if (variant === 'gantt') {
+      // Calculate date range from all items
+      const dateRange = calculateDateRange(items);
+      const minDate = schema.minDate || dateRange.minDate;
+      const maxDate = schema.maxDate || dateRange.maxDate;
+
+      // Generate time scale headers (months, weeks, etc.)
+      const timeScale = schema.timeScale || 'month';
+      const generateTimeHeaders = () => {
+        const headers: string[] = [];
+        const start = new Date(minDate);
+        const end = new Date(maxDate);
+
+        if (timeScale === 'month') {
+          const current = new Date(start);
+          while (current <= end) {
+            headers.push(
+              current.toLocaleDateString('en-US', {
+                month: 'short',
+                year: 'numeric',
+              })
+            );
+            current.setMonth(current.getMonth() + 1);
+          }
+        } else if (timeScale === 'week') {
+          const current = new Date(start);
+          while (current <= end) {
+            headers.push(
+              `Week ${Math.ceil(
+                (current.getTime() - start.getTime()) / MILLISECONDS_PER_WEEK
+              ) + 1}`
+            );
+            current.setDate(current.getDate() + 7);
+          }
+        } else if (timeScale === 'day') {
+          const current = new Date(start);
+          while (current <= end) {
+            headers.push(
+              current.toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+              })
+            );
+            current.setDate(current.getDate() + 1);
+          }
+        }
+
+        return headers;
+      };
+
+      const timeHeaders = generateTimeHeaders();
+
+      return (
+        <TimelineGantt className={className} {...props}>
+          {/* Header */}
+          <TimelineGanttHeader>
+            <TimelineGanttRowLabels className="flex items-center px-4 py-3">
+              <span className="font-semibold text-sm">
+                {schema.rowLabel || 'Items'}
+              </span>
+            </TimelineGanttRowLabels>
+            <TimelineGanttGrid>
+              <div className="flex h-full">
+                {timeHeaders.map((header, index) => (
+                  <div
+                    key={index}
+                    className="flex-1 px-2 py-3 border-r text-xs font-medium text-center"
+                  >
+                    {header}
+                  </div>
+                ))}
+              </div>
+            </TimelineGanttGrid>
+          </TimelineGanttHeader>
+
+          {/* Rows */}
+          <div>
+            <div className="flex">
+              <TimelineGanttRowLabels>
+                {items.map((row: any, rowIndex: number) => (
+                  <TimelineGanttRow key={rowIndex}>
+                    <TimelineGanttLabel title={row.label}>
+                      {row.label}
+                    </TimelineGanttLabel>
+                  </TimelineGanttRow>
+                ))}
+              </TimelineGanttRowLabels>
+              <TimelineGanttGrid className="relative">
+                {items.map((row: any, rowIndex: number) => (
+                  <TimelineGanttRow key={rowIndex} className="relative">
+                    {(row.items || []).map((item: any, itemIndex: number) => {
+                      const dimensions = calculateBarDimensions(
+                        item.startDate,
+                        item.endDate,
+                        minDate,
+                        maxDate
+                      );
+
+                      return (
+                        <TimelineGanttBar
+                          key={itemIndex}
+                          start={dimensions.start}
+                          width={dimensions.width}
+                          variant={item.variant || 'default'}
+                          onClick={() => onItemClick?.(item, row, rowIndex, itemIndex)}
+                          title={`${item.title || ''}\n${formatDate(item.startDate, dateFormat)} - ${formatDate(item.endDate, dateFormat)}`}
+                        >
+                          <TimelineGanttBarContent>
+                            {item.title}
+                          </TimelineGanttBarContent>
+                        </TimelineGanttBar>
+                      );
+                    })}
+                  </TimelineGanttRow>
+                ))}
+              </TimelineGanttGrid>
+            </div>
+          </div>
+        </TimelineGantt>
+      );
+    }
+
+    return null;
+  },
+  {
+    label: 'Timeline',
+    category: 'data-display',
+    inputs: [
+      {
+        name: 'variant',
+        type: 'enum',
+        enum: ['vertical', 'horizontal', 'gantt'],
+        label: 'Timeline Variant',
+        defaultValue: 'vertical',
+      },
+      {
+        name: 'items',
+        type: 'array',
+        label: 'Timeline Items',
+        description:
+          'For vertical/horizontal: Array of { time, title, description, variant, icon, content }. For gantt: Array of { label, items: [{ title, startDate, endDate, variant }] }',
+      },
+      {
+        name: 'dateFormat',
+        type: 'enum',
+        enum: ['short', 'long', 'iso'],
+        label: 'Date Format',
+        defaultValue: 'short',
+      },
+      {
+        name: 'timeScale',
+        type: 'enum',
+        enum: ['day', 'week', 'month'],
+        label: 'Time Scale (Gantt only)',
+        defaultValue: 'month',
+      },
+      {
+        name: 'rowLabel',
+        type: 'string',
+        label: 'Row Label (Gantt only)',
+        defaultValue: 'Items',
+      },
+      {
+        name: 'minDate',
+        type: 'string',
+        label: 'Min Date (Gantt only)',
+        description: 'Override auto-calculated min date (YYYY-MM-DD)',
+      },
+      {
+        name: 'maxDate',
+        type: 'string',
+        label: 'Max Date (Gantt only)',
+        description: 'Override auto-calculated max date (YYYY-MM-DD)',
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' },
+    ],
+    defaultProps: {
+      variant: 'vertical',
+      dateFormat: 'short',
+      items: [
+        {
+          time: '2024-01-15',
+          title: 'Project Started',
+          description: 'Kickoff meeting and initial planning',
+          variant: 'success',
+          icon: '🚀',
+        },
+        {
+          time: '2024-02-01',
+          title: 'First Milestone',
+          description: 'Completed initial design phase',
+          variant: 'info',
+          icon: '🎨',
+        },
+        {
+          time: '2024-03-15',
+          title: 'Beta Release',
+          description: 'Released beta version to testers',
+          variant: 'warning',
+          icon: '⚡',
+        },
+        {
+          time: '2024-04-01',
+          title: 'Launch',
+          description: 'Official product launch',
+          variant: 'success',
+          icon: '🎉',
+        },
+      ],
+    },
+    examples: {
+      vertical: {
+        variant: 'vertical',
+        dateFormat: 'long',
+        items: [
+          {
+            time: '2024-01-15',
+            title: 'Project Started',
+            description: 'Kickoff meeting and initial planning',
+            variant: 'success',
+          },
+          {
+            time: '2024-02-01',
+            title: 'First Milestone',
+            description: 'Completed initial design phase',
+            variant: 'info',
+          },
+        ],
+      },
+      horizontal: {
+        variant: 'horizontal',
+        dateFormat: 'short',
+        items: [
+          {
+            time: '2024-01-01',
+            title: 'Q1',
+            description: 'First quarter',
+            variant: 'default',
+          },
+          {
+            time: '2024-04-01',
+            title: 'Q2',
+            description: 'Second quarter',
+            variant: 'info',
+          },
+          {
+            time: '2024-07-01',
+            title: 'Q3',
+            description: 'Third quarter',
+            variant: 'warning',
+          },
+          {
+            time: '2024-10-01',
+            title: 'Q4',
+            description: 'Fourth quarter',
+            variant: 'success',
+          },
+        ],
+      },
+      gantt: {
+        variant: 'gantt',
+        dateFormat: 'short',
+        timeScale: 'month',
+        rowLabel: 'Projects',
+        items: [
+          {
+            label: 'Backend Development',
+            items: [
+              {
+                title: 'API Design',
+                startDate: '2024-01-01',
+                endDate: '2024-01-31',
+                variant: 'success',
+              },
+              {
+                title: 'Implementation',
+                startDate: '2024-02-01',
+                endDate: '2024-03-31',
+                variant: 'info',
+              },
+            ],
+          },
+          {
+            label: 'Frontend Development',
+            items: [
+              {
+                title: 'UI Design',
+                startDate: '2024-01-15',
+                endDate: '2024-02-15',
+                variant: 'warning',
+              },
+              {
+                title: 'Component Dev',
+                startDate: '2024-02-15',
+                endDate: '2024-04-15',
+                variant: 'default',
+              },
+            ],
+          },
+          {
+            label: 'Testing',
+            items: [
+              {
+                title: 'QA Phase',
+                startDate: '2024-03-01',
+                endDate: '2024-04-30',
+                variant: 'danger',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  }
+);

package/src/renderers/data-display/alert.tsx

@@ -0,0 +1,37 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { AlertSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import {
+  Alert,
+  AlertTitle,
+  AlertDescription
+} from '../../ui';
+
+ComponentRegistry.register('alert', 
+  ({ schema, className, ...props }: { schema: AlertSchema; className?: string; [key: string]: any }) => (
+    <Alert variant={schema.variant} className={className} {...props}>
+      <AlertTitle>{schema.title}</AlertTitle>
+      <AlertDescription>{schema.description || renderChildren(schema.body)}</AlertDescription>
+    </Alert>
+  ),
+  {
+    label: 'Alert',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title', required: true },
+      { name: 'description', type: 'string', label: 'Description' },
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        enum: ['default', 'destructive'], 
+        defaultValue: 'default',
+        label: 'Variant'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      title: 'Alert Title',
+      description: 'This is an alert message.',
+      variant: 'default'
+    }
+  }
+);

package/src/renderers/data-display/avatar.tsx

@@ -0,0 +1,29 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { AvatarSchema } from '@object-ui/types';
+import {
+  Avatar,
+  AvatarImage,
+  AvatarFallback
+} from '../../ui';
+
+ComponentRegistry.register('avatar', 
+  ({ schema, className, ...props }: { schema: AvatarSchema; className?: string; [key: string]: any }) => (
+    <Avatar className={className} {...props}>
+      <AvatarImage src={schema.src} alt={schema.alt} />
+      <AvatarFallback>{schema.fallback}</AvatarFallback>
+    </Avatar>
+  ),
+  {
+    label: 'Avatar',
+    inputs: [
+      { name: 'src', type: 'string', label: 'Image URL' },
+      { name: 'alt', type: 'string', label: 'Alt Text' },
+      { name: 'fallback', type: 'string', label: 'Fallback Initials', defaultValue: 'CN' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      fallback: 'CN',
+      alt: 'Avatar'
+    }
+  }
+);

package/src/renderers/data-display/badge.tsx

@@ -0,0 +1,46 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { BadgeSchema } from '@object-ui/types';
+import { Badge } from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('badge', 
+  ({ schema, ...props }: { schema: BadgeSchema; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...badgeProps
+    } = props;
+    
+    return (
+    <Badge 
+        variant={schema.variant} 
+        className={schema.className} 
+        {...badgeProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    >
+      {schema.label || renderChildren(schema.body)}
+    </Badge>
+  );
+  },
+  {
+    label: 'Badge',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        enum: ['default', 'secondary', 'destructive', 'outline'], 
+        defaultValue: 'default',
+        label: 'Variant'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      label: 'Badge',
+      variant: 'default'
+    }
+  }
+);

package/src/renderers/data-display/index.ts

@@ -0,0 +1,6 @@
+import './badge';
+import './avatar';
+import './alert';
+import './list';
+import './tree-view';
+import './statistic';

package/src/renderers/data-display/list.tsx

@@ -0,0 +1,95 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { ListSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import { cn } from '../../lib/utils';
+import { ChevronRight, Hexagon, Terminal } from 'lucide-react';
+
+ComponentRegistry.register('list', 
+  ({ schema, className, ...props }: { schema: ListSchema; className?: string; [key: string]: any }) => {
+    // We use 'ul' for both to control semantics manually with visuals
+    const ListTag = 'ul';
+    
+    return (
+      <div className={cn("relative p-4 rounded-lg bg-slate-950/30 border border-slate-800/50 backdrop-blur-sm", schema.wrapperClass)}>
+        {/* Decorative corner accents for container */}
+        <div className="absolute top-0 left-0 w-2 h-2 border-l-2 border-t-2 border-cyan-500/50 rounded-tl-sm" />
+        <div className="absolute top-0 right-0 w-2 h-2 border-r-2 border-t-2 border-cyan-500/50 rounded-tr-sm" />
+        <div className="absolute bottom-0 left-0 w-2 h-2 border-l-2 border-b-2 border-cyan-500/50 rounded-bl-sm" />
+        <div className="absolute bottom-0 right-0 w-2 h-2 border-r-2 border-b-2 border-cyan-500/50 rounded-br-sm" />
+
+        {schema.title && (
+          <div className="flex items-center gap-2 mb-4 pb-2 border-b border-cyan-900/30">
+             <Terminal className="w-4 h-4 text-cyan-500" />
+             <h3 className="text-sm font-bold uppercase tracking-widest text-cyan-400 drop-shadow-[0_0_5px_rgba(6,182,212,0.5)]">
+                {schema.title}
+             </h3>
+          </div>
+        )}
+        
+        <ListTag 
+          className={cn(
+            "space-y-1",
+            className
+          )}
+          {...props}
+        >
+          {schema.items?.map((item: any, index: number) => (
+            <li 
+                key={index} 
+                className={cn(
+                    "group flex items-start gap-3 p-2 rounded-sm transition-all duration-300",
+                    "hover:bg-cyan-950/20 hover:pl-3",
+                    typeof item === 'object' && item.className
+                )}
+            >
+              {/* Marker Area */}
+              <div className="flex-shrink-0 mt-0.5">
+                {schema.ordered ? (
+                    <span className="flex items-center justify-center w-5 h-5 text-[10px] font-mono font-bold text-slate-950 bg-cyan-600 rounded-sm shadow-[0_0_8px_cyan] group-hover:bg-cyan-400 group-hover:scale-110 transition-all">
+                        {String(index + 1).padStart(2, '0')}
+                    </span>
+                ) : (
+                    <div className="relative flex items-center justify-center w-5 h-5">
+                        <Hexagon className="w-3 h-3 text-cyan-600 group-hover:text-cyan-400 group-hover:rotate-90 transition-transform duration-500" />
+                        <div className="absolute inset-0 bg-cyan-500/20 blur-[2px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
+                    </div>
+                )}
+              </div>
+
+              {/* Content Area */}
+              <div className="flex-1 text-sm text-slate-400 group-hover:text-cyan-100 font-medium font-sans leading-tight transition-colors">
+                {typeof item === 'string' ? item : item.content || renderChildren(item.body)}
+              </div>
+
+              {/* Hover Indicator */}
+              <ChevronRight className="w-4 h-4 text-cyan-500/0 -translate-x-2 group-hover:text-cyan-500 group-hover:translate-x-0 transition-all duration-300 opacity-0 group-hover:opacity-100" />
+            </li>
+          ))}
+        </ListTag>
+      </div>
+    );
+  },
+  {
+    label: 'List',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'ordered', type: 'boolean', label: 'Ordered List (numbered)', defaultValue: false },
+      { 
+        name: 'items', 
+        type: 'array', 
+        label: 'List Items',
+        description: 'Array of strings or objects with content/body'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      ordered: false,
+      items: [
+        'First item',
+        'Second item',
+        'Third item'
+      ],
+      className: 'text-sm'
+    }
+  }
+);