move storybook to root + typescript

TODO: fix modules

5 files changed, 100 insertions, 0 deletions

diff --git a/.storybook/addons.ts b/.storybook/addons.ts
new file mode 100644
index 000000000..6aed412d0
--- /dev/null
+++ b/.storybook/addons.ts
@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
diff --git a/.storybook/config.ts b/.storybook/config.ts
new file mode 100644
index 000000000..d1f3d3053
--- /dev/null
+++ b/.storybook/config.ts
@@ -0,0 +1,15 @@
+import { configure, addDecorator } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import withTheme from '../.storybook/withTheme';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.tsx$/);
+
+addDecorator(withInfo());
+addDecorator(withTheme());
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 000000000..f5bf78b7a
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,7 @@
+<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800" rel="stylesheet">
+<style>
+  * {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+  }
+</style>
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
new file mode 100644
index 000000000..e542f1387
--- /dev/null
+++ b/.storybook/webpack.config.js
@@ -0,0 +1,17 @@
+const path = require('path');
+
+module.exports = (baseConfig, env, config) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [{
+      loader: require.resolve('awesome-typescript-loader'),
+      options: {
+        configFileName: path.join(__dirname, '..', 'tsconfig.storybook.json'),
+      }
+    }, {
+      loader: require.resolve('react-docgen-typescript-loader'),
+    }]
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};
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 @@
+import React from 'react';
+import { Classes } from 'jss';
+import injectSheet, { ThemeProvider } from 'react-jss';
+import addons, { makeDecorator } from '@storybook/addons';
+import theme, { Theme, ThemeType } from '../../packages/theme/src';
+
+const defaultTheme = {
+  name: 'Default',
+  variables: theme(ThemeType.default),
+};
+
+const darkTheme = {
+  name: 'Dark Mode',
+  variables: theme(ThemeType.dark),
+};
+
+const themes = [defaultTheme, darkTheme];
+
+const styles = (theme: Theme) => ({
+  title: {
+    fontSize: 14,
+  },
+  container: {
+    border: theme.inputBorder,
+    borderRadius: theme.borderRadiusSmall,
+    marginBottom: 20,
+    padding: 20,
+    background: theme.colorContentBackground,
+  },
+});
+
+const Container = injectSheet(styles)(({ name, classes, story }: { name: string, classes: Classes, story: React.ReactNode }) => (
+  <article>
+    <h1 className={classes.title}>{name}</h1>
+    <div className={classes.container}>
+      {story}
+    </div>
+  </article>
+));
+
+export default makeDecorator({
+  name: 'withTheme',
+  parameterName: 'theme',
+  // This means don't run this decorator if the notes decorator is not set
+  // skipIfNoParametersOrOptions: true,
+  wrapper: (getStory: Function, context: any, { options }: any) => {
+    const channel = addons.getChannel();
+
+    return (
+      <>
+        {themes.map(theme => (
+          <ThemeProvider theme={theme.variables}>
+            <Container story={getStory(context)} name={theme.name} />
+          </ThemeProvider>
+        ))}
+      </>
+    );
+  }
+})