build(widget): create basic widget structure

Examples/Widgets/Appointment/.eslintignore

@@ -0,0 +1,6 @@
+/node_modules
+/coverage
+/build
+/dist
+/publish
+publish.auth.js

Examples/Widgets/Appointment/.eslintrc.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",
+  }
+};

Examples/Widgets/Appointment/.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/dist
+yarn-error.log
+**/yarn-error.log
+yarn.lock
+.npmrc

Examples/Widgets/Appointment/README.md

@@ -0,0 +1,49 @@
+# 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 widget's 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. 
+
+**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 widget's behavior. 
+## Development
+
+### Getting started
+To run your widget on `localhost`, please navigate to widget's 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. 

Examples/Widgets/Appointment/babel.config.js

@@ -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" } }]]
+};

Examples/Widgets/Appointment/jest.config.js

@@ -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
+      }
+    }
+  }
+};

Examples/Widgets/Appointment/jest/cssTransform.js

@@ -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";
+  }
+};

Examples/Widgets/Appointment/jest/imgTransform.js

@@ -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";
+  }
+};