Configuration

/**
 * Configure global action behavior
 * @param options - Configuration options to apply globally
 */
function configureActions(options?: ActionOptions): void;

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;
}

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

// Configure global settings
configureActions({
  depth: 5,
  limit: 100,
  clearOnStoryChange: false
});

// All subsequent actions use these settings
const handler = action('my-action'); // Uses depth: 5, limit: 100
const handlers = actions('onClick', 'onSubmit'); // Uses global config

/**
 * Global configuration interface for actions
 */
interface ActionOptions {
  /** 
   * Maximum depth for object serialization
   * Controls how deeply nested objects are displayed in the actions panel
   * Higher values show more detail but may impact performance
   * @default 10
   */
  depth?: number;
  
  /** 
   * Whether to clear the actions panel when navigating between stories
   * @default true
   */
  clearOnStoryChange?: boolean;
  
  /** 
   * Maximum number of action entries to keep in memory
   * Older actions are removed when this limit is exceeded
   * @default 50
   */
  limit?: number;
  
  /** 
   * Internal flag for implicitly created actions
   * Set automatically when actions are created via argTypesRegex
   * @default false
   */
  implicit?: boolean;
  
  /** 
   * Custom identifier for tracking actions
   * Used internally by Storybook's action system
   */
  id?: string;
}

/**
 * Storybook parameters interface for actions addon
 */
interface ActionsParameters {
  actions: {
    /** 
     * Regular expression to automatically create actions for matching arg names
     * Useful for components with many event handlers
     * @example '^on.*' - Creates actions for all props starting with 'on'
     */
    argTypesRegex?: string;
    
    /** 
     * Disable the actions addon entirely for this story/component
     * @default false
     */
    disable?: boolean;
    
    /** 
     * Array of DOM event handlers to bind automatically
     * Format: 'eventname selector' where selector is optional
     * @example ['click', 'mouseover .button', 'keydown input']
     */
    handles?: string[];
  };
}

// .storybook/preview.js
import { configureActions } from '@storybook/addon-actions';

configureActions({
  depth: 8,
  limit: 150,
  clearOnStoryChange: true
});

export const parameters = {
  actions: {
    argTypesRegex: '^on[A-Z].*', // Auto-create actions for props like onClick, onSubmit
  },
};

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

export default {
  title: 'Example/Button',
  parameters: {
    actions: {
      disable: false, // Ensure actions are enabled
      handles: ['click', 'mouseover .btn'] // Bind DOM events
    }
  }
};

export const Primary = {
  args: {
    onClick: action('button-click', { depth: 15 }) // Override global depth
  }
};

// Story configuration
export default {
  title: 'Form/ContactForm',
  parameters: {
    actions: {
      // Automatically create actions for all props starting with 'on'
      argTypesRegex: '^on[A-Z].*'
    }
  }
};

// Component will automatically get actions for:
// onClick, onSubmit, onFocus, onBlur, onChange, etc.
export const ContactForm = {};

export default {
  title: 'Interactive/Widget',
  parameters: {
    actions: {
      handles: [
        'click',              // Bind click on all elements
        'mouseover .button',  // Bind mouseover on .button elements
        'keydown input',      // Bind keydown on input elements
        'submit form'         // Bind submit on form elements
      ]
    }
  }
};

// .storybook/preview.js
import { configureActions } from '@storybook/addon-actions';

const isDevelopment = process.env.NODE_ENV === 'development';

configureActions({
  depth: isDevelopment ? 10 : 3,        // More detail in dev
  limit: isDevelopment ? 200 : 50,      // More history in dev
  clearOnStoryChange: !isDevelopment    // Persist actions in dev
});

// For components with deep object props
export const DataVisualization = {
  args: {
    onDataUpdate: action('data-update', { depth: 20 })
  }
};

// For performance-critical components  
export const HighFrequencyUpdates = {
  args: {
    onUpdate: action('update', { limit: 10 })
  }
};

// Disable actions in production builds
const shouldCreateActions = process.env.NODE_ENV !== 'production';

export const MyStory = {
  parameters: {
    actions: {
      disable: !shouldCreateActions
    }
  }
};