or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

action-creation.mdactions-creation.mdconfiguration.mdindex.md
tile.json

tessl/npm-storybook--addon-actions

Deprecated Storybook addon that previously provided component interaction logging; now directs users to Storybook 9.0+ migration guide

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/addon-actions@9.0.x

To install, run

npx @tessl/cli install tessl/npm-storybook--addon-actions@9.0.0

index.mddocs/

Storybook Addon Actions

⚠️ DEPRECATION NOTICE: This package is deprecated in Storybook 9.0 and above. It has been moved into @storybook/core and no longer requires separate installation.

This package previously provided logging and display functionality for component interactions in Storybook. In current versions (9.0.8+), it only throws migration errors directing users to upgrade their Storybook configuration.

Package Information

  • Package Name: @storybook/addon-actions
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/addon-actions (Deprecated)
  • Migration: Follow Storybook 9.0 Migration Guide

Current State (v9.0.8+)

All entry points now throw the following error:

throw new Error(
  'Your Storybook project is referring to package @storybook/addon-actions, which no longer exists in Storybook 9.0 and above. Please refer to the Storybook 9 migration guide for instructions on how to fix this issue: https://storybook.js.org/docs/9/migration-guide#package-structure-changes'
);

Migration Path

In Storybook 9.0+, actions functionality is built-in:

  • Remove @storybook/addon-actions from dependencies
  • Remove from .storybook/main.js addons array
  • Import fn function from @storybook/test instead
  • Use built-in actions panel (no configuration needed)
// Before (deprecated)
import { action } from '@storybook/addon-actions';

// After (Storybook 9.0+)  
import { fn } from '@storybook/test';

Legacy API Documentation (Pre-9.0)

The following documents the API that existed before deprecation for reference purposes.

Core Imports (Legacy)

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

CommonJS:

const { action, actions, configureActions } = require("@storybook/addon-actions");

Basic Usage (Legacy)

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

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

// Create multiple actions  
const handlers = actions('onSubmit', 'onCancel', 'onFocus');

// Use in component
export const ButtonStory = {
  args: {
    onClick: handleClick,
    onSubmit: handlers.onSubmit,
  },
};

Architecture (Legacy)

The addon was built around several key components:

  • Action Creator: action() function for creating individual action handlers
  • Bulk Creator: actions() function for creating multiple handlers at once
  • Configuration: Global settings via configureActions()
  • Event System: Channel-based communication with Storybook UI
  • Serialization: Safe serialization of action arguments for display

Capabilities (Legacy)

Single Action Creation

Create individual action handlers for component events and callbacks.

function action(name: string, options?: ActionOptions): HandlerFunction;

Action Creation

Multiple Action Creation

Create multiple action handlers from string names or configuration objects.

function actions<T extends string>(
  ...handlers: T[]
): ActionsMap<T>;

function actions<T extends string>(
  handlerMap: Record<T, string>, 
  options?: ActionOptions
): ActionsMap<T>;

Actions Creation

Configuration

Global configuration for action behavior and display options.

function configureActions(options?: ActionOptions): void;

interface ActionOptions extends Partial<TelejsonOptions> {
  depth?: number;
  clearOnStoryChange?: boolean; 
  limit?: number;
  implicit?: boolean;
  id?: string;
}

Configuration

Types (Legacy)

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

type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;

type DecoratorFunction = (args: any[]) => any[];

interface ActionDisplay {
  id: string;
  data: {
    name: string;
    args: any[];
  };
  count: number;
  options: ActionOptions;
}

interface ActionsParameters {
  actions: {
    argTypesRegex?: string;
    disable?: boolean;
    handles?: string[];
  };
}

Constants (Legacy)

/** Parameter key for actions configuration */
const PARAM_KEY = 'actions';

/** Addon identifier */
const ADDON_ID = 'storybook/actions';

/** Panel identifier for the actions panel */
const PANEL_ID = 'storybook/actions/panel';

/** Event identifier for action communication */
const EVENT_ID = 'storybook/actions/action-event';

/** Event identifier for clearing actions */
const CLEAR_ID = 'storybook/actions/action-clear';

/** Key used to mark cyclic object references */
const CYCLIC_KEY = '$___storybook.isCyclic';