@object-ui/components 0.5.0 → 2.0.0

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

@@ -0,0 +1,147 @@
+/**
+ * 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 };
+  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,
+      ...rest
+    } = props;
+
+    const { execute } = useAction();
+    const [loading, setLoading] = useState(false);
+
+    // Evaluate visibility and enabled conditions
+    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
+    const isEnabled = useCondition(schema.enabled ? `\${${schema.enabled}}` : undefined);
+
+    // 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 {
+        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;
+
+    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

@@ -0,0 +1,270 @@
+/**
+ * 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

@@ -0,0 +1,150 @@
+/**
+ * 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',
+  },
+});