feat: typed events (#1981)

* feat: typed events

adds typings to events
Changes the package use to generate the custom-elements.json file used to build React components
and tell Storybook about the web-components definitions
mgt- prefix from story component names to correct the connection to the data in custom-elements.json
set code pane content on agenda
disable ArgsTable on docs pages by default
show ArgsTable on base agenda stories

BREAKING CHANGE: moves agenda eventClick event from a property of e.detail to be the value of e.detail
BREAKING CHANGE: all events for mgt-task now emit a CustomEvent<ITask>

Author: gavinbarron

.storybook/preview.js

@@ -8,11 +8,30 @@
 /* global window */
 
 import { addParameters, setCustomElements } from '@storybook/web-components';
-
 import '../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js';
 import customElements from '../custom-elements.json';
+import { versionInfo } from './versionInfo';
+import { noArgsDocsPage } from './story-elements/noArgsDocsPage.js';
+
+const setCustomElementsManifestWithOptions = (customElements, options) => {
+  let { privateFields = true } = options;
+  if (!privateFields) {
+    customElements?.modules?.forEach(module => {
+      module?.declarations?.forEach(declaration => {
+        Object.keys(declaration).forEach(key => {
+          if (Array.isArray(declaration[key])) {
+            declaration[key] = declaration[key].filter(
+              member => !member.privacy?.includes('private') && !member.privacy?.includes('protected')
+            );
+          }
+        });
+      });
+    });
+  }
+  return setCustomElements(customElements);
+};
 
-setCustomElements(customElements);
+setCustomElementsManifestWithOptions(customElements, { privateFields: false });
 
 addParameters({
   previewTabs: {
@@ -22,8 +41,10 @@ addParameters({
   },
   docs: {
     iframeHeight: '400px',
-    inlineStories: false
-  }
+    inlineStories: false,
+    page: noArgsDocsPage
+  },
+  version: versionInfo
 });
 
 const req = require.context('../stories', true, /\.(js|mdx)$/);

.storybook/story-elements/defaultDocsPage.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Title, Subtitle, Description, Primary, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs';
+
+export const defaultDocsPage = () => (
+  <>
+    <Title />
+    <Subtitle />
+    <Description />
+    <Primary />
+    <ArgsTable story={PRIMARY_STORY} />
+    <Stories />
+  </>
+);

.storybook/story-elements/noArgsDocsPage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Title, Subtitle, Description, Primary, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs';
+
+export const noArgsDocsPage = () => (
+  <>
+    <Title />
+    <Subtitle />
+    <Description />
+    <Primary />
+    <Stories />
+  </>
+);

stories/versionInfo.js renamed to .storybook/versionInfo.js

@@ -21,6 +21,7 @@
     ]
   },
   "scripts": {
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"./packages/*/src/**/*.ts\"",
     "build": "npm run prettier:check && npm run clean && lerna run build --scope @microsoft/*",
     "build:compile": "npm run prettier:check && npm run clean && lerna run build:compile --scope @microsoft/*",
     "build:mgt": "cd ./packages/mgt && npm run build",
@@ -51,7 +52,7 @@
     "prettier:check": "npm run prettier:base -- --check \"packages/**/*.{ts,tsx}\"",
     "prettier:write": "npm run prettier:base -- --write \"packages/**/*.{ts,tsx}\"",
     "storybook": "start-storybook -p 6006 -s assets",
-    "storybook:dev": "npm run build:compile && wca analyze packages --format json --outFile custom-elements.json",
+    "storybook:dev": "npm run build:compile && npm run analyze",
     "storybook:watch": "npm-run-all --parallel watch storybook:bundle:watch storybook",
     "storybook:bundle": "rollup -c ./.storybook/rollup.config.js",
     "storybook:bundle:watch": "rollup -c ./.storybook/rollup.config.js --watch",
@@ -74,6 +75,7 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
+    "@custom-elements-manifest/analyzer": "^0.6.6",
     "@octokit/rest": "^18.5.3",
     "@open-wc/testing-helpers": "^2.1.4",
     "@storybook/addon-a11y": "^6.4.4",

package.json

@@ -30,7 +30,7 @@ import { MgtPeople } from '../mgt-people/mgt-people';
  * @class MgtAgenda
  * @extends {MgtTemplatedComponent}
  *
- * @fires eventClick - Fired when user click an event
+ * @fires {CustomEvent<MicrosoftGraph.Event>} eventClick - Fired when user click an event
  *
  * @cssprop --event-box-shadow - {String} Event box shadow color and size
  * @cssprop --event-margin - {String} Event margin
@@ -538,7 +538,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
   }
 
   private eventClicked(event: MicrosoftGraph.Event) {
-    this.fireCustomEvent('eventClick', { event });
+    this.fireCustomEvent('eventClick', event);
   }
 
   private getEventTimeString(event: MicrosoftGraph.Event) {

packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts

@@ -51,14 +51,14 @@ registerFluentComponents(fluentProgressRing, fluentDesignSystemProvider);
 
 /**
  * The File List component displays a list of multiple folders and files by
- * using the file/folder name, an icon, and other properties specicified by the developer.
+ * using the file/folder name, an icon, and other properties specified by the developer.
  * This component uses the mgt-file component.
  *
  * @export
  * @class MgtFileList
  * @extends {MgtTemplatedComponent}
  *
- * @fires itemClick - Fired when user click a file. Returns the file (DriveItem) details.
+ * @fires {CustomEvent<MicrosoftGraph.DriveItem>} itemClick - Fired when user click a file. Returns the file (DriveItem) details.
  * @cssprop --file-upload-border- {String} File upload border top style
  * @cssprop --file-upload-background-color - {Color} File upload background color with opacity style
  * @cssprop --file-upload-button-float - {string} Upload button float position
@@ -712,7 +712,7 @@ export class MgtFileList extends MgtTemplatedComponent {
    */
   private onFileListKeyDown(event: KeyboardEvent): void {
     const fileList = this.renderRoot.querySelector('.file-list');
-    let focusedItem;
+    let focusedItem: Element;
 
     if (!fileList || !fileList.children.length) {
       return;
@@ -736,7 +736,7 @@ export class MgtFileList extends MgtTemplatedComponent {
     if (event.code === 'Enter' || event.code === 'Space') {
       focusedItem = fileList.children[this._focusedItemIndex];
 
-      const file = focusedItem.children[0] as any;
+      const file = focusedItem.children[0] as MgtFile;
       event.preventDefault();
       this.fireCustomEvent('itemClick', file.fileDetails);
 

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -65,10 +65,20 @@ const getResponseInvalidationTime = (currentInvalidationPeriod: number): number
 const getIsResponseCacheEnabled = (): boolean =>
   CacheService.config.response.isEnabled && CacheService.config.isEnabled;
 
+/**
+ * Holder type emitted with the dataChange event
+ */
+export type DataChangedDetail = {
+  // tslint:disable: completed-docs
+  response?: any;
+  error?: any;
+  // tslint:enable: completed-docs
+};
+
 /**
  * Custom element for making Microsoft Graph get queries
  *
- * @fires dataChange - Fired when data changes
+ * @fires {CustomEvent<DataChangedDetail>} dataChange - Fired when data changes
  *
  * @export
  * @class mgt-get

packages/mgt-components/src/components/mgt-get/mgt-get.ts

@@ -55,11 +55,11 @@ type PersonViewConfig = {
  * @class MgtLogin
  * @extends {MgtBaseComponent}
  *
- * @fires loginInitiated - Fired when login is initiated by the user
- * @fires loginCompleted - Fired when login completes
- * @fires loginFailed - Fired when login fails
- * @fires logoutInitiated - Fired when logout is initiated by the user
- * @fires logoutCompleted - Fired when logout completed
+ * @fires {CustomEvent<undefined>} loginInitiated - Fired when login is initiated by the user
+ * @fires {CustomEvent<undefined>} loginCompleted - Fired when login completes
+ * @fires {CustomEvent<undefined>} loginFailed - Fired when login fails
+ * @fires {CustomEvent<undefined>} logoutInitiated - Fired when logout is initiated by the user
+ * @fires {CustomEvent<undefined>} logoutCompleted - Fired when logout completed
  *
  * @template signed-in-button-content (dataContext: {personDetails, personImage})
  * @template signed-out-button-content (dataContext: null)

packages/mgt-components/src/components/mgt-login/mgt-login.ts

@@ -68,7 +68,7 @@ interface IFocusable {
  * @class MgtPicker
  * @extends {MgtTemplatedComponent}
  *
- * @fires selectionChanged - Fired when selection changes
+ * @fires {CustomEvent<IDynamicPerson[]>} selectionChanged - Fired when set of selected people changes
  *
  * @cssprop --color - {Color} Default font color
  *