Using with ViewComponent

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.

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:

• default_preview_layout
• preview_controller
• preview_paths
• view_component_path

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.