Set up React Storybook for developing presentational components #89
Assignees
Projects
Comments
kadamwhite
added a commit
that referenced
this issue
Mar 20, 2017
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)  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
added a commit
that referenced
this issue
Mar 20, 2017
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)  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
|
The last two bullet points of the criteria above should be handled as separate pieces of work and done mindfully in conjunction with overall UI polish work later this week. The work in #93 is enough to accomplish the goal of "setting up storybook" described in this issue's title. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Criteria:
The text was updated successfully, but these errors were encountered: