0
# Storybook Info Addon
1

2
The Storybook Info Addon enhances story documentation by displaying additional information alongside stories in the Storybook interface. It provides automatic prop table generation, markdown documentation support, and source code display to improve the developer experience within the Storybook development environment.
3

4
## Package Information
5

6
- **Package Name**: @storybook/addon-info
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install --save-dev @storybook/addon-info`
10

11
## Core Imports
12

13
```javascript
14
import { withInfo, Story, PropTable, setDefaults } from "@storybook/addon-info";
15
```
16

17
For legacy CommonJS:
18

19
```javascript
20
const { withInfo, Story, PropTable, setDefaults } = require("@storybook/addon-info");
21
```
22

23
## Basic Usage
24

25
```javascript
26
import { withInfo } from "@storybook/addon-info";
27
import { addDecorator } from "@storybook/react";
28

29
// Global usage
30
addDecorator(withInfo);
31

32
// Or per story
33
export default {
34
  title: "Button",
35
  decorators: [withInfo],
36
};
37

38
// With options
39
export const BasicButton = () => <Button>Click me</Button>;
40
BasicButton.story = {
41
  parameters: {
42
    info: {
43
      text: "This is a basic button component",
44
      inline: true,
45
    },
46
  },
47
};
48
```
49

50
## Architecture
51

52
The addon is built around several key components:
53

54
- **Decorator System**: `withInfo` decorator integrates with Storybook's parameter system
55
- **Story Component**: Core React component that renders story information panels
56
- **Prop Table System**: Automatic prop table generation from PropTypes or React docgen
57
- **Markdown Renderer**: Marksy-based markdown processing with custom components
58
- **Type Display**: Intelligent rendering of PropTypes and type information
59
- **Styling System**: Customizable styles through function-based theming
60

61
## Capabilities
62

63
### Story Decoration
64

65
Core decorator functionality for adding info panels to Storybook stories with flexible configuration options.
66

67
```javascript { .api }
68
/**
69
 * Main decorator for adding info addon to stories
70
 * @param {Object|string} options - Configuration options or text content
71
 * @returns {Function} Storybook decorator function
72
 */
73
function withInfo(options);
74

75
interface InfoOptions {
76
  /** Display info inline vs click button to view */
77
  inline?: boolean;
78
  /** Toggle display of header with component name */
79
  header?: boolean;
80
  /** Display the source code of story component */
81
  source?: boolean;
82
  /** Components to show prop tables for */
83
  propTables?: Array<React.ComponentType>;
84
  /** Components to exclude from prop tables */
85
  propTablesExclude?: Array<React.ComponentType>;
86
  /** Custom styles object or function */
87
  styles?: Object | Function;
88
  /** Custom markdown component overrides */
89
  components?: { [key: string]: React.ComponentType };
90
  /** Max props to display per line in source code */
91
  maxPropsIntoLine?: number;
92
  /** Max object keys to display in prop values */
93
  maxPropObjectKeys?: number;
94
  /** Max array length to display in prop values */
95
  maxPropArrayLength?: number;
96
  /** Max string length to display in prop values */
97
  maxPropStringLength?: number;
98
  /** Custom prop table component */
99
  TableComponent?: React.ComponentType;
100
  /** Props to exclude from prop tables */
101
  excludedPropTypes?: Array<string>;
102
  /** Text content to display (markdown supported) */
103
  text?: string;
104
}
105
```
106

107
[Story Decoration](./story-decoration.md)
108

109
### Prop Table Generation
110

111
Automatic prop table generation from React components using PropTypes or React docgen information.
112

113
```javascript { .api }
114
/**
115
 * Default prop table component for displaying component props
116
 * @param {Object} props - PropTable component props
117
 */
118
function PropTable(props);
119

120
interface PropTableProps {
121
  /** React component type to analyze */
122
  type?: Function;
123
  /** Array of prop definitions to display */
124
  propDefinitions?: Array<PropDefinition>;
125
  /** Props to exclude from the table */
126
  excludedPropTypes?: Array<string>;
127
  /** Max object keys to display */
128
  maxPropObjectKeys: number;
129
  /** Max array length to display */
130
  maxPropArrayLength: number;
131
  /** Max string length to display */
132
  maxPropStringLength: number;
133
}
134

135
interface PropDefinition {
136
  /** Property name */
137
  property: string;
138
  /** PropType information object or string */
139
  propType: Object | string;
140
  /** Whether the prop is required */
141
  required?: boolean;
142
  /** Prop description from docgen or comments */
143
  description?: string;
144
  /** Default value for the prop */
145
  defaultValue?: any;
146
}
147
```
148

149
[Prop Tables](./prop-tables.md)
150

151
### Markdown Rendering
152

153
Custom markdown components for rich text documentation display within story info panels.
154

155
```javascript { .api }
156
// Heading components
157
function H1(props);
158
function H2(props);
159
function H3(props);
160
function H4(props);
161
function H5(props);
162
function H6(props);
163

164
// Text components
165
function P(props);
166
function A(props);
167
function LI(props);
168
function UL(props);
169

170
// Code components
171
function Code(props);
172
function Pre(props);
173
```
174

175
[Markdown Components](./markdown-components.md)
176

177
## Configuration Options
178

179
### Default Configuration
180

181
```javascript { .api }
182
const defaultOptions = {
183
  inline: false,
184
  header: true,
185
  source: true,
186
  propTables: [],
187
  maxPropsIntoLine: 3,
188
  maxPropObjectKeys: 3,
189
  maxPropArrayLength: 3,
190
  maxPropStringLength: 50,
191
};
192
```
193

194
### Global Configuration
195

196
```javascript
197
import { withInfo } from "@storybook/addon-info";
198
import { addDecorator } from "@storybook/react";
199

200
// Set global options
201
addDecorator(
202
  withInfo({
203
    header: false,
204
    inline: true,
205
    source: false,
206
  })
207
);
208
```
209

210
### Per-Story Configuration
211

212
```javascript
213
// String shorthand
214
export const Example = () => <Component />;
215
Example.story = {
216
  parameters: {
217
    info: "This component does something useful",
218
  },
219
};
220

221
// Full options object
222
Example.story = {
223
  parameters: {
224
    info: {
225
      text: "Detailed markdown documentation here",
226
      inline: true,
227
      propTables: [Component],
228
    },
229
  },
230
};
231
```
232

233
## Types
234

235
```javascript { .api }
236
interface StoryContext {
237
  /** Story category/group name */
238
  kind: string;
239
  /** Individual story name */
240
  name: string;
241
}
242

243
interface PropTableCompareFunction {
244
  (element: React.ReactElement, Component: React.ComponentType): boolean;
245
}
246

247
interface StylesFunction {
248
  (defaultStyles: Object): Object;
249
}
250

251
/**
252
 * @deprecated Use withInfo options parameter instead
253
 * Sets global default options for the info addon
254
 * @param {Object} newDefaults - Default options to merge
255
 * @returns {Function} Deprecated function
256
 */
257
function setDefaults(newDefaults);
258
```