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
```