Core: Move react and react-dom to peer deps

addons/a11y/package.json

@@ -45,8 +45,6 @@
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",
-    "react": "^16.8.3 || ^17.0.0",
-    "react-dom": "^16.8.3 || ^17.0.0",
     "react-sizeme": "^2.5.2",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
@@ -56,6 +54,18 @@
     "@testing-library/react": "^10.0.4",
     "@types/webpack-env": "^1.15.2"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

addons/actions/package.json

@@ -40,8 +40,6 @@
     "lodash": "^4.17.15",
     "polished": "^3.4.4",
     "prop-types": "^15.7.2",
-    "react": "^16.8.3 || ^17.0.0",
-    "react-dom": "^16.8.3 || ^17.0.0",
     "react-inspector": "^5.0.1",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
@@ -53,6 +51,18 @@
     "@types/uuid": "^7.0.3",
     "@types/webpack-env": "^1.15.2"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

addons/backgrounds/package.json

@@ -41,15 +41,25 @@
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
-    "react": "^16.8.3 || ^17.0.0",
-    "react-dom": "^16.8.3 || ^17.0.0",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.15.2"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

addons/controls/package.json

@@ -37,10 +37,20 @@
     "@storybook/node-logger": "6.1.0-beta.0",
     "@storybook/theming": "6.1.0-beta.0",
     "core-js": "^3.0.1",
-    "react": "^16.8.3 || ^17.0.0",
-    "react-dom": "^16.8.3 || ^17.0.0",
     "ts-dedent": "^2.0.0"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

addons/cssresources/package.json

@@ -39,15 +39,25 @@
     "@storybook/theming": "6.1.0-beta.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "react": "^16.8.3 || ^17.0.0",
-    "react-dom": "^16.8.3 || ^17.0.0",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.15.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

addons/design-assets/package.json

@@ -42,12 +42,22 @@
     "@storybook/theming": "6.1.0-beta.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "react": "^16.8.3 || ^17.0.0",
-    "react-dom": "^16.8.3 || ^17.0.0",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
     "use-image": "^1.0.3"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

addons/docs/package.json

@@ -72,8 +72,6 @@
     "lodash": "^4.17.15",
     "prettier": "~2.0.5",
     "prop-types": "^15.7.2",
-    "react": "^16.8.3 || ^17.0.0",
-    "react-dom": "^16.8.3 || ^17.0.0",
     "react-element-to-jsx-string": "^14.3.1",
     "regenerator-runtime": "^0.13.7",
     "remark-external-links": "^6.0.0",
@@ -119,6 +117,8 @@
     "@babel/core": "^7.11.5",
     "@storybook/vue": "6.1.0-beta.0",
     "babel-loader": "^8.0.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
     "sveltedoc-parser": "^3.0.4",
     "vue": "^2.6.10",
     "webpack": ">=4"
@@ -127,6 +127,12 @@
     "@storybook/vue": {
       "optional": true
     },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
     "sveltedoc-parser": {
       "optional": true
     },

addons/docs/src/mdx/__testfixtures__/component-args.output.snapshot

@@ -1,22 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`docs-mdx-compiler-plugin component-args.mdx 1`] = `
-"/* @jsx mdx */
+"/* @jsxRuntime classic */
+/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = (name) =>
-  function MDXDefaultShortcode(props) {
-    console.warn(
-      'Component ' +
-        name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
-    );
-    return <div {...props} />;
-  };
-
 const layoutProps = {};
 const MDXLayout = 'wrapper';
 function MDXContent({ components, ...props }) {

addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot

@@ -1,22 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = `
-"/* @jsx mdx */
+"/* @jsxRuntime classic */
+/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = (name) =>
-  function MDXDefaultShortcode(props) {
-    console.warn(
-      'Component ' +
-        name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
-    );
-    return <div {...props} />;
-  };
-
 const layoutProps = {};
 const MDXLayout = 'wrapper';
 function MDXContent({ components, ...props }) {

addons/docs/src/mdx/__testfixtures__/csf-imports.output.snapshot

@@ -1,24 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`docs-mdx-compiler-plugin csf-imports.mdx 1`] = `
-"/* @jsx mdx */
+"/* @jsxRuntime classic */
+/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks';
 import { Welcome, Button } from '@storybook/angular/demo';
 import * as MyStories from './My.stories';
 import { Other } from './Other.stories';
 
-const makeShortcode = (name) =>
-  function MDXDefaultShortcode(props) {
-    console.warn(
-      'Component ' +
-        name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
-    );
-    return <div {...props} />;
-  };
-
 const layoutProps = {};
 const MDXLayout = 'wrapper';
 function MDXContent({ components, ...props }) {

addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot

@@ -1,22 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`docs-mdx-compiler-plugin decorators.mdx 1`] = `
-"/* @jsx mdx */
+"/* @jsxRuntime classic */
+/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = (name) =>
-  function MDXDefaultShortcode(props) {
-    console.warn(
-      'Component ' +
-        name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
-    );
-    return <div {...props} />;
-  };
-
 const layoutProps = {};
 const MDXLayout = 'wrapper';
 function MDXContent({ components, ...props }) {

addons/docs/src/mdx/__testfixtures__/docs-only.output.snapshot

@@ -1,21 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`docs-mdx-compiler-plugin docs-only.mdx 1`] = `
-"/* @jsx mdx */
+"/* @jsxRuntime classic */
+/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = (name) =>
-  function MDXDefaultShortcode(props) {
-    console.warn(
-      'Component ' +
-        name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
-    );
-    return <div {...props} />;
-  };
-
 const layoutProps = {};
 const MDXLayout = 'wrapper';
 function MDXContent({ components, ...props }) {

addons/docs/src/mdx/__testfixtures__/loaders.output.snapshot

@@ -1,22 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`docs-mdx-compiler-plugin loaders.mdx 1`] = `
-"/* @jsx mdx */
+"/* @jsxRuntime classic */
+/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = (name) =>
-  function MDXDefaultShortcode(props) {
-    console.warn(
-      'Component ' +
-        name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
-    );
-    return <div {...props} />;
-  };
-
 const layoutProps = {};
 const MDXLayout = 'wrapper';
 function MDXContent({ components, ...props }) {

addons/docs/src/mdx/__testfixtures__/meta-quotes-in-title.output.snapshot

@@ -1,21 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`docs-mdx-compiler-plugin meta-quotes-in-title.mdx 1`] = `
-"/* @jsx mdx */
+"/* @jsxRuntime classic */
+/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Meta } from '@storybook/addon-docs/blocks';
 
-const makeShortcode = (name) =>
-  function MDXDefaultShortcode(props) {
-    console.warn(
-      'Component ' +
-        name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
-    );
-    return <div {...props} />;
-  };
-
 const layoutProps = {};
 const MDXLayout = 'wrapper';
 function MDXContent({ components, ...props }) {

addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot

@@ -1,21 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`docs-mdx-compiler-plugin non-story-exports.mdx 1`] = `
-"/* @jsx mdx */
+"/* @jsxRuntime classic */
+/* @jsx mdx */
 import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
 
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 export const two = 2;
-const makeShortcode = (name) =>
-  function MDXDefaultShortcode(props) {
-    console.warn(
-      'Component ' +
-        name +
-        ' was not imported, exported, or provided by MDXProvider as global scope'
-    );
-    return <div {...props} />;
-  };
 
 const layoutProps = {
   two,