@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/layout/tabs.tsx

@@ -1,97 +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 { TabsSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent
-} from '../../ui';
-import { cn } from '../../lib/utils';
-import React from 'react';
-
-const TabsRenderer = ({ schema, className, onChange, value, ...props }: { schema: TabsSchema; className?: string; onChange?: (val: string) => void; value?: string; [key: string]: any }) => {
-  // Extract designer-related props
-  const { 
-      'data-obj-id': dataObjId, 
-      'data-obj-type': dataObjType,
-      style, 
-      ...tabsProps 
-  } = props;
-
-  const handleValueChange = (val: string) => {
-    if (onChange) {
-      onChange(val);
-    }
-  };
-
-  const isVertical = schema.orientation === 'vertical';
-
-  return (
-    <Tabs 
-        defaultValue={value === undefined ? schema.defaultValue : undefined} 
-        value={value ?? schema.value}
-        onValueChange={handleValueChange}
-        orientation={schema.orientation || 'horizontal'}
-        className={cn(className, isVertical && "flex gap-2")} 
-        {...tabsProps}
-        // Apply designer props
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-    >
-      <TabsList className={cn(isVertical && "flex-col h-auto items-stretch bg-muted/50 p-1")}>
-        {schema.items?.map((item) => (
-          <TabsTrigger 
-            key={item.value} 
-            value={item.value}
-            disabled={item.disabled}
-            className={cn(isVertical && "justify-start")}
-          >
-            {item.label}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {schema.items?.map((item) => (
-        <TabsContent 
-          key={item.value} 
-          value={item.value}
-          className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isVertical && "mt-0 flex-1")}
-        >
-          {renderChildren(item.content || (item as any).body)}
-        </TabsContent>
-      ))}
-    </Tabs>
-  );
-};
-
-ComponentRegistry.register('tabs', TabsRenderer,
-  {
-    namespace: 'ui',
-    label: 'Tabs',
-    inputs: [
-      { name: 'defaultValue', type: 'string', label: 'Default Value', required: true },
-      { name: 'className', type: 'string', label: 'CSS Class' },
-      { 
-        name: 'items', 
-        type: 'array', 
-        label: 'Items'
-      }
-    ],
-    defaultProps: {
-      defaultValue: 'tab1',
-      items: [
-        { label: 'Tab 1', value: 'tab1', body: [{ type: 'text', content: 'Content for Tab 1' }] },
-        { label: 'Tab 2', value: 'tab2', body: [{ type: 'text', content: 'Content for Tab 2' }] },
-        { label: 'Tab 3', value: 'tab3', body: [{ type: 'text', content: 'Content for Tab 3' }] }
-      ],
-      className: 'w-full'
-    }
-  }
-);

package/src/renderers/navigation/header-bar.tsx

@@ -1,118 +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 type { HeaderBarSchema, BreadcrumbItem as BreadcrumbItemType } from '@object-ui/types';
-import { resolveI18nLabel, SchemaRenderer } from '@object-ui/react';
-import {
-  SidebarTrigger,
-  Separator,
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbSeparator,
-  BreadcrumbPage,
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  Input,
-} from '../../ui';
-import { ChevronDown, Search } from 'lucide-react';
-
-function BreadcrumbLabel({ crumb, isLast }: { crumb: BreadcrumbItemType; isLast: boolean }) {
-  const label = resolveI18nLabel(crumb.label) ?? '';
-
-  if (crumb.siblings && crumb.siblings.length > 0) {
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger className="flex items-center gap-1">
-          {isLast ? (
-            <span className="font-semibold">{label}</span>
-          ) : (
-            <span>{label}</span>
-          )}
-          <ChevronDown className="h-3 w-3" />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          {crumb.siblings.map((sibling, i) => (
-            <DropdownMenuItem key={i} asChild>
-              <a href={sibling.href}>{sibling.label}</a>
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  }
-
-  if (isLast) {
-    return <BreadcrumbPage>{label}</BreadcrumbPage>;
-  }
-  return <BreadcrumbLink href={crumb.href || '#'}>{label}</BreadcrumbLink>;
-}
-
-ComponentRegistry.register('header-bar', 
-  ({ schema }: { schema: HeaderBarSchema }) => (
-    <header className="flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b px-3 sm:px-4">
-      <SidebarTrigger />
-      <Separator orientation="vertical" className="mr-2 h-4" />
-      <Breadcrumb>
-        <BreadcrumbList>
-          {schema.crumbs?.map((crumb: BreadcrumbItemType, idx: number) => (
-            <React.Fragment key={idx}>
-              <BreadcrumbItem>
-                <BreadcrumbLabel crumb={crumb} isLast={idx === schema.crumbs!.length - 1} />
-              </BreadcrumbItem>
-              {idx < schema.crumbs!.length - 1 && <BreadcrumbSeparator />}
-            </React.Fragment>
-          ))}
-        </BreadcrumbList>
-      </Breadcrumb>
-
-      <div className="ml-auto flex items-center gap-2">
-        {schema.search?.enabled && (
-          <div className="relative">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              type="search"
-              placeholder={schema.search.placeholder}
-              className="pl-8 w-[200px] lg:w-[300px]"
-            />
-            {schema.search.shortcut && (
-              <kbd className="pointer-events-none absolute right-2 top-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-                {schema.search.shortcut}
-              </kbd>
-            )}
-          </div>
-        )}
-        {schema.actions?.map((action, idx) => (
-          <SchemaRenderer key={idx} schema={action} />
-        ))}
-        {schema.rightContent && <SchemaRenderer schema={schema.rightContent} />}
-      </div>
-    </header>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Header Bar',
-    inputs: [
-       { name: 'crumbs', type: 'array', label: 'Breadcrumbs' },
-       { name: 'search', type: 'object', label: 'Search Configuration' },
-       { name: 'actions', type: 'array', label: 'Action Slots' },
-       { name: 'rightContent', type: 'object', label: 'Right Content' },
-    ],
-    defaultProps: {
-      crumbs: [
-        { label: 'Home', href: '#' },
-        { label: 'Current Page' }
-      ]
-    }
-  }
-);

package/src/renderers/navigation/index.ts

@@ -1,10 +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 './sidebar';
-import './header-bar';

package/src/renderers/navigation/sidebar.tsx

@@ -1,208 +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 { SidebarSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
-import {
-  SidebarProvider,
-  Sidebar,
-  SidebarHeader,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarFooter,
-  SidebarTrigger,
-  SidebarInset
-} from '../../ui';
-
-ComponentRegistry.register('sidebar-provider', 
-  ({ schema, ...props }) => (
-    <SidebarProvider {...props}>{renderChildren(schema.body)}</SidebarProvider>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Sidebar Provider',
-    inputs: [
-      { name: 'defaultOpen', type: 'boolean', label: 'Default Open', defaultValue: true }
-    ],
-    defaultProps: {
-      defaultOpen: true
-    },
-    defaultChildren: [
-      { type: 'sidebar' },
-      { type: 'sidebar-inset' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar', 
-  ({ schema, ...props }: { schema: SidebarSchema; [key: string]: any }) => (
-    <Sidebar {...props}>{renderChildren(schema.body)}</Sidebar>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Sidebar',
-    inputs: [
-      { name: 'collapsible', type: 'enum', enum: ['offcanvas', 'icon', 'none'], defaultValue: 'icon', label: 'Collapsible' },
-      { name: 'side', type: 'enum', enum: ['left', 'right'], defaultValue: 'left', label: 'Side' },
-      { name: 'variant', type: 'enum', enum: ['sidebar', 'floating', 'inset'], defaultValue: 'sidebar', label: 'Variant' }
-    ],
-    defaultProps: {
-      collapsible: 'icon',
-      side: 'left',
-      variant: 'sidebar'
-    },
-    defaultChildren: [
-      { type: 'sidebar-header' },
-      { type: 'sidebar-content' },
-      { type: 'sidebar-footer' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-header', 
-  ({ schema, ...props }) => (
-    <SidebarHeader {...props}>{renderChildren(schema.body)}</SidebarHeader>
-  ),
-  { 
-    namespace: 'ui',
-    label: 'Sidebar Header',
-    defaultChildren: [
-      { type: 'text', content: 'Sidebar Header' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-content', 
-  ({ schema, ...props }) => (
-    <SidebarContent {...props}>{renderChildren(schema.body)}</SidebarContent>
-  ),
-  { 
-    namespace: 'ui',
-    label: 'Sidebar Content',
-    defaultChildren: [
-      { type: 'sidebar-group' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-group', 
-  ({ schema, ...props }) => (
-    <SidebarGroup {...props}>
-      {schema.label && <SidebarGroupLabel>{schema.label}</SidebarGroupLabel>}
-      <SidebarGroupContent>
-        {renderChildren(schema.body)}
-      </SidebarGroupContent>
-    </SidebarGroup>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Sidebar Group',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Label' }
-    ],
-    defaultProps: {
-      label: 'Menu'
-    },
-    defaultChildren: [
-      { type: 'sidebar-menu' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-menu', 
-  ({ schema, ...props }) => (
-    <SidebarMenu {...props}>{renderChildren(schema.body)}</SidebarMenu>
-  ),
-  { 
-    namespace: 'ui',
-    label: 'Sidebar Menu',
-    defaultChildren: [
-      { type: 'sidebar-menu-item' },
-      { type: 'sidebar-menu-item' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-menu-item', 
-  ({ schema, ...props }) => (
-    <SidebarMenuItem {...props}>{renderChildren(schema.body)}</SidebarMenuItem>
-  ),
-  { 
-    namespace: 'ui',
-    label: 'Sidebar Menu Item',
-    defaultChildren: [
-      { type: 'sidebar-menu-button' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-menu-button', 
-  ({ schema, ...props }) => (
-    <SidebarMenuButton isActive={schema.active} {...props}>
-      {renderChildren(schema.body)}
-    </SidebarMenuButton>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Sidebar Menu Button',
-    inputs: [
-      { name: 'active', type: 'boolean', label: 'Active', defaultValue: false },
-      { name: 'size', type: 'enum', enum: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' },
-      { name: 'tooltip', type: 'string', label: 'Tooltip' }
-    ],
-    defaultProps: {
-      size: 'default'
-    },
-    defaultChildren: [
-      { type: 'text', content: 'Menu Item' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-footer', 
-  ({ schema, ...props }) => (
-    <SidebarFooter {...props}>{renderChildren(schema.body)}</SidebarFooter>
-  ),
-  { 
-    namespace: 'ui',
-    label: 'Sidebar Footer',
-    defaultChildren: [
-      { type: 'text', content: 'Footer' }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-inset', 
-  ({ schema, ...props }) => (
-    <SidebarInset {...props}>{renderChildren(schema.body)}</SidebarInset>
-  ),
-  { 
-    namespace: 'ui',
-    label: 'Sidebar Inset',
-    defaultChildren: [
-      { type: 'div', className: 'p-4', body: [{ type: 'text', content: 'Main content area' }] }
-    ]
-  }
-);
-
-ComponentRegistry.register('sidebar-trigger', 
-  ({ className, ...props }) => (
-    <SidebarTrigger className={className} {...props} />
-  ),
-  {
-    namespace: 'ui',
-    label: 'Sidebar Trigger',
-    inputs: [{ name: 'className', type: 'string', label: 'CSS Class' }]
-  }
-);

package/src/renderers/overlay/alert-dialog.tsx

@@ -1,72 +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 { AlertDialogSchema } from '@object-ui/types';
-import { 
-  AlertDialog, 
-  AlertDialogTrigger, 
-  AlertDialogContent, 
-  AlertDialogHeader, 
-  AlertDialogFooter, 
-  AlertDialogTitle, 
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('alert-dialog', 
-  ({ schema, className, ...props }: { schema: AlertDialogSchema; className?: string; [key: string]: any }) => (
-    <AlertDialog defaultOpen={schema.defaultOpen} {...props}>
-      <AlertDialogTrigger asChild>
-        {renderChildren(schema.trigger)}
-      </AlertDialogTrigger>
-      <AlertDialogContent className={className}>
-        <AlertDialogHeader>
-          {schema.title && <AlertDialogTitle>{schema.title}</AlertDialogTitle>}
-          {schema.description && <AlertDialogDescription>{schema.description}</AlertDialogDescription>}
-        </AlertDialogHeader>
-        {renderChildren(schema.content)}
-        <AlertDialogFooter>
-          {schema.cancelText && <AlertDialogCancel>{schema.cancelText}</AlertDialogCancel>}
-          {schema.actionText && <AlertDialogAction onClick={schema.onAction}>{schema.actionText}</AlertDialogAction>}
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Alert Dialog',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title' },
-      { name: 'description', type: 'string', label: 'Description' },
-      { name: 'cancelText', type: 'string', label: 'Cancel Text', defaultValue: 'Cancel' },
-      { name: 'actionText', type: 'string', label: 'Action Text', defaultValue: 'Continue' },
-       { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
-      { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger'
-      },
-       { 
-        name: 'content', 
-        type: 'slot', 
-        label: 'Content/Body'
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      title: 'Are you sure?',
-      description: 'This action cannot be undone.',
-      cancelText: 'Cancel',
-      actionText: 'Continue',
-      trigger: [{ type: 'button', label: 'Open Alert', variant: 'destructive' }]
-    }
-  }
-);

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

@@ -1,100 +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 { ContextMenuSchema } from '@object-ui/types';
-import { 
-  ContextMenu, 
-  ContextMenuTrigger, 
-  ContextMenuContent, 
-  ContextMenuItem, 
-  ContextMenuLabel, 
-  ContextMenuSeparator,
-  ContextMenuSub,
-  ContextMenuSubTrigger,
-  ContextMenuSubContent,
-  ContextMenuShortcut
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-// Reuse helper for recursive menu items if I could share it, but for now duplicate concise logic
-const renderContextMenuItems = (items: any[]) => {
-  if (!items) return null;
-  return items.map((item: any, i: number) => {
-    if (item.type === 'separator') return <ContextMenuSeparator key={i} />;
-    if (item.type === 'label') return <ContextMenuLabel key={i}>{item.label}</ContextMenuLabel>;
-    if (item.children) {
-        return (
-            <ContextMenuSub key={i}>
-                <ContextMenuSubTrigger inset={item.inset}>
-                    {item.label}
-                </ContextMenuSubTrigger>
-                <ContextMenuSubContent>
-                    {renderContextMenuItems(item.children)}
-                </ContextMenuSubContent>
-            </ContextMenuSub>
-        )
-    }
-    
-    return (
-      <ContextMenuItem key={i} disabled={item.disabled} inset={item.inset} onSelect={item.onSelect}>
-        {item.label}
-        {item.shortcut && <ContextMenuShortcut>{item.shortcut}</ContextMenuShortcut>}
-      </ContextMenuItem>
-    );
-  });
-};
-
-ComponentRegistry.register('context-menu', 
-  ({ schema, className, ...props }: { schema: ContextMenuSchema; className?: string; [key: string]: any }) => {
-    // Determine classes
-    const triggerClass = schema.triggerClassName || className || (schema.className as string) || "h-[120px] w-full sm:h-[150px] sm:w-[300px] border border-dashed text-sm flex items-center justify-center";
-    const contentClass = schema.contentClassName;
-
-    return (
-    <ContextMenu modal={schema.modal} {...props}>
-      <ContextMenuTrigger asChild>
-          {/* Usually a Right Click area */}
-          <div className={triggerClass}>
-             {renderChildren(schema.trigger || { type: 'text', value: "Right click here" })}
-          </div>
-      </ContextMenuTrigger>
-      <ContextMenuContent className={contentClass}>
-         {renderContextMenuItems(schema.items)}
-      </ContextMenuContent>
-    </ContextMenu>
-  )},
-  {
-    namespace: 'ui',
-    label: 'Context Menu',
-    inputs: [
-      { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger Area',
-      },
-      { name: 'triggerClassName', type: 'string', label: 'Trigger Area Class' },
-      { 
-        name: 'items', 
-        type: 'array', 
-        label: 'Items',
-        description: 'Recursive structure: { type?: "separator"|"label", label, shortcut, children }'
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      items: [
-        { label: 'Action 1' },
-        { label: 'Action 2' },
-        { type: 'separator' },
-        { label: 'Action 3' }
-      ],
-      trigger: [{ type: 'text', content: 'Right click here' }]
-    }
-  }
-);

package/src/renderers/overlay/dialog.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 { DialogSchema } from '@object-ui/types';
-import { 
-  Dialog, 
-  DialogTrigger, 
-  DialogContent, 
-  DialogHeader, 
-  DialogFooter, 
-  DialogTitle, 
-  DialogDescription
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('dialog', 
-  ({ schema, className, ...props }: { schema: DialogSchema; className?: string; [key: string]: any }) => (
-    <Dialog modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
-      <DialogTrigger asChild>
-        {renderChildren(schema.trigger)}
-      </DialogTrigger>
-      <DialogContent className={className}>
-        <DialogHeader>
-          {schema.title && <DialogTitle>{schema.title}</DialogTitle>}
-          {schema.description && <DialogDescription>{schema.description}</DialogDescription>}
-        </DialogHeader>
-        {renderChildren(schema.content)}
-        {schema.footer && (
-          <DialogFooter>
-            {renderChildren(schema.footer)}
-          </DialogFooter>
-        )}
-      </DialogContent>
-    </Dialog>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Dialog',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title' },
-      { name: 'description', type: 'string', label: 'Description' },
-      { name: 'modal', type: 'boolean', label: 'Modal', defaultValue: true },
-      { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
-      { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger',
-        description: 'Element that opens the dialog' 
-      },
-      { 
-        name: 'content', 
-        type: 'slot', 
-        label: 'Content', 
-        description: 'Main content of the dialog' 
-      },
-      { 
-        name: 'footer', 
-        type: 'slot', 
-        label: 'Footer' 
-      },
-      { name: 'className', type: 'string', label: 'Content CSS Class' }
-    ],
-    defaultProps: {
-      title: 'Dialog Title',
-      description: 'Dialog description goes here',
-      modal: true,
-      trigger: [{ type: 'button', label: 'Open Dialog' }],
-      content: [{ type: 'text', content: 'Dialog content goes here' }]
-    }
-  }
-);