0
# Storybook Addon Actions
1

2
**⚠️ 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.**
3

4
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.
5

6
## Package Information
7

8
- **Package Name**: @storybook/addon-actions  
9
- **Package Type**: npm
10
- **Language**: TypeScript
11
- **Installation**: ~~`npm install @storybook/addon-actions`~~ (Deprecated)
12
- **Migration**: Follow [Storybook 9.0 Migration Guide](https://storybook.js.org/docs/9/migration-guide#package-structure-changes)
13

14
## Current State (v9.0.8+)
15

16
**All entry points now throw the following error:**
17

18
```typescript
19
throw new Error(
20
  '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'
21
);
22
```
23

24
## Migration Path
25

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

28
- Remove `@storybook/addon-actions` from dependencies
29
- Remove from `.storybook/main.js` addons array  
30
- Import `fn` function from `@storybook/test` instead
31
- Use built-in actions panel (no configuration needed)
32

33
```typescript
34
// Before (deprecated)
35
import { action } from '@storybook/addon-actions';
36

37
// After (Storybook 9.0+)  
38
import { fn } from '@storybook/test';
39
```
40

41
## Legacy API Documentation (Pre-9.0)
42

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

45
### Core Imports (Legacy)
46

47
```typescript
48
import { action, actions, configureActions } from "@storybook/addon-actions";
49
```
50

51
CommonJS:
52

53
```javascript
54
const { action, actions, configureActions } = require("@storybook/addon-actions");
55
```
56

57
### Basic Usage (Legacy)
58

59
```typescript
60
import { action, actions } from "@storybook/addon-actions";
61

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

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

68
// Use in component
69
export const ButtonStory = {
70
  args: {
71
    onClick: handleClick,
72
    onSubmit: handlers.onSubmit,
73
  },
74
};
75
```
76

77
## Architecture (Legacy)
78

79
The addon was built around several key components:
80

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

87
## Capabilities (Legacy)
88

89
### Single Action Creation
90

91
Create individual action handlers for component events and callbacks.
92

93
```typescript { .api }
94
function action(name: string, options?: ActionOptions): HandlerFunction;
95
```
96

97
[Action Creation](./action-creation.md)
98

99
### Multiple Action Creation  
100

101
Create multiple action handlers from string names or configuration objects.
102

103
```typescript { .api }
104
function actions<T extends string>(
105
  ...handlers: T[]
106
): ActionsMap<T>;
107

108
function actions<T extends string>(
109
  handlerMap: Record<T, string>, 
110
  options?: ActionOptions
111
): ActionsMap<T>;
112
```
113

114
[Actions Creation](./actions-creation.md)
115

116
### Configuration
117

118
Global configuration for action behavior and display options.
119

120
```typescript { .api }
121
function configureActions(options?: ActionOptions): void;
122

123
interface ActionOptions extends Partial<TelejsonOptions> {
124
  depth?: number;
125
  clearOnStoryChange?: boolean; 
126
  limit?: number;
127
  implicit?: boolean;
128
  id?: string;
129
}
130
```
131

132
[Configuration](./configuration.md)
133

134
## Types (Legacy)
135

136
```typescript { .api }
137
type HandlerFunction = (...args: any[]) => void;
138

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

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

143
interface ActionDisplay {
144
  id: string;
145
  data: {
146
    name: string;
147
    args: any[];
148
  };
149
  count: number;
150
  options: ActionOptions;
151
}
152

153
interface ActionsParameters {
154
  actions: {
155
    argTypesRegex?: string;
156
    disable?: boolean;
157
    handles?: string[];
158
  };
159
}
160
```
161

162
## Constants (Legacy)
163

164
```typescript { .api }
165
/** Parameter key for actions configuration */
166
const PARAM_KEY = 'actions';
167

168
/** Addon identifier */
169
const ADDON_ID = 'storybook/actions';
170

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

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

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

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