Add React Storybook to the project

.eslintrc.js

@@ -29,7 +29,11 @@ module.exports = {
 
     'import/no-extraneous-dependencies': ['error', { devDependencies: [
       // only allow devDependencies in these folders:
-      '*.js', '**/__tests__/*', 'frontend/**/*', 'jest/**/*'
+      '*.js',
+      '**/__tests__/*',
+      'jest/**/*',
+      '**/*.stories.jsx',
+      '.storybook/**/*'
     ] }],
   }
 };

.storybook/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    ["es2015", {"modules": "commonjs"}],
+
+    "react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "transform-object-rest-spread"
+  ]
+}

.storybook/addons.js

@@ -0,0 +1,12 @@
+// In order to use Storybook's Add-Ons we have to manually reference the
+// add-ons we care about from this file.
+//
+// More information:
+// https://getstorybook.io/docs/react-storybook/addons/introduction
+// https://github.com/storybooks/storybook-addon-knobs
+
+// Include Storybook's built-in addons (actions and links)
+import '@kadira/storybook/addons';
+
+// Include the "knobs" add-on to support dynamically editing React props
+import '@kadira/storybook-addon-knobs/register';

.storybook/config.js

@@ -0,0 +1,15 @@
+import { configure } from '@kadira/storybook';
+
+// We write our stories as *.stories.jsx files that live alongside the
+// component that they exercise. The logic in this function finds all
+// *.stories.jsx files within our front-end source directory and executes
+// them; each file should call `storiesOf('ProgressBar', module)` in the
+// normal fashion described in the Storybook documentation.
+function loadStories() {
+  // Reassure ESLint that this async require is intentional
+  // eslint-disable-next-line global-require
+  const req = require.context('../frontend', true, /\.stories\.jsx$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,43 @@
+// For more information on Storybook's webpack configuration, refer the docs:
+// https://getstorybook.io/docs/configurations/custom-webpack-config
+
+const path = require('path');
+const webpackConfig = require('../webpack.config');
+
+const projectRoot = path.resolve(__dirname, '../');
+
+// Storybook still uses Webpack 1 under the hood! This means we have to map
+// our Webpack 2 config back to use Webpack 1 syntax; and since Storybook
+// handles the Babel / JSX parsing for us, this means we also need to pick
+// out the rules relevant to our non-JS styles & files loaders.
+const styleAndImageRules = webpackConfig.module.rules
+  // We filter our rules list down with a simple file-type regex test to
+  // whitelist the loader tests we want to pull in to Storybook:
+  .filter(rule => /png|svg|jpg|gif|styl/i.test(rule.test.toString()))
+  // This map statement converts _the most basic_ Webpack 2 loader config
+  // objects into something Webpack 1 can understand; it works here because
+  // this project does not get too tricky with loaders, but could break if
+  // the base project Webpack configuration is substantially modified.
+  // TODO: Rip this out ASAP as soon as Storybook upgrades to Webpack 2!
+  .map(rule => ({
+    test: rule.test,
+    loaders: rule.use.map((loader) => {
+      if (typeof loader === 'string') {
+        // String loader values are passed through as-is
+        return loader;
+      }
+      // Otherwise, make a string out of the loader options object and
+      // add it to the loader name. Loaders can conveniently accept options
+      // as a JSON string: https://webpack.github.io/docs/using-loaders.html
+      return `${loader.loader}?${JSON.stringify(loader.options)}`;
+    }),
+    // Since this file is not the project root, augment each rule with
+    // an include path specifying the project's root directory
+    include: projectRoot,
+  }));
+
+module.exports = {
+  module: {
+    loaders: styleAndImageRules,
+  },
+};

frontend/components/ProgressBar/ProgressBar.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import ProgressBar from './';
+
+storiesOf('ProgressBar', module)
+  .add('0%', () => (
+    <ProgressBar current={1} total={4} incrementName="Step" />
+  ))
+  .add('25%', () => (
+    <ProgressBar current={2} total={4} incrementName="Step" />
+  ))
+  // .add('no border', () => (
+  //   <ProgressBar current={1} total={4} border={false} incrementName="Step" />
+  // ))
+  .add('100%', () => (
+    <ProgressBar current={5} total={4} incrementName="Step" />
+  ));

frontend/components/ProgressBar.styl → frontend/components/ProgressBar/ProgressBar.styl

@@ -1,4 +1,4 @@
-@import './shared/mixins.styl';
+@import '../shared/mixins.styl';
 
 .label {
   visually-hidden();

package.json

@@ -19,9 +19,11 @@
     "front:dev": "webpack-dev-server",
     "server:prod": "babel-node backend/server",
     "server:dev": "supervisor -w backend/ -e js,sql backend/server",
-    "lint": "eslint --ext js,jsx ./*.js frontend jest backend",
+    "lint": "eslint --ext js,jsx ./*.js frontend jest backend .storybook",
     "test:dev": "node jest/run.js --watch",
-    "test": "npm run lint && node jest/run.js"
+    "test": "npm run lint && node jest/run.js",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "jest": {
     "moduleFileExtensions": [
@@ -73,6 +75,8 @@
     "redux-saga": "^0.14.3"
   },
   "devDependencies": {
+    "@kadira/storybook": "^2.21.0",
+    "@kadira/storybook-addon-knobs": "^1.7.1",
     "autoprefixer": "^6.7.0",
     "axios-mock-adapter": "^1.7.1",
     "babel-core": "^6.22.1",
@@ -87,7 +91,7 @@
     "eslint-loader": "^1.6.3",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^3.0.2",
-    "eslint-plugin-react": "^6.9.0",
+    "eslint-plugin-react": "6.9.0",
     "file-loader": "^0.9.0",
     "find-cache-dir": "^0.1.1",
     "hard-source-webpack-plugin": "^0.3.8",

webpack.config.js

@@ -114,7 +114,9 @@ module.exports = {
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
-        loader: 'url-loader?limit=10000',
+        use: [
+          'url-loader?limit=10000',
+        ],
       },
     ],
   },