CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--addon-actions

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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';
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/addon-actions@9.0.x
Publish Source
CLI
Badge
tessl/npm-storybook--addon-actions badge