Skip to content

Commit a7b76e9

Browse files
jonniebigodesjonniebigodes
authored
Merge pull request #22539 from storybookjs/api-reference-main-config
Add main configuration API reference pages
2 parents 7614619 + 1d3262e commit a7b76e9

176 files changed

Lines changed: 2350 additions & 748 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/api/doc-block-icongallery.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,14 @@ import { IconItem } from '@storybook/blocks';
7575

7676
`IconItem` is configured with the following props:
7777

78-
### `children`
79-
80-
Type: `React.ReactNode`
81-
82-
Provides the icon to be displayed.
83-
8478
### `name` (required)
8579

8680
Type: `string`
8781

8882
Sets the name of the icon.
83+
84+
### `children`
85+
86+
Type: `React.ReactNode`
87+
88+
Provides the icon to be displayed.

‎docs/api/main-config-addons.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: 'addons'
3+
---
4+
5+
Parent: [main.js|ts configuration](./main-config.md)
6+
7+
Type: `(string | { name: string; options?: AddonOptions })[]`
8+
9+
Registers the [addons](../addons/install-addons.md) loaded by Storybook.
10+
11+
For each addon's available options, see their respective [documentation](https://storybook.js.org/integrations).
12+
13+
<!-- prettier-ignore-start -->
14+
15+
<CodeSnippets
16+
paths={[
17+
'common/main-config-addons.js.mdx',
18+
'common/main-config-addons.ts.mdx',
19+
]}
20+
/>
21+
22+
<!-- prettier-ignore-end -->

