@object-ui/components 3.3.0 → 3.3.1

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

@@ -1,221 +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:bar — Location-aware action toolbar.
- *
- * Renders a set of ActionSchema items filtered by a given location.
- * Each action is rendered using its `component` type (action:button, action:icon,
- * action:menu, action:group) via the ComponentRegistry. Actions beyond the
- * `maxVisible` threshold are grouped into an overflow "More" dropdown.
- *
- * This is the "bridge" component that connects ActionSchema metadata to the UI,
- * enabling server-driven action rendering at list_toolbar, record_header,
- * list_item, record_more, record_related, and global_nav locations.
- *
- * @example
- * ```tsx
- * <SchemaRenderer schema={{
- *   type: 'action:bar',
- *   location: 'record_header',
- *   actions: [
- *     { name: 'mark_complete', label: 'Mark Complete', type: 'script', icon: 'check', component: 'action:button' },
- *     { name: 'delete', label: 'Delete', type: 'api', icon: 'trash-2', variant: 'destructive', component: 'action:button' },
- *   ],
- * }} />
- * ```
- */
-
-import React, { forwardRef, useMemo } from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import type { ActionSchema, ActionLocation, ActionComponent } from '@object-ui/types';
-import { useCondition } from '@object-ui/react';
-import { cn } from '../../lib/utils';
-import { useIsMobile } from '../../hooks/use-mobile';
-
-export interface ActionBarSchema {
-  type: 'action:bar';
-  /** Actions to render */
-  actions?: ActionSchema[];
-  /** Filter actions by this location */
-  location?: ActionLocation;
-  /** Maximum visible inline actions before overflow into "More" menu (default: 3) */
-  maxVisible?: number;
-  /** Maximum visible inline actions on mobile devices (default: 1). Desktop uses maxVisible instead. */
-  mobileMaxVisible?: number;
-  /** Visibility condition expression */
-  visible?: string;
-  /** Layout direction */
-  direction?: 'horizontal' | 'vertical';
-  /** Gap between items (Tailwind gap class, default: 'gap-2') */
-  gap?: string;
-  /** Button variant for all actions (can be overridden per-action) */
-  variant?: string;
-  /** Button size for all actions (can be overridden per-action) */
-  size?: string;
-  /** Custom CSS class */
-  className?: string;
-  [key: string]: any;
-}
-
-const ActionBarRenderer = forwardRef<HTMLDivElement, { schema: ActionBarSchema; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
-    const {
-      'data-obj-id': dataObjId,
-      'data-obj-type': dataObjType,
-      style,
-      data,
-      ...rest
-    } = props;
-
-    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
-    const isMobile = useIsMobile();
-
-    // Filter actions by location and deduplicate by name
-    const filteredActions = useMemo(() => {
-      const actions = schema.actions || [];
-      const located = !schema.location
-        ? actions
-        : actions.filter(
-            a => !a.locations || a.locations.length === 0 || a.locations.includes(schema.location!),
-          );
-      // Deduplicate by action name — keep first occurrence
-      const seen = new Set<string>();
-      return located.filter(a => {
-        if (!a.name) return true;
-        if (seen.has(a.name)) return false;
-        seen.add(a.name);
-        return true;
-      });
-    }, [schema.actions, schema.location]);
-
-    // Split into visible inline actions and overflow
-    // On mobile, show fewer actions inline (default: 1)
-    const maxVisible = isMobile
-      ? (schema.mobileMaxVisible ?? 1)
-      : (schema.maxVisible ?? 3);
-    const { inlineActions, overflowActions } = useMemo(() => {
-      if (filteredActions.length <= maxVisible) {
-        return { inlineActions: filteredActions, overflowActions: [] as ActionSchema[] };
-      }
-      return {
-        inlineActions: filteredActions.slice(0, maxVisible),
-        overflowActions: filteredActions.slice(maxVisible),
-      };
-    }, [filteredActions, maxVisible]);
-
-    if (schema.visible && !isVisible) return null;
-    if (filteredActions.length === 0) return null;
-
-    const direction = schema.direction || 'horizontal';
-    const gap = schema.gap || 'gap-2';
-
-    // Render overflow menu for excess actions
-    const MenuRenderer = overflowActions.length > 0 ? ComponentRegistry.get('action:menu') : null;
-    const overflowMenu = MenuRenderer ? (
-      <MenuRenderer
-        schema={{
-          type: 'action:menu' as const,
-          actions: overflowActions,
-          variant: schema.variant || 'ghost',
-          size: schema.size || 'sm',
-        }}
-      />
-    ) : null;
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex items-center',
-          direction === 'vertical' ? 'flex-col items-stretch' : 'flex-row flex-wrap',
-          gap,
-          schema.className,
-          className,
-        )}
-        role="toolbar"
-        aria-label="Actions"
-        {...rest}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {inlineActions.map((action) => {
-          const componentType: ActionComponent = action.component || 'action:button';
-          const Renderer = ComponentRegistry.get(componentType);
-          if (!Renderer) return null;
-
-          return (
-            <Renderer
-              key={action.name}
-              schema={{
-                ...action,
-                type: componentType,
-                actionType: action.type,
-                variant: action.variant || schema.variant,
-                size: action.size || schema.size,
-              }}
-              data={data}
-            />
-          );
-        })}
-
-        {overflowActions.length > 0 && overflowMenu}
-      </div>
-    );
-  },
-);
-
-ActionBarRenderer.displayName = 'ActionBarRenderer';
-
-ComponentRegistry.register('action:bar', ActionBarRenderer, {
-  namespace: 'action',
-  label: 'Action Bar',
-  inputs: [
-    { name: 'actions', type: 'object', label: 'Actions' },
-    {
-      name: 'location',
-      type: 'enum',
-      label: 'Location',
-      enum: ['list_toolbar', 'list_item', 'record_header', 'record_more', 'record_related', 'global_nav'],
-    },
-    {
-      name: 'maxVisible',
-      type: 'number',
-      label: 'Max Visible Actions',
-      defaultValue: 3,
-    },
-    {
-      name: 'direction',
-      type: 'enum',
-      label: 'Direction',
-      enum: ['horizontal', 'vertical'],
-      defaultValue: 'horizontal',
-    },
-    {
-      name: 'variant',
-      type: 'enum',
-      label: 'Default Variant',
-      enum: ['default', 'secondary', 'outline', 'ghost'],
-      defaultValue: 'outline',
-    },
-    {
-      name: 'size',
-      type: 'enum',
-      label: 'Default Size',
-      enum: ['sm', 'md', 'lg'],
-      defaultValue: 'sm',
-    },
-    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
-  ],
-  defaultProps: {
-    maxVisible: 3,
-    direction: 'horizontal',
-    variant: 'outline',
-    size: 'sm',
-    actions: [],
-  },
-});

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: [],
-  },
-});