Add React Storybook to the project

[kadamwhite]

This implements Storybook, a UI component development sandbox environment, and begins the process of moving our existing UI components into stories so that we can iterate on components in isolation from the rest of the application.

To test,

• Run npm install to get the storybook dev dependencies
• Run npm run storybook to spin up the Storybook server
• Open the storybook at localhost:6006

Eventually we should have stories for most or all components, both the "pure" UI ones (like the ProgressBar being used as a test case here) and the more complex components that represent entire pages of the app.

Stories can also be used to prototype behavior before we implement the corresponding Redux reducers and selectors, which should come in handy in the future.

Resolved roadblocks I encountered while integrating this system:

• Storybook uses Webpack 1. Solution: dynamically map our registered Webpack 2 loaders into a Webpack 1-compatible format, to avoid the need to maintaining parallel webpack config files.
• Storybook's default install puts all stories in one directory, so stories are separated from the components they test. This is unwieldy in the extreme, so at @gnarf's suggestion I adapted a method from the Storybook documentation to dynamically find and execute stories in *.stories.jsx files, so that each component can have a sidecar file defining the stories we use to develop & test its UI configuration.

Outstanding issues:

• I cannot convince ESLint to ignore *.stories.jsx files. Help figuring that one out would be appreciated.

Closes #89

[gnarf]

Looks pretty good to me!

[kadamwhite]

And yet,

image-annotator/frontend/components/ProgressBar/ProgressBar.stories.jsx
  2:1  error  '@kadira/storybook' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies

Totally stumped here, passing this to glob manually finds the right file, I don't know why ESLint isn't whitelisting this pattern.

[kadamwhite]

@gnarf identified that we had a duplicative .eslintrc.js file inside frontend that was defining an override for this rule specifically, preventing the parent config from taking effect inside frontend/. Since the intent of the nested file was already accomplished by the existing config in the parent, I've removed the nested .eslintrc.js.

[kadamwhite]

The errors in travis confuse me, they look like this:

/home/travis/build/bocoup/image-annotator/frontend/components/Home.jsx
  10:2  error  Expected indentation of 6 space characters but found 1  react/jsx-indent
  16:1  error  Expected indentation of 6 space characters but found 0  react/jsx-indent
  17:2  error  Expected indentation of 6 space characters but found 1  react/jsx-indent
  18:2  error  Expected indentation of 6 space characters but found 1  react/jsx-indent
/home/travis/build/bocoup/image-annotator/frontend/components/PerceivedDemographics.jsx
  146:1  error  Expected indentation of 20 space characters but found 0  react/jsx-indent
  158:1  error  Expected indentation of 14 space characters but found 0  react/jsx-indent
  166:1  error  Expected indentation of 12 space characters but found 0  react/jsx-indent
/home/travis/build/bocoup/image-annotator/frontend/components/ProgressBar/index.jsx
  17:2  error  Expected indentation of 8 space characters but found 1  react/jsx-indent

but e.g. Home.jsx seems to have fine indentation. Not sure how to proceed

[kadamwhite]

This was the source of the mystery build errors: eslint-plugin-react v6.10 introduced a breaking change, and there's some discussion about it in the repo (see jsx-eslint/eslint-plugin-react#1117). Pinning to 6.9.0 directly will maintain the expected behavior until that issue gets sorted.

[kadamwhite]

Finally green! @gnarf 👍 'd this, so mergin'