-
Notifications
You must be signed in to change notification settings - Fork 0
/
config.js
98 lines (87 loc) · 2.33 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
96
97
98
import React from 'react';
import { storiesOf, configure } from '@kadira/storybook';
import WithToggle from '../src/index';
import getAllExamples from '../examples/getAllExamples';
const allExamples = getAllExamples();
const types =
Array.from(new Set(Object.values(allExamples).map(examplesFunc => examplesFunc().viewMode)));
const storyTypes = types.map(type => (
{
type,
stories: Object.entries(allExamples)
.filter(([, examplesFunc]) => examplesFunc().viewMode === type)
.map(([kind, examplesFunc]) => (
{
kind,
stories: examplesFunc().examples.map(example => example.description),
}
)),
}
));
function renderToggleButton(onClick, type) {
const showHarryPotterButton = type === 'sw';
let buttonAltText;
let buttonText;
let style;
if (showHarryPotterButton) {
buttonAltText = 'This button is slytherin themed.';
buttonText = '⚡ Go to Harry Potter Mode ⚡';
style = {
background: '#006600',
color: '#fff',
border: '3px solid #006600',
};
} else {
buttonAltText = 'This button is alliance themed.';
buttonText = '★ Go to Star Wars Mode ★';
style = {
background: '#fff',
color: '#B20000',
border: '3px solid #B20000',
};
}
return (
<button
type="button"
onClick={onClick}
title={buttonAltText}
style={{
...style,
padding: 8,
fontSize: 16,
fontWeight: 'bold',
borderRadius: 3,
lineHeight: '24px',
}}
>
{buttonText}
</button>
);
}
function loadStories() {
Object.entries(allExamples).forEach(([name, examplesFunc]) => {
const story = storiesOf(name, module);
const { examples, viewMode } = examplesFunc();
examples.forEach(
({ example, description }) => {
const exampleComponent = typeof example === 'function' ? example() : example;
const args = [
description,
];
args.push(
() => (
<WithToggle
storyTypes={storyTypes}
type={viewMode}
renderCustomButton={onClick => renderToggleButton(onClick, viewMode)}
>
{exampleComponent}
</WithToggle>
),
);
return story.add(...args);
},
);
});
}
configure(loadStories, module);