Storybook as a software design tool

I recently found Storybook to be a great means of simplifying the design of a component.
Storybook is a component design tool. You build a catlog of examples showing how a component can be used.

This is great for ensuring system consistency as it is possible to lay out all possible options for a component. Given that it can be time consuming to achieve certain states by using a full application, having all of the possible states laid out in one place is a big time saver.

I am working with a react application that uses both Relay and Formik. I am just getting the hang of using Formik in storybook. Relay is more difficult.

In typical open source fashion a component exists because someone had a problem to solve. However when people move on to new projects (or the project is replaced) these eventually become abandoned. The relay storybook components are in this state. It worked once, but is now broken by the continuously moving environment.
This leaves two choices: try to fix the library or work around the limitation.

Currently I am using the work-around by extracting “pure” components and testing them.
For example I could put all of a dialog box into a component and isolate it from the effect button.

Leave a comment