feat: Update, cleanup and move necessary dependencies to peerDependen…

…cies (#485)

* move dependencies, peers and devs

* update snapshots and tests related

* cleanup warnings + more deps updates

* update transition group

* update leftover dependencies

* move out foundry deps, update peer deps

* fix accessibility errors in CloseButton of Sidebar

* fix(configs): fix tests using popper.js

Mocks document.createRange which is used by popper.js, dependency of react-popper.

* test(components): update storyshots

BREAKING CHANGE: Upgraded minimum React version to v16.8.6

jest.setup.js

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/* global expect */
+
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import '@testing-library/jest-dom/extend-expect';
@@ -59,6 +61,18 @@ global.__DEV__ = false;
 global.__PRODUCTION__ = false;
 global.__TEST__ = true;
 
+// react-popper relies on document.createRange
+if (global.document) {
+  document.createRange = () => ({
+    setStart: () => {},
+    setEnd: () => {},
+    commonAncestorContainer: {
+      nodeName: 'BODY',
+      ownerDocument: document
+    }
+  });
+}
+
 // Add custom matchers
 expect.extend(toHaveNoViolations);
 

package.json

@@ -66,6 +66,8 @@
     "@babel/preset-env": "^7.4.2",
     "@emotion/babel-preset-css-prop": "^10.0.9",
     "@emotion/cache": "^10.0.19",
+    "@emotion/core": "^10.0.21",
+    "@emotion/styled": "^10.0.17",
     "@emotion/stylis": "^0.8.4",
     "@storybook/addon-a11y": "^5.2.0",
     "@storybook/addon-actions": "^5.2.0",
@@ -80,6 +82,8 @@
     "@storybook/react": "^5.2.0",
     "@storybook/source-loader": "^5.2.4",
     "@sumup/foundry": "^1.5.0",
+    "@svgr/webpack": "^4.3.3",
+    "@testing-library/dom": "^6.5.0",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",
     "@testing-library/react-hooks": "^2.0.1",
@@ -90,64 +94,58 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-dev-expression": "^0.2.2",
     "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-inline-react-svg": "^1.1.0",
     "babel-plugin-lodash": "^3.3.2",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-plugin-react-docgen": "^3.0.0",
     "codecov": "^3.2.0",
+    "commitizen": "^3.1.2",
     "component-playground": "^3.2.1",
-    "cross-env": "^5.2.0",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.2.0",
+    "cz-customizable": "^6.2.0",
+    "cz-customizable-ghooks": "^1.5.0",
+    "emotion-theming": "^10.0.19",
     "eslint-plugin-prettier": "^3.1.0",
     "expect": "^24.5.0",
     "gh-pages": "^2.0.1",
-    "husky": "^1.3.1",
     "jest": "^24.5.0",
     "jest-axe": "^3.1.1",
     "jest-cli": "^24.5.0",
     "jest-emotion": "^10.0.10",
     "license-checker": "^25.0.1",
-    "onchange": "^5.2.0",
+    "onchange": "^6.1.0",
     "postcss-loader": "^3.0.0",
     "postcss-object-fit-images": "^1.1.2",
-    "prettier": "1.16.4",
-    "prettier-eslint": "^8.8.2",
+    "react": "^16.10.2",
+    "react-docgen": "^4.1.0",
+    "react-docgen-annotation-resolver": "^1.1.0",
+    "react-dom": "^16.10.2",
+    "react-svg-loader": "^3.0.3",
     "react-test-renderer": "^16.8.6",
     "require-context.macro": "^1.2.2",
-    "style-loader": "^0.23.1",
+    "style-loader": "^1.0.0",
     "webpack-merge": "^4.2.1",
     "yargs": "^14.0.0"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.10",
     "@emotion/is-prop-valid": "^0.8.2",
-    "@emotion/styled": "^10.0.10",
-    "babel-plugin-inline-react-svg": "^1.1.0",
-    "commitizen": "^3.0.5",
-    "css-loader": "^2.1.1",
-    "cz-customizable": "^5.3.0",
-    "cz-customizable-ghooks": "^1.5.0",
-    "dom-helpers": "^3.4.0",
-    "downshift": "^1.31.14",
-    "emotion-theming": "^10.0.10",
-    "facepaint": "^1.2.0",
-    "hoist-non-react-statics": "^3.3.0",
+    "dom-helpers": "^5.1.0",
+    "downshift": "^3.3.4",
     "keycode": "^2.2.0",
-    "lint-staged": "^8.1.5",
     "lodash": "^4.17.11",
     "markdown-to-jsx": "^6.9.3",
     "moment": "^2.24.0",
     "no-scroll": "^2.1.1",
     "polished": "^3.1.0",
     "prop-types": "^15.7.2",
     "prop-types-exact": "^1.2.0",
-    "react": "^16.8.6",
-    "react-dates": "^16.6.1",
-    "react-dom": "^16.8.6",
+    "react-dates": "^21.2.0",
     "react-event-listener": "^0.6.6",
     "react-modal": "^3.8.1",
     "react-popper": "^1.3.3",
     "react-text-mask": "5.4.3",
-    "react-transition-group": "^2.7.1",
-    "react-with-styles": "^3.2.1",
+    "react-transition-group": "^4.3.0",
     "recompose": "^0.30.0",
     "text-mask-addons": "^3.8.0",
     "tiny-warning": "^1.0.3"
@@ -156,5 +154,12 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "peerDependencies": {
+    "@emotion/core": ">=10.0.0",
+    "@emotion/styled": ">=10.0.0",
+    "emotion-theming": ">=10.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   }
 }