Action Creation

/**
 * Create a single action handler that logs events to the Storybook actions panel
 * @param name - Display name for the action in the actions panel
 * @param options - Optional configuration for action behavior
 * @returns Handler function that logs calls with arguments
 */
function action(name: string, options?: ActionOptions): HandlerFunction;

interface ActionOptions extends Partial<TelejsonOptions> {
  /** Maximum depth for object serialization (default: 10) */
  depth?: number;
  /** Whether to clear actions when story changes (default: true) */
  clearOnStoryChange?: boolean;
  /** Maximum number of actions to store (default: 50) */
  limit?: number;
  /** Whether the action is created implicitly via argTypesRegex (default: false) */
  implicit?: boolean;
  /** Custom identifier for the action */
  id?: string;
}

type HandlerFunction = (...args: any[]) => void;

import { action } from "@storybook/addon-actions";

// Basic action
const handleClick = action('button-click');

// Action with options
const handleSubmit = action('form-submit', {
  depth: 3,
  limit: 100
});

// Use in story
export const ButtonStory = {
  args: {
    onClick: handleClick,
    onSubmit: handleSubmit,
  },
};

// Action will log when called
handleClick({ target: 'button', data: 'some data' });
// Displays in actions panel: "button-click" with logged arguments

/**
 * Configuration options for action behavior
 */
interface ActionOptions {
  /** 
   * Maximum depth for object serialization when displaying arguments
   * Prevents infinite recursion with circular references
   * @default 10
   */
  depth?: number;
  
  /** 
   * Whether to clear the actions panel when navigating to a new story
   * @default true
   */
  clearOnStoryChange?: boolean;
  
  /** 
   * Maximum number of action entries to keep in the panel
   * Older entries are removed when limit is exceeded
   * @default 50
   */
  limit?: number;
  
  /** 
   * Internal flag indicating the action was created automatically
   * via argTypesRegex parameter matching
   * @default false
   */
  implicit?: boolean;
  
  /** 
   * Custom identifier for the action, used internally for tracking
   */
  id?: string;
}

/**
 * Function signature for action handlers
 * Accepts any number of arguments and returns void
 */
type HandlerFunction = (...args: any[]) => void;

// Shallow serialization for complex objects
const handleDataUpdate = action('data-update', { depth: 2 });

// Deep serialization for detailed logging
const handleAnalytics = action('analytics-event', { depth: 15 });

const handleFormEvent = action('form-event');

// Will properly serialize React synthetic events
<form onSubmit={handleFormEvent}>
  <input onChange={handleFormEvent} />
</form>

// In Storybook 8+ with strict mode, actions during rendering show warnings
// In future versions, they may throw errors to prevent anti-patterns
const implicitAction = action('render-action', { implicit: true });