Merge styles and utils into base

.gitignore

@@ -5,14 +5,11 @@ yarn-error.log
 .idea
 coverage
 /.env
-lib/
 dist/
 @types
 typings
 !/typings
 .cache
-!packages/utils/src/Device/lib
-!packages/fiori3/src/lib
 build
 /packages/*/npm/**/*.d.ts
 .out

README.md

@@ -35,21 +35,16 @@ You can play around with our components by visiting our [Storybook](https://sap.
 <!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/fiori3](https://img.shields.io/bundlephobia/min/@ui5-webcomponents-react/fiori3.svg?label=size) --> 
 <!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/fiori3](https://img.shields.io/bundlephobia/minzip/@ui5-webcomponents-react/fiori3.svg?label=gzip%20size) -->
 
-#### [@ui5-webcomponents-react/styles](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/styles) - Styles
-[![](https://img.shields.io/npm/v/@ui5-webcomponents-react/styles.svg)](https://www.npmjs.com/package/@ui5-webcomponents-react/styles)
-<!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/styles](https://img.shields.io/bundlephobia/min/@ui5-webcomponents-react/styles.svg?label=size)  -->
-<!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/styles](https://img.shields.io/bundlephobia/minzip/@ui5-webcomponents-react/styles.svg?label=gzip%20size) -->
-
-#### [@ui5-webcomponents-react/utils](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/utils) - Utils
-[![](https://img.shields.io/npm/v/@ui5-webcomponents-react/utils.svg)](https://www.npmjs.com/package/@ui5-webcomponents-react/utils)
-<!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/utils](https://img.shields.io/bundlephobia/min/@ui5-webcomponents-react/utils.svg?label=size) --> 
-<!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/utils](https://img.shields.io/bundlephobia/minzip/@ui5-webcomponents-react/utils.svg?label=gzip%20size) -->
-
 #### [@ui5-webcomponents-react/charts](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/charts) - Fiori Charts 
 [![](https://img.shields.io/npm/v/@ui5-webcomponents-react/charts.svg)](https://www.npmjs.com/package/@ui5-webcomponents-react/charts)
 <!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/charts](https://img.shields.io/bundlephobia/min/@ui5-webcomponents-react/charts.svg?label=size)  -->
 <!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/charts](https://img.shields.io/bundlephobia/minzip/@ui5-webcomponents-react/charts.svg?label=gzip%20size) -->
 
+#### [@ui5-webcomponents-react/base](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/base) - Utils
+[![](https://img.shields.io/npm/v/@ui5-webcomponents-react/base.svg)](https://www.npmjs.com/package/@ui5-webcomponents-react/base)
+<!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/base](https://img.shields.io/bundlephobia/min/@ui5-webcomponents-react/base.svg?label=size) --> 
+<!-- ![https://bundlephobia.com/result?p=@ui5-webcomponents-react/base](https://img.shields.io/bundlephobia/minzip/@ui5-webcomponents-react/base.svg?label=gzip%20size) -->
+
 
 <!-- *********************************************************************** -->
 <a name="requirements"></a>

package.json

@@ -27,14 +27,14 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^5.0.11",
-    "@storybook/addon-info": "^5.0.11",
-    "@storybook/addon-knobs": "^5.0.11",
-    "@storybook/addon-options": "^5.0.11",
-    "@storybook/addons": "^5.0.11",
-    "@storybook/react": "^5.0.11",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-info": "^5.1.9",
+    "@storybook/addon-knobs": "^5.1.9",
+    "@storybook/addon-options": "^5.1.9",
+    "@storybook/addons": "^5.1.9",
+    "@storybook/react": "^5.1.9",
     "@storybook/storybook-deployer": "^2.8.1",
-    "@storybook/theming": "^5.0.11",
+    "@storybook/theming": "^5.1.9",
     "@types/chai": "^4.1.7",
     "@types/enzyme": "^3.9.3",
     "@types/hoist-non-react-statics": "^3.3.1",
@@ -85,7 +85,6 @@
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
     "karma-mocha-snapshot": "^0.2.1",
-    "karma-selenium-grid-launcher": "^0.2.0",
     "karma-snapshot": "^0.6.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.5",

packages/utils/README.md → packages/base/README.md

@@ -1,11 +1,11 @@
-# @ui5-webcomponents-react/utils
-Helper Utils for ui5-webcomponents-react
+# @ui5-webcomponents-react/base
+Base Utilities for ui5-webcomponents-react
 
 ## Installation
 ```
-yarn add @ui5-webcomponents-react/utils
+yarn add @ui5-webcomponents-react/base
 OR
-npm install @ui5-webcomponents-react/utils --save
+npm install @ui5-webcomponents-react/base --save
 ```
 
 ## Modules
@@ -14,7 +14,7 @@ npm install @ui5-webcomponents-react/utils --save
 Concat multiple CSS Module into an instance of this class helper and place them into a react component.<br>
 Example:
 ```javascript
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { StyleClassHelper } from '@ui5-webcomponents-react/base';
 import style from 'YOUR_STYLESHEET';
 
 const classes = new StyleClassHelper.of(style.text);

packages/base/npm/index.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/base.production.min.js');
+} else {
+  module.exports = require('./cjs/base.development.js');
+}

packages/base/npm/index.esm.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./esm/base.production.min.js');
+} else {
+  module.exports = require('./esm/base.development.js');
+}

packages/styles/package.json → packages/base/package.json

@@ -1,20 +1,18 @@
 {
-  "name": "@ui5-webcomponents-react/styles",
+  "name": "@ui5-webcomponents-react/base",
   "version": "0.3.2-rc.2",
-  "description": "Stylesheets for ui5-webcomponents-react",
+  "description": "Base for ui5-webcomponents-react",
   "main": "index.cjs.js",
   "module": "index.esm.js",
   "types": "index.d.ts",
-  "repository": "https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/styles",
+  "repository": "https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "dependencies": {
-    "core-js": "^3.1.3",
+    "core-js": "^3.1.4",
+    "tslib": "^1.9.3",
     "deepmerge": "^3.2.0",
     "hoist-non-react-statics": "^3.3.0",
     "react-jss": "^8.6.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0"
   }
 }

packages/base/src/HSLColor.test.ts

@@ -0,0 +1,19 @@
+import { HSLColor } from './HSLColor';
+import { sapColorSemanticNegative, sapUiBrand, sapUiHighlight } from './sap_fiori_3';
+
+describe('HSL Color', () => {
+  test('lighten', () => {
+    const color = HSLColor.of(sapUiHighlight).lighten(63).hsl;
+    expect(color).toEqual('hsl(209.8, 90.9%, 95%)'); //hsl(208.4, 90.5%, 95.9%)
+  });
+
+  test('darken', () => {
+    const color = HSLColor.of(sapUiBrand).darken(10).hsl;
+    expect(color).toEqual('hsl(209.8, 90.9%, 32.9%)'); //hsl(210, 90.5%, 32.9%)
+  });
+
+  test('border bg colors', () => {
+    const color = HSLColor.of(sapColorSemanticNegative).lighten(59.5).hsl;
+    expect(color).toEqual('hsl(0, 100%, 95.5%)'); //hsl(0, 100%, 96.1%)
+  });
+});

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

@@ -39,9 +39,7 @@ class DeviceLogger {
       component: sComponent || ''
     };
     if (window.console) {
-      const logText = `${oLogEntry.date} ${oLogEntry.time} ${this.sWindowName}${oLogEntry.message} - ${
-        oLogEntry.component
-      }`;
+      const logText = `${oLogEntry.date} ${oLogEntry.time} ${this.sWindowName}${oLogEntry.message} - ${oLogEntry.component}`;
       switch (iLevel) {
         case LOG_LEVEL.FATAL:
         case LOG_LEVEL.ERROR:

packages/utils/src/Util.ts → packages/base/src/Util.ts

@@ -1,39 +1,3 @@
-import Themes from './Themes';
-
-type ThemeMap = { [theme in Themes]: object };
-
-export const getThemeClassFor = (theme: Themes, themes: ThemeMap) => {
-  if ({}.hasOwnProperty.call(themes, theme)) {
-    return themes[theme];
-  }
-  throw new Error('Could not match theme to Theme Class!');
-};
-
-/**
- * Create a Theme Map for given styles
- * @param light {object} Belize Theme CSS Module
- * @param dark {object} Belize Deep Theme CSS Module
- * @param hcb {object} High Contrast Black Theme CSS Module
- * @return {ThemeMap} Theme Map
- */
-export const createThemeMap = (light: object, dark: object, hcb: object = {}): ThemeMap => ({
-  [Themes.sap_belize]: light,
-  [Themes.sap_belize_plus]: dark,
-  [Themes.sap_belize_hcb]: hcb
-});
-
-/**
- * Get overwrite theme class
- * @param {string} theme
- * @param {string} overwrite
- * @return {string} Theme String
- *
- */
-export const getThemeOverwrite = (theme: Themes, overwrite: Themes): Themes => {
-  if ((Object as any).values(Themes).includes(overwrite)) return overwrite;
-  return theme;
-};
-
 export const deprecationNotice = (component: string, message: string) => {
   const value = `* ui5-webcomponents-react Deprecation Notice - ${component}`;
   const dots = '*'.padStart(value.length, '*');

packages/utils/src/index.ts → packages/base/src/index.ts

@@ -1,36 +1,39 @@
 /**
  * Created by d059190 at 16.03.18
  */
+import font72 from './72';
+import { bootstrap } from './bootstrap';
+import * as fonts from './fonts';
+import { HSLColor } from './HSLColor';
+import * as sap_fiori_3 from './sap_fiori_3';
+import * as spacing from './spacing';
+import { withStyles } from './withStyles';
+import { Device } from './Device';
 import { Event } from './Event';
+import { isNumeric } from './isNumeric';
 import KeyCodes from './KeyCodes';
 import { LOG_LEVEL, Logger } from './Logger';
 import Optional from './Optional';
 import StyleClassHelper from './StyleClassHelper';
-import Themes from './Themes';
-import { isNumeric } from './isNumeric';
-import { Device } from './Device';
 
-import {
-  createThemeMap,
-  deprecationNotice,
-  getThemeClassFor,
-  getThemeOverwrite,
-  pushElementBackInScreen
-} from './Util';
+import { deprecationNotice, pushElementBackInScreen } from './Util';
 
 export {
   StyleClassHelper,
   KeyCodes,
   Optional,
-  getThemeClassFor,
-  createThemeMap,
-  getThemeOverwrite,
   deprecationNotice,
   pushElementBackInScreen,
-  Themes,
   Event,
   Logger,
   LOG_LEVEL,
   isNumeric,
-  Device
+  Device,
+  fonts,
+  font72,
+  spacing,
+  HSLColor,
+  sap_fiori_3,
+  bootstrap,
+  withStyles
 };

packages/charts/package.json

@@ -13,8 +13,7 @@
     "@types/chart.js": "^2.7.53"
   },
   "dependencies": {
-    "@ui5-webcomponents-react/styles": "0.3.2-rc.2",
-    "@ui5-webcomponents-react/utils": "0.3.2-rc.2",
+    "@ui5-webcomponents-react/base": "0.3.2-rc.2",
     "chart.js": "^2.8.0",
     "chartjs-plugin-datalabels": "^0.6.0",
     "is-mergeable-object": "^1.1.0",

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

@@ -6,7 +6,7 @@ import { DEFAULT_OPTIONS } from '../../config';
 import { formatTooltipLabel, getTextWidth, mergeConfig } from '../../util/utils';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
-import { LOG_LEVEL, Logger } from '@ui5-webcomponents-react/utils';
+import { LOG_LEVEL, Logger } from '@ui5-webcomponents-react/base';
 import { withChartContainer } from '../ChartContainer/withChartContainer';
 import { BarChartPlaceholder } from './Placeholder';
 

packages/charts/src/components/ChartContainer/withChartContainer.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType } from 'react';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { DEFAULT_OPTIONS } from '../../config';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';

packages/charts/src/components/Loader/index.tsx

@@ -1,4 +1,4 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
 import * as React from 'react';
 import { LoaderStyles } from './Loader.jss';
 

packages/charts/src/components/MicroBarChart/index.tsx

@@ -1,4 +1,4 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
 import React, { CSSProperties, PureComponent } from 'react';
 import { ChartInternalProps } from '../../interfaces/ChartInternalProps';
 import { CommonProps } from '../../interfaces/CommonProps';

packages/charts/src/components/RadarChart/index.tsx

@@ -5,7 +5,7 @@ import { ChartInternalProps } from '../../interfaces/ChartInternalProps';
 import { formatTooltipLabel, mergeConfig } from '../../util/utils';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
-import { HSLColor } from '@ui5-webcomponents-react/styles';
+import { HSLColor } from '@ui5-webcomponents-react/base';
 import { withChartContainer } from '../ChartContainer/withChartContainer';
 
 export interface RadarChartPropTypes extends ChartBaseProps {}

packages/charts/src/components/RadialChart/index.tsx

@@ -1,5 +1,4 @@
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
 import { ChartOptions } from 'chart.js';
 import React, { CSSProperties, PureComponent, Ref } from 'react';
 import { ChartInternalProps } from '../../interfaces/ChartInternalProps';

packages/cli/src/create-f4r-component.js

@@ -39,7 +39,7 @@ const jsxSpinner = ora('Creating index.tsx').start();
 // create jsx
 const jsxContent = `
 import React, { Component, ComponentClass } from 'react';
-import { withStyles } from '@ui5-webcomponents-react/utils';
+import { withStyles } from '@ui5-webcomponents-react/base';
 import styles from './${componentName}.jss';
 import { ClassProps } from '../../types/ClassProps';
 

packages/docs/.storybook/webpack.config.js

@@ -59,8 +59,7 @@ SKIP_DOC_GENERATION=true
         '@shared': path.join(PATHS.root, 'shared'),
         '@ui5-webcomponents-react/fiori3': path.join(PATHS.root, 'packages', 'fiori3', 'src', 'index.ts'),
         '@ui5-webcomponents-react/charts': path.join(PATHS.root, 'packages', 'charts', 'src', 'index.ts'),
-        '@ui5-webcomponents-react/utils': path.join(PATHS.root, 'packages', 'utils', 'src', 'index.ts'),
-        '@ui5-webcomponents-react/styles': path.join(PATHS.root, 'packages', 'styles', 'src', 'index.ts')
+        '@ui5-webcomponents-react/base': path.join(PATHS.root, 'packages', 'base', 'src', 'index.ts')
       }
     }
   };

packages/fiori3/package.json

@@ -16,10 +16,8 @@
     "test:karma:update": "cross-env UPDATE=1 yarn run test:karma"
   },
   "dependencies": {
-    "@ui5-webcomponents-react/styles": "0.3.2-rc.2",
-    "@ui5-webcomponents-react/utils": "0.3.2-rc.2",
+    "@ui5-webcomponents-react/base": "0.3.2-rc.2",
     "@ui5/webcomponents": "0.12.0",
-    "core-js": "^2.6.4",
     "react-scroll": "^1.7.11",
     "react-toastify": "^5.0.1"
   },

packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js

@@ -214,7 +214,7 @@ export function generateTypings(meta) {
     .forEach(([key]) => {
       typings[mapEventName(key)] = {
         tsType: '(event : Event) => void',
-        importStatement: "import { Event } from '@ui5-webcomponents-react/utils';"
+        importStatement: "import { Event } from '@ui5-webcomponents-react/base';"
       };
     });
 

packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js

@@ -40,9 +40,7 @@ async function generateWebComponentWrapper(dto) {
     '\n\n',
     tsTypings.interfaceStatement,
     '\n\n',
-    `const ${componentName}: FC<${tsTypings.interfaceName}> = withWebComponent<${
-      tsTypings.interfaceName
-    }>(${ui5ComponentName});`,
+    `const ${componentName}: FC<${tsTypings.interfaceName}> = withWebComponent<${tsTypings.interfaceName}>(${ui5ComponentName});`,
     '\n\n',
     `${componentName}.displayName = '${componentName}';`,
     '\n\n',

packages/fiori3/scripts/wrapperGeneration/puppeteer.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-    <body>
-        <script src="dist/build.js"></script>
-    </body>
+<body>
+<script src="dist/build.js"></script>
+</body>
 </html>

packages/fiori3/scripts/wrapperGeneration/puppeteerScript.js

@@ -1,4 +1,5 @@
 import { generateTypings } from './generateTypingsWeb';
+
 const modules = require('./json/modules');
 
 modules.forEach((moduleName) => {

packages/fiori3/scripts/wrapperGeneration/showOptions.js

@@ -1,4 +1,5 @@
 import { generateDiff } from './diff';
+
 const inquirer = require('inquirer');
 const fs = require('fs');
 const chalk = require('chalk');