0
# Storybook
1
2
Storybook is a React UI development environment that enables developers to build components in isolation with hot reloading. It provides a complete development ecosystem for creating, testing, and documenting React components outside of the main application.
3
4
## Package Information
5
6
- **Package Name**: @kadira/storybook
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install @kadira/storybook`
10
11
## Core Imports
12
13
```javascript
14
import { storiesOf, configure, addDecorator, clearDecorators, setAddon, getStorybook, action, linkTo } from '@kadira/storybook';
15
```
16
17
For CommonJS:
18
19
```javascript
20
const { storiesOf, configure, addDecorator, clearDecorators, setAddon, getStorybook, action, linkTo } = require('@kadira/storybook');
21
```
22
23
## Basic Usage
24
25
```javascript
26
import { storiesOf, configure, action } from '@kadira/storybook';
27
import Button from '../src/Button';
28
29
// Configure stories
30
configure(() => {
31
require('./button.stories');
32
}, module);
33
34
// Create story collection
35
storiesOf('Button', module)
36
.add('default', () => (
37
<Button onClick={action('clicked')}>Hello Button</Button>
38
))
39
.add('with text', () => (
40
<Button onClick={action('clicked')}>Click Me</Button>
41
));
42
```
43
44
## Architecture
45
46
Storybook is built around several key components:
47
48
- **Client API**: Main interface for creating and organizing stories (`storiesOf`, `configure`)
49
- **Story Collections**: Organized groups of component variations with chaining API
50
- **Decorator System**: Global and local component wrapper functions for consistent presentation
51
- **Addon System**: Extensible plugin architecture for additional functionality
52
- **Development Server**: Hot-reloading server for component development
53
- **Build System**: Static site generation for deployment
54
55
## Capabilities
56
57
### Story Creation
58
59
Core functionality for creating and organizing component stories. Stories are individual states of components that can be developed and tested in isolation.
60
61
```javascript { .api }
62
function storiesOf(kind: string, module?: any): Story;
63
64
interface Story {
65
add(storyName: string, storyFunction: Function): Story;
66
addDecorator(decorator: StoryDecorator): Story;
67
kind: string;
68
}
69
```
70
71
[Story Management](./story-management.md)
72
73
### Configuration
74
75
System configuration for loading and organizing stories with hot module replacement support.
76
77
```javascript { .api }
78
function configure(loaders: Function, module?: any): void;
79
```
80
81
[Configuration](./configuration.md)
82
83
### Decorators
84
85
Global and local component wrapper system for consistent styling and context provision across stories.
86
87
```javascript { .api }
88
function addDecorator(decorator: StoryDecorator): void;
89
function clearDecorators(): void;
90
91
interface StoryDecorator {
92
(story: Function, context: {kind: string, story: string}): Object;
93
}
94
```
95
96
[Decorators](./decorators.md)
97
98
### Addon System
99
100
Extensible plugin system for adding custom functionality to the Storybook interface and development workflow.
101
102
```javascript { .api }
103
function setAddon(addon: Object): void;
104
```
105
106
[Addons](./addons.md)
107
108
### Built-in Actions
109
110
Built-in action logging system for capturing and displaying component interactions during development.
111
112
```javascript { .api }
113
function action(name: string, ...params: any[]): Function;
114
```
115
116
[Actions and Links](./actions-links.md)
117
118
### Development Server
119
120
Command-line interface for running the development server with hot reloading and various configuration options.
121
122
```bash { .api }
123
start-storybook -p 6006 -c .storybook
124
build-storybook -c .storybook -o storybook-static
125
```
126
127
[CLI Commands](./cli-commands.md)
128
129
## Types
130
131
```javascript { .api }
132
interface StoryDecorator {
133
(story: Function, context: {kind: string, story: string}): Object;
134
}
135
136
interface Story {
137
add(storyName: string, storyFunction: Function): Story;
138
addDecorator(decorator: StoryDecorator): Story;
139
kind: string;
140
}
141
```