Skip to content

Commit

Permalink
refactor: create theme-base and fiori packages, and move ShellBar (#887)
Browse files Browse the repository at this point in the history
  • Loading branch information
vladitasev authored Nov 15, 2019
1 parent 5aeb99b commit 17c25ff
Show file tree
Hide file tree
Showing 138 changed files with 8,164 additions and 2,442 deletions.
19 changes: 19 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,15 @@ To consume UI5 Web Components, first you need to install the NPM module:
npm install @ui5/webcomponents
```

...and optionally:

```sh
npm install @ui5/webcomponents-fiori
```

for some more specific Fiori UX components such as `ui5-shellbar`.


Import the desired component(s) in your app to define the UI5 Web Component.

For example, to use ```ui5-button``` you need to import it:
Expand All @@ -48,12 +57,20 @@ For example, to use ```ui5-button``` you need to import it:
import "@ui5/webcomponents/dist/Button.js"; // loads ui5-button
```

...similarly to use ```ui5-shellbar```:

```js
import "@ui5/webcomponents-fiori/dist/ShellBar.js"; // loads ui5-shellbar
```

Then, you can use the custom element in an HTML page:

```html
<ui5-button>Hello world!</ui5-button>
```

*Note*: For a full list of the UI5 Web Components (and the respective NPM modules that ship them), click [here](https://github.com/SAP/ui5-webcomponents/blob/master/docs/Public%20Module%20Imports.md)

## Browser support

Currently only Chrome, Safari and Firefox support Web Components natively.
Expand Down Expand Up @@ -163,7 +180,9 @@ Keep in mind that linking the same module with npm and Yarn may cause issues. Al

### Where are the npm packages?
- [UI5 Web Components](https://www.npmjs.com/package/@ui5/webcomponents)
- [UI5 Web Components Fiori](https://www.npmjs.com/package/@ui5/webcomponents-fiori)
- [UI5 Web Components Base](https://www.npmjs.com/package/@ui5/webcomponents-base)
- [UI5 Web Components Theme Base](https://www.npmjs.com/package/@ui5/webcomponents-theme-base)
- [UI5 Web Components Core](https://www.npmjs.com/package/@ui5/webcomponents-core)

## Limitations
Expand Down
12 changes: 10 additions & 2 deletions docs/Public Module Imports.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ Here's a comprehensive list of all UI5 Web Components, their tags, and their res

For API documentation and samples, please check the [UI5 Web Components Playground](https://sap.github.io/ui5-webcomponents/playground/)

### Main package (```@ui5/webcomponents```)

| Web Component | Tag name | Module import |
| ------------------------ | -------------------- | ---------------------------------------------------------- |
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
Expand All @@ -30,8 +32,6 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
| Radio Button | `ui5-radiobutton` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
| Select Option | `ui5-option` | comes with ui5-select |
| Shell Bar (Fiori 3) | `ui5-shellbar` | `import "@ui5/webcomponents/dist/ShellBar.js";` |
| Shell Bar Item | `ui5-shellbar-item` | `import "@ui5/webcomponents/dist/ShellBarItem.js";` |
| Switch | `ui5-switch` | `import "@ui5/webcomponents/dist/Switch.js";` |
| Tab Container | `ui5-tabcontainer` | `import "@ui5/webcomponents/dist/TabContainer.js";` |
| Tab | `ui5-tab` | `import "@ui5/webcomponents/dist/Tab.js";` |
Expand All @@ -46,6 +46,12 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |
| Toggle Button | `ui5-togglebutton` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |

### Fiori package (```@ui5/webcomponents-fiori```)

| Web Component | Tag name | Module import |
| ------------------------ | -------------------- | ---------------------------------------------------------- |
| Shell Bar | `ui5-shellbar` | `import "@ui5/webcomponents-fiori/dist/ShellBar.js";` |
| Shell Bar Item | `ui5-shellbar-item` | `import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";` |

## Additional public modules

Expand Down Expand Up @@ -112,6 +118,7 @@ As shown in the example above, it's recommended to load the webcomponents polyfi

```js
import "@ui5/webcomponents/dist/json-imports/Themes.js";
import "@ui5/webcomponents-fiori/dist/json-imports/Themes.js"; // Only if using the @ui5/webcomponents-fiori package
```
(for additional themes support)

Expand Down Expand Up @@ -155,6 +162,7 @@ setTheme("sap_belize_hcb");

```js
import "@ui5/webcomponents/dist/json-imports/i18n.js";
import "@ui5/webcomponents-fiori/dist/json-imports/i18n.js"; // Only if using the @ui5/webcomponents-fiori package
```

Some UI5 Web Components contain texts (such as placeholders, tooltips, messages) that need translation.
Expand Down
24 changes: 17 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,29 @@
"ui5"
],
"scripts": {
"build": "npm-run-all --sequential build:core build:base build:main",
"build": "npm-run-all --sequential build:core build:base build:theme-base build:main build:fiori",
"build:core": "cd packages/core && yarn build",
"build:base": "cd packages/base && yarn build",
"build:theme-base": "cd packages/theme-base && yarn build",
"build:main": "cd packages/main && yarn build",
"build:playground": "yarn build:main && cd packages/playground && yarn build",
"build:playground:master": "yarn build:main && cd packages/playground && yarn build:master",
"clean": "npm-run-all --sequential clean:core clean:base clean:main",
"build:fiori": "cd packages/fiori && yarn build",
"build:playground": "yarn build:main && yarn build:fiori && cd packages/playground && yarn build",
"build:playground:master": "yarn build:main && yarn build:fiori && cd packages/playground && yarn build:master",
"clean": "npm-run-all --sequential clean:core clean:base clean:theme-base clean:main clean:fiori",
"clean:core": "cd packages/core && yarn clean",
"clean:base": "cd packages/base && yarn clean",
"clean:theme-base": "cd packages/theme-base && yarn clean",
"clean:main": "cd packages/main && yarn clean",
"start": "npm-run-all --parallel start:base start:main",
"clean:fiori": "cd packages/fiori && yarn clean",
"start": "npm-run-all --parallel start:base start:theme-base start:main start:fiori",
"start:base": "cd packages/base && yarn start",
"start:theme-base": "cd packages/theme-base && yarn start",
"start:main": "cd packages/main && yarn start",
"start:playground": "cross-env DEPLOY_PUBLIC_PATH=/assets/js/ui5-webcomponents/ yarn build:main && cd packages/playground && yarn start",
"test": "cd packages/main && yarn test",
"start:fiori": "cd packages/fiori && yarn start",
"start:playground": "cross-env DEPLOY_PUBLIC_PATH=/assets/js/ui5-webcomponents/ yarn build:main && yarn build:fiori && cd packages/playground && yarn start",
"test:main": "cd packages/main && yarn test",
"test:fiori": "cd packages/fiori && yarn test",
"test": "npm-run-all --sequential test:main test:fiori",
"lint": "wsrun --exclude-missing lint",
"link-all": "wsrun link",
"unlink-all": "wsrun unlink"
Expand All @@ -40,9 +48,11 @@
"js-yaml": "^3.13.1"
},
"workspaces": [
"packages/theme-base",
"packages/core",
"packages/base",
"packages/main",
"packages/fiori",
"packages/playground"
]
}
13 changes: 7 additions & 6 deletions packages/base/src/Theming.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { addCustomCSS, getCustomCSS } from "./theming/CustomStyle.js";
import { getThemeProperties } from "./asset-registries/Themes.js";
import { getThemeProperties, getRegisteredPackages } from "./asset-registries/Themes.js";
import { injectThemeProperties } from "./theming/StyleInjection.js";

const defaultTheme = "sap_fiori_3";
const themeChangeCallbacks = [];

const attachThemeChange = function attachThemeChange(callback) {
Expand All @@ -14,10 +13,12 @@ const attachThemeChange = function attachThemeChange(callback) {
const _applyTheme = async theme => {
let cssText = "";

if (theme !== defaultTheme) {
cssText = await getThemeProperties("@ui5/webcomponents", theme);
}
injectThemeProperties(cssText);
const registeredPackages = getRegisteredPackages();
registeredPackages.forEach(async packageName => {
cssText = await getThemeProperties(packageName, theme);
injectThemeProperties(cssText, packageName);
});

_executeThemeChangeCallbacks(theme);
};

Expand Down
12 changes: 11 additions & 1 deletion packages/base/src/asset-registries/Themes.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { fetchJsonOnce } from "../util/FetchHelper.js";

const themeURLs = new Map();
const themeStyles = new Map();
const registeredPackages = new Set();

const registerThemeProperties = (packageName, themeName, style) => {
if (style._) {
Expand All @@ -14,6 +15,7 @@ const registerThemeProperties = (packageName, themeName, style) => {
// url for fetching
themeURLs.set(`${packageName}_${themeName}`, style);
}
registeredPackages.add(packageName);
};

const getThemeProperties = async (packageName, themeName) => {
Expand All @@ -36,4 +38,12 @@ const fetchThemeProperties = async (packageName, themeName) => {
return fetchJsonOnce(url);
};

export { registerThemeProperties, getThemeProperties };
const getRegisteredPackages = () => {
return registeredPackages;
};

export {
registerThemeProperties,
getThemeProperties,
getRegisteredPackages,
};
14 changes: 11 additions & 3 deletions packages/base/src/theming/StyleInjection.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,22 @@ const schedulePonyfill = () => {
/**
* Creates/updates a style element holding all CSS Custom Properties
* @param cssText
* @param packageName
*/
const injectThemeProperties = cssText => {
const injectThemeProperties = (cssText, packageName) => {
packageName = packageName.replace(/[@/]/g, "-");
const identifier = `data-ui5-theme-properties-${packageName}`;

// Needed for all browsers
const styleElement = document.head.querySelector(`style[data-ui5-theme-properties]`);
const styleElement = document.head.querySelector(`style[${identifier}]`);
if (styleElement) {
styleElement.textContent = cssText || ""; // in case of undefined
} else {
createStyleInHead(cssText, { "data-ui5-theme-properties": "" });
const attributes = {
"data-ui5-theme-properties": "",
[identifier]: "",
};
createStyleInHead(cssText, attributes);
}

// When changing the theme, run the ponyfill immediately
Expand Down
11 changes: 11 additions & 0 deletions packages/fiori/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Note: Changes to this file also must be applied to the top level .eslintignore file.
target
dist
lib
test
bundle.esm.js
bundle.es5.js
rollup.config*.js
wdio.conf.js
postcss.config.js
package-scripts.js
132 changes: 132 additions & 0 deletions packages/fiori/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
module.exports = {
"env": {
"browser": true,
"es6": true
},
"root": true,
"extends": "airbnb-base",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"comma-dangle": [2, "always-multiline"], // difference from openui5
"no-cond-assign": 2,
"no-console": 2,
"no-constant-condition": 2,
"no-control-regex": 2,
"no-debugger": 2,
"no-dupe-args": 2,
"no-dupe-keys": 2,
"no-duplicate-case": 2,
"no-empty-character-class": 2,
"no-empty": 2,
"no-ex-assign": 2,
"no-extra-boolean-cast": 1,
"no-extra-parens": [2, "functions"],
"no-extra-semi": 2,
"no-func-assign": 2,
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-negated-in-lhs": 2,
"no-obj-calls": 2,
"no-regex-spaces": 2,
"no-sparse-arrays": 2,
"no-trailing-spaces": 2,
"no-unreachable": 2,
"use-isnan": 2,
// "valid-jsdoc": [1, { removed for UI5 WebComponents
// "requireReturn": false
// }],
"valid-typeof": 2,

"accessor-pairs": 2,
"block-scoped-var": 1,
// "consistent-return": 1, // removed for UI5 WebComponents
"curly": [2, "all"],
// "default-case": 1, // removed for UI5 WebComponents
"import/extensions": ["error", "always"], // override for UI5 WebComponents
"no-alert": 2,
"no-caller": 2,
"no-div-regex": 2,
"no-eval": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-implied-eval": 2,
"no-iterator": 2,
"no-labels": 2,
"no-lone-blocks": 2,
"no-loop-func": 2,
"no-native-reassign": 2,
"no-new-func": 2,
"no-new-wrappers": 1,
"no-new": 1,
"no-octal-escape": 2,
"no-octal": 2,
"no-proto": 2,
"no-redeclare": 1,
"no-return-assign": 2,
"no-script-url": 2,
"no-self-compare": 2,
"no-sequences": 2,
"no-unused-expressions": [1, { allowShortCircuit: true }],
"no-void": 2,
"no-warning-comments": 1,
"no-with": 2,
"radix": [2, "as-needed"],
"wrap-iife": [2, "any"],
"yoda": 2,

"strict": [2, "function"],

"no-catch-shadow": 2,
"no-delete-var": 2,
"no-label-var": 2,
"no-shadow-restricted-names": 2,
"no-undef-init": 2,
"no-undef": 2,
"no-unused-vars": [2, {"vars":"all", "args":"none"}],
"no-use-before-define": [1, "nofunc"],

"brace-style": [2, "1tbs", { "allowSingleLine": true }],
"camelcase": [1, { "properties": "never" }], // added for UI5 WebComponents
"consistent-this": [1, "that"],
"linebreak-style": 2,
"max-nested-callbacks": [1, 3],
"new-cap": 1,
"new-parens": 2,
"no-array-constructor": 2,
"no-lonely-if": 1,
"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
"no-nested-ternary": 2,
"no-new-object": 2,
"no-spaced-func": 2,
"quote-props": [2, "as-needed", { "keywords": true, "unnecessary": false }],
"semi-spacing": [1, {"before": false, "after": true}],
"semi": 2,
"keyword-spacing": 2,
"space-infix-ops": 2,
"space-unary-ops": [2, { "words": true, "nonwords": false }],
// airbnb overrides
"indent": [2, "tab"],
"no-underscore-dangle": 0,
"no-tabs": 0,
"quotes": [2, "double", { "allowTemplateLiterals": true }],
"no-useless-constructor": 0,
"no-param-reassign": 0,
"one-var": 0,
"max-len": 0,
"arrow-parens": [2, "as-needed"],
"class-methods-use-this": 0,
"no-plusplus": 0,
"default-case": 0,
"consistent-return": 0,
"prefer-destructuring": 0,
"arrow-body-style": 0,
"import/no-unresolved": 0,
"no-use-before-define": 0
}
};
18 changes: 18 additions & 0 deletions packages/fiori/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
*.css
dist/api.json
dist/resources
dist/test-resources
lib/
node_modules/
src/
test/
bundle.*.js
.eslintrc.js
.eslintignore
jest*.js
main.*js
rollup*
serve.json
ui5.yaml
wdio.conf.js
!core
2 changes: 2 additions & 0 deletions packages/fiori/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Enforce public npm registry
registry = https://registry.npmjs.org/
Loading

0 comments on commit 17c25ff

Please sign in to comment.