/
config.js
95 lines (78 loc) · 2.59 KB
/
config.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import {configure, addDecorator, addParameters, forceReRender} from '@storybook/react';
import {DocsPage, DocsContainer} from '@storybook/addon-docs/blocks';
import {withKnobs} from '@storybook/addon-knobs/react';
import {create} from '@storybook/theming';
import addons from '@storybook/addons';
import Events from '@storybook/core-events';
import {toId} from '@storybook/router';
import ReactDOM from 'react-dom';
import {commonColors, typeColors, fontFamily} from '../modules/core/react';
import {CanvasProviderDecorator, FontsDecorator} from '../utils/storybook';
const reqMDXWelcome = require.context('./stories', true, /\.mdx$/);
const reqMDX = require.context('../modules', true, /\.mdx$/);
const reqCSF = require.context('../modules', true, /stories.*\.tsx?$/);
const allReqs = [reqMDXWelcome, reqMDX, reqCSF];
function loadStories() {
const allExports = [];
allReqs.forEach(req => {
req.keys().forEach(fname => {
const story = req(fname);
if (story.default) allExports.push(story);
});
});
return allExports;
}
addDecorator(withKnobs);
addDecorator(FontsDecorator);
addDecorator(CanvasProviderDecorator);
/** If the string contains a phrase, prefix it. This is useful for making ordering sections */
const prefix = (phrase, prefix) => (/** @type {string} */ value) => {
const index = value.indexOf(phrase);
return index > -1 ? value.substr(0, index) + prefix + value.substr(index) : value;
};
const pipe = (...fns) => value => fns.reduce((result, fn) => fn(result), value);
function storySort(a, b) {
const prefixFn = pipe(
prefix('welcome-', '0'),
prefix('getting-started', 'a'),
prefix('tokens-', '1'),
prefix('components-', '2'),
prefix('labs-', '3'),
prefix('default', 'aa'),
prefix('states', 'zz')
);
const left = prefixFn(a[0]);
const right = prefixFn(b[0]);
return left === right ? 0 : left.localeCompare(right);
}
addParameters({
options: {
theme: create({
brandTitle: 'Canvas Kit',
mainTextColor: typeColors.body,
mainTextFace: fontFamily,
mainBackground: commonColors.backgroundAlt,
}),
storySort,
},
docs: {
container: DocsContainer,
page: DocsPage,
},
readme: {
codeTheme: 'github',
},
});
configure(loadStories, module);
function setCurrentStory(categorization, story) {
clearCurrentStory();
addons.getChannel().emit(Events.SET_CURRENT_STORY, {
storyId: toId(categorization, story),
});
forceReRender();
}
function clearCurrentStory() {
var root = document.querySelector('#root');
ReactDOM.unmountComponentAtNode(root);
}
window.setCurrentStory = setCurrentStory;