Nextjs

.rubocop.yml

@@ -5,8 +5,62 @@ AllCops:
   TargetRubyVersion: 3.1.2
   NewCops: enable
 
-Style/Documentation:
+Lint/Debugger:
+  Severity: error
+
+Lint/MissingSuper:
+  Enabled: false
+
+Metrics/AbcSize:
+  Enabled: false
+
+Metrics/BlockNesting:
+  Enabled: false
+
+Metrics/CyclomaticComplexity:
+  Enabled: false
+
+Metrics/ClassLength:
+  Max: 100
+
+Metrics/BlockLength:
+  Max: 50
+  Exclude:
+    - spec/**/*
+
+Metrics/MethodLength:
+  Max: 25
+
+Layout/LineLength:
+  Max: 120
+  IgnoredPatterns: ['\A\s*#']
+
+Layout/ParameterAlignment:
+  EnforcedStyle: with_fixed_indentation
+
+Layout/DotPosition:
+  EnforcedStyle: trailing
+
+Layout/FirstHashElementIndentation:
+  EnforcedStyle: consistent
+
+Layout/MultilineMethodCallIndentation:
+  EnforcedStyle: indented
+
+Style/AsciiComments:
   Enabled: false
 
+Style/FormatStringToken:
+  EnforcedStyle: template
+
 Style/FrozenStringLiteralComment:
   Enabled: false
+
+Style/TrailingCommaInHashLiteral:
+  EnforcedStyleForMultiline: comma
+
+Style/Documentation:
+  Enabled: false
+
+Style/TrailingCommaInArrayLiteral:
+  EnforcedStyleForMultiline: comma

.vscode/settings.json

@@ -3,6 +3,9 @@
     80,
     120
   ],
+  "files.exclude": {
+    "frontend": true
+  },
   "files.trimTrailingWhitespace": true,
   "editor.tabSize": 2,
   "files.insertFinalNewline": true,

Gemfile

@@ -11,9 +11,6 @@ gem 'rails', '~> 7.0.4'
 # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
 gem 'sprockets-rails'
 
-# Use sqlite3 as the database for Active Record
-gem 'sqlite3', '~> 1.4'
-
 # Use the Puma web server [https://github.com/puma/puma]
 gem 'puma', '~> 5.0'
 
@@ -54,6 +51,9 @@ gem 'bootsnap', require: false
 # gem "image_processing", "~> 1.2"
 
 group :development, :test do
+  # Use sqlite3 as the database for Active Record
+  gem 'sqlite3', '~> 1.4'
+
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem 'debug', platforms: %i[mri mingw x64_mingw]
 end
@@ -68,10 +68,10 @@ group :development do
   # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
   # gem "spring"
 
-  gem 'solargraph'
-  gem "reek", "~> 6.1"
+  gem 'reek', '~> 6.1'
   gem 'rubocop', '~> 1.37'
   gem 'rubocop-rails', '~> 2.17'
+  gem 'solargraph'
 end
 
 group :test do
@@ -81,8 +81,12 @@ group :test do
   gem 'webdrivers'
 end
 
-gem 'simple_form', '~> 5.1'
+group :production do
+  gem 'pg', '~> 1.4'
+end
 
-gem "ransack", "~> 3.2"
-gem "pagy", "~> 5.10"
-gem "view_component", "~> 2.74"
+gem 'pagy', '~> 5.10'
+gem 'rack-cors', '~> 1.1'
+gem 'ransack', '~> 3.2'
+gem 'simple_form', '~> 5.1'
+gem 'view_component', '~> 2.74'

Gemfile.lock

@@ -136,16 +136,21 @@ GEM
     nio4r (2.5.8)
     nokogiri (1.13.9-arm64-darwin)
       racc (~> 1.4)
+    nokogiri (1.13.9-x86_64-linux)
+      racc (~> 1.4)
     pagy (5.10.1)
       activesupport
     parallel (1.22.1)
     parser (3.1.2.1)
       ast (~> 2.4.1)
+    pg (1.4.5)
     public_suffix (5.0.0)
     puma (5.6.5)
       nio4r (~> 2.0)
     racc (1.6.0)
     rack (2.2.4)
+    rack-cors (1.1.1)
+      rack (>= 2.0.0)
     rack-test (2.0.2)
       rack (>= 1.3)
     rails (7.0.4)
@@ -239,6 +244,7 @@ GEM
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     sqlite3 (1.5.3-arm64-darwin)
+    sqlite3 (1.5.3-x86_64-linux)
     stimulus-rails (1.1.0)
       railties (>= 6.0.0)
     thor (1.2.1)
@@ -277,6 +283,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-21
+  x86_64-linux
 
 DEPENDENCIES
   bootsnap
@@ -286,7 +293,9 @@ DEPENDENCIES
   jbuilder
   jsbundling-rails
   pagy (~> 5.10)
+  pg (~> 1.4)
   puma (~> 5.0)
+  rack-cors (~> 1.1)
   rails (~> 7.0.4)
   ransack (~> 3.2)
   reek (~> 6.1)

app/components/search_list_component.html.erb

@@ -1,9 +1,14 @@
-<%= form %>
-<% if items? %>
+<%= content_tag :div, data: { controller: "search-list" } do %>
+  <%= form if form? %>
   <div class="mt-4">
     <ul class="mb-6">
