Supercharging Previews

[jonspalmer]

Storybook.js has taken off as a powerful and interactive way to document the React components in a project. The ViewComponent Previews could be enhanced to provide much the same power and allow teams to create automated "Design System" playgrounds for their server side rendered components.

Key Features to add that would make a big difference:

• Load components in and iframe - This allows someone to browse the library of components without a bunch of back and forth in the browser.
• Knobs - being able to dynamically alter the parameters passed to the component and seeing it live is a big win.
• Docs - I assume we could leverage RDoc annotations or the like.

There are some other bells and whistles in Storybook Addons that we should consider. Viewport stands out most to me - others are much more JS focused.

[joelhawksley]

@bostanio these are all excellent suggestions. I almost wonder if we should consider similar improvements for Mailer previews as well, as that's what we modeled the existing behavior after.

[jonspalmer]

Agreed. The Mailer Previews a pretty bare bones IMO.

[jonspalmer]

I have a theory that it might be possible to leverage Storybook directly. They've recently added support for "standalone" mode where the list of stories is loaded from an external source. Perhaps we can figure out the right dsl to provide AV:Components to Storybook?

https://github.com/storybookjs/storybook/tree/next/examples/standalone-preview

[shilman]

@bostanio Standalone mode was the first step towards supporting ANY backend, with Rails in mind as the most active server-side environment. We'd love to work with somebody from the Rails community to make Storybook for Rails a reality.

As a little background:

• Standalone mode was released in Storybook 5.2 and community members have been making use of it in other server contexts, e.g. Parcel, es-dev-server.
• There has been successful experimentation by @daKmoR of Open Web Components to statically bundle the UI so that everything can be served from an arbitrary server. This hasn't made its way back into Storybook yet, but is an active project.

Storybook's 6.0 ship window closes in two months (end of Feb), so right now would be the best time to get in any breaking changes. It's also likely that we could integrate without breaking changes in a 6.x release.

[tmeasday]

Hey, I've spent some cycles thinking about how "Storybook for Rails" could work in the past, and would be keen to get a POC going. A while back I posted some thoughts in the #server channel of Storybook's Discord, which @bostanio seems to have found.

Can continue the conversation there for the next little bit perhaps.

[jonspalmer]

Proof of concept of using a rails backend as the preview url for Storybook running in standalone more: https://github.com/bostanio/avc_storybook

There are a few of things we could do in AV:C to simplify that approach as well as provide meta data to support Storybook knobs

[jonspalmer]

For anyone following this I just release the first version of ViewComponent::Storybook that provides a bridge between ViewComponents previewed in Storybook: https://github.com/jonspalmer/view_component_storybook

[jaredcwhite]

@jonspalmer Oooo, I can't wait to try this out.

[topherfangio]

Danget! I spent probably 20 hours building out my own version which mimics StorybookJS before I found this!

I'll definitely be giving this a try on my next guild day.

Super excited! Thanks to everyone working on this!

[halo]

I spent probably 20 hours building out my own version which mimics StorybookJS before I found this!

And I just spent only 30 minutes to get it all working from scratch. I'm pretty happy with it! 🚀