Add examples for all main config sub properties

docs/api/main-config-core.md

@@ -21,17 +21,6 @@ Type:
 
 Configures Storybook's internal features.
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/main-config-core.js.mdx',
-    'common/main-config-core.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
 ## `builder`
 
 Type:
@@ -46,6 +35,17 @@ Type:
 
 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`
@@ -77,24 +77,68 @@ 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`

docs/api/main-config-docs.md

@@ -16,17 +16,6 @@ Type:
 
 Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md).
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/main-config-docs.js.mdx',
-    'common/main-config-docs.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
 ## `autoDocs`
 
 Type: `boolean | 'tag'`
@@ -39,6 +28,17 @@ Enables or disables automatic documentation for 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`
@@ -47,8 +47,30 @@ 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 -->

docs/api/main-config-features.md

@@ -39,7 +39,18 @@ Generates a `stories.json` file to help story loading with the on-demand mode.
 
 Type: `boolean`
 
-Apply decorators from preview.js before decorators from addons or frameworks
+Apply decorators from preview.js before decorators from addons or frameworks. [More information](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#changed-decorator-order-between-previewjs-and-addonsframeworks).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-features-legacy-decorator-file-order.js.mdx',
+    'common/main-config-features-legacy-decorator-file-order.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 ## `legacyMdx1`
 
@@ -83,6 +94,17 @@ Type: `boolean`
 
 Filter args with a "target" on the type from the render function.
 
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-features-arg-type-targets-v7.js.mdx',
+    'common/main-config-features-arg-type-targets-v7.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## On-demand story loading
 
 As your Storybook grows, it gets challenging to load all of your stories performantly, slowing down the loading times and yielding a large bundle. Out of the box, Storybook loads your stories on demand rather than during boot-up to improve the performance of your Storybook. If you need to load all of your stories during boot-up, you can disable this feature by setting the `storyStoreV7` feature flag to `false` in your configuration as follows:

docs/api/main-config-preview-main-template.md

@@ -23,6 +23,8 @@ Here's an example demonstrating the default template, which you can copy and cus
 
 <!-- prettier-ignore-end -->
 
+For reference, here's the default template:
+
 <details>
 <summary>Preview main page default template</summary>
 

docs/api/main-config-typescript.md

@@ -18,42 +18,88 @@ Type:
 
 Configures how Storybook handles [TypeScript files](../configure/typescript.md).
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/main-config-typescript.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
 ## `check`
 
 Type: `boolean`
 
 Optionally run [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin).
 
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-typescript-check.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## `checkOptions`
 
 Type: `CheckOptions`
 
 Options to pass to `fork-ts-checker-webpack-plugin`, if enabled. See [docs for available options](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/v4.1.6/README.md#options).
 
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-typescript-check-options.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## `reactDocgen`
 
 Type: `'react-docgen' | 'react-docgen-typescript' | false`
 
+Default:
+
+- `false`: if `@storybook/react` is not installed
+- `'react-docgen-typescript'`: if `@storybook/react` and `typescript` are installed
+- `'react-docgen'`: if `@storybook/react` is installed
+
 Configure which library, if any, Storybook uses to parse React components, [react-docgen](https://github.com/reactjs/react-docgen) or [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript). Set to `false` to disable parsing React components.
 
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-typescript-react-docgen.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## `reactDocgenTypescriptOptions`
 
 Type: `ReactDocgenTypescriptOptions`
 
 Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. See [docs for available options](https://github.com/hipstersmoothie/react-docgen-typescript-plugin).
 
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-typescript-react-docgen-typescript-options.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## `skipBabel`
 
 Type: `boolean`
 
 Disable parsing of TypeScript files through babel.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-typescript-skip-babel.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

docs/configure/typescript.md

@@ -12,7 +12,7 @@ Storybook's configuration file (i.e., `main.ts`) is defined as an ESM module wri
 
 <CodeSnippets
   paths={[
-    'common/main-config-typescript.ts.mdx',
+    'common/main-config-typical.ts.mdx',
   ]}
 />
 

docs/snippets/common/main-config-core-cross-origin-isolated.js.mdx

@@ -5,14 +5,8 @@ export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
-      },
-    },
+  core: {
+    crossOriginIsolated: true,
   },
 };
 ```

docs/snippets/common/main-config-core-cross-origin-isolated.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    crossOriginIsolated: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-core-disable-project-json.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    disableProjectJson: true,
+  },
+};
+```

docs/snippets/common/main-config-core-disable-project-json.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    disableProjectJson: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-core-disable-telemetry.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+};
+```

docs/snippets/common/main-config-core-disable-telemetry.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-core-disable-webpack-defaults.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    disableWebpackDefaults: true,
+  },
+};
+```

docs/snippets/common/main-config-core-disable-webpack-defaults.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    disableWebpackDefaults: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-docs-autodocs.js.mdx

@@ -6,7 +6,7 @@ export default {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   docs: {
-    autoDocs: 'tag',
+    autodocs: 'tag',
   },
 };
 ```

docs/snippets/common/main-config-docs-autodocs.ts.mdx

@@ -8,7 +8,7 @@ const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   docs: {
-    autoDocs: 'tag',
+    autodocs: 'tag',
   },
 };
 

docs/snippets/common/main-config-docs-default-name.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  docs: {
+    defaultName: 'Documentation',
+  },
+};
+```

docs/snippets/common/main-config-docs-default-name.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  docs: {
+    defaultName: 'Documentation',
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-docs-docs-mode.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  docs: {
+    docsMode: true,
+  },
+};
+```

docs/snippets/common/main-config-docs-docs-mode.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  docs: {
+    docsMode: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-features-arg-type-targets-v7.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  features: {
+    argTypeTargetsV7: true,
+  },
+};
+```

docs/snippets/common/main-config-features-arg-type-targets-v7.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  features: {
+    argTypeTargetsV7: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-features-legacy-decorator-file-order.js.mdx

@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  features: {
+    legacyDecoratorFileOrder: true,
+  },
+};
+```

docs/snippets/common/main-config-features-legacy-decorator-file-order.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  features: {
+    legacyDecoratorFileOrder: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-typescript-check-options.ts.mdx

@@ -0,0 +1,19 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  typescript: {
+    check: true,
+    checkOptions: {
+      eslint: true,
+    },
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-typescript-check.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  typescript: {
+    check: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-typescript-react-docgen-typescript-options.ts.mdx

@@ -8,11 +8,10 @@ const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   typescript: {
-    check: false,
-    checkOptions: {},
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
+      // 👇 Default prop filter, which excludes props from node_modules
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
     },
   },

docs/snippets/common/main-config-typescript-react-docgen.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;
+```

docs/snippets/common/main-config-typescript-skip-babel.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  typescript: {
+    skipBabel: true,
+  },
+};
+
+export default config;
+```

docs/snippets/common/storybook-main-extend-ts-config.ts.mdx

@@ -14,6 +14,7 @@ const config: StorybookConfig = {
         allowSyntheticDefaultImports: false,
         esModuleInterop: false,
       },
+      propFilter: () => true,
     },
   },
 };