Initial commit with basic web component scaffold and readme

4733e894 · Bekerle, Patrizio · Reiter, Christoph · 6609e59a · 4733e894 · 4733e894
Commit 4733e894 authored 5 years ago by Bekerle, Patrizio Committed by Reiter, Christoph 4 years ago
--- a/packages/notification/.gitignore
+++ b/packages/notification/.gitignore
+dist
+node_modules
+.idea
+npm-debug.log
\ No newline at end of file
--- a/packages/notification/.gitmodules
+++ b/packages/notification/.gitmodules
+[submodule "vendor/common"]
+	path = vendor/common
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
--- a/packages/notification/README.md
+++ b/packages/notification/README.md
+## VPU Notification Web Component
+
+[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/Notification)
+
+## Usage
+
+```html
+<vpu-notification></vpu-notification>
+```
+
+## Attributes
+
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+    - example `<vpu-notification lang="de" client-id="my-client-id"></vpu-notification>`
+
+## Events to dispatch
+
+### Sending notifications 
+
+`vpu-notification-send` sends a notification to the web component
+
+```javascript 
+event = new CustomEvent("vpu-notification-send", {
+    bubbles: true,
+    cancelable: true,
+    detail: {
+        "summary": "Item deleted",
+        "body": "Item foo was deleted!",
+        "timeout": 5,
+    },
+});
+``` 
+
+## Local development
+
+```bash
+# get the source
+git clone git@gitlab.tugraz.at:VPU/WebComponents/Notification.git
+cd Notification
+git submodule update --init
+
+# we are creating the symbolic links to our git sub-modules
+# (there was no proper script to do this automatically before a "node install"
+npm run setup
+
+# install dependencies
+npm install
+
+# constantly build dist/bundle.js and run a local web-server on port 8002 
+npm run watch-local
+```
+
+Jump to <http://localhost:8002> and you should get a demo page.
--- a/packages/notification/favicon.ico
+++ b/packages/notification/favicon.ico
--- a/packages/notification/i18n.js
+++ b/packages/notification/i18n.js
+import i18next from 'i18next';
+
+import de from './i18n/de/translation.json';
+import en from './i18n/en/translation.json';
+
+const i18n = i18next.createInstance();
+
+i18n.init({
+    lng: 'de',
+    fallbackLng: ['de'],
+    debug: false,
+    initImmediate: false, // Don't init async
+    resources: {
+        en: {translation: en},
+        de: {translation: de}
+    },
+});
+
+console.assert(i18n.isInitialized);
+
+function dateTimeFormat(date, options) {
+    return new Intl.DateTimeFormat(i18n.languages, options).format(date);
+}
+
+function numberFormat(number, options) {
+    return new Intl.NumberFormat(i18n.languages, options).format(number);
+}
+
+export {i18n, dateTimeFormat, numberFormat};
--- a/packages/notification/i18n/de/translation.json
+++ b/packages/notification/i18n/de/translation.json
+{
+}
--- a/packages/notification/i18n/en/translation.json
+++ b/packages/notification/i18n/en/translation.json
+{
+}
--- a/packages/notification/i18next-scanner.config.js
+++ b/packages/notification/i18next-scanner.config.js
+module.exports = {
+    input: [
+        '*.js',
+    ],
+    output: './',
+    options: {
+        debug: false,
+        removeUnusedKeys: true,
+        sort: true,
+        lngs: ['en','de'],
+    },
+}
--- a/packages/notification/index.html
+++ b/packages/notification/index.html
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="webcomponents-loader.js"></script>
+    <script type="module" id="vpu-notification-wc-src" src="bundle.js"></script>
+</head>
+
+<body>
+
+<vpu-notification-demo lang="de"></vpu-notification-demo>
+
+</body>
+</html>
--- a/packages/notification/index.js
+++ b/packages/notification/index.js
+import './vpu-notification';
+import './vpu-notification-demo';
--- a/packages/notification/package.json
+++ b/packages/notification/package.json
+{
+  "name": "vpu-notification",
+  "version": "1.0.0",
+  "devDependencies": {
+    "node-sass": "^4.12.0",
+    "rollup": "^1.11.3",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-copy": "^2.0.1",
+    "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-terser": "^4.0.4",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "i18next-scanner": "^2.10.2"
+  },
+  "dependencies": {
+    "@webcomponents/webcomponentsjs": "^2.2.10",
+    "i18next": "^17.0.3",
+    "lit-element": "^2.1.0",
+    "vpu-common": "*"
+  },
+  "scripts": {
+    "setup": "mkdir -p node_modules && cd node_modules && ln -sfn ../vendor/common vpu-common",
+    "clean": "rm dist/*",
+    "build": "npm run build-local",
+    "build-local": "rollup -c",
+    "build-dev": "rollup -c --environment BUILD:development",
+    "build-prod": "rollup -c --environment BUILD:production",
+    "build-demo": "rollup -c --environment BUILD:demo",
+    "i18next": "i18next-scanner",
+    "watch": "npm run watch-local",
+    "watch-local": "rollup -c --watch",
+    "watch-dev": "rollup -c --watch --environment BUILD:development"
+  }
+}
--- a/packages/notification/rollup.config.js
+++ b/packages/notification/rollup.config.js
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
+import json from 'rollup-plugin-json';
+import replace from "rollup-plugin-replace";
+import serve from 'rollup-plugin-serve';
+
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+
+export default {
+    input: 'index.js',
+    output: {
+        file: 'dist/bundle.js',
+        format: 'esm'
+    },
+    plugins: [
+        resolve(),
+        commonjs(),
+        json(),
+        replace({
+            "process.env.BUILD": '"' + build + '"',
+        }),
+        postcss({
+            inject: false,
+            minimize: false,
+            plugins: []
+        }),
+        (build !== 'local') ? terser() : false,
+        copy({
+            targets: [
+                'index.html',
+                'favicon.ico',
+                'node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js',
+                'node_modules/@webcomponents/webcomponentsjs/bundles',
+            ],
+            outputFolder: 'dist'
+        }),
+        (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
+    ]
+};
--- a/packages/notification/vpu-notification-demo.js
+++ b/packages/notification/vpu-notification-demo.js
+import {i18n} from './i18n.js';
+import {html, LitElement} from 'lit-element';
+
+class NotificationDemo extends LitElement {
+    constructor() {
+        super();
+        this.lang = 'de';
+    }
+
+    static get properties() {
+        return {
+            lang: { type: String },
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        i18n.changeLanguage(this.lang);
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    render() {
+        return html`
+            <style>
+            </style>
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+
+            <section class="section">
+                <div class="container">
+                    <h1 class="title">Notification-Demo</h1>
+                </div>
+                <div class="container">
+                    <vpu-notification lang="${this.lang}"></vpu-notification>
+                </div>
+            </section>
+        `;
+    }
+}
+
+customElements.define('vpu-notification-demo', NotificationDemo);
--- a/packages/notification/vpu-notification.js
+++ b/packages/notification/vpu-notification.js
+import {i18n} from './i18n.js';
+import {html, LitElement} from 'lit-element';
+
+/**
+ * Keycloak auth web component
+ * https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter
+ *
+ * Dispatches an event `vpu-notification-init` and sets some global variables:
+ *   window.VPUNotificationSubject: Keycloak username
+ *   window.VPUNotificationToken: Keycloak token to send with your requests
+ *   window.VPUUserFullName: Full name of the user
+ *   window.VPUPersonId: Person identifier of the user
+ *   window.VPUPerson: Person json object of the user (optional, enable by setting the `load-person` attribute,
+ *                     which will dispatch a `vpu-notification-person-init` event when loaded)
+ */
+class VPUNotification extends LitElement {
+    constructor() {
+        super();
+        this.lang = 'de';
+    }
+
+    /**
+     * See: https://lit-element.polymer-project.org/guide/properties#initialize
+     */
+    static get properties() {
+        return {
+            lang: { type: String },
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        i18n.changeLanguage(this.lang);
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    render() {
+        return html`
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+            <style>
+            </style>
+
+            <div class="columns">
+                <div class="column">
+                    TODO
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('vpu-notification', VPUNotification);