Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add React Storybook to the project #93

Merged
merged 3 commits into from Mar 20, 2017
Merged

Add React Storybook to the project #93

merged 3 commits into from Mar 20, 2017

Commits on Mar 20, 2017

  1. Add React Storybook to the project 

    This implements [Storybook](https://getstorybook.io), 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](http://localhost:6006)

![storybook-demo](https://cloud.githubusercontent.com/assets/442115/24120117/d5a5c9cc-0d89-11e7-90bc-56acf4767b74.gif)

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
    @kadamwhite
    kadamwhite committed Mar 20, 2017
    Configuration menu
    Copy the full SHA
    06308e9 View commit details
    Browse the repository at this point in the history

  2. Remove duplicative .eslintrc.js that unnecessarily shadows the root c… 

    …onfig
    @kadamwhite
    kadamwhite committed Mar 20, 2017
    Configuration menu
    Copy the full SHA
    fcecb84 View commit details
    Browse the repository at this point in the history

  3. Pin eslint-plugin-react version to avoid undocumented breaking change

    @kadamwhite
    kadamwhite committed Mar 20, 2017
    Configuration menu
    Copy the full SHA
    40ebebf View commit details
    Browse the repository at this point in the history