‎docs/api/main-config-babel-default.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: 'babelDefault'
3+
---
4+
5+
Parent: [main.js|ts configuration](./main-config.md)
6+
7+
Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise<Babel.Config>`
8+
9+
`babelDefault` allows customization of Storybook's [Babel](https://babeljs.io/) setup. It is applied to the preview config before any user presets have been applied, which makes it useful and recommended for [addon authors](../addons/writing-presets.md#babel) so that the end user's [`babel`](./main-config-babel.md) setup can override it.
10+
11+
<div class="aside">
12+
13+
💡 To adjust your Storybook's Babel setup directly—not via an addon—use [`babel`](./main-config-babel.md) instead.
14+
15+
</div>
16+
17+
<!-- prettier-ignore-start -->
18+
19+
<CodeSnippets
20+
paths={[
21+
'common/storybook-babel-configuration-example.ts.mdx',
22+
]}
23+
/>
24+
25+
<!-- prettier-ignore-end -->
26+
27+
## `Babel.Config`
28+
29+
See [Babel docs](https://babeljs.io/docs/options).
30+
31+
## `Options`
32+
33+
Type: `{ configType?: 'DEVELOPMENT' | 'PRODUCTION' }`
34+
35+
There are other options that are difficult to document here. Please introspect the type definition for more information.

‎docs/api/main-config-babel.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: 'babel'
3+
---
4+
5+
Parent: [main.js|ts configuration](./main-config.md)
6+
7+
Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise<Babel.Config>`
8+
9+
Customize Storybook's [Babel](https://babeljs.io/) setup.
10+
11+
<div class="aside">
12+
13+
💡 [Addon authors](../addons/writing-presets.md#babel) should use [`babelDefault`](./main-config-babel-default.md) instead, which is applied to the preview config before any user presets have been applied.
14+
15+
</div>
16+
17+
<!-- prettier-ignore-start -->
18+
19+
<CodeSnippets
20+
paths={[
21+
'common/main-config-babel.js.mdx',
22+
'common/main-config-babel.ts.mdx',
23+
]}
24+
/>
25+
26+
<!-- prettier-ignore-end -->
27+
28+
## `Babel.Config`
29+
30+
See [Babel docs](https://babeljs.io/docs/options).
31+
32+
## `Options`
33+
34+
Type: `{ configType?: 'DEVELOPMENT' | 'PRODUCTION' }`
35+
36+
There are other options that are difficult to document here. Please introspect the type definition for more information.

‎docs/api/main-config-config.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: 'config'
3+
---
4+
5+
Parent: [main.js|ts configuration](./main-config.md)
6+
7+
Type: `string[] | ((config: string[], options: Options) => string[] | Promise<string[]>)`
8+
9+
Deprecated: `true`
10+
11+
Add additional scripts to run in the story preview. Deprecated in favor of [`previewAnnotations`](./main-config-preview-annotations.md).

‎docs/api/main-config-core.md‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
---
2+
title: 'core'
3+
---
4+
5+
Parent: [main.js|ts configuration](./main-config.md)
6+
7+
Type:
8+
9+
```ts
10+
{
11+
builder?: string | { name: string; options?: BuilderOptions };
12+
channelOptions?: ChannelOptions;
13+
crossOriginIsolated?: boolean;
14+
disableProjectJson?: boolean;
15+
disableTelemetry?: boolean;
16+
disableWebpackDefaults?: boolean;
17+
enableCrashReports?: boolean;
18+
renderer?: RendererName;
19+
}
20+
```
21+
22+
Configures Storybook's internal features.
23+
24+
## `builder`
25+
26+
Type:
27+
28+
```ts
29+
| '@storybook/builder-vite' | '@storybook/builder-webpack5'
30+
| {
31+
name: '@storybook/builder-vite' | '@storybook/builder-webpack5';
32+
options?: BuilderOptions;
33+
}
34+
```
35+
36+
Configures Storybook's builder, [Vite](../builders/vite.md) or [Webpack](../builders/webpack.md).
37+
38+
<!-- prettier-ignore-start -->
39+
40+
<CodeSnippets
41+
paths={[
42+
'common/main-config-core-builder.js.mdx',
43+
'common/main-config-core-builder.ts.mdx',
44+
]}
45+
/>
46+
47+
<!-- prettier-ignore-end -->
48+
49+
## `channelOptions`
50+
51+
Type: `ChannelOptions`
52+
53+
```ts
54+
{
55+
allowClass: boolean;
56+
allowDate: boolean;
57+
allowFunction: boolean;
58+
allowRegExp: boolean;
59+
allowSymbol: boolean;
60+
allowUndefined: boolean;
61+
lazyEval: boolean;
62+
maxDepth: number;
63+
space: number | undefined;
64+
}
65+
```
66+
67+
Configures the channel used by Storybook to communicate between the manager and preview.
68+
69+
Only two properties are likely to be used:
70+
71+
### `channelOptions.allowFunction`
72+
73+
Type: `boolean`
74+
75+
Default: `false`
76+
77+
Enables serializing functions across the channel, which can be a security risk.
78+
79+
### `channelOptions.maxDepth`
80+
81+
Type: `number`
82+
83+
Default: `3`
84+
85+
The maximum depth of nested objects to serialize across the channel. Larger values will be slower.
86+
87+
## `crossOriginIsolated`
88+
89+
Type: `boolean`
90+
91+
Enable CORS headings to run document in a "secure context". See [SharedArrayBuffer security requirements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements)
92+
93+
This enables these headers in development-mode:
94+
95+
- `Cross-Origin-Opener-Policy: same-origin`
96+
- `Cross-Origin-Embedder-Policy: require-corp`
97+
98+
<!-- prettier-ignore-start -->
99+
100+
<CodeSnippets
101+
paths={[
102+
'common/main-config-core-cross-origin-isolated.js.mdx',
103+
'common/main-config-core-cross-origin-isolated.ts.mdx',
104+
]}
105+
/>
106+
107+
<!-- prettier-ignore-end -->
108+
109+
## `disableProjectJson`
110+
111+
Type: `boolean`
112+
113+
Disables the generation of `project.json`, a file containing Storybook metadata
114+
115+
<!-- prettier-ignore-start -->
116+
117+
<CodeSnippets
118+
paths={[
119+
'common/main-config-core-disable-project-json.js.mdx',
120+
'common/main-config-core-disable-project-json.ts.mdx',
121+
]}
122+
/>
123+
124+
<!-- prettier-ignore-end -->
125+
126+
## `disableTelemetry`
127+
128+
Type: `boolean`
129+
130+
Disables Storybook's [telemetry collection](../configure/telemetry.md).
131+
132+
<!-- prettier-ignore-start -->
133+
134+
<CodeSnippets
135+
paths={[
136+
'common/main-config-core-disable-telemetry.js.mdx',
137+
'common/main-config-core-disable-telemetry.ts.mdx',
138+
]}
139+
/>
140+
141+
<!-- prettier-ignore-end -->
142+
143+
## `disableWebpackDefaults`
144+
145+
Type: `boolean`
146+
147+
Disables Storybook's default Webpack configuration.
148+
149+
<!-- prettier-ignore-start -->
150+
151+
<CodeSnippets
152+
paths={[
153+
'common/main-config-core-disable-webpack-defaults.js.mdx',
154+
'common/main-config-core-disable-webpack-defaults.ts.mdx',
155+
]}
156+
/>
157+
158+
<!-- prettier-ignore-end -->
159+
160+
## `enableCrashReports`
161+
162+
Type: `boolean`
163+
164+
Enable crash reports to be sent to Storybook [telemetry](../configure/telemetry.md).
165+
166+
<!-- prettier-ignore-start -->
167+
168+
<CodeSnippets
169+
paths={[
170+
'common/main-config-core-enable-crash-reports.js.mdx',
171+
'common/main-config-core-enable-crash-reports.ts.mdx',
172+
]}
173+
/>
174+
175+
<!-- prettier-ignore-end -->
176+
177+
## `renderer`
178+
179+
Type: `RendererName`
180+
181+
<!-- TOOD: Is this used? Should it be documented? -->

‎docs/api/main-config-docs.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: 'docs'
3+
---
4+
5+
Parent: [main.js|ts configuration](./main-config.md)
6+
7+
Type:
8+
9+
```ts
10+
{
11+
autodocs?: boolean | 'tag';
12+
defaultName?: string;
13+
docsMode?: boolean;
14+
}
15+
```
16+
17+
Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md).
18+
19+
## `autoDocs`
20+
21+
Type: `boolean | 'tag'`
22+
23+
Default: `'tag'`
24+
25+
Enables or disables automatic documentation for stories.
26+
27+
- `true`: Enables it for all stories
28+
- `false`: Disables it for all stories
29+
- `'tag'`: Enables it for stories tagged with `'autodocs'`
30+
31+
<!-- prettier-ignore-start -->
32+
33+
<CodeSnippets
34+
paths={[
35+
'common/main-config-docs-autodocs.js.mdx',
36+
'common/main-config-docs-autodocs.ts.mdx',
37+
]}
38+
/>
39+
40+
<!-- prettier-ignore-end -->
41+
42+
## `defaultName`
43+
44+
Type: `string`
45+
46+
Default: `'Docs'`
47+
48+
Name used for generated documentation pages.
49+
50+
<!-- prettier-ignore-start -->
51+
52+
<CodeSnippets
53+
paths={[
54+
'common/main-config-docs-default-name.js.mdx',
55+
'common/main-config-docs-default-name.ts.mdx',
56+
]}
57+
/>
58+
59+
<!-- prettier-ignore-end -->
60+
61+
## `docsMode`
62+
63+
Type: `boolean`
64+
65+
Only show documentation pages in the sidebar (usually set with the `--docs` CLI flag).
66+
67+
<!-- prettier-ignore-start -->
68+
69+
<CodeSnippets
70+
paths={[
71+
'common/main-config-docs-docs-mode.js.mdx',
72+
'common/main-config-docs-docs-mode.ts.mdx',
73+
]}
74+
/>
75+
76+
<!-- prettier-ignore-end -->

0 commit comments

Comments
 (0)