Merge branch 'master' into chore/update-storybook

Author: kleinju1017

.storybook/main.js

@@ -1,5 +1,7 @@
+const { highlightLog } = require('../scripts/utils');
 const path = require('path');
 const PATHS = require('../config/paths');
+const dedent = require('dedent');
 require('dotenv').config({
   path: path.join(PATHS.root, '.env')
 });
@@ -13,12 +15,7 @@ const DEPENDENCY_REGEX = BUILD_FOR_IE11
 
 module.exports = {
   stories: ['../docs/**/*.stories.mdx', '../packages/**/*.stories.mdx', '../packages/**/*.stories.[tj]sx'],
-  addons: [
-    '@storybook/addon-toolbars',
-    '@storybook/addon-docs',
-    '@storybook/addon-controls',
-    '@storybook/addon-actions'
-  ],
+  addons: ['@storybook/addon-knobs', '@storybook/addon-docs', '@storybook/addon-actions'],
   webpack: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -30,6 +27,35 @@ module.exports = {
       type: 'javascript/auto'
     });
 
+    const tsLoader = {
+      test: /\.tsx?$/,
+      include: PATHS.packages,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            envName: 'esm',
+            configFile: path.resolve(PATHS.root, 'babel.config.js')
+          }
+        }
+      ]
+    };
+
+    if (IS_RELEASE_BUILD) {
+      highlightLog('Warning: Prop Types Table Generation is active');
+      tsLoader.use.push(require.resolve('react-docgen-typescript-loader'));
+    } else {
+      highlightLog('Info: Prop Types Table Generation is disabled');
+      console.log(dedent`
+          The Prop Table Generation is very expensive during build-time and therefore disabled by default. 
+          If you need Prop-Tables, you can activate it by adding a '.env' file to the root of the project with the following content:
+          
+          UI5_WEBCOMPONENTS_FOR_REACT_RELEASE_BUILD=true\n\n 
+      `);
+    }
+
+    config.module.rules.push(tsLoader);
+
     if ((IS_RELEASE_BUILD && configType === 'PRODUCTION') || BUILD_FOR_IE11) {
       config.module.rules.push({
         test: /\.(js|mjs)$/,
@@ -76,6 +102,8 @@ module.exports = {
         }
       });
     }
+
+    config.resolve.extensions.push('.ts', '.tsx');
     config.resolve.alias = {
       ...config.resolve.alias,
       '@shared': path.join(PATHS.root, 'shared'),

.storybook/preview.js

@@ -1,3 +1,4 @@
+import { select, withKnobs } from '@storybook/addon-knobs';
 import { makeDecorator } from '@storybook/addons';
 import { addDecorator, addParameters } from '@storybook/react';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
@@ -22,11 +23,11 @@ addParameters({
         : a[1].id.localeCompare(b[1].id, undefined, { numeric: true, caseFirst: 'upper' });
     },
     showRoots: true
-  },
-  passArgsFirst: true,
-  actions: { argTypesRegex: '^on.*' }
+  }
 });
 
