From 1d00b24567f678d6ac997ee65cf5c5fe4fdcda1e Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 17 May 2023 11:38:48 -0600 Subject: [PATCH] Add examples for all main config sub properties --- docs/api/main-config-core.md | 66 +++++++++++++++---- docs/api/main-config-docs.md | 44 +++++++++---- docs/api/main-config-features.md | 24 ++++++- docs/api/main-config-preview-main-template.md | 2 + docs/api/main-config-typescript.md | 66 ++++++++++++++++--- docs/configure/typescript.md | 2 +- ...js.mdx => main-config-core-builder.js.mdx} | 0 ...ts.mdx => main-config-core-builder.ts.mdx} | 0 ...-config-core-cross-origin-isolated.js.mdx} | 10 +-- ...n-config-core-cross-origin-isolated.ts.mdx | 16 +++++ ...in-config-core-disable-project-json.js.mdx | 12 ++++ ...in-config-core-disable-project-json.ts.mdx | 16 +++++ .../main-config-core-disable-telemetry.js.mdx | 12 ++++ .../main-config-core-disable-telemetry.ts.mdx | 16 +++++ ...onfig-core-disable-webpack-defaults.js.mdx | 12 ++++ ...onfig-core-disable-webpack-defaults.ts.mdx | 16 +++++ ...s.mdx => main-config-docs-autodocs.js.mdx} | 2 +- ...s.mdx => main-config-docs-autodocs.ts.mdx} | 2 +- .../main-config-docs-default-name.js.mdx | 12 ++++ .../main-config-docs-default-name.ts.mdx | 16 +++++ .../common/main-config-docs-docs-mode.js.mdx | 12 ++++ .../common/main-config-docs-docs-mode.ts.mdx | 16 +++++ ...config-features-arg-type-targets-v7.js.mdx | 12 ++++ ...config-features-arg-type-targets-v7.ts.mdx | 16 +++++ ...eatures-legacy-decorator-file-order.js.mdx | 12 ++++ ...eatures-legacy-decorator-file-order.ts.mdx | 16 +++++ ...ain-config-typescript-check-options.ts.mdx | 19 ++++++ .../main-config-typescript-check.ts.mdx | 16 +++++ ...pt-react-docgen-typescript-options.ts.mdx} | 3 +- ...main-config-typescript-react-docgen.ts.mdx | 16 +++++ .../main-config-typescript-skip-babel.ts.mdx | 16 +++++ .../storybook-main-extend-ts-config.ts.mdx | 1 + 32 files changed, 455 insertions(+), 46 deletions(-) rename docs/snippets/common/{main-config-core.js.mdx => main-config-core-builder.js.mdx} (100%) rename docs/snippets/common/{main-config-core.ts.mdx => main-config-core-builder.ts.mdx} (100%) rename docs/snippets/common/{storybook-main-extend-ts-config.js.mdx => main-config-core-cross-origin-isolated.js.mdx} (55%) create mode 100644 docs/snippets/common/main-config-core-cross-origin-isolated.ts.mdx create mode 100644 docs/snippets/common/main-config-core-disable-project-json.js.mdx create mode 100644 docs/snippets/common/main-config-core-disable-project-json.ts.mdx create mode 100644 docs/snippets/common/main-config-core-disable-telemetry.js.mdx create mode 100644 docs/snippets/common/main-config-core-disable-telemetry.ts.mdx create mode 100644 docs/snippets/common/main-config-core-disable-webpack-defaults.js.mdx create mode 100644 docs/snippets/common/main-config-core-disable-webpack-defaults.ts.mdx rename docs/snippets/common/{main-config-docs.js.mdx => main-config-docs-autodocs.js.mdx} (92%) rename docs/snippets/common/{main-config-docs.ts.mdx => main-config-docs-autodocs.ts.mdx} (94%) create mode 100644 docs/snippets/common/main-config-docs-default-name.js.mdx create mode 100644 docs/snippets/common/main-config-docs-default-name.ts.mdx create mode 100644 docs/snippets/common/main-config-docs-docs-mode.js.mdx create mode 100644 docs/snippets/common/main-config-docs-docs-mode.ts.mdx create mode 100644 docs/snippets/common/main-config-features-arg-type-targets-v7.js.mdx create mode 100644 docs/snippets/common/main-config-features-arg-type-targets-v7.ts.mdx create mode 100644 docs/snippets/common/main-config-features-legacy-decorator-file-order.js.mdx create mode 100644 docs/snippets/common/main-config-features-legacy-decorator-file-order.ts.mdx create mode 100644 docs/snippets/common/main-config-typescript-check-options.ts.mdx create mode 100644 docs/snippets/common/main-config-typescript-check.ts.mdx rename docs/snippets/common/{main-config-typescript.ts.mdx => main-config-typescript-react-docgen-typescript-options.ts.mdx} (89%) create mode 100644 docs/snippets/common/main-config-typescript-react-docgen.ts.mdx create mode 100644 docs/snippets/common/main-config-typescript-skip-babel.ts.mdx diff --git a/docs/api/main-config-core.md b/docs/api/main-config-core.md index df5b273c981..42a90d7c409 100644 --- a/docs/api/main-config-core.md +++ b/docs/api/main-config-core.md @@ -21,17 +21,6 @@ Type: Configures Storybook's internal features. - - - - - - ## `builder` Type: @@ -46,6 +35,17 @@ Type: Configures Storybook's builder, [Vite](../builders/vite.md) or [Webpack](../builders/webpack.md). + + + + + + ## `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` + + + + + + ## `disableProjectJson` Type: `boolean` Disables the generation of `project.json`, a file containing Storybook metadata + + + + + + ## `disableTelemetry` Type: `boolean` Disables Storybook's [telemetry collection](../configure/telemetry.md). + + + + + + ## `disableWebpackDefaults` Type: `boolean` Disables Storybook's default Webpack configuration. + + + + + + ## `enableCrashReports` Type: `boolean` diff --git a/docs/api/main-config-docs.md b/docs/api/main-config-docs.md index 202e9b89416..c00ccf52442 100644 --- a/docs/api/main-config-docs.md +++ b/docs/api/main-config-docs.md @@ -16,17 +16,6 @@ Type: Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md). - - - - - - ## `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'` + + + + + + ## `defaultName` Type: `string` @@ -47,8 +47,30 @@ Default: `'Docs'` Name used for generated documentation pages. + + + + + + ## `docsMode` Type: `boolean` Only show documentation pages in the sidebar (usually set with the `--docs` CLI flag). + + + + + + diff --git a/docs/api/main-config-features.md b/docs/api/main-config-features.md index 4cd5bdc64ac..0a48c0a6c8d 100644 --- a/docs/api/main-config-features.md +++ b/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). + + + + + + ## `legacyMdx1` @@ -83,6 +94,17 @@ Type: `boolean` Filter args with a "target" on the type from the render function. + + + + + + ## 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: diff --git a/docs/api/main-config-preview-main-template.md b/docs/api/main-config-preview-main-template.md index 3a4b06c9099..d8d3beb0cfa 100644 --- a/docs/api/main-config-preview-main-template.md +++ b/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 +For reference, here's the default template: +
Preview main page default template diff --git a/docs/api/main-config-typescript.md b/docs/api/main-config-typescript.md index 650d0eddf70..817dfef92f7 100644 --- a/docs/api/main-config-typescript.md +++ b/docs/api/main-config-typescript.md @@ -18,42 +18,88 @@ Type: Configures how Storybook handles [TypeScript files](../configure/typescript.md). - - - - - - ## `check` Type: `boolean` Optionally run [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). + + + + + + ## `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). + + + + + + ## `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. + + + + + + ## `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). + + + + + + ## `skipBabel` Type: `boolean` Disable parsing of TypeScript files through babel. + + + + + + diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md index 6aa59fd6665..ba89ad2dcca 100644 --- a/docs/configure/typescript.md +++ b/docs/configure/typescript.md @@ -12,7 +12,7 @@ Storybook's configuration file (i.e., `main.ts`) is defined as an ESM module wri diff --git a/docs/snippets/common/main-config-core.js.mdx b/docs/snippets/common/main-config-core-builder.js.mdx similarity index 100% rename from docs/snippets/common/main-config-core.js.mdx rename to docs/snippets/common/main-config-core-builder.js.mdx diff --git a/docs/snippets/common/main-config-core.ts.mdx b/docs/snippets/common/main-config-core-builder.ts.mdx similarity index 100% rename from docs/snippets/common/main-config-core.ts.mdx rename to docs/snippets/common/main-config-core-builder.ts.mdx diff --git a/docs/snippets/common/storybook-main-extend-ts-config.js.mdx b/docs/snippets/common/main-config-core-cross-origin-isolated.js.mdx similarity index 55% rename from docs/snippets/common/storybook-main-extend-ts-config.js.mdx rename to docs/snippets/common/main-config-core-cross-origin-isolated.js.mdx index fb1b701edb5..209e6ee1c49 100644 --- a/docs/snippets/common/storybook-main-extend-ts-config.js.mdx +++ b/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, }, }; ``` diff --git a/docs/snippets/common/main-config-core-cross-origin-isolated.ts.mdx b/docs/snippets/common/main-config-core-cross-origin-isolated.ts.mdx new file mode 100644 index 00000000000..7032a83d0c8 --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-core-disable-project-json.js.mdx b/docs/snippets/common/main-config-core-disable-project-json.js.mdx new file mode 100644 index 00000000000..7a5fcc79c1e --- /dev/null +++ b/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, + }, +}; +``` diff --git a/docs/snippets/common/main-config-core-disable-project-json.ts.mdx b/docs/snippets/common/main-config-core-disable-project-json.ts.mdx new file mode 100644 index 00000000000..6f460458d02 --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-core-disable-telemetry.js.mdx b/docs/snippets/common/main-config-core-disable-telemetry.js.mdx new file mode 100644 index 00000000000..db96b39316c --- /dev/null +++ b/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, + }, +}; +``` diff --git a/docs/snippets/common/main-config-core-disable-telemetry.ts.mdx b/docs/snippets/common/main-config-core-disable-telemetry.ts.mdx new file mode 100644 index 00000000000..3f1b9f1d4d7 --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-core-disable-webpack-defaults.js.mdx b/docs/snippets/common/main-config-core-disable-webpack-defaults.js.mdx new file mode 100644 index 00000000000..2b8cfd6bb30 --- /dev/null +++ b/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, + }, +}; +``` diff --git a/docs/snippets/common/main-config-core-disable-webpack-defaults.ts.mdx b/docs/snippets/common/main-config-core-disable-webpack-defaults.ts.mdx new file mode 100644 index 00000000000..c065ee16444 --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-docs.js.mdx b/docs/snippets/common/main-config-docs-autodocs.js.mdx similarity index 92% rename from docs/snippets/common/main-config-docs.js.mdx rename to docs/snippets/common/main-config-docs-autodocs.js.mdx index 570057fe413..240f4461b03 100644 --- a/docs/snippets/common/main-config-docs.js.mdx +++ b/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', }, }; ``` diff --git a/docs/snippets/common/main-config-docs.ts.mdx b/docs/snippets/common/main-config-docs-autodocs.ts.mdx similarity index 94% rename from docs/snippets/common/main-config-docs.ts.mdx rename to docs/snippets/common/main-config-docs-autodocs.ts.mdx index 657a8a47b48..7b60bbba50c 100644 --- a/docs/snippets/common/main-config-docs.ts.mdx +++ b/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', }, }; diff --git a/docs/snippets/common/main-config-docs-default-name.js.mdx b/docs/snippets/common/main-config-docs-default-name.js.mdx new file mode 100644 index 00000000000..a0587882bce --- /dev/null +++ b/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', + }, +}; +``` diff --git a/docs/snippets/common/main-config-docs-default-name.ts.mdx b/docs/snippets/common/main-config-docs-default-name.ts.mdx new file mode 100644 index 00000000000..95453ebd19c --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-docs-docs-mode.js.mdx b/docs/snippets/common/main-config-docs-docs-mode.js.mdx new file mode 100644 index 00000000000..e33b087401e --- /dev/null +++ b/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, + }, +}; +``` diff --git a/docs/snippets/common/main-config-docs-docs-mode.ts.mdx b/docs/snippets/common/main-config-docs-docs-mode.ts.mdx new file mode 100644 index 00000000000..c030c9bd541 --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-features-arg-type-targets-v7.js.mdx b/docs/snippets/common/main-config-features-arg-type-targets-v7.js.mdx new file mode 100644 index 00000000000..4c2c51d2180 --- /dev/null +++ b/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, + }, +}; +``` diff --git a/docs/snippets/common/main-config-features-arg-type-targets-v7.ts.mdx b/docs/snippets/common/main-config-features-arg-type-targets-v7.ts.mdx new file mode 100644 index 00000000000..8d50c307e16 --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-features-legacy-decorator-file-order.js.mdx b/docs/snippets/common/main-config-features-legacy-decorator-file-order.js.mdx new file mode 100644 index 00000000000..27177c82775 --- /dev/null +++ b/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, + }, +}; +``` diff --git a/docs/snippets/common/main-config-features-legacy-decorator-file-order.ts.mdx b/docs/snippets/common/main-config-features-legacy-decorator-file-order.ts.mdx new file mode 100644 index 00000000000..e3d7ee7da2c --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-typescript-check-options.ts.mdx b/docs/snippets/common/main-config-typescript-check-options.ts.mdx new file mode 100644 index 00000000000..8c11fdf51c4 --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-typescript-check.ts.mdx b/docs/snippets/common/main-config-typescript-check.ts.mdx new file mode 100644 index 00000000000..55cee34269a --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-typescript.ts.mdx b/docs/snippets/common/main-config-typescript-react-docgen-typescript-options.ts.mdx similarity index 89% rename from docs/snippets/common/main-config-typescript.ts.mdx rename to docs/snippets/common/main-config-typescript-react-docgen-typescript-options.ts.mdx index 09db020fd6c..2dae2c64ad8 100644 --- a/docs/snippets/common/main-config-typescript.ts.mdx +++ b/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), }, }, diff --git a/docs/snippets/common/main-config-typescript-react-docgen.ts.mdx b/docs/snippets/common/main-config-typescript-react-docgen.ts.mdx new file mode 100644 index 00000000000..9786b0e949f --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx b/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx new file mode 100644 index 00000000000..b27a3cab853 --- /dev/null +++ b/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; +``` diff --git a/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx b/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx index 58b5f2468a9..8f8cce570d1 100644 --- a/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx +++ b/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx @@ -14,6 +14,7 @@ const config: StorybookConfig = { allowSyntheticDefaultImports: false, esModuleInterop: false, }, + propFilter: () => true, }, }, };