Add storybook and babel-preset-react

.babelrc

@@ -1,5 +1,6 @@
 {
     "presets": [
+        "react",
         [
             "env",
             {

.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);

.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 additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// 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: {
+    rules: [
+      // add your custom rules.
+    ],
+  },
+};

package.json

@@ -30,45 +30,38 @@
     "test": "jest",
     "coverage": "jest --coverage",
     "watch": "npm run build -- --watch",
-    "watch:test": "jest --watch"
+    "watch:test": "jest --watch",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "prop-types": "^15.6.2"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.4.8",
+    "@storybook/addon-links": "^3.4.8",
+    "@storybook/addons": "^3.4.8",
+    "@storybook/react": "^3.4.8",
     "@types/jest": "^22.0.1",
     "@types/node": "^8.0.0",
     "@types/prop-types": "^15.5.3",
     "@types/react": "^16.4.1",
+    "babel-core": "^6.26.3",
     "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "copy-webpack-plugin": "^4.4.1",
-    "coveralls": "^2.0.0",
-    "http-server": "^0.11.1",
-    "jest": "^22.0.4",
-    "jest-environment-node-debug": "^2.0.0",
-    "prettier": "^1.5.2",
-    "react": "^16.4.1",
-    "react-vis": "^1.9.4",
-    "rimraf": "^2.0.0",
-    "ts-jest": "^22.0.1",
-    "ts-loader": "^3.4.0",
-    "ts-node": "^3.2.0",
-    "tslint": "^5.0.0",
-    "tslint-config-prettier": "^1.1.0",
-    "typescript": "^2.3.0",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.1",
     "babel-plugin-module-resolver": "^2.4.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-es2017": "^6.24.1",
-    "babel-preset-react": "^6.16.0",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.16.0",
+    "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.18.0",
+    "babel-runtime": "^6.26.0",
     "babelify": "^7.3.0",
     "browserify": "^14.3.0",
     "canvas-prebuilt": "^1.6.0",
+    "copy-webpack-plugin": "^4.4.1",
+    "coveralls": "^2.0.0",
     "enzyme": "^2.8.2",
     "eslint": "^3.13.1",
     "eslint-config-uber-es2015": "^3.0.1",
@@ -76,16 +69,31 @@
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-react": "^6.9.0",
     "hoek": "5.0.3",
+    "http-server": "^0.11.1",
+    "jest": "^22.0.4",
+    "jest-environment-node-debug": "^2.0.0",
     "jsdom": "^9.9.1",
     "node-sass": "^4.2.0",
     "nyc": "^10.0.0",
+    "prettier": "^1.5.2",
+    "react": "^15.5.4",
     "react-addons-test-utils": ">=15.4.2",
     "react-dom": "^15.5.4",
     "react-test-renderer": "^15.5.4",
+    "react-vis": "^1.9.4",
+    "rimraf": "^2.0.0",
     "stylelint": "^7.7.1",
     "stylelint-config-standard": "^15.0.1",
     "tape": "^4.6.3",
-    "uglify-js": "^2.8.22"
+    "ts-jest": "^22.0.1",
+    "ts-loader": "^3.4.0",
+    "ts-node": "^3.2.0",
+    "tslint": "^5.0.0",
+    "tslint-config-prettier": "^1.1.0",
+    "typescript": "^2.3.0",
+    "uglify-js": "^2.8.22",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.11.1"
   },
   "engines": {
     "node": ">=6.0.0"
@@ -103,7 +111,7 @@
     "mapCoverage": true
   },
   "peerDependencies": {
-    "react": "^16.4.1",
+    "react": "^15.5.4",
     "react-vis": "^1.9.4"
   }
 }

stories/index.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+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')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));