storyboard experimentation

.storybook/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.storybook/manager.js

@@ -5,10 +5,59 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import addonAPI from '@storybook/addons';
+import React, { useState } from 'react';
+import { addons, types } from '@storybook/addons';
 import { STORIES_CONFIGURED, STORY_MISSING } from '@storybook/core-events';
+import { AddonPanel } from '@storybook/components';
+import { useParameter, useChannel } from '@storybook/api';
+import { Providers, MsalProvider, LoginType, ProviderState } from '../dist/commonjs';
 
-addonAPI.register('microsoft/graph-toolkit', storybookAPI => {
+const PARAM_KEY = 'signInAddon';
+
+const msalProvider = new MsalProvider({
+  clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a',
+  loginType: LoginType.Popup
+});
+
+Providers.globalProvider = msalProvider;
+
+const SignInPanel = () => {
+  const value = useParameter(PARAM_KEY, null);
+
+  const [state, setState] = useState(Providers.globalProvider.state);
+
+  const emit = useChannel({
+    STORY_RENDERED: id => {
+      console.log('storyRendered', id);
+    },
+    'mgt/getProvider': params => {
+      emitProvider(state);
+    }
+  });
+
+  const emitProvider = loginState => {
+    emit('mgt/setProvider', { state: loginState });
+  };
+
+  Providers.onProviderUpdated(() => {
+    setState(Providers.globalProvider.state);
+    emitProvider(Providers.globalProvider.state);
+  });
+
+  emitProvider(state);
+
+  return (
+    <div>
+      {state === ProviderState.SignedIn
+        ? 'You are Signed In and all components are using real data'
+        : 'All components are using mock data - sign in to use real data'}
+      <mgt-login />
+      {/* {JSON.stringify(value)} */}
+    </div>
+  );
+};
+
+addons.register('microsoft/graph-toolkit', storybookAPI => {
   storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
     if (storybookAPI.getUrlState().path === '/story/*') {
       storybookAPI.selectStory('mgt-login', 'login');
@@ -17,4 +66,17 @@ addonAPI.register('microsoft/graph-toolkit', storybookAPI => {
   storybookAPI.on(STORY_MISSING, (kind, story) => {
     storybookAPI.selectStory('mgt-login', 'login');
   });
+
+  const render = ({ active, key }) => (
+    <AddonPanel active={active} key={key}>
+      <SignInPanel />
+    </AddonPanel>
+  );
+
+  addons.add('mgt/sign-in', {
+    type: types.PANEL,
+    title: 'Sign In',
+    render,
+    paramKey: PARAM_KEY
+  });
 });

.storybook/preview.js

@@ -9,12 +9,19 @@
 
 import { configure, addParameters, setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
+import theme from './theme';
+import '../dist/es6/components/mgt-login/mgt-login.js';
 
 setCustomElements(customElements);
 
 addParameters({
   docs: {
     iframeHeight: '200px'
+  },
+  options: {
+    // disable keyboard shortcuts because they interfere with the stories
+    enableShortcuts: false,
+    theme
   }
 });
 

.storybook/signInAddon.js

@@ -0,0 +1,37 @@
+import addons, { makeDecorator } from '@storybook/addons';
+import { Providers } from '../dist/es6/Providers';
+import { ProviderState } from '../dist/es6/providers/IProvider';
+import { MsalProvider } from '../dist/es6/providers/MsalProvider';
+import { MockProvider } from '../dist/es6/mock/MockProvider';
+
+export const withSignIn = makeDecorator({
+  name: `withSignIn`,
+  parameterName: 'myParameter',
+  skipIfNoParametersOrOptions: false,
+  wrapper: (getStory, context, { parameters }) => {
+    const mockProvider = new MockProvider(true);
+
+    const channel = addons.getChannel();
+
+    channel.on('mgt/setProvider', params => {
+      console.log('setProvider', params);
+      const currentProvider = Providers.globalProvider;
+      if (params.state === ProviderState.SignedIn && (!currentProvider || currentProvider === mockProvider)) {
+        Providers.globalProvider = new MsalProvider({
+          clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a'
+        });
+        console.log('setting msal');
+      } else if (params.state !== ProviderState.SignedIn && currentProvider !== mockProvider) {
+        Providers.globalProvider = mockProvider;
+        console.log('setting mock');
+      }
+    });
+
+    // Our simple API above simply sets the notes parameter to a string,
+    // which we send to the channel
+    channel.emit('mgt/getProvider', { type: 'getProvider' });
+    // we can also add subscriptions here using channel.on('eventName', callback);
+
+    return getStory(context);
+  }
+});

.storybook/theme.js

@@ -0,0 +1,36 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  //   colorPrimary: 'hotpink',
+  //   colorSecondary: 'deepskyblue',
+
+  // UI
+  //   appBg: 'white',
+  //   appContentBg: 'silver',
+  //   appBorderColor: 'grey',
+  //   appBorderRadius: 4,
+
+  // Typography
+  //   fontBase: '"Open Sans", sans-serif',
+  //   fontCode: 'monospace',
+
+  // Text colors
+  //   textColor: 'black',
+  //   textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  //   barTextColor: 'silver',
+  //   barSelectedColor: 'black',
+  //   barBg: 'hotpink',
+
+  // Form colors
+  //   inputBg: 'white',
+  //   inputBorder: 'silver',
+  //   inputTextColor: 'black',
+  //   inputBorderRadius: 4,
+
+  brandTitle: 'Microsoft Graph Toolkit',
+  brandUrl: 'https://aka.ms/mgt'
+});

package.json

@@ -68,6 +68,7 @@
     "@babel/plugin-proposal-decorators": "^7.7.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
     "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.7.4",
     "@storybook/addon-a11y": "^5.3.0-beta.31",
     "@storybook/addon-actions": "^5.3.0-beta.31",

stories/agenda.stories.js

@@ -9,34 +9,31 @@ import { html } from 'lit-element';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
+import { withSignIn } from '../.storybook/signInAddon';
 import '../dist/es6/components/mgt-agenda/mgt-agenda';
 import '../dist/es6/mock/mgt-mock-provider';
 import '../dist/es6/mock/MockProvider';
 
 export default {
   title: 'mgt-agenda',
   component: 'mgt-agenda',
-  decorators: [withA11y, withKnobs, withWebComponentsKnobs],
+  decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
 };
 
 export const simple = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-agenda></mgt-agenda>
 `;
 
 export const getByEventQuery = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-agenda event-query="/me/events?orderby=start/dateTime"></mgt-agenda>
 `;
 
 export const getByDate = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-agenda group-by-day date="May 7, 2019" days="3"></mgt-agenda>
 `;
 
 export const getByEventTemplate = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-agenda>
     <template data-type="event">
       <button class="eventButton">

stories/login.stories.js

@@ -9,18 +9,23 @@ import { html } from 'lit-element';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
+import { withSignIn } from '../.storybook/signInAddon';
 import '../dist/es6/components/mgt-login/mgt-login';
 import '../dist/es6/mock/mgt-mock-provider';
 import '../dist/es6/mock/MockProvider';
 
 export default {
   title: 'mgt-login',
   component: 'mgt-login',
-  decorators: [withA11y, withKnobs, withWebComponentsKnobs],
-  parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
+  decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
+  parameters: {
+    options: { selectedPanel: 'mgt/sign-in' },
+    signInAddon: {
+      test: 'test'
+    }
+  }
 };
 
 export const Login = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-login></mgt-login>
 `;

stories/people.stories.js

@@ -9,18 +9,18 @@ import { html } from 'lit-element';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
+import { withSignIn } from '../.storybook/signInAddon';
 import '../dist/es6/components/mgt-people/mgt-people';
 import '../dist/es6/mock/mgt-mock-provider';
 import '../dist/es6/mock/MockProvider';
 
 export default {
   title: 'mgt-people',
   component: 'mgt-people',
-  decorators: [withA11y, withKnobs, withWebComponentsKnobs],
+  decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
 };
 
 export const People = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-people show-max="5"></mgt-people>
 `;

stories/peoplePicker.stories.js

@@ -9,18 +9,18 @@ import { html } from 'lit-element';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
+import { withSignIn } from '../.storybook/signInAddon';
 import '../dist/es6/components/mgt-people-picker/mgt-people-picker';
 import '../dist/es6/mock/mgt-mock-provider';
 import '../dist/es6/mock/MockProvider';
 
 export default {
   title: 'mgt-people-picker',
   component: 'mgt-people-picker',
-  decorators: [withA11y, withKnobs, withWebComponentsKnobs],
+  decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
 };
 
 export const peoplePicker = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-people-picker></mgt-people-picker>
 `;

stories/person.stories.js

@@ -9,18 +9,18 @@ import { html } from 'lit-element';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
+import { withSignIn } from '../.storybook/signInAddon';
 import '../dist/es6/components/mgt-person/mgt-person';
 import '../dist/es6/mock/mgt-mock-provider';
 import '../dist/es6/mock/MockProvider';
 
 export default {
   title: 'mgt-person',
   component: 'mgt-person',
-  decorators: [withA11y, withKnobs, withWebComponentsKnobs],
+  decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
 };
 
 export const person = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-person person-query="me" show-name show-email></mgt-person>
 `;

stories/personCard.stories.js

@@ -8,6 +8,7 @@
 import { html } from 'lit-element';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
+import { withSignIn } from '../.storybook/signInAddon';
 import '../dist/es6/components/mgt-person-card/mgt-person-card';
 import '../dist/es6/components/mgt-person/mgt-person';
 import '../dist/es6/mock/mgt-mock-provider';
@@ -16,12 +17,11 @@ import '../dist/es6/mock/MockProvider';
 export default {
   title: 'mgt-person-card',
   component: 'mgt-person-card',
-  decorators: [withA11y, withKnobs],
+  decorators: [withA11y, withKnobs, withSignIn],
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
 };
 
 export const personCard = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-person person-query="me" show-name show-email person-card="hover">
     <template data-type="person-card">
       <mgt-person-card person-details="{{person}}" person-image="{{personImage}}">

stories/tasks.stories.js

@@ -9,18 +9,18 @@ import { html } from 'lit-element';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
+import { withSignIn } from '../.storybook/signInAddon';
 import '../dist/es6/components/mgt-tasks/mgt-tasks';
 import '../dist/es6/mock/mgt-mock-provider';
 import '../dist/es6/mock/MockProvider';
 
 export default {
   title: 'mgt-tasks',
   component: 'mgt-tasks',
-  decorators: [withA11y, withKnobs, withWebComponentsKnobs],
+  decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
   parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
 };
 
 export const tasks = () => html`
-  <mgt-mock-provider></mgt-mock-provider>
   <mgt-tasks></mgt-tasks>
 `;