Integrating Lookbook into a Design System library

[bjufre]

Hello,

I'm contacting because we're in the process of creating a design system with ViewComponents, and because of logistics and teams structure, we decided to have the design system into its own repo. Now, we would like to have Lookbook integrated with the project from the start, but we're wondering what's the best way to do that structure and code wise so that's easy to maintain and deploy to production.

Thank you very much!!!

P.S: we're using Rails as our web framework, just in case that helps give some context.

[allmarkedup]

Hey @bjufre I'm so sorry for the ridiculously slow reply! I totally missed your message here somehow.

Have you figured out a strategy for this already? There are a number of different approaches you can take depending on what you are trying to achieve exactly. If you are still working on it just let me know and I'll try to outline a few options for you.

Sorry again to take so long to reply!

[bjufre]

Hello, yes I'm more than interested, I started to do this with a rails plugin new (not mountable, but I can still change it if there's a better way to do it. Any ideas or tips?

[bjufre]

Also it would be super helpful to have some kind of guide as to how one can include custom assets also needed by the design system/component library 💪 🙏

[bjufre]

@allmarkedup Related to the subject I wanted to ask if there's some way that I could also "exclude a component/file" from being used within Lookbook. I'm asking because I have a "base class" for some configuration options that I need, but Lookbook is trying to load it, and I get the following error:

[allmarkedup]

Hey @bjufre, I'm really sorry that I've been so slow at replying - life is a bit crazy at the moment so I haven't had much time to spend on Lookbook over the last few weeks.

I've just created an example of a ViewComponent library packaged as a standalone Rails engine gem (with Lookbook previews) here: https://github.com/allmarkedup/example-component-library-gem

And there is an example of an app that pulls in the components from that library and uses them in its views here: https://github.com/allmarkedup/example-app-with-component-library-engine

These are both very basic at the moment (no asset handling yet) and don't have much documentation but hopefully they are of some help to you in figuring this out. I'll try to add more docs/comments and some more complete component examples when I have a chance.

Related to the subject I wanted to ask if there's some way that I could also "exclude a component/file" from being used within Lookbook.

That is a bit odd - Lookbook shouldn't be trying to load any component classes directly... can you provide a quick overview of how you are currently organising your component and preview files? And maybe the contents of a preview class that is triggering this error?

[Spone]

A quick note about asset handling: you have two main ways of approaching this part.

1. Bundling assets in the library and including them in each release. You can then distribute the library as a gem and use Rails' asset pipeline to load the assets in your app, or release both a gem (for components) and a NPM package (for assets).

2. Including individual assets in the library and bundling them from the app. In this case, I think you have to release both a gem and a NPM package (as you'll need to access the individual assets in node_modules). The main advantage is that you can bundle only some components if you don't use them all.

I'd recommend considering both approaches and figuring out what works best for you, depending on how you handle your assets in the app (there are plenty of ways to do it these days: asset pipeline, webpacker, js/cssbundling, esbuild, propshaft…)

[bjufre]

@allmarkedup @Spone thank you very much for this detailed response, I think this will give me everything that we need for this project!! 🙏