-      <% items.each do |item| %>
-        <%= item %>
+      <%= turbo_frame_tag "list_#{@resource.plural}" do %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+        <% if items.empty? %>
+          <%= render SearchListItemComponent.new(Kit::Product.new(name: 'Not found items')) %>
+        <% end %>
       <% end %>
     </ul>
   </div>

app/components/search_list_component.rb

@@ -1,6 +1,16 @@
 # frozen_string_literal: true
 
 class SearchListComponent < ViewComponent::Base
+  include Turbo::FramesHelper
+
   renders_one :form, SearchListFormComponent
   renders_many :items, SearchListItemComponent
+
+  def before_render
+    @resource ||= form.ransack.object.model_name if form?
+  end
+
+  def initialize(resource: nil)
+    @resource = resource
+  end
 end

app/components/search_list_form_component.html.erb

@@ -1,5 +1,5 @@
-<%= form_tag class: "relative" do |f| %>
-  <%= f.input_search @search_field, @search_value %>
+<%= form_tag class: "relative", data: { turbo_frame: "list_#{@resource.plural}" } do |f| %>
+  <%= f.input_search @search_field, @search_value, data: { search_list_target: 'searchField' } %>
   <%= f.button do %>
     <svg class="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />

app/components/search_list_form_component.rb

@@ -1,48 +1,54 @@
 # frozen_string_literal: true
 
+require 'ransack/helpers'
+
 module SearchListFormHelper
-  def form_tag(options = {}, &proc)
+  def form_tag(options = {}, &)
     options.merge!({ builder: SearchListBuilder })
 
-    search_form_for(@ransack, options, &proc)
+    search_form_for(@ransack, options, &)
   end
 end
 
 class SearchListFormComponent < ViewComponent::Base
   include Ransack::Helpers::FormHelper
   include SearchListFormHelper
 
+  attr_reader :ransack
+
   def before_render
     @search_value = params[@search_field]
   end
 
   def initialize(ransack:, search_field: :name_cont)
     @ransack = ransack
     @search_field = search_field
+
+    @resource = ransack.object.model_name
   end
 end
 
 class SearchListBuilder < ActionView::Helpers::FormBuilder
   include SearchListFormHelper
 
-  def button(tag_value = nil, options = {}, &block)
+  def button(tag_value = nil, options = {}, &)
     options.merge!({
       type: 'submit',
-      class: "absolute inset-0 right-auto group"
+      class: 'absolute inset-0 right-auto group',
     })
 
     @template.button_tag(
-      tag_value, options, &block
+      tag_value, options, &
     )
   end
 
-  def input_search(method, tag_value, options = {})
+  def input_search(method, _tag_value, options = {})
     options.merge!({
       placeholder: 'Search...',
-      class: 'form-input w-full pl-9 focus:border-slate-300'
+      class: 'form-input w-full pl-9 focus:border-slate-300',
     })
 
     @template.label(@object_name, method, class: 'sr-only') +
-    @template.search_field(@object_name, method, options)
+      @template.search_field(@object_name, method, options)
   end
 end

app/components/search_list_item_component.rb

@@ -1,33 +1,49 @@
 # frozen_string_literal: true
 
 class SearchListItemComponent < ViewComponent::Base
+  include Turbo::FramesHelper
+
   def initialize(item, label: :name)
     @item = item
     @label = item.send(label)
   end
 
   def active?
-    current_page?(kit_product_path(@item))
+    @item.persisted? && current_page?(kit_product_path(@item))
   end
 
   def call
     html_options = {
-      aria: { label: "Edit this #{@item.model_name.human.downcase}" },
+      aria: { label: "Edit this #{@item.model_name.singular}" },
+      data: {
+        turbo_frame: "#{@item.model_name.singular}_form",
+        action: 'click->search-list#selectItem',
+        search_list_target: 'item',
+      },
       class: class_names(
-        "flex items-center justify-between w-full p-2 rounded", {
-          "bg-indigo-100": active?
+        'flex items-center justify-between w-full p-2 rounded', {
+          'bg-indigo-100': active?,
+          'text-slate-300': @item.new_record?,
         }
-      )
+      ),
     }
 
-    content_tag :li, class: "-mx-2" do
-      link_to @item, html_options do
-        content_tag :div, class: "flex items-center truncate" do
-          content_tag :div, class: "truncate" do
-            content_tag :div, @label, class: "text-sm font-medium text-slate-800"
-          end
+    turbo_frame_tag dom_id(@item, 'list') do
+      content_tag :li, class: '-mx-2' do
+        link_to_if(@item.persisted?, item_tag, @item, html_options) do
+          content_tag :span, item_tag, html_options.except(:data)
         end
       end
     end
   end
+
+  private
+
+  def item_tag
+    content_tag :div, class: 'flex items-center truncate' do
+      content_tag :div, class: 'truncate' do
+        content_tag :div, @label, class: 'text-sm font-medium'
+      end
+    end
+  end
 end

app/controllers/application_controller.rb

@@ -1,3 +1,11 @@
 class ApplicationController < ActionController::Base
   include Pagy::Backend
+
+  before_action :turbo_frame_request_variant
+
+  private
+
+  def turbo_frame_request_variant
+    request.variant = :turbo_frame if turbo_frame_request?
+  end
 end