diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md index a5c0375ba85f..7ff0d885ec0a 100755 --- a/code/addons/a11y/README.md +++ b/code/addons/a11y/README.md @@ -17,7 +17,7 @@ $ yarn add @storybook/addon-a11y --dev Add this line to your `main.js` file (create this file inside your Storybook config directory if needed). ```js -module.exports = { +export default { addons: ['@storybook/addon-a11y'], }; ``` diff --git a/code/addons/actions/README.md b/code/addons/actions/README.md index 9d78378eb2a8..71bf4a2f53d6 100644 --- a/code/addons/actions/README.md +++ b/code/addons/actions/README.md @@ -17,7 +17,7 @@ npm i -D @storybook/addon-actions Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): ```js -module.exports = { +export default { addons: ['@storybook/addon-actions'], }; ``` diff --git a/code/addons/backgrounds/README.md b/code/addons/backgrounds/README.md index d261edfcb94a..62c88e19a7e7 100644 --- a/code/addons/backgrounds/README.md +++ b/code/addons/backgrounds/README.md @@ -19,7 +19,7 @@ npm i -D @storybook/addon-backgrounds Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): ```js -module.exports = { +export default { addons: ['@storybook/addon-backgrounds'], }; ``` diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md index 1778633fe659..cb37957a0766 100644 --- a/code/addons/controls/README.md +++ b/code/addons/controls/README.md @@ -17,7 +17,7 @@ npm i -D @storybook/addon-controls Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): ```js -module.exports = { +export default { addons: ['@storybook/addon-controls'], }; ``` diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index d1c70d818f9c..fe6a5961db21 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -99,9 +99,9 @@ yarn add -D react Then add the following to your `.storybook/main.js`: ```js -module.exports = { +export default { stories: [ - '../src/**/*.mdx)', // 👈 Add this, to match your project's structure + '../src/**/*.mdx', // 👈 Add this, to match your project's structure '../src/**/*.stories.@(js|jsx|ts|tsx)', ], addons: [ @@ -138,7 +138,7 @@ Add the following to your Jest configuration: The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options: ```js -module.exports = { +export default { addons: [ { name: '@storybook/addon-docs', diff --git a/code/addons/docs/angular/README.md b/code/addons/docs/angular/README.md index 56ecb7285da8..f36e613bf874 100644 --- a/code/addons/docs/angular/README.md +++ b/code/addons/docs/angular/README.md @@ -31,7 +31,7 @@ yarn add -D @storybook/addon-docs@next Then add the following to your `.storybook/main.js` exports: ```js -module.exports = { +export default { addons: ['@storybook/addon-docs'], }; ``` @@ -135,9 +135,9 @@ yarn add -D react Then update your `.storybook/main.js` to make sure you load MDX files: -```ts -module.exports = { - stories: ['../src/stories/**/*.stories.@(js|ts|mdx)'], +```js +export default { + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], }; ``` diff --git a/code/addons/docs/common/README.md b/code/addons/docs/common/README.md index de2a4d068f11..ae232074aea1 100644 --- a/code/addons/docs/common/README.md +++ b/code/addons/docs/common/README.md @@ -21,7 +21,7 @@ yarn add -D @storybook/addon-docs@next Then add the following to your `.storybook/main.js` addons: ```js -module.exports = { +export default { addons: ['@storybook/addon-docs'], }; ``` @@ -43,7 +43,7 @@ yarn add -D react Then update your `.storybook/main.js` to make sure you load MDX files: ```js -module.exports = { +export default { stories: ['../src/stories/**/*.stories.@(js|mdx)'], }; ``` diff --git a/code/addons/docs/ember/README.md b/code/addons/docs/ember/README.md index 9e9dfd9dd736..487c621b1fe9 100644 --- a/code/addons/docs/ember/README.md +++ b/code/addons/docs/ember/README.md @@ -24,7 +24,7 @@ yarn add -D @storybook/addon-docs@next Then add the following to your `.storybook/main.js` addons: ```js -module.exports = { +export default { addons: ['@storybook/addon-docs'], }; ``` @@ -87,7 +87,7 @@ yarn add -D react Then update your `.storybook/main.js` to make sure you load MDX files: ```js -module.exports = { +export default { stories: ['../src/stories/**/*.stories.@(js|mdx)'], }; ``` diff --git a/code/addons/docs/react/README.md b/code/addons/docs/react/README.md index 42f669c00b19..5200fea3bd2b 100644 --- a/code/addons/docs/react/README.md +++ b/code/addons/docs/react/README.md @@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next Then add the following to your `.storybook/main.js` list of `addons`: ```js -module.exports = { +export default { // other settings addons: ['@storybook/addon-docs']; } @@ -70,7 +70,7 @@ storiesOf('InfoButton', module) Then update your `.storybook/main.js` to make sure you load MDX files: ```js -module.exports = { +export default { stories: ['../src/stories/**/*.stories.@(js|mdx)'], }; ``` @@ -115,7 +115,7 @@ If you're using TypeScript, there are two different options for generating props You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen): ```js -module.exports = { +export default { typescript: { // also valid 'react-docgen-typescript' | false reactDocgen: 'react-docgen', diff --git a/code/addons/docs/vue/README.md b/code/addons/docs/vue/README.md index 1780880413eb..fe4ca99b1cfc 100644 --- a/code/addons/docs/vue/README.md +++ b/code/addons/docs/vue/README.md @@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next Then add the following to your `.storybook/main.js` addons: ```js -module.exports = { +export default { addons: ['@storybook/addon-docs'], }; ``` @@ -39,9 +39,9 @@ module.exports = { The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app: ```js -const path = require('path'); +import path from 'path'; -module.exports = { +export default { addons: [ { name: '@storybook/addon-docs', @@ -102,7 +102,7 @@ yarn add -D react Then update your `.storybook/main.js` to make sure you load MDX files: ```js -module.exports = { +export default { stories: ['../src/stories/**/*.stories.@(js|mdx)'], }; ``` diff --git a/code/addons/docs/vue3/README.md b/code/addons/docs/vue3/README.md index 7496a6644dc6..fe65fa2894af 100644 --- a/code/addons/docs/vue3/README.md +++ b/code/addons/docs/vue3/README.md @@ -29,7 +29,7 @@ yarn add -D @storybook/addon-docs@next Then add the following to your `.storybook/main.js` addons: ```js -module.exports = { +export default { addons: ['@storybook/addon-docs'], }; ``` @@ -39,9 +39,9 @@ module.exports = { The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app: ```js -const path = require('path'); +import path from 'path'; -module.exports = { +export default { addons: [ { name: '@storybook/addon-docs', @@ -102,7 +102,7 @@ yarn add -D react Then update your `.storybook/main.js` to make sure you load MDX files: ```js -module.exports = { +export default { stories: ['../src/stories/**/*.stories.@(js|mdx)'], }; ``` diff --git a/code/addons/essentials/README.md b/code/addons/essentials/README.md index 80d038134f73..bdc351de5b74 100644 --- a/code/addons/essentials/README.md +++ b/code/addons/essentials/README.md @@ -28,7 +28,7 @@ npm install --save-dev @storybook/addon-essentials And then add the following line to your `.storybook/main.js`: ```js -module.exports = { +export default { addons: ['@storybook/addon-essentials'], }; ``` @@ -44,7 +44,7 @@ If you want to reconfigure an addon, simply install that addon per that addon's You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`: ```js -module.exports = { +export default { addons: [{ name: '@storybook/addon-essentials', options: { diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md index b881349ef6f0..f6bf3fa293e3 100644 --- a/code/addons/highlight/README.md +++ b/code/addons/highlight/README.md @@ -17,7 +17,7 @@ npm i -D @storybook/addon-highlight Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js`: ```js -module.exports = { +export default { addons: ['@storybook/addon-highlight'], }; ``` diff --git a/code/addons/interactions/README.md b/code/addons/interactions/README.md index 0cd9e62bc3a5..f62364df6dda 100644 --- a/code/addons/interactions/README.md +++ b/code/addons/interactions/README.md @@ -15,7 +15,7 @@ yarn add -D @storybook/addon-interactions @storybook/jest @storybook/testing-lib within `.storybook/main.js`: ```js -module.exports = { +export default { addons: ['@storybook/addon-interactions'], }; ``` @@ -28,7 +28,7 @@ Step debugging features are experimental and disabled by default. To enable them ```js // main.js -module.exports = { +export default { features: { interactionsDebugger: true, }, diff --git a/code/addons/jest/README.md b/code/addons/jest/README.md index 87444270ff3c..ebb14be60382 100644 --- a/code/addons/jest/README.md +++ b/code/addons/jest/README.md @@ -23,7 +23,7 @@ Or if you're using yarn as a package manager: Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): ```js -module.exports = { +export default { addons: ['@storybook/addon-jest'], }; ``` diff --git a/code/addons/links/README.md b/code/addons/links/README.md index b8e1d7e4e5ef..144e92d11797 100644 --- a/code/addons/links/README.md +++ b/code/addons/links/README.md @@ -15,7 +15,7 @@ yarn add -D @storybook/addon-links within `.storybook/main.js`: ```js -module.exports = { +export default { addons: ['@storybook/addon-links'], }; ``` diff --git a/code/addons/measure/README.md b/code/addons/measure/README.md index 99638a461da3..ca1387d474c8 100644 --- a/code/addons/measure/README.md +++ b/code/addons/measure/README.md @@ -21,7 +21,7 @@ npm i -D @storybook/addon-measure Add `"@storybook/addon-measure"` to the addons array in your `.storybook/main.js`: ```js -module.exports = { +export default { addons: ['@storybook/addon-measure'], }; ``` diff --git a/code/addons/outline/README.md b/code/addons/outline/README.md index bbec1211d849..301c140c3cff 100644 --- a/code/addons/outline/README.md +++ b/code/addons/outline/README.md @@ -15,7 +15,7 @@ npm i -D @storybook/addon-outline Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): ```js -module.exports = { +export default { addons: ['@storybook/addon-outline'], }; ``` diff --git a/code/addons/storyshots-core/README.md b/code/addons/storyshots-core/README.md index 22881b8b14ec..4da0ba29673f 100644 --- a/code/addons/storyshots-core/README.md +++ b/code/addons/storyshots-core/README.md @@ -723,7 +723,7 @@ If you use [Component Story Format](https://storybook.js.org/docs/react/api/csf) ```js // jest.config.js -module.exports = { +export default { transform: { '^.+\\.stories\\.jsx?$': '@storybook/addon-storyshots/injectFileName', '^.+\\.jsx?$': 'babel-jest', diff --git a/code/addons/storysource/README.md b/code/addons/storysource/README.md index 3f292dd3399c..7d739f85ceba 100644 --- a/code/addons/storysource/README.md +++ b/code/addons/storysource/README.md @@ -26,7 +26,7 @@ You can add configuration for this addon by using a preset or by using the addon Add the following to your `.storybook/main.js` exports: ```js -module.exports = { +export default { addons: ['@storybook/addon-storysource'], }; ``` @@ -34,7 +34,7 @@ module.exports = { You can pass configurations into the addon-storysource loader in your `.storybook/main.js` file, e.g.: ```js -module.exports = { +export default { addons: [ { name: '@storybook/addon-storysource', @@ -67,7 +67,7 @@ Storybook 6.0 introduced an unintentional change to `source-loader`, in which on If you're using `addon-docs`: ```js -module.exports = { +export default { addons: [ { name: '@storybook/addon-docs', @@ -84,7 +84,7 @@ module.exports = { If not: ```js -module.exports = { +export default { addons: [ { name: '@storybook/addon-storysource', diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md index 46f3db9de9de..0de5d58767be 100644 --- a/code/addons/toolbars/README.md +++ b/code/addons/toolbars/README.md @@ -21,7 +21,7 @@ npm i -D @storybook/addon-toolbars Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): ```js -module.exports = { +export default { addons: ['@storybook/addon-toolbars'], }; ``` diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md index 0c52306229d1..196c5e0b0aa5 100644 --- a/code/addons/viewport/README.md +++ b/code/addons/viewport/README.md @@ -17,7 +17,7 @@ npm i -D @storybook/addon-viewport Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): ```js -module.exports = { +export default { addons: ['@storybook/addon-viewport'], }; ``` diff --git a/code/frameworks/ember/README.md b/code/frameworks/ember/README.md index f15503cd24ca..7f623c163d45 100644 --- a/code/frameworks/ember/README.md +++ b/code/frameworks/ember/README.md @@ -39,11 +39,14 @@ This example also assume that you already have the package in your `package.json In your `.storybook/main.js` you can add the following lines: ```javascript -const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin'); - -module.exports = { - emberOptions: { - polyfills: [namedBlockPolyfill], +import namedBlockPolyfill from 'ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin'; + +export default { + framework: { + name: '@storybook/ember', + options: { + polyfills: [namedBlockPolyfill], + } }, [...] }; diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index c31af8862c7e..284b9c2bc8fe 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -116,7 +116,7 @@ Update your `main.js` to change the framework property: ```js // .storybook/main.js -module.exports = { +export default { // ... framework: { // name: '@storybook/react-webpack5', // Remove this @@ -130,7 +130,7 @@ If you were using Storybook plugins to integrate with Next.js, those are no long ```js // .storybook/main.js -module.exports = { +export default { // ... addons: [ // ... @@ -151,9 +151,9 @@ For example: ```js // .storybook/main.js -const path = require('path'); +import path from 'path'; -module.exports = { +export default { // ... framework: { name: '@storybook/nextjs', @@ -244,7 +244,7 @@ You have to tell Storybook where the `fonts` directory is located. The `from` va ```js // .storybook/main.js -module.exports = { +export default { ... "staticDirs": [ { @@ -618,9 +618,9 @@ This will automatically include any of your [custom sass configurations](https:/ ```js // next.config.js -const path = require('path'); +import path from 'path'; -module.exports = { +export default { // Any options here are included in Sass compilation for your stories sassOptions: { includePaths: [path.join(__dirname, 'styles')], @@ -784,7 +784,7 @@ Below is an example of how to add svgr support to Storybook with this framework. ```js // .storybook/main.js -module.exports = { +export default { // ... webpackFinal: async (config) => { // This modifies the existing image rule to exclude .svg files diff --git a/code/frameworks/preact-vite/README.md b/code/frameworks/preact-vite/README.md index 4a38f4b8c447..e6dae7bcfdd4 100644 --- a/code/frameworks/preact-vite/README.md +++ b/code/frameworks/preact-vite/README.md @@ -37,7 +37,7 @@ Update your `main.js` to change the framework property: ```js // .storybook/main.js -module.exports = { +export default { // ... framework: { name: '@storybook/preact-vite', // <- Change this diff --git a/code/frameworks/server-webpack5/README.md b/code/frameworks/server-webpack5/README.md index 20609d406cfa..e8178180cc9b 100644 --- a/code/frameworks/server-webpack5/README.md +++ b/code/frameworks/server-webpack5/README.md @@ -55,7 +55,7 @@ To write a story, use whatever API is natural for your server-side rendering fra In your `.storybook/main.js` you simply provide a glob specifying the location of those JSON files, e.g. ```js -module.exports = { +export default { stories: ['../stories/**/*.stories.json'], }; ``` diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 7c69390208df..ed9eb176815f 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -69,7 +69,7 @@ npx storybook@next upgrade --prerelease When running the `upgrade` command above you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below. -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.cjs` the automigration will have removed it, as it is no longer supported. +Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.js` the automigration will have removed it, as it is no longer supported. #### Manual migration @@ -79,17 +79,17 @@ Install the framework: yarn add -D @storybook/sveltekit@next ``` -Update your `main.cjs` to change the framework property: +Update your `main.js` to change the framework property: ```js -// .storybook/main.cjs -module.exports = { +// .storybook/main.js +export default { ... framework: '@storybook/sveltekit', }; ``` -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.cjs` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below. +Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.js` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below. Remove any redundant dependencies, if you have them: @@ -110,7 +110,7 @@ yarn remove @storybook/builder-vite > ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared > ``` -You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.cjs`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0. +You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0. ### Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview diff --git a/code/frameworks/web-components-webpack5/README.md b/code/frameworks/web-components-webpack5/README.md index 2239de4e631d..d06f383fc9a9 100644 --- a/code/frameworks/web-components-webpack5/README.md +++ b/code/frameworks/web-components-webpack5/README.md @@ -37,7 +37,7 @@ For example if you have a library called `my-library` which is in ES2017 then yo ```js // .storybook/main.js -module.exports = { +export default { webpackFinal: async (config) => { // find web-components rule for extra transpilation const webComponentsRule = config.module.rules.find( diff --git a/code/lib/builder-vite/README.md b/code/lib/builder-vite/README.md index 57b928f954b9..15b4f8a48425 100644 --- a/code/lib/builder-vite/README.md +++ b/code/lib/builder-vite/README.md @@ -134,16 +134,6 @@ const config: StorybookConfig = { export default config; ``` -Or alternatively, you can use named exports: - -```typescript -import type { ViteFinal } from '@storybook/builder-vite'; - -export const viteFinal: ViteFinal = async (config, options) => { - // modify and return config -}; -``` - See [Customize Vite config](#customize-vite-config) for details about using `viteFinal`. ### React Docgen @@ -151,7 +141,7 @@ See [Customize Vite config](#customize-vite-config) for details about using `vit Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue, and React, and there are two docgen options when using react, `react-docgen` and `react-docgen-typescript`. You can learn more about the pros/cons of each in [this gist](https://gist.github.com/shilman/036313ffa3af52ca986b375d90ea46b0). By default, if we find a `typescript` dependency in your `package.json` file, we will assume you're using typescript and will choose `react-docgen-typescript`. You can change this by setting the `typescript.reactDocgen` option in your `.storybook/main.js` file: ```javascript -module.exports = { +export default { typescript: { reactDocgen: 'react-docgen` } diff --git a/code/lib/builder-webpack5/README.md b/code/lib/builder-webpack5/README.md index a5ee5d258da9..ed453d16d3ca 100644 --- a/code/lib/builder-webpack5/README.md +++ b/code/lib/builder-webpack5/README.md @@ -3,7 +3,7 @@ Builder implemented with `webpack5` and `webpack5`-compatible loaders/plugins/config, used by `@storybook/core-server` to build the preview iframe. ```js -module.exports = { +export default { core: { builder: 'webpack5', }, diff --git a/docs/faq.md b/docs/faq.md index f792e661fb34..29d3df0346bc 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -39,7 +39,7 @@ Here are some answers to frequently asked questions. If you have a question, you In case you are having trouble with Angular Ivy you can deactivate it in your `main.js`: ```javascript -module.exports = { +export default { stories: [ /* ... */ ], @@ -60,7 +60,7 @@ module.exports = { In case you postinstall ngcc, you can disable it: ```javascript -module.exports = { +export default { stories: [ /* ... */ ], @@ -102,7 +102,7 @@ Next automatically defines `React` for all of your files via a babel plugin. In You can generally reuse webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example: ```js -module.exports = { +export default { webpackFinal: async (baseConfig) => { const nextConfig = require('/path/to/next.config.js'); @@ -126,7 +126,7 @@ FAST_REFRESH=true - Or you can set the following properties in your `.storybook/main.js` files: ```js -module.exports = { +export default { framework: { name: '@storybook/react-webpack5', options: { @@ -147,7 +147,7 @@ If your installed React Version equals or is higher than 18.0.0, the new React R You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js` file: ```js -module.exports = { +export default { framework: { name: '@storybook/react-webpack5', options: { @@ -178,7 +178,7 @@ If you're adding Storybook's dependencies manually, make sure you include the [` ```js // .storybook/main.js -module.exports = { +export default { addons: ['@storybook/addon-controls'], }; ``` diff --git a/docs/snippets/common/component-story-configuration-custom.js.mdx b/docs/snippets/common/component-story-configuration-custom.js.mdx index 64fd1aae292d..b1f892050351 100644 --- a/docs/snippets/common/component-story-configuration-custom.js.mdx +++ b/docs/snippets/common/component-story-configuration-custom.js.mdx @@ -1,7 +1,7 @@ ```js // ./storybook/main.js -module.exports = { +export default { stories: [{ directory: '../src', files: '*.story.tsx', titlePrefix: 'Foo' }], }; ``` diff --git a/docs/snippets/common/my-addon-babel-configuration.js.mdx b/docs/snippets/common/my-addon-babel-configuration.js.mdx index d5a8a921c813..7fdc781547ae 100644 --- a/docs/snippets/common/my-addon-babel-configuration.js.mdx +++ b/docs/snippets/common/my-addon-babel-configuration.js.mdx @@ -1,7 +1,7 @@ ```js // /my-addon/.babelrc.js -module.exports = { +export default { presets: ['@babel/preset-env', '@babel/preset-react'], }; ``` diff --git a/docs/snippets/common/my-addon-preset-implementation.js.mdx b/docs/snippets/common/my-addon-preset-implementation.js.mdx index 7421bb58cb4d..fad71a878675 100644 --- a/docs/snippets/common/my-addon-preset-implementation.js.mdx +++ b/docs/snippets/common/my-addon-preset-implementation.js.mdx @@ -5,5 +5,5 @@ function managerEntries(entry = []) { return [...entry, require.resolve('./register')]; //👈 Addon implementation } -module.exports = { managerEntries }; +export default { managerEntries }; ``` diff --git a/docs/snippets/common/my-addon-storybook-registration.js.mdx b/docs/snippets/common/my-addon-storybook-registration.js.mdx index b5f212b519d7..b8b01ec48d2d 100644 --- a/docs/snippets/common/my-addon-storybook-registration.js.mdx +++ b/docs/snippets/common/my-addon-storybook-registration.js.mdx @@ -1,7 +1,7 @@ ```js // /my-addon/.storybook/main.js -module.exports = { +export default { stories: [], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-a11y-register.js.mdx b/docs/snippets/common/storybook-a11y-register.js.mdx index 6e2f76e795d1..9641345c0e78 100644 --- a/docs/snippets/common/storybook-a11y-register.js.mdx +++ b/docs/snippets/common/storybook-a11y-register.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ // Other Storybook addons diff --git a/docs/snippets/common/storybook-addon-interaction-registration.js.mdx b/docs/snippets/common/storybook-addon-interaction-registration.js.mdx index d1a8d7f9289a..56c0089c58d4 100644 --- a/docs/snippets/common/storybook-addon-interaction-registration.js.mdx +++ b/docs/snippets/common/storybook-addon-interaction-registration.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories:[], addons:[ // Other Storybook addons diff --git a/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx b/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx index 03fc24f7d6f9..58e8d1cc5271 100644 --- a/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx +++ b/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx @@ -9,7 +9,7 @@ const config = (entry = [], options) => { return [...entry, require.resolve('my-other-addon/addDecorator')]; }; -module.exports = { +export default { managerEntries, config, }; diff --git a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx index d8255e1d3c56..b999473a8098 100644 --- a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx +++ b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: ['../src/**/*.stories.@(js|ts)'], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx b/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx index 064577d66d89..0cc90e6ed1e1 100644 --- a/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx +++ b/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [ //👇 Your documentation written in MDX along with your stories goes here '../src/**/*.mdx', diff --git a/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx b/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx index fe2e45122adc..de4f2e5d4f8d 100644 --- a/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx +++ b/docs/snippets/common/storybook-coverage-addon-config-options.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [], addons: [ // Other Storybook addons diff --git a/docs/snippets/common/storybook-coverage-addon-registration.js.mdx b/docs/snippets/common/storybook-coverage-addon-registration.js.mdx index 01b6bb786b1d..48bcba201457 100644 --- a/docs/snippets/common/storybook-coverage-addon-registration.js.mdx +++ b/docs/snippets/common/storybook-coverage-addon-registration.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [], addons: [ // Other Storybook addons diff --git a/docs/snippets/common/storybook-coverage-report-vue.js.mdx b/docs/snippets/common/storybook-coverage-report-vue.js.mdx index 55124e022e7b..ba28ca0562d9 100644 --- a/docs/snippets/common/storybook-coverage-report-vue.js.mdx +++ b/docs/snippets/common/storybook-coverage-report-vue.js.mdx @@ -1,7 +1,7 @@ ```js // .nyc.config.js -module.exports = { +export default { // Other configuration options extension: ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue'], }; diff --git a/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx b/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx index 373e9ac6ed7a..4aada839ed49 100644 --- a/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx +++ b/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [], addons: [ // Other Storybook addons diff --git a/docs/snippets/common/storybook-framework-config-options.js.mdx b/docs/snippets/common/storybook-framework-config-options.js.mdx index 696ffa59c4ed..4c5c70f6e5c0 100644 --- a/docs/snippets/common/storybook-framework-config-options.js.mdx +++ b/docs/snippets/common/storybook-framework-config-options.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: ['../src/**/*.stories.@(js|ts)'], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-interactions-addon-registration.js.mdx b/docs/snippets/common/storybook-interactions-addon-registration.js.mdx index 3cdcdfec05e7..fd83272ee1be 100644 --- a/docs/snippets/common/storybook-interactions-addon-registration.js.mdx +++ b/docs/snippets/common/storybook-interactions-addon-registration.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [], addons: [ // Other Storybook addons diff --git a/docs/snippets/common/storybook-main-add-sass-config.js.mdx b/docs/snippets/common/storybook-main-add-sass-config.js.mdx index 30819aff8f94..a62eab079f3c 100644 --- a/docs/snippets/common/storybook-main-add-sass-config.js.mdx +++ b/docs/snippets/common/storybook-main-add-sass-config.js.mdx @@ -1,10 +1,10 @@ ```js // .storybook/main.js -const path = require('path'); +import path from 'path'; // Export a function. Accept the base config as the only param. -module.exports = { +export default { webpackFinal: async (config, { configType }) => { // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. diff --git a/docs/snippets/common/storybook-main-add-ts-config.js.mdx b/docs/snippets/common/storybook-main-add-ts-config.js.mdx index c24ef5b49241..a2c2f566a926 100644 --- a/docs/snippets/common/storybook-main-add-ts-config.js.mdx +++ b/docs/snippets/common/storybook-main-add-ts-config.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [], addons: [], typescript: { diff --git a/docs/snippets/common/storybook-main-advanced-config-example.js.mdx b/docs/snippets/common/storybook-main-advanced-config-example.js.mdx index 705163e04af5..6f9085749fb5 100644 --- a/docs/snippets/common/storybook-main-advanced-config-example.js.mdx +++ b/docs/snippets/common/storybook-main-advanced-config-example.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { managerWebpack: async (config, options) => { // update config here return config; diff --git a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx index 64a56a896644..7a8a7dcd3877 100644 --- a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx +++ b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [{ directory: '../src', titlePrefix: 'Custom' }], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx b/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx index 401749110586..95c4026d8aaf 100644 --- a/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx +++ b/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [], addons: [], features: { diff --git a/docs/snippets/common/storybook-main-config-remark-options.js.mdx b/docs/snippets/common/storybook-main-config-remark-options.js.mdx index 00237fca51fd..91d1a76f8c6a 100644 --- a/docs/snippets/common/storybook-main-config-remark-options.js.mdx +++ b/docs/snippets/common/storybook-main-config-remark-options.js.mdx @@ -1,9 +1,9 @@ ```js // .storybook/main.js -const remarkGfm = require('remark-gfm'); +import remarkGfm from 'remark-gfm'; -module.exports = { +export default { stories: ['../src/**/*.stories.@(js|ts)'], addons: [ // Other addons go here diff --git a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx index 9a9c734ba71d..5f38866fbdb5 100644 --- a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx +++ b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx @@ -1,7 +1,7 @@ ```js // ./storybook/main.js -module.exports = { +export default { stories: ['../src'], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-main-csf-indexer.js.mdx b/docs/snippets/common/storybook-main-csf-indexer.js.mdx index 55ffd44d3b71..9bc66e9e9808 100644 --- a/docs/snippets/common/storybook-main-csf-indexer.js.mdx +++ b/docs/snippets/common/storybook-main-csf-indexer.js.mdx @@ -1,10 +1,10 @@ ```js // .storybook/main.js -const { readFileSync } = require('fs'); -const { loadCsf } = require('@storybook/csf-tools'); +import { readFileSync } from 'fs'; +import { loadCsf } from '@storybook/csf-tools'; -module.exports = { +export default { storyIndexers = (indexers) => { const indexer = async (fileName, opts) => { const code = readFileSync(fileName, { encoding: 'utf-8' }); diff --git a/docs/snippets/common/storybook-main-custom-babel-config.js.mdx b/docs/snippets/common/storybook-main-custom-babel-config.js.mdx index 11d62a0a2ecc..6fe0cf90d9bd 100644 --- a/docs/snippets/common/storybook-main-custom-babel-config.js.mdx +++ b/docs/snippets/common/storybook-main-custom-babel-config.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [], addons: [], babel: async (options) => ({ diff --git a/docs/snippets/common/storybook-main-default-essentials-register.js.mdx b/docs/snippets/common/storybook-main-default-essentials-register.js.mdx index b04219130f1a..c4ac970deedc 100644 --- a/docs/snippets/common/storybook-main-default-essentials-register.js.mdx +++ b/docs/snippets/common/storybook-main-default-essentials-register.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { addons: ['@storybook/addon-essentials'], }; ``` diff --git a/docs/snippets/common/storybook-main-default-setup.js.mdx b/docs/snippets/common/storybook-main-default-setup.js.mdx index 9a70b3927cba..112e808c7de2 100644 --- a/docs/snippets/common/storybook-main-default-setup.js.mdx +++ b/docs/snippets/common/storybook-main-default-setup.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], staticDirs: ['../public'], addons: [ diff --git a/docs/snippets/common/storybook-main-disable-addon.js.mdx b/docs/snippets/common/storybook-main-disable-addon.js.mdx index b769b2ebef55..db60484817bd 100644 --- a/docs/snippets/common/storybook-main-disable-addon.js.mdx +++ b/docs/snippets/common/storybook-main-disable-addon.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { addons: [ { name: '@storybook/addon-essentials', diff --git a/docs/snippets/common/storybook-main-disable-refs.js.mdx b/docs/snippets/common/storybook-main-disable-refs.js.mdx index 020261d5270b..db8d91885f31 100644 --- a/docs/snippets/common/storybook-main-disable-refs.js.mdx +++ b/docs/snippets/common/storybook-main-disable-refs.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { // Your Storybook configuration refs: { 'package-name': { disable: true }, diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx index c0d50e37a81e..90a8043e6e83 100644 --- a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx +++ b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx index aff59173992f..2975848b07ca 100644 --- a/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx +++ b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js|ts -module.exports = { +export default { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ // Other Storybook addons diff --git a/docs/snippets/common/storybook-main-enable-mdx2.js.mdx b/docs/snippets/common/storybook-main-enable-mdx2.js.mdx index 712bf6f9f94d..e6881ba8644e 100644 --- a/docs/snippets/common/storybook-main-enable-mdx2.js.mdx +++ b/docs/snippets/common/storybook-main-enable-mdx2.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js|ts -module.exports = { +export default { stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], features: { diff --git a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx index 610475b9ea03..0e7e090c8ddf 100644 --- a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx +++ b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js|ts -module.exports = { +export default { stories: [ //👇 Changes the load order of our stories. First loads the Changelog page '../src/Changelog.mdx', diff --git a/docs/snippets/common/storybook-main-env-field-config.js.mdx b/docs/snippets/common/storybook-main-env-field-config.js.mdx index c9a2d05f998d..581cda0c3fcb 100644 --- a/docs/snippets/common/storybook-main-env-field-config.js.mdx +++ b/docs/snippets/common/storybook-main-env-field-config.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-main-extend-ts-config.js.mdx b/docs/snippets/common/storybook-main-extend-ts-config.js.mdx index 673d7521ccc2..b9e42a92bb97 100644 --- a/docs/snippets/common/storybook-main-extend-ts-config.js.mdx +++ b/docs/snippets/common/storybook-main-extend-ts-config.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: [], addons: [], typescript: { diff --git a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx index 550d652fe023..18e98d16d8ae 100644 --- a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx +++ b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js|ts -module.exports = { +export default { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ // Other Storybook addons diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx index f827740919db..96da7117a80b 100644 --- a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx +++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', diff --git a/docs/snippets/common/storybook-main-import-preset-config.js.mdx b/docs/snippets/common/storybook-main-import-preset-config.js.mdx index c66bd2ac28a0..5cec62d96e47 100644 --- a/docs/snippets/common/storybook-main-import-preset-config.js.mdx +++ b/docs/snippets/common/storybook-main-import-preset-config.js.mdx @@ -1,9 +1,9 @@ ```js // .storybook/main.js -const path = require('path'); +import path from 'path'; -module.exports = { +export default { addons: [path.resolve('./.storybook/my-preset')], }; ``` diff --git a/docs/snippets/common/storybook-main-js-md-files.js.mdx b/docs/snippets/common/storybook-main-js-md-files.js.mdx index 77c4f04e3ab7..a969537373f1 100644 --- a/docs/snippets/common/storybook-main-js-md-files.js.mdx +++ b/docs/snippets/common/storybook-main-js-md-files.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { stories: ['../my-project/src/components/*.@(js|md)'], }; ``` diff --git a/docs/snippets/common/storybook-main-md-html-indexer.js.mdx b/docs/snippets/common/storybook-main-md-html-indexer.js.mdx index 75f86bbe3a17..9e27c6d1e8bf 100644 --- a/docs/snippets/common/storybook-main-md-html-indexer.js.mdx +++ b/docs/snippets/common/storybook-main-md-html-indexer.js.mdx @@ -25,7 +25,7 @@ const indexer = async (fileName, opts) => { return loadCsf(code, { ...opts, fileName }).parse(); }; -module.exports = { +export default { storyIndexers: (indexers) => { return [ { diff --git a/docs/snippets/common/storybook-main-preset-config.js.mdx b/docs/snippets/common/storybook-main-preset-config.js.mdx index c88a0b109126..ea259282c811 100644 --- a/docs/snippets/common/storybook-main-preset-config.js.mdx +++ b/docs/snippets/common/storybook-main-preset-config.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { addons: ['@storybook/preset-scss'], }; ``` diff --git a/docs/snippets/common/storybook-main-preview-head.js.mdx b/docs/snippets/common/storybook-main-preview-head.js.mdx index 18f7edd2c6f4..481694046a1c 100644 --- a/docs/snippets/common/storybook-main-preview-head.js.mdx +++ b/docs/snippets/common/storybook-main-preview-head.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/main.js -module.exports = { +export default { previewHead: (head) => (` ${head}