Add storybook and a basic datapair component

.storybook/config.js

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

.storybook/webpack.config.js

@@ -0,0 +1,18 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add addional webpack configurations.
+// For more information refer the docs: https://goo.gl/qPbSyX
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+module.exports = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    loaders: [
+      // add your custom loaders.
+    ],
+  },
+};

package.json

@@ -9,7 +9,9 @@
     "dist": "webpack -p",
     "lint": "eslint src; exit 0",
     "start": "webpack-dashboard -- node dev_server.js",
-    "test": "nyc --reporter text --reporter lcov mocha --recursive --timeout 10000 --compilers js:babel-register --require ignore-styles"
+    "test": "nyc --reporter text --reporter lcov mocha --recursive --timeout 10000 --compilers js:babel-register --require ignore-styles",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "babel-polyfill": "~6.13.0",
@@ -53,7 +55,8 @@
     "webpack-dashboard": "~0.1.5",
     "webpack-dev-middleware": "^1.8.1",
     "webpack-hot-middleware": "~2.12.1",
-    "webpack-visualizer-plugin": "~0.1.5"
+    "webpack-visualizer-plugin": "~0.1.5",
+    "@kadira/storybook": "^2.5.2"
   },
   "nyc": {
     "exclude": [

src/components/datapair/Datapair.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Datapair = (props) => (
+  <div className="datapair">
+    <span>{props.label}</span>
+    <div>{props.children || props.value}</div>
+  </div>
+);
+
+Datapair.PropTypes = {
+  label: React.PropTypes.string.isRequired,
+  value: React.PropTypes.string
+}
+
+export default Datapair;

stories/Datapair.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+import Datapair from '../src/components/datapair/Datapair';
+
+storiesOf('Datapair', module)
+  .add('with props', () => (
+    <Datapair label="Key" value="stuff" />
+  ))
+  .add('with HTML value', () => (
+    <Datapair label="Label"><h1>Custom markup</h1></Datapair>
+  ))

stories/Welcome.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+storiesOf('Welcome', module)
+  .add('Introduction', () => (
+    <section>
+      <h1>xanthous</h1>
+      <p>badass</p>
+    </section>
+  ));

stories/index.js

@@ -0,0 +1,3 @@
+import './Welcome';
+
+import './Datapair';