feat(storybook): Upgrade storybook to 5.3 (#16396)

* fix missing `module` in stories
* upgrade storybook
* update some types and update yarn.lock file
* clean up resolutions

.storybook/.babelrc

@@ -1,22 +1,3 @@
-/* storybook@4.x.x does not seem to support any other babel config filename */
-{
-  "presets": ["@babel/react", "@babel/env"],
-  "plugins": [
-    "emotion",
-    "react-hot-loader/babel",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-transform-runtime",
-    ["@babel/plugin-proposal-decorators", {"legacy": true}],
-    ["@babel/plugin-proposal-class-properties", {"loose": true}]
-  ],
-  "env": {
-    "production": {},
-    "development": {
-      "plugins": [["emotion", {"sourceMap": true, "autoLabel": true}]]
-    },
-    "test": {
-      "plugins": [["emotion", {"autoLabel": true}], "dynamic-import-node"]
-    }
-  }
-}
+const config = require('../babel.config.js');
+
+module.exports = config;

.storybook/addons.js

@@ -1,5 +0,0 @@
-import '@storybook/addon-storysource/register';
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-actions/register';
-import '@storybook/addon-a11y/register';
-import '@storybook/addon-options/register';

.storybook/config.js

@@ -1,114 +0,0 @@
-import 'focus-visible';
-import React from 'react';
-import {ThemeProvider} from 'emotion-theming';
-
-import {configure, setAddon, getStorybook, addDecorator} from '@storybook/react';
-import infoAddon, {setDefaults} from '@storybook/addon-info';
-import {checkA11y} from '@storybook/addon-a11y';
-import {setOptions} from '@storybook/addon-options';
-import {withKnobs} from '@storybook/addon-knobs';
-
-import theme from '../src/sentry/static/sentry/app/utils/theme';
-import './storybook.less';
-
-const withTheme = storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>;
-
-setDefaults({
-  inline: true,
-  header: false,
-  source: false,
-});
-setAddon(infoAddon);
-addDecorator(checkA11y);
-addDecorator(withTheme);
-addDecorator(withKnobs);
-// Use webpack's require.context to load modules dynamically
-// From https://storybook.js.org/basics/writing-stories/
-const req = require.context('../docs-ui/components', true, /\.stories\.js$/);
-
-// Option defaults:
-setOptions({
-  /**
-   * name to display in the top left corner
-   * @type {String}
-   */
-  name: 'Sentry Styleguide',
-
-  /**
-   * URL for name in top left corner to link to
-   * @type {String}
-   */
-  url: '#',
-  /**
-   * show story component as full screen
-   * @type {Boolean}
-   */
-  goFullScreen: false,
-
-  /**
-   * display panel that shows a list of stories
-   * @type {Boolean}
-   */
-  showStoriesPanel: true,
-
-  /**
-   * display panel that shows addon configurations
-   * @type {Boolean}
-   */
-  showAddonPanel: true,
-
-  /**
-   * display floating search box to search through stories
-   * @type {Boolean}
-   */
-  showSearchBox: false,
-
-  /**
-   * show addon panel as a vertical panel on the right
-   * @type {Boolean}
-   */
-  addonPanelInRight: false,
-
-  /**
-   * sorts stories
-   * @type {Boolean}
-   */
-  sortStoriesByKind: false,
-
-  /**
-   * regex for finding the hierarchy separator
-   * @example:
-   *   null - turn off hierarchy
-   *   /\// - split by `/`
-   *   /\./ - split by `.`
-   *   /\/|\./ - split by `/` or `.`
-   * @type {Regex}
-   */
-  hierarchySeparator: /\/|\./, // matches a . or /
-
-  /**
-   * regex for finding the hierarchy root separator
-   * @example:
-   *   null - turn off multiple hierarchy roots
-   *   /\|/ - split by `|`
-   * @type {Regex}
-   */
-  hierarchyRootSeparator: /\|/, //matches a |
-
-  /**
-   * sidebar tree animations
-   * @type {Boolean}
-   */
-  sidebarAnimations: true,
-
-  /**
-   * id to select an addon panel
-   * @type {String}
-   */
-  selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
-});
-
-configure(function() {
-  require('../docs-ui/index.js');
-  req.keys().forEach(filename => req(filename));
-}, module);

.storybook/main.js

@@ -0,0 +1,30 @@
+/*eslint-env node*/
+/*eslint import/no-nodejs-modules:0 */
+const path = require('path');
+const webpack = require('webpack');
+const appConfig = require('../webpack.config');
+
+const staticPath = path.resolve(
+  __dirname,
+  '..',
+  'src',
+  'sentry',
+  'static',
+  'sentry',
+  'app'
+);
+
+module.exports = {
+  stories: ['../docs-ui/components/*.stories.*'],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {configureJSX: true},
+    },
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-options',
+  ],
+};

