Add storybook so it's easier to test changes

.storybook/config.js

@@ -0,0 +1,8 @@
+import { configure } from '@kadira/storybook';
+import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+const genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');
+const webpack = require('webpack');
+
+
+module.exports = function(config, env) {
+  const defaultConfig = genDefaultConfig(config, env);
+  const withOldPlugin = Object.assign({}, defaultConfig, {
+    plugins: defaultConfig.plugins.concat([
+      new webpack.OldWatchingPlugin(),
+    ])
+  })
+  return withOldPlugin;
+};

package.json

@@ -8,7 +8,9 @@
     "compile": "babel --presets es2015 -d lib/ src/",
     "prepublish": "npm run compile",
     "eslint": "./node_modules/.bin/eslint src",
-    "lint": "npm run eslint"
+    "lint": "npm run eslint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -62,22 +64,25 @@
   "dependencies": {
     "lodash": "^4.15.0",
     "react": "^15.1.0",
+    "react-dom": "^15.3.2",
     "react-redux": "^4.4.5",
     "redux": "^3.4.0",
     "redux-actions": "^0.11.0",
     "reselect": "^2.5.3"
   },
   "devDependencies": {
+    "@kadira/storybook": "^2.21.0",
     "babel-cli": "^6.14.0",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-eslint": "^6.0.2",
     "babel-plugin-transform-object-rest-spread": "^6.6.5",
+    "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
-    "babel-eslint": "^6.0.2",
+    "bootstrap": "^4.0.0-alpha.2",
     "eslint": "^3.3.1",
     "eslint-config-airbnb": "^10.0.1",
     "eslint-loader": "^1.3.0",
+    "eslint-plugin-import": "^1.13.0",
     "eslint-plugin-jsx-a11y": "^2.1.0",
-    "eslint-plugin-react": "^6.0.0",
-    "eslint-plugin-import": "^1.13.0"
+    "eslint-plugin-react": "^6.0.0"
   }
 }

stories/UsersTable.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import sematable, { Table } from '../src';
+
+const columns = [
+  { key: 'id', primaryKey: true, header: 'ID' },
+  { key: 'firstName', header: 'First name', filterable: true, sortable: true },
+  { key: 'lastName', header: 'Last name', filterable: true, sortable: true },
+  { key: 'status', header: 'Status', taggable: true },
+];
+
+class UsersTable extends Component {
+  render() {
+    return <Table {...this.props} columns={columns} />;
+  }
+}
+export default sematable('usersTable', UsersTable, columns);

stories/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { Provider } from 'react-redux';
+import { combineReducers, createStore } from 'redux';
+import { reducer as sematable } from '../src';
+import UsersTable from './UsersTable';
+
+const reducer = combineReducers({ sematable });
+const store = createStore(reducer);
+
+const users = [
+  {
+    id: 1,
+    firstName: 'John',
+    lastName: 'Doe',
+    status: 'UNKNOWN',
+  },
+  {
+    id: 2,
+    firstName: 'Bob',
+    lastName: 'McBobber',
+    status: 'ACTIVE',
+  },
+];
+
+storiesOf('Sematable', module)
+  .add('default', () => (
+    <Provider store={store}>
+      <div className="container-fluid">
+        <UsersTable data={users} />
+      </div>
+    </Provider>
+  ));