@object-ui/components 0.3.1 → 2.0.0

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

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

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

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

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

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

@@ -47,6 +47,7 @@ ComponentRegistry.register('button-group',
     );
   },
   {
+    namespace: 'ui',
     label: 'Button Group',
     inputs: [
       {