@c8y/widget-plugin 1019.0.3

package/README.md

@@ -0,0 +1,33 @@
+# Cumulocity widget plugin
+
+This is the Cumulocity module federation plugin. Plugins can be developed like any Cumulocity application, but can be used at runtime by other applications. Therefore, they export an Angular module which can then be imported by any other application. The exports are defined in `package.json`:
+
+```
+"exports": [
+  {
+     "name": "Example widget plugin",
+     "module": "WidgetPluginModule",
+     "path": "./widget/widget-plugin.module.ts",
+     "description": "Adds custom widget"
+  }
+]
+```
+
+**How to start**
+Run the command below to scaffold a `widget` plugin.
+
+```
+c8ycli new <yourPluginName> widget-plugin
+```
+
+As the app.module is a typical Cumuloctiy application, any new plugin can be tested via the CLI:
+
+```
+npm start -- --shell cockpit
+```
+
+In the Module Federation terminology, `widget` plugin is called `remote` and the `cokpit` is called `shell`. Modules provided by this `widget` will be loaded by the `cockpit` application at the runtime. This plugin provides a basic custom widget that can be accessed through the `Add widget` menu.
+
+> Note that the `--shell` flag creates a proxy to the cockpit application and provides` WidgetPluginModule` as an `remote` via URL options.
+
+Also deploying needs no special handling and can be simply done via `npm run deploy`. As soon as the application has exports it will be uploaded as a plugin.

package/cumulocity.config.ts

@@ -0,0 +1,50 @@
+import { EnvironmentOptions } from '@c8y/devkit/dist/options';
+import { author, description, version } from './package.json';
+
+const options: EnvironmentOptions = {
+  runTime: {
+    author,
+    description,
+    version,
+    name: 'Widget plugin',
+    contextPath: 'widget-plugin',
+    key: 'widget-plugin-application-key',
+    contentSecurityPolicy:
+      "base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:;  script-src 'self' *.mapquestapi.com *.bugherd.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data: blob:; font-src * data:; frame-src *; worker-src 'self' blob:;",
+    dynamicOptionsUrl: '/apps/public/public-options/options.json',
+    remotes: {
+      'widget-plugin': ['WidgetPluginModule']
+    },
+    package: 'plugin',
+    isPackage: true,
+    noAppSwitcher: true,
+    exports: [
+      {
+        name: 'Example widget plugin',
+        module: 'WidgetPluginModule',
+        path: './src/app/widget/widget-plugin.module.ts',
+        description: 'Adds a custom widget to the shell application'
+      }
+    ]
+  },
+  buildTime: {
+    federation: [
+      '@angular/animations',
+      '@angular/cdk',
+      '@angular/common',
+      '@angular/compiler',
+      '@angular/core',
+      '@angular/forms',
+      '@angular/platform-browser',
+      '@angular/platform-browser-dynamic',
+      '@angular/router',
+      '@angular/upgrade',
+      '@c8y/client',
+      '@c8y/ngx-components',
+      'ngx-bootstrap',
+      '@ngx-translate/core'
+    ]
+  }
+};
+
+export default options;

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@c8y/widget-plugin",
+  "version": "1019.0.3",
+  "description": "",
+  "dependencies": {
+    "@c8y/style": "1019.0.3",
+    "@c8y/ng1-modules": "1019.0.3",
+    "@c8y/ngx-components": "1019.0.3",
+    "@c8y/client": "1019.0.3",
+    "@c8y/bootstrap": "1019.0.3",
+    "@c8y/devkit": "1019.0.3",
+    "@angular/cdk": "^16.2.11",
+    "@angular/upgrade": "^16.2.11",
+    "angular": "1.6.9",
+    "ngx-bootstrap": "11.0.2",
+    "rxjs": "^7.4.0"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=15 <17"
+  },
+  "author": "Cumulocity GmbH"
+}

package/src/app/app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule as ngRouterModule } from '@angular/router';
+import { BootstrapComponent, CoreModule, RouterModule } from '@c8y/ngx-components';
+import { CockpitDashboardModule } from '@c8y/ngx-components/context-dashboard';
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    ngRouterModule.forRoot([], { enableTracing: false, useHash: true }),
+    RouterModule.forRoot(),
+    CoreModule.forRoot(),
+    CockpitDashboardModule
+  ],
+  bootstrap: [BootstrapComponent]
+})
+export class AppModule {}

package/src/app/widget/index.ts

@@ -0,0 +1 @@
+export * from './widget-plugin.module';

package/src/app/widget/widget-plugin-config.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { DynamicComponent, OnBeforeSave, AlertService } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-widget-plugin-config',
+  template: `
+    <div class="form-group">
+      <c8y-form-group>
+        <label>Text</label>
+        <textarea
+          style="width:100%"
+          name="text"
+          [(ngModel)]="config.text"
+          [required]="true"
+        ></textarea>
+      </c8y-form-group>
+    </div>
+  `,
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+})
+export class WidgetPluginConfig implements DynamicComponent, OnBeforeSave {
+  @Input() config: any = {};
+
+  constructor(private alert: AlertService) {}
+
+  onBeforeSave(config: any): boolean {
+    if (config.text.trim() === '') {
+      this.alert.warning('Please enter a valid text.');
+      return false;
+    }
+    return true;
+  }
+}

