@object-ui/components 3.3.0 → 3.3.1

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

@@ -1,150 +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:icon — Icon-only action button for dense layouts.
- *
- * Renders a Shadcn Button (size="icon") with tooltip and ActionRunner integration.
- */
-
-import React, { forwardRef, useCallback, 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui';
-import { cn } from '../../lib/utils';
-import { Loader2 } from 'lucide-react';
-import { resolveIcon } from './resolve-icon';
-
-export interface ActionIconProps {
-  schema: ActionSchema & { type: string; className?: string };
-  className?: string;
-  context?: Record<string, any>;
-  [key: string]: any;
-}
-
-const ActionIconRenderer = forwardRef<HTMLButtonElement, ActionIconProps>(
-  ({ schema, className, context: localContext, ...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 isEnabled = useCondition(schema.enabled ? `\${${schema.enabled}}` : undefined);
-
-    const Icon = resolveIcon(schema.icon);
-    const variant = schema.variant === 'primary' ? 'default' : (schema.variant || 'ghost');
-    const size = 'icon';
-
-    const handleClick = useCallback(async () => {
-      if (loading) return;
-      setLoading(true);
-      try {
-        await execute({
-          type: schema.type,
-          name: schema.name,
-          target: schema.target,
-          execute: schema.execute,
-          endpoint: schema.endpoint,
-          method: schema.method,
-          params: schema.params as Record<string, any> | undefined,
-          confirmText: schema.confirmText,
-          successMessage: schema.successMessage,
-          errorMessage: schema.errorMessage,
-          refreshAfter: schema.refreshAfter,
-          toast: schema.toast,
-          ...localContext,
-        });
-      } finally {
-        setLoading(false);
-      }
-    }, [schema, execute, loading, localContext]);
-
-    if (schema.visible && !isVisible) return null;
-
-    const button = (
-      <Button
-        ref={ref}
-        type="button"
-        variant={variant as any}
-        size={size}
-        className={cn('h-8 w-8', schema.className, className)}
-        disabled={(schema.enabled ? !isEnabled : false) || loading}
-        onClick={handleClick}
-        aria-label={schema.label || schema.name}
-        {...rest}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {loading ? (
-          <Loader2 className="h-4 w-4 animate-spin" />
-        ) : Icon ? (
-          <Icon className="h-4 w-4" />
-        ) : (
-          <span className="text-xs">{schema.label?.charAt(0) || '?'}</span>
-        )}
-      </Button>
-    );
-
-    // Wrap with tooltip if label is provided
-    if (schema.label || schema.description) {
-      return (
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>{button}</TooltipTrigger>
-            <TooltipContent>
-              <p>{schema.label || schema.description}</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      );
-    }
-
-    return button;
-  },
-);
-
-ActionIconRenderer.displayName = 'ActionIconRenderer';
-
-ComponentRegistry.register('action:icon', ActionIconRenderer, {
-  namespace: 'action',
-  label: 'Action Icon',
-  inputs: [
-    { name: 'name', type: 'string', label: 'Action Name' },
-    { name: 'label', type: 'string', label: 'Tooltip Label' },
-    { name: 'icon', type: 'string', label: 'Icon' },
-    {
-      name: 'type',
-      type: 'enum',
-      label: 'Action Type',
-      enum: ['script', 'url', 'modal', 'flow', 'api'],
-      defaultValue: 'script',
-    },
-    { name: 'target', type: 'string', label: 'Target' },
-    {
-      name: 'variant',
-      type: 'enum',
-      label: 'Variant',
-      enum: ['default', 'secondary', 'destructive', 'outline', 'ghost'],
-      defaultValue: 'ghost',
-    },
-    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
-  ],
-  defaultProps: {
-    icon: 'play',
-    type: 'script',
-    variant: 'ghost',
-  },
-});

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