@object-ui/components 3.1.5 → 3.3.1

package/src/renderers/action/action-menu.tsx

@@ -1,203 +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.
- */
-
-/**
- * action:menu — Dropdown menu for overflow actions.
- *
- * Renders a Shadcn DropdownMenu populated from ActionSchema[].
- * Each menu item triggers the corresponding action via ActionRunner.
- */
-
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import type { ActionSchema } from '@object-ui/types';
-import { useAction } from '@object-ui/react';
-import { useCondition } from '@object-ui/react';
-import { Button } from '../../ui';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../../ui';
-import { cn } from '../../lib/utils';
-import { Loader2, MoreHorizontal } from 'lucide-react';
-import { resolveIcon } from './resolve-icon';
-
-export interface ActionMenuSchema {
-  type: 'action:menu';
-  /** Menu trigger label (defaults to icon-only) */
-  label?: string;
-  /** Menu trigger icon (defaults to more-horizontal) */
-  icon?: string;
-  /** Actions to render as menu items */
-  actions?: ActionSchema[];
-  /** Trigger variant */
-  variant?: string;
-  /** Trigger size */
-  size?: string;
-  /** Visibility condition */
-  visible?: string;
-  /** Custom CSS class */
-  className?: string;
-  [key: string]: any;
-}
-
-const ActionMenuItem: React.FC<{
-  action: ActionSchema;
-  onExecute: (action: ActionSchema) => Promise<void>;
-}> = ({ action, onExecute }) => {
-  const isVisible = useCondition(action.visible ? `\${${action.visible}}` : undefined);
-  const isEnabled = useCondition(action.enabled ? `\${${action.enabled}}` : undefined);
-
-  const iconElement = useMemo(() => {
-    const Icon = resolveIcon(action.icon);
-    // eslint-disable-next-line react-hooks/static-components -- Icon is resolved from a stable icon registry
-    return Icon ? <Icon className="mr-2 h-4 w-4" /> : null;
-  }, [action.icon]);
-
-  if (action.visible && !isVisible) return null;
-
-  return (
-    <DropdownMenuItem
-      disabled={action.enabled ? !isEnabled : false}
-      onSelect={(e) => {
-        e.preventDefault();
-        onExecute(action);
-      }}
-      className={cn(
-        (action.variant as string) === 'destructive' && 'text-destructive focus:text-destructive',
-        action.className,
-      )}
-    >
-      {iconElement}
-      <span>{action.label || action.name}</span>
-    </DropdownMenuItem>
-  );
-};
-
-ActionMenuItem.displayName = 'ActionMenuItem';
-
-const ActionMenuRenderer = forwardRef<HTMLButtonElement, { schema: ActionMenuSchema; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
-    const {
-      'data-obj-id': dataObjId,
-      'data-obj-type': dataObjType,
-      style,
-      ...rest
-    } = props;
-
-    const { execute } = useAction();
-    const [loading, setLoading] = useState(false);
-
-    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
-
-    const TriggerIcon = resolveIcon(schema.icon) || MoreHorizontal;
-    const variant = schema.variant || 'ghost';
-    const size = schema.size || 'icon';
-
-    const handleExecute = useCallback(
-      async (action: ActionSchema) => {
-        setLoading(true);
-        try {
-          await execute({
-            type: action.type,
-            name: action.name,
-            target: action.target,
-            execute: action.execute,
-            endpoint: action.endpoint,
-            method: action.method,
-            params: action.params as Record<string, any> | undefined,
-            confirmText: action.confirmText,
-            successMessage: action.successMessage,
-            errorMessage: action.errorMessage,
-            refreshAfter: action.refreshAfter,
-            toast: action.toast,
-          });
-        } finally {
-          setLoading(false);
-        }
-      },
-      [execute],
-    );
-
-    if (schema.visible && !isVisible) return null;
-
-    const actions = schema.actions || [];
-    if (actions.length === 0) return null;
-
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            ref={ref}
-            type="button"
-            variant={variant as any}
-            size={size as any}
-            className={cn(
-              size === 'icon' && 'h-8 w-8',
-              schema.className,
-              className,
-            )}
-            disabled={loading}
-            aria-label={schema.label || 'More actions'}
-            {...rest}
-            {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-          >
-            {loading ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <>
-                <TriggerIcon className={cn('h-4 w-4', schema.label && 'mr-2')} />
-                {schema.label && <span>{schema.label}</span>}
-              </>
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent align="end">
-          {actions.map((action, index) => {
-            // Render separator for actions tagged with 'separator-before'
-            const showSeparator = action.tags?.includes('separator-before') && index > 0;
-            return (
-              <React.Fragment key={action.name || index}>
-                {showSeparator && <DropdownMenuSeparator />}
-                <ActionMenuItem action={action} onExecute={handleExecute} />
-              </React.Fragment>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  },
-);
-
-ActionMenuRenderer.displayName = 'ActionMenuRenderer';
-
-ComponentRegistry.register('action:menu', ActionMenuRenderer, {
-  namespace: 'action',
-  label: 'Action Menu',
-  inputs: [
-    { name: 'label', type: 'string', label: 'Trigger Label' },
-    { name: 'icon', type: 'string', label: 'Trigger Icon' },
-    { name: 'actions', type: 'object', label: 'Actions' },
-    {
-      name: 'variant',
-      type: 'enum',
-      label: 'Trigger Variant',
-      enum: ['default', 'secondary', 'outline', 'ghost'],
-      defaultValue: 'ghost',
-    },
-    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
-  ],
-  defaultProps: {
-    variant: 'ghost',
-    actions: [],
-  },
-});

package/src/renderers/action/index.ts

@@ -1,19 +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.
- */
-
-/**
- * Action renderers — Smart action components driven by ActionSchema.
- *
- * Registers: action:button, action:icon, action:menu, action:group
- */
-
-import './action-button';
-import './action-icon';
-import './action-menu';
-import './action-group';
-import './action-bar';

package/src/renderers/action/resolve-icon.ts

@@ -1,35 +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 { icons, type LucideIcon } from 'lucide-react';
-
-/**
- * Convert a kebab-case icon name to PascalCase (e.g., "arrow-right" -> "ArrowRight").
- */
-function toPascalCase(str: string): string {
-  return str
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('');
-}
-
-/** Map of renamed icons in lucide-react */
-const iconNameMap: Record<string, string> = {
-  Home: 'House',
-};
-
-/**
- * Resolve a Lucide icon by its kebab-case name.
- * Returns null if not found.
- */
-export function resolveIcon(name: string | undefined): LucideIcon | null {
-  if (!name) return null;
-  const pascalName = toPascalCase(name);
-  const mapped = iconNameMap[pascalName] || pascalName;
-  return (icons as Record<string, LucideIcon>)[mapped] ?? null;
-}

package/src/renderers/basic/button-group.tsx

@@ -1,79 +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 { ButtonGroupSchema } from '@object-ui/types';
-import { Button } from '../../ui';
-import { cn } from '../../lib/utils';
-
-ComponentRegistry.register('button-group', 
-  ({ schema, ...props }: { schema: ButtonGroupSchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        ...buttonGroupProps
-    } = props;
-    
-    return (
-      <div 
-        className={cn('flex flex-wrap sm:inline-flex rounded-md shadow-sm', schema.className)} 
-        role="group"
-        {...buttonGroupProps}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {schema.buttons?.map((button, idx) => (
-          <Button
-            key={idx}
-            variant={button.variant || schema.variant}
-            size={button.size || schema.size}
-            className={cn(
-              'rounded-none',
-              idx === 0 && 'rounded-l-md',
-              idx === (schema.buttons?.length || 0) - 1 && 'rounded-r-md',
-              idx > 0 && '-ml-px',
-              button.className
-            )}
-          >
-            {button.label}
-          </Button>
-        ))}
-      </div>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Button Group',
-    inputs: [
-      { 
-        name: 'variant', 
-        type: 'enum', 
-        enum: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'], 
-        defaultValue: 'default',
-        label: 'Variant'
-      },
-      { 
-        name: 'size', 
-        type: 'enum', 
-        enum: ['default', 'sm', 'lg', 'icon'], 
-        defaultValue: 'default',
-        label: 'Size'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      variant: 'default',
-      size: 'default',
-      buttons: [
-        { label: 'Left' },
-        { label: 'Middle' },
-        { label: 'Right' }
-      ]
-    }
-  }
-);

package/src/renderers/basic/div.tsx

@@ -1,60 +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 { 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) => {
-    // Deprecation warning
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn(
-        '[ObjectUI] The "div" component is deprecated. Please use Shadcn components instead:\n' +
-        '  - For containers: use "card", "flex", or semantic layout components\n' +
-        '  - For simple wrappers: use layout components like "container", "stack", or "grid"\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,
-        ...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,
-  {
-    namespace: 'ui',
-    label: 'Container (Deprecated)',
-    inputs: [
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      className: 'p-2 sm:p-4 border border-dashed border-gray-300 rounded min-h-[100px]'
-    }
-  }
-);

package/src/renderers/basic/html.tsx

@@ -1,43 +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 { 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}
-    />
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'HTML Content',
-    inputs: [
-      { name: 'html', type: 'string', label: 'HTML', description: 'Raw HTML content' }
-    ]
-  }
-);

package/src/renderers/basic/icon.tsx

@@ -1,89 +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 { IconSchema } from '@object-ui/types';
-import { icons } from 'lucide-react';
-import React, { forwardRef } from 'react';
-import { cn } from '../../lib/utils';
-
-// Convert kebab-case to PascalCase for Lucide icon names
-// e.g., "arrow-right" -> "ArrowRight", "home" -> "Home"
-function toPascalCase(str: string): string {
-  return str
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('');
-}
-
-// Map of renamed icons in lucide-react (from old name to new name)
-const iconNameMap: Record<string, string> = {
-  'Home': 'House', // "Home" was renamed to "House" in lucide-react's icons object
-};
-
-const IconRenderer = forwardRef<SVGSVGElement, { schema: IconSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
-    // Extract designer-related props
-    const { 
-      'data-obj-id': dataObjId, 
-      'data-obj-type': dataObjType,
-      style,
-      ...iconProps
-    } = props;
-    
-    // Convert icon name to PascalCase for Lucide lookup
-    const iconName = toPascalCase(schema.name);
-    // Apply icon name mapping for renamed icons
-    const mappedIconName = iconNameMap[iconName] || iconName;
-    const Icon = (icons as any)[mappedIconName];
-    
-    if (!Icon) {
-      console.warn(`Icon "${schema.name}" (lookup: "${iconName}"${mappedIconName !== iconName ? ` -> "${mappedIconName}"` : ''}) not found in lucide-react`);
-      return null;
-    }
-    
-    // Build size style
-    const sizeStyle = schema.size ? { width: schema.size, height: schema.size } : undefined;
-    
-    // Merge classNames: schema color, schema className, prop className
-    const mergedClassName = cn(
-      schema.color,
-      schema.className,
-      className
-    );
-    
-    return (
-      <Icon 
-        ref={ref} 
-        className={mergedClassName}
-        style={{ ...sizeStyle, ...style }}
-        {...iconProps}
-        // Apply designer props
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType }}
-      />
-    );
-  }
-);
-
-IconRenderer.displayName = 'IconRenderer';
-
-ComponentRegistry.register('icon',
-  IconRenderer,
-  {
-    namespace: 'ui',
-    label: 'Icon',
-    icon: 'smile',
-    category: 'basic',
-    inputs: [
-      { name: 'name', type: 'string', label: 'Icon Name', defaultValue: 'smile' },
-      { name: 'size', type: 'number', label: 'Size (px)' },
-      { name: 'color', type: 'string', label: 'Color Class' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ]
-  }
-);

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' }
-      ]
-    }
-  }
-);