diff options
Diffstat (limited to '.storybook')
-rw-r--r-- | .storybook/addons.ts | 2 | ||||
-rw-r--r-- | .storybook/config.ts | 15 | ||||
-rw-r--r-- | .storybook/preview-head.html | 7 | ||||
-rw-r--r-- | .storybook/webpack.config.js | 17 | ||||
-rw-r--r-- | .storybook/withTheme/index.tsx | 61 |
5 files changed, 0 insertions, 102 deletions
diff --git a/.storybook/addons.ts b/.storybook/addons.ts deleted file mode 100644 index 6aed412d0..000000000 --- a/.storybook/addons.ts +++ /dev/null | |||
@@ -1,2 +0,0 @@ | |||
1 | import '@storybook/addon-actions/register'; | ||
2 | import '@storybook/addon-links/register'; | ||
diff --git a/.storybook/config.ts b/.storybook/config.ts deleted file mode 100644 index d1f3d3053..000000000 --- a/.storybook/config.ts +++ /dev/null | |||
@@ -1,15 +0,0 @@ | |||
1 | import { configure, addDecorator } from '@storybook/react'; | ||
2 | import { withInfo } from '@storybook/addon-info'; | ||
3 | import withTheme from '../.storybook/withTheme'; | ||
4 | |||
5 | // automatically import all files ending in *.stories.js | ||
6 | const req = require.context('../stories', true, /.stories.tsx$/); | ||
7 | |||
8 | addDecorator(withInfo()); | ||
9 | addDecorator(withTheme()); | ||
10 | |||
11 | function loadStories() { | ||
12 | req.keys().forEach(filename => req(filename)); | ||
13 | } | ||
14 | |||
15 | configure(loadStories, module); | ||
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html deleted file mode 100644 index f5bf78b7a..000000000 --- a/.storybook/preview-head.html +++ /dev/null | |||
@@ -1,7 +0,0 @@ | |||
1 | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet"> | ||
2 | <style> | ||
3 | * { | ||
4 | font-family: 'Open Sans', sans-serif; | ||
5 | font-size: 14px; | ||
6 | } | ||
7 | </style> | ||
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index e542f1387..000000000 --- a/.storybook/webpack.config.js +++ /dev/null | |||
@@ -1,17 +0,0 @@ | |||
1 | const path = require('path'); | ||
2 | |||
3 | module.exports = (baseConfig, env, config) => { | ||
4 | config.module.rules.push({ | ||
5 | test: /\.(ts|tsx)$/, | ||
6 | use: [{ | ||
7 | loader: require.resolve('awesome-typescript-loader'), | ||
8 | options: { | ||
9 | configFileName: path.join(__dirname, '..', 'tsconfig.storybook.json'), | ||
10 | } | ||
11 | }, { | ||
12 | loader: require.resolve('react-docgen-typescript-loader'), | ||
13 | }] | ||
14 | }); | ||
15 | config.resolve.extensions.push('.ts', '.tsx'); | ||
16 | return config; | ||
17 | }; | ||
diff --git a/.storybook/withTheme/index.tsx b/.storybook/withTheme/index.tsx deleted file mode 100644 index b2f80f438..000000000 --- a/.storybook/withTheme/index.tsx +++ /dev/null | |||
@@ -1,61 +0,0 @@ | |||
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, { ThemeType, Theme } from '@meetfranz/theme'; | ||
6 | |||
7 | console.log(theme); | ||
8 | |||
9 | const defaultTheme = { | ||
10 | name: 'Default', | ||
11 | variables: theme(ThemeType.default), | ||
12 | }; | ||
13 | |||
14 | const darkTheme = { | ||
15 | name: 'Dark Mode', | ||
16 | variables: theme(ThemeType.dark), | ||
17 | }; | ||
18 | |||
19 | const themes = [defaultTheme, darkTheme]; | ||
20 | |||
21 | const styles = (theme: Theme) => ({ | ||
22 | title: { | ||
23 | fontSize: 14, | ||
24 | }, | ||
25 | container: { | ||
26 | border: theme.inputBorder, | ||
27 | borderRadius: theme.borderRadiusSmall, | ||
28 | marginBottom: 20, | ||
29 | padding: 20, | ||
30 | background: theme.colorContentBackground, | ||
31 | }, | ||
32 | }); | ||
33 | |||
34 | const Container = injectSheet(styles)(({ name, classes, story }: { name: string, classes: Classes, story: any }) => ( | ||
35 | <article> | ||
36 | <h1 className={classes.title}>{name}</h1> | ||
37 | <div className={classes.container}> | ||
38 | {story} | ||
39 | </div> | ||
40 | </article> | ||
41 | )); | ||
42 | |||
43 | export default makeDecorator({ | ||
44 | name: 'withTheme', | ||
45 | parameterName: 'theme', | ||
46 | // This means don't run this decorator if the notes decorator is not set | ||
47 | // skipIfNoParametersOrOptions: true, | ||
48 | wrapper: (getStory: Function, context: any, { options }: any) => { | ||
49 | const channel = addons.getChannel(); | ||
50 | |||
51 | return ( | ||
52 | <> | ||
53 | {themes.map(theme => ( | ||
54 | <ThemeProvider theme={theme.variables}> | ||
55 | <Container story={getStory(context)} name={theme.name} /> | ||
56 | </ThemeProvider> | ||
57 | ))} | ||
58 | </> | ||
59 | ); | ||
60 | } | ||
61 | }) | ||