feat(Framework): update to ui5-webcomponents-rc.6 (#392)

For Features, please look at the [UI5 Web Components Changelog](https://github.com/SAP/ui5-webcomponents/blob/master/CHANGELOG.md#100-rc6-2020-03-27).
BREAKING CHANGE: Replace Avatar Component with `Avatar` UI5 Web Component
BREAKING CHANGE: Replace Carousel Component with `Carousel` UI5 Web Component
BREAKING CHANGE: Replace SegmentedButton Component with `SegmentedButton` UI5 Web Component
BREAKING CHANGE: Deleted SegmentedButtonItem, replaced by ToggleButton
BREAKING CHANGE: Remove MessageToast Component, replaced by `Toast` UI5 Web Component
BREAKING CHANGE: **ThemeProvider**: Remove prop `withToastContainer` 
BREAKING CHANGE: **AvatarSize**: Remove value `Custom`
BREAKING CHANGE: **ButtonDesign**: Rename`Accept` to `Positive`
BREAKING CHANGE: **ButtonDesign**: Rename`Reject` to `Negative`
BREAKING CHANGE: **InputType**: Rename `Url` to `URL`
BREAKING CHANGE: **CarouselArrowsPlacement**: Rename `PageIndicator` to `Navigation`
BREAKING CHANGE:**BusyIndicator** : change default size of busy dots to `Medium`
BREAKING CHANGE:**Icon** : `src` property is removed in favor of `name`
BREAKING CHANGE:**MessageStrip** : replace icon property with icon slot to allow setting arbitrary content by the user
BREAKING CHANGE:**MultiComboBox** : Does not longer accept `StandardListItem` as child, use `MultiComboBoxItem` instead
BREAKING CHANGE:**ShellBar** : profile property is removed in favour of profile slot
BREAKING CHANGE:**TabContainer** : `onItemSelect` event is renamed to `onTabSelect` and the item event parameter is renamed to tab.
BREAKING CHANGE:**Card** : the property `subtitle` has been renamed to `subheading`
BREAKING CHANGE:**TextArea** : the property `maxLength` has been renamed to `maxlength`
BREAKING CHANGE:**ThemeProvider** : new prop `theme` is required for correct theming in addition to importing `import '@ui5/webcomponents-react/lib/ThemingSupport'`
BREAKING CHANGE: configuring of compact size is removed, use the `ui5-content-density-compact` CSS class to apply compact size.

Closes #349

Author: MarcusNotheis

.eslintrc.js

@@ -68,7 +68,7 @@ module.exports = {
     camelcase: [
       'error',
       {
-        allow: ['sap_fiori_3', 'sap_fiori_3_dark']
+        allow: ['sap_fiori_3', 'sap_fiori_3_dark', 'sap_belize', 'sap_belize_hcb', 'sap_belize_hcw']
       }
     ],
     'comma-dangle': 'error',

.storybook/manager.js

@@ -32,5 +32,11 @@ addons.setConfig({
    * sidebar tree animations
    * @type {Boolean}
    */
-  sidebarAnimations: true
+  sidebarAnimations: true,
+
+  /**
+   * enable/disable shortcuts
+   * @type {Boolean}
+   */
+  enableShortcuts: false
 });

.storybook/preview.js

@@ -3,17 +3,17 @@ import { makeDecorator } from '@storybook/addons';
 import { addDecorator, addParameters } from '@storybook/react';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 import '@ui5/webcomponents-base/dist/features/browsersupport/IE11';
-import '@ui5/webcomponents-fiori/dist/json-imports/Themes';
+import '@ui5/webcomponents-fiori/dist/generated/json-imports/Themes';
 import '@ui5/webcomponents-react-base/polyfill/IE11';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
 import { Themes } from '@ui5/webcomponents-react/lib/Themes';
-import '@ui5/webcomponents/dist/json-imports/i18n';
-import '@ui5/webcomponents/dist/json-imports/Themes';
+import '@ui5/webcomponents-react/lib/ThemingSupport';
+import '@ui5/webcomponents-theme-base/dist/Assets';
+import '@ui5/webcomponents/dist/features/InputElementsFormSupport';
+import '@ui5/webcomponents/dist/generated/json-imports/i18n';
+import '@ui5/webcomponents/dist/generated/json-imports/Themes';
 import '@webcomponents/webcomponentsjs/webcomponents-bundle';
-import { window } from 'global';
-import 'highlight.js/styles/solarized-dark.css';
-import qs from 'qs';
 import React, { useEffect } from 'react';
 import 'react-app-polyfill/ie11';
 
@@ -30,14 +30,14 @@ addParameters({
 
 addDecorator(withKnobs);
 
-const ThemeContainer = ({ theme, contentDensity, children, setQueryParam, direction }) => {
+const ThemeContainer = ({ theme, contentDensity, children, direction }) => {
   useEffect(() => {
     if (contentDensity === ContentDensity.Compact) {
       document.body.classList.add('ui5-content-density-compact');
     } else {
       document.body.classList.remove('ui5-content-density-compact');
     }
-  }, [contentDensity, setQueryParam]);
+  }, [contentDensity]);
 
   useEffect(() => {
     document.querySelector('html').setAttribute('dir', direction.toLowerCase());
@@ -47,53 +47,23 @@ const ThemeContainer = ({ theme, contentDensity, children, setQueryParam, direct
     setTheme(theme);
   }, [theme]);
 
-  return children;
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
 
 const withQuery = makeDecorator({
-  name: 'withQuery',
-  parameterName: 'query',
+  name: 'themr',
+  parameterName: 'themr',
   wrapper: (getStory, context) => {
-    function setQueryParam(queryObj) {
-      const iframe = window.parent.document.getElementById('storybook-preview-iframe');
-      const [base, search] = iframe.src.split('?');
-      const currentQuery = qs.parse(search, { ignoreQueryPrefix: true });
-      iframe.src = `${base}?${qs.stringify({ ...currentQuery, ...queryObj })}`;
-    }
-
-    let contentDensity;
-    try {
-      const iframe = window.parent.document.getElementById('storybook-preview-iframe');
-      const currentQuery = qs.parse(iframe.src.split('?')[1]);
-      contentDensity =
-        currentQuery['sap-ui-compactSize'] && currentQuery['sap-ui-compactSize'] !== 'false'
-          ? ContentDensity.Compact
-          : ContentDensity.Cozy;
-    } catch (e) {
-      contentDensity = ContentDensity.Compact;
-    }
-
     return (
       <ThemeContainer
-        theme={select('Theme', [Themes.sap_fiori_3, Themes.sap_fiori_3_dark], Themes.sap_fiori_3)}
-        contentDensity={select('ContentDensity', ContentDensity, contentDensity)}
+        theme={select('Theme', Themes, Themes.sap_fiori_3)}
+        contentDensity={select('ContentDensity', ContentDensity, ContentDensity.Cozy)}
         direction={select('Text Direction', ['LTR', 'RTL'], 'LTR')}
-        setQueryParam={setQueryParam}
       >
         {getStory(context)}
       </ThemeContainer>
     );
   }
 });
 
-const themr = makeDecorator({
-  name: 'themr',
-  parameterName: 'themr',
-  skipIfNoParametersOrOptions: false,
-  wrapper: (getStory, context) => {
-    return <ThemeProvider withToastContainer>{getStory(context)}</ThemeProvider>;
-  }
-});
-
 addDecorator(withQuery);
-addDecorator(themr);

config/jestsetup.ts

@@ -5,7 +5,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import { createSerializer } from 'enzyme-to-json';
 import ResizeObserver from 'resize-observer-polyfill';
 import 'intersection-observer';
-import '@ui5/webcomponents/dist/json-imports/i18n';
+import '@ui5/webcomponents/dist/generated/json-imports/i18n';
 
 process.env.NODE_ENV = 'test';
 process.env.BABEL_ENV = 'test';

docs/welcome/Welcome.stories.mdx

@@ -59,6 +59,27 @@ Then, you can use the Button in your app:
 
 You could import all components also from `@ui5/webcomponents-react` directly, but this will have a negative impact on your bundle size.
 
+### Theming
+
+UI5 Web Components and UI5 Web Components for React are both coming with the `sap_fiori_3` a.k.a. `Quartz` Theme built in.
+In case you want to change your applications' theme, you have to import a couple of modules:
+```js
+import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
+import '@ui5/webcomponents-theme-base/dist/Assets';
+import '@ui5/webcomponents/dist/generated/json-imports/Themes';
+import '@ui5/webcomponents-fiori/dist/generated/json-imports/Themes'; // only if you are using the ShellBar or the Product Switch
+import '@ui5/webcomponents-react/lib/ThemingSupport';
+```
+
+In addition to call `setTheme` with a string parameter of the new theme, you must pass the new `theme` as a prop into the `ThemeProvider` component.
+Passing the prop is a temporary solution until the UI5 Web Components are providing [all Theming Parameters](https://github.com/SAP/ui5-webcomponents/issues/1396).<br />
+Available Themes:
+- `sap_fiori_3` (default)
+- `sap_fiori_dark`
+- `sap_belize`
+- `sap_belize_hcb`
+- `sap_belize_hcw`
+
 ### Configure Compact/Cozy setting
 UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true``` in the configuration ```script``` tag:
 

package.json

@@ -30,6 +30,9 @@
     "@babel/core": "^7.8.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.0",
     "@babel/plugin-proposal-optional-chaining": "^7.8.0",
+    "@rollup/plugin-json": "^4.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
+    "@rollup/plugin-replace": "^2.3.1",
     "@storybook/storybook-deployer": "^2.8.1",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.2",
@@ -54,13 +57,8 @@
     "eslint": "^6.8.0",
     "eslint-plugin-prefer-arrow": "^1.1.7",
     "eslint-plugin-react": "^7.18.3",
-    "esm": "^3.2.22",
-    "extract-comments": "^1.1.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": "^20200204.0.0",
     "gzip-size": "^5.1.0",
     "husky": "^4.2.1",
@@ -77,30 +75,20 @@
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
-    "puppeteer": "^2.1.1",
-    "qs": "^6.9.1",
     "react": "^16.8.6",
     "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.8.6",
     "rimraf": "^3.0.1",
-    "rollup": "^1.31.0",
+    "rollup": "^2.3.1",
     "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^2.0.6",
     "rollup-plugin-prettier": "^0.6.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-strip-banner": "^1.0.0",
+    "rollup-plugin-strip-banner": "^2.0.0",
     "shelljs": "^0.8.3",
     "sinon": "^8.1.1",
     "targz": "^1.0.1",
     "tmp": "^0.1.0",
-    "ts-node": "8.6.2",
     "tslint": "^6.0.0",
-    "typescript": "^3.8.3",
-    "util": "^0.12.0",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.11"
+    "typescript": "^3.8.3"
   },
   "resolutions": {
     "@types/react": "16.9.2"

packages/base/package.json

@@ -33,6 +33,9 @@
     "resize-observer-polyfill": "^1.5.1",
     "smoothscroll-polyfill": "^0.4.4"
   },
+  "devDependencies": {
+    "@sap-theming/theming-base-content": "11.1.18"
+  },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-jss": "^10.0.4"

packages/base/scripts/cssVariables/parse.js

@@ -1,7 +1,9 @@
 const { writeFileSync } = require('fs');
-const { root } = require('./themeDesignerVariables');
+const { root } = require('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/variables.json');
 const PATHS = require('../../../../config/paths');
 const path = require('path');
+const prettier = require('prettier');
+const prettierConfig = require('../../../../prettier.config');
 
 const variables = Object.keys(root);
 
@@ -21,4 +23,7 @@ for (const variable of variables) {
 }
 fileContent += '}\n';
 
-writeFileSync(path.join(PATHS.packages, 'base', 'src', 'styling', 'ThemingParameters.ts'), fileContent);
+writeFileSync(
+  path.join(PATHS.packages, 'base', 'src', 'styling', 'ThemingParameters.ts'),
+  prettier.format(fileContent, prettierConfig)
+);