chore: Update dependencies (#265)

* docs(Storybook): Update to version 5.3.2
* chore(charts): make web-components-react a peer dependency
* chore(main): update react-jss version
* chore: update snapshots to match new jss rules
* Update Chart.js related dependencies
* Update toastify, content-loader and core-js
* Simplify Storybook setup
* Update react-jss typings and optimize imports

Author: MarcusNotheis

netlify.toml

@@ -16,5 +16,5 @@
 # Deploy Preview context: all deploys generated from a pull/merge request will
 # inherit these settings.
 [context.deploy-preview]
-  environment = { SKIP_DOC_GENERATION = "true" }
+  environment = { }
 

package.json

@@ -15,60 +15,58 @@
     "prettier:all": "prettier --write --config ./prettier.config.js \"packages/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
-    "@storybook/addon-actions": "5.3.0-beta.31",
-    "@storybook/addon-docs": "5.3.0-beta.31",
-    "@storybook/addon-info": "5.3.0-beta.31",
-    "@storybook/addon-knobs": "5.3.0-beta.31",
-    "@storybook/addons": "5.3.0-beta.31",
-    "@storybook/cli": "5.3.0-beta.31",
-    "@storybook/react": "5.3.0-beta.31",
-    "@storybook/theming": "5.3.0-beta.31",
+    "@storybook/addon-actions": "5.3.2",
+    "@storybook/addon-docs": "5.3.2",
+    "@storybook/addon-info": "5.3.2",
+    "@storybook/addon-knobs": "5.3.2",
+    "@storybook/addons": "5.3.2",
+    "@storybook/cli": "5.3.2",
+    "@storybook/react": "5.3.2",
+    "@storybook/theming": "5.3.2",
     "react-docgen-typescript-loader": "3.6.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+    "@babel/core": "^7.8.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.8.0",
     "@storybook/storybook-deployer": "^2.8.1",
     "@types/enzyme": "^3.9.3",
     "@types/jest": "^24.0.24",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/sinon": "^7.5.1",
-    "@webcomponents/webcomponentsjs": "^2.4.0",
+    "@webcomponents/webcomponentsjs": "^2.4.1",
     "babel-code-frame": "^6.26.0",
     "babel-loader": "^8.0.5",
     "babel-preset-react-app": "^9.1.0",
     "chalk": "^3.0.0",
     "cli-table": "^0.3.1",
     "codecov": "^3.6.1",
-    "css-loader": "^3.2.0",
     "dedent": "^0.7.0",
     "document-register-element": "^1.14.3",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.3",
     "escape-string-regexp": "^2.0.0",
     "esm": "^3.2.22",
     "extract-comments": "^1.1.0",
-    "file-loader": "^4.3.0",
+    "file-loader": "^5.0.2",
     "file-url": "^3.0.0",
     "filesize": "^6.0.1",
     "glob": "^7.1.6",
     "global": "^4.4.0",
-    "google-closure-compiler": "^20191111.0.0",
+    "google-closure-compiler": "^20200112.0.0",
     "gzip-size": "^5.1.0",
-    "html-webpack-plugin": "^3.2.0",
-    "husky": "^3.1.0",
+    "husky": "^4.0.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "jest-canvas-mock": "^2.2.0",
     "jest-environment-jsdom-fifteen": "^1.0.2",
     "jest-enzyme": "^7.1.2",
     "jss-snapshot-serializer": "^1.0.0",
-    "lerna": "^3.19.0",
-    "lint-staged": "^9.4.3",
+    "lerna": "^3.20.2",
+    "lint-staged": "^9.5.0",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "ncp": "^2.0.0",
@@ -80,7 +78,7 @@
     "react-app-polyfill": "^1.0.5",
     "react-dom": "^16.8.6",
     "rimraf": "^3.0.0",
-    "rollup": "^1.27.4",
+    "rollup": "^1.29.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -89,19 +87,17 @@
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-strip-banner": "^1.0.0",
     "shelljs": "^0.8.3",
-    "sinon": "^7.5.0",
-    "style-loader": "^1.0.0",
+    "sinon": "^8.0.4",
     "targz": "^1.0.1",
     "tmp": "^0.1.0",
-    "ts-node": "8.5.2",
+    "ts-node": "8.6.2",
     "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
     "tslint-react": "^4.1.0",
-    "typescript": "^3.7.3",
+    "typescript": "^3.7.4",
     "util": "^0.12.0",
-    "webpack": "^4.41.3",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
   },
   "resolutions": {
     "@types/react": "16.9.2"

packages/base/package.json

@@ -23,7 +23,7 @@
     "postbuild": "npm-run-all -s build:rollup build:polyfills"
   },
   "dependencies": {
-    "core-js": "3.1.4",
+    "core-js": "3.6.4",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {

packages/base/src/Device/Media.test.ts

@@ -1,7 +1,7 @@
-import { Media, RANGESETS } from './Media';
-import { EventRegistry } from './EventRegistry';
 import * as sinon from 'sinon';
 import { setupMatchMedia } from '../../../../config/jestsetup';
+import { EventRegistry } from './EventRegistry';
+import { Media, RANGESETS } from './Media';
 
 const defaultSupportInstance = {
   matchmedialistener: false,

packages/base/src/Device/Media.ts

@@ -1,6 +1,6 @@
-import { changeRootCSSClass, getQuery, matchLegacyBySize, windowSize } from './utils';
-import { EventRegistry } from './EventRegistry';
 import { Logger } from '../utils/Logger';
+import { EventRegistry } from './EventRegistry';
+import { changeRootCSSClass, getQuery, matchLegacyBySize, windowSize } from './utils';
 
 export enum RANGESETS {
   SAP_3STEPS = '3Step',
@@ -30,6 +30,7 @@ const refreshCSSClasses = (sSetName, sRangeName, bRemove?) => {
 export class Media {
   private readonly media_timeout;
   public matches;
+
   constructor(supportInstance) {
     support = supportInstance;
     this.media_timeout = support.matchmedialistener ? 0 : 100;

packages/base/src/Device/Orientation.test.ts

@@ -1,6 +1,6 @@
-import { Orientation } from './Orientation';
 import * as sinon from 'sinon';
 import { EventRegistry } from './EventRegistry';
+import { Orientation } from './Orientation';
 
 describe('Device - Orientation', () => {
   test('Add and remove handler', () => {

packages/base/src/Device/Utils.test.ts

@@ -1,4 +1,3 @@
-import { Media } from './Media';
 import { convertToPx, matchLegacyBySize } from './utils';
 
 describe('Device - Utils', () => {

packages/base/src/Scroller/ScrollContextProvider.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
 import { ScrollContext } from '@ui5/webcomponents-react-base/lib/ScrollContext';
+import React, { useMemo } from 'react';
 
 export const ScrollContentProvider = (props) => {
   const {

packages/base/src/Scroller/ScrollLink.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useContext, useEffect } from 'react';
 import { ScrollContext } from '@ui5/webcomponents-react-base/lib/ScrollContext';
+import React, { useCallback, useContext, useEffect } from 'react';
 
 export const ScrollLink = (props) => {
   const {

packages/base/src/Scroller/Scroller.tsx

@@ -1,8 +1,8 @@
+import { IScroller } from '@ui5/webcomponents-react-base/interfaces/IScroller';
 import React, { forwardRef, RefObject, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 
 import { ScrollContentProvider } from './ScrollContextProvider';
 import { scrollTo } from './ScrollHelper';
-import { IScroller } from '@ui5/webcomponents-react-base/interfaces/IScroller';
 
 export interface Props {
   scrollContainer: RefObject<HTMLDivElement>;

packages/base/src/Scroller/useScrollElement.ts

@@ -1,5 +1,5 @@
-import { useContext, useEffect } from 'react';
 import { ScrollContext } from '@ui5/webcomponents-react-base/lib/ScrollContext';
+import { useContext, useEffect } from 'react';
 
 export const useScrollElement = (id, htmlRef, options = {}) => {
   const { registerElement, unregisterElement } = useContext(ScrollContext);

packages/base/src/hooks/useViewportRange.ts

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
 import { Device } from '@ui5/webcomponents-react-base/lib/Device';
+import { useCallback, useEffect, useState } from 'react';
 
 export const useViewportRange = (rangeSet) => {
   const [currentRange, setCurrentRange] = useState(Device.media.getCurrentRange(rangeSet, window.innerWidth).name);

packages/base/src/lib/ScrollContext.ts

@@ -1,2 +1,3 @@
 import { ScrollContext } from '../Scroller/ScrollContext';
+
 export { ScrollContext };

packages/base/src/lib/ScrollLink.ts

@@ -1,2 +1,3 @@
 import { ScrollLink } from '../Scroller/ScrollLink';
+
 export { ScrollLink };

packages/base/src/lib/Scroller.ts

@@ -1,2 +1,3 @@
 import { Scroller } from '../Scroller/Scroller';
+
 export { Scroller };

packages/base/src/lib/useScrollElement.ts

@@ -1,2 +1,3 @@
 import { useScrollElement } from '../Scroller/useScrollElement';
+
 export { useScrollElement };

packages/base/src/polyfill/IE11.ts

@@ -1,6 +1,6 @@
+import 'core-js/modules/es.array.flat';
 import 'core-js/modules/es.object.assign';
 import 'core-js/modules/es.object.values';
-import 'core-js/modules/es.array.flat';
 import ResizeObserver from 'resize-observer-polyfill';
 
 // @ts-ignore

packages/base/src/utils/Logger.test.ts

@@ -1,6 +1,6 @@
-import { LOG_LEVEL, Logger } from './Logger';
-import * as sinon from 'sinon';
 import { modifyObjectProperty } from '@shared/tests/utils';
+import * as sinon from 'sinon';
+import { LOG_LEVEL, Logger } from './Logger';
 
 describe('Logger', () => {
   test('fatal', () => {

packages/base/src/utils/Optional.test.ts

@@ -1,6 +1,6 @@
 import { getEventFromCallback } from '@shared/tests/utils';
-import { Optional } from './Optional';
 import sinon from 'sinon';
+import { Optional } from './Optional';
 
 describe('Optional', () => {
   test('get deep value', () => {

packages/base/third-party/modernizr.js

@@ -4,17 +4,20 @@
   function r(e, t) {
     return typeof e === t;
   }
+
   function o() {
     return 'function' != typeof t.createElement
       ? t.createElement(arguments[0])
       : b
       ? t.createElementNS.call(t, 'http://www.w3.org/2000/svg', arguments[0])
       : t.createElement.apply(t, arguments);
   }
+
   function i() {
     var e = t.body;
     return e || ((e = o(b ? 'svg' : 'body')), (e.fake = !0)), e;
   }
+
   function s(e, n, r, s) {
     var a,
       u,
@@ -43,16 +46,19 @@
       !!u
     );
   }
+
   function a(e, t) {
     return !!~('' + e).indexOf(t);
   }
+
   function u(e) {
     return e
       .replace(/([A-Z])/g, function(e, t) {
         return '-' + t.toLowerCase();
       })
       .replace(/^ms-/, '-ms-');
   }
+
   function l(t, n, r) {
     var o;
     if ('getComputedStyle' in e) {
@@ -66,6 +72,7 @@
     } else o = !n && t.currentStyle && t.currentStyle[r];
     return o;
   }
+
   function f(t, r) {
     var o = t.length;
     if ('CSS' in e && 'supports' in e.CSS) {
@@ -83,17 +90,20 @@
     }
     return n;
   }
+
   function c(e) {
     return e
       .replace(/([a-z])-([a-z])/g, function(e, t, n) {
         return t + n.toUpperCase();
       })
       .replace(/^-/, '');
   }
+
   function d(e, t, i, s) {
     function u() {
       d && (delete A.style, delete A.modElem);
     }
+
     if (((s = !r(s, 'undefined') && s), !r(i, 'undefined'))) {
       var l = f(e, i);
       if (!r(l, 'undefined')) return l;
@@ -110,23 +120,27 @@
       }
     return u(), !1;
   }
+
   function p(e, t) {
     return function() {
       return e.apply(t, arguments);
     };
   }
+
   function v(e, t, n) {
     var o;
     for (var i in e) if (e[i] in t) return !1 === n ? e[i] : ((o = t[e[i]]), r(o, 'function') ? p(o, n || t) : o);
     return !1;
   }
+
   function m(e, t, n, o, i) {
     var s = e.charAt(0).toUpperCase() + e.slice(1),
       a = (e + ' ' + P.join(s + ' ') + s).split(' ');
     return r(t, 'string') || r(t, 'undefined')
       ? d(a, t, o, i)
       : ((a = (e + ' ' + S.join(s + ' ') + s).split(' ')), v(a, t, n));
   }
+
   var h = [],
     y = {
       _version: '3.8.0',
@@ -173,6 +187,7 @@
           i)
         );
       }
+
       var t = !('onblur' in _);
       return e;
     })();

packages/charts/package.json

@@ -20,21 +20,21 @@
     "postbuild": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "@ui5/webcomponents-react": "^0.7.0-rc.7",
-    "@ui5/webcomponents-react-base": "0.7.0-rc.4",
-    "chart.js": "^2.8.0",
-    "chartjs-plugin-datalabels": "^0.6.0",
+    "chart.js": "^2.9.3",
+    "chartjs-plugin-datalabels": "^0.7.0",
     "get-best-contrast-color": "^0.3.1",
     "lodash.merge": "^4.6.2",
-    "react-chartjs-2": "^2.7.6",
-    "react-content-loader": "^4.3.2",
-    "react-jss": "10.0.0"
+    "react-chartjs-2": "^2.8.0",
+    "react-content-loader": "^4.3.4"
   },
   "devDependencies": {
-    "@types/chart.js": "^2.7.56"
+    "@types/chart.js": "^2.9.8"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "@ui5/webcomponents-react": "^0.7.0-rc.7",
+    "@ui5/webcomponents-react-base": "^0.7.0-rc.4",
+    "react": "^16.8.0",
+    "react-jss": "^10.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/charts/src/components/BarChart/BarChart.test.tsx

@@ -1,4 +1,4 @@
-import { mountThemedComponent, renderThemedComponent } from '@shared/tests/utils';
+import { mountThemedComponent } from '@shared/tests/utils';
 import * as React from 'react';
 import { datasets, labels, singleDataset } from '../../test/resources/ChartProps';
 import { BarChart } from './index';