feat(ThemeProvider): Read config from UI5 Web Components

BREAKING CHANGE Themes: rename Theme `sap_fiori3_light` to `sap_fiori_3`
BREAKING CHANGE ThemeProvider: removed contentDensity and theme props. To set those, use the [ui5 WebComponents configuration script tag](https://github.com/SAP/ui5-webcomponents#configure).

Author: vbersch

README.md

@@ -76,14 +76,12 @@ npm install @fiori-for-react/fiori3 --save
 In order to use `fiori-for-react` you have to wrap your application's root component into the `ThemeProvider`.<br/>
 You will find this component most likely in `src/App.js`: 
 ```jsx
-import { ContentDensity } from '@fiori-for-react/fiori3/lib/ContentDensity';
 import { ThemeProvider } from '@fiori-for-react/fiori3/lib/ThemeProvider';
-import { Themes } from '@fiori-for-react/fiori3/lib/Themes';
 ...
 render() {
   return (
     <div>
-      <ThemeProvider theme={Themes.sap_fiori3_light} contentDensity={ContentDensity.Compact} withToastContainer>
+      <ThemeProvider withToastContainer>
         <MyApp />
       </ThemeProvider>
     </div>

config/jest.config.js

@@ -1,5 +1,6 @@
 const PATHS = require('./paths');
 const path = require('path');
+// const webComponentConfigMock = require('./webComponentConfigMock');
 
 module.exports = {
   preset: 'ts-jest',
@@ -29,6 +30,12 @@ module.exports = {
   moduleNameMapper: {
     '^@shared/(.*)$': '<rootDir>/shared/$1',
     '^@ui5/webcomponents/dist(.*)$': 'identity-obj-proxy', // ui5 web components can be mocked, not relevant for jest tests
+    '^@ui5/webcomponents-base/src/Configuration(.*)$': path.resolve(
+      PATHS.shared,
+      'tests',
+      'mock',
+      'webComponentConfigMock.js'
+    ),
     '\\.(css|less)$': 'identity-obj-proxy'
   },
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.3.1-rc.2",
+  "version": "0.3.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

package.json

@@ -66,6 +66,7 @@
     "filesize": "^4.1.2",
     "fs-extra": "^7.0.0",
     "glob": "^7.1.4",
+    "global": "^4.4.0",
     "google-closure-compiler": "^20190415.0.0",
     "gzip-size": "^5.1.0",
     "husky": "^2.2.0",
@@ -97,6 +98,7 @@
     "nyc": "^13.3.0",
     "ora": "^3.4.0",
     "puppeteer": "^1.15.0",
+    "qs": "^6.7.0",
     "react": "^16.8.6",
     "react-docgen-typescript-loader": "^3.1.0",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",

packages/charts/src/util/populateData.ts

@@ -4,7 +4,7 @@ import belizePlus from './../themes/sap_belize_plus';
 const getMapForTheme = (theme) => {
   switch (theme) {
     case 'sap_belize':
-    case 'sap_fiori3_light': // TODO This needs to change as soon there is a Fiori3 Color Map Available
+    case 'sap_fiori_3': // TODO This needs to change as soon there is a Fiori3 Color Map Available
       return belize;
     case 'sap_belize_plus':
       return belizePlus;

packages/docs/.storybook/TableComponent.tsx

@@ -1,15 +1,4 @@
-import {
-  ContentDensity,
-  Badge,
-  Label,
-  Table,
-  TableCell,
-  TableColumn,
-  TableRow,
-  Text,
-  ThemeProvider,
-  Themes
-} from '@fiori-for-react/fiori3';
+import { Badge, Label, Table, TableCell, TableColumn, TableRow, Text, ThemeProvider } from '@fiori-for-react/fiori3';
 import React from 'react';
 
 const columns = [
@@ -24,13 +13,13 @@ export const TableComponent = (props) => {
   const info = props.type.__docgenInfo;
   if (!info || !info.props) {
     return (
-      <ThemeProvider theme={Themes.sap_fiori3_light} contentDensity={ContentDensity.Compact}>
+      <ThemeProvider>
         <Text>Unfortunately, there are no prop types available for this component.</Text>
       </ThemeProvider>
     );
   }
   return (
-    <ThemeProvider theme={Themes.sap_fiori3_light} contentDensity={ContentDensity.Compact}>
+    <ThemeProvider>
       <Table
         columns={columns}
         rows={Object.values(info.props).map((componentInfo: any) => (

packages/docs/.storybook/config.js

@@ -7,6 +7,8 @@ import { withInfo } from '@storybook/addon-info';
 import { TableComponent } from './TableComponent';
 import { withStyleInfo } from './decorators/withStyleInfo';
 import { Fiori4ReactTheme } from './theme';
+import { document, history, window } from 'global';
+import qs from 'qs';
 
 export const propTablesExclude = [ThemeProvider];
 
@@ -94,23 +96,66 @@ addParameters({
   }
 });
 
-const themr = makeDecorator({
-  name: 'themr',
-  parameterName: 'themr',
-  skipIfNoParametersOrOptions: false,
-  wrapper: (getStory, context, { parameters }) => {
+class ThemeContainer extends React.PureComponent {
+  componentDidUpdate(prevProps) {
+    const { contentDensity, setQueryParam } = this.props;
+    if (contentDensity !== prevProps.contentDensity) {
+      setQueryParam({
+        'sap-ui-compactSize': contentDensity === ContentDensity.Compact
+      });
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+const withQuery = makeDecorator({
+  name: 'withQuery',
+  parameterName: 'query',
+  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.Cozy;
+    }
+
     return (
-      <ThemeProvider
-        theme={select('Theme', [Themes.sap_fiori3_light], Themes.sap_fiori3_light)}
-        contentDensity={select('ContentDensity', ContentDensity, ContentDensity.Compact)}
-        withToastContainer
+      <ThemeContainer
+        theme={select('Theme', [Themes.sap_fiori_3], Themes.sap_fiori_3)}
+        contentDensity={select('ContentDensity', ContentDensity, contentDensity)}
+        setQueryParam={setQueryParam}
       >
         {getStory(context)}
-      </ThemeProvider>
+      </ThemeContainer>
     );
   }
 });
 
+const themr = makeDecorator({
+  name: 'themr',
+  parameterName: 'themr',
+  skipIfNoParametersOrOptions: false,
+  wrapper: (getStory, context) => {
+    // debugger;
+    return <ThemeProvider withToastContainer>{getStory(context)}</ThemeProvider>;
+  }
+});
+
+addDecorator(withQuery);
 addDecorator(themr);
 
 // Load all Stories

packages/docs/.storybook/decorators/withStyleInfo.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { ContentDensity, Label, Text, ThemeProvider, Themes } from '@fiori-for-react/fiori3';
+import { Label, Text, ThemeProvider } from '@fiori-for-react/fiori3';
 
 const withStyleContainer = {
   fontFamily:
@@ -64,7 +64,7 @@ class WithStyleInfo extends Component<any> {
       <div>
         {children}
         <div style={withStyleContainer}>
-          <ThemeProvider theme={Themes.sap_fiori3_light} contentDensity={ContentDensity.Compact}>
+          <ThemeProvider>
             <h1 style={titleStyle}>Styling API</h1>
             <div style={{ display: 'flex', flexDirection: 'column', marginTop: '1rem' }}>
               {styleInfo.attributes.map((info) => (

packages/docs/Welcome.tsx

@@ -91,13 +91,11 @@ storiesOf(' Welcome | Fiori-for-React', module)
             </Text>
             <Highlight source="javascript">
               {dedent`...
-              import { ContentDensity } from '@fiori-for-react/fiori3/lib/ContentDensity';
               import { ThemeProvider } from '@fiori-for-react/fiori3/lib/ThemeProvider';
-              import { Themes } from '@fiori-for-react/fiori3/lib/Themes';
               ...
               render() {
                 return (
-                  <ThemeProvider theme={Themes.sap_fiori3_light} contentDensity={ContentDensity.Compact} withToastContainer>
+                  <ThemeProvider withToastContainer>
                     <MyApp />
                   </ThemeProvider>
                 );

packages/fiori3/__karma_snapshots__/ActionSheet.md

@@ -3,7 +3,7 @@
 #### `Render without Crashing`
 
 ```
-<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
+<ThemeProvider withToastContainer={false}>
   <ThemeProvider jss={{...}} theme={{...}}>
     <Jss(WithStyles(ActionSheet)) openBy={{...}} placement="Bottom">
       <WithStyles(ActionSheet) openBy={{...}} placement="Bottom" classes={{...}}>