Merge pull request #241 from microsoftgraph/playground

Storybook integration (component playground)

Author: beth-panx

.gitignore

@@ -36,3 +36,6 @@ testResults/junit.xml
 package-lock.json
 
 *-css.ts
+
+# storybook
+storybook-static/

.storybook/.babelrc

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

.storybook/env.js

@@ -0,0 +1,3 @@
+export const CLIENTID = 'ac77046c-156c-40f0-8507-3b5a58034582';
+export const GETPROVIDER_EVENT = 'mgt/getProvider';
+export const SETPROVIDER_EVENT = 'mgt/setProvider';

.storybook/main.js

@@ -0,0 +1,18 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+module.exports = {
+  presets: ['@storybook/addon-docs/preset'],
+  stories: ['../stories/**/*.stories.(js|mdx)'],
+  addons: [
+    '@storybook/addon-a11y/register',
+    '@storybook/addon-actions/register',
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-links/register',
+    '@storybook/addon-storysource/register'
+  ]
+};

.storybook/manager.js

@@ -0,0 +1,84 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+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';
+import { CLIENTID, GETPROVIDER_EVENT, SETPROVIDER_EVENT } from './env';
+
+const PARAM_KEY = 'signInAddon';
+const _allow_signin = false;
+
+const msalProvider = new MsalProvider({
+  clientId: CLIENTID,
+  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);
+    },
+    [GETPROVIDER_EVENT]: params => {
+      emitProvider(state);
+    }
+  });
+
+  const emitProvider = loginState => {
+    emit(SETPROVIDER_EVENT, { state: loginState });
+  };
+
+  Providers.onProviderUpdated(() => {
+    setState(Providers.globalProvider.state);
+    emitProvider(Providers.globalProvider.state);
+  });
+
+  emitProvider(state);
+
+  return (
+    <div>
+      {_allow_signin ? (
+        <mgt-login />
+      ) : (
+        'All components are using mock data - sign in function will be available in a future release'
+      )}
+    </div>
+  );
+};
+
+addons.register('microsoft/graph-toolkit', storybookAPI => {
+  storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
+    if (storybookAPI.getUrlState().path === '/story/*') {
+      storybookAPI.selectStory('mgt-login', 'login');
+    }
+  });
+  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

@@ -0,0 +1,38 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+/* global window */
+
+import { configure, addParameters, setCustomElements } from '@storybook/web-components';
+import customElements from '../custom-elements.json';
+import '../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js';
+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
+  }
+});
+
+// force full reload to not reregister web components
+const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
+configure(req, module);
+if (module.hot) {
+  module.hot.accept(req.id, () => {
+    const currentLocationHref = window.location.href;
+    window.history.pushState(null, null, currentLocationHref);
+    window.location.reload();
+  });
+}

.storybook/signInAddon.js

@@ -0,0 +1,41 @@
+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';
+import { CLIENTID, SETPROVIDER_EVENT, GETPROVIDER_EVENT } from './env';
+
+const _allow_signin = false;
+
+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(SETPROVIDER_EVENT, params => {
+      if (_allow_signin) {
+        const currentProvider = Providers.globalProvider;
+        if (params.state === ProviderState.SignedIn && (!currentProvider || currentProvider === mockProvider)) {
+          Providers.globalProvider = new MsalProvider({
+            clientId: CLIENTID
+          });
+        } else if (params.state !== ProviderState.SignedIn && currentProvider !== mockProvider) {
+          Providers.globalProvider = mockProvider;
+        }
+      } else {
+        Providers.globalProvider = mockProvider;
+      }
+    });
+
+    // Our simple API above simply sets the notes parameter to a string,
+    // which we send to the channel
+    channel.emit(GETPROVIDER_EVENT, { 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'
+});