build: Upgrade Storybook to 5.2

.storybook/addons.js

@@ -4,6 +4,7 @@ import 'storybook-readme/register';
 import 'prismjs/components/prism-tsx';
 
 import '@storybook/addon-actions/register';
-import '@storybook/addon-options/register';
 import '@storybook/addon-viewport/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-docs/register';
+import '@storybook/addon-storysource/register';

.storybook/config.js

@@ -1,4 +1,5 @@
 import {configure, addDecorator, addParameters, forceReRender} from '@storybook/react';
+import {DocsPage, DocsContainer} from '@storybook/addon-docs/blocks';
 import {withKnobs} from '@storybook/addon-knobs/react';
 import {create} from '@storybook/theming';
 import addons from '@storybook/addons';
@@ -12,7 +13,13 @@ import {InputProviderDecorator, FontsDecorator} from '../utils/storybook';
 const req = require.context('../modules', true, /stories.*\.tsx?$/);
 
 function loadStories() {
-  req.keys().forEach(req);
+  const allExports = [];
+  req.keys().forEach(fname => {
+    const story = req(fname);
+    if (story.default) allExports.push(story);
+  });
+
+  return allExports;
 }
 
 addDecorator(withKnobs);
@@ -28,9 +35,10 @@ addParameters({
       mainBackground: commonColors.backgroundAlt,
     }),
   },
-});
-
-addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
   readme: {
     codeTheme: 'github',
   },

.storybook/docgen-plugin.js

@@ -0,0 +1,65 @@
+const docGen = require('react-docgen-typescript');
+const docGenLoader = require('react-docgen-typescript-loader/dist/generateDocgenCodeBlock.js');
+const ts = require('typescript');
+const path = require('path');
+const tsconfigPath = path.join(__dirname, './tsconfig.json');
+
+const propFilter = prop => {
+  if (prop.parent) {
+    return !prop.parent.fileName.includes('node_modules');
+  }
+
+  return true;
+};
+
+class DocgenPlugin {
+  apply(compiler) {
+    const pathRegex = RegExp(`modules.+\.tsx`);
+    compiler.hooks.compilation.tap('DocgenPlugin', compilation => {
+      compilation.hooks.seal.tap('DocgenPlugin', modules => {
+        const modulesToProcess = [];
+        compilation.modules.forEach(module => {
+          // Skip ignored / external modules
+          if (!module.built || module.external || !module.rawRequest) {
+            return;
+          }
+          if (pathRegex.test(module.request)) {
+            modulesToProcess.push(module);
+          }
+        });
+        const tsProgram = ts.createProgram(modulesToProcess.map(v => v.userRequest), {
+          jsx: ts.JsxEmit.React,
+          module: ts.ModuleKind.CommonJS,
+          target: ts.ScriptTarget.Latest,
+        });
+        modulesToProcess.forEach(m => processModule(m, tsProgram));
+      });
+    });
+  }
+}
+
+processModule = (module, tsProgram) => {
+  if (!module) return;
+
+  const componentDocs = docGen
+    .withCustomConfig(tsconfigPath, {propFilter: propFilter})
+    .parseWithProgramProvider(module.userRequest, () => tsProgram);
+
+  if (!componentDocs.length) return;
+
+  let source = module._source._value;
+  source +=
+    '\n' +
+    docGenLoader
+      .default({
+        filename: module.userRequest,
+        source: module.userRequest,
+        componentDocs,
+        docgenCollectionName: 'STORYBOOK_REACT_CLASSES',
+        setDisplayName: true,
+      })
+      .substring(module.userRequest.length) +
+    '\n';
+  module._source._value = source;
+};
+module.exports = DocgenPlugin;

.storybook/webpack.config.js

@@ -1,138 +1,70 @@
 const path = require('path');
-const HappyPack = require('happypack');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const DocgenPlugin = require('./docgen-plugin');
 
 const modulesPath = path.resolve(__dirname, '../modules');
 const utilsPath = path.resolve(__dirname, '../utils');
+const postcssConfigPath = path.resolve(__dirname, './postcss.config');
 
