0
# Story Management
1

2
Core functionality for creating and organizing component stories. Stories are individual states of components that can be developed and tested in isolation with hot reloading support.
3

4
## Capabilities
5

6
### Stories Of
7

8
Creates a story collection for a specific component kind, providing a chainable interface for adding individual stories.
9

10
```javascript { .api }
11
/**
12
 * Creates a story collection for a specific component kind
13
 * @param kind - The name/category for the component stories
14
 * @param module - Optional webpack module for hot reloading support
15
 * @returns Story object with chaining methods
16
 */
17
function storiesOf(kind: string, module?: any): Story;
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
import { storiesOf } from '@kadira/storybook';
24
import Button from '../src/Button';
25

26
// Basic story collection
27
storiesOf('Button', module)
28
  .add('default', () => <Button>Default</Button>)
29
  .add('primary', () => <Button primary>Primary</Button>);
30

31
// With hot module replacement
32
storiesOf('Components/Button', module)
33
  .add('small', () => <Button size="small">Small Button</Button>)
34
  .add('large', () => <Button size="large">Large Button</Button>);
35
```
36

37
### Add Story
38

39
Adds an individual story to a story collection, representing a specific state or variation of the component.
40

41
```javascript { .api }
42
/**
43
 * Adds an individual story to the collection
44
 * @param storyName - Name for the story variation
45
 * @param storyFunction - Function returning the component JSX
46
 * @returns Story object for method chaining
47
 */
48
add(storyName: string, storyFunction: Function): Story;
49
```
50

51
**Usage Examples:**
52

53
```javascript
54
storiesOf('Input', module)
55
  .add('empty', () => <Input placeholder="Enter text..." />)
56
  .add('with value', () => <Input value="Hello World" />)
57
  .add('disabled', () => <Input disabled value="Disabled input" />);
58

59
// With actions and props
60
storiesOf('Form Elements', module)
61
  .add('interactive input', () => (
62
    <Input 
63
      onChange={action('input-changed')}
64
      onFocus={action('input-focused')}
65
      placeholder="Type something..."
66
    />
67
  ));
68
```
69

70
### Get Storybook
71

72
Returns all registered stories in a structured format, useful for programmatic access to the story data.
73

74
```javascript { .api }
75
/**
76
 * Returns all registered stories in structured format
77
 * @returns Array of story kinds with their individual stories
78
 */
79
function getStorybook(): Array<{
80
  kind: string;
81
  stories: Array<{
82
    name: string;
83
    render: Function;
84
  }>;
85
}>;
86
```
87

88
**Usage Examples:**
89

90
```javascript
91
import { getStorybook } from '@kadira/storybook';
92

93
// Get all stories programmatically
94
const allStories = getStorybook();
95

96
// Access story structure
97
allStories.forEach(storyKind => {
98
  console.log(`Kind: ${storyKind.kind}`);
99
  storyKind.stories.forEach(story => {
100
    console.log(`  Story: ${story.name}`);
101
    // story.render() returns the component JSX
102
  });
103
});
104

105
// Example output structure:
106
// [
107
//   {
108
//     kind: "Button",
109
//     stories: [
110
//       { name: "default", render: Function },
111
//       { name: "primary", render: Function }
112
//     ]
113
//   }
114
// ]
115
```
116

117
## Types
118

119
```javascript { .api }
120
interface StoryDecorator {
121
  /**
122
   * Decorator function that wraps story components
123
   * @param story - Function that returns the story component
124
   * @param context - Story context information
125
   * @returns JSX element wrapping the story
126
   */
127
  (story: Function, context: {kind: string, story: string}): Object;
128
}
129

130
interface Story {
131
  /** Add a story to this collection */
132
  add(storyName: string, storyFunction: Function): Story;
133
  /** Add a decorator to all stories in this collection */
134
  addDecorator(decorator: StoryDecorator): Story;
135
  /** The kind/category name for this story collection */
136
  kind: string;
137
}
138

139
interface StoryData {
140
  /** Category name for the story group */
141
  kind: string;
142
  /** Array of individual stories in this category */
143
  stories: Array<{
144
    /** Name of the individual story */
145
    name: string;
146
    /** Function that renders the story component */
147
    render: Function;
148
  }>;
149
}
150
```