feat(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-stylegu…

…idist 12.0.1 (#3568) * chore(webpack): Upgrade webpack to 5 * chore(webpack): update stylegudist and resolve import and state issue * chore(webpack): fix chromatic-deploy and flow error * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback --------- Co-authored-by: Jerry Jiang <[email protected]>
box · Jul 10, 2024 · a812294 · a812294
1 parent f5d4955
commit a812294
Show file tree

Hide file tree

Showing 38 changed files with 2,361 additions and 2,107 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -17,6 +17,7 @@
 <PROJECT_ROOT>/node_modules/jest-puppeteer*
 <PROJECT_ROOT>/node_modules/start-server-and-test*
 <PROJECT_ROOT>/node_modules/jest-image-snapshot*
+<PROJECT_ROOT>/node_modules/react-styleguidist*
 <PROJECT_ROOT>/.*/__tests__/.*
 
 [options]

diff --git a/package.json b/package.json
@@ -42,15 +42,15 @@
         "build": "yarn build:dev:dist",
         "build:ci:es": "yarn build:prod:es",
         "build:ci:dist": "LANGUAGE=en-US ENTRY=explorer REACT=true yarn build:prod:dist",
-        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development webpack --config scripts/webpack.config.js --mode development --progress --colors",
+        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development webpack --config scripts/webpack.config.js --mode development --progress",
         "build:dev:es": "BABEL_ENV=development NODE_ENV=development yarn build:es --copy-files --source-maps inline --watch --ignore \"**/*.d.ts,**/__tests__/**,**/__mocks__/**\"",
         "build:es": "babel src --extensions '.js,.tsx,.ts' --out-dir es",
         "build:i18n": "props2es",
         "build:npm": "npm-run-all clean build:i18n build:prod:npm build:prod:es",
         "build:prod:analyze": "BUNDLE_ANALYSIS=true npm-run-all setup build:prod:npm",
         "build:prod:es": "BABEL_ENV=npm NODE_ENV=production yarn build:es --source-maps --ignore \"**/*.d.ts,**/__tests__/**,**/__mocks__/**\"",
         "build:prod:dist": "NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
-        "build:prod:examples": "LANGUAGE=en-US REACT=true NODE_ENV=production node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js build --config scripts/styleguide.config.js --mode production",
+        "build:prod:examples": "LANGUAGE=en-US REACT=true NODE_ENV=production node --max_old_space_size=8192 node_modules/.bin/styleguidist build --config scripts/styleguide.config.js --mode production",
         "build:prod:npm": "BABEL_ENV=production OUTPUT=dist LANGUAGE=en-US REACT=true yarn build:prod:dist",
         "build:prod:storybook": "LANGUAGE=en-US REACT=true BROWSERSLIST_ENV=production BABEL_ENV=development NODE_ENV=development storybook build -c .storybook -o styleguide/storybook",
         "build:sync": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development RSYNC=true webpack --config scripts/webpack.config.js --mode development",
@@ -75,8 +75,8 @@
         "release:cdn": "yarn setup; node ./scripts/prod.js",
         "setup": "yarn install --frozen-lockfile; npm-run-all clean build:i18n",
         "start": "npm-run-all setup start:examples",
-        "start:dev": "yarn setup; LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development node --max_old_space_size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --config scripts/webpack.config.js --mode development",
-        "start:examples": "EXAMPLES=true LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js server --config scripts/styleguide.config.js --mode development",
+        "start:dev": "yarn setup; LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development node --max_old_space_size=8192 node_modules/.bin/webpack-dev-server --config scripts/webpack.config.js --mode development",
+        "start:examples": "EXAMPLES=true LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development node --max_old_space_size=8192 node_modules/.bin/styleguidist server --config scripts/styleguide.config.js --mode development",
         "start:npm": "yarn setup; yarn build:dev:es",
         "start:storybook": "LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development storybook dev -p 6061",
         "start:storybook:ci": "yarn start:storybook --ci",
@@ -200,7 +200,7 @@
         "babel-preset-react-app": "^9.1.0",
         "camelcase": "^5.3.1",
         "chromatic": "^10.6.1",
-        "circular-dependency-plugin": "^5.2.0",
+        "circular-dependency-plugin": "^5.2.2",
         "classnames": "^2.2.6",
         "color": "^3.1.2",
         "colors": "^1.4.0",
@@ -211,6 +211,7 @@
         "core-js": "^3.6.4",
         "cosmiconfig": "^6.0.0",
         "css-loader": "^3.4.2",
+        "css-minimizer-webpack-plugin": "^7.0.0",
         "cssnano": "^4.1.10",
         "cypress": "^13.7.3",
         "deepmerge": "^4.2.2",
@@ -254,18 +255,16 @@
         "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",
         "message-accumulator": "^2.1.1",
-        "mini-css-extract-plugin": "^0.9.0",
+        "mini-css-extract-plugin": "^2.9.0",
         "mousetrap": "^1.6.3",
         "msw": "^2.1.5",
         "msw-storybook-addon": "2.0.0-beta.0",
         "mutationobserver-shim": "^0.3.3",
         "npm-run-all": "^4.1.3",
         "nsp": "^3.2.1",
-        "optimize-css-assets-webpack-plugin": "^5.0.3",
         "ora": "^4.0.3",
         "pikaday": "^1.8.0",
         "postcss-loader": "^3.0.0",
-        "postcss-safe-parser": "^4.0.1",
         "prettier": "^1.19.1",
         "prettier-eslint-cli": "^5.0.0",
         "prop-types": "^15.7.2",
@@ -289,7 +288,7 @@
         "react-responsive": "8.2.0",
         "react-router-dom": "^5.0.0",
         "react-scrollbars-custom": "^4.0.21",
-        "react-styleguidist": "^8.0.6",
+        "react-styleguidist": "12.0.1",
         "react-test-renderer": "^16.13.1",
         "react-tether": "1.0.5",
         "react-textarea-autosize": "^8.5.3",
@@ -320,10 +319,10 @@
         "uniqid": "^5.2.0",
         "uuid": "^8.3.2",
         "wait-on": "^3.3.0",
-        "webpack": "^4.47.0",
-        "webpack-bundle-analyzer": "^3.6.0",
-        "webpack-cli": "^3.3.10",
-        "webpack-dev-server": "^3.10.1",
+        "webpack": "^5.92.0",
+        "webpack-bundle-analyzer": "^4.10.2",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.0.4",
         "worker-farm": "^1.7.0",
         "yargs": "^15.1.0"
     },
@@ -379,7 +378,6 @@
     },
     "resolutions": {
         "ip": "1.1.8",
-        "terser-webpack-plugin": "^4.2.3",
         "**/react-intl/**/@types/react": "^16.9.18"
     },
     "overrides": {

diff --git a/scripts/styleguide.config.js b/scripts/styleguide.config.js
@@ -13,7 +13,6 @@ const allSections = [
         name: 'Elements',
         components: () => [
             '../src/elements/content-explorer/ContentExplorer.js',
-            '../src/elements/content-open-with/ContentOpenWith.js',
             '../src/elements/content-picker/ContentPicker.js',
             '../src/elements/content-preview/ContentPreview.js',
             '../src/elements/content-sharing/ContentSharing.js',

diff --git a/scripts/styleguide.setup.js b/scripts/styleguide.setup.js
@@ -8,5 +8,40 @@ global.FOLDER_ID = global.FOLDER_ID || __FOLDERID__ || '69083462919'; // eslint-
 global.TOKEN = global.TOKEN || __TOKEN__ || 'P1n3ID8nYMxHRWvenDatQ9k6JKzWzYrz'; // eslint-disable-line
 global.PROPS = global.PROPS || {}; // eslint-disable-line
 
-// Components
+// Classes
 global.IntlProvider = IntlProvider;
+
+// Components
+global.Avatar = require('../src/components/avatar').default;
+global.Button = require('../src/components/button').default;
+global.DatalistItem = require('../src/components/datalist-item').default;
+global.Flyout = require('../src/components/flyout').Flyout;
+global.Label = require('../src/components/label').default;
+global.Link = require('../src/components/link').Link;
+global.ModalActions = require('../src/components/modal/ModalActions').default;
+global.ModalDialog = require('../src/components/modal/ModalDialog').default;
+global.Overlay = require('../src/components/flyout').Overlay;
+global.PlainButton = require('../src/components/plain-button').default;
+global.PrimaryButton = require('../src/components/primary-button').default;
+global.SearchForm = require('../src/components/search-form').default;
+global.SelectMenuLinkItem = require('../src/components/menu').SelectMenuLinkItem;
+global.Table = require('../src/components/table').Table;
+global.TableBody = require('../src/components/table').TableBody;
+global.TableCell = require('../src/components/table').TableCell;
+global.TableHeader = require('../src/components/table').TableHeader;
+global.TableHeaderCell = require('../src/components/table').TableHeaderCell;
+global.TableRow = require('../src/components/table').TableRow;
+global.TextArea = require('../src/components/text-area').default;
+global.TextInput = require('../src/components/text-input').default;
+
+// Icons
+global.IconHelp = require('../src/icons/general/IconHelp').default;
+
+// Features
+global.QuickSearch = require('../src/features/quick-search').QuickSearch;
+global.QuickSearchItem = require('../src/features/quick-search').QuickSearchItem;
+
+// Form Elements
+global.FormElement = require('../src/components/form-elements/form').default;
+global.TextAreaElement = require('../src/components/form-elements/text-area').default;
+global.TextInputElement = require('../src/components/form-elements/text-input').default;
diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js
@@ -5,9 +5,8 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const RsyncPlugin = require('@box/frontend/webpack/RsyncPlugin');
-const safeParser = require('postcss-safe-parser');
 const packageJSON = require('../package.json');
 const rsyncConf = fs.existsSync('scripts/rsync.json') ? require('./rsync.json') : {}; // eslint-disable-line
 const license = require('./license');
@@ -78,7 +77,6 @@ function getConfig(isReactExternalized) {
         },
         devServer: {
             host: '0.0.0.0',
-            stats,
         },
         resolveLoader: {
             modules: [path.resolve('src'), path.resolve('node_modules')],
@@ -99,6 +97,9 @@ function getConfig(isReactExternalized) {
                 },
             ],
         },
+        optimization: {
+            minimizer: [new CssMinimizerPlugin()],
+        },
         performance: {
             maxAssetSize: 2000000,
             maxEntrypointSize: 2000000,
@@ -117,12 +118,7 @@ function getConfig(isReactExternalized) {
             }),
             new MiniCssExtractPlugin({
                 filename: '[name].css',
-            }),
-            new OptimizeCssAssetsPlugin({
-                cssProcessorOptions: {
-                    discardComments: { removeAll: true },
-                    parser: safeParser,
-                },
+                ignoreOrder: true,
             }),
             new BannerPlugin(license),
             new IgnorePlugin({

diff --git a/src/components/flyout/Flyout.md b/src/components/flyout/Flyout.md
@@ -7,9 +7,6 @@ which have documentation on parameters used by this component (e.g., `offset`).
 **Bottom Right**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout closeOnClickOutside={ false } className="hellooo">
     <Button>Nothing to see here</Button>
     <Overlay>
@@ -26,9 +23,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Bottom Left**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="bottom-left">
     <Button>Bottom Left</Button>
     <Overlay>
@@ -42,9 +36,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Bottom Center**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="bottom-center">
     <Button>Bottom Center</Button>
     <Overlay>
@@ -58,9 +49,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Top Left**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="top-left">
     <Button>Top Left</Button>
     <Overlay>
@@ -74,9 +62,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Top Right**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="top-right">
     <Button>Top Right</Button>
     <Overlay>
@@ -90,9 +75,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Top Center**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="top-center">
     <Button>Top Center</Button>
     <Overlay>
@@ -106,9 +88,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Middle Right**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="middle-right">
     <Button>Middle Right</Button>
     <Overlay>
@@ -122,9 +101,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Middle Left**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout position="middle-left">
     <Button>Middle Left</Button>
     <Overlay>
@@ -138,9 +114,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Open on Hover**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-
 <Flyout openOnHover>
     <Button>Open on Hover</Button>
     <Overlay>
@@ -157,10 +130,6 @@ const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
 **Complex**
 
 ```
-const Flyout = require('box-ui-elements/es/components/flyout').Flyout;
-const Overlay = require('box-ui-elements/es/components/flyout').Overlay;
-const IconHelp = require('box-ui-elements/es/icons/general/IconHelp').default;
-
 <Flyout className="amsterdam-survey-overlay" offset="0 0">
     <PlainButton className="amsterdam-survey-button">
         <IconHelp />

diff --git a/src/components/focus-trap/FocusTrap.md b/src/components/focus-trap/FocusTrap.md
@@ -7,9 +7,7 @@ Traps tab focus within the children of the focus. Should be used for overlays, m
 **With focusable children**
 
 ```js
-initialState = {
-  isVisible: false,
-};
+const [state, setState] = React.useState({ isVisible: false });
 
 <div>
   {state.isVisible && (
@@ -22,12 +20,20 @@ initialState = {
         <a href="#">focusable el</a>
       </p>
       <p>non-focusable el</p>
-      <Button onClick={() => setState({ isVisible: false })}>
+      <Button
+        onClick={() =>
+          setState(prevState => ({ ...prevState, isVisible: false }))
+        }
+      >
         Close example and return focus
       </Button>
     </FocusTrap>
   )}
-  <Button onClick={() => setState({ isVisible: !state.isVisible })}>
+  <Button
+    onClick={() =>
+      setState(prevState => ({ ...prevState, isVisible: !state.isVisible }))
+    }
+  >
     Toggle example
   </Button>
 </div>;
@@ -36,9 +42,7 @@ initialState = {
 **Without focusable children**
 
 ```js
-initialState = {
-  isVisible: false,
-};
+const [state, setState] = React.useState({ isVisible: false });
 
 <div>
   {state.isVisible && (
@@ -50,7 +54,11 @@ initialState = {
       </p>
     </FocusTrap>
   )}
-  <Button onClick={() => setState({ isVisible: !state.isVisible })}>
+  <Button
+    onClick={() =>
+      setState(prevState => ({ ...prevState, isVisible: !state.isVisible }))
+    }
+  >
     Toggle example
   </Button>
 </div>;