0
# Configuration
1

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

4
Global configuration for action behavior, display options, and parameter-based settings for automatic action creation.
5

6
## Capabilities
7

8
### Configure Actions
9

10
Set global defaults for all action handlers created after configuration.
11

12
```typescript { .api }
13
/**
14
 * Configure global action behavior
15
 * @param options - Configuration options to apply globally
16
 */
17
function configureActions(options?: ActionOptions): void;
18

19
interface ActionOptions extends Partial<TelejsonOptions> {
20
  /** Maximum depth for object serialization (default: 10) */
21
  depth?: number;
22
  /** Whether to clear actions when story changes (default: true) */
23
  clearOnStoryChange?: boolean;
24
  /** Maximum number of actions to store (default: 50) */
25
  limit?: number;
26
  /** Whether the action is created implicitly via argTypesRegex (default: false) */
27
  implicit?: boolean;
28
  /** Custom identifier for the action */
29
  id?: string;
30
}
31
```
32

33
**Usage Examples:**
34

35
```typescript
36
import { configureActions, action, actions } from "@storybook/addon-actions";
37

38
// Configure global settings
39
configureActions({
40
  depth: 5,
41
  limit: 100,
42
  clearOnStoryChange: false
43
});
44

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

50
### Global Configuration Options
51

52
Configure default behavior for all actions in your Storybook.
53

54
```typescript { .api }
55
/**
56
 * Global configuration interface for actions
57
 */
58
interface ActionOptions {
59
  /** 
60
   * Maximum depth for object serialization
61
   * Controls how deeply nested objects are displayed in the actions panel
62
   * Higher values show more detail but may impact performance
63
   * @default 10
64
   */
65
  depth?: number;
66
  
67
  /** 
68
   * Whether to clear the actions panel when navigating between stories
69
   * @default true
70
   */
71
  clearOnStoryChange?: boolean;
72
  
73
  /** 
74
   * Maximum number of action entries to keep in memory
75
   * Older actions are removed when this limit is exceeded
76
   * @default 50
77
   */
78
  limit?: number;
79
  
80
  /** 
81
   * Internal flag for implicitly created actions
82
   * Set automatically when actions are created via argTypesRegex
83
   * @default false
84
   */
85
  implicit?: boolean;
86
  
87
  /** 
88
   * Custom identifier for tracking actions
89
   * Used internally by Storybook's action system
90
   */
91
  id?: string;
92
}
93
```
94

95
### Storybook Parameters Configuration
96

97
Configure actions behavior through Storybook parameters for automatic action creation.
98

99
```typescript { .api }
100
/**
101
 * Storybook parameters interface for actions addon
102
 */
103
interface ActionsParameters {
104
  actions: {
105
    /** 
106
     * Regular expression to automatically create actions for matching arg names
107
     * Useful for components with many event handlers
108
     * @example '^on.*' - Creates actions for all props starting with 'on'
109
     */
110
    argTypesRegex?: string;
111
    
112
    /** 
113
     * Disable the actions addon entirely for this story/component
114
     * @default false
115
     */
116
    disable?: boolean;
117
    
118
    /** 
119
     * Array of DOM event handlers to bind automatically
120
     * Format: 'eventname selector' where selector is optional
121
     * @example ['click', 'mouseover .button', 'keydown input']
122
     */
123
    handles?: string[];
124
  };
125
}
126
```
127

128
## Configuration Patterns
129

130
### Global Setup
131

132
Configure actions once in your Storybook configuration:
133

134
```typescript
135
// .storybook/preview.js
136
import { configureActions } from '@storybook/addon-actions';
137

138
configureActions({
139
  depth: 8,
140
  limit: 150,
141
  clearOnStoryChange: true
142
});
143

144
export const parameters = {
145
  actions: {
146
    argTypesRegex: '^on[A-Z].*', // Auto-create actions for props like onClick, onSubmit
147
  },
148
};
149
```
150

151
### Per-Story Configuration
152

153
Override global settings for specific stories:
154

155
```typescript
156
import { action } from '@storybook/addon-actions';
157

158
export default {
159
  title: 'Example/Button',
160
  parameters: {
161
    actions: {
162
      disable: false, // Ensure actions are enabled
163
      handles: ['click', 'mouseover .btn'] // Bind DOM events
164
    }
165
  }
166
};
167

168
export const Primary = {
169
  args: {
170
    onClick: action('button-click', { depth: 15 }) // Override global depth
171
  }
172
};
173
```
174

175
### Automatic Action Creation
176

177
Use parameters to automatically create actions without manual setup:
178

179
```typescript
180
// Story configuration
181
export default {
182
  title: 'Form/ContactForm',
183
  parameters: {
184
    actions: {
185
      // Automatically create actions for all props starting with 'on'
186
      argTypesRegex: '^on[A-Z].*'
187
    }
188
  }
189
};
190

191
// Component will automatically get actions for:
192
// onClick, onSubmit, onFocus, onBlur, onChange, etc.
193
export const ContactForm = {};
194
```
195

196
### DOM Event Binding
197

198
Automatically bind DOM events to actions:
199

200
```typescript
201
export default {
202
  title: 'Interactive/Widget',
203
  parameters: {
204
    actions: {
205
      handles: [
206
        'click',              // Bind click on all elements
207
        'mouseover .button',  // Bind mouseover on .button elements
208
        'keydown input',      // Bind keydown on input elements
209
        'submit form'         // Bind submit on form elements
210
      ]
211
    }
212
  }
213
};
214
```
215

216
## Advanced Configuration
217

218
### Environment-Based Settings
219

220
```typescript
221
// .storybook/preview.js
222
import { configureActions } from '@storybook/addon-actions';
223

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

226
configureActions({
227
  depth: isDevelopment ? 10 : 3,        // More detail in dev
228
  limit: isDevelopment ? 200 : 50,      // More history in dev
229
  clearOnStoryChange: !isDevelopment    // Persist actions in dev
230
});
231
```
232

233
### Component-Specific Overrides
234

235
```typescript
236
// For components with deep object props
237
export const DataVisualization = {
238
  args: {
239
    onDataUpdate: action('data-update', { depth: 20 })
240
  }
241
};
242

243
// For performance-critical components  
244
export const HighFrequencyUpdates = {
245
  args: {
246
    onUpdate: action('update', { limit: 10 })
247
  }
248
};
249
```
250

251
### Conditional Action Creation
252

253
```typescript
254
// Disable actions in production builds
255
const shouldCreateActions = process.env.NODE_ENV !== 'production';
256

257
export const MyStory = {
258
  parameters: {
259
    actions: {
260
      disable: !shouldCreateActions
261
    }
262
  }
263
};
264
```