Upgrade storybook to v6 (#1350)

* Upgrade storybook to v6

* add storybook dark mode so we can have the storybook chrome match our currently selected theme
no good way to update one based on the other right now

* Rename files more clearly, we can't use webpack.config.js because storybook will try to do some things automatically with that

* remove added tsconfig include

Co-authored-by: Danni <[email protected]>

Author: snowystinger

.chromatic/addons.js

@@ -0,0 +1,36 @@
+
+const webpackconfig = require('./webpack-chromatic.config.js');
+
+module.exports = {
+  stories: ['../packages/**/chromatic/**/*.chromatic.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    '@storybook/addon-knobs'
+  ],
+  typescript: {
+    check: false,
+    reactDocgen: false
+  },
+  webpackFinal: async (config) => {
+    let custom = webpackconfig();
+
+    let resultConfig = {
+      ...config,
+      plugins: config.plugins.concat(custom.plugins),
+      parallelism: 1,
+      module: {
+        ...config.module,
+        rules: custom.module.rules
+      }
+    };
+
+    if (resultConfig.mode === 'production') {
+      // see https://github.com/storybooks/storybook/issues/1570
+      resultConfig.plugins = resultConfig.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
+    }
+
+    return resultConfig;
+  }
+};

.chromatic/config.js

@@ -0,0 +1,6 @@
+import addons from '@storybook/addons';
+
+addons.setConfig({
+  showRoots: false,
+  enableShortcuts: false
+});

.chromatic/main.js

@@ -0,0 +1,28 @@
+import {configureActions} from '@storybook/addon-actions';
+import React from 'react';
+import {VerticalCenter} from './layout';
+import {withChromaticProvider} from './custom-addons/chromatic';
+
+
+// decorator order matters, the last one will be the outer most
+
+configureActions({
+  depth: 1
+});
+
+export const parameters = {
+  options: {
+    storySort: (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+  },
+  a11y: {},
+  layout: 'fullscreen'
+};
+
+export const decorators = [
+  story => (
+    <VerticalCenter style={{alignItems: 'center', minHeight: null, boxSizing: 'border-box', display: 'flex', justifyContent: 'center'}}>
+      {story()}
+    </VerticalCenter>
+  ),
+  withChromaticProvider
+];

.chromatic/manager.js

@@ -2,6 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const md5 = require('md5');
 const fs = require('fs');
+const reactVersion = require('react/package.json').version;
 
 const fileHashMemo = {};
 
@@ -22,15 +23,9 @@ const generateScopedName = (localName, resourcePath) => {
   return `${componentName}_${localName}_${contentHash}`;
 };
 
-module.exports = ({config}, env) => {
-  if (env === 'PRODUCTION') {
-    // see https://github.com/storybooks/storybook/issues/1570
-    config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
-  }
-
-  config.resolve.extensions.push('.ts', '.tsx');
-
-  return Object.assign(config, {
+module.exports = () => {
+  return {
+    plugins: [new webpack.DefinePlugin({REACT_VERSION: JSON.stringify(reactVersion)})],
     parallelism: 1,
     module: {
       rules: [
@@ -45,28 +40,6 @@ module.exports = ({config}, env) => {
             { loader: require.resolve('babel-loader') },
           ]
         },
-        {
-          test: /\.styl$/,
-          use: [
-            'style-loader',
-            'css-loader',
-            {
-              loader: 'stylus-loader',
-              options: {
-                paths: [__dirname + '/../node_modules'],
-                define: {
-                  'embedurl': require('stylus').url()
-                },
-                'resolve url': true,
-                set: {
-                  'include css': true
-                },
-                use: [require('svg-stylus')()]
-              }
-            }
-          ],
-          include: path.resolve(__dirname, '../')
-        },
         {
           test: /packages[\\/].*\.css$/,
           use: [
@@ -103,5 +76,5 @@ module.exports = ({config}, env) => {
         }
       ]
     }
-  });
+  };
 };

.chromatic/preview.js

@@ -8,7 +8,7 @@ import {Text} from '@react-spectrum/text';
 import {themes, defaultTheme} from '../../constants';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 
-document.body.style.margin = 0;
+document.body.style.margin = '0';
 
 const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
   if (k.includes('providerSwitcher-')) {

.chromatic/webpack.config.js renamed to .chromatic/webpack-chromatic.config.js

@@ -0,0 +1,39 @@
+
+const webpackconfig = require('./webpack-storybook.config.js');
+
+module.exports = {
+  stories: ['../packages/**/stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    '@storybook/addon-knobs',
+    'storybook-dark-mode',
+    './custom-addons/provider/register',
+    './theme.register'
+  ],
+  typescript: {
+    check: false,
+    reactDocgen: false
+  },
+  webpackFinal: async (config) => {
+    let custom = webpackconfig();
+
+    let resultConfig = {
+      ...config,
+      plugins: config.plugins.concat(custom.plugins),
+      parallelism: 1,
+      module: {
+        ...config.module,
+        rules: custom.module.rules
+      }
+    };
+
+    if (resultConfig.mode === 'production') {
+      // see https://github.com/storybooks/storybook/issues/1570
+      resultConfig.plugins = resultConfig.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
+    }
+
+    return resultConfig;
+  }
+};