Use Parcel to build storybook (#3600)

Author: devongovett

.chromatic/main.js

@@ -1,8 +1,9 @@
 
-const webpackconfig = require('./webpack-chromatic.config.js');
-
 module.exports = {
-  stories: ['../packages/**/chromatic/**/*.chromatic.@(js|jsx|ts|tsx)'],
+  core: {
+    builder: "storybook-builder-parcel",
+  },
+  stories: ['../packages/**/chromatic/**/*.chromatic.{js,jsx,ts,tsx}'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',
@@ -11,25 +12,5 @@ module.exports = {
   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/preview.js

@@ -7,7 +7,7 @@ import {withChromaticProvider} from './custom-addons/chromatic';
 // decorator order matters, the last one will be the outer most
 
 configureActions({
-  depth: 1
+  depth: 10
 });
 
 export const parameters = {

.chromatic/webpack-chromatic.config.js

@@ -6,3 +6,4 @@ node_modules
 packages/*/*/dist
 packages/react-aria/dist
 packages/react-stately/dist
+packages/dev/storybook-builder-preview/preview.js

.eslintignore

@@ -0,0 +1,15 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "bundler": "@parcel/bundler-experimental",
+  "transformers": {
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  },
+  "optimizers": {
+    "*.css": ["@parcel/optimizer-css"]
+  }
+}

.parcelrc-storybook

@@ -9,7 +9,7 @@ export function VerticalCenter({children, className, style}) {
       className={ clsx('react-spectrum-story', className) }
       style={{...style, minHeight: size.height}}
     >
-      <span style={{position: 'absolute', top: 0, left: 0}}>{REACT_VERSION}</span>
+      <span style={{position: 'absolute', top: 0, left: 0}}>{React.version}</span>
       { children }
     </div>
   );

.storybook/intl-loader.js

@@ -1,8 +1,9 @@
 
-const webpackconfig = require('./webpack-storybook.config.js');
-
 module.exports = {
-  stories: ['../packages/**/stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    builder: "storybook-builder-parcel",
+  },
+  stories: ['../packages/*/*/stories/*.stories.{js,jsx,ts,tsx}'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',
@@ -17,26 +18,6 @@ module.exports = {
     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;
-  },
   reactOptions: {
     strictMode: process.env.STRICT_MODE
   },

.storybook/layout.js

@@ -72,14 +72,14 @@
     "@parcel/transformer-typescript-types": "^2.2.1",
     "@spectrum-css/component-builder": "^1.0.0",
     "@spectrum-css/vars": "^2.3.0",
-    "@storybook/addon-a11y": "^6.5.7",
-    "@storybook/addon-actions": "^6.5.7",
-    "@storybook/addon-controls": "^6.5.7",
-    "@storybook/addon-links": "^6.5.7",
-    "@storybook/addons": "^6.5.7",
-    "@storybook/api": "^6.5.7",
-    "@storybook/components": "^6.5.7",
-    "@storybook/react": "^6.5.7",
+    "@storybook/addon-a11y": "^6.5.12",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-controls": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/api": "^6.5.12",
+    "@storybook/components": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "@storybook/testing-react": "^1.3.0",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
@@ -92,7 +92,6 @@
     "autoprefixer": "^9.6.0",
     "axe-core": "^3.0.3",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-macros": "^3.0.1",
     "babel-plugin-react-remove-properties": "^0.3.0",
@@ -106,7 +105,6 @@
     "core-js": "^3.0.0",
     "cross-env": "^7.0.2",
     "cross-spawn": "^7.0.3",
-    "css-loader": "^2.1.1",
     "delta-e": "^0.0.8",
     "eslint": "^7.10.0",
     "eslint-plugin-import": "^2.22.1",
@@ -119,7 +117,6 @@
     "eslint-plugin-rulesdir": "^0.1.0",
     "fast-check": "^2.19.0",
     "fast-glob": "^3.1.0",
-    "file-loader": "^0.9.0",
     "fs-extra": "^10.0.0",
     "full-icu": "^1.3.0",
     "identity-obj-proxy": "^3.0.0",
@@ -147,7 +144,6 @@
     "postcss-functions": "^3.0.0",
     "postcss-import": "^12.0.1",
     "postcss-inherit": "^4.1.0",
-    "postcss-loader": "^3.0.0",
     "postcss-logical": "^4.0.0",
     "postcss-modules": "^3.2.2",
     "postcss-nested": "^4.1.2",
@@ -165,16 +161,11 @@
     "sharp": "^0.29.3",
     "sinon": "^7.3.1",
     "storybook-dark-mode": "^1.1.1-canary.120.3843.0",
-    "style-loader": "^0.23.1",
     "tempy": "^0.5.0",
     "typescript": "^4.6.0",
     "typescript-strict-plugin": "^2.0.0",
-    "url-loader": "^1.1.2",
     "verdaccio": "^5.13.0",
     "walk-object": "^4.0.0",
-    "webpack": "^4.44.2",
-    "webpack-dev-middleware": "^3.6.1",
-    "webpack-hot-middleware": "^2.24.3",
     "wsrun": "^5.0.0",
     "yargs": "^17.2.1"
   },
@@ -183,6 +174,7 @@
     "@babel/runtime": "7.12.5",
     "postcss-calc": "6.0.2",
     "jsdom": "16.7.0",
-    "postcss-modules": "^3.2.2"
+    "postcss-modules": "^3.2.2",
+    "react-refresh": "0.9.0"
   }
 }