Introducing storybook_rails

Recently, I jumped into the world of releasing an open source software project. Meet storybook_rails, a Ruby DSL for developing UI components in Storybook.js that works with native ActionView partials in Ruby on Rails.

I’m a huge fan of Storybook. I have used it on many projects, and even given internal tech talks on the subject. I think it’s really an amazing tool for helping UI, UX and design teams create beautiful user interfaces in a component-driven way.

I’m also a huge fan of Ruby on Rails. It was the first programming framework I learned and I’ve worked on many, many Rails applications since I became a software engineer. But every project that I’ve worked on with Storybook has been React based. Storybook itself is a React app, in fact. To be honest, until recently, I didn’t think it was possible to use Storybook for anything other than React or JavaScript-based frameworks.

So what if we could enjoy the benefits of developing UI components in isolation in Storybook, within Rails, but not have to build our UIs in a JavaScript framework?

As it turns out, I’m not the first to ask this question.

Standing on other people’s work

Storybook’s v6 release introduced Storybook for Server, which enabled rendering of raw HTML snippets in Storybook using any backend server. Jon Palmer’s view_component_storybook then makes use of it by making it possible to render ViewComponents in Storybook, which is awesome. I think ViewComponent is an amazing library and is really driving the component-driven architecture approach forward in the Rails community.

But… BUT… some people don’t or can’t use ViewComponent, for a variety of reasons. Maybe it’s not feasible to re-write their app’s UI with ViewComponents. Maybe they don’t want to add the additional dependency to the Rails stack. Maybe they’re new to Rails and just want to use standard Rails partials in a component-driven way.

In my case, my team and I were working on an application that already made generous use of standard Rails partials, but we really wanted to make use of Storybook. For us, it didn’t make sense to adopt ViewComponent right then, and unless we did, it appeared we were out of luck.

The idea

What if view_component_storybook could be modified to allow rendering of generic Rails partials, instead of requiring the use of ViewComponents, while still allowing developers to write Stories via the nice Story DSL included in the original gem?

So, over the course of a few days, I forked the original gem, adapted it to remove the ViewComponent dependency, and instead made it possible to render standard Rails partials in Storybook.

And it works. It totally works.

Our team has been using it internally and it seems to be working really well so far. The DSL for writing stories in Ruby feels great and is a zillion times better than manually writing Stories in JSON CSF (yes, we actually did this to prove this would work). It supports nearly everything you would expect — controls, parameters, custom story layouts, etc.

Open source software really is an amazing thing. It’s given me so much. It changed my life, to be completely honest, opened doors I never thought possible or even saw coming. I’m thankful for the opportunities I’ve had to make an impact and I hope this gem helps others make an even greater impact.