Lookbook - a work-in-progress ViewComponent development UI

[allmarkedup]

Hey all. I've been working on a little side project and thought I would share it with the community to see if anyone has any thoughts or feedback for me.

It's called Lookbook, the repo is here (with a demo app here) and it looks like this:

It's a browser-based UI (packaged as a Rails engine) for navigating, inspecting and rendering ViewComponent previews. It is intended to be dropped into projects to give a quick way to get up and running with developing components outside of the main app.

I originally built a rough version of it for the CoverageBook app (where I work) and I use that version everyday so I'm hoping this cleaned-up version will be useful for others too.

It's super early days (and I'm not a Rails developer!) so there is probably a lot that is broken in there but if anyone fancies giving it a try I'd love to get some feedback on it. I'm still getting my head around the best ways to do things in Rails.

It will likely only work with pretty 'standard' Rails/ViewComponent projects at the moment but I'm working to ensure that it will eventually handle more complex setups.

I've got lots of ideas of where I would like to take it in the future but for now I'd just like to get it working reliably across a wide range of projects.

Hope it's of interest to some of you :-)

[joelhawksley]

@allmarkedup very cool! I assume you've seen @jonspalmer's work on ViewComponent Storybook?

Your project makes me wonder if we might eventually build something like this into the Previews functionality.

What do you think @juanmanuelramallo?

[joelhawksley]

I ran into some issues with viewing source code turned on for ViewComponent

@afomera I'd love to hear more about this 😄

[afomera]

Ah sorry @joelhawksley the VC source code preview stuff worked alright when I tried it, minus sometimes it not showing the right code for the preview as I was updating it (code-reloading is hard amirite, restarting always fixed the issue there) I was referring to issues when I tried Lookbook 😅. Sorry for the confusion!

@allmarkedup will do, I plan on spending some time soon on this again, most of our team really likes what we see so far for it, so you may end up seeing more of me soon 😀.

[edwinthinks]

I do like the direction as well with Lookbook! Going to share it with my team soon to see if we can utilize it.

[Spone]

@allmarkedup I've been using Lookbook on a couple projects, and I'm very happy with it! Please let me know if I can do anything to help!

Also, we plan on using Lookbook in view_component-form to provide previews of the ViewComponents included in the gem :)

[allmarkedup]

@Spone Ah that's great, really glad it's working out for you, and appreciate you letting me know. I'm currently working on some updates including a small screen layout (to help with testing components on mobile) and a few other UI improvements. Ideally I'd like a few people to test them out before releasing them so if you are interested I can let you know when they are ready to play with?

And very cool you are thinking of using it for view_component-form - looks super interesting, I've had a few attempts at trying to figure out a good way to do form components but not really succeeded yet so will definitely keep an eye on it.

[joelhawksley]

Lookbook has long been a recommended library to use with ViewComponent: https://viewcomponent.org/guide/previews.html#previews