diff options
Diffstat (limited to '.storybook/withTheme')
-rw-r--r-- | .storybook/withTheme/index.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/.storybook/withTheme/index.tsx b/.storybook/withTheme/index.tsx new file mode 100644 index 000000000..b357aa658 --- /dev/null +++ b/.storybook/withTheme/index.tsx | |||
@@ -0,0 +1,59 @@ | |||
1 | import React from 'react'; | ||
2 | import { Classes } from 'jss'; | ||
3 | import injectSheet, { ThemeProvider } from 'react-jss'; | ||
4 | import addons, { makeDecorator } from '@storybook/addons'; | ||
5 | import theme, { Theme, ThemeType } from '../../packages/theme/src'; | ||
6 | |||
7 | const defaultTheme = { | ||
8 | name: 'Default', | ||
9 | variables: theme(ThemeType.default), | ||
10 | }; | ||
11 | |||
12 | const darkTheme = { | ||
13 | name: 'Dark Mode', | ||
14 | variables: theme(ThemeType.dark), | ||
15 | }; | ||
16 | |||
17 | const themes = [defaultTheme, darkTheme]; | ||
18 | |||
19 | const styles = (theme: Theme) => ({ | ||
20 | title: { | ||
21 | fontSize: 14, | ||
22 | }, | ||
23 | container: { | ||
24 | border: theme.inputBorder, | ||
25 | borderRadius: theme.borderRadiusSmall, | ||
26 | marginBottom: 20, | ||
27 | padding: 20, | ||
28 | background: theme.colorContentBackground, | ||
29 | }, | ||
30 | }); | ||
31 | |||
32 | const Container = injectSheet(styles)(({ name, classes, story }: { name: string, classes: Classes, story: React.ReactNode }) => ( | ||
33 | <article> | ||
34 | <h1 className={classes.title}>{name}</h1> | ||
35 | <div className={classes.container}> | ||
36 | {story} | ||
37 | </div> | ||
38 | </article> | ||
39 | )); | ||
40 | |||
41 | export default makeDecorator({ | ||
42 | name: 'withTheme', | ||
43 | parameterName: 'theme', | ||
44 | // This means don't run this decorator if the notes decorator is not set | ||
45 | // skipIfNoParametersOrOptions: true, | ||
46 | wrapper: (getStory: Function, context: any, { options }: any) => { | ||
47 | const channel = addons.getChannel(); | ||
48 | |||
49 | return ( | ||
50 | <> | ||
51 | {themes.map(theme => ( | ||
52 | <ThemeProvider theme={theme.variables}> | ||
53 | <Container story={getStory(context)} name={theme.name} /> | ||
54 | </ThemeProvider> | ||
55 | ))} | ||
56 | </> | ||
57 | ); | ||
58 | } | ||
59 | }) | ||