Add React Storybook

package.json

@@ -6,7 +6,8 @@
     "start": "npm run serve",
     "serve": "node -r ./server/environment ./server",
     "build": "node ./tasks/build",
-    "test": "jest"
+    "test": "jest",
+    "storybook": "start-storybook -c ./tasks/storybook/ -p 6006"
   },
   "author": "",
   "license": "ISC",
@@ -49,7 +50,8 @@
     "webpack": "^1.12.15",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.13.0",
-    "webpack-hot-server-middleware": "~0.0.2"
+    "webpack-hot-server-middleware": "~0.0.2",
+    "@kadira/storybook": "^2.21.0"
   },
   "dependencies": {
     "babel-polyfill": "^6.7.4",

src/components/lib/button/Button.css

@@ -0,0 +1,10 @@
+.root {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    background-color: #fff;
+    background: #fff;
+    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%,rgb(219, 219, 219) 100%);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 8px 16px;
+}

src/components/lib/button/Button.js

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+import styles from 'components/lib/button/Button.css';
+
+function Button({ onClick, children }) {
+    return (
+        <button className={styles.root} onClick={onClick}>
+            {children}
+        </button>
+    );
+}
+
+Button.propTypes = {
+    children: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+};
+
+export default Button;

src/components/lib/button/Button.test.js

@@ -0,0 +1,19 @@
+/* eslint-env jasmine */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Button from 'components/lib/button/Button';
+
+describe('components/lib/button/Button', () => {
+
+    it('renders correctly', () => {
+        const component = renderer.create(
+            <Button onClick={() => {}}>
+                Hello Button.
+            </Button>
+        );
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+});

src/components/lib/button/__snapshots__/Button.test.js.snap

@@ -0,0 +1,7 @@
+exports[`components/lib/button/Button renders correctly 1`] = `
+<button
+  className="root"
+  onClick={[Function]}>
+  Hello Button.
+</button>
+`;

src/components/notfound/NotFound.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './NotFound.css';
+import styles from 'components/notfound/NotFound.css';
 
 function NotFound() {
     return (

src/stories/index.js

@@ -0,0 +1,12 @@
+import 'css-reset';
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Button from 'components/lib/button/Button';
+
+storiesOf('Button', module)
+    .add('with text', () => (
+        <Button onClick={action('clicked')}>Hello Button</Button>
+    ))
+    .add('with some emoji', () => (
+        <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    ));

tasks/storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+    require('../../src/stories');
+}
+
+configure(loadStories, module);

tasks/storybook/webpack.config.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const generateConfig = require('../build/generateConfig');
+
+module.exports = (storybookBaseConfig, configType) => {
+    let options;
+    if (configType === 'DEVELOPMENT') {
+        options = {
+            sourceMaps: true
+        };
+    } else {
+        options = {
+            optimize: true,
+            revision: true
+            // extractCss: true,
+            // stats: true
+        }
+    }
+
+    const config = generateConfig(options);
+
+    // Copy over app loader and resolve config.
+    storybookBaseConfig.module = config.module;
+    storybookBaseConfig.resolve = config.resolve;
+    // storybookBaseConfig.plugins = config.plugins; Prob not a good idea to try
+    // and use plugins from app config as it includes things specific to app entry
+    // e.g. HotReloading requires the client to be injected etc.
+    return storybookBaseConfig;
+};