0
# Actions and Links
1

2
Built-in addon functions for logging component interactions and creating navigation between stories. These utilities help with testing component behavior and organizing story workflows.
3

4
## Capabilities
5

6
### Action
7

8
Creates action handlers that log component interactions in the Storybook interface for debugging and testing purposes.
9

10
```javascript { .api }
11
/**
12
 * Creates an action handler that logs interactions
13
 * @param name - Name for the action that appears in logs
14
 * @param params - Additional parameters to log with the action
15
 * @returns Function that can be used as event handler
16
 */
17
function action(name: string, ...params: any[]): Function;
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
import { action } from '@kadira/storybook';
24

25
// Basic action logging
26
storiesOf('Button', module)
27
  .add('with click handler', () => (
28
    <Button onClick={action('button-clicked')}>
29
      Click Me
30
    </Button>
31
  ));
32

33
// Multiple event handlers
34
storiesOf('Form Input', module)
35
  .add('interactive', () => (
36
    <input
37
      type="text"
38
      onChange={action('input-changed')}
39
      onFocus={action('input-focused')}
40
      onBlur={action('input-blurred')}
41
      onKeyPress={action('key-pressed')}
42
      placeholder="Type here..."
43
    />
44
  ));
45

46
// Action with additional context
47
storiesOf('List Items', module)
48
  .add('clickable items', () => (
49
    <ul>
50
      <li onClick={action('item-clicked', 'item-1')}>Item 1</li>
51
      <li onClick={action('item-clicked', 'item-2')}>Item 2</li>
52
      <li onClick={action('item-clicked', 'item-3')}>Item 3</li>
53
    </ul>
54
  ));
55

56
// Complex form with multiple actions
57
storiesOf('Contact Form', module)
58
  .add('full form', () => (
59
    <form onSubmit={action('form-submitted')}>
60
      <input 
61
        type="text" 
62
        placeholder="Name"
63
        onChange={action('name-changed')}
64
      />
65
      <input 
66
        type="email" 
67
        placeholder="Email"
68
        onChange={action('email-changed')}
69
      />
70
      <textarea 
71
        placeholder="Message"
72
        onChange={action('message-changed')}
73
      />
74
      <button type="submit">Send</button>
75
    </form>
76
  ));
77
```
78

79
### Link To
80

81
Creates navigation functions that jump between different stories, useful for creating story workflows and demonstrations.
82

83
```javascript { .api }
84
/**
85
 * Creates a navigation function to jump between stories
86
 * @param kind - Target story collection name
87
 * @param story - Target story name (optional)
88
 * @returns Function that navigates to the specified story
89
 */
90
function linkTo(kind: string, story?: string): Function;
91
```
92

93
**Usage Examples:**
94

95
```javascript
96
import { linkTo } from '@kadira/storybook';
97

98
// Basic story navigation
99
storiesOf('Navigation Examples', module)
100
  .add('go to button', () => (
101
    <div>
102
      <p>This demonstrates navigation between stories</p>
103
      <button onClick={linkTo('Button', 'default')}>
104
        View Button Default
105
      </button>
106
    </div>
107
  ));
108

109
// Navigation menu
110
storiesOf('Story Menu', module)
111
  .add('main menu', () => (
112
    <nav>
113
      <ul>
114
        <li>
115
          <button onClick={linkTo('Button')}>
116
            Button Components
117
          </button>
118
        </li>
119
        <li>
120
          <button onClick={linkTo('Form', 'login')}>
121
            Login Form
122
          </button>
123
        </li>
124
        <li>
125
          <button onClick={linkTo('Layout', 'header')}>
126
            Header Layout
127
          </button>
128
        </li>
129
      </ul>
130
    </nav>
131
  ));
132

133
// Interactive demo with story flow
134
storiesOf('User Flow Demo', module)
135
  .add('start', () => (
136
    <div>
137
      <h2>Welcome to our app!</h2>
138
      <button onClick={linkTo('User Flow Demo', 'step-1')}>
139
        Get Started
140
      </button>
141
    </div>
142
  ))
143
  .add('step-1', () => (
144
    <div>
145
      <h2>Step 1: Choose your preferences</h2>
146
      <button onClick={linkTo('User Flow Demo', 'step-2')}>
147
        Continue
148
      </button>
149
      <button onClick={linkTo('User Flow Demo', 'start')}>
150
        Back
151
      </button>
152
    </div>
153
  ))
154
  .add('step-2', () => (
155
    <div>
156
      <h2>Step 2: Complete setup</h2>
157
      <button onClick={linkTo('User Flow Demo', 'complete')}>
158
        Finish
159
      </button>
160
      <button onClick={linkTo('User Flow Demo', 'step-1')}>
161
        Back
162
      </button>
163
    </div>
164
  ))
165
  .add('complete', () => (
166
    <div>
167
      <h2>Setup Complete!</h2>
168
      <button onClick={linkTo('User Flow Demo', 'start')}>
169
        Start Over
170
      </button>
171
    </div>
172
  ));
173

174
// Context-aware navigation
175
storiesOf('Product Catalog', module)
176
  .add('product list', () => (
177
    <div>
178
      <h3>Product Categories</h3>
179
      <button onClick={linkTo('Product Detail', 'electronics')}>
180
        Electronics
181
      </button>
182
      <button onClick={linkTo('Product Detail', 'clothing')}>
183
        Clothing
184
      </button>
185
    </div>
186
  ));
187

188
storiesOf('Product Detail', module)
189
  .add('electronics', () => (
190
    <div>
191
      <h3>Electronics</h3>
192
      <p>Electronic products...</p>
193
      <button onClick={linkTo('Product Catalog', 'product list')}>
194
        Back to Catalog
195
      </button>
196
    </div>
197
  ))
198
  .add('clothing', () => (
199
    <div>
200
      <h3>Clothing</h3>
201
      <p>Clothing items...</p>
202
      <button onClick={linkTo('Product Catalog', 'product list')}>
203
        Back to Catalog
204
      </button>
205
    </div>
206
  ));
207
```
208

