/
preview.js
73 lines (62 loc) · 1.98 KB
/
preview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import customElements from '../.components-docs/custom-elements.json';
import { addDecorator, addParameters, configure, setCustomElements } from '@storybook/web-components';
import { i18nKnob } from '../stories/lib/i18n-knob.js';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
addDecorator(withKnobs);
// Add global language selector knob on each story
addDecorator((storyFn) => {
i18nKnob();
return storyFn();
});
addDecorator(withA11y);
const viewports = {};
Array
.from(new Array(10))
.map((_, i) => {
const w = 350 + i * 100;
viewports['w' + w] = {
type: 'desktop',
name: w + 'px',
styles: {
width: w + 'px',
height: '90%',
},
};
});
addParameters({
options: {
storySort: (a, b) => {
if (a[1].kind !== b[1].kind) {
return a[1].kind.localeCompare(b[1].kind, undefined, { numeric: true });
}
return -1;
},
},
a11y: {
restoreScroll: true,
},
viewport: { viewports },
});
// Temporary patch for default values and redundancy
function addDefaultValue (def) {
def.defaultValue = def.default;
}
customElements.tags.forEach((tagDefinition) => {
(tagDefinition.attributes || []).forEach((def) => addDefaultValue(def));
(tagDefinition.properties || []).forEach((def) => addDefaultValue(def));
});
setCustomElements(customElements);
// We cannot use main.js (stories: []) yet because of the HMR config for web-components
const csfStories = require.context('../stories', true, /\.stories\.js$/);
const mdxDocsPages = require.context('../docs', true, /\.mdx$/);
configure([csfStories, mdxDocsPages], module);
// Force full reload instead of HMR for Web Components
// https://github.com/storybookjs/storybook/tree/next/app/web-components
if (module.hot) {
module.hot.accept(csfStories.id, () => {
const currentLocationHref = window.location.href;
window.history.pushState(null, null, currentLocationHref);
window.location.reload();
});
}