aboutsummaryrefslogtreecommitdiffstats
path: root/.storybook
diff options
context:
space:
mode:
Diffstat (limited to '.storybook')
-rw-r--r--.storybook/addons.ts2
-rw-r--r--.storybook/config.ts15
-rw-r--r--.storybook/preview-head.html7
-rw-r--r--.storybook/webpack.config.js17
-rw-r--r--.storybook/withTheme/index.tsx61
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 @@
1import '@storybook/addon-actions/register';
2import '@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 @@
1import { configure, addDecorator } from '@storybook/react';
2import { withInfo } from '@storybook/addon-info';
3import withTheme from '../.storybook/withTheme';
4
5// automatically import all files ending in *.stories.js
6const req = require.context('../stories', true, /.stories.tsx$/);
7
8addDecorator(withInfo());
9addDecorator(withTheme());
10
11function loadStories() {
12 req.keys().forEach(filename => req(filename));
13}
14
15configure(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 @@
1const path = require('path');
2
3module.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 @@
1import React from 'react';
2import { Classes } from 'jss';
3import injectSheet, { ThemeProvider } from 'react-jss';
4import addons, { makeDecorator } from '@storybook/addons';
5import theme, { ThemeType, Theme } from '@meetfranz/theme';
6
7console.log(theme);
8
9const defaultTheme = {
10 name: 'Default',
11 variables: theme(ThemeType.default),
12};
13
14const darkTheme = {
15 name: 'Dark Mode',
16 variables: theme(ThemeType.dark),
17};
18
19const themes = [defaultTheme, darkTheme];
20
21const 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
34const 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
43export 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})