.storybook/manager.js

@@ -0,0 +1,16 @@
+import {addons} from '@storybook/addons';
+import {create} from '@storybook/theming/create';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'Sentry Styleguide',
+  brandUrl: '#',
+  // To control appearance:
+  // brandImage: 'http://url.of/some.svg',
+});
+
+addons.setConfig({
+  showRoots: true,
+  panelPosition: 'bottom',
+  theme,
+});

.storybook/preview.js

@@ -0,0 +1,90 @@
+import 'focus-visible';
+import React from 'react';
+import {ThemeProvider} from 'emotion-theming';
+
+import {create} from '@storybook/theming/create';
+
+import {
+  addParameters,
+  configure,
+  setAddon,
+  getStorybook,
+  addDecorator,
+} from '@storybook/react';
+import {withInfo} from '@storybook/addon-info';
+import {setOptions} from '@storybook/addon-options';
+
+import theme from '../src/sentry/static/sentry/app/utils/theme';
+import '../docs-ui/index.js';
+
+const withTheme = storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>;
+
+addDecorator(withTheme);
+
+// Option defaults:
+addParameters({
+  options: {
+    /**
+     * show story component as full screen
+     * @type {Boolean}
+     */
+    isFullscreen: false,
+    /**
+     * display panel that shows a list of stories
+     * @type {Boolean}
+     */
+    showNav: true,
+    /**
+     * display panel that shows addon configurations
+     * @type {Boolean}
+     */
+    showPanel: true,
+    /**
+     * where to show the addon panel
+     * @type {('bottom'|'right')}
+     */
+    panelPosition: 'bottom',
+    /**
+     * regex for finding the hierarchy separator
+     * @example:
+     *   null - turn off hierarchy
+     *   /\// - split by `/`
+     *   /\./ - split by `.`
+     *   /\/|\./ - split by `/` or `.`
+     * @type {Regex}
+     */
+    hierarchySeparator: /\/|\./,
+    /**
+     * regex for finding the hierarchy root separator
+     * @example:
+     *   null - turn off multiple hierarchy roots
+     *   /\|/ - split by `|`
+     * @type {Regex}
+     */
+    hierarchyRootSeparator: /\|/,
+    /**
+     * sidebar tree animat
+     * ions
+     * @type {Boolean}
+     */
+    sidebarAnimations: true,
+    /**
+     * enable/disable shortcuts
+     * @type {Boolean}
+     */
+    enableShortcuts: true,
+    /**
+     * show/hide tool bar
+     * @type {Boolean}
+     */
+    isToolshown: true,
+    /**
+     * function to sort stories in the tree view
+     * common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)`
+     * if left undefined, then the order in which the stories are imported will
+     * be the order they display
+     * @type {Function}
+     */
+    storySort: undefined,
+  },
+});

.storybook/storybook.less

@@ -1,29 +0,0 @@
-html > body {
-  background-color: rgba(0, 0, 0, 0.05);
-  background-image: repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 7px,
-      rgba(0, 0, 0, 0.1) 1px,
-      transparent 8px
-    ),
-    repeating-linear-gradient(
-      90deg,
-      transparent,
-      transparent 7px,
-      rgba(0, 0, 0, 0.1) 1px,
-      transparent 8px
-    );
-  background-size: 8px 8px;
-}
-
-html {
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}

.storybook/webpack.config.js