-const babelLoader = {
-  loader: 'babel-loader',
-  options: {
-    plugins: [
-      '@babel/plugin-transform-modules-commonjs',
-      [
-        'emotion',
-        {
-          autoLabel: true,
-          labelFormat: '[filename]__[local]',
-        },
-      ],
-    ],
-  },
-};
-
-const customRules = [
-  {
-    test: /\.tsx?$/,
-    exclude: /node_modules/,
-    include: [modulesPath, utilsPath],
-    loader: 'happypack/loader?id=ts',
-  },
-  {
-    test: /\.scss$/,
-    include: modulesPath,
-    use: [
-      {
-        loader: 'style-loader', // creates style nodes from JS strings
-        options: {
-          insertAt: {
-            before: '[data-emotion]',
-          },
-        },
-      },
-      {
-        loader: 'css-loader',
-      },
-      {
-        loader: 'postcss-loader',
-        options: {
-          config: {
-            path: require.resolve('./postcss.config.js'),
-          },
-          sourceMap: true,
-        },
-      },
-      {
-        loader: 'sass-loader', // compiles Sass to CSS
-        options: {
-          includePaths: [modulesPath],
-          sourceMap: true,
-        },
-      },
-    ],
-  },
-  {
-    test: /\.css$/,
-    use: [
-      {
-        loader: 'style-loader',
-        options: {
-          insertAt: {
-            before: '[data-emotion]',
-          },
-        },
-      },
-      'css-loader',
-    ],
-  },
-  {
-    test: /\.(jpe?g|png|gif|svg|ttf)$/i,
-    use: [
-      {
-        loader: 'file-loader',
-        options: {
-          name: '[path][name].[ext]',
-        },
-      },
-    ],
-  },
-];
-
-// TODO: We merge with Create React App's webpack.config.js since we include `react-scripts` as a devDep
-// There is some config from CRA that we need in order to build Storybook correctly
-// If you build without it, you get weird behavior like Button backgrounds disappearing
-module.exports = async ({config}) => {
+module.exports = ({config, mode}) => {
   // Exclude all node_modules from babel-loader
   config.module.rules
     .find(rule => /mjs\|jsx/.test(rule.test.toString()))
     .exclude.push(/node_modules/);
 
-  // Remove any scss/sass rules that ship with storybook
-  config.module.rules = config.module.rules.filter(rule => !/scss|sass/.test(rule.test.toString()));
-
   // Filter out extraneous rules added by CRA (react-scripts)
   // react-scripts automatically adds js/ts matchers for a `src` folder which we don't use so these rules are moot
   config.module.rules = config.module.rules.filter(
     rule => !/js\|mjs\|jsx\|ts\|tsx/.test(rule.test.toString())
   );
 
-  // Add our custom rules
-  config.module.rules.push(...customRules);
+  // Override CRA postcss presets
+  config.module.rules.forEach(rule => {
+    if (rule.test.toString().includes('scss|sass')) {
+      delete rule.use[2].options.plugins;
+
+      rule.use[2].options.config = {
+        path: postcssConfigPath,
+      };
+    }
+  });
 
   // Add `.ts` and `.tsx` as a resolvable extension.
   config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx'];
 
-  config.plugins.push(
-    new HappyPack({
-      id: 'ts',
-      threads: 2,
-      loaders: [
-        babelLoader,
-        {
-          path: 'ts-loader',
-          query: {
-            happyPackMode: true,
-            configFile: path.join(__dirname, './tsconfig.json'),
+  // Load all module files and transpile using babel + ts
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    include: [modulesPath, utilsPath],
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', {flow: false, typescript: true}]],
+      plugins: [
+        '@babel/plugin-transform-modules-commonjs',
+        [
+          'emotion',
+          {
+            autoLabel: true,
+            labelFormat: '[filename]__[local]',
           },
-        },
+        ],
       ],
-    }),
-    new ForkTsCheckerWebpackPlugin({
-      checkSyntacticErrors: true,
-      tsconfig: path.join(__dirname, 'tsconfig.json'),
-      eslint: true,
-    })
-  );
+    },
+  });
+
+  // Load the source code of story files to display in docs.
+  config.module.rules.push({
+    test: /stories.*\.tsx?$/,
+    include: [modulesPath],
+    loaders: [
+      {
+        loader: require.resolve('@storybook/source-loader'),
+        options: {parser: 'typescript'},
+      },
+    ],
+    enforce: 'pre',
+  });
+
+  config.plugins.push(new DocgenPlugin());
 
   return config;
 };

