Use jsxOptions instead of mdxBabelOptions

# Conflicts:
#	code/addons/docs/src/preset.ts

MIGRATION.md

@@ -45,6 +45,7 @@
     - [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
     - [Explicit `<code>` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted)
     - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
+    - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
   - [7.0 Deprecations](#70-deprecations)
@@ -912,6 +913,10 @@ module.exports = {
 };
 ```
 
+#### Dropped addon-docs manual babel configuration
+
+Addon-docs previously accepted `configureJsx` and `mdxBabelOptions` options, which allowed full customization of the babel options used to process markdown and mdx files. This has been simplified in 7.0, with a new option, `jsxOptions`, which can be used to customize the behavior of `@babel/preset-react`.
+
 #### Dropped addon-docs manual configuration
 
 Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely.

code/addons/docs/README.md

@@ -140,8 +140,7 @@ module.exports = {
     {
       name: '@storybook/addon-docs',
       options: {
-        configureJSX: true,
-        babelOptions: {},
+        jsxOptions: {},
         csfPluginOptions: null,
         transcludeMarkdown: true,
       },
@@ -150,7 +149,7 @@ module.exports = {
 };
 ```
 
-The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
+`jsxOptions` are options that will be passed to `@babel/preset-react` for `.md` and `.mdx` files.
 
 `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
 

code/addons/docs/postinstall/presets.js

@@ -24,9 +24,7 @@ export default function transformer(file, api) {
     ((dependencies && dependencies['react-scripts']) ||
       (devDependencies && devDependencies['react-scripts']))
   ) {
-    presetOptions = {
-      configureJSX: true,
-    };
+    presetOptions = {};
   }
 
   const j = api.jscodeshift;

code/addons/docs/src/preset.ts

@@ -7,24 +7,34 @@ import type { IndexerOptions, StoryIndexer, DocsOptions, Options } from '@storyb
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 import { loadCsf } from '@storybook/csf-tools';
 
-// for frameworks that are not working with react, we need to configure
-// the jsx to transpile mdx, for now there will be a flag for that
-// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
-type BabelParams = {
-  mdxBabelOptions?: any;
-  /** @deprecated */
-  configureJSX?: boolean;
+// TODO: expose/import this from @storybook/mdx2-csf
+type JSXOptions = {
+  pragma?: string;
+  pragmaFrag?: string;
+  throwIfNamespace?: false;
+  runtime?: 'classic' | 'automatic';
+  importSource?: string;
 };
 
 async function webpack(
   webpackConfig: any = {},
-  options: Options &
-    BabelParams & {
-      /** @deprecated */
-      sourceLoaderOptions: any;
-      csfPluginOptions: CsfPluginOptions | null;
-      transcludeMarkdown: boolean;
-    } /* & Parameters<
+  options: Options & {
+    /**
+     * @deprecated
+     * Use `jsxOptions` to customize options used by @babel/preset-react
+     */
+    configureJsx: boolean;
+    /**
+     * @deprecated
+     * Use `jsxOptions` to customize options used by @babel/preset-react
+     */
+    mdxBabelOptions?: any;
+    /** @deprecated */
+    sourceLoaderOptions: any;
+    csfPluginOptions: CsfPluginOptions | null;
+    transcludeMarkdown: boolean;
+    jsxOptions?: JSXOptions;
+  } /* & Parameters<
       typeof createCompiler
     >[0] */
 ) {
@@ -33,19 +43,21 @@ async function webpack(
   // it will reuse babel options that are already in use in storybook
   // also, these babel options are chained with other presets.
   const {
-    mdxBabelOptions,
     csfPluginOptions = {},
-    sourceLoaderOptions = null,
+    jsxOptions = {},
     transcludeMarkdown = false,
+    sourceLoaderOptions = null,
+    configureJsx,
+    mdxBabelOptions,
   } = options;
 
   const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
     skipCsf: true,
     mdxCompileOptions: {
       providerImportSource: '@storybook/addon-docs/mdx-react-shim',
-
       remarkPlugins: [remarkSlug, remarkExternalLinks],
     },
+    jsxOptions,
   });
 
   if (sourceLoaderOptions) {
@@ -58,6 +70,16 @@ async function webpack(
     `);
   }
 
+  if (mdxBabelOptions || configureJsx) {
+    throw new Error(dedent`
+      Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
+
+      To update your configuration, please see migration instructions here:
+
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
+    `);
+  }
+
   const mdxLoader = require.resolve('@storybook/mdx2-csf/loader');
 
   let rules = module.rules || [];
@@ -95,7 +117,6 @@ async function webpack(
               loader: mdxLoader,
               options: {
                 ...mdxLoaderOptions,
-                mdxBabelOptions,
                 skipCsf: false,
               },
             },