+addDecorator(withKnobs);
+
 const ThemeContainer = ({ theme, contentDensity, children, direction }) => {
   useEffect(() => {
     if (contentDensity === ContentDensity.Compact) {
@@ -36,9 +37,9 @@ const ThemeContainer = ({ theme, contentDensity, children, direction }) => {
     }
   }, [contentDensity]);
 
-  useEffect(() => {
-    document.querySelector('html').setAttribute('dir', direction);
-  }, [direction]);
+  // useEffect(() => {
+  //   document.querySelector('html').setAttribute('dir', direction.toLowerCase());
+  // }, [direction]);
 
   useEffect(() => {
     setTheme(theme);
@@ -53,9 +54,9 @@ const withQuery = makeDecorator({
   wrapper: (getStory, context) => {
     return (
       <ThemeContainer
-        theme={context.globalArgs.theme || Themes.sap_fiori_3}
-        contentDensity={context.globalArgs.contentDensity}
-        direction={context.globalArgs.direction}
+        theme={select('Theme', Themes, Themes.sap_fiori_3)}
+        contentDensity={select('ContentDensity', ContentDensity, ContentDensity.Cozy)}
+        direction={select('Text Direction', ['LTR', 'RTL'], 'LTR')}
       >
         {getStory(context)}
       </ThemeContainer>
@@ -64,74 +65,3 @@ const withQuery = makeDecorator({
 });
 
 addDecorator(withQuery);
-
-export const globalArgTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Fiori Theme',
-    defaultValue: Themes.sap_fiori_3,
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        {
-          value: Themes.sap_fiori_3,
-          title: Themes.sap_fiori_3
-        },
-        {
-          value: Themes.sap_fiori_3_dark,
-          title: Themes.sap_fiori_3_dark
-        },
-        {
-          value: Themes.sap_belize,
-          title: Themes.sap_belize
-        },
-        {
-          value: Themes.sap_belize_hcb,
-          title: Themes.sap_belize_hcb
-        },
-        {
-          value: Themes.sap_belize_hcw,
-          title: Themes.sap_belize_hcw
-        }
-      ]
-    }
-  },
-  contentDensity: {
-    name: 'Content Density',
-    description: 'Content Density',
-    defaultValue: ContentDensity.Cozy,
-    toolbar: {
-      icon: 'component',
-      items: [
-        {
-          value: ContentDensity.Cozy,
-          title: ContentDensity.Cozy
-        },
-        {
-          value: ContentDensity.Compact,
-          title: ContentDensity.Compact
-        }
-      ]
-    }
-  },
-  direction: {
-    name: 'Direction',
-    description: 'Text Direction',
-    defaultValue: 'ltr',
-    toolbar: {
-      icon: 'transfer',
-      items: [
-        {
-          value: 'ltr',
-          title: 'LTR',
-          icon: 'arrowrightalt'
-        },
-        {
-          value: 'rtl',
-          title: 'RTL',
-          icon: 'arrowleftalt'
-        }
-      ]
-    }
-  }
-};

CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.10.0-rc.1](https://github.com/SAP/ui5-webcomponents-react/compare/v0.10.0-rc.0...v0.10.0-rc.1) (2020-05-25)
+
+
+### Bug Fixes
+
+* **AnalyticalTable:** remove padding and scrollbar from select-all header cell ([#536](https://github.com/SAP/ui5-webcomponents-react/issues/536)) ([97158a3](https://github.com/SAP/ui5-webcomponents-react/commit/97158a39663cf40c424829a86962df7070a0dacb)), closes [#532](https://github.com/SAP/ui5-webcomponents-react/issues/532)
+* **DurationPicker:** use correct value for defaultProp maxValue ([#529](https://github.com/SAP/ui5-webcomponents-react/issues/529)) ([888d069](https://github.com/SAP/ui5-webcomponents-react/commit/888d069a86784c4833f9257abc67e569be3dd231))
+
+
+### Features
+
+* **StyleClassHelper:** add putIfPresent method ([#539](https://github.com/SAP/ui5-webcomponents-react/issues/539)) ([0ae0785](https://github.com/SAP/ui5-webcomponents-react/commit/0ae078554dd0e7e6a1424de6755ec02fa15bb12e))
+
+
+
+
+
 # [0.10.0-rc.0](https://github.com/SAP/ui5-webcomponents-react/compare/v0.9.5...v0.10.0-rc.0) (2020-05-19)
 
 

config/jestsetup.ts

@@ -6,6 +6,7 @@ import { createSerializer } from 'enzyme-to-json';
 import ResizeObserver from 'resize-observer-polyfill';
 import 'intersection-observer';
 import '@ui5/webcomponents/dist/generated/json-imports/i18n';
+import 'whatwg-fetch';
 
 // React 16 Enzyme adapter
 Enzyme.configure({ adapter: new Adapter() });

lerna.json

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

package.json

@@ -101,7 +101,8 @@
     "targz": "^1.0.1",
     "tmp": "^0.1.0",
     "tslint": "^6.1.2",
-    "typescript": "^3.8.3"
+    "typescript": "^3.8.3",
+    "whatwg-fetch": "^3.0.0"
   },
   "resolutions": {
     "@types/react": "16.9.34",

packages/base/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.10.0-rc.1](https://github.com/SAP/ui5-webcomponents-react/compare/v0.10.0-rc.0...v0.10.0-rc.1) (2020-05-25)
+
+
+### Features
+
+* **StyleClassHelper:** add putIfPresent method ([#539](https://github.com/SAP/ui5-webcomponents-react/issues/539)) ([0ae0785](https://github.com/SAP/ui5-webcomponents-react/commit/0ae078554dd0e7e6a1424de6755ec02fa15bb12e))
+
+
+
+
+
 # [0.10.0-rc.0](https://github.com/SAP/ui5-webcomponents-react/compare/v0.9.5...v0.10.0-rc.0) (2020-05-19)
 
 

packages/base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-react-base",
-  "version": "0.10.0-rc.0",
+  "version": "0.10.0-rc.1",
   "description": "Base for ui5-webcomponents-react",
   "main": "index.cjs.js",
   "module": "index.esm.js",

packages/base/src/hooks/useI18nBundle.ts

@@ -1,20 +1,40 @@
 import { fetchI18nBundle, getI18nBundle } from '@ui5/webcomponents-base/dist/i18nBundle';
 import { useEffect, useState } from 'react';
 
+type TextWithDefault = { key: string; defaultText: string };
+type TextWithPlaceholders = [TextWithDefault, ...string[]];
+
 interface I18nBundle {
-  getText: (textObj: { key: string; defaultText: string }, ...args: any) => string;
+  getText: (textObj: TextWithDefault, ...args: any) => string;
 }
 
-export const useI18nBundle = (bundleName): I18nBundle => {
-  const [bundle, setBundle] = useState(getI18nBundle(bundleName));
+const resolveTranslations = (bundle, texts) => {
+  return texts.map((text) => {
+    if (Array.isArray(text)) {
+      const [key, ...replacements] = text;
+      return bundle.getText(key, replacements);
+    }
+    return bundle.getText(text);
+  });
+};
+
+export const useI18nText = (bundleName: string, ...texts: (TextWithDefault | TextWithPlaceholders)[]): string[] => {
+  const i18nBundle: I18nBundle = getI18nBundle(bundleName);
+  const [translations, setTranslations] = useState(resolveTranslations(i18nBundle, texts));
 
   useEffect(() => {
     const fetchAndLoadBundle = async () => {
       await fetchI18nBundle(bundleName);
-      setBundle(getI18nBundle(bundleName));
+      setTranslations((prev) => {
+        const next = resolveTranslations(i18nBundle, texts);
+        if (prev.length === next.length && prev.every((translation, index) => next[index] === translation)) {
+          return prev;
+        }
+        return next;
+      });
     };
     fetchAndLoadBundle();
-  }, []);
+  }, [fetchI18nBundle, bundleName, texts]);
 
-  return bundle;
+  return translations;
 };

packages/base/src/lib/hooks.ts

@@ -1,6 +1,6 @@
 import { useConsolidatedRef } from '../hooks/useConsolidatedRef';
-import { useI18nBundle } from '../hooks/useI18nBundle';
+import { useI18nText } from '../hooks/useI18nBundle';
 import { usePassThroughHtmlProps } from '../hooks/usePassThroughHtmlProps';
 import { useViewportRange } from '../hooks/useViewportRange';
 
-export { useConsolidatedRef, usePassThroughHtmlProps, useViewportRange, useI18nBundle };
+export { useConsolidatedRef, usePassThroughHtmlProps, useViewportRange, useI18nText };

packages/base/src/styling/CssSizeVariables.ts

@@ -14,6 +14,7 @@ export enum CssSizeVariablesNames {
   sapWcrAnalyticalTableTreePaddingLevel1 = 'sapWcrAnalyticalTableTreePaddingLevel1',
   sapWcrAnalyticalTableTreePaddingLevel2 = 'sapWcrAnalyticalTableTreePaddingLevel2',
   sapWcrAnalyticalTableTreePaddingLevel3 = 'sapWcrAnalyticalTableTreePaddingLevel3',
+  sapWcrCheckBoxWidthHeight = 'sapWcrCheckBoxWidthHeight',
   sapWcrAnalyticalTableSelectionColumnWidth = 'sapWcrAnalyticalTableSelectionColumnWidth'
 }
 
@@ -42,6 +43,7 @@ export const cssVariablesStyles = `
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel1}:1.5rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel2}:2.25rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel3}:2.75rem;
+  --${CssSizeVariablesNames.sapWcrCheckBoxWidthHeight}:2.75rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableSelectionColumnWidth}:55px;
 
 }
@@ -63,6 +65,7 @@ export const cssVariablesStyles = `
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel1}:1rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel2}:1.5rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableTreePaddingLevel3}:2rem;
+  --${CssSizeVariablesNames.sapWcrCheckBoxWidthHeight}:2rem;
   --${CssSizeVariablesNames.sapWcrAnalyticalTableSelectionColumnWidth}:40px;
 }
 `;

packages/base/src/styling/StyleClassHelper.test.ts

@@ -0,0 +1,31 @@
+import { StyleClassHelper } from './StyleClassHelper';
+
+describe('StyleClassHelper', () => {
+  test('add class names', () => {
+    const helper = StyleClassHelper.of('class1', 'class2');
+    expect(helper.className).toEqual(`class1 class2`);
+  });
+
+  test('put new classes', () => {
+    const helper = StyleClassHelper.of('firstClass');
+    helper.put('secondClass');
+    expect(helper.className).toEqual(`firstClass secondClass`);
+  });
+
+  test('putIfPresent', () => {
+    const helper = StyleClassHelper.of('firstClass');
+    helper.put('secondClass');
+    helper.putIfPresent('ifPresent1');
+    helper.putIfPresent('ifPresent2', 'ifPresent3');
+    helper.putIfPresent(true === false && 'shouldNotBeThere1', 'a' === 'a' && 'ifPresent4');
+
+    expect(helper.className).toEqual('firstClass secondClass ifPresent1 ifPresent2 ifPresent3 ifPresent4');
+  });
+
+  test('className, toString and valueOf return same value', () => {
+    const helper = StyleClassHelper.of('class1', 'class2');
+    expect(helper.toString()).toEqual(`class1 class2`);
+    expect(helper.valueOf()).toEqual(`class1 class2`);
+    expect(helper.className).toEqual(`class1 class2`);
+  });
+});