ViewComponent for reusable, testable view components

# Component with helpers
class UserAvatarComponent < ViewComponent::Base
  def initialize(user:, size: 'medium')
    @user = user
    @size = size
  end

  def call
    image_tag avatar_url, class: "avatar avatar-#{@size}", alt: @user.name
  end

  private

  def avatar_url
    @user.avatar_url.presence || default_avatar_url
  end

  def default_avatar_url
    helpers.asset_path('default-avatar.png')
  end
end

# Component with collections
class PostListComponent < ViewComponent::Base
  def initialize(posts:)
    @posts = posts
  end

  def render?
    @posts.any?
  end
end

# app/components/post_list_component.html.erb
<div class="post-list">
  <%= render(PostComponent.with_collection(@posts)) %>
</div>

# Individual post component
class PostComponent < ViewComponent::Base
  with_collection_parameter :post

  def initialize(post:)
    @post = post
  end
end

# Component previews for development
# test/components/previews/button_component_preview.rb
class ButtonComponentPreview < ViewComponent::Preview
  def default
    render ButtonComponent.new do
      "Default Button"
    end
  end

  def primary
    render ButtonComponent.new(variant: 'primary', size: 'large') do
      "Primary Button"
    end
  end

  def all_variants
    render_with_template
  end
end

# test/components/previews/button_component_preview/all_variants.html.erb
<% ButtonComponent::VARIANTS.each do |variant| %>
  <div style="margin: 10px;">
    <%= render ButtonComponent.new(variant: variant) do %>
      <%= variant.titleize %> Button
    <% end %>
  </div>
<% end %>

# Access previews at /rails/view_components

# Testing components
require 'test_helper'

class ButtonComponentTest < ViewComponent::TestCase
  def test_renders_button
    render_inline(ButtonComponent.new) { "Click me" }

    assert_selector "button.btn", text: "Click me"
  end

  def test_applies_variant_class
    render_inline(ButtonComponent.new(variant: 'primary')) { "Submit" }

    assert_selector "button.btn-primary"
  end

  def test_applies_size_class
    render_inline(ButtonComponent.new(size: 'large')) { "Big Button" }

    assert_selector "button.btn-large"
  end
end

# RSpec testing
RSpec.describe CardComponent, type: :component do
  it "renders card with header and footer" do
    render_inline(CardComponent.new) do |card|
      card.with_header { "Title" }
      card.with_footer { "Footer" }
      "Content"
    end

    expect(page).to have_css('.card-header', text: 'Title')
    expect(page).to have_css('.card-body', text: 'Content')
    expect(page).to have_css('.card-footer', text: 'Footer')
  end
end

# Polymorphic components
class AlertComponent < ViewComponent::Base
  TYPES = {
    success: { icon: '✓', color: 'green' },
    error: { icon: '✗', color: 'red' },
    warning: { icon: '⚠', color: 'yellow' },
    info: { icon: 'ℹ', color: 'blue' }
  }.freeze

  def initialize(type: :info, dismissible: false)
    @type = type
    @dismissible = dismissible
  end

  def icon
    TYPES[@type][:icon]
  end

  def color_class
    "alert-#{TYPES[@type][:color]}"
  end
end