Add main configuration API reference pages

docs/api/doc-block-icongallery.md

@@ -75,14 +75,14 @@ import { IconItem } from '@storybook/blocks';
 
 `IconItem` is configured with the following props:
 
-### `children`
-
-Type: `React.ReactNode`
-
-Provides the icon to be displayed.
-
 ### `name` (required)
 
 Type: `string`
 
 Sets the name of the icon.
+
+### `children`
+
+Type: `React.ReactNode`
+
+Provides the icon to be displayed.

docs/api/main-config-addons.md

@@ -0,0 +1,22 @@
+---
+title: 'addons'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `(string | { name: string; options?: AddonOptions })[]`
+
+Registers the [addons](../addons/install-addons.md) loaded by Storybook.
+
+For each addon's available options, see their respective [documentation](https://storybook.js.org/integrations).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-addons.js.mdx',
+    'common/main-config-addons.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

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

@@ -0,0 +1,35 @@
+---
+title: 'babelDefault'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise<Babel.Config>`
+
+`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.
+
+<div class="aside">
+
+💡 To adjust your Storybook's Babel setup directly—not via an addon—use [`babel`](./main-config-babel.md) instead.
+
+</div>
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-babel-configuration-example.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `Babel.Config`
+
+See [Babel docs](https://babeljs.io/docs/options).
+
+## `Options`
+
+Type: `{ configType?: 'DEVELOPMENT' | 'PRODUCTION' }`
+
+There are other options that are difficult to document here. Please introspect the type definition for more information.

docs/api/main-config-babel.md

@@ -0,0 +1,36 @@
+---
+title: 'babel'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise<Babel.Config>`
+
+Customize Storybook's [Babel](https://babeljs.io/) setup.
+
+<div class="aside">
+
+💡 [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.
+
+</div>
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-babel.js.mdx',
+    'common/main-config-babel.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `Babel.Config`
+
+See [Babel docs](https://babeljs.io/docs/options).
+
+## `Options`
+
+Type: `{ configType?: 'DEVELOPMENT' | 'PRODUCTION' }`
+
+There are other options that are difficult to document here. Please introspect the type definition for more information.

docs/api/main-config-config.md

@@ -0,0 +1,11 @@
+---
+title: 'config'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `string[] | ((config: string[], options: Options) => string[] | Promise<string[]>)`
+
+Deprecated: `true`
+
+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

@@ -0,0 +1,181 @@
+---
+title: 'core'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type:
+
+```ts
+{
+  builder?: string | { name: string; options?: BuilderOptions };
+  channelOptions?: ChannelOptions;
+  crossOriginIsolated?: boolean;
+  disableProjectJson?: boolean;
+  disableTelemetry?: boolean;
+  disableWebpackDefaults?: boolean;
+  enableCrashReports?: boolean;
+  renderer?: RendererName;
+}
+```
+
+Configures Storybook's internal features.
+
+## `builder`
+
+Type:
+
+```ts
+| '@storybook/builder-vite' | '@storybook/builder-webpack5'
+| {
+    name: '@storybook/builder-vite' | '@storybook/builder-webpack5';
+    options?: BuilderOptions;
+  }
+```
+
+Configures Storybook's builder, [Vite](../builders/vite.md) or [Webpack](../builders/webpack.md).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-core-builder.js.mdx',
+    'common/main-config-core-builder.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `channelOptions`
+
+Type: `ChannelOptions`
+
+```ts
+{
+  allowClass: boolean;
+  allowDate: boolean;
+  allowFunction: boolean;
+  allowRegExp: boolean;
+  allowSymbol: boolean;
+  allowUndefined: boolean;
+  lazyEval: boolean;
+  maxDepth: number;
+  space: number | undefined;
+}
+```
+
+Configures the channel used by Storybook to communicate between the manager and preview.
+
+Only two properties are likely to be used:
+
+### `channelOptions.allowFunction`
+
+Type: `boolean`
+
+Default: `false`
+
+Enables serializing functions across the channel, which can be a security risk.
+
+### `channelOptions.maxDepth`
+
+Type: `number`
+
+Default: `3`
+
+The maximum depth of nested objects to serialize across the channel. Larger values will be slower.
+
+## `crossOriginIsolated`
+
+Type: `boolean`
+
+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)
+
+This enables these headers in development-mode:
+
+- `Cross-Origin-Opener-Policy: same-origin`
+- `Cross-Origin-Embedder-Policy: require-corp`
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-core-cross-origin-isolated.js.mdx',
+    'common/main-config-core-cross-origin-isolated.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `disableProjectJson`
+
+Type: `boolean`
+
+Disables the generation of `project.json`, a file containing Storybook metadata
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-core-disable-project-json.js.mdx',
+    'common/main-config-core-disable-project-json.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `disableTelemetry`
+
+Type: `boolean`
+
+Disables Storybook's [telemetry collection](../configure/telemetry.md).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-core-disable-telemetry.js.mdx',
+    'common/main-config-core-disable-telemetry.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `disableWebpackDefaults`
+
+Type: `boolean`
+
+Disables Storybook's default Webpack configuration.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-core-disable-webpack-defaults.js.mdx',
+    'common/main-config-core-disable-webpack-defaults.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `enableCrashReports`
+
+Type: `boolean`
+
+Enable crash reports to be sent to Storybook [telemetry](../configure/telemetry.md).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-core-enable-crash-reports.js.mdx',
+    'common/main-config-core-enable-crash-reports.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `renderer`
+
+Type: `RendererName`
+
+<!-- TOOD: Is this used? Should it be documented? -->

docs/api/main-config-docs.md

@@ -0,0 +1,76 @@
+---
+title: 'docs'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type:
+
+```ts
+{
+  autodocs?: boolean | 'tag';
+  defaultName?: string;
+  docsMode?: boolean;
+}
+```
+
+Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md).
+
+## `autoDocs`
+
+Type: `boolean | 'tag'`
+
+Default: `'tag'`
+
+Enables or disables automatic documentation for stories.
+
+- `true`: Enables it for all stories
+- `false`: Disables it for all stories
+- `'tag'`: Enables it for stories tagged with `'autodocs'`
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-docs-autodocs.js.mdx',
+    'common/main-config-docs-autodocs.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `defaultName`
+
+Type: `string`
+
+Default: `'Docs'`
+
+Name used for generated documentation pages.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-docs-default-name.js.mdx',
+    'common/main-config-docs-default-name.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `docsMode`
+
+Type: `boolean`
+
+Only show documentation pages in the sidebar (usually set with the `--docs` CLI flag).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-docs-docs-mode.js.mdx',
+    'common/main-config-docs-docs-mode.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->