@@ -14,90 +14,100 @@ const staticPath = path.resolve(
   'app'
 );
 
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.stories\.jsx?$/,
-        loaders: [
-          {
-            loader: require.resolve('@storybook/addon-storysource/loader'),
-            options: {
-              prettierConfig: {
-                parser: 'babylon',
-              },
+module.exports = ({config}) => {
+  const [firstRule, ...rules] = config.module.rules;
+  const filteredRules = rules.filter(rule => {
+    return (
+      (!rule.loader || !rule.loader.includes('file-loader')) &&
+      (!Array.isArray(rule.use) ||
+        !rule.use.find(({loader}) => loader && loader.includes('postcss-loader')))
+    );
+  });
+  const newConfig = {
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        {
+          ...firstRule,
+          test: /\.(mjs|[tj]sx?)$/,
+          include: [path.join(__dirname), staticPath, path.join(__dirname, '../docs-ui')],
+        },
+        {
+          test: /app\/icons\/.*\.svg$/,
+          use: [
+            {
+              loader: 'svg-sprite-loader',
             },
-          },
-        ],
-        enforce: 'pre',
-      },
-      {
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
-      },
-      {
-        test: /\.po$/,
-        loader: 'po-catalog-loader',
-        query: {
-          referenceExtensions: ['.js', '.jsx'],
-          domain: 'sentry',
+            {
+              loader: 'svgo-loader',
+            },
+          ],
         },
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /app\/icons\/.*\.svg$/,
-        use: [
-          {
-            loader: 'svg-sprite-loader',
-          },
-          {
-            loader: 'svgo-loader',
-          },
-        ],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader',
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.less$/,
+          use: [
+            {
+              loader: 'style-loader',
+            },
+            {
+              loader: 'css-loader',
+            },
+            {
+              loader: 'less-loader',
+            },
+          ],
+        },
+        {
+          test: /\.(woff|woff2|ttf|eot|svg|png|gif|ico|jpg)($|\?)/,
+          exclude: /app\/icons\/.*\.svg$/,
+          loader: 'file-loader?name=' + '[name].[ext]',
+        },
+        {
+          test: /\.po$/,
+          loader: 'po-catalog-loader',
+          query: {
+            referenceExtensions: ['.js', '.jsx'],
+            domain: 'sentry',
           },
-        ],
-      },
-      {
-        test: /\.(woff|woff2|ttf|eot|svg|png|gif|ico|jpg)($|\?)/,
-        exclude: /app\/icons\/.*\.svg$/,
-        loader: 'file-loader?name=' + '[name].[ext]',
-      },
+        },
+        ...filteredRules,
+      ],
+    },
+
+    plugins: [
+      ...config.plugins,
+      new webpack.ProvidePlugin({
+        $: 'jquery',
+        jQuery: 'jquery',
+        'window.jQuery': 'jquery',
+        'root.jQuery': 'jquery',
+        underscore: 'underscore',
+        _: 'underscore',
+      }),
+      new webpack.DefinePlugin({
+        'process.env': {
+          IS_PERCY: true,
+        },
+      }),
     ],
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery',
-      'window.jQuery': 'jquery',
-      'root.jQuery': 'jquery',
-      underscore: 'underscore',
-      _: 'underscore',
-    }),
-    new webpack.DefinePlugin({
-      'process.env': {
-        IS_PERCY: true,
+
+    resolve: {
+      ...config.resolve,
+      extensions: Array.from(
+        new Set([...config.resolve.extensions, ...appConfig.resolve.extensions])
+      ),
+      alias: {
+        ...config.resolve.alias,
+        ...appConfig.resolve.alias,
+        app: staticPath,
       },
-    }),
-  ],
-  resolve: {
-    extensions: appConfig.resolve.extensions,
-    alias: Object.assign({}, appConfig.resolve.alias, {
-      app: staticPath,
-    }),
-  },
+    },
+  };
+
+  return newConfig;
 };

docs-ui/components/chart-utilities.stories.js

@@ -7,7 +7,7 @@ import {number, boolean, text} from '@storybook/addon-knobs';
 import ChartZoom from 'app/components/charts/chartZoom';
 import LineChart from 'app/components/charts/lineChart';
 
-storiesOf('Charts|Utilities').add(
+storiesOf('Charts|Utilities', module).add(
   'Chart Zoom',
   withInfo(`This is a strongly opinionated component that takes a render prop through "children".
     It requires the Global Selection Header and will update the date range selector when zooming. It also

docs-ui/components/charts.stories.js

@@ -6,7 +6,7 @@ import {number, boolean, text} from '@storybook/addon-knobs';
 import LineChart from 'app/components/charts/lineChart';
 import BarChart from 'app/components/charts/barChart';
 
-storiesOf('Charts|Playground')
+storiesOf('Charts|Playground', module)
   .add(
     'Line Chart',
     withInfo('Description')(() => (