Skip to content

Commit 22d0b9f

Browse files
nmetulevnmetulev
authored
Merge pull request #242 from microsoftgraph/nmetulev/playground
Nmetulev/playground
2 parents 6d688d6 + 447d176 commit 22d0b9f

File tree

14 files changed

+172
-20
lines changed

14 files changed

+172
-20
lines changed

‎.storybook/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react"]
3+
}

‎.storybook/env.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const CLIENTID = 'a974dfa0-9f57-49b9-95db-90f04ce2111a';
2+
3+
export const GETPROVIDER_EVENT = 'mgt/getProvider';
4+
export const SETPROVIDER_EVENT = 'mgt/setProvider';

‎.storybook/manager.js‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,60 @@
55
* -------------------------------------------------------------------------------------------
66
*/
77

8-
import addonAPI from '@storybook/addons';
8+
import React, { useState } from 'react';
9+
import { addons, types } from '@storybook/addons';
910
import { STORIES_CONFIGURED, STORY_MISSING } from '@storybook/core-events';
11+
import { AddonPanel } from '@storybook/components';
12+
import { useParameter, useChannel } from '@storybook/api';
13+
import { Providers, MsalProvider, LoginType, ProviderState } from '../dist/commonjs';
14+
import { CLIENTID, GETPROVIDER_EVENT, SETPROVIDER_EVENT } from './env';
1015

