0
# Action Creation
1

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

4
Single action creation functionality for creating individual event handlers that log interactions to the Storybook actions panel.
5

6
## Capabilities
7

8
### Action Function
9

10
Creates a single action handler that logs events with the specified name.
11

12
```typescript { .api }
13
/**
14
 * Create a single action handler that logs events to the Storybook actions panel
15
 * @param name - Display name for the action in the actions panel
16
 * @param options - Optional configuration for action behavior
17
 * @returns Handler function that logs calls with arguments
18
 */
19
function action(name: string, options?: ActionOptions): HandlerFunction;
20

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

34
type HandlerFunction = (...args: any[]) => void;
35
```
36

37
**Usage Examples:**
38

39
```typescript
40
import { action } from "@storybook/addon-actions";
41

42
// Basic action
43
const handleClick = action('button-click');
44

45
// Action with options
46
const handleSubmit = action('form-submit', {
47
  depth: 3,
48
  limit: 100
49
});
50

51
// Use in story
52
export const ButtonStory = {
53
  args: {
54
    onClick: handleClick,
55
    onSubmit: handleSubmit,
56
  },
57
};
58

59
// Action will log when called
60
handleClick({ target: 'button', data: 'some data' });
61
// Displays in actions panel: "button-click" with logged arguments
62
```
63

64
### Action Options Configuration
65

66
Configure how actions behave and display their data.
67

68
```typescript { .api }
69
/**
70
 * Configuration options for action behavior
71
 */
72
interface ActionOptions {
73
  /** 
74
   * Maximum depth for object serialization when displaying arguments
75
   * Prevents infinite recursion with circular references
76
   * @default 10
77
   */
78
  depth?: number;
79
  
80
  /** 
81
   * Whether to clear the actions panel when navigating to a new story
82
   * @default true
83
   */
84
  clearOnStoryChange?: boolean;
85
  
86
  /** 
87
   * Maximum number of action entries to keep in the panel
88
   * Older entries are removed when limit is exceeded
89
   * @default 50
90
   */
91
  limit?: number;
92
  
93
  /** 
94
   * Internal flag indicating the action was created automatically
95
   * via argTypesRegex parameter matching
96
   * @default false
97
   */
98
  implicit?: boolean;
99
  
100
  /** 
101
   * Custom identifier for the action, used internally for tracking
102
   */
103
  id?: string;
104
}
105
```
106

107
### Handler Function Type
108

109
Type definition for action handler functions.
110

111
```typescript { .api }
112
/**
113
 * Function signature for action handlers
114
 * Accepts any number of arguments and returns void
115
 */
116
type HandlerFunction = (...args: any[]) => void;
117
```
118

119
## Advanced Usage
120

121
### Custom Serialization Depth
122

123
```typescript
124
// Shallow serialization for complex objects
125
const handleDataUpdate = action('data-update', { depth: 2 });
126

127
// Deep serialization for detailed logging
128
const handleAnalytics = action('analytics-event', { depth: 15 });
129
```
130

131
### React Synthetic Events
132

133
Actions automatically handle React synthetic events:
134

135
```typescript
136
const handleFormEvent = action('form-event');
137

138
// Will properly serialize React synthetic events
139
<form onSubmit={handleFormEvent}>
140
  <input onChange={handleFormEvent} />
141
</form>
142
```
143

144
### Error Handling
145

146
Actions include built-in error handling for rendering phase usage:
147

148
```typescript
149
// In Storybook 8+ with strict mode, actions during rendering show warnings
150
// In future versions, they may throw errors to prevent anti-patterns
151
const implicitAction = action('render-action', { implicit: true });
152
```