@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/overlay/drawer.tsx

@@ -1,77 +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 { DrawerSchema } from '@object-ui/types';
-import { 
-  Drawer, 
-  DrawerTrigger, 
-  DrawerContent, 
-  DrawerHeader, 
-  DrawerFooter, 
-  DrawerTitle, 
-  DrawerDescription,
-  DrawerClose
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('drawer', 
-  ({ schema, className, ...props }: { schema: DrawerSchema; className?: string; [key: string]: any }) => (
-    <Drawer shouldScaleBackground={schema.shouldScaleBackground} defaultOpen={schema.defaultOpen} {...props}>
-      <DrawerTrigger asChild>
-        {renderChildren(schema.trigger)}
-      </DrawerTrigger>
-      <DrawerContent className={className}>
-        <DrawerHeader>
-          {schema.title && <DrawerTitle>{schema.title}</DrawerTitle>}
-          {schema.description && <DrawerDescription>{schema.description}</DrawerDescription>}
-        </DrawerHeader>
-        {renderChildren(schema.content)}
-        {schema.footer && (
-          <DrawerFooter>
-             {renderChildren(schema.footer)}
-             {schema.showClose && <DrawerClose asChild><button>Close</button></DrawerClose>} 
-          </DrawerFooter>
-        )}
-      </DrawerContent>
-    </Drawer>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Drawer',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title' },
-      { name: 'description', type: 'string', label: 'Description' },
-       { name: 'shouldScaleBackground', type: 'boolean', label: 'Scale Background' },
-        { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
-       { name: 'showClose', type: 'boolean', label: 'Show Close Button in Footer' },
-      { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger' 
-      },
-      { 
-        name: 'content', 
-        type: 'slot', 
-        label: 'Content' 
-      },
-       { 
-        name: 'footer', 
-        type: 'slot', 
-        label: 'Footer' 
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      title: 'Drawer Title',
-      description: 'Drawer description',
-      trigger: [{ type: 'button', label: 'Open Drawer' }],
-      content: [{ type: 'text', content: 'Drawer content goes here' }]
-    }
-  }
-);

package/src/renderers/overlay/dropdown-menu.tsx

@@ -1,99 +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 { DropdownMenuSchema } from '@object-ui/types';
-import { 
-  DropdownMenu, 
-  DropdownMenuTrigger, 
-  DropdownMenuContent, 
-  DropdownMenuItem, 
-  DropdownMenuLabel, 
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-// Helper for recursive menu items
-const renderMenuItems = (items: any[]) => {
-  if (!items) return null;
-  return items.map((item: any, i: number) => {
-    if (item.type === 'separator') return <DropdownMenuSeparator key={i} />;
-    if (item.type === 'label') return <DropdownMenuLabel key={i}>{item.label}</DropdownMenuLabel>;
-    if (item.children) {
-        return (
-            <DropdownMenuSub key={i}>
-                <DropdownMenuSubTrigger inset={item.inset}>
-                    {item.icon && <span className="mr-2">{item.icon}</span>}
-                    {item.label}
-                </DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                    {renderMenuItems(item.children)}
-                </DropdownMenuSubContent>
-            </DropdownMenuSub>
-        )
-    }
-    
-    return (
-      <DropdownMenuItem key={i} disabled={item.disabled} inset={item.inset} onSelect={item.onSelect}>
-        {item.icon && <span className="mr-2">{item.icon}</span>}
-        {item.label}
-        {item.shortcut && <span className="ml-auto text-xs tracking-widest opacity-60">{item.shortcut}</span>}
-      </DropdownMenuItem>
-    );
-  });
-};
-
-ComponentRegistry.register('dropdown-menu', 
-  ({ schema, className, ...props }: { schema: DropdownMenuSchema; className?: string; [key: string]: any }) => (
-    <DropdownMenu modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
-      <DropdownMenuTrigger asChild>
-         {renderChildren(schema.trigger)}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align={schema.align} side={schema.side} className={className}>
-        {schema.label && <DropdownMenuLabel>{schema.label}</DropdownMenuLabel>}
-        {schema.label && <DropdownMenuSeparator />}
-        {renderMenuItems(schema.items)}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Dropdown Menu',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Menu Label' },
-       { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], label: 'Side' },
-      { name: 'align', type: 'enum', enum: ['start', 'center', 'end'], label: 'Align' },
-       { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger' 
-      },
-      { 
-        name: 'items', 
-        type: 'array', 
-        label: 'Items',
-        description: 'Recursive structure: { type?: "separator"|"label", label, icon, shortcut, disabled, children: [] }'
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      trigger: [{ type: 'button', label: 'Menu', variant: 'outline' }],
-      items: [
-        { label: 'Item 1' },
-        { label: 'Item 2' },
-        { type: 'separator' },
-        { label: 'Item 3' }
-      ],
-      align: 'start',
-      side: 'bottom'
-    }
-  }
-);

