🧹Components: Light syntactical sugar for finding Components

app/components/component_helpers.rb

@@ -0,0 +1,10 @@
+module ComponentHelpers
+  # Finds components by name and instantiates them to prepare for a render call
+  def component(name, *args, **kwargs, &block)
+    Object.const_get("#{name.to_s.titleize}Component").new(*args, **kwargs, &block)
+  end
+
+  def self.included(klass)
+    klass.helper_method(:component) if klass.respond_to?(:helper_method)
+  end
+end

app/controllers/application_controller.rb

@@ -15,6 +15,8 @@ class ApplicationController < ActionController::Base
   prepend_view_path "app/utilities"
   prepend_view_path "app/furniture"
 
+  include ComponentHelpers
+
   protect_from_forgery with: :exception, unless: -> { api_request? }
 
   # Referenced in application layout to display page title

app/furniture/marketplace/carts/_cart.html.erb

@@ -12,13 +12,13 @@
       <div class="sm:w-1/2 w-full flex items-center justify-between text-sm">
         <span>Delivering to:</span>
         <%= cart.delivery_address %>
-        <%= render ButtonComponent.new(href: cart.location.concat([params: { cart: { delivery_address: nil } }]), label: t('marketplace.delivery_address.edit'), title: nil, classes: "shrink font-light text-xs m-0 bg-primary-200 underline") %>
+        <%= render component(:button, href: cart.location.concat([params: { cart: { delivery_address: nil } }]), label: t('marketplace.delivery_address.edit'), title: nil, classes: "shrink font-light text-xs m-0 bg-primary-200 underline") %>
       </div>
 
       <div class="sm:w-1/2 w-full flex items-center justify-between text-sm">
         <span>Contact Phone Number:</span>
         <%= cart.contact_phone_number %>
-        <%= render ButtonComponent.new(href: cart.location.concat([params: { cart: { contact_phone_number: nil } }]), label: t('marketplace.contact_phone_number.edit'), title: nil, classes: "shrink font-light text-xs m-0 bg-primary-200 underline") %>
+        <%= render component(:button, href: cart.location.concat([params: { cart: { contact_phone_number: nil } }]), label: t('marketplace.contact_phone_number.edit'), title: nil, classes: "shrink font-light text-xs m-0 bg-primary-200 underline") %>
       </div>
     </div>
 

app/furniture/marketplace/products/_product.html.erb

@@ -19,6 +19,6 @@
   </td>
   <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
     <%= render "buttons/edit", label: "#{t('icons.pencil')}",  title: t('.edit'), href: product.location(:edit), method: :get %>
-    <%= render ButtonComponent.new(label: t('icons.remove'), title: t('.remove'), href: product.location, method: :delete) %>
+    <%= render component(:button, label: t('icons.remove'), title: t('.remove'), href: product.location, method: :delete) %>
   </td>
 </tr>

app/views/furnitures/_furniture.html.erb

@@ -5,19 +5,17 @@
         <%= furniture.title %>
       </h4>
       <%- if furniture.configurable? %>
-        <%= render ButtonComponent.new(
-                      label: t('icons.edit'),
-                      href: [:edit, furniture.room.space, furniture.room, furniture],
-                      method: :get,
-                      title: t('.edit_title', name: furniture.furniture.model_name.human.titleize)) %>
+        <%= render component(:button, label: t('icons.edit'),
+                                      href: [:edit, furniture.room.space, furniture.room, furniture],
+                                      method: :get,
+                                      title: t('.edit_title', name: furniture.furniture.model_name.human.titleize)) %>
       <%- end %>
 
-      <%= render ButtonComponent.new(
-                    label: t('icons.remove'),
-                    href: [furniture.room.space, furniture.room, furniture],
-                    title: t('.remove_title', name: furniture.furniture.model_name.human.titleize),
-                    method: :delete,
-                    confirm: t('.confirm_destroy')) %>
+      <%= render component(:button, label: t('icons.remove'),
+                                    href: [furniture.room.space, furniture.room, furniture],
+                                    title: t('.remove_title', name: furniture.furniture.model_name.human.titleize),
+                                    method: :delete,
+                                    confirm: t('.confirm_destroy')) %>
     </header>
     <%- if local_assigns[:include_form] %>
       <%= render partial: 'furnitures/form', locals: { furniture: furniture } %>

app/views/invitations/_invitation.html.erb

@@ -27,11 +27,10 @@
   </td>
   <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
     <%- if !invitation.revoked? && policy(invitation).destroy?  %>
-      <%= render ButtonComponent.new(
-                   label: t('icons.remove'),
-                   href: [space, invitation],
-                   title: t('invitation.destroy'),
-                   method: :delete
+      <%= render component(:button, label: t('icons.remove'),
+                                    href: [space, invitation],
+                                    title: t('invitation.destroy'),
+                                    method: :delete)
       ) %>
     <%- end %>
   </td>

app/views/memberships/_membership.html.erb

@@ -33,12 +33,10 @@
   </td>
   <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
     <%- if policy(membership).destroy?  %>
-      <%= render ButtonComponent.new(
-                   label: t('icons.remove'),
-                   href: [space, membership],
-                   title: t('memberships.delete'),
-                   method: :delete
-      ) %>
+      <%= render component(:button, label: t('icons.remove'),
+                                    href: [space, membership],
+                                    title: t('memberships.delete'),
+                                    method: :delete) %>
     <%- end %>
   </td>
 </tr>

app/views/spaces/_room_card.html.erb

@@ -1,4 +1,4 @@
-<%= render CardComponent.new(data: { access_level: room.access_level, slug: room.slug, model: "room", id: room.id }) do %>
+<%= render component(:card, data: { access_level: room.access_level, slug: room.slug, model: "room", id: room.id }) do %>
   <header class="w-full items-center flex">
     <h3 class="text-neutral-900 text-sm leading-5 font-medium truncate pl-8 mr-4">
       <%= room.name %>

app/views/spaces/_space.html.erb

@@ -1,4 +1,4 @@
-<%= render CardComponent.new do %>
+<%= render component(:card) do %>
   <%= link_to space, class: "no-underline" do %>
     <h2 class="text-center p-2"><%= space.name %></h2>
   <%- end %>

spec/components/previews/application_preview.rb

@@ -0,0 +1,3 @@
+class ApplicationPreview < ViewComponent::Preview
+  include ComponentHelpers
+end

spec/components/previews/button_component_preview.rb

@@ -1,5 +1,5 @@
-class ButtonComponentPreview < ViewComponent::Preview
+class ButtonComponentPreview < ApplicationPreview
   def test
-    render(ButtonComponent.new(label: "Awooo!", title: "gaaa!", href: "#"))
+    render(component(:button, label: "Awooo!", title: "gaaa!", href: "#"))
   end
 end

spec/components/previews/card_component_preview.rb

@@ -1,6 +1,6 @@
-class CardComponentPreview < ViewComponent::Preview
+class CardComponentPreview < ApplicationPreview
   def card
-    render(CardComponent.new(data: {fancy: :pants}, classes: "m-2")) do
+    render(component(:card, data: {fancy: :pants}, classes: "m-2")) do
       <<~HTML.chomp.html_safe # rubocop:disable Rails/OutputSafety
         <h3 class='p-2'>Hey There</h3>