CiscoDevNet · helen-v · Mar 12, 2021 · Mar 12, 2021 · Mar 15, 2021 · Mar 17, 2021
@@ -0,0 +1,6 @@
+/node_modules
+/coverage
+/build
+/dist
+/publish
+publish.auth.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: [
+    "@typescript-eslint", 
+    "prettier"
+  ],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  rules: {
+    "prettier/prettier": "error",
+    // custom
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/camelcase": "off",
+  }
+};
@@ -0,0 +1,6 @@
+/node_modules
+/dist
+yarn-error.log
+**/yarn-error.log
+yarn.lock
+.npmrc
@@ -0,0 +1,55 @@
+# WCC Widget Starter: Lit Element
+
+[![Generic badge](https://img.shields.io/badge/Completion-95-green)](https://shields.io/)
+
+This widget starter can be run on `localhost` to be reviewed. In case you (the developer) are using this widget starter as a foundation of your custom widget, running the sandbox environment on `localhost` would be a perfect way to build your widgets logic and interface. It will also allow you to experiment with theme switching (light/dark) as well as test various container sizes that your widget might fit.
+widgets
+**Note**: please keep in mind that we recommend to design every widget as responsive. With the exception of widgets for Agent or Supervisor Desktop **header** zone (where widgets should not exceed 64px height), you can assume that your custom widget might end up getting placed on various canvas sizes. Based on the Agent's screen size and configuration by the Administrator, it could even end up with a different aspect ratio. Please keep that in mind while testing your responsive widgets behavior.
+
+## Development
+
+### Getting started
+
+To run your widget on `localhost`, please navigate to widgets root directory in Terminal (Command line tool) and run the following commands (Assuming you have [`yarn`](https://classic.yarnpkg.com/en/docs/install/#mac-stable) installed globally on your machine):
+
+1. Clone this repo.
+2. Navigate to th widget/widget starter folder.
+3. Run `yarn` from the root of the repo.
+4. Run `yarn start` to start the playground (sandbox) app.
+
+### Editing widget
+
+There is generally no need for you to modify anything outside of the `src/components` folder. To customize you widget, we suggest for you to work within this directory. You are free to create your components and structure them however you see fit.
+
+### Building/exporting widget
+
+Once you are ready to export your widget, all you need is to run the following command in Terminal (Command line tool):
+
+```
+yarn dist
+```
+
+This will create a `dist` folder in the root directory of your widget with a single `index.js` file that contains your entire widget. This file can be renamed and uploaded to a preferred location on a CDN (e.g. an S3 bucket on AWS. Please keep in mind tht this file has to be publicly available over the internet to be accessible to Agent or Supervisor Desktop).
+
+### Sharing widget information with Agent/Supervisor Desktop administrator
+
+To be able to place your custom widget within Agent/Supervisor Desktop, Contact Center administrator will need three pieces of information:
+
+1. The URL to the `***.js` file that you had previously generated and placed on a CDN.
+2. Information regarding any properties/attributes that are required to be set for the widget to function (e.g. for Maps widget in th Examples folder, one will require to pass Google Maps API key to an `api-key` attribute).
+
+   If you require dynamic data from Agent/Supervisor Desktop, you might want to either request it though [`wxcc-js-api`](https://apim-dev-portal.appstaging.ciscoccservice.com/documentation/guides/desktop#javascript-api) methods within your widget, or through properties - when the list of [Data Providers](https://apim-dev-portal.appstaging.ciscoccservice.com/documentation/guides/desktop#data-provider%E2%80%94widget-properties-and-attributes) contains the required information.
+
+3. A quick preview/screenshot or the aspect ratio that is optimal for this widget. This way, an administrator will be able to make the best decision while placing it on the Desktop layout.
+
+### Placing Widget in JSON layout
+
+**Reference**: [Desktop Layout Reference guide for Administrator](https://www.cisco.com/c/en/us/td/docs/voice_ip_comm/cust_contact/contact_center/CJP/SetupandAdministrationGuide_2/b_mp-release-2/b_cc-release-2_chapter_011.html#topic_8230815F4023699032326F948C3F1495).
+
+In case you are an administrator for Contact Center Agent Desktop or are working with an administrator, you might be trying to place this component in a JSON layout specification file to test in your Contact Center environment.
+
+This specific Widget Starter is designed to be places in a ["panel"](https://www.cisco.com/c/en/us/td/docs/voice_ip_comm/cust_contact/contact_center/CJP/SetupandAdministrationGuide_2/b_mp-release-2/b_cc-release-2_chapter_011.html#topic_BF0EBDF65DCB0A552164D6306657C892__AuxPane) area of JSON layout specification. This is due to this widget relying on a task-specific information with the reference derived from the current location/address bar value.
+
+**NOTE**: If you place this widget in another area in JSON layout specification ("header" or a custom page in "navigation"), some task-specific function might not work. This is to be expected.
+
+Please feel free to reach out to your partner or Cisco directly with any additional questions.
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+module.exports = {
+  presets: [["@babel/preset-env", { targets: { node: "current" } }]]
+};
@@ -0,0 +1,46 @@
+/* eslint-disable */
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+var ignorePattern = ["/node_modules/", "/build/", "/dist/", "/publish/", "/coverage/", "/src/[sandbox]/", "/src/assets/"];
+module.exports = {
+  collectCoverage: true,
+  coverageProvider: "v8",
+  transform: {
+    "^.+\\.ts$": "ts-jest",
+    "^.+\\.js$": "babel-jest",
+    "\\.(png|svg|jpg|jpeg)$": "<rootDir>/jest/imgTransform.js",
+    "\\.(scss)$": "<rootDir>/jest/cssTransform.js"
+  },
+  testRegex: "^.+\\.test\\.ts$",
+  testPathIgnorePatterns: ignorePattern,
+  coveragePathIgnorePatterns: ignorePattern,
+  transformIgnorePatterns: ["/node_modules/?!(@open-wc).+js$"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@css/(.*)$": "<rootDir>/src/assets/styles/$1",
+    "^@img/(.*)$": "<rootDir>/src/assets/images/$1",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+  },
+  globals: {
+    "ts-jest": {
+      diagnostics: false,
+      tsConfig: {
+        target: "ES2016",
+        module: "esnext",
+        moduleResolution: "node",
+        allowJs: true,
+        strict: true,
+        esModuleInterop: true,
+        experimentalDecorators: true,
+        resolveJsonModule: true
+      }
+    }
+  }
+};
@@ -0,0 +1,17 @@
+/* eslint-disable-next-line no-undef */
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+module.exports = {
+  process() {
+    return "module.exports = {};";
+  },
+  getCacheKey() {
+    return "cssTransform";
+  }
+};
@@ -0,0 +1,17 @@
+/* eslint-disable */
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+module.exports = {
+  process() {
+    return "module.exports = 'fake-file-url';";
+  },
+  getCacheKey() {
+    return "imgTransform";
+  }
+};
@@ -0,0 +1,104 @@
+{
+  "name": "notes-header-widget",
+  "version": "1.0.0",
+  "author": {
+    "name": "Elena Vaganova",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "repository": "[email protected]:CiscoDevNet/webex-contact-center-widget-starter.git",
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "npm run check && webpack-dev-server --config ./webpack.config.dev.server.ts",
+    "dev:build": "npm run check && webpack --config-name=dev",
+    "dist": "npm run check && webpack --config-name=distProd",
+    "dist:dev": "npm run check && webpack --config-name=distDev",
+    "dist:watch": "npm run check && webpack --config-name=distDevWatch",
+    "npm:auth": "uuip-publish-auth [agentx,uuip,momentum-ui-private,wxcc-desktop]",
+    "npm:publish": "npm run npm:auth && npm run dist && uuip-publish dist agentx",
+    "check": "check-peer-dependencies --yarn",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@wxcc-desktop/sdk": "^1.2.7",
+    "@wxcc-desktop/sdk-types": "^1.0.3"
+  },
+  "resolutions": {
+    "jest": "^26.4.2",
+    "jest-config": "^26.4.2"
+  },
+  "peerDependencies": {
+    "@momentum-ui/core": "19.9.2",
+    "@momentum-ui/icons": "^7.54.0",
+    "@momentum-ui/utils": "6.2.7",
+    "@momentum-ui/web-components": "^2.0.13",
+    "lit-element": "^2.3.1",
+    "lit-html": "^1.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@momentum-ui/core": "19.9.2",
+    "@momentum-ui/icons": "^7.54.0",
+    "@momentum-ui/utils": "6.2.7",
+    "@momentum-ui/web-components": "^2.0.13",
+    "@open-wc/testing-helpers": "1.8.9",
+    "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/html-webpack-plugin": "^3.2.2",
+    "@types/jest": "26.0.10",
+    "@types/marked": "^1.2.2",
+    "@types/node": "^13.7.7",
+    "@types/webpack": "^4.41.7",
+    "@types/webpack-dev-server": "^3.10.0",
+    "@types/webpack-merge": "^4.1.5",
+    "@types/webpack-node-externals": "^1.7.1",
+    "@typescript-eslint/eslint-plugin": "^2.22.0",
+    "@typescript-eslint/parser": "^2.22.0",
+    "alias-resolve-loader": "^2.0.4",
+    "babel-jest": "26.3.0",
+    "check-peer-dependencies": "2.0.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "extract-loader": "^4.0.3",
+    "file-loader": "^4.3.0",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "3.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "26.4.2",
+    "jest-config": "26.4.2",
+    "lit-element": "^2.3.1",
+    "lit-html": "^1.2.1",
+    "lit-scss-loader": "^1.0.0",
+    "markdown-loader": "^6.0.0",
+    "marked": "^1.2.9",
+    "mobx": "^6.0.1",
+    "nanoid": "^3.1.22",
+    "node-sass": "^4.13.1",
+    "prettier": "^1.19.1",
+    "remove-files-webpack-plugin": "^1.4.0",
+    "sass-loader": "^8.0.2",
+    "stylelint": "^12.0.1",
+    "stylelint-config-sass-guidelines": "^7.0.0",
+    "stylelint-prettier": "^1.1.2",
+    "ts-jest": "26.3.0",
+    "ts-loader": "^6.2.1",
+    "ts-node": "^8.6.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": ""
+    }
+  }
+}
@@ -0,0 +1,25 @@
+## Sandbox use disclaimer
+This sandbox is considered helpful for various purposes of your WXCC widget development. It does, however, have it's limitations. Below you will find a list of functions you are able or not able to test within this sandbox. 
+
+**Note**: All JS API methods that are being invoked in this starter display response data in the browser `Console log`. Please open Developer tools/Console to be able to see activity as you press sample buttons within this starter widget. 
+
+### You are bale to test within this sandbox:
+<details>
+    <summary>Widget appearance.</summary>
+    By running this sandbox locally, you are able to see the interface the way it would appear in WXCC Agent/Supervisor Desktop. You do not need to worry regarding any style (CSS) conflicts due to your widget being contained within a Shadow DOM. You are able to launch this sandbox in any browser to test cross-browser support.
+</details>
+<details>
+    <summary>Widget responsiveness.</summary>
+    Feel free to use the header panel tools to test how your widget can adjust to various space allocation. As a developer, you likely will not have control over where and how this widget will be placed on Agent/Supervisor Desktop, as well as you are not aware of the screen size of the device the Agent/Supervisor persona will be accessing your widget. This means, it has to be responsive. You won't be able to rely on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">CSS media queries</a> for this situation - since they rely on change of the window object and not an individual container. We recommend you to look into the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">Resize Observer API</a> instead. 
+</details>
+<details>
+    <summary>Dark mode.</summary>
+    If you rely on pre-defined Momentum UI CSS custom values for your color schema, and/or Momentum UI Web Components - you can easily achieve Light/Dark theme support with your Widget. You can refer to this <a href="https://github.com/momentum-design/momentum-ui/blob/master/web-components/src/wc_scss/themes/global--light.scss">file</a> for reference. 
+</details>
+
+### You won't be able to test within this sandbox:
+<details>
+    <summary>JS API functionality.</summary>
+    WXCC JS API usage examples are some of the most prominent parts of this widget starter.  However, you won't be able to test functionality of the JavaScript functions that are utilizing JS API methods in this sandbox. You would have to build and export this widget, upload the widget .js file to a hosting solution (e.g. AWS) and add it to your WXCC instance through JSON Layout configuration file. Only within WXCC environment, can JS API truly access data and subscribe to events. 
+    To read more on the steps to export widget, please refer to the README.ms file for this starter.
+</details>
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Webex Contact Center Widget Starter: Lit Element</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link href="/css/momentum-ui.min.css" type="text/css" rel="stylesheet" />
+    <link href="/css/momentum-ui-icons.min.css" type="text/css" rel="stylesheet" />
+    <script>
+      let AGENTX_SERVICE = {};
+    </script>
+  </head>
+
+  <body>
+    <wcc-widget-starter-lit></wcc-widget-starter-lit>
+  </body>
+</html>
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "./sandbox";
+import { configure } from "mobx";
+configure({ enforceActions: "always" });
+