@object-ui/components 0.3.0

package/src/index.ts

@@ -0,0 +1,10 @@
+import './index.css';
+
+// Register all ObjectUI renderers (side-effects)
+import './renderers'; 
+
+// Export utils
+export * from './lib/utils';
+
+// Export raw Shadcn UI components
+export * from './ui';

package/src/lib/utils.tsx

@@ -0,0 +1,27 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+import { SchemaRenderer } from "@object-ui/react"
+import React from "react"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function renderChildren(children: any): React.ReactNode {
+  if (!children) return null;
+  if (typeof children === 'string' || typeof children === 'number') {
+    return children;
+  }
+  if (Array.isArray(children)) {
+    if (children.length === 0) return null;
+    // Unwrap single child to support Radix UI 'asChild' pattern which expects a single ReactElement, not an array
+    if (children.length === 1) {
+      return <SchemaRenderer schema={children[0]} />; 
+    }
+    return children.map((child, index) => (
+      <SchemaRenderer key={child.id || index} schema={child} />
+    ));
+  }
+  return <SchemaRenderer schema={children} />;
+}
+

package/src/new-components.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('New Components Registration', () => {
+  // Import all renderers to register them
+  beforeAll(async () => {
+    await import('./renderers');
+  });
+
+  describe('Form Components', () => {
+    it('should register date-picker component', () => {
+      const component = ComponentRegistry.getConfig('date-picker');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('Date Picker');
+    });
+
+    it('should register file-upload component', () => {
+      const component = ComponentRegistry.getConfig('file-upload');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('File Upload');
+    });
+  });
+
+  describe('Data Display Components', () => {
+    it('should register list component', () => {
+      const component = ComponentRegistry.getConfig('list');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('List');
+    });
+
+    it('should register tree-view component', () => {
+      const component = ComponentRegistry.getConfig('tree-view');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('Tree View');
+    });
+  });
+
+  describe('Layout Components', () => {
+    it('should register grid component', () => {
+      const component = ComponentRegistry.getConfig('grid');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('Grid Layout');
+    });
+
+    it('should register flex component', () => {
+      const component = ComponentRegistry.getConfig('flex');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('Flex Layout');
+    });
+
+    it('should register container component', () => {
+      const component = ComponentRegistry.getConfig('container');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('Container');
+    });
+  });
+
+  describe('Feedback Components', () => {
+    it('should register loading component', () => {
+      const component = ComponentRegistry.getConfig('loading');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('Loading');
+    });
+  });
+
+  describe('Complex Components', () => {
+    it('should register timeline component', () => {
+      const component = ComponentRegistry.getConfig('timeline');
+      expect(component).toBeDefined();
+      expect(component?.label).toBe('Timeline');
+      expect(component?.category).toBe('data-display');
+    });
+  });
+});

package/src/renderers/basic/div.tsx

@@ -0,0 +1,41 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { DivSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import { forwardRef } from 'react';
+
+const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...divProps
+    } = props;
+    
+    return (
+    <div 
+        ref={ref}
+        className={className} 
+        {...divProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    >
+      {renderChildren(schema.children || schema.body)}
+    </div>
+  );
+  }
+);
+
+ComponentRegistry.register('div', 
+  DivRenderer,
+  {
+    label: 'Container',
+    inputs: [
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      className: 'p-4 border border-dashed border-gray-300 rounded min-h-[100px]'
+    }
+  }
+);

package/src/renderers/basic/html.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import type { HtmlSchema } from '@object-ui/types';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('html', 
+  ({ schema, className, ...props }: { schema: HtmlSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...htmlProps 
+    } = props;
+
+    return (
+    <div 
+      className={cn("prose prose-sm max-w-none dark:prose-invert", className)} 
+      dangerouslySetInnerHTML={{ __html: schema.html }}
+      {...htmlProps}
+      // Apply designer props
+      data-obj-id={dataObjId}
+      data-obj-type={dataObjType}
+      style={style}
+    />
+    );
+  },
+  {
+    label: 'HTML Content',
+    inputs: [
+      { name: 'html', type: 'string', label: 'HTML', description: 'Raw HTML content' }
+    ]
+  }
+);

package/src/renderers/basic/icon.tsx

