-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
preview.js
133 lines (120 loc) · 3.22 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
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import React from 'react';
import {addParameters, addDecorator} from '@storybook/react';
import {setConsoleOptions} from '@storybook/addon-console';
import {withContexts} from '@storybook/addon-contexts/react';
import {color, withKnobs} from '@storybook/addon-knobs';
import DefaultThemeColors from '@shopify/polaris-tokens/dist-modern/theme/base.json';
import {AppProvider} from '../src';
import enTranslations from '../locales/en.json';
addParameters({
options: {
// showRoots: true,
},
percy: {
skip: true,
widths: [375, 1280],
},
});
addDecorator(function PaddingDecorator(story) {
const storyProps = story().props;
const containsFrame =
storyProps &&
(storyProps.hasOwnProperty('topBar') ||
storyProps.hasOwnProperty('navigation') ||
storyProps.hasOwnProperty('data-has-frame'));
console.log({storyProps});
return containsFrame ? (
story()
) : (
<div style={{padding: '8px'}}>{story()}</div>
);
});
function StrictModeToggle({isStrict = false, children}) {
const Wrapper = isStrict ? React.StrictMode : React.Fragment;
return <Wrapper>{children}</Wrapper>;
}
function AppProviderWithKnobs({newDesignLanguage, colorScheme, children}) {
const omitAppProvider = (() => {
try {
return children.props.children.props['data-omit-app-provider'];
} catch (e) {
return null;
}
})();
if (omitAppProvider === 'true') return children;
const colors = Object.entries(DefaultThemeColors).reduce(
(accumulator, [key, value]) => ({
...accumulator,
[key]: strToHex(color(key, value, 'Theme')),
}),
{},
);
return (
<AppProvider
i18n={enTranslations}
features={{newDesignLanguage}}
theme={{
colors,
colorScheme,
}}
>
{children}
</AppProvider>
);
}
addDecorator(
withContexts([
{
title: 'Strict Mode',
components: [StrictModeToggle],
params: [
{name: 'Disabled', props: {isStrict: false}},
{name: 'Enabled', default: true, props: {isStrict: true}},
],
},
{
title: 'New Design Language',
components: [AppProviderWithKnobs],
params: [
{
name: 'Disabled',
default: true,
props: {newDesignLanguage: false},
},
{
name: 'Enabled - Light Mode',
props: {newDesignLanguage: true, colorScheme: 'light'},
},
{
name: 'Enabled - Dark Mode',
props: {newDesignLanguage: true, colorScheme: 'dark'},
},
],
},
]),
);
addDecorator(withKnobs);
// addon-console
setConsoleOptions((opts) => {
// When transpiling TS using isolatedModules, the compiler doesn't strip
// out exported types as it doesn't know if an item is a type or not.
// Ignore those warnings as we don't care about them.
// ignore color because the addon doesn't handle colored logs properly
opts.panelExclude = [
...opts.panelExclude,
/export .* was not found in/,
/color: #999933;/,
];
return opts;
});
function strToHex(str) {
if (str.charAt(0) === '#') return str;
return `#${str
.slice(5, -1)
.split(',')
.slice(0, 3)
.map(Number)
.map((n) => n.toString(16))
.map((n) => n.padStart(2, '0'))
.join('')}`;
}