@object-ui/components 3.1.5 → 3.3.1

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

@@ -1,158 +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:button — Smart action button driven by ActionSchema.
- *
- * Renders a Shadcn Button wired to the ActionRunner. Supports:
- * - All 5 spec action types (script, url, modal, flow, api)
- * - Conditional visibility & enabled state
- * - Loading indicator during async execution
- * - Icon rendering via Lucide
- * - Variant / size / className overrides from schema
- */
-
-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 { cn } from '../../lib/utils';
-import { Loader2 } from 'lucide-react';
-import { resolveIcon } from './resolve-icon';
-
-export interface ActionButtonProps {
-  schema: ActionSchema & { type: string; className?: string; actionType?: string };
-  className?: string;
-  /** Override context for this specific action */
-  context?: Record<string, any>;
-  [key: string]: any;
-}
-
-const ActionButtonRenderer = forwardRef<HTMLButtonElement, ActionButtonProps>(
-  ({ schema, className, context: localContext, ...props }, ref) => {
-    const {
-      'data-obj-id': dataObjId,
-      'data-obj-type': dataObjType,
-      style,
-      data,
-      ...rest
-    } = props;
-
-    const { execute } = useAction();
-    const [loading, setLoading] = useState(false);
-
-    // Record data may be passed from SchemaRenderer (e.g. DetailView passes record data)
-    const recordData = data != null && typeof data === 'object' ? data as Record<string, any> : {};
-
-    // Evaluate visibility and enabled conditions with record data context
-    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined, recordData);
-    const isEnabled = useCondition(schema.enabled ? `\${${schema.enabled}}` : undefined, recordData);
-
-    // Resolve icon
-    const Icon = resolveIcon(schema.icon);
-
-    // Map schema variant to Shadcn button variant
-    const variant = schema.variant === 'primary' ? 'default' : (schema.variant || 'default');
-    const size = schema.size === 'md' ? 'default' : (schema.size || 'default');
-
-    const handleClick = useCallback(async () => {
-      if (loading) return;
-      setLoading(true);
-
-      try {
-        // Route params correctly:
-        // - Array of objects with name+type → ActionParamDef[] → pass as actionParams for collection
-        // - Otherwise → pass as actual param values
-        const paramsPayload = Array.isArray(schema.params)
-          ? { actionParams: schema.params as any }
-          : { params: schema.params as Record<string, any> | undefined };
-
-        await execute({
-          type: schema.actionType || schema.type,
-          name: schema.name,
-          target: schema.target,
-          execute: schema.execute,
-          endpoint: schema.endpoint,
-          method: schema.method,
-          ...paramsPayload,
-          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;
-
-    return (
-      <Button
-        ref={ref}
-        type="button"
-        variant={variant as any}
-        size={size as any}
-        className={cn(schema.className, className)}
-        disabled={(schema.enabled ? !isEnabled : false) || loading}
-        onClick={handleClick}
-        {...rest}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-        {!loading && Icon && <Icon className={cn('h-4 w-4', schema.label && 'mr-2')} />}
-        {schema.label}
-      </Button>
-    );
-  },
-);
-
-ActionButtonRenderer.displayName = 'ActionButtonRenderer';
-
-ComponentRegistry.register('action:button', ActionButtonRenderer, {
-  namespace: 'action',
-  label: 'Action Button',
-  inputs: [
-    { name: 'name', type: 'string', label: 'Action Name' },
-    { name: 'label', type: 'string', label: 'Label', defaultValue: 'Action' },
-    { 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', 'primary', 'secondary', 'destructive', 'outline', 'ghost'],
-      defaultValue: 'default',
-    },
-    {
-      name: 'size',
-      type: 'enum',
-      label: 'Size',
-      enum: ['sm', 'md', 'lg'],
-      defaultValue: 'md',
-    },
-    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
-  ],
-  defaultProps: {
-    label: 'Action',
-    type: 'script',
-    variant: 'default',
-    size: 'md',
-  },
-});

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

@@ -1,270 +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:group — Toolbar or button group for organizing related actions.
- *
- * Supports two display modes:
- * - 'inline': Renders all actions as a horizontal button row
- * - 'dropdown': Renders a primary button + dropdown for overflow
- *
- * Filters actions by location when `location` prop is provided.
- */
-
-import React, { forwardRef, useCallback, useState } from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import type { ActionSchema, ActionGroup, ActionLocation } 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, ChevronDown } from 'lucide-react';
-import { resolveIcon } from './resolve-icon';
-
-export interface ActionGroupSchema {
-  type: 'action:group';
-  /** Group name */
-  name?: string;
-  /** Group label */
-  label?: string;
-  /** Group icon */
-  icon?: string;
-  /** Actions in this group */
-  actions?: ActionSchema[];
-  /** Display mode: inline button row or dropdown */
-  display?: 'dropdown' | 'inline';
-  /** Filter actions by location */
-  location?: ActionLocation;
-  /** Group visibility condition */
-  visible?: string;
-  /** Button variant for inline actions */
-  variant?: string;
-  /** Button size for inline actions */
-  size?: string;
-  /** Custom CSS class */
-  className?: string;
-  [key: string]: any;
-}
-
-/**
- * Inline action button within a group.
- */
-const InlineActionButton: React.FC<{
-  action: ActionSchema;
-  variant?: string;
-  size?: string;
-  onExecute: (action: ActionSchema) => Promise<void>;
-}> = ({ action, variant, size, onExecute }) => {
-  const [loading, setLoading] = useState(false);
-  const isVisible = useCondition(action.visible ? `\${${action.visible}}` : undefined);
-  const isEnabled = useCondition(action.enabled ? `\${${action.enabled}}` : undefined);
-
-  const Icon = resolveIcon(action.icon);
-  const btnVariant = (action.variant as string) === 'primary' ? 'default' : (action.variant || variant || 'outline');
-  const btnSize = action.size === 'md' ? 'default' : (action.size || size || 'sm');
-
-  const handleClick = useCallback(async () => {
-    if (loading) return;
-    setLoading(true);
-    try {
-      await onExecute(action);
-    } finally {
-      setLoading(false);
-    }
-  }, [action, onExecute, loading]);
-
-  if (action.visible && !isVisible) return null;
-
-  return (
-    <Button
-      type="button"
-      variant={btnVariant as any}
-      size={btnSize as any}
-      className={action.className}
-      disabled={(action.enabled ? !isEnabled : false) || loading}
-      onClick={handleClick}
-    >
-      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-      {!loading && Icon && <Icon className={cn('h-4 w-4', action.label && 'mr-2')} />}
-      {action.label}
-    </Button>
-  );
-};
-
-InlineActionButton.displayName = 'InlineActionButton';
-
-const ActionGroupRenderer = forwardRef<HTMLDivElement, { schema: ActionGroupSchema; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
-    const {
-      'data-obj-id': dataObjId,
-      'data-obj-type': dataObjType,
-      style,
-      ...rest
-    } = props;
-
-    const { execute } = useAction();
-    const [dropdownLoading, setDropdownLoading] = useState(false);
-
-    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
-
-    // Filter actions by location if specified
-    let actions = schema.actions || [];
-    if (schema.location) {
-      actions = actions.filter(
-        a => !a.locations || a.locations.includes(schema.location!),
-      );
-    }
-
-    const handleExecute = useCallback(
-      async (action: ActionSchema) => {
-        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,
-        });
-      },
-      [execute],
-    );
-
-    if (schema.visible && !isVisible) return null;
-    if (actions.length === 0) return null;
-
-    const display = schema.display || 'inline';
-
-    // --- DROPDOWN MODE ---
-    if (display === 'dropdown') {
-      const TriggerIcon = resolveIcon(schema.icon);
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant={(schema.variant || 'outline') as any}
-              size={(schema.size === 'md' ? 'default' : (schema.size || 'default')) as any}
-              className={cn(schema.className, className)}
-              disabled={dropdownLoading}
-              {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-            >
-              {dropdownLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              {!dropdownLoading && TriggerIcon && <TriggerIcon className="mr-2 h-4 w-4" />}
-              {schema.label || 'Actions'}
-              <ChevronDown className="ml-2 h-3 w-3 opacity-50" />
-            </Button>
-          </DropdownMenuTrigger>
-
-          <DropdownMenuContent align="end">
-            {actions.map((action, index) => {
-              const Icon = resolveIcon(action.icon);
-              const showSeparator = action.tags?.includes('separator-before') && index > 0;
-              return (
-                <React.Fragment key={action.name || index}>
-                  {showSeparator && <DropdownMenuSeparator />}
-                  <DropdownMenuItem
-                    onSelect={async (e) => {
-                      e.preventDefault();
-                      setDropdownLoading(true);
-                      try {
-                        await handleExecute(action);
-                      } finally {
-                        setDropdownLoading(false);
-                      }
-                    }}
-                    className={cn(
-                      action.variant === 'destructive' && 'text-destructive focus:text-destructive',
-                      action.className,
-                    )}
-                  >
-                    {Icon && <Icon className="mr-2 h-4 w-4" />}
-                    <span>{action.label || action.name}</span>
-                  </DropdownMenuItem>
-                </React.Fragment>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    }
-
-    // --- INLINE MODE (default) ---
-    return (
-      <div
-        ref={ref}
-        className={cn('flex items-center gap-2', schema.className, className)}
-        {...rest}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {actions.map((action) => (
-          <InlineActionButton
-            key={action.name}
-            action={action}
-            variant={schema.variant}
-            size={schema.size}
-            onExecute={handleExecute}
-          />
-        ))}
-      </div>
-    );
-  },
-);
-
-ActionGroupRenderer.displayName = 'ActionGroupRenderer';
-
-ComponentRegistry.register('action:group', ActionGroupRenderer, {
-  namespace: 'action',
-  label: 'Action Group',
-  inputs: [
-    { name: 'name', type: 'string', label: 'Group Name' },
-    { name: 'label', type: 'string', label: 'Label' },
-    { name: 'icon', type: 'string', label: 'Icon' },
-    { name: 'actions', type: 'object', label: 'Actions' },
-    {
-      name: 'display',
-      type: 'enum',
-      label: 'Display Mode',
-      enum: ['inline', 'dropdown'],
-      defaultValue: 'inline',
-    },
-    {
-      name: 'variant',
-      type: 'enum',
-      label: 'Variant',
-      enum: ['default', 'secondary', 'outline', 'ghost'],
-      defaultValue: 'outline',
-    },
-    {
-      name: 'size',
-      type: 'enum',
-      label: 'Size',
-      enum: ['sm', 'md', 'lg'],
-      defaultValue: 'sm',
-    },
-    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
-  ],
-  defaultProps: {
-    display: 'inline',
-    variant: 'outline',
-    size: 'sm',
-    actions: [],
-  },
-});

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