package/src/app/widget/widget-plugin.component.css

@@ -0,0 +1,4 @@
+.text {
+  transform: scaleX(-1);
+  font-size: 3em;
+}

package/src/app/widget/widget-plugin.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'c8y-widget-plugin',
+  template: `
+    <div class="p-16">
+      <h1>Widget-plugin</h1>
+      <p class="text">{{ config?.text || 'No text' }}</p>
+      <small>My context is: {{ config?.device?.name || 'No context' }}</small>
+    </div>
+  `,
+  styleUrls: ['./widget-plugin.component.css']
+})
+export class WidgetPluginComponent {
+  @Input() config;
+}

package/src/app/widget/widget-plugin.module.ts

@@ -0,0 +1,23 @@
+// Assets need to be imported into the module, or they are not available
+import { assetPaths } from '../../assets/assets';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WidgetPluginComponent } from './widget-plugin.component';
+import { WidgetPluginConfig } from './widget-plugin-config.component';
+import { FormsModule, hookComponent, gettext } from '@c8y/ngx-components';
+
+@NgModule({
+  declarations: [WidgetPluginComponent, WidgetPluginConfig],
+  imports: [CommonModule, FormsModule],
+  providers: [
+    hookComponent({
+      id: 'angular.widget.plugin',
+      label: gettext('Module Federation widget'),
+      description: gettext('Widget added via Module Federation'),
+      component: WidgetPluginComponent,
+      previewImage: assetPaths.previewImage,
+      configComponent: WidgetPluginConfig
+    })
+  ]
+})
+export class WidgetPluginModule {}

package/src/assets/assets.ts

@@ -0,0 +1,16 @@
+/**
+ * This file is to include certain images or CSS files into the bundle. As for plugins,
+ * you need to bundle *all* assets due to a relative or absolute path might not work.
+ *
+ * Currently supported file extensions are: jpeg, jpg, gif, png, woff(2), eot, ttf, svg, css, sass and less
+ *
+ * If you need more types supported, add them to the d.ts file and add a webpack rule.
+ */
+import previewImage from './widget-plugin-pr.png';
+
+// this will be a global style -> try to avoid as it could break existing styles
+// better use component based styling (see ../widget/widget-plugin.component.css)
+import './example.css';
+
+// paths can be shared via this module if needed
+export const assetPaths = { previewImage };

package/src/assets/example.css

@@ -0,0 +1,3 @@
+.text {
+  color: var(--brand-primary);
+}

package/src/assets/index.d.ts

@@ -0,0 +1,9 @@
+declare module '*.jpg';
+declare module '*.jepg';
+declare module '*.png';
+declare module '*.gif';
+declare module '*.svg';
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';

package/src/bootstrap.ts

@@ -0,0 +1,18 @@
+import './polyfills';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+import './locales/de.po';
+
+declare const __MODE__: string;
+if (__MODE__ === 'production') {
+  enableProdMode();
+}
+
+export function bootstrap() {
+  return platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch(err => console.log(err));
+}

package/src/i18n.ts

@@ -0,0 +1,6 @@
+/**
+ * Internationalizing files in po format (https://en.wikipedia.org/wiki/Gettext#Translating)
+ * You can always add additional strings by adding your own po file. All po files are
+ * combined to one JSON file per language and are loaded if the specific language is needed.
+ */
+import './locales/de.po'; // <- adding additional strings to the german translation.

package/src/locales/de.po

@@ -0,0 +1,10 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: c8y.plugin\n"
+"Language: de\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgid "Module Federation widget"
+msgstr "Modul Federation Dingsbums"

package/src/main.ts

@@ -0,0 +1,19 @@
+import './i18n';
+import { applyOptions, loadOptions, loginOptions } from '@c8y/bootstrap';
+
+const barHolder: HTMLElement = document.querySelector('body > .init-load');
+export const removeProgress = () => barHolder && barHolder.parentNode.removeChild(barHolder);
+
+applicationSetup();
+
+async function applicationSetup() {
+  const options = await applyOptions({
+    ...(await loadOptions()),
+    ...((await loginOptions()) as object)
+  });
+
+  const mod = await import('./bootstrap');
+  const bootstrapApp = mod.bootstrap || (window as any).bootstrap || (() => null);
+
+  return Promise.resolve(bootstrapApp(options)).then(removeProgress);
+}

package/src/polyfills.ts

@@ -0,0 +1,33 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'message'];
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.

package/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "noImplicitOverride": false,
+    "skipLibCheck": true,
+    "strict": false
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "../ngx-components/**/*.ts"
+  ]
+}