Improve usage with Lookbook

[danielnc]

When using view_component-contrib with Lookbook

All components preview source points to the default preview.html.erb template

<div class="<%= container_class %>">
  <%- if component -%>
    <%= render component %>
  <%- else -%>
  Failed to infer a component from the preview: <%= error %>
  <%- end -%>
</div>

Rendering source preview useless and making it hard to document usage of specific components

Is there any documentation no how to improve the usage, source or even notes when using view_component-contrib directly with lookbook?

[palkan]

That's a good question. We're working on something Lookbook-related right now 🙂

@baygeldin Do you remember whether we had a solution to this problem?

[baygeldin]

Most of our components had a custom preview.html.erb template (or several example-specific templates) that rendered the component directly. So, the source tab usually looked something like this:

# app/views/components/example/preview.html.erb
<%= component "example", foo: bar do %>
  # Contents/children if needed
<% end %>

Note that here we use the component helper defined in ApplicationHelper (which is also included in ApplicationViewComponent):

# app/helpers/application_helper.rb
def component(name, *args, **kwargs, &block)
  component = name.to_s.camelize.constantize::Component
  render(component.new(*args, **kwargs), &block)
end

And in the ::Preview classes all the methods looked like this:

# app/views/components/example/preview.rb
def default
  render_with(bar: "xyz")
end

This might be a bit of boilerplate to create a preview template for each component, but I think it makes things more straightforward. And frontend devs, for one, were pretty happy that the components were rendered in the same way everywhere (in views, in components, in previews, and the source tab in lookbook looked familiar to them).

[danielnc]

That definitely helps, thanks @baygeldin

@palkan cant wait to see what you guys come-up related to Lookbook :)

[neanias]

Hi, there, hoping to elaborate on this. I tried using the example here with <%= component "example", foo: bar %> equivalent. When I used this, Lookbook complained that bar wasn't defined, even when passing it in from default with a render_with call as demonstrated here. Should bar be a symbol or should it refer to a method in the Preview class?

[baygeldin]

Should bar be a symbol or should it refer to a method in the Preview class?

No, you should be able to use bar as is as long as you pass it to render_with method as I described in the previous comment. However, it may be that something has changed in the recent versions of Lookbook or/and ViewComponent which breaks this approach approach. If you want to rule out this possibility you can try it with older versions of the libraries.