package/src/renderers/overlay/hover-card.tsx

@@ -1,55 +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 { HoverCardSchema } from '@object-ui/types';
-import { 
-  HoverCard, 
-  HoverCardTrigger, 
-  HoverCardContent 
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('hover-card', 
-  ({ schema, className, ...props }: { schema: HoverCardSchema; className?: string; [key: string]: any }) => (
-    <HoverCard openDelay={schema.openDelay} closeDelay={schema.closeDelay} {...props}>
-      <HoverCardTrigger asChild>
-        {renderChildren(schema.trigger)}
-      </HoverCardTrigger>
-      <HoverCardContent align={schema.align} side={schema.side} className={className}>
-         {renderChildren(schema.content)}
-      </HoverCardContent>
-    </HoverCard>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Hover Card',
-    inputs: [
-       { name: 'openDelay', type: 'number', label: 'Open Delay' },
-        { name: 'closeDelay', type: 'number', label: 'Close Delay' },
-         { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], label: 'Side' },
-      { name: 'align', type: 'enum', enum: ['start', 'center', 'end'], label: 'Align' },
-       { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger' 
-      },
-      { 
-        name: 'content', 
-        type: 'slot', 
-        label: 'Content' 
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      trigger: [{ type: 'button', label: 'Hover me', variant: 'link' }],
-      content: [{ type: 'text', content: 'Hover card content appears on hover' }],
-      side: 'top'
-    }
-  }
-);

package/src/renderers/overlay/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 './dialog';
-import './sheet';
-import './popover';
-import './tooltip';
-import './alert-dialog';
-import './drawer';
-import './hover-card';
-import './dropdown-menu';
-import './context-menu';
-import './menubar';

package/src/renderers/overlay/menubar.tsx

@@ -1,76 +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 { MenubarSchema } from '@object-ui/types';
-import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarSub, MenubarSubTrigger, MenubarSubContent } from '../../ui/menubar';
-
-ComponentRegistry.register('menubar', 
-  ({ schema, ...props }: { schema: MenubarSchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        ...menubarProps
-    } = props;
-    
-    return (
-      <Menubar 
-        className={schema.className} 
-        {...menubarProps}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {schema.menus?.map((menu, idx) => (
-          <MenubarMenu key={idx}>
-            <MenubarTrigger>{menu.label}</MenubarTrigger>
-            <MenubarContent>
-              {menu.items?.map((item, itemIdx) => (
-                item.separator ? (
-                  <MenubarSeparator key={itemIdx} />
-                ) : item.children ? (
-                  <MenubarSub key={itemIdx}>
-                    <MenubarSubTrigger>{item.label}</MenubarSubTrigger>
-                    <MenubarSubContent>
-                      {item.children.map((child, childIdx) => (
-                        <MenubarItem key={childIdx}>{child.label}</MenubarItem>
-                      ))}
-                    </MenubarSubContent>
-                  </MenubarSub>
-                ) : (
-                  <MenubarItem key={itemIdx} disabled={item.disabled}>
-                    {item.label}
-                  </MenubarItem>
-                )
-              ))}
-            </MenubarContent>
-          </MenubarMenu>
-        ))}
-      </Menubar>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Menubar',
-    inputs: [
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      menus: [
-        {
-          label: 'File',
-          items: [
-            { label: 'New' },
-            { label: 'Open' },
-            { separator: true },
-            { label: 'Exit' }
-          ]
-        }
-      ]
-    }
-  }
-);

package/src/renderers/overlay/popover.tsx

@@ -1,56 +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 { PopoverSchema } from '@object-ui/types';
-import { 
-  Popover, 
-  PopoverTrigger, 
-  PopoverContent 
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('popover', 
-  ({ schema, className, ...props }: { schema: PopoverSchema; className?: string; [key: string]: any }) => (
-    <Popover modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
-      <PopoverTrigger asChild>
-        {renderChildren(schema.trigger)}
-      </PopoverTrigger>
-      <PopoverContent align={schema.align} side={schema.side} className={className}>
-        {renderChildren(schema.content)}
-      </PopoverContent>
-    </Popover>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Popover',
-    inputs: [
-      { name: 'modal', type: 'boolean', label: 'Modal' },
-      { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
-      { name: 'align', type: 'enum', enum: ['start', 'center', 'end'], label: 'Align' },
-      { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], label: 'Side' },
-      { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger',
-      },
-      { 
-        name: 'content', 
-        type: 'slot', 
-        label: 'Content', 
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      trigger: [{ type: 'button', label: 'Open Popover', variant: 'outline' }],
-      content: [{ type: 'text', content: 'Popover content goes here' }],
-      align: 'center',
-      side: 'bottom'
-    }
-  }
-);

package/src/renderers/overlay/sheet.tsx

@@ -1,77 +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 { SheetSchema } from '@object-ui/types';
-import { 
-  Sheet, 
-  SheetTrigger, 
-  SheetContent, 
-  SheetHeader, 
-  SheetFooter, 
-  SheetTitle, 
-  SheetDescription
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('sheet', 
-  ({ schema, className, ...props }: { schema: SheetSchema; className?: string; [key: string]: any }) => (
-    <Sheet modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
-      <SheetTrigger asChild>
-        {renderChildren(schema.trigger)}
-      </SheetTrigger>
-      <SheetContent side={schema.side || 'right'} className={className}>
-        <SheetHeader>
-          {schema.title && <SheetTitle>{schema.title}</SheetTitle>}
-          {schema.description && <SheetDescription>{schema.description}</SheetDescription>}
-        </SheetHeader>
-        {renderChildren(schema.content)}
-        {schema.footer && (
-          <SheetFooter>
-            {renderChildren(schema.footer)}
-          </SheetFooter>
-        )}
-      </SheetContent>
-    </Sheet>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Sheet',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title' },
-      { name: 'description', type: 'string', label: 'Description' },
-      { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], defaultValue: 'right', label: 'Side' },
-      { name: 'modal', type: 'boolean', label: 'Modal', defaultValue: true },
-       { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
-      { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger',
-      },
-      { 
-        name: 'content', 
-        type: 'slot', 
-        label: 'Content', 
-      },
-       { 
-        name: 'footer', 
-        type: 'slot', 
-        label: 'Footer' 
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      title: 'Sheet Title',
-      description: 'Sheet description',
-      side: 'right',
-      modal: true,
-      trigger: [{ type: 'button', label: 'Open Sheet' }],
-      content: [{ type: 'text', content: 'Sheet content goes here' }]
-    }
-  }
-);

package/src/renderers/overlay/tooltip.tsx

@@ -1,67 +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 { TooltipSchema } from '@object-ui/types';
-import { 
-  TooltipProvider,
-  Tooltip, 
-  TooltipTrigger, 
-  TooltipContent 
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-// Helper to ensure provider exists if not already present at app root
-// For now assuming provider is at root or we just wrap it here.
-// Wrapping here is safer for isolated usage.
-
-ComponentRegistry.register('tooltip', 
-  ({ schema, className, ...props }: { schema: TooltipSchema; className?: string; [key: string]: any }) => (
-    <TooltipProvider delayDuration={schema.delayDuration}>
-      <Tooltip {...props}>
-        <TooltipTrigger asChild>
-          {renderChildren(schema.trigger)}
-        </TooltipTrigger>
-        <TooltipContent side={schema.side} align={schema.align} className={className}>
-           {(schema.content || renderChildren(schema.body)) as any}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Tooltip',
-    inputs: [
-      { name: 'delayDuration', type: 'number', label: 'Delay Duration', defaultValue: 700 },
-      { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], label: 'Side' },
-      { name: 'align', type: 'enum', enum: ['start', 'center', 'end'], label: 'Align' },
-      { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger',
-      },
-      { 
-        name: 'content', 
-        type: 'string', 
-        label: 'Content Text', 
-      },
-      { 
-        name: 'body', 
-        type: 'slot', 
-        label: 'Rich Content' 
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      trigger: [{ type: 'button', label: 'Hover me', variant: 'outline' }],
-      content: 'Tooltip content',
-      delayDuration: 700,
-      side: 'top'
-    }
-  }
-);

package/src/renderers/placeholders.tsx

@@ -1,107 +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 React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import { cn } from '../lib/utils';
-import { Box, FileQuestion } from 'lucide-react';
-
-export const PlaceholderRenderer = ({ schema, className }: any) => {
-  const type = schema.type;
-  const isView = type.startsWith('view:');
-  const isWidget = type.startsWith('widget:');
-  const isField = type.startsWith('field:');
-
-  return (
-    <div className={cn(
-      "flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg bg-muted/30 transition-colors hover:bg-muted/50",
-      isView && "border-blue-300 bg-blue-50/50 min-h-[200px]",
-      isWidget && "border-purple-300 bg-purple-50/50 min-h-[150px]",
-      isField && "border-yellow-300 bg-yellow-50/50 p-2 min-h-[40px] flex-row gap-2 justify-start",
-      className
-    )}>
-      <div className={cn("flex items-center gap-2 text-muted-foreground", isField && "text-sm")}>
-        {isField ? <Box className="h-4 w-4" /> : <FileQuestion className="h-8 w-8 mb-2 opacity-50" />}
-        <div className="flex flex-col items-center text-center">
-             <span className="font-mono font-medium text-foreground">{type}</span>
-             {!isField && <span className="text-xs">Component Placeholder</span>}
-        </div>
-      </div>
-      {schema.props && !isField && (
-        <div className="mt-4 w-full text-xs text-muted-foreground bg-background/50 p-2 rounded overflow-hidden">
-            <div className="opacity-70">Properties:</div>
-            <pre className="mt-1 truncate">{JSON.stringify(schema.props, null, 0)}</pre>
-        </div>
-      )}
-    </div>
-  );
-};
-
-// List of all protocol-defined components that need placeholders
-const PROTOCOL_COMPONENTS = [
-  // 1. Views (List)
-  'view:grid', 'view:kanban', 'view:map', 'view:calendar', 'view:gantt', 
-  'view:timeline', 'view:gallery',
-  
-  // 2. Views (Form)
-  'view:simple', 'view:wizard', 'view:tabbed', 'view:drawer', 'view:modal', 'view:split',
-
-  // 3. Fields (Textual)
-  'field:text', 'field:textarea', 'field:password', 'field:email', 'field:url', 'field:phone',
-  
-  // 4. Fields (Rich)
-  'field:markdown', 'field:html', 'field:code',
-
-  // 5. Fields (Numeric)
-  'field:number', 'field:currency', 'field:percent', 'field:slider',
-
-  // 6. Fields (Selection)
-  'field:boolean', 'field:checkboxes', 'field:select', 'field:multiselect', 'field:radio',
-
-  // 7. Fields (Date/Time)
-  'field:date', 'field:datetime', 'field:time', 'field:duration',
-
-  // 8. Fields (Relational)
-  'field:lookup', 'field:master_detail', 'field:tree',
-
-  // 9. Fields (Media)
-  'field:image', 'field:file', 'field:video', 'field:audio', 'field:avatar',
-
-  // 10. Fields (Visual)
-  'field:color', 'field:rating', 'field:signature', 'field:qrcode', 'field:progress',
-
-  // 11. Fields (Structure)
-  'field:json', 'field:address', 'field:location',
-
-  // 12. Page Components
-  'page:header', 'page-header', // Added headers
-  'page:footer', 'page:tabs', 'page:accordion', 'page:card', 'page:sidebar',
-  'record:details', 'record:highlights', 'record:related_list', 'record:activity', 
-  'record:chatter', 'record:path',
-  'app:launcher', 'nav:menu', 'nav:breadcrumb',
-  'global:search', 'global:notifications', 'user:profile',
-
-  // 13. Dashboard Widgets
-  'widget:metric', 'widget:bar', 'widget:line', 'widget:pie', 'widget:funnel', 
-  'widget:radar', 'widget:scatter', 'widget:heatmap', 'widget:pivot', 'widget:table', 'widget:text', 'widget:image',
-
-  // 14. Smart Actions (implemented in ./action/)
-  // 'action:button', 'action:group', 'action:menu', 'action:icon',
-
-  // 15. AI
-  'ai:chat_window', 'ai:input', 'ai:suggestion', 'ai:feedback'
-];
-
-export function registerPlaceholders() {
-    PROTOCOL_COMPONENTS.forEach(type => {
-        // Only register if not already registered (to avoid overwriting real implementations)
-        if (!ComponentRegistry.get(type)) {
-            ComponentRegistry.register(type, PlaceholderRenderer);
-        }
-    });
-}