Skip to content

Commit 8c4cd98

Browse files
nmetulevnmetulev
committed
storyboard experimentation
1 parent 6d688d6 commit 8c4cd98

File tree

13 files changed

+168
-20
lines changed

13 files changed

+168
-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/manager.js‎

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,59 @@
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';
1014

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

‎.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: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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+
7+
export const withSignIn = makeDecorator({
8+
name: `withSignIn`,
9+
parameterName: 'myParameter',
10+
skipIfNoParametersOrOptions: false,
11+
wrapper: (getStory, context, { parameters }) => {
12+
const mockProvider = new MockProvider(true);
13+
14+
const channel = addons.getChannel();
15+
16+
channel.on('mgt/setProvider', params => {
17+
console.log('setProvider', params);
18+
const currentProvider = Providers.globalProvider;
19+
if (params.state === ProviderState.SignedIn && (!currentProvider || currentProvider === mockProvider)) {
20+
Providers.globalProvider = new MsalProvider({
21+
clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a'
22+
});
23+
console.log('setting msal');
24+
} else if (params.state !== ProviderState.SignedIn && currentProvider !== mockProvider) {
25+
Providers.globalProvider = mockProvider;
26+
console.log('setting mock');
27+
}
28+
});
29+
30+
// Our simple API above simply sets the notes parameter to a string,
31+
// which we send to the channel
32+
channel.emit('mgt/getProvider', { type: 'getProvider' });
33+
// we can also add subscriptions here using channel.on('eventName', callback);
34+
35+
return getStory(context);
36+
}
37+
});

‎.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: 1 addition & 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",

‎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
`;

‎stories/peoplePicker.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-picker/mgt-people-picker';
1314
import '../dist/es6/mock/mgt-mock-provider';
1415
import '../dist/es6/mock/MockProvider';
1516

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

2324
export const peoplePicker = () => html`
24-
<mgt-mock-provider></mgt-mock-provider>
2525
<mgt-people-picker></mgt-people-picker>
2626
`;

0 commit comments

Comments
 (0)