Add (P)react Storybook. (forem#142)

.gitignore

@@ -37,3 +37,6 @@ latest.dump
 /public/packs
 /public/packs-test
 /node_modules
+
+# Ignore storybook static site generation
+storybook-static/

app/javascript/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

app/javascript/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+}
+
+configure(loadStories, module);

app/javascript/.storybook/webpack.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  resolve: {
+    extensions: [".js", "jsx"],
+    alias: {
+      react: "preact-compat",
+      "react-dom": "preact-compat"
+    }
+  }
+};

app/javascript/stories/index.stories.js

@@ -0,0 +1,13 @@
+import { h } from "preact";
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/react/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);