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
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}`.
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');