Merge pull request #13996 from storybookjs/docs-accept-story-mdx

Addon-docs: Support story.mdx, stories.mdx
storybookjs · Feb 22, 2021 · ccaca62 · ccaca62
2 parents 382c335 + 483ca6b
commit ccaca62
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 52 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [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
@@ -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
@@ -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
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Addons/Docs/StoriesFile" />
+
+# 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');