209
### Combined Actions and Links
210

211
Using actions and links together for comprehensive interactive demonstrations.
212

213
```javascript
214
import { action, linkTo } from '@kadira/storybook';
215

216
storiesOf('Interactive Demo', module)
217
  .add('shopping cart', () => (
218
    <div>
219
      <h3>Shopping Cart</h3>
220
      <button 
221
        onClick={(e) => {
222
          action('add-to-cart')('product-123');
223
          // Could also navigate after action
224
          setTimeout(() => linkTo('Checkout', 'review')(), 1000);
225
        }}
226
      >
227
        Add to Cart & Go to Checkout
228
      </button>
229
      
230
      <button onClick={action('remove-item')}>
231
        Remove Item
232
      </button>
233
      
234
      <button onClick={linkTo('Product Catalog')}>
235
        Continue Shopping
236
      </button>
237
    </div>
238
  ));
239

240
// Form with validation and navigation
241
storiesOf('User Registration', module)
242
  .add('registration form', () => {
243
    const handleSubmit = (e) => {
244
      e.preventDefault();
245
      action('form-submitted')(e);
246
      // Navigate to success page
247
      linkTo('User Registration', 'success')();
248
    };
249
    
250
    return (
251
      <form onSubmit={handleSubmit}>
252
        <input 
253
          type="email" 
254
          placeholder="Email"
255
          onChange={action('email-input')}
256
        />
257
        <input 
258
          type="password" 
259
          placeholder="Password"
260
          onChange={action('password-input')}
261
        />
262
        <button type="submit">Register</button>
263
      </form>
264
    );
265
  })
266
  .add('success', () => (
267
    <div>
268
      <h2>Registration Successful!</h2>
269
      <button onClick={linkTo('User Registration', 'registration form')}>
270
        Register Another User
271
      </button>
272
    </div>
273
  ));
274
```
275

276
### Action Logging Details
277

278
Actions appear in the Storybook Actions panel with detailed information about the interaction.
279

280
**Action Log Information:**
281
- Action name
282
- Timestamp
283
- Event details (if applicable)
284
- Additional parameters
285
- Call stack (in development mode)
286

287
**Example Action Log Output:**
288
```
289
button-clicked
290
  ↳ SyntheticEvent {type: "click", target: button, ...}
291
  ↳ Timestamp: 14:23:45.123
292

293
form-submitted  
294
  ↳ {email: "user@example.com", password: "***"}
295
  ↳ Timestamp: 14:24:01.456
296
```
297

298
## Types
299

300
```javascript { .api }
301
interface ActionFunction {
302
  /**
303
   * Action handler function that logs interactions
304
   * Can be used as any event handler (onClick, onChange, etc.)
305
   */
306
  (...args: any[]): void;
307
}
308

309
interface LinkFunction {
310
  /**
311
   * Navigation function that switches to specified story
312
   * Typically used as event handler (onClick)
313
   */
314
  (): void;
315
}
316
```