From 52479887c73ec49b318291a52fb990ab76b9c6e8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 22 Feb 2021 08:40:23 +0800 Subject: [PATCH 1/3] Addon-docs: Support story.mdx, stories.mdx --- addons/docs/src/frameworks/common/preset.ts | 4 ++-- examples/official-storybook/main.ts | 2 +- examples/official-storybook/stories/addon-docs/stories.mdx | 7 +++++++ 3 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 examples/official-storybook/stories/addon-docs/stories.mdx diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index d04e2b1c9504..4a835c890faf 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -101,7 +101,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) { ], }, { - test: /\.(stories|story)\.mdx$/, + test: /(stories|story)\.mdx$/, use: [ { loader: resolvedBabelLoader, @@ -118,7 +118,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) { }, { test: /\.mdx$/, - exclude: /\.(stories|story)\.mdx$/, + exclude: /(stories|story)\.mdx$/, use: [ { loader: resolvedBabelLoader, diff --git a/examples/official-storybook/main.ts b/examples/official-storybook/main.ts index 9242da091d42..e72009a04f20 100644 --- a/examples/official-storybook/main.ts +++ b/examples/official-storybook/main.ts @@ -7,7 +7,7 @@ module.exports = { // FIXME: Breaks e2e tests './intro.stories.mdx', '../../lib/ui/src/**/*.stories.@(js|tsx|mdx)', '../../lib/components/src/**/*.stories.@(js|tsx|mdx)', - './stories/**/*.stories.@(js|ts|tsx|mdx)', + './stories/**/*stories.@(js|ts|tsx|mdx)', './../../addons/docs/**/*.stories.tsx', ], reactOptions: { diff --git a/examples/official-storybook/stories/addon-docs/stories.mdx b/examples/official-storybook/stories/addon-docs/stories.mdx new file mode 100644 index 000000000000..1188516d4fba --- /dev/null +++ b/examples/official-storybook/stories/addon-docs/stories.mdx @@ -0,0 +1,7 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +# Stories + +Addon-docs supports `story.mdx` and `stories.mdx` for people who group their components by folder, e.g. `Button/{index.tsx,stories.mdx}`. From df5291e99a82caa5d53bb114642f22d4a9774c18 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 22 Feb 2021 09:24:05 +0800 Subject: [PATCH 2/3] Update snapshots --- .../cra-ts-essentials_preview-dev | 4 +- .../cra-ts-essentials_preview-prod | 4 +- .../html-kitchen-sink_preview-dev | 4 +- .../html-kitchen-sink_preview-prod | 4 +- .../src/__snapshots__/vue-3-cli_preview-dev | 4 +- .../src/__snapshots__/vue-3-cli_preview-prod | 4 +- .../web-components-kitchen-sink_preview-dev | 4 +- .../web-components-kitchen-sink_preview-prod | 4 +- lib/core-server/src/core-presets.test.ts | 70 ++++++++++--------- 9 files changed, 53 insertions(+), 49 deletions(-) diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev index 3b46ed30934a..0a1fa2f21fbc 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev @@ -315,7 +315,7 @@ Object { ], }, Object { - "test": "/\\\\.(stories|story)\\\\.mdx$/", + "test": "/(stories|story)\\\\.mdx$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", @@ -363,7 +363,7 @@ Object { ], }, Object { - "exclude": "/\\\\.(stories|story)\\\\.mdx$/", + "exclude": "/(stories|story)\\\\.mdx$/", "test": "/\\\\.mdx$/", "use": Array [ Object { diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod index e77f4fbf0805..11794f22ade2 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod @@ -334,7 +334,7 @@ Object { ], }, Object { - "test": "/\\\\.(stories|story)\\\\.mdx$/", + "test": "/(stories|story)\\\\.mdx$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", @@ -382,7 +382,7 @@ Object { ], }, Object { - "exclude": "/\\\\.(stories|story)\\\\.mdx$/", + "exclude": "/(stories|story)\\\\.mdx$/", "test": "/\\\\.mdx$/", "use": Array [ Object { diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev index c9b0cf656cbc..8c39a26c6153 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev @@ -213,7 +213,7 @@ Object { ], }, Object { - "test": "/\\\\.(stories|story)\\\\.mdx$/", + "test": "/(stories|story)\\\\.mdx$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", @@ -303,7 +303,7 @@ Object { ], }, Object { - "exclude": "/\\\\.(stories|story)\\\\.mdx$/", + "exclude": "/(stories|story)\\\\.mdx$/", "test": "/\\\\.mdx$/", "use": Array [ Object { diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod index 9785a109ef44..a7ed0c845c4d 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod @@ -212,7 +212,7 @@ Object { ], }, Object { - "test": "/\\\\.(stories|story)\\\\.mdx$/", + "test": "/(stories|story)\\\\.mdx$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", @@ -302,7 +302,7 @@ Object { ], }, Object { - "exclude": "/\\\\.(stories|story)\\\\.mdx$/", + "exclude": "/(stories|story)\\\\.mdx$/", "test": "/\\\\.mdx$/", "use": Array [ Object { diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev index 2b6bd723faeb..23b3b6b4f8b2 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev @@ -225,7 +225,7 @@ Object { ], }, Object { - "test": "/\\\\.(stories|story)\\\\.mdx$/", + "test": "/(stories|story)\\\\.mdx$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", @@ -315,7 +315,7 @@ Object { ], }, Object { - "exclude": "/\\\\.(stories|story)\\\\.mdx$/", + "exclude": "/(stories|story)\\\\.mdx$/", "test": "/\\\\.mdx$/", "use": Array [ Object { diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod index 126402c1f46d..8606d74f45dd 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod @@ -224,7 +224,7 @@ Object { ], }, Object { - "test": "/\\\\.(stories|story)\\\\.mdx$/", + "test": "/(stories|story)\\\\.mdx$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", @@ -314,7 +314,7 @@ Object { ], }, Object { - "exclude": "/\\\\.(stories|story)\\\\.mdx$/", + "exclude": "/(stories|story)\\\\.mdx$/", "test": "/\\\\.mdx$/", "use": Array [ Object { diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev index 7c35993f6506..5b35fe45085f 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev @@ -244,7 +244,7 @@ Object { ], }, Object { - "test": "/\\\\.(stories|story)\\\\.mdx$/", + "test": "/(stories|story)\\\\.mdx$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", @@ -334,7 +334,7 @@ Object { ], }, Object { - "exclude": "/\\\\.(stories|story)\\\\.mdx$/", + "exclude": "/(stories|story)\\\\.mdx$/", "test": "/\\\\.mdx$/", "use": Array [ Object { diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod index 6194fe649014..c46e884b4a5b 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod @@ -243,7 +243,7 @@ Object { ], }, Object { - "test": "/\\\\.(stories|story)\\\\.mdx$/", + "test": "/(stories|story)\\\\.mdx$/", "use": Array [ Object { "loader": "NODE_MODULES/babel-loader/lib/index.js", @@ -333,7 +333,7 @@ Object { ], }, Object { - "exclude": "/\\\\.(stories|story)\\\\.mdx$/", + "exclude": "/(stories|story)\\\\.mdx$/", "test": "/\\\\.mdx$/", "use": Array [ Object { diff --git a/lib/core-server/src/core-presets.test.ts b/lib/core-server/src/core-presets.test.ts index 730e89db9bc0..6dcdd62557d6 100644 --- a/lib/core-server/src/core-presets.test.ts +++ b/lib/core-server/src/core-presets.test.ts @@ -113,48 +113,52 @@ describe.each([ ['vue-3-cli', vue3Options], ['web-components-kitchen-sink', webComponentsOptions], ['html-kitchen-sink', htmlOptions], -])('%s', (example, frameworkOptions) => { - beforeEach(() => { - jest.clearAllMocks(); - cache.clear(); - }); +])( + '%s', + (example, frameworkOptions) => { + beforeEach(() => { + jest.clearAllMocks(); + cache.clear(); + }); - const options = { - ...baseOptions, - ...frameworkOptions, - configDir: path.resolve(`${__dirname}/../../../examples/${example}/.storybook`), - }; + const options = { + ...baseOptions, + ...frameworkOptions, + configDir: path.resolve(`${__dirname}/../../../examples/${example}/.storybook`), + }; - describe('manager', () => { - it('dev mode', async () => { - await buildDevStandalone({ ...options, ignorePreview: true }); + describe('manager', () => { + it('dev mode', async () => { + await buildDevStandalone({ ...options, ignorePreview: true }); - const managerConfig = prepareSnap(managerExecutor.get, 'manager'); - expect(managerConfig).toMatchSpecificSnapshot(snap(`${example}_manager-dev`)); - }); - it('production mode', async () => { - await buildStaticStandalone({ ...options, ignorePreview: true }); + const managerConfig = prepareSnap(managerExecutor.get, 'manager'); + expect(managerConfig).toMatchSpecificSnapshot(snap(`${example}_manager-dev`)); + }); + it('production mode', async () => { + await buildStaticStandalone({ ...options, ignorePreview: true }); - const managerConfig = prepareSnap(managerExecutor.get, 'manager'); - expect(managerConfig).toMatchSpecificSnapshot(snap(`${example}_manager-prod`)); + const managerConfig = prepareSnap(managerExecutor.get, 'manager'); + expect(managerConfig).toMatchSpecificSnapshot(snap(`${example}_manager-prod`)); + }); }); - }); - describe('preview', () => { - it('dev mode', async () => { - await buildDevStandalone({ ...options, managerCache: true }); + describe('preview', () => { + it('dev mode', async () => { + await buildDevStandalone({ ...options, managerCache: true }); - const previewConfig = prepareSnap(previewExecutor.get, 'preview'); - expect(previewConfig).toMatchSpecificSnapshot(snap(`${example}_preview-dev`)); - }); - it('production mode', async () => { - await buildStaticStandalone({ ...options, managerCache: true }); + const previewConfig = prepareSnap(previewExecutor.get, 'preview'); + expect(previewConfig).toMatchSpecificSnapshot(snap(`${example}_preview-dev`)); + }); + it('production mode', async () => { + await buildStaticStandalone({ ...options, managerCache: true }); - const previewConfig = prepareSnap(previewExecutor.get, 'preview'); - expect(previewConfig).toMatchSpecificSnapshot(snap(`${example}_preview-prod`)); + const previewConfig = prepareSnap(previewExecutor.get, 'preview'); + expect(previewConfig).toMatchSpecificSnapshot(snap(`${example}_preview-prod`)); + }); }); - }); -}); + }, + 10000 +); const progressPlugin = (config) => config.plugins.find((p) => p.constructor.name === 'ProgressPlugin'); From 483ca6b38303bbd768f66d15e3df2f7a380632d2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 22 Feb 2021 09:30:07 +0800 Subject: [PATCH 3/3] Update MIGRATION.md --- MIGRATION.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 816aa35fa97d..7de591ad2951 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 6.1.x to 6.2.0](#from-version-61x-to-620) + - [MDX pattern tweaked](#mdx-pattern-tweaked) - [6.2 Angular overhaul](#62-angular-overhaul) - [New Angular storyshots format](#new-angular-storyshots-format) - [Deprecated Angular story component](#deprecated-angular-story-component) @@ -149,6 +150,10 @@ ## From version 6.1.x to 6.2.0 +### MDX pattern tweaked + +In 6.2 files ending in `stories.mdx` or `story.mdx` are now processed with Storybook's MDX compiler. Previously it only applied to files ending in `.stories.mdx` or `.story.mdx`. See more here: [#13996](https://github.com/storybookjs/storybook/pull/13996) + ### 6.2 Angular overhaul #### New Angular storyshots format