create notification library

examples/adaptive-cards/library/.gitignore

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

examples/adaptive-cards/library/README.md

@@ -0,0 +1,32 @@
+<!--- 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.
+--->
+
+# ComposeUI Notification Library
+
+This is a library that allows users to create notifications using adaptive cards within the browser. Each adaptive card is rendered in a new browser window and is displayed for 6 seconds after which the newly created browser window is closed. There are three types of notifications that a user can create: 
+- info
+- error 
+- success
+
+Each of these types of notifications have a default format and styles that are associated with them. 
+
+Another feature of this library is the ability to render an html template that can be passed by the user which is rendered as the body of the notification. 
+
+### Library Inputs:
+- type: optional - accepted values: ['info','error','success'], default: 'info'
+- template: optional - acepted values: string containing html to be rendered
+- icon: optional - accepted values: uri for an icon to display in the toast notification
+- message: optional - accepted values: string. This can be used to display a placeholder message in the default notification when a template is not passed.
+
+### Development flow
+1. Run npm install in the ComposeUI root folder.
+` npm i `
+
+2. These are commands you would need to use in order to build this library, it's subsequest web application that would showcase an example of the library and run that application.
+``` 
+npx lerna run build --stream --scope=@morgan-stanley/adaptive-card-notification
+
+npx lerna run build --stream --scope=@morgan-stanley/composeui-example-adaptive-cards
+
+npx lerna run start --stream --scope=@morgan-stanley/composeui-example-adaptive-cards
+```

examples/adaptive-cards/library/package.json

@@ -0,0 +1,37 @@
+{
+  "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-dts": "^6.1.1",
+    "typescript": "^5.7.2"
+  }
+}

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

@@ -0,0 +1,35 @@
+// 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.
+// @ts-ignore
+import typescript from "@rollup/plugin-typescript";
+import json from "@rollup/plugin-json";
+import dts from "rollup-plugin-dts";
+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(),
+      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,53 @@
+// 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.
+import error from "./img/error.png";
+import info from "./img/info.png";
+import success from "./img/success.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;
+  }
+}
+
+export interface Window { adaptiveToast: any; }

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

@@ -0,0 +1,49 @@
+// 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.
+import * as AdaptiveCards from "adaptivecards";
+import sanitizeHtml from "sanitize-html";
+
+export class CustomTemplate extends AdaptiveCards.CardElement {
+  private parser = new DOMParser();
+  static readonly JsonTypeName = "AdaptiveHTML";
+
+  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();
+    }
+  }
+
+  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);
+  }
+}