Overview
ViewComponent is “a framework for creating reusable, testable & encapsulated view components, built to integrate seamlessly with Ruby on Rails”.
Lookbook was originally created to work with ViewComponent and is completely compatible with its preview system.
Any ViewComponent previews you create should automatically be available in Lookbook with no additional steps required.
See the ViewComponent docs for setup and usage instructions: https://viewcomponent.org/
Configuration
Lookbook will reference ViewComponent’s configuration options where needed so you don’t need to duplicate settings. Only Lookbook-specific configuration options will be need to set directly.
The following ViewComponent settings will be respected by Lookbook:
Note that Lookbook changes the default value for the view_component.show_previews config option to true.
If you are not using Lookbook in production then ensure that the Lookbook gem is only included in the development group in the Gemfile to prevent accidentally publicly exposing ViewComponent preview URLs.
Preview classes
ViewComponent preview classes extend ViewComponent::Preview:
# test/components/previews/example_component_preview.rb
class ExampleComponentPreview < ViewComponent::Preview
def with_default_title
render(ExampleComponent.new(title: "Example component default"))
end
end
However, Lookbook preview classes extend Lookbook::Preview instead.
But don’t worry! You don’t need to change or update your ViewComponent preview classes to use them in Lookbook. The two are compatible with each other.
You should continue to use ViewComponent::Preview for all ViewComponent previews and only use Lookbook::Preview for any additional view partial or Phlex previews that you might have.