Introduce ViewComponent

https://viewcomponent.org

Gemfile

@@ -5,6 +5,8 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 gem 'rails', '~> 7.0.2'
 # Use Puma as the app server
 gem 'puma', '~> 4.1'
+# View components
+gem "view_component"
 # Separate dependency since Rails 7.0
 gem 'sprockets-rails'
 # Allows custom JS build tasks to integrate with the asset pipeline

Gemfile.lock

@@ -282,6 +282,9 @@ GEM
       railties (>= 6.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
+    view_component (2.49.0)
+      activesupport (>= 5.0.0, < 8.0)
+      method_source (~> 1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -331,6 +334,10 @@ DEPENDENCIES
   stimulus-rails
   turbo-rails
   tzinfo-data
+  view_component
   warden
   web-console (>= 3.3.0)
   webmock
+
+BUNDLED WITH
+   2.3.7

app/components/header_compact_component.html.erb

@@ -1,7 +1,7 @@
 <header class="py-10">
   <div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
     <h1 class="text-3xl font-bold text-white text-center">
-      <%= page_title %>
+      <%= @title %>
     </h1>
   </div>
 </header>

app/components/header_compact_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class HeaderCompactComponent < ViewComponent::Base
+  def initialize(title:)
+    @title = title
+  end
+end

app/components/header_component.html.erb

@@ -1,7 +1,7 @@
 <header class="py-10">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
     <h1 class="text-3xl font-bold text-white">
-      <%= page_title %>
+      <%= @title %>
     </h1>
   </div>
 </header>

app/components/header_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class HeaderComponent < ViewComponent::Base
+  def initialize(title:)
+    @title = title
+  end
+end

app/components/main_compact_component.html.erb

@@ -1,5 +1,5 @@
 <main class="w-full max-w-xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
   <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
-    <%= yield %>
+    <%= content %>
   </div>
 </main>

app/components/main_compact_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class MainCompactComponent < ViewComponent::Base
+
+end

app/components/main_simple_component.html.erb

@@ -1,5 +1,5 @@
 <main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
   <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
-    <%= yield %>
+    <%= content %>
   </div>
 </main>

app/components/main_simple_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class MainSimpleComponent < ViewComponent::Base
+
+end

app/views/admin/dashboard/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Admin Panel" } %>
+<%= render HeaderComponent.new(title: "Admin Panel") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <p class="text-center">
     With great power comes great responsibility.
   </p>

app/views/admin/donations/edit.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <h2>Editing Donation</h2>
 
   <%= render 'form', donation: @donation, url: admin_donation_path(@donation) %>

app/views/admin/donations/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <% if @donations.any? %>
     <table class="w-full">
       <thead>

app/views/admin/donations/new.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <h2>New Donation</h2>
 
   <%= render 'form', donation: @donation, url: admin_donations_path %>

app/views/admin/donations/show.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <p id="notice"><%= notice %></p>
 
   <p>

app/views/admin/invitations/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Invitations" } %>
+<%= render HeaderComponent.new(title: "Invitations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <p>
       There are currently <strong><%= @invitations_unused_count %>

app/views/admin/ldap_users/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "LDAP Users: #{@ou}" } %>
+<%= render HeaderComponent.new(title: "LDAP Users: #{@ou}") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <h3 class="hidden">Domains</h3>
   <ul class="mb-10">
     <li class="inline-block">

app/views/dashboard/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Services" } %>
+<%= render HeaderComponent.new(title: "Services") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <p>
       Your Kosmos account and password currently give you access to these

app/views/devise/confirmations/new.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= render layout: "components/main_compact" do %>
+<%= render MainCompactComponent.new do %>
   <h2>Resend confirmation instructions</h2>
 
   <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>

app/views/devise/passwords/edit.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= render layout: "components/main_compact" do %>
+<%= render MainCompactComponent.new do %>
   <h2>Change your password</h2>
 
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>

app/views/devise/passwords/new.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= render layout: "components/main_compact" do %>
+<%= render MainCompactComponent.new do %>
   <h2>Forgot your password?</h2>
 
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>

app/views/devise/sessions/new.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= render layout: "components/main_compact" do %>
+<%= render MainCompactComponent.new do %>
   <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>

app/views/donations/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <p>
       Your financial contributions to the development and upkeep of Kosmos

app/views/invitations/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Invitations" } %>
+<%= render HeaderComponent.new(title: "Invitations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <% if @invitations_unused.any? %>
     <p>

app/views/security/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Account" } %>
+<%= render HeaderComponent.new(title: "Account") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <h2>Security</h2>
   </section>

app/views/shared/_admin_nav.html.erb

@@ -3,6 +3,6 @@
 <%= link_to "Invitations", admin_invitations_path,
       class: main_nav_class(@current_section, :invitations) %>
 <%= link_to "Donations", admin_donations_path,
-      class: main_nav_class(@current_section, :contributions) %>
+      class: main_nav_class(@current_section, :donations) %>
 <%= link_to "LDAP Users", admin_ldap_users_path,
       class: main_nav_class(@current_section, :ldap_users) %>

app/views/wallet/index.html.erb

@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Wallet" } %>
+<%= render HeaderComponent.new(title: "Wallet") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
     <div class="md:col-span-8">
       <p>

spec/components/header_compact_component_spec.rb

@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe HeaderCompactComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end

spec/components/header_component_spec.rb

@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe HeaderComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end

spec/components/main_compact_component_spec.rb

@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe MainCompactComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end

spec/components/main_simple_component_spec.rb

@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe MainSimpleComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end

tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   content: [
+    './app/components/**/*.html.erb',
     './app/views/**/*.html.erb',
     './app/helpers/**/*.rb',
     './app/javascript/**/*.js'