0
# Actions Creation
1

2
**⚠️ DEPRECATED: This functionality has been moved to `@storybook/test` in Storybook 9.0+**
3

4
Multiple action creation functionality for creating several event handlers at once, reducing boilerplate when components have many event callbacks.
5

6
## Capabilities
7

8
### Actions Function
9

10
Creates multiple action handlers from string names or configuration objects.
11

12
```typescript { .api }
13
/**
14
 * Create multiple action handlers from string names
15
 * @param handlers - Variable number of action names
16
 * @returns Object mapping each name to its handler function
17
 */
18
function actions<T extends string>(...handlers: T[]): ActionsMap<T>;
19

20
/**
21
 * Create multiple action handlers from a configuration object
22
 * @param handlerMap - Object mapping action names to display names
23
 * @param options - Optional configuration for all actions
24
 * @returns Object mapping each name to its handler function
25
 */
26
function actions<T extends string>(
27
  handlerMap: Record<T, string>, 
28
  options?: ActionOptions
29
): ActionsMap<T>;
30

31
/**
32
 * Overloaded signatures for specific numbers of handlers (1-10)
33
 * Provides better type safety for common use cases
34
 */
35
function actions<T extends string>(handler1: T, options?: ActionOptions): ActionsMap<T>;
36
function actions<T extends string>(handler1: T, handler2: T, options?: ActionOptions): ActionsMap<T>;
37
// ... up to 10 handlers
38

39
type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;
40
type HandlerFunction = (...args: any[]) => void;
41
```
42

43
**Usage Examples:**
44

45
```typescript
46
import { actions } from "@storybook/addon-actions";
47

48
// Create from string list
49
const handlers = actions('onClick', 'onFocus', 'onBlur', 'onSubmit');
50

51
// Create from object with custom display names
52
const formHandlers = actions({
53
  onSubmit: 'form-submission',
54
  onReset: 'form-reset', 
55
  onValidate: 'form-validation'
56
});
57

58
// Create with global options
59
const debugHandlers = actions('onMount', 'onUpdate', 'onUnmount', {
60
  depth: 5,
61
  limit: 200
62
});
63

64
// Use in story
65
export const FormStory = {
66
  args: {
67
    onClick: handlers.onClick,
68
    onFocus: handlers.onFocus,
69
    onSubmit: formHandlers.onSubmit,
70
  },
71
};
72
```
73

74
### String Array Pattern
75

76
Create actions by passing action names as separate arguments.
77

78
```typescript { .api }
79
/**
80
 * Create actions from individual string arguments
81
 * Each string becomes both the property name and display name
82
 * @param handlers - Action names as separate arguments
83
 * @returns ActionsMap with each name mapped to its handler
84
 */
85
function actions<T extends string>(...handlers: T[]): ActionsMap<T>;
86
```
87

88
**Usage:**
89

90
```typescript
91
// Simple usage
92
const { onClick, onHover, onFocus } = actions('onClick', 'onHover', 'onFocus');
93

94
// Equivalent to:
95
// {
96
//   onClick: action('onClick'),
97
//   onHover: action('onHover'), 
98
//   onFocus: action('onFocus')
99
// }
100

101
// Array destructuring
102
const [click, hover, focus] = Object.values(
103
  actions('onClick', 'onHover', 'onFocus')
104
);
105
```
106

107
### Object Mapping Pattern
108

109
Create actions from an object where keys are property names and values are display names.
110

111
```typescript { .api }
112
/**
113
 * Create actions from object mapping
114
 * @param handlerMap - Object with property names as keys, display names as values
115
 * @param options - Optional configuration applied to all actions
116
 * @returns ActionsMap with property names mapped to handlers
117
 */
118
function actions<T extends string>(
119
  handlerMap: Record<T, string>, 
120
  options?: ActionOptions
121
): ActionsMap<T>;
122
```
123

124
**Usage:**
125

126
```typescript
127
// Custom display names
128
const handlers = actions({
129
  onClick: 'user-clicked-button',
130
  onSubmit: 'user-submitted-form',
131
  onCancel: 'user-cancelled-action'
132
});
133

134
// With options
135
const debugHandlers = actions({
136
  onMount: 'component-mounted',
137
  onUpdate: 'component-updated'
138
}, {
139
  depth: 8,
140
  clearOnStoryChange: false
141
});
142
```
143

144
### Single Array Argument Pattern
145

146
Alternative syntax using array as first argument.
147

148
```typescript { .api }
149
/**
150
 * Create actions from array of names
151
 * @param names - Array containing action names
152
 * @returns ActionsMap with each name mapped to its handler
153
 */
154
function actions<T extends string>(names: T[]): ActionsMap<T>;
155
```
156

157
**Usage:**
158

159
```typescript
160
// Array syntax
161
const eventNames = ['onClick', 'onFocus', 'onBlur'] as const;
162
const handlers = actions(eventNames);
163

164
// Dynamic action creation
165
const createHandlers = (events: string[]) => actions(events);
166
```
167

168
## Type Safety
169

170
The actions function provides full TypeScript type safety:
171

172
```typescript
173
// Type-safe property access
174
const handlers = actions('onClick', 'onSubmit', 'onCancel');
175
// handlers.onClick - ✓ exists
176
// handlers.onMissing - ✗ TypeScript error
177

178
// Preserves string literal types
179
const specificHandlers = actions('buttonClick' as const, 'formSubmit' as const);
180
type HandlerKeys = keyof typeof specificHandlers; // 'buttonClick' | 'formSubmit'
181
```
182

183
## Performance Considerations
184

185
```typescript
186
// Efficient: Create once, reuse
187
const FORM_ACTIONS = actions('onSubmit', 'onReset', 'onValidate');
188

189
export const FormStory = {
190
  args: FORM_ACTIONS
191
};
192

193
// Less efficient: Creating on every render
194
export const BadFormStory = {
195
  args: actions('onSubmit', 'onReset', 'onValidate') // Creates new functions each time
196
};
197
```