Show components from a gem

[sandrods]

Hi folks,

In our company, we packed all our basic components in a gem.
It would be very nice if we could add lookbook to our apps and it could serve the components from the gem while in dev.
I was not able to achieve that, unless the Previews are in the app itself, which deceives the point.

Is there a way to make it happen?

[allmarkedup]

Hey @sandrods, sorry for the slow reply.

This should definitely be possible - like anything though there are a number of ways to achieve it depending on exactly what sort of setup you are looking for. There are a two main possibilities:

1) Bundle a stripped down app running Lookbook in the gem source code repo itself

• Lookbook can be run while working on the gem components but is not included in the actual published gem code.
• The Lookbook only includes previews of the components within the gem

The Polaris ViewComponents repo is a great example of this option in practice and is one I've implemented a number of times to good effect.

2) Install Lookbook in the main app

• Pulls in components from the gem as well as from the app itself
• No standalone Lookbook of just the 'basic' components from the gem
• Each app needs the Lookbook configured individually

Do you have an idea of which approach you are looking to take? Or is there a different type of setup you were looking for? Often it's a case of getting the autoloading of components/previews correctly set up but it should (theoretically!) be possible to get most setups working.

[sandrods]

Hello @allmarkedup, thanks for the reply. Wonderful work with lookbook!

I was leaning towards option (2). My problem was to inform lookbook to look for the previews in the gem. I know that must be just a question of using the right configuration, but I could not make it work.

If I copy a preview into the app, it correctly displays the component from the gem, but I need a way to read them directly from the gem.

I hope that's an easy config that I'm missing...

[allmarkedup]

Hello @allmarkedup, thanks for the reply. Wonderful work with lookbook!

Thank you @sandrods - I very much appreciate the kind words 😊

So it should definitely be possible to set something up along the lines of option 2. It's a little tricky to say exactly what the steps will be because it is obviously quite setup-dependent, but something along the following lines should work:

# config/application.rb

components_gem_dir = Gem::Specification.find_by_name("component_gem_name_here").gem_dir

config.view_component.preview_paths << "#{components_gem_dir}/path/to/previews"

That may be enough as it is, but if it isn't working try explicitly autoloading the previews directory:

config.autoload_paths << "#{components_gem_dir}/path/to/previews"

That sort of setup has worked well for me in the past, but it's always possible that it might not be that simple if your gem implements any autoloading itself as this can sometimes cause conflicts. But I reckon we should be able to figure out - let me know if you have any luck with the above.

FWIW, Lookbook will attempt to merge the app previews and the gem previews into one set for display in the UI. Depending on the way your project is structured/namespaced this can sometimes result in a slightly confusing preview navigation tree - hopefully it works out okay for you though :-)

[sandrods]

Thanks for tip. Worked like a charm!

To note: explicitly autoloading the previews directory was not necessary.

[allmarkedup]

Great! Glad you got it working 😊