modules/_labs/header/react/stories/stories.tsx

@@ -124,6 +124,7 @@ class SearchWithAutoComplete extends React.Component<
 }
 
 storiesOf('Labs/Header/React', module)
+  .addParameters({component: Header})
   .addDecorator(withReadme(README))
   .addDecorator(withKnobs)
   .add('Global Header', () => (

modules/_labs/menu/react/stories/stories.tsx

@@ -244,6 +244,7 @@ class CustomMenuItem extends React.Component<MenuItemProps> {
 }
 
 storiesOf('Labs/Menu/React', module)
+  .addParameters({component: Menu})
   .addDecorator(withReadme(README))
   .add('Default', () => (
     <div className="story">

modules/action-bar/react/stories/stories.tsx

@@ -9,6 +9,7 @@ import README from '../README.md';
 
 storiesOf('Action Bar', module)
   .addDecorator(withReadme(README))
+  .addParameters({component: ActionBar})
   .add('Default', () => (
     <div className="story">
       <ActionBar>

modules/avatar/react/stories/stories.tsx

@@ -16,6 +16,7 @@ const handleAvatarButtonClick = (e: React.SyntheticEvent) => {
 storiesOf('Avatar/Default', module)
   .addDecorator(withReadme(README))
   .addDecorator(withKnobs)
+  .addParameters({component: Avatar})
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
@@ -68,6 +69,7 @@ storiesOf('Avatar/Default', module)
 storiesOf('Avatar/AvatarButton', module)
   .addDecorator(withReadme(README))
   .addDecorator(withKnobs)
+  .addParameters({component: AvatarButton})
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>

modules/banner/react/stories/stories.tsx

@@ -1,7 +1,7 @@
 /// <reference path="../../../../typings.d.ts" />
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
-import {withKnobs, select, text} from '@storybook/addon-knobs/react';
+import {withKnobs, select, text} from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';
 
 import Banner from '../index';
@@ -12,6 +12,7 @@ const handleBannerClick = (e: React.SyntheticEvent) => {
 };
 
 storiesOf('Banner/Alert', module)
+  .addParameters({component: Banner})
   .addDecorator(withReadme(README))
   .addDecorator(withKnobs)
   .add('Full', () => (
@@ -52,6 +53,7 @@ storiesOf('Banner/Alert', module)
   ));
 
 storiesOf('Banner/Error', module)
+  .addParameters({component: Banner})
   .addDecorator(withReadme(README))
   .addDecorator(withKnobs)
   .add('Full', () => (

modules/button/react/stories/stories.tsx

@@ -38,6 +38,7 @@ const buttonContainer = {
 };
 
 storiesOf('Button', module)
+  .addParameters({component: Button})
   .addDecorator(withReadme(README))
   .add('Primary', () => (
     <div className="story">
@@ -248,6 +249,7 @@ storiesOf('Button', module)
   ));
 
 storiesOf('Button/Text', module)
+  .addParameters({component: TextButton})
   .addDecorator(withReadme(README))
   .add('Default', () => (
     <div className="story">
@@ -339,6 +341,7 @@ storiesOf('Button/Text', module)
   ));
 
 storiesOf('Button/Outline', module)
+  .addParameters({component: Button})
   .addDecorator(withReadme(README))
   .add('Primary', () => (
     <div className="story">
@@ -551,6 +554,7 @@ storiesOf('Button/Outline', module)
   ));
 
 storiesOf('Button/Dropdown', module)
+  .addParameters({component: DropdownButton})
   .addDecorator(withReadme(README))
   .add('Primary', () => (
     <div className="story">

modules/button/react/stories/stories_deprecated.tsx

@@ -7,6 +7,7 @@ import {deprecated_Button as Button} from '../index';
 import README from '../README.md';
 
 storiesOf('Button/Deprecated', module)
+  .addParameters({component: Button})
   .addDecorator(withReadme(README))
   .add('Primary', () => (
     <div className="story">