Previewing ViewComponents effectively

[joshmfrankel]

Previewing

Rendering nested components

You can utilize the block parameter to prefix render

    render TableComponent.new(class: classes, fixed: fixed, scroll: scroll, data: data) do |table|
      table.with_header do
        table.render TableRowComponent.new do
          [
            table.render(TableCellComponent.new(header: true).with_content("Name")),
            table.render(TableCellComponent.new(header: true).with_content("Role")),
            table.render(TableCellComponent.new(header: true).with_content("Email"))
          ].join("").html_safe
        end
      end

OR, you can utilize render_in

    render TableComponent.new do |component|
      component.with_header_cell do
        render SortableComponent.new(
          column: "Name",
          url_override: "/components/table" # Only needed for styleguide subdomain here
        )
      end
      component.with_header_cell(text: "Header 2 (hide on mobile)", hide_on_mobile: true)
      component.with_header_cell

      component.with_row do
        [
          TableCellComponent.new(text: "Cell 1").render_in(component),
          TableCellComponent.new(text: "Cell 2 (hide on mobile)").render_in(component),
          TableCellComponent.new(text: "Cell 3").render_in(component)
        ].join("").html_safe
      end

      component.footer do
        "This is the footer"
      end
    end

Working with form parameters

class MyComponentPreview < ViewComponent::Preview
  def default
    view = ActionView::Base.empty
    object = SomeModel.first
    object_name = :some_model
    form = ActionView::Helpers::FormBuilder.new(object_name, object, view, {})
    render MyComponent(form: form)
  end
end

See: https://github.com/ViewComponent/view_component/issues/908#issuecomment-1303868046

Working with ViewComponents::Form Previews are slightly different here

# In preview
  def with_liquid
    object = Model.new
    object_name = :model_name
    form_builder = form_builder

    # form.text_field
    render Form::TextFieldComponent.new(form_builder, object_name, :title)
  end

# In config somewhere
# spec/components/previews/form/preview.rb

require "view_component/form/test_helpers"

# @hidden
class Form::Preview < ViewComponent::Preview
  include ViewComponent::Form::TestHelpers

  protected

  def form_builder(object_name = nil, object = nil, options = {})
    My::FormBuilder.new(object_name, object, template, options)
  end

  def template
    lookup_context = ActionView::LookupContext.new(ActionController::Base.view_paths)

    ActionView::Base.new(lookup_context, {}, ActionController::Base.new)
  end
end

See: https://github.com/pantographe/view_component-form/issues/52#issuecomment-1009765829