chore: bump dependencies (#4000)

* chore: bump test devDependencies

* wip

* fix script

* fix lint errors

* fix UTs

* fix size regression

* use a proper version

* fix TS error

* fix lint errors

* run prettier

* fix lint error

Co-authored-by: Malcolm <noinkling@users.noreply.github.com>

Author: layershifter

.babel-preset.js

@@ -24,6 +24,9 @@ const plugins = [
     '@babel/plugin-transform-runtime',
     {
       regenerator: isDocsBuild,
+      useESModules: isESBuild,
+      // https://github.com/babel/babel/issues/10261
+      version: require('@babel/runtime/package.json').version,
     },
   ],
   // Plugins that allow to reduce the target bundle size

.circleci/config.yml

@@ -71,10 +71,7 @@ jobs:
           at: ~/project
       - *restore_node_modules
       - run:
-          name: Lint TypeScript
-          command: yarn tsd:lint
-      - run:
-          name: Lint JavaScript
+          name: Lint
           command: yarn lint
 
 workflows:

.eslintignore

@@ -1,3 +1,4 @@
+bundle-size/dist/*
 coverage/*
 dist/*
 docs/dist/*

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "parser": "babel-eslint",
   "extends": ["airbnb", "prettier"],
   "env": {
@@ -15,11 +16,14 @@
     "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
     "no-return-assign": ["error", "except-parens"],
     "no-underscore-dangle": "off",
-    "padded-blocks": ["error", {
-      "blocks": "never",
-      "switches": "never",
-      "classes": "never"
-    }],
+    "padded-blocks": [
+      "error",
+      {
+        "blocks": "never",
+        "switches": "never",
+        "classes": "never"
+      }
+    ],
     "prefer-destructuring": "off",
     "jsx-a11y/alt-text": "warn",
     "jsx-a11y/anchor-is-valid": "off",
@@ -28,6 +32,8 @@
     "jsx-a11y/label-has-associated-control": "warn",
     "jsx-a11y/no-static-element-interactions": "warn",
     "jsx-a11y/role-has-required-aria-props": "warn",
+    "import/named": "off",
+    "import/no-cycle": "off",
     "import/no-dynamic-require": "off",
     "import/no-extraneous-dependencies": "off",
     "import/no-unresolved": "off",
@@ -36,11 +42,32 @@
     "react/button-has-type": "off",
     "react/destructuring-assignment": "off",
     "react/forbid-prop-types": "off",
-    "react/jsx-one-expression-per-line":  "off",
-    "react/jsx-filename-extension": [2, { "extensions": [".js"] }],
+    "react/jsx-curly-newline": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".tsx"] }],
+    "react/jsx-props-no-spreading": "off",
     "react/jsx-wrap-multilines": "off",
+    "react/prefer-stateless-function": "off",
     "react/no-unused-prop-types": "off",
     "react/sort-comp": "off",
-    "react/require-default-props":"off"
-  }
+    "react/state-in-constructor": "off",
+    "react/require-default-props": "off"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+      ],
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-empty-interface": "off"
+      }
+    }
+  ]
 }

.prettierrc.json

@@ -14,12 +14,6 @@
         "parser": "json"
       }
     },
-    {
-      "files": "*.{ts,tsx}",
-      "options": {
-        "semi": true
-      }
-    },
     {
       "files": "docs/src/examples/**/*.js",
       "options": {

bundle-size/fixtures/Portal.size.js

@@ -3,7 +3,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 function App() {
-  return <Portal trigger={<button />}>Some content</Portal>
+  return <Portal trigger={<button>A button</button>}>Some content</Portal>
 }
 
 ReactDOM.render(<App />, document.querySelector('#root'))

config.js

@@ -61,7 +61,7 @@ const config = {
     hash: false, // the hash of the compilation
     version: false, // webpack version info
     timings: true, // timing info
-    assets: true, // assets info
+    assets: false, // assets info
     chunks: false, // chunk info
     colors: true, // with console colors
     chunkModules: false, // built modules info to chunk info
@@ -74,6 +74,7 @@ const config = {
     modulesSort: '', // (string) sort the modules by that field
     chunksSort: '', // (string) sort the chunks by that field
     assetsSort: '', // (string) sort the assets by that field
+    warningsFilter: [/critical dependency:/i],
   },
 }
 

docs/src/App.js

@@ -11,7 +11,7 @@ import { docTypes } from './utils'
 const App = ({ componentMenu, versions }) => (
   <div style={style.container}>
     <Router>
-      <React.Fragment>
+      <>
         <Switch>
           {/*
            * We can't place <Sidebar /> inside of <Routes /> because it will be remounted on page
@@ -33,7 +33,7 @@ const App = ({ componentMenu, versions }) => (
         </Switch>
 
         <Routes />
-      </React.Fragment>
+      </>
     </Router>
   </div>
 )

docs/src/components/CarbonAd/CarbonAd.js

@@ -30,10 +30,6 @@ const waitForLoad = () => {
 }
 
 class CarbonAd extends Component {
-  static propTypes = {
-    location: PropTypes.object.isRequired,
-  }
-
   shouldComponentUpdate(nextProps) {
     return this.props.location.pathname !== nextProps.location.pathname
   }
@@ -73,4 +69,8 @@ class CarbonAd extends Component {
   }
 }
 
+CarbonAd.propTypes = {
+  location: PropTypes.object.isRequired,
+}
+
 export default withRouter(CarbonAd)

docs/src/components/CarbonAd/CarbonAdNative.js

@@ -9,10 +9,6 @@ const debug = makeDebugger('carbon-ad-native')
 const MAX_FAILED_ADS = 10
 
 class CarbonAdNative extends PureComponent {
-  static propTypes = {
-    inverted: PropTypes.bool,
-  }
-
   state = {}
 
   componentDidMount() {
@@ -23,7 +19,8 @@ class CarbonAdNative extends PureComponent {
     this.getAd()
   }
 
-  componentWillUpdate() {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillUpdate() {
     const shouldGetAd = Date.now() - this.timeOfLastAd > 10000
     debug('componentWillUpdate', { mounted: this.mounted, shouldGetAd })
     if (shouldGetAd) {
@@ -177,4 +174,8 @@ class CarbonAdNative extends PureComponent {
   }
 }
 
+CarbonAdNative.propTypes = {
+  inverted: PropTypes.bool,
+}
+
 export default CarbonAdNative