Versioned style guides with React Storybook

A while ago I wrote about how we are using Storybook to generate a living style guide, for use within a design system. While continuing work on a living style guide, we encountered the need to be able to see the various versions of each component in the UI library we were creating. As such, we created a new add-on for just that: versions.

Versions

Obviously, we are using React Storybook for our living style guide. I won’t bore you with what it can or cannot do yet again, however one of the important things it does is that we can build a static version of it. As such, when you commit your code (or merge to master or finish your sprint, whatever your process is), your build pipeline can run a simple npm script to generate a static version of Storybook. Therefore, you can then automatically deploy that to a host of your choice and let anyone see what the current state of your component library is. Since all this is automated, it is easy to end up with a bunch of builds for your UI library hosted together. So we may end-up with a folder structure that perhaps looks like this:

So now we can navigate to our different storybook folders and see what each different version looks like, say http://styleguides/0.2.5/ for version 0.2.5. However, there is no way to actually do that from within Storybook. To solve this, we created the versions add-on. What this does is that it adds a new panel showing you the various versions available. For the time being, the way the plugin works is that it expects to find a JSON file in the root of the host, giving info about what versions are installed and what the path pattern is (which is a regex, which is black magic).

See the documentation for more information on how to set it up.

With it all setup then, the add-on is installed and the config available. Here is what it looks like. In the example below we have a button component with the style changing between different versions (we are using the info add-on to add the documentation around the component).

Nice and simple then, and we can now travel back and forth in versions, seeing how a component evolved. Add the ability to comment with blabbr and you now have a living style guide, showing you all the different versions of your components and all the discussions around them.

Additionally, there is a “dev” checkbox, which shows a “local dev” button. This is handy as when you are running your Storybook locally as a developer, you will want to see what the code you are writing does. However, you can still navigate to the other versions, living on another host, as long as your config is valid. But then, once you go to the official version, how do you go back to your local dev version? Just enable the dev mode and the flag travels across the versions (as URL params, like all other Storybook options) and you can go back & forth.

Simple. Hope it helps. :-)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store