11-
addonAPI.register('microsoft/graph-toolkit', storybookAPI => {
16+
const PARAM_KEY = 'signInAddon';
17+
18+
const msalProvider = new MsalProvider({
19+
clientId: CLIENTID,
20+
loginType: LoginType.Popup
21+
});
22+
23+
Providers.globalProvider = msalProvider;
24+
25+
const SignInPanel = () => {
26+
const value = useParameter(PARAM_KEY, null);
27+
28+
const [state, setState] = useState(Providers.globalProvider.state);
29+
30+
const emit = useChannel({
31+
STORY_RENDERED: id => {
32+
console.log('storyRendered', id);
33+
},
34+
[GETPROVIDER_EVENT]: params => {
35+
emitProvider(state);
36+
}
37+
});
38+
39+
const emitProvider = loginState => {
40+
emit(SETPROVIDER_EVENT, { state: loginState });
41+
};
42+
43+
Providers.onProviderUpdated(() => {
44+
setState(Providers.globalProvider.state);
45+
emitProvider(Providers.globalProvider.state);
46+
});
47+
48+
emitProvider(state);
49+
50+
return (
51+
<div>
52+
{state === ProviderState.SignedIn
53+
? 'You are Signed In and all components are using real data'
54+
: 'All components are using mock data - sign in to use real data'}
55+
<mgt-login />
56+
{/* {JSON.stringify(value)} */}
57+
</div>
58+
);
59+
};
60+
61+
addons.register('microsoft/graph-toolkit', storybookAPI => {
1262
storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
1363
if (storybookAPI.getUrlState().path === '/story/*') {
1464
storybookAPI.selectStory('mgt-login', 'login');
@@ -17,4 +67,17 @@ addonAPI.register('microsoft/graph-toolkit', storybookAPI => {
1767
storybookAPI.on(STORY_MISSING, (kind, story) => {
1868
storybookAPI.selectStory('mgt-login', 'login');
1969
});
70+
71+
const render = ({ active, key }) => (
72+
<AddonPanel active={active} key={key}>
73+
<SignInPanel />
74+
</AddonPanel>
75+
);
76+
77+
addons.add('mgt/sign-in', {
78+
type: types.PANEL,
79+
title: 'Sign In',
80+
render,
81+
paramKey: PARAM_KEY
82+
});
2083
});

‎.storybook/preview.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,19 @@
99

1010
import { configure, addParameters, setCustomElements } from '@storybook/web-components';
1111
import customElements from '../custom-elements.json';
12+
import theme from './theme';
13+
import '../dist/es6/components/mgt-login/mgt-login.js';
1214

1315
setCustomElements(customElements);
1416

1517
addParameters({
1618
docs: {
1719
iframeHeight: '200px'
20+
},
21+
options: {
22+
// disable keyboard shortcuts because they interfere with the stories
23+
enableShortcuts: false,
24+
theme
1825
}
1926
});
2027

‎.storybook/signInAddon.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import addons, { makeDecorator } from '@storybook/addons';
2+
import { Providers } from '../dist/es6/Providers';
3+
import { ProviderState } from '../dist/es6/providers/IProvider';
4+
import { MsalProvider } from '../dist/es6/providers/MsalProvider';
5+
import { MockProvider } from '../dist/es6/mock/MockProvider';
6+
import { CLIENTID, SETPROVIDER_EVENT, GETPROVIDER_EVENT } from './env';
7+
8+
export const withSignIn = makeDecorator({
9+
name: `withSignIn`,
10+
parameterName: 'myParameter',
11+
skipIfNoParametersOrOptions: false,
12+
wrapper: (getStory, context, { parameters }) => {
13+
const mockProvider = new MockProvider(true);
14+
15+
const channel = addons.getChannel();
16+
17+
channel.on(SETPROVIDER_EVENT, params => {
18+
const currentProvider = Providers.globalProvider;
19+
if (params.state === ProviderState.SignedIn && (!currentProvider || currentProvider === mockProvider)) {
20+
Providers.globalProvider = new MsalProvider({
21+
clientId: CLIENTID
22+
});
23+
} else if (params.state !== ProviderState.SignedIn && currentProvider !== mockProvider) {
24+
Providers.globalProvider = mockProvider;
25+
}
26+
});
27+
28+
// Our simple API above simply sets the notes parameter to a string,
29+
// which we send to the channel
30+
channel.emit(GETPROVIDER_EVENT, { type: 'getProvider' });
31+
// we can also add subscriptions here using channel.on('eventName', callback);
32+
33+
return getStory(context);
34+
}
35+
});

‎.storybook/theme.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { create } from '@storybook/theming/create';
2+
3+
export default create({
4+
base: 'light',
5+
6+
// colorPrimary: 'hotpink',
7+
// colorSecondary: 'deepskyblue',
8+
9+
// UI
10+
// appBg: 'white',
11+
// appContentBg: 'silver',
12+
// appBorderColor: 'grey',
13+
// appBorderRadius: 4,
14+
15+
// Typography
16+
// fontBase: '"Open Sans", sans-serif',
17+
// fontCode: 'monospace',
18+
19+
// Text colors
20+
// textColor: 'black',
21+
// textInverseColor: 'rgba(255,255,255,0.9)',
22+
23+
// Toolbar default and active colors
24+
// barTextColor: 'silver',
25+
// barSelectedColor: 'black',
26+
// barBg: 'hotpink',
27+
28+
// Form colors
29+
// inputBg: 'white',
30+
// inputBorder: 'silver',
31+
// inputTextColor: 'black',
32+
// inputBorderRadius: 4,
33+
34+
brandTitle: 'Microsoft Graph Toolkit',
35+
brandUrl: 'https://aka.ms/mgt'
36+
});

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
"@babel/plugin-proposal-decorators": "^7.7.4",
6969
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
7070
"@babel/preset-env": "^7.7.6",
71+
"@babel/preset-react": "^7.7.4",
7172
"@babel/preset-typescript": "^7.7.4",
7273
"@storybook/addon-a11y": "^5.3.0-beta.31",
7374
"@storybook/addon-actions": "^5.3.0-beta.31",
@@ -78,6 +79,7 @@
7879
"@storybook/storybook-deployer": "^2.8.1",
7980
"@storybook/web-components": "^5.3.0-beta.31",
8081
"@types/jest": "^24.0.11",
82+
"@types/node": "12.12.22",
8183
"@webcomponents/webcomponentsjs": "^2.4.0",
8284
"babel-loader": "^8.0.6",
8385
"babel-polyfill": "6.26.0",

‎stories/agenda.stories.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,31 @@ import { html } from 'lit-element';
99
import { withA11y } from '@storybook/addon-a11y';
1010
import { withKnobs } from '@storybook/addon-knobs';
1111
import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
12+
import { withSignIn } from '../.storybook/signInAddon';
1213
import '../dist/es6/components/mgt-agenda/mgt-agenda';
1314
import '../dist/es6/mock/mgt-mock-provider';
1415
import '../dist/es6/mock/MockProvider';
1516

1617
export default {
1718
title: 'mgt-agenda',
1819
component: 'mgt-agenda',
19-
decorators: [withA11y, withKnobs, withWebComponentsKnobs],
20+
decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
2021
parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
2122
};
2223

2324
export const simple = () => html`
24-
<mgt-mock-provider></mgt-mock-provider>
2525
<mgt-agenda></mgt-agenda>
2626
`;
2727

2828
export const getByEventQuery = () => html`
29-
<mgt-mock-provider></mgt-mock-provider>
3029
<mgt-agenda event-query="/me/events?orderby=start/dateTime"></mgt-agenda>
3130
`;
3231

3332
export const getByDate = () => html`
34-
<mgt-mock-provider></mgt-mock-provider>
3533
<mgt-agenda group-by-day date="May 7, 2019" days="3"></mgt-agenda>
3634
`;
3735

3836
export const getByEventTemplate = () => html`
39-
<mgt-mock-provider></mgt-mock-provider>
4037
<mgt-agenda>
4138
<template data-type="event">
4239
<button class="eventButton">

‎stories/login.stories.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,23 @@ import { html } from 'lit-element';
99
import { withA11y } from '@storybook/addon-a11y';
1010
import { withKnobs } from '@storybook/addon-knobs';
1111
import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
12+
import { withSignIn } from '../.storybook/signInAddon';
1213
import '../dist/es6/components/mgt-login/mgt-login';
1314
import '../dist/es6/mock/mgt-mock-provider';
1415
import '../dist/es6/mock/MockProvider';
1516

1617
export default {
1718
title: 'mgt-login',
1819
component: 'mgt-login',
19-
decorators: [withA11y, withKnobs, withWebComponentsKnobs],
20-
parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
20+
decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
21+
parameters: {
22+
options: { selectedPanel: 'mgt/sign-in' },
23+
signInAddon: {
24+
test: 'test'
25+
}
26+
}
2127
};
2228

2329
export const Login = () => html`
24-
<mgt-mock-provider></mgt-mock-provider>
2530
<mgt-login></mgt-login>
2631
`;

‎stories/people.stories.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ import { html } from 'lit-element';
99
import { withA11y } from '@storybook/addon-a11y';
1010
import { withKnobs } from '@storybook/addon-knobs';
1111
import { withWebComponentsKnobs } from 'storybook-addon-web-components-knobs';
12+
import { withSignIn } from '../.storybook/signInAddon';
1213
import '../dist/es6/components/mgt-people/mgt-people';
1314
import '../dist/es6/mock/mgt-mock-provider';
1415
import '../dist/es6/mock/MockProvider';
1516

1617
export default {
1718
title: 'mgt-people',
1819
component: 'mgt-people',
19-
decorators: [withA11y, withKnobs, withWebComponentsKnobs],
20+
decorators: [withA11y, withKnobs, withWebComponentsKnobs, withSignIn],
2021
parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }
2122
};
2223

2324
export const People = () => html`
24-
<mgt-mock-provider></mgt-mock-provider>
2525
<mgt-people show-max="5"></mgt-people>
2626
`;

0 commit comments

Comments
 (0)