@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/basic/image.tsx

@@ -1,49 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-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}
-    />
-  );
-  },
-  {
-    namespace: 'ui',
-    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' }
-    ],
-    defaultProps: {
-      className: 'max-w-full h-auto'
-    }
-  }
-);

package/src/renderers/basic/index.ts

@@ -1,18 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import './div';
-import './text';
-import './span';
-import './separator';
-import './image';
-import './icon';
-import './html';
-import './button-group';
-import './pagination';
-import './navigation-menu';

package/src/renderers/basic/navigation-menu.tsx

@@ -1,81 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { ComponentRegistry } from '@object-ui/core';
-import type { NavigationMenuSchema } from '@object-ui/types';
-import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '../../ui/navigation-menu';
-import { cn } from '../../lib/utils';
-
-ComponentRegistry.register('navigation-menu', 
-  ({ schema, ...props }: { schema: NavigationMenuSchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        ...navigationMenuProps
-    } = props;
-    
-    return (
-      <NavigationMenu 
-        className={schema.className} 
-        {...navigationMenuProps}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        <NavigationMenuList>
-          {schema.items?.map((item, idx) => (
-            <NavigationMenuItem key={idx}>
-              {item.children ? (
-                <>
-                  <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
-                  <NavigationMenuContent>
-                    <ul className="grid w-full gap-3 p-4 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-                      {item.children.map((child, childIdx) => (
-                        <li key={childIdx}>
-                          <NavigationMenuLink asChild>
-                            <a
-                              className={cn(
-                                "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                              )}
-                              href={child.href}
-                            >
-                              <div className="text-sm font-medium leading-none">{child.label}</div>
-                              {child.description && (
-                                <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-                                  {child.description}
-                                </p>
-                              )}
-                            </a>
-                          </NavigationMenuLink>
-                        </li>
-                      ))}
-                    </ul>
-                  </NavigationMenuContent>
-                </>
-              ) : (
-                <NavigationMenuLink href={item.href}>{item.label}</NavigationMenuLink>
-              )}
-            </NavigationMenuItem>
-          ))}
-        </NavigationMenuList>
-      </NavigationMenu>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Navigation Menu',
-    inputs: [
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      items: [
-        { label: 'Home', href: '/' },
-        { label: 'About', href: '/about' }
-      ]
-    }
-  }
-);

package/src/renderers/basic/pagination.tsx

@@ -1,109 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { ComponentRegistry } from '@object-ui/core';
-import type { PaginationSchema } from '@object-ui/types';
-import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '../../ui/pagination';
-import React from 'react';
-
-ComponentRegistry.register('pagination', 
-  ({ schema, ...props }: { schema: PaginationSchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        onPageChange,
-        ...paginationProps
-    } = props;
-    
-    const currentPage = schema.currentPage || schema.page || 1;
-    const totalPages = schema.totalPages || 1;
-    
-    const handlePageChange = (page: number, e: React.MouseEvent) => {
-      e.preventDefault();
-      if (page === currentPage) return;
-      if (page < 1 || page > totalPages) return;
-      
-      if (onPageChange) {
-        onPageChange(page);
-      }
-    };
-
-    const getPageNumbers = () => {
-      if (totalPages <= 7) {
-        return Array.from({ length: totalPages }, (_, i) => i + 1);
-      }
-      
-      if (currentPage <= 3) {
-        return [1, 2, 3, 4, 5, -1, totalPages];
-      }
-      
-      if (currentPage >= totalPages - 2) {
-        return [1, -1, totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
-      }
-      
-      return [1, -1, currentPage - 1, currentPage, currentPage + 1, -1, totalPages];
-    };
-    
-    return (
-      <Pagination 
-        className={schema.className} 
-        {...paginationProps}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious 
-              href="#" 
-              onClick={(e) => handlePageChange(currentPage - 1, e)}
-              className={currentPage <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
-              aria-disabled={currentPage <= 1}
-            />
-          </PaginationItem>
-          {getPageNumbers().map((page, idx) => (
-            <PaginationItem key={idx}>
-              {page === -1 ? (
-                <PaginationEllipsis />
-              ) : (
-                <PaginationLink 
-                  href="#" 
-                  isActive={page === currentPage}
-                  onClick={(e) => handlePageChange(page, e)}
-                  className="cursor-pointer"
-                >
-                  {page}
-                </PaginationLink>
-              )}
-            </PaginationItem>
-          ))}
-          <PaginationItem>
-            <PaginationNext 
-              href="#" 
-              onClick={(e) => handlePageChange(currentPage + 1, e)}
-              className={currentPage >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
-              aria-disabled={currentPage >= totalPages}
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Pagination',
-    inputs: [
-      { name: 'currentPage', type: 'number', label: 'Current Page', defaultValue: 1 },
-      { name: 'totalPages', type: 'number', label: 'Total Pages', defaultValue: 10 },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      currentPage: 1,
-      totalPages: 10
-    }
-  }
-);

package/src/renderers/basic/separator.tsx

@@ -1,57 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-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,
-  {
-    namespace: 'ui',
-    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-2 sm:my-4'
-    }
-  }
-);

package/src/renderers/basic/span.tsx

@@ -1,63 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-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) => {
-    // Deprecation warning
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn(
-        '[ObjectUI] The "span" component is deprecated. Please use Shadcn components instead:\n' +
-        '  - For badges/labels: use "badge" component\n' +
-        '  - For inline text emphasis: use "text" component with appropriate className\n' +
-        'See documentation at https://www.objectui.org/docs/components for alternatives.'
-      );
-    }
-    
-    // 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,
-  {
-    namespace: 'ui',
-    label: 'Inline Container (Deprecated)',
-    inputs: [
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      className: 'px-1.5 py-0.5 sm:px-2 sm:py-1'
-    },
-    defaultChildren: [
-      { type: 'text', content: 'Inline text' }
-    ]
-  }
-);

package/src/renderers/basic/text.tsx

@@ -1,52 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-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 or className, we must wrap it to make it selectable and styleable
-    if (dataObjId || schema.className || rest.className) {
-        return (
-            <span 
-                data-obj-id={dataObjId}
-                data-obj-type={dataObjType}
-                style={style}
-                className={schema.className || rest.className}
-                {...rest}
-            >
-                {schema.content || schema.value}
-            </span>
-        );
-    }
-
-    return <>{schema.content || schema.value}</>;
-  },
-  {
-    namespace: 'ui',
-    label: 'Text',
-    inputs: [
-      { name: 'content', type: 'string', label: 'Content', required: true }
-    ],
-    defaultProps: {
-      content: 'Text content'
-    }
-  }
-);

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

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