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 the Ruby on Rails framework, but not have to build our UIs in a JavaScript framework like React? (I love React, don't get me wrong).
As it turns out, I'm not the first to ask this question.
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 Storybook for Server 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. Joel Hawksley's talk, ViewComponents In The Real World, at RailsConf 2021, was my favorite, by far.
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 are currently working on an application that already makes 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 now, and unless we did, it appeared we were out of luck in our hopes of using Storybook.
But then I had an 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 view_component_storybook 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.
If you're a Rails developer with a passion for component driven UI architecture, you should give it a try.
https://github.com/danieldpence/storybook_rails
Open source software really is 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.