0
# Configuration
1
2
Build tool integration and configuration options for seamless setup with popular bundlers, frameworks, and comprehensive customization of the documentation generation system.
3
4
## Capabilities
5
6
### Main Configuration Interface
7
8
Core configuration interface for customizing docs behavior and appearance.
9
10
```typescript { .api }
11
/**
12
* Main docs configuration interface
13
*/
14
interface DocsParameters {
15
/** Docs-specific configuration */
16
docs?: DocsConfig;
17
}
18
19
interface DocsConfig {
20
/** Enable automatic docs generation */
21
autodocs?: boolean | 'tag';
22
/** Default name for docs entries */
23
defaultName?: string;
24
/** Disable docs for specific stories */
25
disable?: boolean;
26
/** Custom docs page component */
27
page?: React.ComponentType<DocsPageProps>;
28
/** Custom docs container component */
29
container?: React.ComponentType<DocsContainerProps>;
30
/** Source code extraction configuration */
31
source?: Partial<SourceBlockParameters>;
32
/** Canvas block configuration */
33
canvas?: Partial<CanvasBlockParameters>;
34
/** Story block configuration */
35
story?: Partial<StoryBlockParameters>;
36
/** Args table configuration */
37
argTypes?: ArgTypesBlockParameters;
38
/** Controls configuration */
39
controls?: ControlsBlockParameters;
40
/** Description extraction configuration */
41
description?: DescriptionBlockParameters;
42
/** Custom theme configuration */
43
theme?: ThemeVars;
44
/** Page title override */
45
title?: string;
46
/** Page subtitle */
47
subtitle?: string;
48
/** Table of contents configuration */
49
toc?: boolean | TocParameters;
50
/** Enable code panel addon */
51
codePanel?: boolean;
52
/** Custom component description extractor */
53
extractComponentDescription?: (component: any, context: any) => string | null;
54
/** Custom story description extractor */
55
extractStoryDescription?: (story: any, context: any) => string | null;
56
}
57
```
58
59
### Block-Specific Configuration
60
61
Detailed configuration interfaces for individual documentation blocks.
62
63
```typescript { .api }
64
/**
65
* Source block configuration parameters
66
*/
67
interface SourceBlockParameters {
68
/** Source code display type */
69
type?: 'auto' | 'code' | 'dynamic';
70
/** Source code language for highlighting */
71
language?: string;
72
/** Code formatting options */
73
format?: boolean | 'dedent' | string;
74
/** Source code transformation function */
75
transform?: (code: string, storyContext: any) => string;
76
/** Exclude source for specific stories */
77
excludeDecorators?: boolean;
78
/** Dark theme for source display */
79
dark?: boolean;
80
}
81
82
/**
83
* Canvas block configuration parameters
84
*/
85
interface CanvasBlockParameters {
86
/** Canvas layout mode */
87
layout?: 'padded' | 'fullscreen' | 'centered';
88
/** Source panel initial state */
89
sourceState?: 'hidden' | 'shown' | 'none';
90
/** Show/hide canvas toolbar */
91
withToolbar?: boolean;
92
/** Additional canvas actions */
93
additionalActions?: Array<{
94
title: string;
95
onClick: () => void;
96
disabled?: boolean;
97
}>;
98
}
99
100
/**
101
* Story block configuration parameters
102
*/
103
interface StoryBlockParameters {
104
/** Render story inline or in iframe */
105
inline?: boolean;
106
/** Story height for iframe mode */
107
height?: string;
108
/** Auto-run story play function */
109
autoplay?: boolean;
110
/** Story iframe configuration */
111
iframe?: {
112
height?: string;
113
width?: string;
114
};
115
}
116
117
/**
118
* Args table configuration parameters
119
*/
120
interface ArgTypesBlockParameters {
121
/** Properties to include in table */
122
include?: PropDescriptor;
123
/** Properties to exclude from table */
124
exclude?: PropDescriptor;
125
/** Sorting configuration */
126
sort?: SortType;
127
/** Category grouping */
128
category?: string;
129
/** Expand all categories by default */
130
expanded?: boolean;
131
}
132
133
/**
134
* Controls configuration parameters
135
*/
136
interface ControlsBlockParameters {
137
/** Controls to include */
138
include?: PropDescriptor;
139
/** Controls to exclude */
140
exclude?: PropDescriptor;
141
/** Controls sorting */
142
sort?: SortType;
143
/** Expanded state */
144
expanded?: boolean;
145
/** Hide no-controls message */
146
hideNoControlsWarning?: boolean;
147
}
148
149
/**
150
* Description block configuration parameters
151
*/
152
interface DescriptionBlockParameters {
153
/** Description source type */
154
type?: DescriptionType;
155
/** Markdown content */
156
markdown?: string;
157
}
158
```
159
160
### Table of Contents Configuration
161
162
Configuration for automatic table of contents generation.
163
164
```typescript { .api }
165
/**
166
* Table of contents configuration parameters
167
*/
168
interface TocParameters {
169
/** Disable TOC generation */
170
disable?: boolean;
171
/** CSS selector for headings to include */
172
headingSelector?: string;
173
/** Ignore specific headings */
174
ignoreSelector?: string;
175
/** Heading levels to include */
176
headingLevels?: number[];
177
/** TOC title */
178
title?: string;
179
/** Custom TOC container className */
180
className?: string;
181
/** Expand TOC by default */
182
expanded?: boolean;
183
}
184
```
185
186
### Theme Configuration
187
188
Theme and styling configuration for customizing docs appearance.
189
190
```typescript { .api }
191
/**
192
* Theme configuration variables
193
*/
194
interface ThemeVars {
195
/** Base colors */
196
base?: 'light' | 'dark';
197
/** Brand colors */
198
colorPrimary?: string;
199
colorSecondary?: string;
200
/** Application colors */
201
appBg?: string;
202
appContentBg?: string;
203
appBorderColor?: string;
204
appBorderRadius?: number;
205
/** Typography */
206
fontBase?: string;
207
fontCode?: string;
208
/** Text colors */
209
textColor?: string;
210
textInverseColor?: string;
211
textMutedColor?: string;
212
/** Button colors */
213
buttonBg?: string;
214
buttonBorder?: string;
215
/** Input colors */
216
inputBg?: string;
217
inputBorder?: string;
218
inputTextColor?: string;
219
inputBorderRadius?: number;
220
/** Brand configuration */
221
brandTitle?: string;
222
brandUrl?: string;
223
brandImage?: string;
224
brandTarget?: string;
225
}
226
```
227
228
## Preset Configuration
229
230
Build tool integration presets for webpack and Vite with automatic configuration.
231
232
### Webpack Configuration
233
234
Webpack preset for seamless integration with webpack-based projects.
235
236
```typescript { .api }
237
/**
238
* Webpack configuration modification function
239
* @param config - Existing webpack configuration
240
* @param options - Storybook webpack options
241
* @returns Modified webpack configuration
242
*/
243
function webpack(
244
config: WebpackConfig,
245
options: WebpackOptions
246
): WebpackConfig;
247
248
interface WebpackConfig {
249
module?: {
250
rules?: WebpackRule[];
251
};
252
resolve?: {
253
extensions?: string[];
254
alias?: Record<string, string>;
255
};
256
plugins?: any[];
257
[key: string]: any;
258
}
259
260
interface WebpackOptions {
261
configType: 'DEVELOPMENT' | 'PRODUCTION';
262
framework?: string;
263
typescript?: {
264
check?: boolean;
265
reactDocgen?: string;
266
};
267
docs?: {
268
transcludeMarkdown?: boolean;
269
};
270
}
271
272
interface WebpackRule {
273
test: RegExp;
274
use: any[];
275
exclude?: RegExp;
276
include?: RegExp;
277
}
278
```
279
280
### Vite Configuration
281
282
Vite preset for modern build tool integration with optimized development experience.
283
284
```typescript { .api }
285
/**
286
* Vite configuration modification function
287
* @param config - Existing Vite configuration
288
* @param options - Storybook Vite options
289
* @returns Modified Vite configuration
290
*/
291
function viteFinal(
292
config: ViteConfig,
293
options: ViteOptions
294
): Promise<ViteConfig> | ViteConfig;
295
296
interface ViteConfig {
297
plugins?: any[];
298
resolve?: {
299
alias?: Record<string, string>;
300
extensions?: string[];
301
};
302
define?: Record<string, any>;
303
optimizeDeps?: {
304
include?: string[];
305
exclude?: string[];
306
};
307
server?: {
308
fs?: {
309
allow?: string[];
310
};
311
};
312
[key: string]: any;
313
}
314
315
interface ViteOptions {
316
framework?: string;
317
configType: 'DEVELOPMENT' | 'PRODUCTION';
318
docs?: {
319
transcludeMarkdown?: boolean;
320
};
321
}
322
```
323
324
### Preset Exports
325
326
Core preset exports for addon configuration and dependency management.
327
328
```typescript { .api }
329
/**
330
* Docs configuration preset object
331
*/
332
const docs: DocsPreset;
333
334
interface DocsPreset {
335
/** Preset name */
336
name: string;
337
/** Preset options */
338
options?: any;
339
}
340
341
/**
342
* Required addon dependencies
343
*/
344
const addons: string[];
345
346
/**
347
* React dependency resolution configuration
348
*/
349
const resolvedReact: ReactResolution;
350
351
interface ReactResolution {
352
/** React package location */
353
react: string;
354
/** React DOM package location */
355
'react-dom': string;
356
/** React DOM server location */
357
'react-dom/server': string;
358
}
359
360
/**
361
* Vite optimization configuration
362
*/
363
const optimizeViteDeps: ViteOptimization;
364
365
interface ViteOptimization {
366
/** Dependencies to include in optimization */
367
include: string[];
368
/** Dependencies to exclude from optimization */
369
exclude: string[];
370
}
371
```
372
373
## Manager Configuration
374
375
Manager-side configuration for code panel and docs integration.
376
377
```typescript { .api }
378
/**
379
* Manager plugin registration for code panel
380
* Registers the code panel addon in Storybook manager UI
381
*/
382
interface ManagerConfig {
383
/** Panel registration */
384
panels?: PanelConfig[];
385
/** Addon metadata */
386
addons?: AddonConfig[];
387
}
388
389
interface PanelConfig {
390
/** Panel ID */
391
id: string;
392
/** Panel title */
393
title: string;
394
/** Panel component */
395
render: React.ComponentType;
396
/** Panel icon */
397
icon?: React.ComponentType;
398
/** Panel disabled state */
399
disabled?: boolean;
400
}
401
402
interface AddonConfig {
403
/** Addon ID */
404
id: string;
405
/** Addon name */
406
name: string;
407
/** Addon URL */
408
url?: string;
409
/** Addon title */
410
title: string;
411
}
412
```
413
414
## Usage Examples
415
416
### Basic Configuration
417
418
```typescript
419
// .storybook/main.js
420
export default {
421
stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
422
addons: [
423
"@storybook/addon-docs",
424
// other addons
425
],
426
docs: {
427
autodocs: true,
428
defaultName: "Documentation",
429
},
430
typescript: {
431
reactDocgen: "react-docgen-typescript",
432
},
433
};
434
```
435
436
### Advanced Configuration
437
438
```typescript
439
// .storybook/preview.js
440
import { themes } from "@storybook/theming";
441
442
export const parameters = {
443
docs: {
444
theme: themes.dark,
445
toc: {
446
title: "Table of Contents",
447
headingSelector: "h2, h3",
448
expanded: true,
449
},
450
source: {
451
type: "dynamic",
452
language: "typescript",
453
format: "dedent",
454
},
455
canvas: {
456
sourceState: "shown",
457
withToolbar: true,
458
},
459
controls: {
460
sort: "requiredFirst",
461
expanded: true,
462
},
463
},
464
};
465
```
466
467
### Custom Theme Configuration
468
469
```typescript
470
// .storybook/manager.js
471
import { addons } from "@storybook/manager-api";
472
import { themes } from "@storybook/theming";
473
474
addons.setConfig({
475
theme: {
476
...themes.normal,
477
brandTitle: "My Component Library",
478
brandUrl: "https://example.com",
479
brandImage: "./logo.svg",
480
colorPrimary: "#007acc",
481
colorSecondary: "#4ecdc4",
482
appBg: "#f8f9fa",
483
appContentBg: "#ffffff",
484
fontBase: '"Inter", sans-serif',
485
fontCode: '"Fira Code", monospace',
486
},
487
});
488
```
489
490
### Framework-Specific Configuration
491
492
```typescript
493
// Angular with Compodoc
494
export default {
495
stories: ["../src/**/*.stories.@(js|ts|mdx)"],
496
addons: ["@storybook/addon-docs"],
497
docs: {
498
autodocs: true,
499
},
500
typescript: {
501
check: true,
502
reactDocgen: false,
503
},
504
angular: {
505
enableIvy: true,
506
},
507
};
508
509
// React with TypeScript
510
export default {
511
stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
512
addons: ["@storybook/addon-docs"],
513
docs: {
514
autodocs: true,
515
},
516
typescript: {
517
reactDocgen: "react-docgen-typescript",
518
reactDocgenTypescriptOptions: {
519
shouldExtractLiteralValuesFromEnum: true,
520
propFilter: (prop) =>
521
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
522
},
523
},
524
};
525
```