AC notification library

examples/adaptive-cards/library/.gitignore

@@ -0,0 +1,7 @@
+dist
+node_modules
+
+# Cache files  
+.eslintcache
+.npm
+*.tsbuildinfo

examples/adaptive-cards/library/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@morgan-stanley/adaptive-card-notification",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "This is a library that create notifications using adaptive cards.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prebuild": "rimraf --glob dist/*",
+    "build": "tsc --noEmit",
+    "postbuild": "rollup --config"
+  },
+  "keywords": [
+    "adaptive-card",
+    "notification"
+  ],
+  "author": "Morgan Stanley",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "adaptivecards": "2.10",
+    "markdown-it": "^14.1.0",
+    "sanitize-html": "^2.13.1"
+  },
+  "files": [
+    "/dist"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-url": "^8.0.2",
+    "@types/markdown-it": "^14.1.2",
+    "@types/sanitize-html": "^2.13.0",
+    "rollup": "^4.28.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "typescript": "^5.7.2"
+  }
+}

examples/adaptive-cards/library/rollup.config.js

@@ -0,0 +1,39 @@
+// @ts-ignore
+import typescript from "@rollup/plugin-typescript";
+import json from "@rollup/plugin-json";
+import dts from "rollup-plugin-dts";
+//import resolve from '@rollup/plugin-node-resolve';
+import copy from "rollup-plugin-copy";
+import url from "@rollup/plugin-url";
+import css from "rollup-plugin-import-css";
+
+const config = [
+  {
+    input: "src/index.ts",
+    output: {
+      file: "dist/index.js",
+      format: "umd",
+      name: "toastNotification",
+      sourcemap: "inline",
+    },
+    plugins: [
+      json(),
+      typescript(),
+      //copy({
+      //  targets: [{ src: "src/img/*", dest: "dist/img/" }],
+      //}),
+      url(),
+      css()
+    ],
+  },
+  {
+    input: "src/index.ts",
+    output: {
+      file: "dist/index.d.ts",
+      format: "umd",
+    },
+    plugins: [dts()],
+  },
+];
+
+export default config;

examples/adaptive-cards/library/src/constants.ts

@@ -0,0 +1,52 @@
+import error from './img/error.png';
+import info from './img/info.png';
+import success from './img/sucess.png';
+
+export const hostConfig = (bgColor:string) => {
+    return {
+        fontFamily: "Segoe UI, Helvetica Neue, sans-serif",
+        containerStyles: {
+            default: {
+                backgroundColor: `${bgColor}`,
+            },
+        },
+    };
+};
+
+export const images = [error,info,success];
+
+export enum Icons {
+    Info=info,
+    Err=error,
+    Success=success
+}
+
+export enum Types {
+    Info="Information",
+    Err="Error",
+    Success="Success"
+}
+
+export function checkType(type:string)  {
+    switch (type) {
+        case "error":
+            return Types.Err;
+        case "success":
+            return Types.Success;
+        default:
+            return Types.Info;
+    }
+}
+
+export function getIcon(type:Types) {
+    switch (type) {
+        case Types.Err:
+            return Icons.Err;
+        case Types.Success:
+            return Icons.Success;
+        case Types.Info:
+            return Icons.Info;
+    }
+}
+
+

examples/adaptive-cards/library/src/customElement.ts

@@ -0,0 +1,56 @@
+import * as AdaptiveCards from "adaptivecards";
+import sanitizeHtml from "sanitize-html";
+
+export class CustomTemplate extends AdaptiveCards.CardElement {
+  private parser = new DOMParser();
+  static readonly JsonTypeName = "AdaptiveHTML";
+
+  //#region Schema
+  static readonly templateStringProperty = new AdaptiveCards.StringProperty(
+    AdaptiveCards.Versions.v1_0,
+    "templateString"
+  );
+
+  @AdaptiveCards.property(CustomTemplate.idProperty)
+  get templateString(): string {
+    return this.getValue(CustomTemplate.templateStringProperty);
+  }
+
+  set templateString(value: string) {
+    let santitizedString = sanitizeHtml(value);
+
+    if (this.templateString !== santitizedString) {
+      this.setValue(CustomTemplate.templateStringProperty, santitizedString);
+
+      this.updateLayout();
+    }
+  }
+
+  //#endregion
+
+  private _templateElement?: HTMLElement;
+
+  protected internalRender(): HTMLElement {
+    let element = document.createElement("div");
+
+    this._templateElement = document.createElement("div");
+
+    this._templateElement.insertAdjacentHTML("afterbegin", this.templateString);
+
+    element.append(this._templateElement);
+
+    return element;
+  }
+
+  getJsonTypeName(): string {
+    return CustomTemplate.JsonTypeName;
+  }
+
+  updateLayout(processChildren: boolean = true) {
+    super.updateLayout(processChildren);
+
+    this._templateElement = document.createElement("div");
+
+    this._templateElement.insertAdjacentHTML("afterbegin", this.templateString);
+  }
+}

examples/adaptive-cards/library/src/defaultTemplates.ts

@@ -0,0 +1,106 @@
+import cancel from './img/cancel.png';
+
+export function defaultCard (context:any) {
+	const data = { ...context };
+	return {
+		"type": "AdaptiveCard",
+		"version": "1.6",
+		"body": [
+			{
+				"type": "ColumnSet",
+				"columns": [
+					{
+						"type": "Column",
+						"items": [
+							{
+								"type": "Image",
+								"style": "Person",
+								"url": `${data.icon}`,
+								"size": "Small"
+							}
+						],
+						"width": "auto"
+					},
+					{
+						"type": "Column",
+						"items": [
+							{
+								"type": "TextBlock",
+								"weight": "Bolder",
+								"text": `${data.title}`,
+								"wrap": true
+							},
+							{
+								"type": "TextBlock",
+								  "text": `${data.message}`,
+								  "wrap": true
+							}
+						],
+						"width": "stretch"
+					}
+				]
+			}
+		],
+		"actions": [
+			{
+				type: "Action.Submit",
+                iconUrl: cancel,
+                id: "closeButton",     
+			}
+		]
+	}
+} 
+
+export function defaultCardTemplate(context:any) {
+	const data = { ...context };
+
+return {
+    type: "AdaptiveCard",
+    version: "1.6",
+    body: [
+        {
+            "type": "ColumnSet",
+            "columns": [
+                {
+                    "type": "Column",
+					"items": [
+						{
+							"type": "Image",
+							"style": "Person",
+							"url": `${data.icon}`,
+							"size": "Small"
+						}
+					],
+					"width": "auto"
+                },
+                {
+					"type": "Column",
+					"items": [
+						{
+							"type": "TextBlock",
+							"weight": "Bolder",
+							"text": `${data.title}`,
+							"wrap": true
+						}
+					],
+					"width": "stretch"
+				}
+            ]
+        },
+		{
+			type: "AdaptiveHTML",
+        	templateString: `${data.template}`
+		}
+    ],
+    actions: [
+        {
+            type: "Action.OpenUrl",
+            title: "Cancel"      
+        },
+		{
+            type: "Action.OpenUrl",
+            title: "Ok"      
+        }
+    ]
+}
+}

examples/adaptive-cards/library/src/img/img.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+    const value: any;
+    export = value;
+  }

examples/adaptive-cards/library/src/index.ts

@@ -0,0 +1,4 @@
+// Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+
+export * from './notification';
+export * from './customElement';