@@ -0,0 +1,25 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { IconSchema } from '@object-ui/types';
+import { icons } from 'lucide-react';
+import React, { forwardRef } from 'react';
+
+const IconRenderer = forwardRef<SVGSVGElement, { schema: IconSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    const Icon = (icons as any)[schema.name || schema.icon];
+    if (!Icon) return null;
+    return <Icon ref={ref} className={className} {...props} />;
+  }
+);
+
+ComponentRegistry.register('icon',
+  IconRenderer,
+  {
+    label: 'Icon',
+    icon: 'smile',
+    category: 'basic',
+    inputs: [
+      { name: 'name', type: 'string', label: 'Icon Name', defaultValue: 'smile' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ]
+  }
+);

package/src/renderers/basic/image.tsx

@@ -0,0 +1,37 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { ImageSchema } from '@object-ui/types';
+
+ComponentRegistry.register('image',
+  ({ schema, className, ...props }: { schema: ImageSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...imgProps 
+    } = props;
+
+    return (
+    <img
+      src={schema.src}
+      alt={schema.alt || ''}
+      className={className}
+      {...imgProps}
+      // Apply designer props
+      data-obj-id={dataObjId}
+      data-obj-type={dataObjType}
+      style={style}
+    />
+  );
+  },
+  {
+    label: 'Image',
+    icon: 'image',
+    category: 'basic',
+    inputs: [
+      { name: 'src', type: 'string', label: 'Source URL' },
+      { name: 'alt', type: 'string', label: 'Alt Text' },
+      { name: 'className', type: 'string', label: 'Classes' }
+    ]
+  }
+);

package/src/renderers/basic/index.ts

@@ -0,0 +1,7 @@
+import './div';
+import './text';
+import './span';
+import './separator';
+import './image';
+import './icon';
+import './html';

package/src/renderers/basic/separator.tsx

@@ -0,0 +1,48 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { SeparatorSchema } from '@object-ui/types';
+import { Separator } from '../../ui';
+import { forwardRef } from 'react';
+
+const SeparatorRenderer = forwardRef<HTMLDivElement, { schema: SeparatorSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...separatorProps 
+    } = props;
+    
+    return (
+    <Separator 
+        ref={ref}
+        orientation={schema.orientation} 
+        className={className} 
+        {...separatorProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    />
+  );
+  }
+);
+
+ComponentRegistry.register('separator', 
+  SeparatorRenderer,
+  {
+    label: 'Separator',
+    inputs: [
+      { 
+        name: 'orientation', 
+        type: 'enum', 
+        enum: ['horizontal', 'vertical'], 
+        defaultValue: 'horizontal',
+        label: 'Orientation'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      orientation: 'horizontal',
+      className: 'my-4'
+    }
+  }
+);

package/src/renderers/basic/span.tsx

@@ -0,0 +1,44 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { SpanSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import { forwardRef } from 'react';
+
+const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...spanProps
+    } = props;
+    
+    return (
+    <span 
+        ref={ref}
+        className={className} 
+        {...spanProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    >
+      {renderChildren(schema.body)}
+    </span>
+  );
+  }
+);
+
+ComponentRegistry.register('span', 
+  SpanRenderer,
+  {
+    label: 'Inline Container',
+    inputs: [
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      className: 'px-2 py-1'
+    },
+    defaultChildren: [
+      { type: 'text', content: 'Inline text' }
+    ]
+  }
+);

package/src/renderers/basic/text.tsx

@@ -0,0 +1,42 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { TextSchema } from '@object-ui/types';
+
+ComponentRegistry.register('text', 
+  ({ schema, ...props }: { schema: TextSchema; [key: string]: any }) => {
+    // Text is a special case as it might be rendered as a fragment or span depending on usage.
+    // However, to support drag and drop in designer, it MUST be wrapped in an element if props are passed.
+    
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...rest 
+    } = props;
+
+    // If we have designer props, we must wrap it to make it selectable
+    if (dataObjId) {
+        return (
+            <span 
+                data-obj-id={dataObjId}
+                data-obj-type={dataObjType}
+                style={style}
+                {...rest}
+            >
+                {schema.content || schema.value}
+            </span>
+        );
+    }
+
+    return <>{schema.content || schema.value}</>;
+  },
+  {
+    label: 'Text',
+    inputs: [
+      { name: 'content', type: 'string', label: 'Content', required: true }
+    ],
+    defaultProps: {
+      content: 'Text content'
+    }
+  }
+);

package/src/renderers/complex/README-KANBAN.md

