Move react-docgen dependency to docs addon preset.

.babelrc.js

@@ -62,7 +62,6 @@ module.exports = {
         'babel-plugin-macros',
         ['emotion', { sourceMap: true, autoLabel: true }],
         '@babel/plugin-transform-react-constant-elements',
-        'babel-plugin-add-react-displayname',
       ],
       env: {
         test: withTests,

addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -184,7 +184,4 @@ class HighlightToggle extends Component<ToggleProps> {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(HighlightToggle);
+export default connect(mapStateToProps, mapDispatchToProps)(HighlightToggle);

addons/contexts/src/manager/components/ToolBar.test.tsx

@@ -27,7 +27,10 @@ describe('Tests on addon-contexts component: ToolBar', () => {
         icon: 'box' as const,
         nodeId: 'Some Context B',
         options: { cancelable: true, deep: false, disable: false },
-        params: [{ name: 'Some Param X', props: {} }, { name: 'Some Param Y', props: {} }],
+        params: [
+          { name: 'Some Param X', props: {} },
+          { name: 'Some Param Y', props: {} },
+        ],
         title: 'Some Context B',
       },
     ];

addons/contexts/src/manager/components/ToolBarControl.test.tsx

@@ -9,7 +9,10 @@ describe('Tests on addon-contexts component: ToolBarControl', () => {
     icon: 'box' as const,
     nodeId: 'Some Context',
     options: { cancelable: true, deep: false, disable: false },
-    params: [{ name: 'A', props: {} }, { name: 'B', props: {} }],
+    params: [
+      { name: 'A', props: {} },
+      { name: 'B', props: {} },
+    ],
     title: 'Some Context',
     selected: '',
     setSelected: jest.fn,

addons/docs/package.json

@@ -57,6 +57,8 @@
     "acorn": "^7.1.0",
     "acorn-jsx": "^5.1.0",
     "acorn-walk": "^7.0.0",
+    "babel-plugin-add-react-displayname": "^0.0.5",
+    "babel-plugin-react-docgen": "^4.1.0",
     "core-js": "^3.0.1",
     "doctrine": "^3.0.0",
     "escodegen": "^1.12.0",

addons/docs/src/frameworks/common/preset.ts

@@ -2,13 +2,15 @@
 import createCompiler from '@storybook/addon-docs/mdx-compiler-plugin';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
+import { TransformOptions } from '@babel/core';
 
 function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
   if (!configureJSX) {
     return babelOptions;
   }
 
   const babelPlugins = (babelOptions && babelOptions.plugins) || [];
+
   return {
     ...babelOptions,
     // for frameworks that are not working with react, we need to configure
@@ -18,6 +20,29 @@ function createBabelOptions(babelOptions?: any, configureJSX?: boolean) {
   };
 }
 
+// eslint-disable-next-line no-shadow
+export function babel(config: TransformOptions) {
+  // Ensure plugins are defined or fallback to an array to avoid empty values.
+  const babelConfigPlugins = config.plugins || [];
+
+  const extraPlugins = [
+    [
+      'babel-plugin-react-docgen',
+      {
+        DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+      },
+      'babel-plugin-add-react-displayname',
+    ],
+  ];
+
+  // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it
+  // as a single value, if it is an `Array` it will spread.
+  return {
+    ...config,
+    plugins: [].concat(babelConfigPlugins, extraPlugins),
+  };
+}
+
 export function webpack(webpackConfig: any = {}, options: any = {}) {
   const { module = {} } = webpackConfig;
   // it will reuse babel options that are already in use in storybook

app/react/package.json

@@ -41,9 +41,7 @@
     "@storybook/node-logger": "5.3.7",
     "@svgr/webpack": "^4.0.3",
     "@types/webpack-env": "^1.15.0",
-    "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-named-asset-import": "^0.3.1",
-    "babel-plugin-react-docgen": "^4.0.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.15",

app/react/src/server/framework-preset-react.ts

@@ -11,7 +11,6 @@ export function babelDefault(config: TransformOptions) {
     plugins: [
       ...(config.plugins || []),
       require.resolve('@babel/plugin-transform-react-constant-elements'),
-      require.resolve('babel-plugin-add-react-displayname'),
     ],
   };
 }

app/react/src/server/options.ts

@@ -6,6 +6,5 @@ export default {
   frameworkPresets: [
     require.resolve('./framework-preset-react.js'),
     require.resolve('./framework-preset-cra.js'),
-    require.resolve('./framework-preset-react-docgen.js'),
   ],
 };

examples/cra-ts-kitchen-sink/.storybook/main.js

@@ -3,23 +3,7 @@ const path = require('path');
 module.exports = {
   stories: ['../src/**/*.stories.(mdx|[tj]sx?)'],
   addons: [
-    {
-      name: '@storybook/preset-create-react-app',
-      options: {
-        tsDocgenLoaderOptions: {
-          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
-          shouldExtractLiteralValuesFromEnum: true,
-          propFilter: prop => {
-            // Currently not working, prop.parent is always null.
-            if (prop.parent) {
-              return !prop.parent.fileName.includes('node_modules/@types/react/');
-            }
-
-            return true;
-          },
-        },
-      },
-    },
+    '@storybook/preset-create-react-app',
     '@storybook/addon-docs',
     '@storybook/addon-actions',
     '@storybook/addon-links',

examples/cra-ts-kitchen-sink/package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@storybook/addon-a11y": "5.3.7",
     "@storybook/addon-actions": "5.3.7",
+    "@storybook/addon-docs": "5.3.7",
     "@storybook/addon-info": "5.3.7",
     "@storybook/addon-knobs": "5.3.7",
     "@storybook/addon-links": "5.3.7",
@@ -50,7 +51,6 @@
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.4.1",
     "fork-ts-checker-webpack-plugin": "^3.0.1",
-    "react-docgen-typescript-loader": "^3.3.0",
     "react-moment-proptypes": "^1.7.0",
     "react-scripts": "^3.0.1",
     "tslint": "^5.14.0",

examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx

@@ -128,6 +128,5 @@ interface TypeScriptHtmlComponentProps {
   text: string;
 }
 
-export const TypeScriptHtmlComponent: FC<
-  React.HTMLAttributes<HTMLDivElement> & TypeScriptHtmlComponentProps
-> = () => <div>My HTML component</div>;
+export const TypeScriptHtmlComponent: FC<React.HTMLAttributes<HTMLDivElement> &
+  TypeScriptHtmlComponentProps> = () => <div>My HTML component</div>;

lib/components/src/tooltip/TooltipMessage.stories.tsx

@@ -29,7 +29,10 @@ storiesOf('basics/Tooltip/TooltipMessage', module)
     <TooltipMessage
       title="Lorem ipsum dolor sit"
       desc="Amet consectatur vestibulum concet durum politu coret weirom"
-      links={[{ title: 'Get more tips', href: 'test' }, { title: 'Done', href: 'test' }]}
+      links={[
+        { title: 'Get more tips', href: 'test' },
+        { title: 'Done', href: 'test' },
+      ]}
     />
   ))
   .add('minimal message', () => (

lib/components/src/tooltip/WithTooltip.tsx

@@ -100,11 +100,9 @@ WithTooltipPure.defaultProps = {
   tooltipShown: false,
 };
 
-const WithToolTipState: FunctionComponent<
-  WithTooltipPureProps & {
-    startOpen?: boolean;
-  }
-> = ({ startOpen, ...rest }) => {
+const WithToolTipState: FunctionComponent<WithTooltipPureProps & {
+  startOpen?: boolean;
+}> = ({ startOpen, ...rest }) => {
   const [tooltipShown, onVisibilityChange] = useState(startOpen || false);
 
   useEffect(() => {

lib/core/package.json

@@ -45,7 +45,6 @@
     "airbnb-js-shims": "^2.2.1",
     "ansi-to-html": "^0.6.11",
     "autoprefixer": "^9.7.2",
-    "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-emotion": "^10.0.20",
     "babel-plugin-macros": "^2.7.0",
     "babel-preset-minify": "^0.5.0 || 0.6.0-alpha.5",

package.json

@@ -154,7 +154,6 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.5",
-    "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-emotion": "^10.0.20",
     "babel-plugin-macros": "^2.7.0",

yarn.lock

@@ -6793,10 +6793,10 @@ babel-plugin-named-asset-import@^0.3.1, babel-plugin-named-asset-import@^0.3.2,
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd"
   integrity sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw==
 
-babel-plugin-react-docgen@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.0.0.tgz#1be997bc135b2a0eec54364202d01ed0f15f0098"
-  integrity sha512-6vdky/CRaq0zE64ZRR1fOjUfFS3kX7USMuC6mAH/ASYt/EGY9Ms1F5uLwHhmBhaOGKiJJHvhKz16wX9IBWBLKg==
+babel-plugin-react-docgen@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.1.0.tgz#1dfa447dac9ca32d625a123df5733a9e47287c26"
+  integrity sha512-vzpnBlfGv8XOhJM2zbPyyqw2OLEbelgZZsaaRRTpVwNKuYuc+pUg4+dy7i9gCRms0uOQn4osX571HRcCJMJCmA==
   dependencies:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
@@ -26300,7 +26300,7 @@ react-devtools-core@^3.4.2, react-devtools-core@^3.6.0:
     shell-quote "^1.6.1"
     ws "^3.3.1"
 
-react-docgen-typescript-loader@^3.3.0, react-docgen-typescript-loader@^3.6.0:
+react-docgen-typescript-loader@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.6.0.tgz#5515f03f869e66d49e287c5f1e7ec10f2084f7bb"
   integrity sha512-+uEsM3VYCdlcBGxF3tBqI5XWL1phvrh8dkiIfdpciKlM1BDHW+d82kKJI9hX6zk9H8TL+3Th/j/JAEaKb5FFNw==