chore(project): update storybook to 6.4

packages/carbon-react/.storybook/main.js

@@ -16,14 +16,19 @@ module.exports = {
       name: '@storybook/addon-essentials',
       options: {
         actions: true,
-        backgrounds: true,
+        backgrounds: false,
         controls: true,
         docs: true,
         toolbars: true,
         viewport: true,
       },
     },
+    '@storybook/addon-storysource',
+    '@storybook/addon-a11y',
   ],
+  core: {
+    builder: 'webpack5',
+  },
   stories: [
     './Welcome/Welcome.stories.js',
     '../src/**/*.stories.js',
@@ -72,7 +77,6 @@ module.exports = {
           options: {
             postcssOptions: {
               plugins: [
-                require('postcss-custom-properties')(),
                 require('autoprefixer')({
                   overrideBrowserslist: ['last 1 version'],
                 }),

packages/carbon-react/.storybook/preview.js

@@ -80,6 +80,11 @@ export const parameters = {
 
     // https://storybook.js.org/docs/react/essentials/controls#sorting-controls
     sort: 'alpha',
+
+    hideNoControlsWarning: true,
+  },
+  darkMode: {
+    current: 'light',
   },
   // Small (<672)
   // Medium (672 - 1056px)

packages/carbon-react/.storybook/theme.js

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+console.log('I AM THEME');
+
 import { create } from '@storybook/theming';
 import { g10 } from '@carbon/themes';
 import PackageInfo from './../package.json';

packages/carbon-react/package.json

@@ -62,33 +62,36 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-docs": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/react": "^6.3.6",
-    "@storybook/theming": "^6.3.6",
-    "autoprefixer": "^10.2.5",
-    "babel-loader": "^8.2.2",
+    "@storybook/addon-a11y": "^6.4.9",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-docs": "^6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-storysource": "^6.4.9",
+    "@storybook/builder-webpack5": "^6.4.9",
+    "@storybook/manager-webpack5": "^6.4.9",
+    "@storybook/react": "^6.4.9",
+    "@storybook/theming": "^6.4.9",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^8.2.3",
     "babel-plugin-dev-expression": "^0.2.2",
     "babel-preset-carbon": "^0.1.0",
     "browserslist-config-carbon": "^10.6.1",
-    "css-loader": "^5.2.4",
+    "css-loader": "^6.5.1",
     "fs-extra": "^10.0.0",
-    "mini-css-extract-plugin": "^1.6.0",
-    "postcss": "^8.2.14",
-    "postcss-custom-properties": "^11.0.0",
-    "postcss-loader": "4",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.5",
+    "postcss-loader": "^6.2.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.46.0",
     "rollup-plugin-strip-banner": "^2.0.0",
-    "rtlcss": "^3.1.2",
-    "sass": "^1.43.3",
-    "sass-loader": "10",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.41.5"
+    "rtlcss": "^3.5.0",
+    "sass": "^1.45.0",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.65.0"
   },
   "sideEffects": [
     "es/index.js",

packages/react/.storybook/main.js

@@ -36,6 +36,12 @@ module.exports = {
     require.resolve('./addon-theme/register'),
   ],
 
+  core: {
+    builder: 'webpack5',
+  },
+
+  staticDirs: [path.join(__dirname, 'assets')],
+
   stories: glob.sync(
     [
       './Welcome/Welcome.stories.js',
@@ -48,7 +54,12 @@ module.exports = {
     }
   ),
 
-  webpack(config) {
+  webpack(config, { configType }) {
+    config.devtool =
+      configType === 'DEVELOPMENT'
+        ? 'eval-cheap-module-source-map'
+        : 'source-map';
+
     const babelLoader = config.module.rules.find((rule) => {
       return rule.use.some(({ loader }) => {
         return loader.includes('babel-loader');
@@ -98,12 +109,13 @@ module.exports = {
         `,
         implementation: require('sass'),
         includePaths: [path.resolve(__dirname, '..', '..', 'node_modules')],
+        sourceMap: true,
       },
     };
 
     config.module.rules.push({
       test: /-story\.jsx?$/,
-      loaders: [
+      use: [
         {
           loader: require.resolve('@storybook/source-loader'),
           options: {
@@ -138,15 +150,14 @@ module.exports = {
         {
           loader: 'postcss-loader',
           options: {
-            plugins: () => {
-              const autoPrefixer = require('autoprefixer')({
-                overrideBrowserslist: ['last 1 version', 'ie >= 11'],
-              });
-              return [
+            postcssOptions: {
+              plugins: [
                 customProperties(),
-                autoPrefixer,
+                require('autoprefixer')({
+                  overrideBrowserslist: ['last 1 version'],
+                }),
                 ...(useRtl ? [rtlcss] : []),
-              ];
+              ],
             },
             sourceMap: true,
           },

packages/react/package.json

@@ -29,12 +29,12 @@
   },
   "scripts": {
     "build": "yarn clean && node scripts/build.js && rollup -c",
-    "build-storybook": "cross-env NODE_ENV=production build-storybook -s ./.storybook/assets",
+    "build-storybook": "cross-env NODE_ENV=production build-storybook",
     "clean": "rimraf es lib umd storybook-static build react-docgen.json",
     "postinstall": "carbon-telemetry collect --install",
     "prepublish": "yarn build",
     "start": "yarn storybook",
-    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000 -s ./.storybook/assets",
+    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000",
     "snapshot": "build-storybook && percy-storybook --widths=320,1280",
     "test:e2e": "cypress run-ct --config video=false,screenshotOnRunFailure=false"
   },
@@ -86,18 +86,21 @@
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-docs": "^6.3.6",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-links": "^6.3.6",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-docs": "^6.4.9",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-links": "^6.4.9",
     "@storybook/addon-notes": "^5.3.21",
-    "@storybook/addon-storysource": "^6.3.6",
-    "@storybook/addons": "^6.3.6",
-    "@storybook/react": "^6.3.6",
-    "@storybook/source-loader": "^6.3.6",
-    "@storybook/theming": "^6.3.6",
+    "@storybook/addon-storysource": "^6.4.9",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/builder-webpack5": "^6.4.9",
+    "@storybook/manager-webpack5": "^6.4.9",
+    "@storybook/react": "^6.4.9",
+    "@storybook/source-loader": "^6.4.9",
+    "@storybook/theming": "^6.4.9",
     "@testing-library/cypress": "^8.0.0",
-    "babel-loader": "^8.2.2",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^8.2.3",
     "babel-plugin-dev-expression": "^0.2.2",
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
@@ -108,18 +111,18 @@
     "cli-table": "^0.3.0",
     "core-js": "^3.16.0",
     "cross-env": "^5.2.0",
-    "css-loader": "^3.4.2",
+    "css-loader": "^6.5.1",
     "cypress": "^8.1.0",
     "cypress-real-events": "^1.5.1",
     "fast-glob": "^3.2.7",
     "fast-sass-loader": "^1.5.0",
     "gzip-size": "^6.0.0",
     "lcov2badge": "^0.1.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^2.4.5",
     "npm-which": "^3.0.1",
     "object-assign": "^4.1.1",
     "postcss-custom-properties": "^9.0.2",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^6.2.1",
     "promise": "^8.0.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
@@ -132,12 +135,13 @@
     "rollup-plugin-strip-banner": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rtlcss": "^2.4.0",
-    "sass": "^1.43.3",
-    "sass-loader": "^10.1.1",
+    "sass": "^1.45.0",
+    "sass-loader": "^12.4.0",
     "storybook-readme": "^5.0.9",
     "string-replace-loader": "^2.1.0",
+    "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^2.3.2",
-    "webpack": "^4.41.5",
+    "webpack": "^5.65.0",
     "webpack-dev-server": "^3.11.2",
     "whatwg-fetch": "^3.6.2"
   },

packages/test-utils/src/renderer.js

@@ -89,7 +89,7 @@ function convert(value) {
   }
 
   if (value instanceof types.Color) {
-    return value.toString();
+    return value.dartValue.toString();
   }
 
   if (value instanceof types.List) {