Upgrade to view_component 3 and lookbook 2 (#60)

* Bump view_component from 2.63 to 3.6.0

* Refactor components/tests for v3

* Bump lookbook from 1.5.5 to 2.1.1

Gemfile

@@ -74,6 +74,6 @@ group :test do
 end
 
 gem "honeybadger"
-gem "lookbook", "~> 1.5.5"
+gem "lookbook"
 gem "standard", group: [:development, :test]
-gem "view_component", "~> 2.63"
+gem "view_component"

Gemfile.lock

@@ -66,7 +66,7 @@ GEM
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-    addressable (2.8.4)
+    addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
     base64 (0.1.1)
@@ -86,14 +86,13 @@ GEM
       xpath (~> 3.2)
     concurrent-ruby (1.2.2)
     crass (1.0.6)
-    css_parser (1.14.0)
+    css_parser (1.16.0)
       addressable
     date (3.3.3)
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
     erubi (1.12.0)
-    ffi (1.15.5)
     globalid (1.1.0)
       activesupport (>= 5.0)
     honeybadger (5.2.1)
@@ -113,23 +112,19 @@ GEM
     json (2.6.3)
     language_server-protocol (3.17.0.3)
     lint_roller (1.1.0)
-    listen (3.8.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.21.3)
+    loofah (2.21.4)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    lookbook (1.5.5)
-      actioncable
+    lookbook (2.1.1)
       activemodel
       css_parser
       htmlbeautifier (~> 1.3)
       htmlentities (~> 4.3.4)
-      listen (~> 3.0)
+      marcel (~> 1.0)
       railties (>= 5.0)
       redcarpet (~> 3.5)
       rouge (>= 3.26, < 5.0)
-      view_component (> 2.0, < 4)
+      view_component (>= 2.0)
       yard (~> 0.9.25)
       zeitwerk (~> 2.5)
     mail (2.8.1)
@@ -199,16 +194,13 @@ GEM
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.0.6)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
     redcarpet (3.6.0)
     redis (4.8.0)
     regexp_parser (2.8.1)
     reline (0.3.6)
       io-console (~> 0.5)
     rexml (3.2.6)
-    rouge (4.1.0)
+    rouge (4.1.3)
     rubocop (1.56.4)
       base64 (~> 0.1.1)
       json (~> 2.3)
@@ -266,7 +258,7 @@ GEM
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.5.0)
-    view_component (2.82.0)
+    view_component (3.6.0)
       activesupport (>= 5.2.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
@@ -276,7 +268,7 @@ GEM
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
     websocket (1.2.10)
-    websocket-driver (0.7.5)
+    websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     xpath (3.2.0)
@@ -297,7 +289,7 @@ DEPENDENCIES
   honeybadger
   importmap-rails
   jbuilder
-  lookbook (~> 1.5.5)
+  lookbook
   pg (~> 1.1)
   puma (~> 5.6)
   rails (~> 7.0)
@@ -309,7 +301,7 @@ DEPENDENCIES
   tailwindcss-rails
   turbo-rails
   tzinfo-data
-  view_component (~> 2.63)
+  view_component
   web-console
 
 RUBY VERSION

app/components/flash_component.html.erb

@@ -3,7 +3,7 @@
     <div class="relative flex items-center">
       <div class="flex-shrink-0">
         <div class="text-xl text-white">
-          <%= icon %>
+          <%= render IconComponent.new(name: @icon_name) %>
         </div>
       </div>
 
@@ -14,4 +14,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

app/components/flash_component.rb

@@ -1,9 +1,7 @@
 # frozen_string_literal: true
 
 class FlashComponent < ViewComponent::Base
-  renders_one :icon, ->(scheme:, name:) do
-    IconComponent.new(scheme: :solid, name: @icon_name)
-  end
+  renders_one :icon, IconComponent
 
   DEFAULT_SCHEME = :notice
   SCHEME_MAPPINGS = {
@@ -22,10 +20,6 @@ def initialize(scheme: DEFAULT_SCHEME)
     @icon_name = ICON_MAPPINGS[scheme]
   end
 
-  def before_render
-    icon(scheme: "", name: "") unless icon
-  end
-
   def render?
     content.present?
   end

app/views/layouts/application.html.erb

@@ -22,7 +22,7 @@
     <% end %>
 
     <%= render NavbarComponent.new do |c| %>
-      <% c.link(name: "Lookbook", url: lookbook_path, target: :_blank) %>
+      <% c.with_link(name: "Lookbook", url: lookbook_path, target: :_blank) %>
     <% end %>
 
     <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">

test/components/card_component_test.rb

@@ -13,16 +13,16 @@ class CardComponentTest < ViewComponent::TestCase
 
   test "renders card with header" do
     render_inline CardComponent.new do |c|
-      c.header "Has a header"
+      c.with_header { "Has a header" }
     end
 
     assert_selector "h3", class: %w[text-lg leading-6 font-medium text-gray-900]
   end
 
   test "renders card with header and footer" do
     render_inline CardComponent.new do |c|
-      c.header "Has a header"
-      c.footer "Has a footer"
+      c.with_header { "Has a header" }
+      c.with_footer { "Has a footer" }
     end
 
     assert_selector "h3", class: %w[text-lg leading-6 font-medium text-gray-900]
@@ -31,7 +31,7 @@ class CardComponentTest < ViewComponent::TestCase
 
   test "renders card with footer" do
     render_inline CardComponent.new do |c|
-      c.footer "Has a footer"
+      c.with_footer { "Has a footer" }
     end
 
     assert_selector "div", class: %w[px-4 py-4 sm:px-6]

test/components/previews/navbar_component_preview.rb

@@ -6,8 +6,8 @@ class NavbarComponentPreview < ViewComponent::Preview
   # @label Default
   def default
     render NavbarComponent.new do |c|
-      c.link(name: "Link", url: "")
-      c.link(name: "Link (new window)", url: "", target: :_blank)
+      c.with_link(name: "Link", url: "")
+      c.with_link(name: "Link (new window)", url: "", target: :_blank)
     end
   end
 end