feat(view_components): add view_components

Gemfile

@@ -86,6 +86,7 @@ gem 'spreadsheet_architect'
 gem 'strong_migrations' # lint database migrations
 gem 'turbo-rails'
 gem 'typhoeus'
+gem 'view_component'
 gem 'warden'
 gem 'webpacker'
 gem 'zipline'

Gemfile.lock

@@ -741,6 +741,9 @@ GEM
       activemodel (>= 3.0.0)
       public_suffix
     vcr (6.0.0)
+    view_component (2.53.0)
+      activesupport (>= 5.0.0, < 8.0)
+      method_source (~> 1.0)
     virtus (2.0.0)
       axiom-types (~> 0.1)
       coercible (~> 1.0)
@@ -904,6 +907,7 @@ DEPENDENCIES
   turbo-rails
   typhoeus
   vcr
+  view_component
   warden
   web-console
   webdrivers (~> 4.0)

app/components/application_component.rb

@@ -0,0 +1,3 @@
+class ApplicationComponent < ViewComponent::Base
+  include ViewComponent::Translatable
+end

app/javascript/new_design/dossiers/auto-save.js

@@ -10,8 +10,9 @@ import {
   removeClass
 } from '@utils';
 
-const AUTOSAVE_DEBOUNCE_DELAY = gon.autosave.debounce_delay;
-const AUTOSAVE_STATUS_VISIBLE_DURATION = gon.autosave.status_visible_duration;
+const AUTOSAVE_DEBOUNCE_DELAY = window?.gon?.autosave?.debounce_delay;
+const AUTOSAVE_STATUS_VISIBLE_DURATION =
+  window?.gon?.autosave?.status_visible_duration;
 
 // Create a controller responsible for queuing autosave operations.
 const autoSaveController = new AutoSaveController();

app/views/layouts/component_preview.html.haml

@@ -0,0 +1,27 @@
+!!! 5
+%html{ lang: html_lang, class: yield(:root_class) }
+  %head
+    %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
+    %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
+    %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
+    = csrf_meta_tags
+
+    %title
+      = content_for?(:title) ? "#{yield(:title)} · #{APPLICATION_NAME}" : APPLICATION_NAME
+
+    = favicon_link_tag(image_url("#{FAVICON_16PX_SRC}"), type: "image/png", sizes: "16x16")
+    = favicon_link_tag(image_url("#{FAVICON_32PX_SRC}"), type: "image/png", sizes: "32x32")
+    = favicon_link_tag(image_url("#{FAVICON_96PX_SRC}"), type: "image/png", sizes: "96x96")
+
+    = javascript_packs_with_chunks_tag 'application', defer: true
+
+    = preload_link_tag(asset_url("Muli-Regular.woff2"))
+    = preload_link_tag(asset_url("Muli-Bold.woff2"))
+
+    = stylesheet_link_tag 'application', media: 'all'
+
+  %body{ class: browser.platform.ios? ? 'ios' : nil }
+    .page-wrapper
+      %main.m-6
+        = content_for?(:content) ? yield(:content) : yield
+      %turbo-events

config/application.rb

@@ -81,5 +81,13 @@ module TPS
     # Custom Configuration
     # @see https://guides.rubyonrails.org/configuring.html#custom-configuration
     config.x.clamav.enabled = ENV.fetch("CLAMAV_ENABLED", "enabled") == "enabled"
+
+    config.view_component.generate_sidecar = true
+    config.view_component.generate_locale = true
+    config.view_component.generate_distinct_locale_files = true
+    config.view_component.generate_preview = true
+    config.view_component.show_previews_source = true
+    config.view_component.default_preview_layout = 'component_preview'
+    config.view_component.preview_paths << "#{Rails.root}/spec/components/previews"
   end
 end

spec/rails_helper.rb

@@ -13,6 +13,7 @@ require 'rspec/rails'
 require 'axe-rspec'
 require 'devise'
 require 'shoulda-matchers'
+require 'view_component/test_helpers'
 
 # Requires supporting ruby files with custom matchers and macros, etc, in
 # spec/support/ and its subdirectories. Files matching `spec/**/*_spec.rb` are
@@ -124,4 +125,6 @@ RSpec.configure do |config|
   config.include Devise::Test::ControllerHelpers, type: :controller
   config.include Devise::Test::ControllerHelpers, type: :view
   config.include Devise::Test::IntegrationHelpers, type: :system
+  config.include ViewComponent::TestHelpers, type: :component
+  config.include Capybara::RSpecMatchers, type: :component
 end