@@ -0,0 +1,208 @@
+# Kanban Board Component
+
+A fully functional, schema-driven Kanban board component for Object UI with drag-and-drop support.
+
+## Features
+
+- **Multiple Columns**: Create unlimited columns with customizable titles
+- **Rich Cards**: Cards support title, description, and multiple badges
+- **Drag & Drop**: Smooth drag-and-drop functionality powered by @dnd-kit
+- **Reordering**: Reorder cards within the same column
+- **Cross-Column Moves**: Move cards between different columns
+- **Column Limits**: Optional capacity limits with visual indicators
+- **Card Counters**: Shows current count and limit per column
+- **Schema-Driven**: Configure entirely through JSON/YAML
+- **Event Callbacks**: Custom event handling for card movements
+
+## Usage
+
+### Basic Example
+
+```json
+{
+  "type": "kanban",
+  "className": "w-full h-[600px]",
+  "columns": [
+    {
+      "id": "todo",
+      "title": "To Do",
+      "cards": [
+        {
+          "id": "card-1",
+          "title": "Task Title",
+          "description": "Task description",
+          "badges": [
+            { "label": "High Priority", "variant": "destructive" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "in-progress",
+      "title": "In Progress",
+      "limit": 3,
+      "cards": []
+    },
+    {
+      "id": "done",
+      "title": "Done",
+      "cards": []
+    }
+  ]
+}
+```
+
+### With Event Handling
+
+```json
+{
+  "type": "kanban",
+  "columns": [...],
+  "onCardMove": "(event) => { console.log('Card moved:', event); }"
+}
+```
+
+## Schema Reference
+
+### Kanban Props
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `type` | `"kanban"` | Yes | Component type identifier |
+| `columns` | `KanbanColumn[]` | Yes | Array of column configurations |
+| `className` | `string` | No | Custom CSS classes |
+| `onCardMove` | `function` | No | Callback when a card is moved |
+
+### KanbanColumn
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | `string` | Yes | Unique column identifier |
+| `title` | `string` | Yes | Column header title |
+| `cards` | `KanbanCard[]` | Yes | Array of cards in this column |
+| `limit` | `number` | No | Maximum number of cards allowed |
+| `className` | `string` | No | Custom CSS classes for column |
+
+### KanbanCard
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | `string` | Yes | Unique card identifier |
+| `title` | `string` | Yes | Card title |
+| `description` | `string` | No | Card description text |
+| `badges` | `Badge[]` | No | Array of badge objects |
+
+### Badge
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `label` | `string` | Yes | Badge text |
+| `variant` | `"default" \| "secondary" \| "destructive" \| "outline"` | No | Badge color variant |
+
+## Examples
+
+### Simple Task Board
+
+```json
+{
+  "type": "kanban",
+  "columns": [
+    {
+      "id": "backlog",
+      "title": "📋 Backlog",
+      "cards": [
+        {
+          "id": "1",
+          "title": "Setup project",
+          "badges": [{ "label": "Setup" }]
+        }
+      ]
+    },
+    {
+      "id": "doing",
+      "title": "🚀 Doing",
+      "limit": 2,
+      "cards": []
+    },
+    {
+      "id": "done",
+      "title": "✅ Done",
+      "cards": []
+    }
+  ]
+}
+```
+
+### Issue Tracking Board
+
+```json
+{
+  "type": "kanban",
+  "columns": [
+    {
+      "id": "new",
+      "title": "New Issues",
+      "cards": [
+        {
+          "id": "issue-1",
+          "title": "Bug: Login fails on Safari",
+          "description": "Users can't login using Safari browser",
+          "badges": [
+            { "label": "Bug", "variant": "destructive" },
+            { "label": "P0", "variant": "destructive" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "investigating",
+      "title": "Investigating",
+      "limit": 3,
+      "cards": []
+    },
+    {
+      "id": "fixed",
+      "title": "Fixed",
+      "cards": []
+    }
+  ]
+}
+```
+
+## Styling
+
+The Kanban component uses Tailwind CSS and can be customized using the `className` prop:
+
+```json
+{
+  "type": "kanban",
+  "className": "w-full h-[800px] bg-gray-50 p-4 rounded-lg",
+  "columns": [...]
+}
+```
+
+Individual columns can also be styled:
+
+```json
+{
+  "id": "urgent",
+  "title": "🔥 Urgent",
+  "className": "bg-red-50",
+  "cards": [...]
+}
+```
+
+## Technical Details
+
+- Built with React 18+ and TypeScript
+- Uses @dnd-kit for drag-and-drop functionality
+- Integrates with Shadcn UI components (Card, Badge, ScrollArea)
+- Supports both pointer and touch interactions
+- Accessible keyboard navigation (via @dnd-kit)
+
+## Browser Support
+
+- Chrome/Edge: Full support
+- Firefox: Full support
+- Safari: Full support
+- Mobile browsers: Full support with touch gestures