CLI: WEBPACK_REACT template MDX support

lib/cli/generators/WEBPACK_REACT/index.js

@@ -14,6 +14,9 @@ export default async (npmOptions, { storyFormat = 'csf' }) => {
     '@storybook/addon-links',
     '@storybook/addons',
   ];
+  if (storyFormat === 'mdx') {
+    packages.push('@storybook/addon-docs');
+  }
   const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
 
   copyTemplate(__dirname, storyFormat);

lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/config.js

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/WEBPACK_REACT/template-mdx/.storybook/webpack.config.js

@@ -0,0 +1,18 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+module.exports = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    rules: [
+      // add your custom rules.
+    ],
+  },
+};

lib/cli/generators/WEBPACK_REACT/template-mdx/stories/0-Welcome.stories.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+<Meta title="Welcome" />
+
+# Welcome
+
+This is a test document written in MDX that defines a `Welcome` story wrapped in a `Preview` doc block:
+
+<Preview withToolbar>
+  <Story name="to Storybook">
+    <Welcome showApp={linkTo('Button')} />
+  </Story>
+</Preview>

lib/cli/generators/WEBPACK_REACT/template-mdx/stories/1-Button.stories.mdx

@@ -0,0 +1,21 @@
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta title="Button" />
+
+# Button
+
+This `Button` document defines two stories:
+
+<Story name="text">
+  <Button onClick={action('clicked')}>Hello Button</Button>
+</Story>
+
+<Story name="emoji">
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+</Story>