feat: interactive stories for web components

.storybook/main.js

@@ -17,6 +17,8 @@ module.exports = {
   addons: [
     getAbsolutePath('storybook-version'),
     getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-controls'),
+    getAbsolutePath('@whitespace/storybook-addon-html'),
     getAbsolutePath('@storybook/addon-mdx-gfm')
   ],
 

.storybook/preview.css

@@ -13,6 +13,10 @@ body,
   padding: 0!important;
 }
 
+#root-inner {
+    padding: 16px;
+}
+
 .docs-img-centered {
   display: block;
   float: none;

.storybook/preview.js

@@ -11,9 +11,33 @@ import { setCustomElements } from '@storybook/web-components';
 import '../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js';
 import customElements from '../custom-elements.json';
 import { versionInfo } from './versionInfo';
+import { registerMgtComponents } from '../packages/mgt-components/dist/es6/registerMgtComponents';
 import { defaultDocsPage } from './story-elements/defaultDocsPage';
+
+import { addons } from '@storybook/preview-api';
+import { CLIENTID, SETPROVIDER_EVENT, AUTH_PAGE } from './env';
+import { Providers } from '../packages/mgt-element/dist/es6/providers/Providers';
+import { LoginType, ProviderState } from '../packages/mgt-element/dist/es6/providers/IProvider';
+import { MockProvider } from '../packages/mgt-element/dist/es6/mock/MockProvider';
+import { Msal2Provider } from '../packages/providers/mgt-msal2-provider/dist/es6/Msal2Provider';
 import './preview.css';
 
+registerMgtComponents();
+
+Providers.globalProvider = new MockProvider(true);
+const channel = addons.getChannel();
+channel.on(SETPROVIDER_EVENT, params => {
+  if (params.state === ProviderState.SignedIn && params.name === 'MgtMockProvider') {
+    Providers.globalProvider = new MockProvider(true);
+  } else if (params.state === ProviderState.SignedIn && params.name === 'MgtMsal2Provider') {
+    Providers.globalProvider = new Msal2Provider({
+      clientId: CLIENTID,
+      loginType: LoginType.Popup,
+      redirectUri: `${window.location.origin}/${AUTH_PAGE}`
+    });
+  }
+});
+
 const setCustomElementsManifestWithOptions = (customElements, options) => {
   let { privateFields = true } = options;
   if (!privateFields) {
@@ -54,12 +78,18 @@ export const parameters = {
   options: {
     storySort: {
       order: ['stories']
+    },
+    showPanel: false
+  },
+  html: {
+    removeEmptyComments: true,
+    transform: code => {
+      return code.replace(/=""/g, '');
     }
   }
 };
 
 const req = require.context('../stories', true, /\.(js|mdx)$/);
-// configure(req, module);
 if (module.hot) {
   module.hot.accept(req.id, () => {
     const currentLocationHref = window.location.href;

.yarn/patches/@whitespace-storybook-addon-html-npm-5.1.6-9888d34906.patch

@@ -0,0 +1,62 @@
+diff --git a/dist/esm/Panel.js b/dist/esm/Panel.js
+index 0d26a69f0fcdf303ddb41d22200dca9fd98d7136..ff82b5530359cae82ad620839d4378ce258a1285 100644
+--- a/dist/esm/Panel.js
++++ b/dist/esm/Panel.js
+@@ -10,13 +10,13 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+-import React, { useMemo } from "react";
+-import { useAddonState, useChannel, useParameter } from "@storybook/api";
++import React, { useState, useEffect } from "react";
++import { useAddonState, useChannel, useParameter } from "@storybook/manager-api";
+ import { AddonPanel } from "@storybook/components";
+ import { ADDON_ID, EVENTS, PARAM_KEY } from "./constants";
+ import { PanelContent } from "./components/PanelContent";
+ import { format as prettierFormat } from "prettier/standalone";
+-import prettierHtml from "prettier/parser-html";
++import * as prettierHtml from "prettier/plugins/html";
+ export var Panel = function Panel(props) {
+   // https://storybook.js.org/docs/react/addons/addons-api#useaddonstate
+   var _useAddonState = useAddonState(ADDON_ID, {
+@@ -51,9 +51,15 @@ export var Panel = function Panel(props) {
+     parser: "html",
+     plugins: [prettierHtml]
+   });
+-  var formattedCode = useMemo(function () {
+-    return code && prettierFormat(code, prettierConfig);
+-  }, [code, prettierConfig]);
++  const [formattedCode, setFormattedCode] = useState(null);
++  useEffect(() => {
++    const formatCode = async () => {
++      const prettierFormattedCode = code && await prettierFormat(code, prettierConfig);
++      setFormattedCode(prettierFormattedCode);
++    }
++    formatCode().catch(e => console.error(e));
++    }, [code, prettierConfig]
++  );
+   return /*#__PURE__*/React.createElement(AddonPanel, props, /*#__PURE__*/React.createElement(PanelContent, {
+     code: formattedCode,
+     showLineNumbers: showLineNumbers,
+diff --git a/package.json b/package.json
+index 34ef114920720e922094148145c9f4062ac1a5ac..33b5d71f9a53ef20626c961e2535571f5c317a0b 100644
+--- a/package.json
++++ b/package.json
+@@ -63,7 +63,7 @@
+     "eslint-plugin-import": "^2.26.0",
+     "eslint-plugin-react": "^7.31.11",
+     "npm-run-all": "^4.1.5",
+-    "prettier": "^2.8.1",
++    "prettier": "^3.0.2",
+     "prop-types": "^15.8.1",
+     "react": "^17.0.2",
+     "react-dom": "^17.0.2",
+@@ -79,7 +79,7 @@
+     "@storybook/components": "^6.5.8 || ^7.0.12",
+     "@storybook/core-events": "^6.5.8 || ^7.0.12",
+     "@storybook/theming": "^6.5.8 || ^7.0.12",
+-    "prettier": "^2.0.0",
++    "prettier": "^3.0.0",
+     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+     "react-syntax-highlighter": "^15.0.0"

package.json

@@ -82,6 +82,7 @@
     "@stackblitz/sdk": "^1.9.0",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-controls": "^7.6.7",
     "@storybook/addon-docs": "^7.6.7",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-links": "^7.6.7",
@@ -103,6 +104,7 @@
     "@web/test-runner-playwright": "^0.10.2",
     "@web/test-runner-puppeteer": "^0.14.0",
     "@webcomponents/webcomponentsjs": "^2.5.0",
+    "@whitespace/storybook-addon-html": "^5.1.6",
     "babel-loader": "^8.2.1",
     "core-js": "^3.31.0",
     "cpx": "^1.5.0",
@@ -134,6 +136,7 @@
     "prettier": "3.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-syntax-highlighter": "^15.5.0",
     "regenerator-runtime": "^0.13.7",
     "rollup": "^4.9.6",
     "rollup-plugin-postcss": "^4.0.2",
@@ -158,7 +161,8 @@
     }
   },
   "resolutions": {
-    "responselike": "2.0.0"
+    "responselike": "2.0.0",
+    "@whitespace/storybook-addon-html@^5.1.6": "patch:@whitespace/storybook-addon-html@npm%3A5.1.6#./.yarn/patches/@whitespace-storybook-addon-html-npm-5.1.6-9888d34906.patch"
   },
   "packageManager": "[email protected]"
 }

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

@@ -612,7 +612,7 @@ export class MgtLogin extends MgtTemplatedTaskComponent {
                       <mgt-person
                         .personDetails=${details ? JSON.parse(details) : null}
                         .fallbackDetails=${{ displayName: account.name, mail: account.mail }}
-                        .view=${'twolines'}
+                        view="twolines"
                         class="account"
                       ></mgt-person>
                     </li>`;

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

@@ -74,7 +74,6 @@ export const registerMgtPersonComponent = () => {
  * @fires {CustomEvent<IDynamicPerson>} line4clicked - Fired when line4 is clicked
  *
  * @cssprop --person-background-color - {Color} the color of the person component background.
- * @cssprop --person-background-border-radius - {Length} the border radius of the person component. Default is 4px.
  *
  * @cssprop --person-avatar-size - {Length} the width and height of the avatar. Default is 24px.
  * @cssprop --person-avatar-border - {String} the border around an avatar. Default is none.
@@ -83,7 +82,8 @@ export const registerMgtPersonComponent = () => {
  * @cssprop --person-initials-text-color - {Color} the color of initials in an avatar.
  * @cssprop --person-initials-background-color - {Color} the color of the background in an avatar with initials.
  *
- * @cssprop --person-details-spacing - {Length} the space between the avatar and the person details. Default is 12px.
+ * @cssprop --person-details-left-spacing - {Length} the space between the avatar and the person details. Default is 12px.
+ * @cssprop --person-details-bottom-spacing - {Length} the space between the bottom of the detail block and the bottom on the component. Default is 0.
  *
  * @cssprop --person-line1-font-size - {String} the font-size of the line 1 text. Default is 14px.
  * @cssprop --person-line1-font-weight - {Length} the font weight of the line 1 text. Default is 600.
@@ -239,7 +239,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     attribute: 'show-presence',
     type: Boolean
   })
-  public showPresence: boolean;
+  public showPresence = false;
 
   /**
    * determines person component avatar size and apply presence badge accordingly.
@@ -252,7 +252,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     attribute: 'avatar-size',
     type: String
   })
-  public avatarSize: AvatarSize;
+  public avatarSize: AvatarSize = 'auto';
 
   /**
    * object containing Graph details on person
@@ -332,11 +332,10 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     attribute: 'fetch-image',
     type: Boolean
   })
-  public fetchImage: boolean;
+  public fetchImage = false;
 
   /**
-   * Sets whether to disable the person image fetch
-   * from the Microsoft Graph
+   * Sets whether to disable the person image fetch from the Microsoft Graph
    *
    * @type {boolean}
    * @memberof MgtPerson
@@ -345,7 +344,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     attribute: 'disable-image-fetch',
     type: Boolean
   })
-  public disableImageFetch: boolean;
+  public disableImageFetch = false;
 
   /**
    * Sets the vertical layout of
@@ -398,6 +397,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
    * Valid options are: 'none', 'hover', or 'click'
    * Set to 'none' to not show the card
    *
+   * @default PersonCardInteraction.none
    * @type {PersonCardInteraction}
    * @memberof MgtPerson
    */
@@ -869,16 +869,16 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
       // Render the line1 template
       const template = this.renderTemplate('line1', { person });
       details.push(html`
-           <div class="line1" part="detail-line" @click=${() =>
-             this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${template}</div>
-         `);
+        <div class="line1" part="detail-line" @click=${() =>
+          this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${template}</div>
+`);
     } else {
       // Render the line1 property value
       if (line1text) {
         details.push(html`
-             <div class="line1" part="detail-line" @click=${() =>
-               this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${line1text}</div>
-           `);
+          <div class="line1" part="detail-line" @click=${() =>
+            this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${line1text}</div>
+`);
       }
     }
 
@@ -889,16 +889,16 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
         // Render the line2 template
         const template = this.renderTemplate('line2', { person });
         details.push(html`
-           <div class="line2" part="detail-line" @click=${() =>
-             this.handleLine2Clicked()} role="presentation" aria-label="${text}">${template}</div>
-         `);
+          <div class="line2" part="detail-line" @click=${() =>
+            this.handleLine2Clicked()} role="presentation" aria-label="${text}">${template}</div>
+`);
       } else {
         // Render the line2 property value
         if (text) {
           details.push(html`
-             <div class="line2" part="detail-line" @click=${() =>
-               this.handleLine2Clicked()} role="presentation" aria-label="${text}">${text}</div>
-           `);
+            <div class="line2" part="detail-line" @click=${() =>
+              this.handleLine2Clicked()} role="presentation" aria-label="${text}">${text}</div>
+`);
         }
       }
     }
@@ -910,16 +910,16 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
         // Render the line3 template
         const template = this.renderTemplate('line3', { person });
         details.push(html`
-           <div class="line3" part="detail-line" @click=${() =>
-             this.handleLine3Clicked()} role="presentation" aria-label="${text}">${template}</div>
+          <div class="line3" part="detail-line" @click=${() =>
+            this.handleLine3Clicked()} role="presentation" aria-label="${text}">${template}</div>
          `);
       } else {
         // Render the line3 property value
         if (text) {
           details.push(html`
-             <div class="line3" part="detail-line" @click=${() =>
-               this.handleLine3Clicked()} role="presentation" aria-label="${text}">${text}</div>
-           `);
+            <div class="line3" part="detail-line" @click=${() =>
+              this.handleLine3Clicked()} role="presentation" aria-label="${text}">${text}</div>
+`);
         }
       }
     }

packages/mgt-element/src/utils/version.ts

@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '3.1.3';
+export const PACKAGE_VERSION = '4.0.0';

packages/providers/mgt-msal2-provider/src/Msal2Provider.ts

@@ -24,7 +24,7 @@ import {
   InteractionRequiredAuthError,
   SsoSilentRequest,
   EventMessage,
-  AuthenticationResult
+  EventType
 } from '@azure/msal-browser';
 import { AuthenticationProviderOptions } from '@microsoft/microsoft-graph-client';
 
@@ -423,7 +423,7 @@ export class Msal2Provider extends IProvider {
   }
 
   private readonly handleMsalEvent = (message: EventMessage): void => {
-    if (message.eventType === 'msal:acquireTokenSuccess' && 'scopes' in message.payload) {
+    if (message.eventType === EventType.ACQUIRE_TOKEN_SUCCESS && 'scopes' in message.payload) {
       this.approvedScopes = message.payload.scopes;
     }
   };