Skip to content

Commit

Permalink
refactor(base): Merge styles and utils into base (#38)
Browse files Browse the repository at this point in the history
BREAKING CHANGE `@ui5-webcomponents-react/styles` and `@ui5-webcomponents-react/utils` are replaced by ``@ui5-webcomponents-react/base`
BREAKING CHANGE Deleted Themes `sap_belize`, `sap_belize_plus` and `sap_belize_hcb`
BREAKING CHANGE Removed `createThemeMap` from base
BREAKING CHANGE Removed `getThemeClassFor` from base
BREAKING CHANGE Removed `getThemeOverwrite` from base
BREAKING CHANGE Deleted `Themes` from base

Closes #34
  • Loading branch information
MarcusNotheis authored Jun 24, 2019
1 parent cf53d38 commit 9309505
Show file tree
Hide file tree
Showing 297 changed files with 1,451 additions and 2,834 deletions.
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 5 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 7 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions packages/utils/README.md → packages/base/README.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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);
Expand Down
File renamed without changes.
7 changes: 7 additions & 0 deletions packages/base/npm/index.cjs.js
Original file line number Diff line number Diff line change
@@ -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');
}
7 changes: 7 additions & 0 deletions packages/base/npm/index.esm.js
Original file line number Diff line number Diff line change
@@ -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');
}
12 changes: 5 additions & 7 deletions packages/styles/package.json → packages/base/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
19 changes: 19 additions & 0 deletions packages/base/src/HSLColor.test.ts
Original file line number Diff line number Diff line change
@@ -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%)
});
});
File renamed without changes.
File renamed without changes.
File renamed without changes.
4 changes: 1 addition & 3 deletions packages/utils/src/Logger.ts → packages/base/src/Logger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
File renamed without changes.
File renamed without changes.
36 changes: 0 additions & 36 deletions packages/utils/src/Util.ts → packages/base/src/Util.ts
Original file line number Diff line number Diff line change
@@ -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, '*');
Expand Down
File renamed without changes.
File renamed without changes.
33 changes: 18 additions & 15 deletions packages/utils/src/index.ts → packages/base/src/index.ts
Original file line number Diff line number Diff line change
@@ -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
};
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
3 changes: 1 addition & 2 deletions packages/charts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/components/BarChart/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/components/Loader/index.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/components/MicroBarChart/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/components/RadarChart/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}
Expand Down
3 changes: 1 addition & 2 deletions packages/charts/src/components/RadialChart/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/src/create-f4r-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 1 addition & 2 deletions packages/docs/.storybook/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
}
}
};
Expand Down
4 changes: 1 addition & 3 deletions packages/fiori3/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';"
};
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 3 additions & 3 deletions packages/fiori3/scripts/wrapperGeneration/puppeteer.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<script src="dist/build.js"></script>
</body>
<body>
<script src="dist/build.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { generateTypings } from './generateTypingsWeb';

const modules = require('./json/modules');

modules.forEach((moduleName) => {
Expand Down
1 change: 1 addition & 0 deletions packages/fiori3/scripts/wrapperGeneration/showOptions.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { generateDiff } from './diff';

const inquirer = require('inquirer');
const fs = require('fs');
const chalk = require('chalk');
Expand Down
Loading

0 comments on commit 9309505

Please sign in to comment.