From 632c19ab27d407e95edc363e6a612bcf54803dc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Sun, 23 Oct 2022 22:12:32 -0300
Subject: [PATCH 01/25] Inserted turbo frames and streams

---
 app/controllers/kit/products_controller.rb    | 24 +++++++++++++++----
 app/views/kit/products/_list.html.erb         | 17 +++++--------
 app/views/kit/products/_list_item.html.erb    | 15 ++++++++++++
 app/views/kit/products/_product.html.erb      | 12 ++++++----
 .../kit/products/create.turbo_stream.erb      |  1 +
 .../kit/products/destroy.turbo_stream.erb     |  3 +++
 app/views/kit/products/index.html.erb         |  6 +++--
 app/views/kit/products/show.turbo_stream.erb  |  1 +
 .../kit/products/update.turbo_stream.erb      |  2 ++
 9 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 app/views/kit/products/_list_item.html.erb
 create mode 100644 app/views/kit/products/create.turbo_stream.erb
 create mode 100644 app/views/kit/products/destroy.turbo_stream.erb
 create mode 100644 app/views/kit/products/show.turbo_stream.erb
 create mode 100644 app/views/kit/products/update.turbo_stream.erb

diff --git a/app/controllers/kit/products_controller.rb b/app/controllers/kit/products_controller.rb
index b263dc9..9f19e8d 100644
--- a/app/controllers/kit/products_controller.rb
+++ b/app/controllers/kit/products_controller.rb
@@ -15,6 +15,7 @@ def show
       respond_to do |format|
         format.html { render(:index) }
         format.json { render(:show) }
+        format.turbo_stream
       end
     end
 
@@ -22,7 +23,10 @@ def show
     def new
       @kit_product = Kit::Product.new
 
-      render(:index)
+      respond_to do |format|
+        format.html { render(:index) }
+        format.turbo_stream { render(:show) }
+      end
     end
 
     # POST /kit/products or /kit/products.json
@@ -31,7 +35,9 @@ def create
 
       respond_to do |format|
         if @kit_product.save
-          format.html { redirect_to(kit_product_url(@kit_product), notice: 'Product was successfully created.') }
+          flash.now[:notice] = 'Product was successfully created.'
+
+          format.html { redirect_to(kit_product_url(@kit_product)) }
           format.json { render(:show, status: :created, location: @kit_product) }
         else
           format.html do
@@ -41,14 +47,19 @@ def create
           end
           format.json { render(json: @kit_product.errors, status: :unprocessable_entity) }
         end
+
+        format.turbo_stream
       end
     end
 
     # PATCH/PUT /kit/products/1 or /kit/products/1.json
     def update
+      # binding.break
       respond_to do |format|
         if @kit_product.update(kit_product_params)
-          format.html { redirect_to(kit_product_url(@kit_product), notice: 'Product was successfully updated.') }
+          flash.now[:notice] = 'Product was successfully updated.'
+
+          format.html { redirect_to(kit_product_url(@kit_product)) }
           format.json { render(:show, status: :ok, location: @kit_product) }
         else
           format.html do
@@ -58,6 +69,8 @@ def update
           end
           format.json { render(json: @kit_product.errors, status: :unprocessable_entity) }
         end
+
+        format.turbo_stream
       end
     end
 
@@ -65,9 +78,12 @@ def update
     def destroy
       @kit_product.destroy
 
+      flash.now[:notice] = 'Product was successfully destroyed.'
+
       respond_to do |format|
-        format.html { redirect_to(kit_products_url, notice: 'Product was successfully destroyed.') }
+        format.html { redirect_to(kit_products_url) }
         format.json { head(:no_content) }
+        format.turbo_stream
       end
     end
 
diff --git a/app/views/kit/products/_list.html.erb b/app/views/kit/products/_list.html.erb
index a5cd4fb..f3cd9f1 100644
--- a/app/views/kit/products/_list.html.erb
+++ b/app/views/kit/products/_list.html.erb
@@ -11,6 +11,7 @@
           <!-- Edit button -->
           <%= link_to new_kit_product_path,
                       aria: { label: "New product" },
+                      data: { turbo_frame: 'kit_product_form' },
                       class: "p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2" do %>
             <svg class="w-4 h-4 fill-current" viewBox="0 0 16 16">
               <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z"></path>
@@ -35,18 +36,12 @@
       <!-- Direct messages -->
       <div class="mt-4">
         <ul class="mb-6">
-          <% @kit_products.each do |kit_product| %>
-            <li class="-mx-2">
-              <%= link_to kit_product,
-                                aria: { label: "Edit this product" },
-                                class: class_names("flex items-center justify-between w-full p-2 rounded", { "bg-indigo-100": current_page?(kit_product_path(kit_product)) }) do %>
-                <div class="flex items-center truncate">
-                  <div class="truncate">
-                    <span class="text-sm font-medium text-slate-800"><%= kit_product.name %></span>
-                  </div>
-                </div>
+          <%= turbo_frame_tag "list_products" do %>
+            <% @kit_products.each do |kit_product| %>
+              <%= turbo_frame_tag "list_#{dom_id(kit_product)}" do %>
+                <%= render partial: "kit/products/list_item", locals: { product: kit_product } %>
               <% end %>
-            </li>
+            <% end %>
           <% end %>
         </ul>
       </div>
diff --git a/app/views/kit/products/_list_item.html.erb b/app/views/kit/products/_list_item.html.erb
new file mode 100644
index 0000000..e2e2636
--- /dev/null
+++ b/app/views/kit/products/_list_item.html.erb
@@ -0,0 +1,15 @@
+<li class="-mx-2">
+  <%= link_to product,
+              aria: { label: "Edit this product" },
+              data: { turbo_frame: 'kit_product_form' } ,
+              class: class_names(
+                "flex items-center justify-between w-full p-2 rounded",
+                { "bg-indigo-100": current_page?(kit_product_path(product)) }
+              )do %>
+    <div class="flex items-center truncate">
+      <div class="truncate">
+        <span class="text-sm font-medium text-slate-800"><%= product.name %></span>
+      </div>
+    </div>
+  <% end %>
+</li>
diff --git a/app/views/kit/products/_product.html.erb b/app/views/kit/products/_product.html.erb
index ef485f3..7a967b3 100644
--- a/app/views/kit/products/_product.html.erb
+++ b/app/views/kit/products/_product.html.erb
@@ -27,10 +27,14 @@
   <footer>
     <div class="flex flex-col py-5 border-t border-slate-200">
       <div class="flex self-end">
-        <%= link_to "Destroy this product", product,
-                    data: { turbo_method: :delete, turbo_confirm: "Are you sure?" },
-                    class: "btn shadow-none text-rose-500 mr-3" if product.persisted? %>
-        <%= link_to "Back", product.persisted? ? kit_products_path : product, class: "btn border-slate-200 hover:border-slate-300 text-slate-600" %>
+        <% if product.persisted? %>
+          <%= link_to "Destroy this product", product,
+                      data: { turbo_method: :delete, turbo_confirm: "Are you sure?" },
+                      class: "btn shadow-none text-rose-500 mr-3" %>
+          <%= link_to "Back", new_kit_product_path,
+                      data: { turbo_frame: 'kit_product_form' },
+                      class: "btn border-slate-200 hover:border-slate-300 text-slate-600" %>
+        <% end %>
         <%= form.button :submit, class: "bg-indigo-500 hover:bg-indigo-600 text-white ml-3" %>
       </div>
     </div>
diff --git a/app/views/kit/products/create.turbo_stream.erb b/app/views/kit/products/create.turbo_stream.erb
new file mode 100644
index 0000000..f87271f
--- /dev/null
+++ b/app/views/kit/products/create.turbo_stream.erb
@@ -0,0 +1 @@
+<%= turbo_stream.update Kit::Product.new, partial: "kit/products/product", locals: { lash: flash, product: @kit_product } %>
diff --git a/app/views/kit/products/destroy.turbo_stream.erb b/app/views/kit/products/destroy.turbo_stream.erb
new file mode 100644
index 0000000..25b6be4
--- /dev/null
+++ b/app/views/kit/products/destroy.turbo_stream.erb
@@ -0,0 +1,3 @@
+<%= turbo_stream.remove "list_#{dom_id(@kit_product)}" %>
+<%= turbo_stream.update 'kit_product_form', partial: "kit/products/product", locals: { flash: flash, product: Kit::Product.new } %>
+
diff --git a/app/views/kit/products/index.html.erb b/app/views/kit/products/index.html.erb
index 53a3738..15eafd7 100644
--- a/app/views/kit/products/index.html.erb
+++ b/app/views/kit/products/index.html.erb
@@ -17,8 +17,10 @@
       </div>
       <!-- Body -->
       <div class="grow px-4 sm:px-6 md:px-5 py-6">
-        <div id="kit_products" class="mb-4 last:mb-0">
-          <%= render @kit_product %>
+        <div class="mb-4 last:mb-0">
+          <%= turbo_frame_tag 'kit_product_form' do %>
+            <%= render @kit_product %>
+          <% end %>
         </div>
       </div>
     </div>
diff --git a/app/views/kit/products/show.turbo_stream.erb b/app/views/kit/products/show.turbo_stream.erb
new file mode 100644
index 0000000..21837c1
--- /dev/null
+++ b/app/views/kit/products/show.turbo_stream.erb
@@ -0,0 +1 @@
+<%= turbo_stream.update 'kit_product_form', partial: "kit/products/product", locals: { product: @kit_product } %>
diff --git a/app/views/kit/products/update.turbo_stream.erb b/app/views/kit/products/update.turbo_stream.erb
new file mode 100644
index 0000000..c11fd2b
--- /dev/null
+++ b/app/views/kit/products/update.turbo_stream.erb
@@ -0,0 +1,2 @@
+<%= turbo_stream.update "list_#{dom_id(@kit_product)}", partial: "kit/products/list_item", locals: { product: @kit_product } %>
+<%= turbo_stream.update 'kit_product_form', partial: "kit/products/product", locals: { flash: flash,  product: @kit_product } %>

From c5206386f8e14f7b633b2b984d2b1f96d45aa480 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Sun, 23 Oct 2022 22:32:55 -0300
Subject: [PATCH 02/25] Fixed create turbo stream

---
 app/views/kit/products/create.turbo_stream.erb | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/views/kit/products/create.turbo_stream.erb b/app/views/kit/products/create.turbo_stream.erb
index f87271f..088a367 100644
--- a/app/views/kit/products/create.turbo_stream.erb
+++ b/app/views/kit/products/create.turbo_stream.erb
@@ -1 +1,2 @@
-<%= turbo_stream.update Kit::Product.new, partial: "kit/products/product", locals: { lash: flash, product: @kit_product } %>
+<%= turbo_stream.update 'kit_product_form', partial: "kit/products/product", locals: { lash: flash, product: @kit_product } %>
+<%= turbo_stream.append "list_products", partial: "kit/products/list_item", locals: { product: @kit_product } if @kit_product.persisted? %>

From 11a479dafa5c84a1e769721d57792f39914a1204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Tue, 25 Oct 2022 02:23:25 -0300
Subject: [PATCH 03/25] Using view component; Fixed the partial load

---
 Gemfile                                       |   8 +-
 Gemfile.lock                                  |  19 ++
 app/components/search_list_component.html.erb |  12 +
 app/components/search_list_component.rb       |  12 +
 .../search_list_form_component.html.erb       |   9 +
 app/components/search_list_form_component.rb  |  50 ++++
 app/components/search_list_item_component.rb  |  38 +++
 app/controllers/application_controller.rb     |   1 +
 app/controllers/kit/products_controller.rb    |  25 +-
 app/helpers/application_helper.rb             |   1 +
 app/views/kit/products/_list.html.erb         |  37 +--
 app/views/kit/products/_list_item.html.erb    |  15 --
 app/views/kit/products/_product.html.erb      |  72 ++---
 .../kit/products/create.turbo_stream.erb      |   4 +-
 .../kit/products/destroy.turbo_stream.erb     |   2 +-
 app/views/kit/products/index.html.erb         |   4 +-
 app/views/kit/products/show.turbo_stream.erb  |   1 -
 .../kit/products/update.turbo_stream.erb      |   4 +-
 app/views/layouts/update.turbo_stream.erb     |   2 +
 config/initializers/pagy.rb                   | 245 ++++++++++++++++++
 tailwind.config.js                            |   2 +
 test/components/search_list_component_test.rb |  12 +
 .../search_list_form_component_test.rb        |  12 +
 .../search_list_item_component_test.rb        |  12 +
 test/system/kit/products_test.rb              |   2 +-
 25 files changed, 504 insertions(+), 97 deletions(-)
 create mode 100644 app/components/search_list_component.html.erb
 create mode 100644 app/components/search_list_component.rb
 create mode 100644 app/components/search_list_form_component.html.erb
 create mode 100644 app/components/search_list_form_component.rb
 create mode 100644 app/components/search_list_item_component.rb
 delete mode 100644 app/views/kit/products/_list_item.html.erb
 delete mode 100644 app/views/kit/products/show.turbo_stream.erb
 create mode 100644 app/views/layouts/update.turbo_stream.erb
 create mode 100644 config/initializers/pagy.rb
 create mode 100644 test/components/search_list_component_test.rb
 create mode 100644 test/components/search_list_form_component_test.rb
 create mode 100644 test/components/search_list_item_component_test.rb

diff --git a/Gemfile b/Gemfile
index 922d07d..3b10368 100644
--- a/Gemfile
+++ b/Gemfile
@@ -69,6 +69,9 @@ group :development do
   # gem "spring"
 
   gem 'solargraph'
+  gem "reek", "~> 6.1"
+  gem 'rubocop', '~> 1.37'
+  gem 'rubocop-rails', '~> 2.17'
 end
 
 group :test do
@@ -80,5 +83,6 @@ end
 
 gem 'simple_form', '~> 5.1'
 
-gem 'rubocop', '~> 1.37'
-gem 'rubocop-rails', '~> 2.17'
+gem "ransack", "~> 3.2"
+gem "pagy", "~> 5.10"
+gem "view_component", "~> 2.74"
diff --git a/Gemfile.lock b/Gemfile.lock
index 5a3d761..f3565f4 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -113,6 +113,7 @@ GEM
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
+    kwalify (0.7.2)
     loofah (2.19.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -135,6 +136,8 @@ GEM
     nio4r (2.5.8)
     nokogiri (1.13.9-arm64-darwin)
       racc (~> 1.4)
+    pagy (5.10.1)
+      activesupport
     parallel (1.22.1)
     parser (3.1.2.1)
       ast (~> 2.4.1)
@@ -173,6 +176,14 @@ GEM
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.0.6)
+    ransack (3.2.1)
+      activerecord (>= 6.1.5)
+      activesupport (>= 6.1.5)
+      i18n
+    reek (6.1.1)
+      kwalify (~> 0.7.0)
+      parser (~> 3.1.0)
+      rainbow (>= 2.0, < 4.0)
     regexp_parser (2.6.0)
     reline (0.3.1)
       io-console (~> 0.5)
@@ -240,6 +251,10 @@ GEM
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.3.0)
+    view_component (2.74.1)
+      activesupport (>= 5.0.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     web-console (4.2.0)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -270,8 +285,11 @@ DEPENDENCIES
   debug
   jbuilder
   jsbundling-rails
+  pagy (~> 5.10)
   puma (~> 5.0)
   rails (~> 7.0.4)
+  ransack (~> 3.2)
+  reek (~> 6.1)
   rubocop (~> 1.37)
   rubocop-rails (~> 2.17)
   selenium-webdriver
@@ -282,6 +300,7 @@ DEPENDENCIES
   stimulus-rails
   turbo-rails
   tzinfo-data
+  view_component (~> 2.74)
   web-console
   webdrivers
 
diff --git a/app/components/search_list_component.html.erb b/app/components/search_list_component.html.erb
new file mode 100644
index 0000000..8a37d0b
--- /dev/null
+++ b/app/components/search_list_component.html.erb
@@ -0,0 +1,12 @@
+<%= form %>
+<% if items? %>
+  <div class="mt-4">
+    <ul class="mb-6">
+      <%= turbo_frame_tag "list_#{@resource.plural}" do %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+<% end %>
diff --git a/app/components/search_list_component.rb b/app/components/search_list_component.rb
new file mode 100644
index 0000000..caaadd8
--- /dev/null
+++ b/app/components/search_list_component.rb
@@ -0,0 +1,12 @@
+# 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
+  end
+end
diff --git a/app/components/search_list_form_component.html.erb b/app/components/search_list_form_component.html.erb
new file mode 100644
index 0000000..42a847d
--- /dev/null
+++ b/app/components/search_list_form_component.html.erb
@@ -0,0 +1,9 @@
+<%= form_tag class: "relative" do |f| %>
+  <%= f.input_search @search_field, @search_value %>
+  <%= 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" />
+      <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
+    </svg>
+  <% end %>
+<% end %>
diff --git a/app/components/search_list_form_component.rb b/app/components/search_list_form_component.rb
new file mode 100644
index 0000000..4fe6eb5
--- /dev/null
+++ b/app/components/search_list_form_component.rb
@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module SearchListFormHelper
+  def form_tag(options = {}, &proc)
+    options.merge!({ builder: SearchListBuilder })
+
+    search_form_for(@ransack, options, &proc)
+  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: :id_cont)
+    @ransack = ransack
+    @search_field = search_field
+  end
+end
+
+class SearchListBuilder < ActionView::Helpers::FormBuilder
+  include SearchListFormHelper
+
+  def button(tag_value = nil, options = {}, &block)
+    options.merge!({
+      type: 'submit',
+      class: "absolute inset-0 right-auto group"
+    })
+
+    @template.button_tag(
+      tag_value, options, &block
+    )
+  end
+
+  def input_search(method, tag_value, options = {})
+    options.merge!({
+      placeholder: 'Search...',
+      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)
+  end
+end
diff --git a/app/components/search_list_item_component.rb b/app/components/search_list_item_component.rb
new file mode 100644
index 0000000..7c55a17
--- /dev/null
+++ b/app/components/search_list_item_component.rb
@@ -0,0 +1,38 @@
+# 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))
+  end
+
+  def call
+    html_options = {
+      aria: { label: "Edit this #{@item.model_name.singular}" },
+      data: { turbo_frame: "#{@item.model_name.singular}_form" } ,
+      class: class_names(
+        "flex items-center justify-between w-full p-2 rounded", {
+          "bg-indigo-100": active?
+        }
+      )
+    }
+
+    turbo_frame_tag "list_#{dom_id(@item)}" do
+      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
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 09705d1..98ccf6f 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -1,2 +1,3 @@
 class ApplicationController < ActionController::Base
+  include Pagy::Backend
 end
diff --git a/app/controllers/kit/products_controller.rb b/app/controllers/kit/products_controller.rb
index 9f19e8d..8a019a5 100644
--- a/app/controllers/kit/products_controller.rb
+++ b/app/controllers/kit/products_controller.rb
@@ -7,15 +7,21 @@ class ProductsController < ApplicationController
 
     # GET /kit/products or /kit/products.json
     def index
-      @kit_product = @kit_products.first.reload
+      @kit_product = @kit_products.first
     end
 
     # GET /kit/products/1 or /kit/products/1.json
     def show
       respond_to do |format|
-        format.html { render(:index) }
+        format.html do
+          if turbo_frame_request?
+            render partial: "kit/products/product", locals: { lash: flash, product: @kit_product }
+          else
+            render(:index)
+          end
+        end
+
         format.json { render(:show) }
-        format.turbo_stream
       end
     end
 
@@ -24,7 +30,14 @@ def new
       @kit_product = Kit::Product.new
 
       respond_to do |format|
-        format.html { render(:index) }
+        format.html do
+          if turbo_frame_request?
+            render partial: "kit/products/product", locals: { lash: flash, product: @kit_product }
+          else
+            render(:index)
+          end
+        end
+
         format.turbo_stream { render(:show) }
       end
     end
@@ -54,7 +67,6 @@ def create
 
     # PATCH/PUT /kit/products/1 or /kit/products/1.json
     def update
-      # binding.break
       respond_to do |format|
         if @kit_product.update(kit_product_params)
           flash.now[:notice] = 'Product was successfully updated.'
@@ -90,7 +102,8 @@ def destroy
     private
 
     def load_kit_products
-      @kit_products = Kit::Product.all
+      @q = Kit::Product.ransack(params[:q])
+      @pagy, @kit_products = pagy(@q.result)
     end
 
     # Use callbacks to share common setup or constraints between actions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index de6be79..ed6a048 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,2 +1,3 @@
 module ApplicationHelper
+  include Pagy::Frontend
 end
diff --git a/app/views/kit/products/_list.html.erb b/app/views/kit/products/_list.html.erb
index f3cd9f1..d39a221 100644
--- a/app/views/kit/products/_list.html.erb
+++ b/app/views/kit/products/_list.html.erb
@@ -1,17 +1,16 @@
 <div class="sticky top-16 bg-white overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-r border-slate-200 w-80 h-[100vh]">
-  <!-- #Marketing group -->
   <div>
-    <!-- Group header -->
     <div class="sticky top-0 z-10">
       <div class="flex items-center bg-white border-b border-slate-200 px-5 h-16">
         <div class="w-full flex items-center justify-between">
           <div class="relative">
-            <h1 class="font-semibold text-slate-800">Products</h1>
+            <h1 class="font-semibold text-slate-800">
+              <%= link_to "Products", kit_products_path %>
+            </h1>
           </div>
-          <!-- Edit button -->
           <%= link_to new_kit_product_path,
                       aria: { label: "New product" },
-                      data: { turbo_frame: 'kit_product_form' },
+                      data: { turbo_frame: "#{Kit::Product.model_name.singular}_form" },
                       class: "p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2" do %>
             <svg class="w-4 h-4 fill-current" viewBox="0 0 16 16">
               <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z"></path>
@@ -20,31 +19,11 @@
         </div>
       </div>
     </div>
-    <!-- Group body -->
     <div class="px-5 py-4">
-      <!-- Search form -->
-      <form class="relative">
-        <label for="msg-search" class="sr-only">Search</label>
-        <input id="msg-search" class="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Search…" />
-        <button class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
-          <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" />
-            <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
-          </svg>
-        </button>
-      </form>
-      <!-- Direct messages -->
-      <div class="mt-4">
-        <ul class="mb-6">
-          <%= turbo_frame_tag "list_products" do %>
-            <% @kit_products.each do |kit_product| %>
-              <%= turbo_frame_tag "list_#{dom_id(kit_product)}" do %>
-                <%= render partial: "kit/products/list_item", locals: { product: kit_product } %>
-              <% end %>
-            <% end %>
-          <% end %>
-        </ul>
-      </div>
+      <%= render SearchListComponent.new do |c| %>
+        <%= c.with_form(ransack: @q) %>
+        <%= @kit_products.each { |kit_product| c.with_item(kit_product) } %>
+      <% end %>
     </div>
   </div>
 </div>
diff --git a/app/views/kit/products/_list_item.html.erb b/app/views/kit/products/_list_item.html.erb
deleted file mode 100644
index e2e2636..0000000
--- a/app/views/kit/products/_list_item.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<li class="-mx-2">
-  <%= link_to product,
-              aria: { label: "Edit this product" },
-              data: { turbo_frame: 'kit_product_form' } ,
-              class: class_names(
-                "flex items-center justify-between w-full p-2 rounded",
-                { "bg-indigo-100": current_page?(kit_product_path(product)) }
-              )do %>
-    <div class="flex items-center truncate">
-      <div class="truncate">
-        <span class="text-sm font-medium text-slate-800"><%= product.name %></span>
-      </div>
-    </div>
-  <% end %>
-</li>
diff --git a/app/views/kit/products/_product.html.erb b/app/views/kit/products/_product.html.erb
index 7a967b3..dfd579a 100644
--- a/app/views/kit/products/_product.html.erb
+++ b/app/views/kit/products/_product.html.erb
@@ -1,42 +1,44 @@
-<h2 class="text-2xl text-slate-800 font-bold mb-6"><%= "#{product.persisted? ? 'Edit' : 'New'} Product" %></h2>
+<%= turbo_frame_tag 'kit_product_form' do %>
+  <h2 class="text-2xl text-slate-800 font-bold mb-6"><%= "#{product.persisted? ? 'Edit' : 'New'} Product" %></h2>
 
-<% if notice.present? %>
-  <div class="px-4 py-2 rounded-sm text-sm bg-emerald-100 border border-emerald-200 text-emerald-600">
-    <div class="flex w-full justify-between items-start">
-      <div class="flex">
-        <svg class="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z"></path>
-        </svg>
-        <div><%= notice %></div>
+  <% if notice.present? %>
+    <div class="px-4 py-2 rounded-sm text-sm bg-emerald-100 border border-emerald-200 text-emerald-600">
+      <div class="flex w-full justify-between items-start">
+        <div class="flex">
+          <svg class="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z"></path>
+          </svg>
+          <div><%= notice %></div>
+        </div>
       </div>
     </div>
-  </div>
-<% end %>
-
-<%= simple_form_for product, html: { class: 'grow space-y-6' } do |form| %>
-  <% if product.errors.any? %>
-    <div class="text-rose-500">
-      <h2><%= pluralize(product.errors.count, "error") %> prohibited this product from being saved:</h2>
-    </div>
   <% end %>
-  <div class="grid gap-5 md:grid-cols-3">
-    <div>
-      <%= form.input :name %>
-    </div>
-  </div>
-  <footer>
-    <div class="flex flex-col py-5 border-t border-slate-200">
-      <div class="flex self-end">
-        <% if product.persisted? %>
-          <%= link_to "Destroy this product", product,
-                      data: { turbo_method: :delete, turbo_confirm: "Are you sure?" },
-                      class: "btn shadow-none text-rose-500 mr-3" %>
-          <%= link_to "Back", new_kit_product_path,
-                      data: { turbo_frame: 'kit_product_form' },
-                      class: "btn border-slate-200 hover:border-slate-300 text-slate-600" %>
-        <% end %>
-        <%= form.button :submit, class: "bg-indigo-500 hover:bg-indigo-600 text-white ml-3" %>
+
+  <%= simple_form_for product, html: { class: 'grow space-y-6' } do |form| %>
+    <% if product.errors.any? %>
+      <div class="text-rose-500">
+        <h2><%= pluralize(product.errors.count, "error") %> prohibited this product from being saved:</h2>
+      </div>
+    <% end %>
+    <div class="grid gap-5 md:grid-cols-3">
+      <div>
+        <%= form.input :name %>
       </div>
     </div>
-  </footer>
+    <footer>
+      <div class="flex flex-col py-5 border-t border-slate-200">
+        <div class="flex self-end">
+          <% if product.persisted? %>
+            <%= link_to "Destroy this product", product,
+                        data: { turbo_method: :delete, turbo_confirm: "Are you sure?" },
+                        class: "btn shadow-none text-rose-500 mr-3" %>
+            <%= link_to "Back", new_kit_product_path,
+                        data: { turbo_frame: 'kit_product_form' },
+                        class: "btn border-slate-200 hover:border-slate-300 text-slate-600" %>
+          <% end %>
+          <%= form.button :submit, class: "bg-indigo-500 hover:bg-indigo-600 text-white ml-3" %>
+        </div>
+      </div>
+    </footer>
+  <% end %>
 <% end %>
diff --git a/app/views/kit/products/create.turbo_stream.erb b/app/views/kit/products/create.turbo_stream.erb
index 088a367..5a05b42 100644
--- a/app/views/kit/products/create.turbo_stream.erb
+++ b/app/views/kit/products/create.turbo_stream.erb
@@ -1,2 +1,2 @@
-<%= turbo_stream.update 'kit_product_form', partial: "kit/products/product", locals: { lash: flash, product: @kit_product } %>
-<%= turbo_stream.append "list_products", partial: "kit/products/list_item", locals: { product: @kit_product } if @kit_product.persisted? %>
+<%= turbo_stream.update "#{@kit_product.model_name.singular}_form", partial: "kit/products/product", locals: { lash: flash, product: @kit_product } %>
+<%= turbo_stream.append "list_#{@kit_product.model_name.plural}", inline: render(SearchListItemComponent.new(@kit_product)) if @kit_product.persisted? %>
diff --git a/app/views/kit/products/destroy.turbo_stream.erb b/app/views/kit/products/destroy.turbo_stream.erb
index 25b6be4..6389e01 100644
--- a/app/views/kit/products/destroy.turbo_stream.erb
+++ b/app/views/kit/products/destroy.turbo_stream.erb
@@ -1,3 +1,3 @@
 <%= turbo_stream.remove "list_#{dom_id(@kit_product)}" %>
-<%= turbo_stream.update 'kit_product_form', partial: "kit/products/product", locals: { flash: flash, product: Kit::Product.new } %>
+<%= turbo_stream.update "#{@kit_product.model_name.singular}_form", partial: "kit/products/product", locals: { flash: flash, product: Kit::Product.new } %>
 
diff --git a/app/views/kit/products/index.html.erb b/app/views/kit/products/index.html.erb
index 15eafd7..c82f5e9 100644
--- a/app/views/kit/products/index.html.erb
+++ b/app/views/kit/products/index.html.erb
@@ -18,9 +18,7 @@
       <!-- Body -->
       <div class="grow px-4 sm:px-6 md:px-5 py-6">
         <div class="mb-4 last:mb-0">
-          <%= turbo_frame_tag 'kit_product_form' do %>
-            <%= render @kit_product %>
-          <% end %>
+          <%= render @kit_product %>
         </div>
       </div>
     </div>
diff --git a/app/views/kit/products/show.turbo_stream.erb b/app/views/kit/products/show.turbo_stream.erb
deleted file mode 100644
index 21837c1..0000000
--- a/app/views/kit/products/show.turbo_stream.erb
+++ /dev/null
@@ -1 +0,0 @@
-<%= turbo_stream.update 'kit_product_form', partial: "kit/products/product", locals: { product: @kit_product } %>
diff --git a/app/views/kit/products/update.turbo_stream.erb b/app/views/kit/products/update.turbo_stream.erb
index c11fd2b..d7edf65 100644
--- a/app/views/kit/products/update.turbo_stream.erb
+++ b/app/views/kit/products/update.turbo_stream.erb
@@ -1,2 +1,2 @@
-<%= turbo_stream.update "list_#{dom_id(@kit_product)}", partial: "kit/products/list_item", locals: { product: @kit_product } %>
-<%= turbo_stream.update 'kit_product_form', partial: "kit/products/product", locals: { flash: flash,  product: @kit_product } %>
+<%= turbo_stream.update "list_#{dom_id(@kit_product)}", inline: render(SearchListItemComponent.new(@kit_product)) %>
+<%= turbo_stream.update "#{@kit_product.model_name.singular}_form", partial: "kit/products/product", locals: { flash: flash,  product: @kit_product } %>
diff --git a/app/views/layouts/update.turbo_stream.erb b/app/views/layouts/update.turbo_stream.erb
new file mode 100644
index 0000000..d7edf65
--- /dev/null
+++ b/app/views/layouts/update.turbo_stream.erb
@@ -0,0 +1,2 @@
+<%= turbo_stream.update "list_#{dom_id(@kit_product)}", inline: render(SearchListItemComponent.new(@kit_product)) %>
+<%= turbo_stream.update "#{@kit_product.model_name.singular}_form", partial: "kit/products/product", locals: { flash: flash,  product: @kit_product } %>
diff --git a/config/initializers/pagy.rb b/config/initializers/pagy.rb
new file mode 100644
index 0000000..224a5aa
--- /dev/null
+++ b/config/initializers/pagy.rb
@@ -0,0 +1,245 @@
+# frozen_string_literal: true
+
+# Pagy initializer file (5.10.1)
+# Customize only what you really need and notice that the core Pagy works also without any of the following lines.
+# Should you just cherry pick part of this file, please maintain the require-order of the extras
+
+
+# Pagy DEFAULT Variables
+# See https://ddnexus.github.io/pagy/api/pagy#variables
+# All the Pagy::DEFAULT are set for all the Pagy instances but can be overridden per instance by just passing them to
+# Pagy.new|Pagy::Countless.new|Pagy::Calendar::*.new or any of the #pagy* controller methods
+
+
+# Instance variables
+# See https://ddnexus.github.io/pagy/api/pagy#instance-variables
+# Pagy::DEFAULT[:page]   = 1                                  # default
+# Pagy::DEFAULT[:items]  = 20                                 # default
+# Pagy::DEFAULT[:outset] = 0                                  # default
+
+
+# Other Variables
+# See https://ddnexus.github.io/pagy/api/pagy#other-variables
+# Pagy::DEFAULT[:size]       = [1,4,4,1]                       # default
+# Pagy::DEFAULT[:page_param] = :page                           # default
+# The :params can be also set as a lambda e.g ->(params){ params.exclude('useless').merge!('custom' => 'useful') }
+# Pagy::DEFAULT[:params]     = {}                              # default
+# Pagy::DEFAULT[:fragment]   = '#fragment'                     # example
+# Pagy::DEFAULT[:link_extra] = 'data-remote="true"'            # example
+# Pagy::DEFAULT[:i18n_key]   = 'pagy.item_name'                # default
+# Pagy::DEFAULT[:cycle]      = true                            # example
+
+
+# Extras
+# See https://ddnexus.github.io/pagy/extras
+
+
+# Backend Extras
+
+# Array extra: Paginate arrays efficiently, avoiding expensive array-wrapping and without overriding
+# See https://ddnexus.github.io/pagy/extras/array
+# require 'pagy/extras/array'
+
+# Calendar extra: Add pagination filtering by calendar time unit (year, quarter, month, week, day)
+# See https://ddnexus.github.io/pagy/extras/calendar
+# require 'pagy/extras/calendar'
+# Default for each unit
+# Pagy::Calendar::Year::DEFAULT[:order]     = :asc        # Time direction of pagination
+# Pagy::Calendar::Year::DEFAULT[:format]    = '%Y'        # strftime format
+#
+# Pagy::Calendar::Quarter::DEFAULT[:order]  = :asc        # Time direction of pagination
+# Pagy::Calendar::Quarter::DEFAULT[:format] = '%Y-Q%q'    # strftime format
+#
+# Pagy::Calendar::Month::DEFAULT[:order]    = :asc        # Time direction of pagination
+# Pagy::Calendar::Month::DEFAULT[:format]   = '%Y-%m'     # strftime format
+#
+# Pagy::Calendar::Week::DEFAULT[:order]     = :asc        # Time direction of pagination
+# Pagy::Calendar::Week::DEFAULT[:format]    = '%Y-%W'     # strftime format
+#
+# Pagy::Calendar::Day::DEFAULT[:order]      = :asc        # Time direction of pagination
+# Pagy::Calendar::Day::DEFAULT[:format]     = '%Y-%m-%d'  # strftime format
+#
+# Uncomment the following lines, if you need calendar localization without using the I18n extra
+# module LocalizePagyCalendar
+#   def localize(time, opts)
+#     ::I18n.l(time, **opts)
+#   end
+# end
+# Pagy::Calendar.prepend LocalizePagyCalendar
+
+# Countless extra: Paginate without any count, saving one query per rendering
+# See https://ddnexus.github.io/pagy/extras/countless
+# require 'pagy/extras/countless'
+# Pagy::DEFAULT[:countless_minimal] = false   # default (eager loading)
+
+# Elasticsearch Rails extra: Paginate `ElasticsearchRails::Results` objects
+# See https://ddnexus.github.io/pagy/extras/elasticsearch_rails
+# Default :pagy_search method: change only if you use also
+# the searchkick or meilisearch extra that defines the same
+# Pagy::DEFAULT[:elasticsearch_rails_pagy_search] = :pagy_search
+# Default original :search method called internally to do the actual search
+# Pagy::DEFAULT[:elasticsearch_rails_search] = :search
+# require 'pagy/extras/elasticsearch_rails'
+
+# Headers extra: http response headers (and other helpers) useful for API pagination
+# See http://ddnexus.github.io/pagy/extras/headers
+# require 'pagy/extras/headers'
+# Pagy::DEFAULT[:headers] = { page: 'Current-Page',
+#                            items: 'Page-Items',
+#                            count: 'Total-Count',
+#                            pages: 'Total-Pages' }     # default
+
+# Meilisearch extra: Paginate `Meilisearch` result objects
+# See https://ddnexus.github.io/pagy/extras/meilisearch
+# Default :pagy_search method: change only if you use also
+# the elasticsearch_rails or searchkick extra that define the same method
+# Pagy::DEFAULT[:meilisearch_pagy_search] = :pagy_search
+# Default original :search method called internally to do the actual search
+# Pagy::DEFAULT[:meilisearch_search] = :ms_search
+# require 'pagy/extras/meilisearch'
+
+# Metadata extra: Provides the pagination metadata to Javascript frameworks like Vue.js, react.js, etc.
+# See https://ddnexus.github.io/pagy/extras/metadata
+# you must require the frontend helpers internal extra (BEFORE the metadata extra) ONLY if you need also the :sequels
+# require 'pagy/extras/frontend_helpers'
+# require 'pagy/extras/metadata'
+# For performance reasons, you should explicitly set ONLY the metadata you use in the frontend
+# Pagy::DEFAULT[:metadata] = %i[scaffold_url page prev next last]   # example
+
+# Searchkick extra: Paginate `Searchkick::Results` objects
+# See https://ddnexus.github.io/pagy/extras/searchkick
+# Default :pagy_search method: change only if you use also
+# the elasticsearch_rails or meilisearch extra that defines the same
+# DEFAULT[:searchkick_pagy_search] = :pagy_search
+# Default original :search method called internally to do the actual search
+# Pagy::DEFAULT[:searchkick_search] = :search
+# require 'pagy/extras/searchkick'
+# uncomment if you are going to use Searchkick.pagy_search
+# Searchkick.extend Pagy::Searchkick
+
+
+# Frontend Extras
+
+# Bootstrap extra: Add nav, nav_js and combo_nav_js helpers and templates for Bootstrap pagination
+# See https://ddnexus.github.io/pagy/extras/bootstrap
+# require 'pagy/extras/bootstrap'
+
+# Bulma extra: Add nav, nav_js and combo_nav_js helpers and templates for Bulma pagination
+# See https://ddnexus.github.io/pagy/extras/bulma
+# require 'pagy/extras/bulma'
+
+# Foundation extra: Add nav, nav_js and combo_nav_js helpers and templates for Foundation pagination
+# See https://ddnexus.github.io/pagy/extras/foundation
+# require 'pagy/extras/foundation'
+
+# Materialize extra: Add nav, nav_js and combo_nav_js helpers for Materialize pagination
+# See https://ddnexus.github.io/pagy/extras/materialize
+# require 'pagy/extras/materialize'
+
+# Navs extra: Add nav_js and combo_nav_js javascript helpers
+# Notice: the other frontend extras add their own framework-styled versions,
+# so require this extra only if you need the unstyled version
+# See https://ddnexus.github.io/pagy/extras/navs
+# require 'pagy/extras/navs'
+
+# Semantic extra: Add nav, nav_js and combo_nav_js helpers for Semantic UI pagination
+# See https://ddnexus.github.io/pagy/extras/semantic
+# require 'pagy/extras/semantic'
+
+# UIkit extra: Add nav helper and templates for UIkit pagination
+# See https://ddnexus.github.io/pagy/extras/uikit
+# require 'pagy/extras/uikit'
+
+# Multi size var used by the *_nav_js helpers
+# See https://ddnexus.github.io/pagy/extras/navs#steps
+# Pagy::DEFAULT[:steps] = { 0 => [2,3,3,2], 540 => [3,5,5,3], 720 => [5,7,7,5] }   # example
+
+
+# Feature Extras
+
+# Gearbox extra: Automatically change the number of items per page depending on the page number
+# See https://ddnexus.github.io/pagy/extras/gearbox
+# require 'pagy/extras/gearbox'
+# set to false only if you want to make :gearbox_extra an opt-in variable
+# Pagy::DEFAULT[:gearbox_extra] = false               # default true
+# Pagy::DEFAULT[:gearbox_items] = [15, 30, 60, 100]   # default
+
+# Items extra: Allow the client to request a custom number of items per page with an optional selector UI
+# See https://ddnexus.github.io/pagy/extras/items
+# require 'pagy/extras/items'
+# set to false only if you want to make :items_extra an opt-in variable
+# Pagy::DEFAULT[:items_extra] = false    # default true
+# Pagy::DEFAULT[:items_param] = :items   # default
+# Pagy::DEFAULT[:max_items]   = 100      # default
+
+# Overflow extra: Allow for easy handling of overflowing pages
+# See https://ddnexus.github.io/pagy/extras/overflow
+# require 'pagy/extras/overflow'
+# Pagy::DEFAULT[:overflow] = :empty_page    # default  (other options: :last_page and :exception)
+
+# Support extra: Extra support for features like: incremental, infinite, auto-scroll pagination
+# See https://ddnexus.github.io/pagy/extras/support
+# require 'pagy/extras/support'
+
+# Trim extra: Remove the page=1 param from links
+# See https://ddnexus.github.io/pagy/extras/trim
+# require 'pagy/extras/trim'
+# set to false only if you want to make :trim_extra an opt-in variable
+# Pagy::DEFAULT[:trim_extra] = false # default true
+
+# Standalone extra: Use pagy in non Rack environment/gem
+# See https://ddnexus.github.io/pagy/extras/standalone
+# require 'pagy/extras/standalone'
+# Pagy::DEFAULT[:url] = 'http://www.example.com/subdir'  # optional default
+
+
+# Rails
+# Enable the .js file required by the helpers that use javascript
+# (pagy*_nav_js, pagy*_combo_nav_js, and pagy_items_selector_js)
+# See https://ddnexus.github.io/pagy/extras#javascript
+
+# With the asset pipeline
+# Sprockets need to look into the pagy javascripts dir, so add it to the assets paths
+# Rails.application.config.assets.paths << Pagy.root.join('javascripts')
+
+# I18n
+
+# Pagy internal I18n: ~18x faster using ~10x less memory than the i18n gem
+# See https://ddnexus.github.io/pagy/api/frontend#i18n
+# Notice: No need to configure anything in this section if your app uses only "en"
+# or if you use the i18n extra below
+#
+# Examples:
+# load the "de" built-in locale:
+# Pagy::I18n.load(locale: 'de')
+#
+# load the "de" locale defined in the custom file at :filepath:
+# Pagy::I18n.load(locale: 'de', filepath: 'path/to/pagy-de.yml')
+#
+# load the "de", "en" and "es" built-in locales:
+# (the first passed :locale will be used also as the default_locale)
+# Pagy::I18n.load({ locale: 'de' },
+#                 { locale: 'en' },
+#                 { locale: 'es' })
+#
+# load the "en" built-in locale, a custom "es" locale,
+# and a totally custom locale complete with a custom :pluralize proc:
+# (the first passed :locale will be used also as the default_locale)
+# Pagy::I18n.load({ locale: 'en' },
+#                 { locale: 'es', filepath: 'path/to/pagy-es.yml' },
+#                 { locale: 'xyz',  # not built-in
+#                   filepath: 'path/to/pagy-xyz.yml',
+#                   pluralize: lambda{ |count| ... } )
+
+
+# I18n extra: uses the standard i18n gem which is ~18x slower using ~10x more memory
+# than the default pagy internal i18n (see above)
+# See https://ddnexus.github.io/pagy/extras/i18n
+# require 'pagy/extras/i18n'
+
+# Default i18n key
+# Pagy::DEFAULT[:i18n_key] = 'pagy.item_name'   # default
+
+
+# When you are done setting your own default freeze it, so it will not get changed accidentally
+Pagy::DEFAULT.freeze
diff --git a/tailwind.config.js b/tailwind.config.js
index 4bca89f..1e89f76 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,8 @@
 module.exports = {
   content: [
     './app/views/**/*.html.erb',
+    './app/components/**/*.html.erb',
+    './app/components/**/*.rb',
     './app/helpers/**/*.rb',
     './app/assets/stylesheets/**/*.css',
     './app/javascript/**/*.js'
diff --git a/test/components/search_list_component_test.rb b/test/components/search_list_component_test.rb
new file mode 100644
index 0000000..2ad2f9a
--- /dev/null
+++ b/test/components/search_list_component_test.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class SearchListComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(SearchListComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end
diff --git a/test/components/search_list_form_component_test.rb b/test/components/search_list_form_component_test.rb
new file mode 100644
index 0000000..e393907
--- /dev/null
+++ b/test/components/search_list_form_component_test.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class SearchListFormComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(SearchListFormComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end
diff --git a/test/components/search_list_item_component_test.rb b/test/components/search_list_item_component_test.rb
new file mode 100644
index 0000000..902aab7
--- /dev/null
+++ b/test/components/search_list_item_component_test.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class SearchListItemComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(SearchListItemComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end
diff --git a/test/system/kit/products_test.rb b/test/system/kit/products_test.rb
index bd14fb3..8ae19fd 100644
--- a/test/system/kit/products_test.rb
+++ b/test/system/kit/products_test.rb
@@ -26,7 +26,7 @@ class ProductsTest < ApplicationSystemTestCase
 
     test 'should update Product' do
       visit kit_product_url(@kit_product)
-      click_on 'Edit this product', match: :first
+      click_on 'Edit this kit_product', match: :first
 
       fill_in 'Name', with: @kit_product.name
       click_on 'Update Product'

From d81b79a37bd380c291aa50318c2a604ff78bdd03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Tue, 25 Oct 2022 08:12:25 -0300
Subject: [PATCH 04/25] Improved code

---
 app/components/search_list_item_component.rb    | 2 +-
 app/controllers/kit/products_controller.rb      | 8 ++++----
 app/views/kit/products/destroy.turbo_stream.erb | 2 +-
 app/views/kit/products/update.turbo_stream.erb  | 2 +-
 app/views/layouts/update.turbo_stream.erb       | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/search_list_item_component.rb b/app/components/search_list_item_component.rb
index 7c55a17..6d6c7ea 100644
--- a/app/components/search_list_item_component.rb
+++ b/app/components/search_list_item_component.rb
@@ -23,7 +23,7 @@ def call
       )
     }
 
-    turbo_frame_tag "list_#{dom_id(@item)}" do
+    turbo_frame_tag dom_id(@item, 'list') do
       content_tag :li, class: "-mx-2" do
         link_to @item, html_options do
           content_tag :div, class: "flex items-center truncate" do
diff --git a/app/controllers/kit/products_controller.rb b/app/controllers/kit/products_controller.rb
index 8a019a5..3f50b4f 100644
--- a/app/controllers/kit/products_controller.rb
+++ b/app/controllers/kit/products_controller.rb
@@ -7,7 +7,7 @@ class ProductsController < ApplicationController
 
     # GET /kit/products or /kit/products.json
     def index
-      @kit_product = @kit_products.first
+      @kit_product = Kit::Product.new
     end
 
     # GET /kit/products/1 or /kit/products/1.json
@@ -50,7 +50,7 @@ def create
         if @kit_product.save
           flash.now[:notice] = 'Product was successfully created.'
 
-          format.html { redirect_to(kit_product_url(@kit_product)) }
+          format.html { redirect_to(@kit_product) }
           format.json { render(:show, status: :created, location: @kit_product) }
         else
           format.html do
@@ -71,7 +71,7 @@ def update
         if @kit_product.update(kit_product_params)
           flash.now[:notice] = 'Product was successfully updated.'
 
-          format.html { redirect_to(kit_product_url(@kit_product)) }
+          format.html { redirect_to(@kit_product) }
           format.json { render(:show, status: :ok, location: @kit_product) }
         else
           format.html do
@@ -102,7 +102,7 @@ def destroy
     private
 
     def load_kit_products
-      @q = Kit::Product.ransack(params[:q])
+      @q = Kit::Product.select(:id, :name).ransack(params[:q])
       @pagy, @kit_products = pagy(@q.result)
     end
 
diff --git a/app/views/kit/products/destroy.turbo_stream.erb b/app/views/kit/products/destroy.turbo_stream.erb
index 6389e01..2152604 100644
--- a/app/views/kit/products/destroy.turbo_stream.erb
+++ b/app/views/kit/products/destroy.turbo_stream.erb
@@ -1,3 +1,3 @@
-<%= turbo_stream.remove "list_#{dom_id(@kit_product)}" %>
+<%= turbo_stream.remove dom_id(@kit_product, 'list') %>
 <%= turbo_stream.update "#{@kit_product.model_name.singular}_form", partial: "kit/products/product", locals: { flash: flash, product: Kit::Product.new } %>
 
diff --git a/app/views/kit/products/update.turbo_stream.erb b/app/views/kit/products/update.turbo_stream.erb
index d7edf65..a14128d 100644
--- a/app/views/kit/products/update.turbo_stream.erb
+++ b/app/views/kit/products/update.turbo_stream.erb
@@ -1,2 +1,2 @@
-<%= turbo_stream.update "list_#{dom_id(@kit_product)}", inline: render(SearchListItemComponent.new(@kit_product)) %>
+<%= turbo_stream.update dom_id(@kit_product, 'list'), inline: render(SearchListItemComponent.new(@kit_product)) %>
 <%= turbo_stream.update "#{@kit_product.model_name.singular}_form", partial: "kit/products/product", locals: { flash: flash,  product: @kit_product } %>
diff --git a/app/views/layouts/update.turbo_stream.erb b/app/views/layouts/update.turbo_stream.erb
index d7edf65..a14128d 100644
--- a/app/views/layouts/update.turbo_stream.erb
+++ b/app/views/layouts/update.turbo_stream.erb
@@ -1,2 +1,2 @@
-<%= turbo_stream.update "list_#{dom_id(@kit_product)}", inline: render(SearchListItemComponent.new(@kit_product)) %>
+<%= turbo_stream.update dom_id(@kit_product, 'list'), inline: render(SearchListItemComponent.new(@kit_product)) %>
 <%= turbo_stream.update "#{@kit_product.model_name.singular}_form", partial: "kit/products/product", locals: { flash: flash,  product: @kit_product } %>

From b93423106159b8a78d22f17cf6d50e488366383e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Tue, 25 Oct 2022 08:22:50 -0300
Subject: [PATCH 05/25] Solved conflicts

---
 app/components/search_list_item_component.rb | 3 ---
 app/controllers/kit/products_controller.rb   | 4 ----
 2 files changed, 7 deletions(-)

diff --git a/app/components/search_list_item_component.rb b/app/components/search_list_item_component.rb
index d804fb9..6d6c7ea 100644
--- a/app/components/search_list_item_component.rb
+++ b/app/components/search_list_item_component.rb
@@ -1,11 +1,8 @@
 # frozen_string_literal: true
 
 class SearchListItemComponent < ViewComponent::Base
-<<<<<<< HEAD
   include Turbo::FramesHelper
 
-=======
->>>>>>> main
   def initialize(item, label: :name)
     @item = item
     @label = item.send(label)
diff --git a/app/controllers/kit/products_controller.rb b/app/controllers/kit/products_controller.rb
index 33fc279..3f50b4f 100644
--- a/app/controllers/kit/products_controller.rb
+++ b/app/controllers/kit/products_controller.rb
@@ -102,11 +102,7 @@ def destroy
     private
 
     def load_kit_products
-<<<<<<< HEAD
       @q = Kit::Product.select(:id, :name).ransack(params[:q])
-=======
-      @q = Kit::Product.ransack(params[:q])
->>>>>>> main
       @pagy, @kit_products = pagy(@q.result)
     end
 

From 25b34c1d5c9498178c14eb420eebfeba8a25d1d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Tue, 25 Oct 2022 08:31:30 -0300
Subject: [PATCH 06/25] Improved code

---
 app/views/kit/products/_product.json.jbuilder | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/kit/products/_product.json.jbuilder b/app/views/kit/products/_product.json.jbuilder
index 396313e..a4cc307 100644
--- a/app/views/kit/products/_product.json.jbuilder
+++ b/app/views/kit/products/_product.json.jbuilder
@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 
-json.extract!(kit_product, :id, :name, :created_at, :updated_at)
+json.extract!(kit_product, :id, :name)
 json.url(api_kit_product_url(kit_product, format: :json))

From 863f2ef7a1ac373277b8b96b23987a906f262991 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Tue, 25 Oct 2022 16:00:39 -0300
Subject: [PATCH 07/25] Inserted turbo on search form

---
 app/components/search_list_component.html.erb  |  2 +-
 app/components/search_list_component.rb        |  6 +++++-
 .../search_list_form_component.html.erb        |  2 +-
 app/components/search_list_form_component.rb   | 18 ++++++++++--------
 app/controllers/kit/products_controller.rb     | 13 +++++++++++--
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/app/components/search_list_component.html.erb b/app/components/search_list_component.html.erb
index 8a37d0b..d8063b9 100644
--- a/app/components/search_list_component.html.erb
+++ b/app/components/search_list_component.html.erb
@@ -1,4 +1,4 @@
-<%= form %>
+<%= form if form? %>
 <% if items? %>
   <div class="mt-4">
     <ul class="mb-6">
diff --git a/app/components/search_list_component.rb b/app/components/search_list_component.rb
index caaadd8..d868921 100644
--- a/app/components/search_list_component.rb
+++ b/app/components/search_list_component.rb
@@ -7,6 +7,10 @@ class SearchListComponent < ViewComponent::Base
   renders_many :items, SearchListItemComponent
 
   def before_render
-    @resource = form.ransack.object.model_name
+    @resource ||= form.ransack.object.model_name if form?
+  end
+
+  def initialize(resource: nil)
+    @resource = resource
   end
 end
diff --git a/app/components/search_list_form_component.html.erb b/app/components/search_list_form_component.html.erb
index 42a847d..e6f27bd 100644
--- a/app/components/search_list_form_component.html.erb
+++ b/app/components/search_list_form_component.html.erb
@@ -1,4 +1,4 @@
-<%= form_tag class: "relative" do |f| %>
+<%= form_tag class: "relative", data: { turbo_frame: "list_#{@resource.plural}" } do |f| %>
   <%= f.input_search @search_field, @search_value %>
   <%= 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">
diff --git a/app/components/search_list_form_component.rb b/app/components/search_list_form_component.rb
index 087ed7a..cda2cc5 100644
--- a/app/components/search_list_form_component.rb
+++ b/app/components/search_list_form_component.rb
@@ -1,10 +1,10 @@
 # frozen_string_literal: true
 
 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
 
@@ -21,30 +21,32 @@ def before_render
   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
diff --git a/app/controllers/kit/products_controller.rb b/app/controllers/kit/products_controller.rb
index 3f50b4f..e1cae24 100644
--- a/app/controllers/kit/products_controller.rb
+++ b/app/controllers/kit/products_controller.rb
@@ -8,6 +8,15 @@ class ProductsController < ApplicationController
     # GET /kit/products or /kit/products.json
     def index
       @kit_product = Kit::Product.new
+
+      if turbo_frame_request?
+        view_component = SearchListComponent.new(resource: Kit::Product.model_name)
+        @kit_products.each { |kit_product| view_component.with_item(kit_product) }
+
+        render view_component
+      else
+        render(:index)
+      end
     end
 
     # GET /kit/products/1 or /kit/products/1.json
@@ -15,7 +24,7 @@ def show
       respond_to do |format|
         format.html do
           if turbo_frame_request?
-            render partial: "kit/products/product", locals: { lash: flash, product: @kit_product }
+            render partial: 'kit/products/product', locals: { lash: flash, product: @kit_product }
           else
             render(:index)
           end
@@ -32,7 +41,7 @@ def new
       respond_to do |format|
         format.html do
           if turbo_frame_request?
-            render partial: "kit/products/product", locals: { lash: flash, product: @kit_product }
+            render partial: 'kit/products/product', locals: { lash: flash, product: @kit_product }
           else
             render(:index)
           end

From a7fa0f517117104b3f3dcbe96885f43950d15059 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Wed, 26 Oct 2022 08:57:13 -0300
Subject: [PATCH 08/25] Using variants

---
 app/controllers/application_controller.rb     |  8 ++++++
 app/controllers/kit/products_controller.rb    | 27 ++-----------------
 .../kit/products/index.html+turbo_frame.erb   |  4 +++
 .../kit/products/show.html+turbo_frame.erb    |  1 +
 4 files changed, 15 insertions(+), 25 deletions(-)
 create mode 100644 app/views/kit/products/index.html+turbo_frame.erb
 create mode 100644 app/views/kit/products/show.html+turbo_frame.erb

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 98ccf6f..815a137 100644
--- a/app/controllers/application_controller.rb
+++ b/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
diff --git a/app/controllers/kit/products_controller.rb b/app/controllers/kit/products_controller.rb
index e1cae24..bc82088 100644
--- a/app/controllers/kit/products_controller.rb
+++ b/app/controllers/kit/products_controller.rb
@@ -8,28 +8,12 @@ class ProductsController < ApplicationController
     # GET /kit/products or /kit/products.json
     def index
       @kit_product = Kit::Product.new
-
-      if turbo_frame_request?
-        view_component = SearchListComponent.new(resource: Kit::Product.model_name)
-        @kit_products.each { |kit_product| view_component.with_item(kit_product) }
-
-        render view_component
-      else
-        render(:index)
-      end
     end
 
     # GET /kit/products/1 or /kit/products/1.json
     def show
       respond_to do |format|
-        format.html do
-          if turbo_frame_request?
-            render partial: 'kit/products/product', locals: { lash: flash, product: @kit_product }
-          else
-            render(:index)
-          end
-        end
-
+        format.html { render(turbo_frame_request? ? :show : :index) }
         format.json { render(:show) }
       end
     end
@@ -39,14 +23,7 @@ def new
       @kit_product = Kit::Product.new
 
       respond_to do |format|
-        format.html do
-          if turbo_frame_request?
-            render partial: 'kit/products/product', locals: { lash: flash, product: @kit_product }
-          else
-            render(:index)
-          end
-        end
-
+        format.html { render(turbo_frame_request? ? :show : :index) }
         format.turbo_stream { render(:show) }
       end
     end
diff --git a/app/views/kit/products/index.html+turbo_frame.erb b/app/views/kit/products/index.html+turbo_frame.erb
new file mode 100644
index 0000000..770f9b1
--- /dev/null
+++ b/app/views/kit/products/index.html+turbo_frame.erb
@@ -0,0 +1,4 @@
+<%= render SearchListComponent.new do |c| %>
+  <%= c.with_form(ransack: @q) %>
+  <%= @kit_products.each { |kit_product| c.with_item(kit_product) } %>
+<% end %>
diff --git a/app/views/kit/products/show.html+turbo_frame.erb b/app/views/kit/products/show.html+turbo_frame.erb
new file mode 100644
index 0000000..5bc20b5
--- /dev/null
+++ b/app/views/kit/products/show.html+turbo_frame.erb
@@ -0,0 +1 @@
+<%= render @kit_product %>

From 80a0e82a34ccb2b459041ff03520514c8f2cf54e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Wed, 26 Oct 2022 08:57:36 -0300
Subject: [PATCH 09/25] Improved code format

---
 .rubocop.yml                                 | 56 +++++++++++++++++++-
 app/components/search_list_item_component.rb | 16 +++---
 2 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/.rubocop.yml b/.rubocop.yml
index 3166729..307018b 100644
--- a/.rubocop.yml
+++ b/.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
diff --git a/app/components/search_list_item_component.rb b/app/components/search_list_item_component.rb
index 6d6c7ea..1113cc6 100644
--- a/app/components/search_list_item_component.rb
+++ b/app/components/search_list_item_component.rb
@@ -15,20 +15,20 @@ def active?
   def call
     html_options = {
       aria: { label: "Edit this #{@item.model_name.singular}" },
-      data: { turbo_frame: "#{@item.model_name.singular}_form" } ,
+      data: { turbo_frame: "#{@item.model_name.singular}_form" },
       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?,
         }
-      )
+      ),
     }
 
     turbo_frame_tag dom_id(@item, 'list') do
-      content_tag :li, class: "-mx-2" do
+      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"
+          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
           end
         end

From 8c3db2feb37affb9f7b3e689d7d21a4f7ad74595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Wed, 26 Oct 2022 21:06:01 -0300
Subject: [PATCH 10/25] Fixed system teste

---
 test/system/kit/products_test.rb | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/test/system/kit/products_test.rb b/test/system/kit/products_test.rb
index 8ae19fd..8a678ab 100644
--- a/test/system/kit/products_test.rb
+++ b/test/system/kit/products_test.rb
@@ -17,8 +17,10 @@ class ProductsTest < ApplicationSystemTestCase
       visit kit_products_url
       click_on 'New product'
 
-      fill_in 'Name', with: @kit_product.name
-      click_on 'Create Product'
+      within("form##{dom_id(Kit::Product.new)}") do
+        fill_in 'Name', with: @kit_product.name
+        click_on 'Create Product'
+      end
 
       assert_text 'Product was successfully created'
       click_on 'Back'
@@ -26,10 +28,13 @@ class ProductsTest < ApplicationSystemTestCase
 
     test 'should update Product' do
       visit kit_product_url(@kit_product)
-      click_on 'Edit this kit_product', match: :first
 
-      fill_in 'Name', with: @kit_product.name
-      click_on 'Update Product'
+      find("li a[href='#{kit_product_path(@kit_product)}']").click
+
+      within("form##{dom_id(@kit_product, :edit)}") do
+        fill_in 'Name', with: @kit_product.name
+        click_on 'Update Product'
+      end
 
       assert_text 'Product was successfully updated'
       click_on 'Back'

From 7cc1b0b6f8f42c87868db8089de0010b708a0674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Thu, 27 Oct 2022 00:10:28 -0300
Subject: [PATCH 11/25] Inserted stimulus features

---
 app/components/search_list_component.html.erb |  7 +++--
 .../search_list_form_component.html.erb       |  2 +-
 app/components/search_list_item_component.rb  | 27 +++++++++++++------
 app/javascript/controllers/index.js           |  3 +++
 .../controllers/search_list_controller.js     | 21 +++++++++++++++
 .../kit/products/index.html+turbo_frame.erb   |  3 +--
 package.json                                  |  1 +
 yarn.lock                                     |  5 ++++
 8 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 app/javascript/controllers/search_list_controller.js

diff --git a/app/components/search_list_component.html.erb b/app/components/search_list_component.html.erb
index d8063b9..1d5bb5f 100644
--- a/app/components/search_list_component.html.erb
+++ b/app/components/search_list_component.html.erb
@@ -1,11 +1,14 @@
-<%= form if form? %>
-<% if items? %>
+<%= content_tag :div, data: { controller: "search-list" } do %>
+  <%= form if form? %>
   <div class="mt-4">
     <ul class="mb-6">
       <%= 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>
diff --git a/app/components/search_list_form_component.html.erb b/app/components/search_list_form_component.html.erb
index e6f27bd..a3c32b6 100644
--- a/app/components/search_list_form_component.html.erb
+++ b/app/components/search_list_form_component.html.erb
@@ -1,5 +1,5 @@
 <%= form_tag class: "relative", data: { turbo_frame: "list_#{@resource.plural}" } do |f| %>
-  <%= f.input_search @search_field, @search_value %>
+  <%= 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" />
diff --git a/app/components/search_list_item_component.rb b/app/components/search_list_item_component.rb
index 1113cc6..f815549 100644
--- a/app/components/search_list_item_component.rb
+++ b/app/components/search_list_item_component.rb
@@ -9,30 +9,41 @@ def initialize(item, label: :name)
   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.singular}" },
-      data: { turbo_frame: "#{@item.model_name.singular}_form" },
+      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?,
+          'text-slate-300': @item.new_record?,
         }
       ),
     }
 
     turbo_frame_tag dom_id(@item, 'list') do
       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
-          end
+        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
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 373c3ed..0d62f03 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -3,3 +3,6 @@
 // ./bin/rails generate stimulus controllerName
 
 import { application } from "./application"
+
+import SearchListController from "./search_list_controller"
+application.register("search-list", SearchListController)
diff --git a/app/javascript/controllers/search_list_controller.js b/app/javascript/controllers/search_list_controller.js
new file mode 100644
index 0000000..9973035
--- /dev/null
+++ b/app/javascript/controllers/search_list_controller.js
@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+import debounce from 'lodash/debounce';
+
+// Connects to data-controller="search-list"
+export default class extends Controller {
+  static values = { url: String };
+  static targets = ['searchField', 'item'];
+
+  connect() {
+    this.searchFieldTarget.addEventListener("keyup", debounce(this.search, 300));
+  }
+
+  selectItem(event) {
+    this.itemTargets.forEach(item => item.classList.remove('bg-indigo-100'));
+    event.target.closest('a').classList.add('bg-indigo-100');
+  }
+
+  search(event) {
+    event.target.form.requestSubmit();
+  }
+}
diff --git a/app/views/kit/products/index.html+turbo_frame.erb b/app/views/kit/products/index.html+turbo_frame.erb
index 770f9b1..d81f0fb 100644
--- a/app/views/kit/products/index.html+turbo_frame.erb
+++ b/app/views/kit/products/index.html+turbo_frame.erb
@@ -1,4 +1,3 @@
-<%= render SearchListComponent.new do |c| %>
-  <%= c.with_form(ransack: @q) %>
+<%= render SearchListComponent.new(resource: @q.object.model_name) do |c| %>
   <%= @kit_products.each { |kit_product| c.with_item(kit_product) } %>
 <% end %>
diff --git a/package.json b/package.json
index d4df82a..236c085 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "alpinejs": "^3.10.4",
     "autoprefixer": "^10.4.12",
     "esbuild": "^0.15.12",
+    "lodash": "^4.17.21",
     "postcss": "^8.4.18",
     "tailwindcss": "^3.2.1"
   },
diff --git a/yarn.lock b/yarn.lock
index 0bc50be..c77520d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -435,6 +435,11 @@ lilconfig@^2.0.5, lilconfig@^2.0.6:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"

From 95c7c2abcb58a156bf9ccb32c24f17cf9a173b6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Sat, 12 Nov 2022 05:48:56 -0300
Subject: [PATCH 12/25] Inserted frontend

---
 .vscode/settings.json                         |    3 +
 Gemfile                                       |   10 +-
 Gemfile.lock                                  |    3 +
 app/controllers/kit/products_controller.rb    |    4 +-
 config/initializers/cors.rb                   |    6 +
 frontend/.eslintrc.json                       |    3 +
 frontend/.gitignore                           |   38 +
 frontend/.nvmrc                               |    1 +
 frontend/README.md                            |   34 +
 frontend/next.config.js                       |    8 +
 frontend/package.json                         |   38 +
 frontend/pages/_app.tsx                       |   13 +
 frontend/pages/_document.tsx                  |   13 +
 frontend/pages/index.tsx                      |    5 +
 frontend/pages/kit/products/[id].tsx          |   74 +
 frontend/pages/kit/products/index.tsx         |   58 +
 frontend/pages/kit/products/services.ts       |   47 +
 frontend/postcss.config.js                    |    6 +
 frontend/public/favicon.ico                   |  Bin 0 -> 25931 bytes
 frontend/public/vercel.svg                    |    4 +
 frontend/src/components/Form/Actions.tsx      |   34 +
 frontend/src/components/Form/Input.tsx        |   41 +
 frontend/src/components/Form/index.tsx        |   57 +
 frontend/src/components/Layout/Page.tsx       |   34 +
 frontend/src/components/Layout/Sidebar.tsx    |   53 +
 frontend/src/components/Layout/index.tsx      |   13 +
 frontend/src/components/Notification.tsx      |   46 +
 frontend/src/components/Products/Form.tsx     |  132 +
 frontend/src/components/Products/Sidebar.tsx  |   47 +
 frontend/src/components/Products/context.tsx  |  125 +
 frontend/src/components/SearchList/Form.tsx   |   50 +
 .../src/components/SearchList/ListItem.tsx    |   36 +
 frontend/src/components/SearchList/index.tsx  |   34 +
 frontend/src/services.ts                      |   16 +
 .../styles/additional-styles/flatpickr.css    |  229 ++
 .../styles/additional-styles/range-slider.css |   57 +
 frontend/styles/additional-styles/theme.css   |    8 +
 .../additional-styles/toggle-switch.css       |   35 +
 .../additional-styles/utility-patterns.css    |  117 +
 frontend/styles/globals.css                   |   38 +
 frontend/tailwind.config.js                   |   11 +
 frontend/tsconfig.json                        |   48 +
 frontend/yarn.lock                            | 2211 +++++++++++++++++
 43 files changed, 3834 insertions(+), 6 deletions(-)
 create mode 100644 config/initializers/cors.rb
 create mode 100644 frontend/.eslintrc.json
 create mode 100644 frontend/.gitignore
 create mode 100644 frontend/.nvmrc
 create mode 100644 frontend/README.md
 create mode 100644 frontend/next.config.js
 create mode 100644 frontend/package.json
 create mode 100644 frontend/pages/_app.tsx
 create mode 100644 frontend/pages/_document.tsx
 create mode 100644 frontend/pages/index.tsx
 create mode 100644 frontend/pages/kit/products/[id].tsx
 create mode 100644 frontend/pages/kit/products/index.tsx
 create mode 100644 frontend/pages/kit/products/services.ts
 create mode 100644 frontend/postcss.config.js
 create mode 100644 frontend/public/favicon.ico
 create mode 100644 frontend/public/vercel.svg
 create mode 100644 frontend/src/components/Form/Actions.tsx
 create mode 100644 frontend/src/components/Form/Input.tsx
 create mode 100644 frontend/src/components/Form/index.tsx
 create mode 100644 frontend/src/components/Layout/Page.tsx
 create mode 100644 frontend/src/components/Layout/Sidebar.tsx
 create mode 100644 frontend/src/components/Layout/index.tsx
 create mode 100644 frontend/src/components/Notification.tsx
 create mode 100644 frontend/src/components/Products/Form.tsx
 create mode 100644 frontend/src/components/Products/Sidebar.tsx
 create mode 100644 frontend/src/components/Products/context.tsx
 create mode 100644 frontend/src/components/SearchList/Form.tsx
 create mode 100644 frontend/src/components/SearchList/ListItem.tsx
 create mode 100644 frontend/src/components/SearchList/index.tsx
 create mode 100644 frontend/src/services.ts
 create mode 100644 frontend/styles/additional-styles/flatpickr.css
 create mode 100644 frontend/styles/additional-styles/range-slider.css
 create mode 100644 frontend/styles/additional-styles/theme.css
 create mode 100644 frontend/styles/additional-styles/toggle-switch.css
 create mode 100644 frontend/styles/additional-styles/utility-patterns.css
 create mode 100644 frontend/styles/globals.css
 create mode 100644 frontend/tailwind.config.js
 create mode 100644 frontend/tsconfig.json
 create mode 100644 frontend/yarn.lock

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d223a5f..e44b954 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,6 +3,9 @@
     80,
     120
   ],
+  "files.exclude": {
+    "frontend": true
+  },
   "files.trimTrailingWhitespace": true,
   "editor.tabSize": 2,
   "files.insertFinalNewline": true,
diff --git a/Gemfile b/Gemfile
index 3b10368..8d9dd91 100644
--- a/Gemfile
+++ b/Gemfile
@@ -69,7 +69,7 @@ group :development do
   # gem "spring"
 
   gem 'solargraph'
-  gem "reek", "~> 6.1"
+  gem 'reek', '~> 6.1'
   gem 'rubocop', '~> 1.37'
   gem 'rubocop-rails', '~> 2.17'
 end
@@ -81,8 +81,8 @@ group :test do
   gem 'webdrivers'
 end
 
+gem 'pagy', '~> 5.10'
+gem 'rack-cors', '~> 1.1'
+gem 'ransack', '~> 3.2'
 gem 'simple_form', '~> 5.1'
-
-gem "ransack", "~> 3.2"
-gem "pagy", "~> 5.10"
-gem "view_component", "~> 2.74"
+gem 'view_component', '~> 2.74'
diff --git a/Gemfile.lock b/Gemfile.lock
index f3565f4..5d94768 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -146,6 +146,8 @@ GEM
       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)
@@ -287,6 +289,7 @@ DEPENDENCIES
   jsbundling-rails
   pagy (~> 5.10)
   puma (~> 5.0)
+  rack-cors (~> 1.1)
   rails (~> 7.0.4)
   ransack (~> 3.2)
   reek (~> 6.1)
diff --git a/app/controllers/kit/products_controller.rb b/app/controllers/kit/products_controller.rb
index bc82088..d33f724 100644
--- a/app/controllers/kit/products_controller.rb
+++ b/app/controllers/kit/products_controller.rb
@@ -2,6 +2,8 @@
 
 module Kit
   class ProductsController < ApplicationController
+    skip_before_action :verify_authenticity_token
+
     before_action :load_kit_products, only: %i[index show new]
     before_action :set_kit_product, only: %i[show update destroy]
 
@@ -88,7 +90,7 @@ def destroy
     private
 
     def load_kit_products
-      @q = Kit::Product.select(:id, :name).ransack(params[:q])
+      @q = Kit::Product.select(:id, :name).order(:created_at).ransack(params[:q])
       @pagy, @kit_products = pagy(@q.result)
     end
 
diff --git a/config/initializers/cors.rb b/config/initializers/cors.rb
new file mode 100644
index 0000000..9937e1e
--- /dev/null
+++ b/config/initializers/cors.rb
@@ -0,0 +1,6 @@
+Rails.application.config.middleware.insert_before 0, Rack::Cors do
+  allow do
+    origins '*'
+    resource '*', headers: :any, methods: [:get, :post, :patch, :put, :delete]
+  end
+end
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
new file mode 100644
index 0000000..bffb357
--- /dev/null
+++ b/frontend/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..4f360c8
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vscode
diff --git a/frontend/.nvmrc b/frontend/.nvmrc
new file mode 100644
index 0000000..9dfef47
--- /dev/null
+++ b/frontend/.nvmrc
@@ -0,0 +1 @@
+v18.12.0
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..c87e042
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/frontend/next.config.js b/frontend/next.config.js
new file mode 100644
index 0000000..156c8aa
--- /dev/null
+++ b/frontend/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  pageExtensions: ["jsx", "tsx"],
+};
+
+module.exports = nextConfig;
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..1d38215
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^2.9.10",
+    "@radix-ui/react-slot": "^1.0.1",
+    "axios": "^1.1.3",
+    "clsx": "^1.2.1",
+    "lodash": "^4.17.21",
+    "next": "13.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.39.0",
+    "swr": "^1.3.0",
+    "usehooks-ts": "^2.9.1",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.186",
+    "@types/node": "18.11.7",
+    "@types/react": "18.0.24",
+    "@types/react-dom": "18.0.8",
+    "autoprefixer": "^10.4.13",
+    "eslint": "8.26.0",
+    "eslint-config-next": "13.0.0",
+    "postcss": "^8.4.18",
+    "sass": "^1.55.0",
+    "tailwindcss": "^3.2.1",
+    "typescript": "4.8.4"
+  }
+}
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
new file mode 100644
index 0000000..a1d9740
--- /dev/null
+++ b/frontend/pages/_app.tsx
@@ -0,0 +1,13 @@
+import type { AppProps } from "next/app";
+
+import Layout from "@/components/Layout";
+
+import "../styles/globals.css";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
+}
diff --git a/frontend/pages/_document.tsx b/frontend/pages/_document.tsx
new file mode 100644
index 0000000..0fc7c72
--- /dev/null
+++ b/frontend/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body className="font-inter antialiased bg-slate-100 text-slate-600">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
new file mode 100644
index 0000000..9351b5c
--- /dev/null
+++ b/frontend/pages/index.tsx
@@ -0,0 +1,5 @@
+import Link from "next/link";
+
+export default function Home() {
+  return <Link href="/kit/products">Products</Link>;
+}
diff --git a/frontend/pages/kit/products/[id].tsx b/frontend/pages/kit/products/[id].tsx
new file mode 100644
index 0000000..847cbbe
--- /dev/null
+++ b/frontend/pages/kit/products/[id].tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { GetStaticPropsContext } from "next/types";
+
+import { fetcher, useProduct, Product } from "./services";
+
+import Form from "@/src/components/Products/Form";
+import Sidebar from "@/components/Products/Sidebar";
+import * as Page from "@/components/Layout/Page";
+import { ProductsProvider } from "@/src/components/Products/context";
+
+interface ProductsPageProps {
+  id: number;
+  fallback: Record<string, any>;
+}
+
+export default function ProductPage({ id, fallback }: ProductsPageProps) {
+  const [selectId, setSelectId] = useState(id);
+  const { product } = useProduct(selectId, fallback[`kit/products/${id}`]);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!selectId || selectId === id) return;
+
+    router.push(`/kit/products/[id]`, `/kit/products/${selectId}`, {
+      shallow: true,
+    });
+  }, [selectId]);
+
+  return (
+    <ProductsProvider value={{ fallback }}>
+      <Page.Root>
+        <Page.Sidebar>
+          <Sidebar loadProduct={setSelectId} selectProduct={product} />
+        </Page.Sidebar>
+        <Page.Content>
+          <Form product={product || ({} as Product)} />
+        </Page.Content>
+      </Page.Root>
+    </ProductsProvider>
+  );
+}
+
+export async function getServerSideProps(context: GetStaticPropsContext) {
+  if (context.params?.id === "new") {
+    return {
+      redirect: {
+        permanent: true,
+        destination: "/kit/products",
+      },
+      props: {},
+    };
+  }
+
+  let fallback: Record<string, any> = {
+    "kit/products": await fetcher("kit/products"),
+  };
+
+  if (context.params?.id) {
+    fallback["kit/products#selected"] = await fetcher(
+      `kit/products/${context.params?.id}`
+    );
+
+    fallback[`kit/products/${context.params?.id}`] =
+      fallback["kit/products#selected"];
+  }
+
+  return {
+    props: {
+      id: context.params?.id || "",
+      fallback,
+    },
+  };
+}
diff --git a/frontend/pages/kit/products/index.tsx b/frontend/pages/kit/products/index.tsx
new file mode 100644
index 0000000..cdaadea
--- /dev/null
+++ b/frontend/pages/kit/products/index.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+import { fetcher, useProduct, Product } from "./services";
+
+import Form from "@/src/components/Products/Form";
+import Sidebar from "@/components/Products/Sidebar";
+import * as Page from "@/components/Layout/Page";
+import { ProductsProvider } from "@/src/components/Products/context";
+
+interface ProductsPageProps {
+  id: number;
+  fallback: Record<string, any>;
+}
+
+export default function ProductsPage({ fallback }: ProductsPageProps) {
+  const [selectId, setSelectId] = useState();
+  const { product } = useProduct(selectId);
+  // const router = useRouter();
+
+  // useEffect(
+  //   () => (!router.query.id ? setSelectId(undefined) : undefined),
+  //   [router.query.id]
+  // );
+
+  // useEffect(() => {
+  //   if (!selectId || selectId === router.query.id) return;
+
+  //   router.push(`?id=${selectId}`, `/kit/products/${selectId}`, {
+  //     shallow: true,
+  //   });
+  // }, [selectId]);
+
+  return (
+    <ProductsProvider value={{ fallback }}>
+      <Page.Root>
+        <Page.Sidebar>
+          <Sidebar loadProduct={setSelectId} selectProduct={product} />
+        </Page.Sidebar>
+        <Page.Content>
+          <Form product={product || ({ name: "" } as Product)} />
+        </Page.Content>
+      </Page.Root>
+    </ProductsProvider>
+  );
+}
+
+export async function getServerSideProps() {
+  const products = await fetcher("kit/products");
+
+  return {
+    props: {
+      fallback: {
+        "kit/products": products,
+      },
+    },
+  };
+}
diff --git a/frontend/pages/kit/products/services.ts b/frontend/pages/kit/products/services.ts
new file mode 100644
index 0000000..aa172f6
--- /dev/null
+++ b/frontend/pages/kit/products/services.ts
@@ -0,0 +1,47 @@
+import useSWR from "swr";
+import { fetcher } from "@/src/services";
+
+export { fetcher };
+
+export interface Product {
+  id?: number;
+  name: string;
+}
+
+export function useProducts(params: any, fallbackData: any = null) {
+  const { data, error, mutate } = useSWR<Product[]>(
+    "kit/products",
+    () => fetcher("kit/products", params),
+    {
+      fallbackData,
+      revalidateOnFocus: false,
+      revalidateOnMount: false,
+    }
+  );
+
+  return {
+    products: data || [],
+    isLoading: !error && !data,
+    isError: error,
+    mutate,
+  };
+}
+
+export function useProduct(id?: number, fallbackData: any = null) {
+  const { data, error, mutate } = useSWR<Product>(
+    id ? `kit/products/${id}` : null,
+    fetcher,
+    {
+      fallbackData,
+      revalidateOnFocus: false,
+      revalidateOnMount: false,
+    }
+  );
+
+  return {
+    product: data,
+    isLoading: !error && !data,
+    isError: error,
+    mutate,
+  };
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c
GIT binary patch
literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

literal 0
HcmV?d00001

diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg
new file mode 100644
index 0000000..fbf0e25
--- /dev/null
+++ b/frontend/public/vercel.svg
@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/Form/Actions.tsx b/frontend/src/components/Form/Actions.tsx
new file mode 100644
index 0000000..5c2b665
--- /dev/null
+++ b/frontend/src/components/Form/Actions.tsx
@@ -0,0 +1,34 @@
+import Link, { LinkProps } from "next/link";
+import clsx from "clsx";
+
+interface FormActionsProps {
+  resource: any;
+  children: React.ReactNode;
+}
+
+function FormActions({ resource, children }: FormActionsProps) {
+  return (
+    <footer>
+      <div className="flex flex-col py-5 border-t border-slate-200">
+        <div className="flex self-end">
+          {resource && resource.id && children}
+          <input
+            type="submit"
+            name="commit"
+            value={resource && resource.id ? "Update" : "Create"}
+            className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3"
+          />
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+function FormActionsExtra({
+  className,
+  ...rest
+}: LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return <Link className={clsx(`btn shadow-none mr-3`, className)} {...rest} />;
+}
+
+export { FormActions as Root, FormActionsExtra as Extra };
diff --git a/frontend/src/components/Form/Input.tsx b/frontend/src/components/Form/Input.tsx
new file mode 100644
index 0000000..6d19b00
--- /dev/null
+++ b/frontend/src/components/Form/Input.tsx
@@ -0,0 +1,41 @@
+import clsx from "clsx";
+import { FieldError, FieldErrorsImpl, Merge } from "react-hook-form";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  register?: any;
+  error?: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
+}
+
+export default function Input({ name, register, error, ...rest }: InputProps) {
+  let errors = [];
+
+  if (Array.isArray(error)) {
+    errors = error;
+  } else if (error) {
+    errors.push(error.message as string);
+  }
+
+  return (
+    <div className="grid gap-5 md:grid-cols-3">
+      <div>
+        <div
+          className={clsx("input string required kit_product_name", {
+            field_with_errors: error,
+          })}
+        >
+          <label className="string required block text-sm font-medium mb-1">
+            <abbr title="required">*</abbr> Name
+          </label>
+          <input {...register(name)} {...rest} />
+          {errors && (
+            <ul className="error">
+              {errors.map((message) => (
+                <li key={message}>{message}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Form/index.tsx b/frontend/src/components/Form/index.tsx
new file mode 100644
index 0000000..b560ef5
--- /dev/null
+++ b/frontend/src/components/Form/index.tsx
@@ -0,0 +1,57 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { createElement, ReactElement, useEffect } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+export { default as Input } from "./Input";
+
+interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  schema?: any;
+  defaultValues?: Record<string, any>;
+  defaultErrors?: Record<string, any>;
+  children: ReactElement | ReactElement[];
+  onSubmit: SubmitHandler<any>;
+}
+
+export default function Form({
+  className,
+  schema,
+  defaultValues,
+  defaultErrors = {},
+  children,
+  onSubmit,
+}: FormProps) {
+  const {
+    handleSubmit,
+    register,
+    reset,
+    formState: { errors },
+  } = useForm({
+    defaultValues,
+    resolver: yupResolver(schema),
+  });
+
+  useEffect(() => {
+    reset(defaultValues);
+  }, [defaultValues]);
+
+  return (
+    <form className={className} onSubmit={handleSubmit(onSubmit)}>
+      {Array.isArray(children)
+        ? children.map((child) => {
+            return child.props.name
+              ? createElement(child.type, {
+                  ...{
+                    ...child.props,
+                    register,
+                    error:
+                      errors[child.props.name] ||
+                      defaultErrors[child.props.name],
+                    key: child.props.name,
+                  },
+                })
+              : child;
+          })
+        : children}
+    </form>
+  );
+}
diff --git a/frontend/src/components/Layout/Page.tsx b/frontend/src/components/Layout/Page.tsx
new file mode 100644
index 0000000..499a55c
--- /dev/null
+++ b/frontend/src/components/Layout/Page.tsx
@@ -0,0 +1,34 @@
+function Page(props: { children: React.ReactElement[] }) {
+  return <div className="relative flex">{props.children}</div>;
+}
+
+function PageSidebar(props: { children: React.ReactElement }) {
+  return <div>{props.children}</div>;
+}
+
+function PageHeader() {
+  return (
+    <div className="sticky">
+      <div className="flex items-center justify-between bg-white border-b border-slate-200 px-4 sm:px-6 md:px-5 h-16">
+        <div className="flex items-center"></div>
+        <div className="flex"></div>
+      </div>
+    </div>
+  );
+}
+
+function PageContent(props: { children: React.ReactElement }) {
+  return (
+    <div className="grow flex flex-col">
+      <PageHeader />
+      <div className="grow px-4 sm:px-6 md:px-5 py-6">{props.children}</div>
+    </div>
+  );
+}
+
+export {
+  Page as Root,
+  PageSidebar as Sidebar,
+  PageHeader as Header,
+  PageContent as Content,
+};
diff --git a/frontend/src/components/Layout/Sidebar.tsx b/frontend/src/components/Layout/Sidebar.tsx
new file mode 100644
index 0000000..f337d3e
--- /dev/null
+++ b/frontend/src/components/Layout/Sidebar.tsx
@@ -0,0 +1,53 @@
+import Link from "next/link";
+import SearchList, { SearchListProps } from "../SearchList";
+
+interface SidebarProps {
+  children: React.ReactElement[];
+}
+
+function Sidebar({ children }: SidebarProps) {
+  return (
+    <div className="sticky top-16 bg-white overflow-x-hidden overflow-y-auto no-scrollbar shrink-0 border-r border-slate-200 w-80 h-[100vh]">
+      <div>
+        <div className="sticky top-0 z-10">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+interface SidebarHeaderProps {
+  href: string;
+  hrefNew: string;
+  title: string;
+}
+
+function SidebarHeader({ href, hrefNew, title }: SidebarHeaderProps) {
+  return (
+    <div className="flex items-center bg-white border-b border-slate-200 px-5 h-16">
+      <div className="w-full flex items-center justify-between">
+        <div className="relative">
+          <h1 className="font-semibold text-slate-800">
+            <Link href={href} aria-label="List items">
+              {title}
+            </Link>
+          </h1>
+        </div>
+        <Link
+          href={hrefNew}
+          aria-label="New item"
+          className="p-1.5 shrink-0 rounded border border-slate-200 hover:border-slate-300 shadow-sm ml-2"
+        >
+          <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+            <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z"></path>
+          </svg>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+function SidebarList(props: SearchListProps) {
+  return <SearchList {...props} />;
+}
+
+export { Sidebar as Root, SidebarHeader as Header, SidebarList as List };
diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
new file mode 100644
index 0000000..36d8406
--- /dev/null
+++ b/frontend/src/components/Layout/index.tsx
@@ -0,0 +1,13 @@
+interface LayoutProps {
+  children: React.ReactElement;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+        <main>{children}</main>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
new file mode 100644
index 0000000..46f4289
--- /dev/null
+++ b/frontend/src/components/Notification.tsx
@@ -0,0 +1,46 @@
+import clsx from "clsx";
+
+interface NotificationProps {
+  message: string | undefined;
+  type?: "success" | "warning" | "error" | "info";
+}
+
+export default function Notification({ message, type }: NotificationProps) {
+  if (!message) return null;
+
+  let colorClass;
+
+  switch (type) {
+    case "warning":
+      colorClass = "";
+      break;
+
+    case "error":
+      colorClass = "";
+      break;
+
+    case "info":
+      colorClass = "";
+      break;
+
+    default:
+      colorClass = "bg-emerald-100 border border-emerald-200 text-emerald-600";
+      break;
+  }
+
+  return message ? (
+    <div className={`px-4 py-2 rounded-sm text-sm ${colorClass}`}>
+      <div className="flex w-full justify-between items-start">
+        <div className="flex">
+          <svg
+            className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z"></path>
+          </svg>
+          <div>{message}</div>
+        </div>
+      </div>
+    </div>
+  ) : null;
+}
diff --git a/frontend/src/components/Products/Form.tsx b/frontend/src/components/Products/Form.tsx
new file mode 100644
index 0000000..db6e4dc
--- /dev/null
+++ b/frontend/src/components/Products/Form.tsx
@@ -0,0 +1,132 @@
+import * as yup from "yup";
+import { useEffect, useState } from "react";
+import { api } from "@/src/services";
+import { useRouter } from "next/router";
+import { useSWRConfig } from "swr";
+import request from "axios";
+
+import { Product } from "@/pages/kit/products/services";
+import FormPrimitive, { Input } from "@/components/Form";
+import Notification from "@/components/Notification";
+import * as FormActions from "@/components/Form/Actions";
+
+interface FormProps {
+  product: Product;
+}
+
+const schema = yup
+  .object({
+    name: yup.string().required(),
+  })
+  .required();
+
+export default function Form(props: FormProps): JSX.Element {
+  const [message, setMessage] = useState<string>();
+  const [product, setProduct] = useState<Product>(props.product);
+  const [errors, setErrors] = useState({});
+  const { mutate } = useSWRConfig();
+  const router = useRouter();
+
+  useEffect(() => {
+    setMessage("");
+    setProduct(props.product as Product);
+  }, [props.product]);
+
+  const onSubmit = (data: Product) => {
+    mutate(
+      "kit/products",
+      async (products: Product[]) => {
+        try {
+          const { data: updatedProduct } = await api.request({
+            url: `kit/products/${data.id || ""}`,
+            method: data.id ? "put" : "post",
+            data: {
+              kit_product: data,
+            },
+          });
+
+          // if (!data.id) {
+          //   router.push(
+          //     `/kit/products/[id]`,
+          //     `/kit/products/${updatedProduct.id}`,
+          //     {
+          //       shallow: true,
+          //     }
+          //   );
+          // }
+
+          setProduct((prevState) => ({ ...prevState, ...updatedProduct }));
+
+          if (products.length <= 0 || !data.id) {
+            setMessage("Product was successfully created.");
+
+            return [...products, updatedProduct];
+          }
+
+          setMessage("Product was successfully updated.");
+
+          return products.map((item) =>
+            item.id === data.id ? updatedProduct : item
+          );
+        } catch (err) {
+          if (request.isAxiosError(err) && err.response) {
+            setErrors(err.response?.data);
+          }
+        }
+      },
+      { revalidate: false }
+    );
+  };
+
+  const handleDelete = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+
+    mutate(
+      "kit/products",
+      async (products: Product[]) => {
+        await api.delete(`kit/products/${product.id}`);
+
+        setMessage("Product was successfully destroyed.");
+        setProduct({ name: "" } as Product);
+
+        // router.push(`/kit/products/[id]`, `/kit/products/new`, {
+        //   shallow: true,
+        // });
+
+        return products.filter((item) => item.id !== product.id);
+      },
+      { revalidate: false }
+    );
+  };
+
+  return (
+    <div className="mb-4 last:mb-0">
+      <h2 className="text-2xl text-slate-800 font-bold mb-6">Edit Product</h2>
+      <Notification message={message} />
+      <FormPrimitive
+        className="simple_form grow space-y-6"
+        onSubmit={onSubmit}
+        schema={schema}
+        defaultValues={product}
+        defaultErrors={errors}
+      >
+        <Input name="name" className="string form-input w-full" type="text" />
+        <FormActions.Root resource={product}>
+          <FormActions.Extra
+            className="btn shadow-none text-rose-500 mr-3"
+            href={`/kit/product/${product.id}`}
+            onClick={handleDelete}
+          >
+            Destroy this product
+          </FormActions.Extra>
+          <FormActions.Extra
+            className="btn border-slate-200 hover:border-slate-300 text-slate-600"
+            href="/kit/products"
+          >
+            Back
+          </FormActions.Extra>
+        </FormActions.Root>
+      </FormPrimitive>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Products/Sidebar.tsx b/frontend/src/components/Products/Sidebar.tsx
new file mode 100644
index 0000000..71e2b91
--- /dev/null
+++ b/frontend/src/components/Products/Sidebar.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+import { fetcher, Product, useProducts } from "@/pages/kit/products/services";
+import * as SidebarPrimitive from "../Layout/Sidebar";
+import { useSWRConfig } from "swr";
+
+interface SidebarProps {
+  loadProduct: Function;
+  selectProduct: Product | undefined;
+}
+
+export default function Sidebar({ loadProduct, selectProduct }: SidebarProps) {
+  const [query, setQuery] = useState<Record<string, any>>();
+  const { fallback } = useSWRConfig();
+  const { products, mutate } = useProducts(query, fallback["kit/products"]);
+
+  const handleSearch = (query: any) => {
+    setQuery(query);
+  };
+
+  useEffect(() => {
+    if (!query) return;
+
+    mutate(
+      async () => {
+        return await fetcher("kit/products", { params: query });
+      },
+      { revalidate: false }
+    );
+  }, [query]);
+
+  return (
+    <SidebarPrimitive.Root>
+      <SidebarPrimitive.Header
+        href="/kit/products"
+        hrefNew="/kit/products"
+        title="Products"
+      />
+      <SidebarPrimitive.List
+        items={products}
+        selectItem={selectProduct}
+        handleSearch={handleSearch}
+        handleClickItem={loadProduct}
+      />
+    </SidebarPrimitive.Root>
+  );
+}
diff --git a/frontend/src/components/Products/context.tsx b/frontend/src/components/Products/context.tsx
new file mode 100644
index 0000000..0b9be0b
--- /dev/null
+++ b/frontend/src/components/Products/context.tsx
@@ -0,0 +1,125 @@
+import {
+  createContext,
+  Dispatch,
+  useContext,
+  useEffect,
+  useReducer,
+} from "react";
+import { SWRConfig, useSWRConfig } from "swr";
+
+import { ScopedMutator } from "swr/dist/types";
+
+import {
+  fetcher,
+  Product,
+  useProduct,
+  useProducts,
+} from "@/pages/kit/products/services";
+
+export function useProductsState() {
+  return useContext(ProductsStateContext);
+}
+
+export function useProductsActions() {
+  const actions = (dispatch: Dispatch<Action>) => ({
+    addProduct: (product: Product) => {
+      dispatch({
+        type: ActionKind.ADD_PRODUCT,
+        payload: product,
+      });
+    },
+    filterProducts: (query: Record<string, any> | undefined) => {
+      dispatch({
+        type: ActionKind.FILTER_PRODUCTS,
+        payload: query,
+      });
+    },
+  });
+
+  return actions(useContext(ProductsDispatchContext) as Dispatch<Action>);
+}
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case ActionKind.ADD_PRODUCT:
+      const { newProduct } = action.payload;
+
+      return {
+        ...state,
+        products: state.products.map((item) =>
+          item.id === newProduct.id ? newProduct : item
+        ),
+      };
+    case ActionKind.FILTER_PRODUCTS:
+      const query = action.payload;
+
+      state.mutate(
+        "kit/products",
+        async () => {
+          return await fetcher("kit/products", { params: query });
+        },
+        { revalidate: false }
+      );
+
+      return state;
+    default:
+      return state;
+  }
+}
+
+enum ActionKind {
+  ADD_PRODUCT = "ADD_PRODUCT",
+  FILTER_PRODUCTS = "FILTER_PRODUCTS",
+}
+
+interface Action {
+  type: ActionKind;
+  payload: any;
+}
+
+interface State {
+  products: Product[];
+  product: Product | undefined;
+  mutate: ScopedMutator<any>;
+}
+
+const initialState: State = {
+  products: [],
+  product: {} as Product,
+  mutate: undefined as unknown as ScopedMutator<any>,
+};
+
+const ProductsStateContext = createContext<State>(initialState);
+const ProductsDispatchContext = createContext<Dispatch<Action> | null>(null);
+
+export const ProductsProvider = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: { fallback: any };
+}) => {
+  const { mutate } = useSWRConfig();
+  const { fallback } = value;
+  const fallbackProduct: Product = fallback["kit/products#selected"];
+
+  const { product } = useProduct(fallbackProduct?.id, fallbackProduct);
+  const { products } = useProducts({}, fallback["kit/products"]);
+
+  const [state, dispatch] = useReducer(reducer, {
+    ...initialState,
+    products,
+    product,
+    mutate,
+  });
+
+  return (
+    <SWRConfig value={value}>
+      <ProductsStateContext.Provider value={state}>
+        <ProductsDispatchContext.Provider value={dispatch}>
+          {children}
+        </ProductsDispatchContext.Provider>
+      </ProductsStateContext.Provider>
+    </SWRConfig>
+  );
+};
diff --git a/frontend/src/components/SearchList/Form.tsx b/frontend/src/components/SearchList/Form.tsx
new file mode 100644
index 0000000..385b7c8
--- /dev/null
+++ b/frontend/src/components/SearchList/Form.tsx
@@ -0,0 +1,50 @@
+import { useRef } from "react";
+import { useEventListener } from "usehooks-ts";
+import debounce from "lodash/debounce";
+
+interface FormProps {
+  handleSearch: (...args: any) => any;
+}
+
+export default function Form(props: FormProps) {
+  const form = useRef<HTMLFormElement>(null);
+  const searchField = useRef<HTMLInputElement>(null);
+
+  function handleSearch(event: any) {
+    event.preventDefault();
+
+    const data = new FormData(form.current as HTMLFormElement);
+
+    props.handleSearch(Object.fromEntries(data));
+  }
+
+  useEventListener("submit", handleSearch, form);
+  useEventListener("keydown", debounce(handleSearch, 300), searchField);
+
+  return (
+    <form ref={form} className="relative" action="/kit/products" method="GET">
+      <label className="sr-only">Name cont</label>
+      <input
+        ref={searchField}
+        placeholder="Search..."
+        className="form-input w-full pl-9 focus:border-slate-300"
+        type="search"
+        name="q[name_cont]"
+      />
+      <button
+        name="button"
+        type="submit"
+        className="absolute inset-0 right-auto group"
+      >
+        <svg
+          className="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"></path>
+          <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"></path>
+        </svg>
+      </button>
+    </form>
+  );
+}
diff --git a/frontend/src/components/SearchList/ListItem.tsx b/frontend/src/components/SearchList/ListItem.tsx
new file mode 100644
index 0000000..3120cb4
--- /dev/null
+++ b/frontend/src/components/SearchList/ListItem.tsx
@@ -0,0 +1,36 @@
+import clsx from "clsx";
+
+interface ListItemProps {
+  id: number;
+  name: string;
+  selected: boolean;
+  handleClick: Function;
+}
+
+export default function ListItem(props: ListItemProps) {
+  function handleClick(event: any, id: number) {
+    event.preventDefault();
+
+    props.handleClick(id);
+  }
+
+  return (
+    <li className="-mx-2">
+      <a
+        aria-label="Edit this kit_product"
+        className={clsx(
+          "flex items-center justify-between w-full p-2 rounded",
+          { "bg-indigo-100": props.selected }
+        )}
+        href={`/kit/products/${props.id}`}
+        onClick={(event) => handleClick(event, props.id)}
+      >
+        <div className="flex items-center truncate">
+          <div className="truncate">
+            <div className="text-sm font-medium">{props.name}</div>
+          </div>
+        </div>
+      </a>
+    </li>
+  );
+}
diff --git a/frontend/src/components/SearchList/index.tsx b/frontend/src/components/SearchList/index.tsx
new file mode 100644
index 0000000..8631b19
--- /dev/null
+++ b/frontend/src/components/SearchList/index.tsx
@@ -0,0 +1,34 @@
+import Form from "./Form";
+import SearchListItem from "./ListItem";
+
+export interface SearchListProps {
+  items: any[] | undefined;
+  selectItem: any;
+  handleSearch: (...args: any) => any;
+  handleClickItem: Function;
+}
+
+export default function SearchList(props: SearchListProps) {
+  const { handleSearch, items } = props;
+
+  return (
+    <div className="px-5 py-4">
+      <div id="search-list">
+        <Form handleSearch={handleSearch} />
+        <div className="mt-4">
+          <ul className="mb-6">
+            {items &&
+              items.map((item) => (
+                <SearchListItem
+                  handleClick={props.handleClickItem}
+                  selected={props.selectItem && props.selectItem.id === item.id}
+                  key={item.id}
+                  {...item}
+                />
+              ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/services.ts b/frontend/src/services.ts
new file mode 100644
index 0000000..8467130
--- /dev/null
+++ b/frontend/src/services.ts
@@ -0,0 +1,16 @@
+import axios, { AxiosRequestConfig } from "axios";
+
+const api = axios.create({
+  baseURL: "http://localhost:3000/api/",
+  timeout: 1000,
+  headers: {
+    Accept: "application/json",
+  },
+});
+
+export const fetcher = (
+  url: string,
+  config?: AxiosRequestConfig<any> | undefined
+) => api.get(url, config).then((res) => res.data);
+
+export { api };
diff --git a/frontend/styles/additional-styles/flatpickr.css b/frontend/styles/additional-styles/flatpickr.css
new file mode 100644
index 0000000..d099c6d
--- /dev/null
+++ b/frontend/styles/additional-styles/flatpickr.css
@@ -0,0 +1,229 @@
+/* Customise flatpickr */
+* {
+    --calendarPadding: 24px;
+    --daySize: 36px;
+    --daysWidth: calc(var(--daySize)*7);
+}
+
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -8px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.flatpickr-calendar {
+    border: inherit;
+    @apply rounded shadow-lg border border-slate-200 left-1/2;
+    margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1);
+    padding: var(--calendarPadding);
+    width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
+}
+
+@screen lg {
+    .flatpickr-calendar {
+        @apply left-0 right-auto;
+        margin-left: 0;
+    }
+}
+
+.flatpickr-right.flatpickr-calendar {
+    @apply right-0 left-auto;
+    margin-left: 0;
+}
+
+.flatpickr-calendar.animate.open {
+    animation: fpFadeInDown 200ms ease-out;
+}
+
+.flatpickr-calendar.static {
+    position: absolute;
+    top: calc(100% + 4px);
+}
+
+.flatpickr-calendar.static.open {
+    z-index: 20;
+}
+
+.flatpickr-days {
+    width: var(--daysWidth);
+}
+
+.dayContainer {
+    width: var(--daysWidth);
+    min-width: var(--daysWidth);
+    max-width: var(--daysWidth);
+}
+
+.flatpickr-day {
+    @apply bg-slate-50 text-sm font-medium text-slate-600;
+    max-width: var(--daySize);
+    height: var(--daySize);
+    line-height: var(--daySize);
+}
+
+.flatpickr-day,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+    border: none;
+}
+
+.flatpickr-day, 
+.flatpickr-day.prevMonthDay, 
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange,
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange,
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+    border-radius: 0;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+    @apply text-slate-400;
+}
+
+.rangeMode .flatpickr-day {
+    margin: 0;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+    @apply bg-indigo-500 text-indigo-50;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus,
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+    @apply bg-indigo-400 text-indigo-50;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+    box-shadow: none;
+}
+
+.flatpickr-months {
+    align-items: center;
+    margin-top: -8px;
+    margin-bottom: 6px;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+    position: static;
+    height: auto;
+    @apply text-slate-600;    
+}
+
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+    width: 7px;
+    height: 11px;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover,
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+    fill: inherit;
+    @apply text-slate-400;
+}
+
+.flatpickr-months .flatpickr-prev-month {
+    margin-left: -10px;
+}
+
+.flatpickr-months .flatpickr-next-month {
+    margin-right: -10px;
+}
+
+.flatpickr-months .flatpickr-month {
+    @apply text-slate-800;
+    height: auto;
+    line-height: inherit;
+}
+
+.flatpickr-current-month {
+    @apply text-sm font-medium;
+    position: static;
+    height: auto;
+    width: auto;
+    left: auto;
+    padding: 0;
+}
+
+.flatpickr-current-month span.cur-month {
+    @apply font-medium m-0;
+}
+
+.flatpickr-current-month span.cur-month:hover {
+    background: none;
+}
+
+.flatpickr-current-month input.cur-year {
+    font-weight: inherit;
+    box-shadow: none !important;
+}
+
+.numInputWrapper:hover {
+    background: none;
+}
+
+.numInputWrapper span {
+    display: none;
+}
+
+span.flatpickr-weekday {
+    @apply text-slate-400 font-medium text-xs;
+}
+
+.flatpickr-calendar.arrowTop::before,
+.flatpickr-calendar.arrowTop::after,
+.flatpickr-calendar.arrowBottom::before,
+.flatpickr-calendar.arrowBottom::after {
+    display: none;
+}
\ No newline at end of file
diff --git a/frontend/styles/additional-styles/range-slider.css b/frontend/styles/additional-styles/range-slider.css
new file mode 100644
index 0000000..8d19a09
--- /dev/null
+++ b/frontend/styles/additional-styles/range-slider.css
@@ -0,0 +1,57 @@
+/* Range slider */
+:root {
+    --range-thumb-size: 36px;
+}
+
+input[type=range] {
+    appearance: none;
+    background: #ccc;
+    border-radius: 3px;
+    height: 6px;
+    margin-top: (--range-thumb-size - 6px) * 0.5;
+    margin-bottom: (--range-thumb-size - 6px) * 0.5;
+    --thumb-size: #{--range-thumb-size};  
+}
+
+input[type=range]::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;        
+}
+
+input[type=range]::-moz-range-thumb {
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;    
+}
+
+input[type=range]::-ms-thumb {
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;
+}
+
+input[type=range]::-moz-focus-outer {
+    border: 0;
+}
\ No newline at end of file
diff --git a/frontend/styles/additional-styles/theme.css b/frontend/styles/additional-styles/theme.css
new file mode 100644
index 0000000..0b69cb3
--- /dev/null
+++ b/frontend/styles/additional-styles/theme.css
@@ -0,0 +1,8 @@
+.form-input:focus,
+.form-textarea:focus,
+.form-multiselect:focus,
+.form-select:focus,
+.form-checkbox:focus,
+.form-radio:focus {
+    @apply ring-0;
+}
diff --git a/frontend/styles/additional-styles/toggle-switch.css b/frontend/styles/additional-styles/toggle-switch.css
new file mode 100644
index 0000000..857fef4
--- /dev/null
+++ b/frontend/styles/additional-styles/toggle-switch.css
@@ -0,0 +1,35 @@
+/* Switch element */
+.form-switch {
+    @apply relative select-none;
+    width: 44px;
+}
+
+.form-switch label {
+    @apply block overflow-hidden cursor-pointer h-6 rounded-full;
+}
+
+.form-switch label > span:first-child {
+    @apply absolute block rounded-full;
+    width: 20px;
+    height: 20px;
+    top: 2px;
+    left: 2px;
+    right: 50%;
+    transition: all .15s ease-out;
+}
+
+.form-switch input[type="checkbox"]:checked + label {
+    @apply bg-indigo-500;
+}
+
+.form-switch input[type="checkbox"]:checked + label > span:first-child {
+    left: 22px;
+}
+
+.form-switch input[type="checkbox"]:disabled + label {
+    @apply cursor-not-allowed bg-slate-100 border border-slate-200;
+}
+
+.form-switch input[type="checkbox"]:disabled + label > span:first-child {
+    @apply bg-slate-400;
+}
\ No newline at end of file
diff --git a/frontend/styles/additional-styles/utility-patterns.css b/frontend/styles/additional-styles/utility-patterns.css
new file mode 100644
index 0000000..2e52f9d
--- /dev/null
+++ b/frontend/styles/additional-styles/utility-patterns.css
@@ -0,0 +1,117 @@
+/* Typography */
+.h1 {
+  @apply text-4xl font-extrabold tracking-tighter;
+}
+
+.h2 {
+  @apply text-3xl font-extrabold tracking-tighter;
+}
+
+.h3 {
+  @apply text-3xl font-extrabold;
+}
+
+.h4 {
+  @apply text-2xl font-extrabold tracking-tight;
+}
+
+@screen md {
+  .h1 {
+    @apply text-5xl;
+  }
+
+  .h2 {
+    @apply text-4xl;
+  }
+}
+
+/* Buttons */
+.btn,
+.btn-lg,
+.btn-sm,
+.btn-xs {
+  @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded leading-5 shadow-sm transition duration-150 ease-in-out;
+}
+
+.btn {
+  @apply px-3 py-2;
+}
+
+.btn-lg {
+  @apply px-4 py-3;
+}
+
+.btn-sm {
+  @apply px-2 py-1;
+}
+
+.btn-xs {
+  @apply px-2 py-0.5;
+}
+
+/* Forms */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+  @apply text-sm text-slate-800 bg-white border;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox {
+  @apply rounded;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+  @apply leading-5 py-2 px-3 border-slate-200 hover:border-slate-300 focus:border-indigo-300 shadow-sm;
+}
+
+.form-input,
+.form-textarea {
+  @apply placeholder-slate-400;
+}
+
+.form-select {
+  @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+  @apply text-indigo-500 border border-slate-300;
+}
+
+.field_with_errors ul.error {
+  @apply text-xs mt-1 text-rose-500;
+}
+
+.field_with_errors .form-input,
+.field_with_errors .form-textarea,
+.field_with_errors .form-multiselect,
+.field_with_errors .form-select {
+  @apply border-rose-500;
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
new file mode 100644
index 0000000..a024e8f
--- /dev/null
+++ b/frontend/styles/globals.css
@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+
+/* Additional styles */
+@import "./additional-styles/utility-patterns.css";
+@import "./additional-styles/range-slider.css";
+@import "./additional-styles/toggle-switch.css";
+@import "./additional-styles/flatpickr.css";
+@import "./additional-styles/theme.css";
+
+@tailwind utilities;
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..7d18752
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./src/components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..6d18cfb
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,48 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": "./",
+    "paths": {
+      "@/src/*": [
+        "src/*"
+      ],
+      "@/pages/*": [
+        "pages/*"
+      ],
+      "@/components/*": [
+        "src/components/*"
+      ],
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
new file mode 100644
index 0000000..53aa7b4
--- /dev/null
+++ b/frontend/yarn.lock
@@ -0,0 +1,2211 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.20.0"
+  resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.20.0.tgz"
+  integrity sha512-v1JH7PeAAGBEyTQM9TqojVl+b20zXtesFKCJHu50xMxZKD1fX0TKaKHPsZfFkXfs7D1M9M6Eeqg1FkJ3a0x2dA==
+  dependencies:
+    core-js-pure "^3.25.1"
+    regenerator-runtime "^0.13.10"
+
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.18.9":
+  version "7.20.0"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.0.tgz"
+  integrity sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
+  integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
+"@eslint/eslintrc@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz"
+  integrity sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.4.0"
+    globals "^13.15.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@hookform/resolvers@^2.9.10":
+  version "2.9.10"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.9.10.tgz#e7e88942ee34e97b7bc937b0be4694194c9cd420"
+  integrity sha512-JIL1DgJIlH9yuxcNGtyhsWX/PgNltz+5Gr6+8SX9fhXc/hPbEIk6wPI82nhgvp3uUb6ZfAM5mqg/x7KR7NAb+A==
+
+"@humanwhocodes/config-array@^0.11.6":
+  version "0.11.7"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz"
+  integrity sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.1"
+    debug "^4.1.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@next/env@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.npmjs.org/@next/env/-/env-13.0.0.tgz"
+  integrity sha512-65v9BVuah2Mplohm4+efsKEnoEuhmlGm8B2w6vD1geeEP2wXtlSJCvR/cCRJ3fD8wzCQBV41VcMBQeYET6MRkg==
+
+"@next/eslint-plugin-next@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.0.tgz"
+  integrity sha512-z+gnX4Zizatqatc6f4CQrcC9oN8Us3Vrq/OLyc98h7K/eWctrnV91zFZodmJHUjx0cITY8uYM7LXD7IdYkg3kg==
+  dependencies:
+    glob "7.1.7"
+
+"@next/swc-android-arm-eabi@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.0.0.tgz#15cd89d19d3c00d123fdfe367bab38c362f6c515"
+  integrity sha512-+DUQkYF93gxFjWY+CYWE1QDX6gTgnUiWf+W4UqZjM1Jcef8U97fS6xYh+i+8rH4MM0AXHm7OSakvfOMzmjU6VA==
+
+"@next/swc-android-arm64@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.0.0.tgz#9410365bb07097268d4773a46b02cfe6b3fe3ab7"
+  integrity sha512-RW9Uy3bMSc0zVGCa11klFuwfP/jdcdkhdruqnrJ7v+7XHm6OFKkSRzX6ee7yGR1rdDZvTnP4GZSRSpzjLv/N0g==
+
+"@next/swc-darwin-arm64@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.0.0.tgz"
+  integrity sha512-APA26nps1j4qyhOIzkclW/OmgotVHj1jBxebSpMCPw2rXfiNvKNY9FA0TcuwPmUCNqaTnm703h6oW4dvp73A4Q==
+
+"@next/swc-darwin-x64@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.0.0.tgz#6b214753410e1d8512a1491045acea1e188df7d6"
+  integrity sha512-qsUhUdoFuRJiaJ7LnvTQ6GZv1QnMDcRXCIjxaN0FNVXwrjkq++U7KjBUaxXkRzLV4C7u0NHLNOp0iZwNNE7ypw==
+
+"@next/swc-freebsd-x64@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.0.0.tgz#eeb176bdb585f48882bdac1d04271b918ca87590"
+  integrity sha512-sCdyCbboS7CwdnevKH9J6hkJI76LUw1jVWt4eV7kISuLiPba3JmehZSWm80oa4ADChRVAwzhLAo2zJaYRrInbg==
+
+"@next/swc-linux-arm-gnueabihf@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.0.0.tgz#2c2a9622c93f87a8baca94e068f674da4cae6018"
+  integrity sha512-/X/VxfFA41C9jrEv+sUsPLQ5vbDPVIgG0CJrzKvrcc+b+4zIgPgtfsaWq9ockjHFQi3ycvlZK4TALOXO8ovQ6Q==
+
+"@next/swc-linux-arm64-gnu@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.0.0.tgz#69505827e2928fb18034150fd4d754d54c4a1c4b"
+  integrity sha512-x6Oxr1GIi0ZtNiT6jbw+JVcbEi3UQgF7mMmkrgfL4mfchOwXtWSHKTSSPnwoJWJfXYa0Vy1n8NElWNTGAqoWFw==
+
+"@next/swc-linux-arm64-musl@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.0.0.tgz#487a88f2583a046e882328fe0665b37eca4fd0f6"
+  integrity sha512-SnMH9ngI+ipGh3kqQ8+mDtWunirwmhQnQeZkEq9e/9Xsgjf04OetqrqRHKM1HmJtG2qMUJbyXFJ0F81TPuT+3g==
+
+"@next/swc-linux-x64-gnu@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.0.0.tgz#29e89c7e4fd2e2b16ad059076f6261998aee53df"
+  integrity sha512-VSQwTX9EmdbotArtA1J67X8964oQfe0xHb32x4tu+JqTR+wOHyG6wGzPMdXH2oKAp6rdd7BzqxUXXf0J+ypHlw==
+
+"@next/swc-linux-x64-musl@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.0.0.tgz#2f63aae922d2b2829aec21bf8f9adda8b6c16365"
+  integrity sha512-xBCP0nnpO0q4tsytXkvIwWFINtbFRyVY5gxa1zB0vlFtqYR9lNhrOwH3CBrks3kkeaePOXd611+8sjdUtrLnXA==
+
+"@next/swc-win32-arm64-msvc@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.0.0.tgz#4117bad96c2a6775f70294fba45c63951a8a21ac"
+  integrity sha512-NutwDafqhGxqPj/eiUixJq9ImS/0sgx6gqlD7jRndCvQ2Q8AvDdu1+xKcGWGNnhcDsNM/n1avf1e62OG1GaqJg==
+
+"@next/swc-win32-ia32-msvc@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.0.0.tgz#5914eb86f9ea92a00d76cb094dd9734b3bf2012c"
+  integrity sha512-zNaxaO+Kl/xNz02E9QlcVz0pT4MjkXGDLb25qxtAzyJL15aU0+VjjbIZAYWctG59dvggNIUNDWgoBeVTKB9xLg==
+
+"@next/swc-win32-x64-msvc@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.0.0.tgz#c54a5a739dee04b20338d305226a2acdf701f67f"
+  integrity sha512-FFOGGWwTCRMu9W7MF496Urefxtuo2lttxF1vwS+1rIRsKvuLrWhVaVTj3T8sf2EBL6gtJbmh4TYlizS+obnGKA==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-slot@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
+  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@rushstack/eslint-patch@^1.1.3":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
+  integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
+
+"@swc/helpers@0.4.11":
+  version "0.4.11"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz"
+  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
+  dependencies:
+    tslib "^2.4.0"
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/lodash@^4.14.175":
+  version "4.14.187"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.187.tgz#122ff0a7192115b4c1a19444ab4482caa77e2c9d"
+  integrity sha512-MrO/xLXCaUgZy3y96C/iOsaIqZSeupyTImKClHunL5GrmaiII2VwvWmLBu2hwa0Kp0sV19CsyjtrTc/Fx8rg/A==
+
+"@types/lodash@^4.14.186":
+  version "4.14.186"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97"
+  integrity sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==
+
+"@types/node@18.11.7":
+  version "18.11.7"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.7.tgz"
+  integrity sha512-LhFTglglr63mNXUSRYD8A+ZAIu5sFqNJ4Y2fPuY7UlrySJH87rRRlhtVmMHplmfk5WkoJGmDjE9oiTfyX94CpQ==
+
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/react-dom@18.0.8":
+  version "18.0.8"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.8.tgz"
+  integrity sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@18.0.24":
+  version "18.0.24"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.24.tgz"
+  integrity sha512-wRJWT6ouziGUy+9uX0aW4YOJxAY0bG6/AOk5AW5QSvZqI7dk6VBIbXvcVgIw/W5Jrl24f77df98GEKTJGOLx7Q==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@typescript-eslint/parser@^5.21.0":
+  version "5.41.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.41.0.tgz"
+  integrity sha512-HQVfix4+RL5YRWZboMD1pUfFN8MpRH4laziWkkAzyO1fvNOY/uinZcvo3QiFJVS/siNHupV8E5+xSwQZrl6PZA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.41.0"
+    "@typescript-eslint/types" "5.41.0"
+    "@typescript-eslint/typescript-estree" "5.41.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.41.0":
+  version "5.41.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.41.0.tgz"
+  integrity sha512-xOxPJCnuktUkY2xoEZBKXO5DBCugFzjrVndKdUnyQr3+9aDWZReKq9MhaoVnbL+maVwWJu/N0SEtrtEUNb62QQ==
+  dependencies:
+    "@typescript-eslint/types" "5.41.0"
+    "@typescript-eslint/visitor-keys" "5.41.0"
+
+"@typescript-eslint/types@5.41.0":
+  version "5.41.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.41.0.tgz"
+  integrity sha512-5BejraMXMC+2UjefDvrH0Fo/eLwZRV6859SXRg+FgbhA0R0l6lDqDGAQYhKbXhPN2ofk2kY5sgGyLNL907UXpA==
+
+"@typescript-eslint/typescript-estree@5.41.0":
+  version "5.41.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.41.0.tgz"
+  integrity sha512-SlzFYRwFSvswzDSQ/zPkIWcHv8O5y42YUskko9c4ki+fV6HATsTODUPbRbcGDFYP86gaJL5xohUEytvyNNcXWg==
+  dependencies:
+    "@typescript-eslint/types" "5.41.0"
+    "@typescript-eslint/visitor-keys" "5.41.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/visitor-keys@5.41.0":
+  version "5.41.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.41.0.tgz"
+  integrity sha512-vilqeHj267v8uzzakbm13HkPMl7cbYpKVjgFWZPIOHIJHZtinvypUhJ5xBXfWYg4eFKqztbMMpOgFpT9Gfx4fw==
+  dependencies:
+    "@typescript-eslint/types" "5.41.0"
+    eslint-visitor-keys "^3.3.0"
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn-node@^1.8.2:
+  version "1.8.2"
+  resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn@^7.0.0:
+  version "7.4.1"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.8.0:
+  version "8.8.1"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
+
+array-includes@^3.1.4, array-includes@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz"
+  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.7"
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+array.prototype.flat@^1.2.5:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz"
+  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz"
+  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
+
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
+  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+autoprefixer@^10.4.13:
+  version "10.4.13"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz"
+  integrity sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==
+  dependencies:
+    browserslist "^4.21.4"
+    caniuse-lite "^1.0.30001426"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
+axe-core@^4.4.3:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.5.0.tgz"
+  integrity sha512-4+rr8eQ7+XXS5nZrKcMO/AikHL0hVqy+lHWAnE3xdHl+aguag8SOQ6eEqLexwLNWgXIMfunGuD3ON1/6Kyet0A==
+
+axios@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz"
+  integrity sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+axobject-query@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^3.0.2, braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+browserslist@^4.21.4:
+  version "4.21.4"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz"
+  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
+  dependencies:
+    caniuse-lite "^1.0.30001400"
+    electron-to-chromium "^1.4.251"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.9"
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001426:
+  version "1.0.30001426"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001426.tgz"
+  integrity sha512-n7cosrHLl8AWt0wwZw/PJZgUg3lV0gk9LMI7ikGJwhyhgsd2Nb65vKvmSexCqq/J7rbH3mFG6yZZiPR5dLPW5A==
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@^1.1.4, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+core-js-pure@^3.25.1:
+  version "3.26.0"
+  resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.26.0.tgz"
+  integrity sha512-LiN6fylpVBVwT8twhhluD9TzXmZQQsr2I2eIKtWNbZI1XMfBT7CV18itaN6RA7EtQd/SDdRx/wzvAShX2HvhQA==
+
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+define-properties@^1.1.3, define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+defined@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz"
+  integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+detective@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz"
+  integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
+  dependencies:
+    acorn-node "^1.8.2"
+    defined "^1.0.0"
+    minimist "^1.2.6"
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+electron-to-chromium@^1.4.251:
+  version "1.4.284"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz"
+  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+  version "1.20.4"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz"
+  integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.3"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-next@13.0.0:
+  version "13.0.0"
+  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.0.0.tgz"
+  integrity sha512-y2nqWS2tycWySdVhb+rhp6CuDmDazGySqkzzQZf3UTyfHyC7og1m5m/AtMFwCo5mtvDqvw1BENin52kV9733lg==
+  dependencies:
+    "@next/eslint-plugin-next" "13.0.0"
+    "@rushstack/eslint-patch" "^1.1.3"
+    "@typescript-eslint/parser" "^5.21.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^2.7.1"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.31.7"
+    eslint-plugin-react-hooks "^4.5.0"
+
+eslint-import-resolver-node@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+  dependencies:
+    debug "^3.2.7"
+    resolve "^1.20.0"
+
+eslint-import-resolver-typescript@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz"
+  integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
+  dependencies:
+    debug "^4.3.4"
+    glob "^7.2.0"
+    is-glob "^4.0.3"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
+eslint-module-utils@^2.7.3:
+  version "2.7.4"
+  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz"
+  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-import@^2.26.0:
+  version "2.26.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flat "^1.2.5"
+    debug "^2.6.9"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-module-utils "^2.7.3"
+    has "^1.0.3"
+    is-core-module "^2.8.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.values "^1.1.5"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
+eslint-plugin-jsx-a11y@^6.5.1:
+  version "6.6.1"
+  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz"
+  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    aria-query "^4.2.2"
+    array-includes "^3.1.5"
+    ast-types-flow "^0.0.7"
+    axe-core "^4.4.3"
+    axobject-query "^2.2.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    has "^1.0.3"
+    jsx-ast-utils "^3.3.2"
+    language-tags "^1.0.5"
+    minimatch "^3.1.2"
+    semver "^6.3.0"
+
+eslint-plugin-react-hooks@^4.5.0:
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
+eslint-plugin-react@^7.31.7:
+  version "7.31.10"
+  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz"
+  integrity sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==
+  dependencies:
+    array-includes "^3.1.5"
+    array.prototype.flatmap "^1.3.0"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.1"
+    object.values "^1.1.5"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.7"
+
+eslint-scope@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz"
+  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
+eslint@8.26.0:
+  version "8.26.0"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz"
+  integrity sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==
+  dependencies:
+    "@eslint/eslintrc" "^1.3.3"
+    "@humanwhocodes/config-array" "^0.11.6"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.4.0"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.15.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
+espree@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz"
+  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+  dependencies:
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
+
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.12, fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
+functions-have-names@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz"
+  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@7.1.7, glob@^7.1.3:
+  version "7.1.7"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.2.0:
+  version "7.2.3"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^13.15.0:
+  version "13.17.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz"
+  integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==
+  dependencies:
+    type-fest "^0.20.2"
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+immutable@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
+  integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-callable@^1.1.4, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.8.1, is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+js-sdsl@^4.1.4:
+  version "4.1.5"
+  resolved "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz"
+  integrity sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
+  dependencies:
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
+
+language-subtag-registry@~0.3.2:
+  version "0.3.22"
+  resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz"
+  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz"
+  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lilconfig@^2.0.5, lilconfig@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz"
+  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.1.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4, micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+ms@2.1.2, ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+next@13.0.0:
+  version "13.0.0"
+  resolved "https://registry.npmjs.org/next/-/next-13.0.0.tgz"
+  integrity sha512-puH1WGM6rGeFOoFdXXYfUxN9Sgi4LMytCV5HkQJvVUOhHfC1DoVqOfvzaEteyp6P04IW+gbtK2Q9pInVSrltPA==
+  dependencies:
+    "@next/env" "13.0.0"
+    "@swc/helpers" "0.4.11"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.1.0"
+    use-sync-external-store "1.2.0"
+  optionalDependencies:
+    "@next/swc-android-arm-eabi" "13.0.0"
+    "@next/swc-android-arm64" "13.0.0"
+    "@next/swc-darwin-arm64" "13.0.0"
+    "@next/swc-darwin-x64" "13.0.0"
+    "@next/swc-freebsd-x64" "13.0.0"
+    "@next/swc-linux-arm-gnueabihf" "13.0.0"
+    "@next/swc-linux-arm64-gnu" "13.0.0"
+    "@next/swc-linux-arm64-musl" "13.0.0"
+    "@next/swc-linux-x64-gnu" "13.0.0"
+    "@next/swc-linux-x64-musl" "13.0.0"
+    "@next/swc-win32-arm64-msvc" "13.0.0"
+    "@next/swc-win32-ia32-msvc" "13.0.0"
+    "@next/swc-win32-x64-msvc" "13.0.0"
+
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
+object-inspect@^1.12.2, object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.3, object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.hasown@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+postcss-import@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
+  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz"
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz"
+  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+  dependencies:
+    lilconfig "^2.0.5"
+    yaml "^1.10.2"
+
+postcss-nested@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz"
+  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-selector-parser@^6.0.10:
+  version "6.0.10"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.17, postcss@^8.4.18:
+  version "8.4.18"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz"
+  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+property-expr@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-hook-form@^7.39.0:
+  version "7.39.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.39.0.tgz#5dfdfef0d3ba367bb9842728e8e8332af9457adf"
+  integrity sha512-rekW5NMBVG0nslE2choOKThy0zxLWQeoew87yTLwb3C9F91LaXwu/dhfFL/D3hdnSMnrTG60gVN/v6rvCrSOTw==
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+regenerator-runtime@^0.13.10:
+  version "0.13.10"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz"
+  integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
+
+regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
+
+regexpp@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.1.7, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.4"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
+sass@^1.55.0:
+  version "1.55.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.55.0.tgz#0c4d3c293cfe8f8a2e8d3b666e1cf1bff8065d1c"
+  integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
+semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.3.7:
+  version "7.3.8"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+string.prototype.matchall@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz"
+  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.1"
+    side-channel "^1.0.4"
+
+string.prototype.trimend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz"
+  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+string.prototype.trimstart@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz"
+  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+styled-jsx@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.0.tgz"
+  integrity sha512-/iHaRJt9U7T+5tp6TRelLnqBqiaIT0HsO0+vgyj8hK2KUk7aejFqRrumqPUlAqDwAj8IbS/1hk3IhBAAK/FCUQ==
+  dependencies:
+    client-only "0.0.1"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+swr@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz"
+  integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==
+
+tailwindcss@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.1.tgz"
+  integrity sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==
+  dependencies:
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    detective "^5.2.1"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.12"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    lilconfig "^2.0.6"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.17"
+    postcss-import "^14.1.0"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.4"
+    postcss-nested "6.0.0"
+    postcss-selector-parser "^6.0.10"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.1"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
+tsconfig-paths@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"
+  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+typescript@4.8.4:
+  version "4.8.4"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
+  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+update-browserslist-db@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
+usehooks-ts@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.9.1.tgz#953d3284851ffd097432379e271ce046a8180b37"
+  integrity sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==
+
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+xtend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yaml@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^0.32.11:
+  version "0.32.11"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
+  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"

From 8b64cc2b299309072ee184f67478015febadf91c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Sun, 13 Nov 2022 02:48:55 -0300
Subject: [PATCH 13/25] Fixed routes

---
 frontend/pages/_app.tsx                      |   5 +-
 frontend/pages/kit/products/[id].tsx         |  22 +---
 frontend/pages/kit/products/index.tsx        |  27 +----
 frontend/pages/kit/products/services.ts      |  12 +--
 frontend/src/components/Products/Form.tsx    |  26 ++---
 frontend/src/components/Products/Sidebar.tsx |  54 +++++-----
 frontend/src/components/Products/context.tsx | 103 ++++++-------------
 frontend/src/components/SearchList/index.tsx |  24 ++---
 frontend/src/services.ts                     |   4 +-
 9 files changed, 104 insertions(+), 173 deletions(-)

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index a1d9740..d9a3964 100644
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -1,4 +1,5 @@
 import type { AppProps } from "next/app";
+import { SWRConfig } from "swr";
 
 import Layout from "@/components/Layout";
 
@@ -7,7 +8,9 @@ import "../styles/globals.css";
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <Layout>
-      <Component {...pageProps} />
+      <SWRConfig value={{ fallback: pageProps.fallback }}>
+        <Component {...pageProps} />
+      </SWRConfig>
     </Layout>
   );
 }
diff --git a/frontend/pages/kit/products/[id].tsx b/frontend/pages/kit/products/[id].tsx
index 847cbbe..12e0e4b 100644
--- a/frontend/pages/kit/products/[id].tsx
+++ b/frontend/pages/kit/products/[id].tsx
@@ -1,8 +1,6 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { GetStaticPropsContext } from "next/types";
 
-import { fetcher, useProduct, Product } from "./services";
+import { fetcher } from "./services";
 
 import Form from "@/src/components/Products/Form";
 import Sidebar from "@/components/Products/Sidebar";
@@ -15,26 +13,14 @@ interface ProductsPageProps {
 }
 
 export default function ProductPage({ id, fallback }: ProductsPageProps) {
-  const [selectId, setSelectId] = useState(id);
-  const { product } = useProduct(selectId, fallback[`kit/products/${id}`]);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!selectId || selectId === id) return;
-
-    router.push(`/kit/products/[id]`, `/kit/products/${selectId}`, {
-      shallow: true,
-    });
-  }, [selectId]);
-
   return (
-    <ProductsProvider value={{ fallback }}>
+    <ProductsProvider value={{ fallback, fallbackState: { productId: id } }}>
       <Page.Root>
         <Page.Sidebar>
-          <Sidebar loadProduct={setSelectId} selectProduct={product} />
+          <Sidebar />
         </Page.Sidebar>
         <Page.Content>
-          <Form product={product || ({} as Product)} />
+          <Form />
         </Page.Content>
       </Page.Root>
     </ProductsProvider>
diff --git a/frontend/pages/kit/products/index.tsx b/frontend/pages/kit/products/index.tsx
index cdaadea..67e5aee 100644
--- a/frontend/pages/kit/products/index.tsx
+++ b/frontend/pages/kit/products/index.tsx
@@ -1,7 +1,4 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-
-import { fetcher, useProduct, Product } from "./services";
+import { fetcher } from "./services";
 
 import Form from "@/src/components/Products/Form";
 import Sidebar from "@/components/Products/Sidebar";
@@ -9,36 +6,18 @@ import * as Page from "@/components/Layout/Page";
 import { ProductsProvider } from "@/src/components/Products/context";
 
 interface ProductsPageProps {
-  id: number;
   fallback: Record<string, any>;
 }
 
 export default function ProductsPage({ fallback }: ProductsPageProps) {
-  const [selectId, setSelectId] = useState();
-  const { product } = useProduct(selectId);
-  // const router = useRouter();
-
-  // useEffect(
-  //   () => (!router.query.id ? setSelectId(undefined) : undefined),
-  //   [router.query.id]
-  // );
-
-  // useEffect(() => {
-  //   if (!selectId || selectId === router.query.id) return;
-
-  //   router.push(`?id=${selectId}`, `/kit/products/${selectId}`, {
-  //     shallow: true,
-  //   });
-  // }, [selectId]);
-
   return (
     <ProductsProvider value={{ fallback }}>
       <Page.Root>
         <Page.Sidebar>
-          <Sidebar loadProduct={setSelectId} selectProduct={product} />
+          <Sidebar />
         </Page.Sidebar>
         <Page.Content>
-          <Form product={product || ({ name: "" } as Product)} />
+          <Form />
         </Page.Content>
       </Page.Root>
     </ProductsProvider>
diff --git a/frontend/pages/kit/products/services.ts b/frontend/pages/kit/products/services.ts
index aa172f6..c99c4d3 100644
--- a/frontend/pages/kit/products/services.ts
+++ b/frontend/pages/kit/products/services.ts
@@ -1,4 +1,4 @@
-import useSWR from "swr";
+import useSWR, { SWRConfiguration } from "swr";
 import { fetcher } from "@/src/services";
 
 export { fetcher };
@@ -8,14 +8,14 @@ export interface Product {
   name: string;
 }
 
-export function useProducts(params: any, fallbackData: any = null) {
+export function useProducts(params: any, config?: SWRConfiguration) {
   const { data, error, mutate } = useSWR<Product[]>(
     "kit/products",
-    () => fetcher("kit/products", params),
+    () => fetcher("kit/products", { params }),
     {
-      fallbackData,
       revalidateOnFocus: false,
       revalidateOnMount: false,
+      ...config,
     }
   );
 
@@ -27,14 +27,14 @@ export function useProducts(params: any, fallbackData: any = null) {
   };
 }
 
-export function useProduct(id?: number, fallbackData: any = null) {
+export function useProduct(id?: number, config?: SWRConfiguration) {
   const { data, error, mutate } = useSWR<Product>(
     id ? `kit/products/${id}` : null,
     fetcher,
     {
-      fallbackData,
       revalidateOnFocus: false,
       revalidateOnMount: false,
+      ...config,
     }
   );
 
diff --git a/frontend/src/components/Products/Form.tsx b/frontend/src/components/Products/Form.tsx
index db6e4dc..1a0b4f0 100644
--- a/frontend/src/components/Products/Form.tsx
+++ b/frontend/src/components/Products/Form.tsx
@@ -1,18 +1,15 @@
 import * as yup from "yup";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { api } from "@/src/services";
 import { useRouter } from "next/router";
 import { useSWRConfig } from "swr";
 import request from "axios";
 
-import { Product } from "@/pages/kit/products/services";
+import { Product, useProduct } from "@/pages/kit/products/services";
 import FormPrimitive, { Input } from "@/components/Form";
 import Notification from "@/components/Notification";
 import * as FormActions from "@/components/Form/Actions";
-
-interface FormProps {
-  product: Product;
-}
+import { useProductsState } from "./context";
 
 const schema = yup
   .object({
@@ -20,18 +17,14 @@ const schema = yup
   })
   .required();
 
-export default function Form(props: FormProps): JSX.Element {
+export default function Form(): JSX.Element {
   const [message, setMessage] = useState<string>();
-  const [product, setProduct] = useState<Product>(props.product);
   const [errors, setErrors] = useState({});
   const { mutate } = useSWRConfig();
+  const { productId } = useProductsState();
+  const { product } = useProduct(productId);
   const router = useRouter();
 
-  useEffect(() => {
-    setMessage("");
-    setProduct(props.product as Product);
-  }, [props.product]);
-
   const onSubmit = (data: Product) => {
     mutate(
       "kit/products",
@@ -55,8 +48,6 @@ export default function Form(props: FormProps): JSX.Element {
           //   );
           // }
 
-          setProduct((prevState) => ({ ...prevState, ...updatedProduct }));
-
           if (products.length <= 0 || !data.id) {
             setMessage("Product was successfully created.");
 
@@ -84,10 +75,11 @@ export default function Form(props: FormProps): JSX.Element {
     mutate(
       "kit/products",
       async (products: Product[]) => {
+        if (product === undefined) return;
+
         await api.delete(`kit/products/${product.id}`);
 
         setMessage("Product was successfully destroyed.");
-        setProduct({ name: "" } as Product);
 
         // router.push(`/kit/products/[id]`, `/kit/products/new`, {
         //   shallow: true,
@@ -114,7 +106,7 @@ export default function Form(props: FormProps): JSX.Element {
         <FormActions.Root resource={product}>
           <FormActions.Extra
             className="btn shadow-none text-rose-500 mr-3"
-            href={`/kit/product/${product.id}`}
+            href={`/kit/product/${product?.id}`}
             onClick={handleDelete}
           >
             Destroy this product
diff --git a/frontend/src/components/Products/Sidebar.tsx b/frontend/src/components/Products/Sidebar.tsx
index 71e2b91..f6134cc 100644
--- a/frontend/src/components/Products/Sidebar.tsx
+++ b/frontend/src/components/Products/Sidebar.tsx
@@ -1,34 +1,38 @@
-import { useEffect, useState } from "react";
+import {
+  fetcher,
+  useProduct,
+  useProducts,
+} from "@/pages/kit/products/services";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
 
-import { fetcher, Product, useProducts } from "@/pages/kit/products/services";
 import * as SidebarPrimitive from "../Layout/Sidebar";
-import { useSWRConfig } from "swr";
+import { useProductsActions, useProductsState } from "./context";
 
-interface SidebarProps {
-  loadProduct: Function;
-  selectProduct: Product | undefined;
-}
+export default function Sidebar() {
+  const { setQuery, setProductId } = useProductsActions();
+  const { query, productId } = useProductsState();
+  const { products, mutate: productsMutate } = useProducts(query);
+  const { product } = useProduct(productId || -1);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (product === undefined) return;
 
-export default function Sidebar({ loadProduct, selectProduct }: SidebarProps) {
-  const [query, setQuery] = useState<Record<string, any>>();
-  const { fallback } = useSWRConfig();
-  const { products, mutate } = useProducts(query, fallback["kit/products"]);
+    router.push(router.pathname, `/kit/products/${product.id}`, {
+      shallow: true,
+    });
+  }, [product]);
 
   const handleSearch = (query: any) => {
-    setQuery(query);
+    productsMutate(
+      async () => await fetcher("kit/products", { params: query }),
+      {
+        revalidate: false,
+      }
+    ).then(() => setQuery(query));
   };
 
-  useEffect(() => {
-    if (!query) return;
-
-    mutate(
-      async () => {
-        return await fetcher("kit/products", { params: query });
-      },
-      { revalidate: false }
-    );
-  }, [query]);
-
   return (
     <SidebarPrimitive.Root>
       <SidebarPrimitive.Header
@@ -38,9 +42,9 @@ export default function Sidebar({ loadProduct, selectProduct }: SidebarProps) {
       />
       <SidebarPrimitive.List
         items={products}
-        selectItem={selectProduct}
+        selectedItem={product}
         handleSearch={handleSearch}
-        handleClickItem={loadProduct}
+        handleClickItem={setProductId}
       />
     </SidebarPrimitive.Root>
   );
diff --git a/frontend/src/components/Products/context.tsx b/frontend/src/components/Products/context.tsx
index 0b9be0b..db6c123 100644
--- a/frontend/src/components/Products/context.tsx
+++ b/frontend/src/components/Products/context.tsx
@@ -1,20 +1,13 @@
-import {
-  createContext,
-  Dispatch,
-  useContext,
-  useEffect,
-  useReducer,
-} from "react";
-import { SWRConfig, useSWRConfig } from "swr";
+import { useProduct, useProducts } from "@/pages/kit/products/services";
+import { createContext, Dispatch, useContext, useReducer } from "react";
 
-import { ScopedMutator } from "swr/dist/types";
+const initialState: State = {
+  query: {},
+  productId: undefined,
+};
 
-import {
-  fetcher,
-  Product,
-  useProduct,
-  useProducts,
-} from "@/pages/kit/products/services";
+const ProductsStateContext = createContext<State>(initialState);
+const ProductsDispatchContext = createContext<Dispatch<Action> | null>(null);
 
 export function useProductsState() {
   return useContext(ProductsStateContext);
@@ -22,16 +15,17 @@ export function useProductsState() {
 
 export function useProductsActions() {
   const actions = (dispatch: Dispatch<Action>) => ({
-    addProduct: (product: Product) => {
+    setQuery: (query: Record<string, any>) => {
       dispatch({
-        type: ActionKind.ADD_PRODUCT,
-        payload: product,
+        type: ActionKind.SET_QUERY,
+        payload: query,
       });
     },
-    filterProducts: (query: Record<string, any> | undefined) => {
+
+    setProductId: (productId: number) => {
       dispatch({
-        type: ActionKind.FILTER_PRODUCTS,
-        payload: query,
+        type: ActionKind.SET_PRODUCT_ID,
+        payload: productId,
       });
     },
   });
@@ -41,35 +35,26 @@ export function useProductsActions() {
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
-    case ActionKind.ADD_PRODUCT:
-      const { newProduct } = action.payload;
-
+    case ActionKind.SET_QUERY:
       return {
         ...state,
-        products: state.products.map((item) =>
-          item.id === newProduct.id ? newProduct : item
-        ),
+        query: action.payload,
       };
-    case ActionKind.FILTER_PRODUCTS:
-      const query = action.payload;
 
-      state.mutate(
-        "kit/products",
-        async () => {
-          return await fetcher("kit/products", { params: query });
-        },
-        { revalidate: false }
-      );
+    case ActionKind.SET_PRODUCT_ID:
+      return {
+        ...state,
+        productId: action.payload,
+      };
 
-      return state;
     default:
       return state;
   }
 }
 
 enum ActionKind {
-  ADD_PRODUCT = "ADD_PRODUCT",
-  FILTER_PRODUCTS = "FILTER_PRODUCTS",
+  SET_QUERY = "SET_QUERY",
+  SET_PRODUCT_ID = "SET_PRODUCT_ID",
 }
 
 interface Action {
@@ -78,48 +63,28 @@ interface Action {
 }
 
 interface State {
-  products: Product[];
-  product: Product | undefined;
-  mutate: ScopedMutator<any>;
+  query: Record<string, any>;
+  productId?: number;
 }
 
-const initialState: State = {
-  products: [],
-  product: {} as Product,
-  mutate: undefined as unknown as ScopedMutator<any>,
-};
-
-const ProductsStateContext = createContext<State>(initialState);
-const ProductsDispatchContext = createContext<Dispatch<Action> | null>(null);
-
 export const ProductsProvider = ({
   children,
   value,
 }: {
   children: React.ReactNode;
-  value: { fallback: any };
+  value: { fallback?: any; fallbackState?: any };
 }) => {
-  const { mutate } = useSWRConfig();
-  const { fallback } = value;
-  const fallbackProduct: Product = fallback["kit/products#selected"];
-
-  const { product } = useProduct(fallbackProduct?.id, fallbackProduct);
-  const { products } = useProducts({}, fallback["kit/products"]);
-
+  const { fallback, fallbackState } = value;
   const [state, dispatch] = useReducer(reducer, {
     ...initialState,
-    products,
-    product,
-    mutate,
+    ...fallbackState,
   });
 
   return (
-    <SWRConfig value={value}>
-      <ProductsStateContext.Provider value={state}>
-        <ProductsDispatchContext.Provider value={dispatch}>
-          {children}
-        </ProductsDispatchContext.Provider>
-      </ProductsStateContext.Provider>
-    </SWRConfig>
+    <ProductsStateContext.Provider value={state}>
+      <ProductsDispatchContext.Provider value={dispatch}>
+        {children}
+      </ProductsDispatchContext.Provider>
+    </ProductsStateContext.Provider>
   );
 };
diff --git a/frontend/src/components/SearchList/index.tsx b/frontend/src/components/SearchList/index.tsx
index 8631b19..1feed66 100644
--- a/frontend/src/components/SearchList/index.tsx
+++ b/frontend/src/components/SearchList/index.tsx
@@ -2,30 +2,30 @@ import Form from "./Form";
 import SearchListItem from "./ListItem";
 
 export interface SearchListProps {
-  items: any[] | undefined;
-  selectItem: any;
+  items: any[];
+  selectedItem: any;
   handleSearch: (...args: any) => any;
   handleClickItem: Function;
 }
 
 export default function SearchList(props: SearchListProps) {
-  const { handleSearch, items } = props;
+  const { handleSearch, handleClickItem, items, selectedItem } = props;
 
   return (
     <div className="px-5 py-4">
       <div id="search-list">
         <Form handleSearch={handleSearch} />
+
         <div className="mt-4">
           <ul className="mb-6">
-            {items &&
-              items.map((item) => (
-                <SearchListItem
-                  handleClick={props.handleClickItem}
-                  selected={props.selectItem && props.selectItem.id === item.id}
-                  key={item.id}
-                  {...item}
-                />
-              ))}
+            {items.map((item) => (
+              <SearchListItem
+                handleClick={handleClickItem}
+                selected={selectedItem?.id === item.id}
+                key={item.id}
+                {...item}
+              />
+            ))}
           </ul>
         </div>
       </div>
diff --git a/frontend/src/services.ts b/frontend/src/services.ts
index 8467130..bf49345 100644
--- a/frontend/src/services.ts
+++ b/frontend/src/services.ts
@@ -11,6 +11,8 @@ const api = axios.create({
 export const fetcher = (
   url: string,
   config?: AxiosRequestConfig<any> | undefined
-) => api.get(url, config).then((res) => res.data);
+) => {
+  return api.get(url, config).then((res) => res.data);
+};
 
 export { api };

From 3c818de06315d008504bb751b8e37081437c4fc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Mon, 14 Nov 2022 21:24:46 -0300
Subject: [PATCH 14/25] Stable version using swr

---
 frontend/pages/_app.tsx                       | 10 ++++-
 frontend/pages/kit/products/[id].tsx          | 15 +-------
 frontend/pages/kit/products/services.ts       |  4 +-
 frontend/src/components/Products/Form.tsx     | 38 ++++++++-----------
 frontend/src/components/Products/Sidebar.tsx  | 18 +++------
 frontend/src/components/Products/context.tsx  | 38 +++++++++++++++++--
 .../src/components/SearchList/ListItem.tsx    |  5 ++-
 7 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index d9a3964..7cca056 100644
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -4,11 +4,19 @@ import { SWRConfig } from "swr";
 import Layout from "@/components/Layout";
 
 import "../styles/globals.css";
+import { useState } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
+  const [cache] = useState(() => new Map(Object.entries(pageProps.fallback)));
+
   return (
     <Layout>
-      <SWRConfig value={{ fallback: pageProps.fallback }}>
+      <SWRConfig
+        value={{
+          fallback: pageProps.fallback,
+          provider: () => cache,
+        }}
+      >
         <Component {...pageProps} />
       </SWRConfig>
     </Layout>
diff --git a/frontend/pages/kit/products/[id].tsx b/frontend/pages/kit/products/[id].tsx
index 12e0e4b..3aa163b 100644
--- a/frontend/pages/kit/products/[id].tsx
+++ b/frontend/pages/kit/products/[id].tsx
@@ -28,27 +28,14 @@ export default function ProductPage({ id, fallback }: ProductsPageProps) {
 }
 
 export async function getServerSideProps(context: GetStaticPropsContext) {
-  if (context.params?.id === "new") {
-    return {
-      redirect: {
-        permanent: true,
-        destination: "/kit/products",
-      },
-      props: {},
-    };
-  }
-
   let fallback: Record<string, any> = {
     "kit/products": await fetcher("kit/products"),
   };
 
   if (context.params?.id) {
-    fallback["kit/products#selected"] = await fetcher(
+    fallback[`kit/products/${context.params.id}`] = await fetcher(
       `kit/products/${context.params?.id}`
     );
-
-    fallback[`kit/products/${context.params?.id}`] =
-      fallback["kit/products#selected"];
   }
 
   return {
diff --git a/frontend/pages/kit/products/services.ts b/frontend/pages/kit/products/services.ts
index c99c4d3..92d480a 100644
--- a/frontend/pages/kit/products/services.ts
+++ b/frontend/pages/kit/products/services.ts
@@ -27,8 +27,8 @@ export function useProducts(params: any, config?: SWRConfiguration) {
   };
 }
 
-export function useProduct(id?: number, config?: SWRConfiguration) {
-  const { data, error, mutate } = useSWR<Product>(
+export function useProduct(id: number | undefined, config?: SWRConfiguration) {
+  const { data, error, mutate } = useSWR(
     id ? `kit/products/${id}` : null,
     fetcher,
     {
diff --git a/frontend/src/components/Products/Form.tsx b/frontend/src/components/Products/Form.tsx
index 1a0b4f0..85d2968 100644
--- a/frontend/src/components/Products/Form.tsx
+++ b/frontend/src/components/Products/Form.tsx
@@ -1,7 +1,6 @@
 import * as yup from "yup";
 import { useState } from "react";
 import { api } from "@/src/services";
-import { useRouter } from "next/router";
 import { useSWRConfig } from "swr";
 import request from "axios";
 
@@ -9,7 +8,7 @@ import { Product, useProduct } from "@/pages/kit/products/services";
 import FormPrimitive, { Input } from "@/components/Form";
 import Notification from "@/components/Notification";
 import * as FormActions from "@/components/Form/Actions";
-import { useProductsState } from "./context";
+import { useProductsActions, useProductsState } from "./context";
 
 const schema = yup
   .object({
@@ -18,18 +17,20 @@ const schema = yup
   .required();
 
 export default function Form(): JSX.Element {
+  const { mutate } = useSWRConfig();
   const [message, setMessage] = useState<string>();
   const [errors, setErrors] = useState({});
-  const { mutate } = useSWRConfig();
   const { productId } = useProductsState();
+  const { setProductId } = useProductsActions();
   const { product } = useProduct(productId);
-  const router = useRouter();
 
   const onSubmit = (data: Product) => {
     mutate(
       "kit/products",
       async (products: Product[]) => {
         try {
+          const currentProducts = products !== undefined ? products : [];
+
           const { data: updatedProduct } = await api.request({
             url: `kit/products/${data.id || ""}`,
             method: data.id ? "put" : "post",
@@ -38,31 +39,27 @@ export default function Form(): JSX.Element {
             },
           });
 
-          // if (!data.id) {
-          //   router.push(
-          //     `/kit/products/[id]`,
-          //     `/kit/products/${updatedProduct.id}`,
-          //     {
-          //       shallow: true,
-          //     }
-          //   );
-          // }
-
-          if (products.length <= 0 || !data.id) {
+          if (!data.id) {
+            setProductId(updatedProduct.id);
+          }
+
+          if (currentProducts.length <= 0 || !data.id) {
             setMessage("Product was successfully created.");
 
-            return [...products, updatedProduct];
+            return [updatedProduct, ...currentProducts];
           }
 
           setMessage("Product was successfully updated.");
 
-          return products.map((item) =>
+          return currentProducts.map((item) =>
             item.id === data.id ? updatedProduct : item
           );
         } catch (err) {
           if (request.isAxiosError(err) && err.response) {
             setErrors(err.response?.data);
           }
+
+          products;
         }
       },
       { revalidate: false }
@@ -80,10 +77,7 @@ export default function Form(): JSX.Element {
         await api.delete(`kit/products/${product.id}`);
 
         setMessage("Product was successfully destroyed.");
-
-        // router.push(`/kit/products/[id]`, `/kit/products/new`, {
-        //   shallow: true,
-        // });
+        setProductId(undefined);
 
         return products.filter((item) => item.id !== product.id);
       },
@@ -99,7 +93,7 @@ export default function Form(): JSX.Element {
         className="simple_form grow space-y-6"
         onSubmit={onSubmit}
         schema={schema}
-        defaultValues={product}
+        defaultValues={product || { name: "" }}
         defaultErrors={errors}
       >
         <Input name="name" className="string form-input w-full" type="text" />
diff --git a/frontend/src/components/Products/Sidebar.tsx b/frontend/src/components/Products/Sidebar.tsx
index f6134cc..4ea3666 100644
--- a/frontend/src/components/Products/Sidebar.tsx
+++ b/frontend/src/components/Products/Sidebar.tsx
@@ -1,28 +1,22 @@
+import { useRouter } from "next/router";
+
 import {
   fetcher,
   useProduct,
   useProducts,
 } from "@/pages/kit/products/services";
-import { useEffect } from "react";
-import { useRouter } from "next/router";
 
 import * as SidebarPrimitive from "../Layout/Sidebar";
 import { useProductsActions, useProductsState } from "./context";
 
 export default function Sidebar() {
+  const router = useRouter();
   const { setQuery, setProductId } = useProductsActions();
   const { query, productId } = useProductsState();
+  const { product } = useProduct(productId, {
+    revalidateOnMount: router.query.id === undefined,
+  });
   const { products, mutate: productsMutate } = useProducts(query);
-  const { product } = useProduct(productId || -1);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (product === undefined) return;
-
-    router.push(router.pathname, `/kit/products/${product.id}`, {
-      shallow: true,
-    });
-  }, [product]);
 
   const handleSearch = (query: any) => {
     productsMutate(
diff --git a/frontend/src/components/Products/context.tsx b/frontend/src/components/Products/context.tsx
index db6c123..0a66ed0 100644
--- a/frontend/src/components/Products/context.tsx
+++ b/frontend/src/components/Products/context.tsx
@@ -1,5 +1,6 @@
-import { useProduct, useProducts } from "@/pages/kit/products/services";
 import { createContext, Dispatch, useContext, useReducer } from "react";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
 
 const initialState: State = {
   query: {},
@@ -22,7 +23,7 @@ export function useProductsActions() {
       });
     },
 
-    setProductId: (productId: number) => {
+    setProductId: (productId: number | undefined) => {
       dispatch({
         type: ActionKind.SET_PRODUCT_ID,
         payload: productId,
@@ -64,7 +65,7 @@ interface Action {
 
 interface State {
   query: Record<string, any>;
-  productId?: number;
+  productId: number | undefined;
 }
 
 export const ProductsProvider = ({
@@ -74,12 +75,41 @@ export const ProductsProvider = ({
   children: React.ReactNode;
   value: { fallback?: any; fallbackState?: any };
 }) => {
-  const { fallback, fallbackState } = value;
+  const router = useRouter();
+  const { fallbackState } = value;
   const [state, dispatch] = useReducer(reducer, {
     ...initialState,
     ...fallbackState,
   });
 
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      const isRoot = router.pathname === url;
+
+      isRoot &&
+        dispatch({
+          type: ActionKind.SET_PRODUCT_ID,
+          payload: undefined,
+        });
+    };
+
+    router.events.on("routeChangeComplete", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (state.productId !== undefined || state.productId !== router.query.id) {
+      router.push(router.pathname, `/kit/products/${state.productId}`, {
+        shallow: true,
+      });
+    } else {
+      router.replace("/kit/products");
+    }
+  }, [state.productId]);
+
   return (
     <ProductsStateContext.Provider value={state}>
       <ProductsDispatchContext.Provider value={dispatch}>
diff --git a/frontend/src/components/SearchList/ListItem.tsx b/frontend/src/components/SearchList/ListItem.tsx
index 3120cb4..06ec801 100644
--- a/frontend/src/components/SearchList/ListItem.tsx
+++ b/frontend/src/components/SearchList/ListItem.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import Link from "next/link";
 
 interface ListItemProps {
   id: number;
@@ -16,7 +17,7 @@ export default function ListItem(props: ListItemProps) {
 
   return (
     <li className="-mx-2">
-      <a
+      <Link
         aria-label="Edit this kit_product"
         className={clsx(
           "flex items-center justify-between w-full p-2 rounded",
@@ -30,7 +31,7 @@ export default function ListItem(props: ListItemProps) {
             <div className="text-sm font-medium">{props.name}</div>
           </div>
         </div>
-      </a>
+      </Link>
     </li>
   );
 }

From 9aa540e255cbd3cf4385b993bccb5dd537c240e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Tue, 15 Nov 2022 08:45:42 -0300
Subject: [PATCH 15/25] Using react query

---
 frontend/package.json                        |   2 +
 frontend/pages/_app.tsx                      |  21 +--
 frontend/pages/kit/products/[id].tsx         |  22 ++--
 frontend/pages/kit/products/index.tsx        |  11 +-
 frontend/pages/kit/products/services.ts      |  51 +++-----
 frontend/src/components/Products/Form.tsx    | 130 +++++++++++--------
 frontend/src/components/Products/Sidebar.tsx |  28 ++--
 frontend/src/components/Products/context.tsx |  13 +-
 frontend/yarn.lock                           |  55 +++++++-
 9 files changed, 194 insertions(+), 139 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 1d38215..899e622 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@hookform/resolvers": "^2.9.10",
     "@radix-ui/react-slot": "^1.0.1",
+    "@tanstack/react-query": "^4.16.1",
     "axios": "^1.1.3",
     "clsx": "^1.2.1",
     "lodash": "^4.17.21",
@@ -23,6 +24,7 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^4.16.1",
     "@types/lodash": "^4.14.186",
     "@types/node": "18.11.7",
     "@types/react": "18.0.24",
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index 7cca056..a9de74d 100644
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -1,5 +1,9 @@
 import type { AppProps } from "next/app";
-import { SWRConfig } from "swr";
+import {
+  Hydrate,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
 
 import Layout from "@/components/Layout";
 
@@ -7,18 +11,15 @@ import "../styles/globals.css";
 import { useState } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
-  const [cache] = useState(() => new Map(Object.entries(pageProps.fallback)));
+  const [queryClient] = useState(() => new QueryClient());
 
   return (
     <Layout>
-      <SWRConfig
-        value={{
-          fallback: pageProps.fallback,
-          provider: () => cache,
-        }}
-      >
-        <Component {...pageProps} />
-      </SWRConfig>
+      <QueryClientProvider client={queryClient}>
+        <Hydrate state={pageProps.dehydratedState}>
+          <Component {...pageProps} />
+        </Hydrate>
+      </QueryClientProvider>
     </Layout>
   );
 }
diff --git a/frontend/pages/kit/products/[id].tsx b/frontend/pages/kit/products/[id].tsx
index 3aa163b..1ada57e 100644
--- a/frontend/pages/kit/products/[id].tsx
+++ b/frontend/pages/kit/products/[id].tsx
@@ -1,4 +1,5 @@
 import { GetStaticPropsContext } from "next/types";
+import { dehydrate, QueryClient } from "@tanstack/react-query";
 
 import { fetcher } from "./services";
 
@@ -28,20 +29,25 @@ export default function ProductPage({ id, fallback }: ProductsPageProps) {
 }
 
 export async function getServerSideProps(context: GetStaticPropsContext) {
-  let fallback: Record<string, any> = {
-    "kit/products": await fetcher("kit/products"),
-  };
+  const productId = context.params?.id;
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery(
+    ["kit/products"],
+    async () => await fetcher("kit/products")
+  );
 
-  if (context.params?.id) {
-    fallback[`kit/products/${context.params.id}`] = await fetcher(
-      `kit/products/${context.params?.id}`
+  if (productId) {
+    await queryClient.prefetchQuery(
+      ["kit/products", productId],
+      async () => await fetcher(`kit/products/${productId}`)
     );
   }
 
   return {
     props: {
-      id: context.params?.id || "",
-      fallback,
+      id: productId,
+      dehydratedState: dehydrate(queryClient),
     },
   };
 }
diff --git a/frontend/pages/kit/products/index.tsx b/frontend/pages/kit/products/index.tsx
index 67e5aee..5599266 100644
--- a/frontend/pages/kit/products/index.tsx
+++ b/frontend/pages/kit/products/index.tsx
@@ -1,3 +1,5 @@
+import { dehydrate, QueryClient } from "@tanstack/react-query";
+
 import { fetcher } from "./services";
 
 import Form from "@/src/components/Products/Form";
@@ -25,13 +27,14 @@ export default function ProductsPage({ fallback }: ProductsPageProps) {
 }
 
 export async function getServerSideProps() {
-  const products = await fetcher("kit/products");
+  const queryClient = new QueryClient();
+  const fetchProducts = async () => await fetcher("kit/products");
+
+  await queryClient.prefetchQuery(["kit/products"], fetchProducts);
 
   return {
     props: {
-      fallback: {
-        "kit/products": products,
-      },
+      dehydratedState: dehydrate(queryClient),
     },
   };
 }
diff --git a/frontend/pages/kit/products/services.ts b/frontend/pages/kit/products/services.ts
index 92d480a..a312c49 100644
--- a/frontend/pages/kit/products/services.ts
+++ b/frontend/pages/kit/products/services.ts
@@ -1,5 +1,5 @@
-import useSWR, { SWRConfiguration } from "swr";
 import { fetcher } from "@/src/services";
+import { useQuery } from "@tanstack/react-query";
 
 export { fetcher };
 
@@ -8,40 +8,21 @@ export interface Product {
   name: string;
 }
 
-export function useProducts(params: any, config?: SWRConfiguration) {
-  const { data, error, mutate } = useSWR<Product[]>(
-    "kit/products",
-    () => fetcher("kit/products", { params }),
-    {
-      revalidateOnFocus: false,
-      revalidateOnMount: false,
-      ...config,
-    }
-  );
-
-  return {
-    products: data || [],
-    isLoading: !error && !data,
-    isError: error,
-    mutate,
-  };
+export function useProducts(query?: Record<string, undefined>) {
+  return useQuery({
+    queryKey: ["kit/products"],
+    queryFn: () => fetcher("kit/products", { params: query }),
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
 }
 
-export function useProduct(id: number | undefined, config?: SWRConfiguration) {
-  const { data, error, mutate } = useSWR(
-    id ? `kit/products/${id}` : null,
-    fetcher,
-    {
-      revalidateOnFocus: false,
-      revalidateOnMount: false,
-      ...config,
-    }
-  );
-
-  return {
-    product: data,
-    isLoading: !error && !data,
-    isError: error,
-    mutate,
-  };
+export function useProduct(id?: number) {
+  return useQuery({
+    queryKey: ["kit/products", id],
+    queryFn: () => fetcher(`kit/products/${id}`),
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    enabled: !!id,
+  });
 }
diff --git a/frontend/src/components/Products/Form.tsx b/frontend/src/components/Products/Form.tsx
index 85d2968..ffffbaa 100644
--- a/frontend/src/components/Products/Form.tsx
+++ b/frontend/src/components/Products/Form.tsx
@@ -1,7 +1,6 @@
 import * as yup from "yup";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { api } from "@/src/services";
-import { useSWRConfig } from "swr";
 import request from "axios";
 
 import { Product, useProduct } from "@/pages/kit/products/services";
@@ -9,6 +8,7 @@ import FormPrimitive, { Input } from "@/components/Form";
 import Notification from "@/components/Notification";
 import * as FormActions from "@/components/Form/Actions";
 import { useProductsActions, useProductsState } from "./context";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 const schema = yup
   .object({
@@ -17,72 +17,88 @@ const schema = yup
   .required();
 
 export default function Form(): JSX.Element {
-  const { mutate } = useSWRConfig();
+  const queryClient = useQueryClient();
   const [message, setMessage] = useState<string>();
   const [errors, setErrors] = useState({});
   const { productId } = useProductsState();
   const { setProductId } = useProductsActions();
-  const { product } = useProduct(productId);
+  const { data: product } = useProduct(productId);
+
+  useEffect(() => {
+    setErrors({});
+  }, [productId]);
+
+  const updateMutation = useMutation({
+    mutationFn: async (data: Product) => {
+      try {
+        const { data: updatedProduct } = await api.request({
+          url: `kit/products/${data.id || ""}`,
+          method: data.id ? "put" : "post",
+          data: {
+            kit_product: data,
+          },
+        });
+
+        setMessage(
+          `Product was successfully ${data.id ? "updated" : "created"}`
+        );
+
+        return updatedProduct;
+      } catch (err) {
+        if (request.isAxiosError(err) && err.response) {
+          setErrors(err.response?.data);
+        }
 
-  const onSubmit = (data: Product) => {
-    mutate(
-      "kit/products",
-      async (products: Product[]) => {
-        try {
-          const currentProducts = products !== undefined ? products : [];
-
-          const { data: updatedProduct } = await api.request({
-            url: `kit/products/${data.id || ""}`,
-            method: data.id ? "put" : "post",
-            data: {
-              kit_product: data,
-            },
-          });
-
-          if (!data.id) {
-            setProductId(updatedProduct.id);
-          }
-
-          if (currentProducts.length <= 0 || !data.id) {
-            setMessage("Product was successfully created.");
-
-            return [updatedProduct, ...currentProducts];
-          }
-
-          setMessage("Product was successfully updated.");
-
-          return currentProducts.map((item) =>
-            item.id === data.id ? updatedProduct : item
-          );
-        } catch (err) {
-          if (request.isAxiosError(err) && err.response) {
-            setErrors(err.response?.data);
-          }
-
-          products;
+        throw err;
+      }
+    },
+    onSuccess: async (updatedProduct) => {
+      await queryClient.setQueryData<Product[]>(["kit/products"], (old) => {
+        const oldProducts = old ? [...old] : [];
+
+        const index = oldProducts.findIndex(
+          (item) => item.id === updatedProduct.id
+        ) as number;
+
+        if (index > -1) {
+          oldProducts[index] = updatedProduct;
+        } else {
+          oldProducts.push(updatedProduct);
         }
-      },
-      { revalidate: false }
-    );
-  };
 
-  const handleDelete = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault();
+        return oldProducts;
+      });
+
+      setProductId(updatedProduct.id);
+    },
+  });
+
+  const destroyMutation = useMutation({
+    mutationFn: async (data: Product) => {
+      await api.delete(`kit/products/${data.id}`);
 
-    mutate(
-      "kit/products",
-      async (products: Product[]) => {
-        if (product === undefined) return;
+      setMessage("Product was successfully destroyed.");
 
-        await api.delete(`kit/products/${product.id}`);
+      return data;
+    },
+    onSuccess: async (updatedProduct) => {
+      await queryClient.setQueryData<Product[]>(["kit/products"], (old) => {
+        const oldProducts = old || [];
+        return oldProducts.filter((item) => item.id !== updatedProduct.id);
+      });
 
-        setMessage("Product was successfully destroyed.");
-        setProductId(undefined);
+      setProductId(undefined);
+    },
+  });
+
+  const onSubmit = (data: Product) => {
+    updateMutation.mutate(data);
+  };
+
+  const handleDelete = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault();
 
-        return products.filter((item) => item.id !== product.id);
-      },
-      { revalidate: false }
-    );
+    destroyMutation.mutate(product);
   };
 
   return (
diff --git a/frontend/src/components/Products/Sidebar.tsx b/frontend/src/components/Products/Sidebar.tsx
index 4ea3666..487e6f0 100644
--- a/frontend/src/components/Products/Sidebar.tsx
+++ b/frontend/src/components/Products/Sidebar.tsx
@@ -1,10 +1,7 @@
 import { useRouter } from "next/router";
+import { useEffect } from "react";
 
-import {
-  fetcher,
-  useProduct,
-  useProducts,
-} from "@/pages/kit/products/services";
+import { useProduct, useProducts } from "@/pages/kit/products/services";
 
 import * as SidebarPrimitive from "../Layout/Sidebar";
 import { useProductsActions, useProductsState } from "./context";
@@ -13,19 +10,12 @@ export default function Sidebar() {
   const router = useRouter();
   const { setQuery, setProductId } = useProductsActions();
   const { query, productId } = useProductsState();
-  const { product } = useProduct(productId, {
-    revalidateOnMount: router.query.id === undefined,
-  });
-  const { products, mutate: productsMutate } = useProducts(query);
+  const { data: products, refetch } = useProducts(query);
+  const { data: product } = useProduct(productId);
 
-  const handleSearch = (query: any) => {
-    productsMutate(
-      async () => await fetcher("kit/products", { params: query }),
-      {
-        revalidate: false,
-      }
-    ).then(() => setQuery(query));
-  };
+  useEffect(() => {
+    if (query !== undefined) refetch();
+  }, [query]);
 
   return (
     <SidebarPrimitive.Root>
@@ -35,9 +25,9 @@ export default function Sidebar() {
         title="Products"
       />
       <SidebarPrimitive.List
-        items={products}
+        items={products || []}
         selectedItem={product}
-        handleSearch={handleSearch}
+        handleSearch={setQuery}
         handleClickItem={setProductId}
       />
     </SidebarPrimitive.Root>
diff --git a/frontend/src/components/Products/context.tsx b/frontend/src/components/Products/context.tsx
index 0a66ed0..fec5189 100644
--- a/frontend/src/components/Products/context.tsx
+++ b/frontend/src/components/Products/context.tsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 
 const initialState: State = {
-  query: {},
+  query: undefined,
   productId: undefined,
 };
 
@@ -64,8 +64,8 @@ interface Action {
 }
 
 interface State {
-  query: Record<string, any>;
-  productId: number | undefined;
+  query?: Record<string, any>;
+  productId?: number;
 }
 
 export const ProductsProvider = ({
@@ -101,11 +101,14 @@ export const ProductsProvider = ({
   }, []);
 
   useEffect(() => {
-    if (state.productId !== undefined || state.productId !== router.query.id) {
+    if (
+      state.productId !== undefined &&
+      state.productId !== parseInt(router.query.id as string)
+    ) {
       router.push(router.pathname, `/kit/products/${state.productId}`, {
         shallow: true,
       });
-    } else {
+    } else if (router.asPath !== "/kit/products") {
       router.replace("/kit/products");
     }
   }, [state.productId]);
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 53aa7b4..0bee68d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -188,6 +188,35 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tanstack/match-sorter-utils@8.1.1":
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.1.1.tgz#895f407813254a46082a6bbafad9b39b943dc834"
+  integrity sha512-IdmEekEYxQsoLOR0XQyw3jD1GujBpRRYaGJYQUw1eOT1eUugWxdc7jomh1VQ1EKHcdwDLpLaCz/8y4KraU4T9A==
+  dependencies:
+    remove-accents "0.4.2"
+
+"@tanstack/query-core@4.15.1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.15.1.tgz#a282f04fe5e612b50019e1cfaf0efabd220e00ce"
+  integrity sha512-+UfqJsNbPIVo0a9ANW0ZxtjiMfGLaaoIaL9vZeVycvmBuWywJGtSi7fgPVMCPdZQFOzMsaXaOsDtSKQD5xLRVQ==
+
+"@tanstack/react-query-devtools@^4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.16.1.tgz#38511e300b982607b841ae9e713e2280ffc23519"
+  integrity sha512-VrDYLmG+OOcvGSZL5avG4R8jhqeMFP7pzW2sh2BWEV9UfI+aocG+CW8y8ygacxuKy48m8Tyo/xfe8H1z9BGb+g==
+  dependencies:
+    "@tanstack/match-sorter-utils" "8.1.1"
+    superjson "^1.10.0"
+    use-sync-external-store "^1.2.0"
+
+"@tanstack/react-query@^4.16.1":
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.16.1.tgz#077006b8eb2c87fbe8d1597c1a0083a2d218b791"
+  integrity sha512-PDE9u49wSDykPazlCoLFevUpceLjQ0Mm8i6038HgtTEKb/aoVnUZdlUP7C392ds3Cd75+EGlHU7qpEX06R7d9Q==
+  dependencies:
+    "@tanstack/query-core" "4.15.1"
+    use-sync-external-store "^1.2.0"
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
@@ -547,6 +576,13 @@ concat-map@0.0.1:
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+copy-anything@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.2.tgz#7189171ff5e1893b2287e8bf574b8cd448ed50b1"
+  integrity sha512-CzATjGXzUQ0EvuvgOCI6A4BGOo2bcVx8B+eC2nF862iv9fopnPQwlrbACakNCHRIJbCSBj+J/9JeDf60k64MkA==
+  dependencies:
+    is-what "^4.1.6"
+
 core-js-pure@^3.25.1:
   version "3.26.0"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.26.0.tgz"
@@ -1321,6 +1357,11 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-what@^4.1.6:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.7.tgz#c41dc1d2d2d6a9285c624c2505f61849c8b1f9cc"
+  integrity sha512-DBVOQNiPKnGMxRMLIYSwERAS5MVY1B7xYiGnpgctsOFvVDz9f9PFXXxMcTOHuoqYp4NK9qFYQaIC1NRRxLMpBQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
@@ -1836,6 +1877,11 @@ regexpp@^3.2.0:
   resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -2002,6 +2048,13 @@ styled-jsx@5.1.0:
   dependencies:
     client-only "0.0.1"
 
+superjson@^1.10.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.11.0.tgz#f6e2ae0d8fbac61c3fca09ab6739ac9678414d1b"
+  integrity sha512-6PfAg1FKhqkwWvPb2uXhH4MkMttdc17eJ91+Aoz4s1XUEDZFmLfFx/xVA3wgkPxAGy5dpozgGdK6V/n20Wj9yg==
+  dependencies:
+    copy-anything "^3.0.2"
+
 supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
@@ -2134,7 +2187,7 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-sync-external-store@1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==

From c7190fa6b6c574810d6e574d6f3da3e618f35aa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Sun, 20 Nov 2022 01:32:09 -0300
Subject: [PATCH 16/25] Stable version using react query

---
 frontend/pages/_app.tsx                       |  12 +-
 frontend/pages/kit/products/[id].tsx          |  31 ++--
 frontend/pages/kit/products/index.tsx         |   5 +-
 frontend/pages/kit/products/services.ts       | 140 +++++++++++++++---
 frontend/src/components/Form/Actions.tsx      |  17 ++-
 frontend/src/components/Form/Input.tsx        |   2 +-
 frontend/src/components/Form/index.tsx        |  14 ++
 frontend/src/components/Loading.tsx           |  34 +++++
 frontend/src/components/LoadingOverlay.tsx    |   9 ++
 frontend/src/components/Notification.tsx      | 138 +++++++++++++----
 frontend/src/components/Products/Form.tsx     | 130 +++++++---------
 frontend/src/components/Products/Sidebar.tsx  |  20 ++-
 frontend/src/components/Products/context.tsx  |  85 ++++++-----
 .../src/components/SearchList/ListItem.tsx    |   2 +-
 frontend/src/services.ts                      |  11 +-
 15 files changed, 445 insertions(+), 205 deletions(-)
 create mode 100644 frontend/src/components/Loading.tsx
 create mode 100644 frontend/src/components/LoadingOverlay.tsx

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index a9de74d..1c1a6e8 100644
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -11,7 +11,17 @@ import "../styles/globals.css";
 import { useState } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
-  const [queryClient] = useState(() => new QueryClient());
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnMount: false,
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
 
   return (
     <Layout>
diff --git a/frontend/pages/kit/products/[id].tsx b/frontend/pages/kit/products/[id].tsx
index 1ada57e..0ae5813 100644
--- a/frontend/pages/kit/products/[id].tsx
+++ b/frontend/pages/kit/products/[id].tsx
@@ -1,7 +1,7 @@
-import { GetStaticPropsContext } from "next/types";
+import { GetServerSideProps } from "next/types";
 import { dehydrate, QueryClient } from "@tanstack/react-query";
 
-import { fetcher } from "./services";
+import { findAll, findById, Product } from "./services";
 
 import Form from "@/src/components/Products/Form";
 import Sidebar from "@/components/Products/Sidebar";
@@ -9,13 +9,13 @@ import * as Page from "@/components/Layout/Page";
 import { ProductsProvider } from "@/src/components/Products/context";
 
 interface ProductsPageProps {
-  id: number;
+  product: Product;
   fallback: Record<string, any>;
 }
 
-export default function ProductPage({ id, fallback }: ProductsPageProps) {
+export default function ProductPage({ product, fallback }: ProductsPageProps) {
   return (
-    <ProductsProvider value={{ fallback, fallbackState: { productId: id } }}>
+    <ProductsProvider value={{ fallback, fallbackState: { product } }}>
       <Page.Root>
         <Page.Sidebar>
           <Sidebar />
@@ -28,26 +28,23 @@ export default function ProductPage({ id, fallback }: ProductsPageProps) {
   );
 }
 
-export async function getServerSideProps(context: GetStaticPropsContext) {
-  const productId = context.params?.id;
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+  const productId = params?.id ? parseInt(params.id as string) : undefined;
   const queryClient = new QueryClient();
+  let product = {} as Product;
 
-  await queryClient.prefetchQuery(
-    ["kit/products"],
-    async () => await fetcher("kit/products")
-  );
+  await queryClient.prefetchQuery(["kit/products"], findAll);
 
   if (productId) {
-    await queryClient.prefetchQuery(
-      ["kit/products", productId],
-      async () => await fetcher(`kit/products/${productId}`)
-    );
+    product = await findById(productId);
+
+    await queryClient.prefetchQuery(["kit/products", productId], () => product);
   }
 
   return {
     props: {
-      id: productId,
+      product: product,
       dehydratedState: dehydrate(queryClient),
     },
   };
-}
+};
diff --git a/frontend/pages/kit/products/index.tsx b/frontend/pages/kit/products/index.tsx
index 5599266..48d69e2 100644
--- a/frontend/pages/kit/products/index.tsx
+++ b/frontend/pages/kit/products/index.tsx
@@ -1,6 +1,6 @@
 import { dehydrate, QueryClient } from "@tanstack/react-query";
 
-import { fetcher } from "./services";
+import { findAll } from "./services";
 
 import Form from "@/src/components/Products/Form";
 import Sidebar from "@/components/Products/Sidebar";
@@ -28,9 +28,8 @@ export default function ProductsPage({ fallback }: ProductsPageProps) {
 
 export async function getServerSideProps() {
   const queryClient = new QueryClient();
-  const fetchProducts = async () => await fetcher("kit/products");
 
-  await queryClient.prefetchQuery(["kit/products"], fetchProducts);
+  await queryClient.prefetchQuery(["kit/products"], findAll);
 
   return {
     props: {
diff --git a/frontend/pages/kit/products/services.ts b/frontend/pages/kit/products/services.ts
index a312c49..4133931 100644
--- a/frontend/pages/kit/products/services.ts
+++ b/frontend/pages/kit/products/services.ts
@@ -1,28 +1,132 @@
-import { fetcher } from "@/src/services";
-import { useQuery } from "@tanstack/react-query";
-
-export { fetcher };
+import { api } from "@/src/services";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 export interface Product {
   id?: number;
   name: string;
 }
 
-export function useProducts(query?: Record<string, undefined>) {
-  return useQuery({
-    queryKey: ["kit/products"],
-    queryFn: () => fetcher("kit/products", { params: query }),
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
+export const findAll = async (query?: Record<string, any>) => {
+  const response = await api.get<Product[]>("kit/products", { params: query });
+
+  return response.data;
+};
+
+export const findById = async (id: any) => {
+  const response = await api.get<Product>(`kit/products/${id}`);
+
+  return response.data;
+};
+
+const create = async ({ name }: Product) => {
+  const response = await api.post<any>("kit/products", {
+    kit_product: { name },
   });
-}
 
-export function useProduct(id?: number) {
-  return useQuery({
-    queryKey: ["kit/products", id],
-    queryFn: () => fetcher(`kit/products/${id}`),
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    enabled: !!id,
+  return response.data;
+};
+
+const update = async (id: any, { name }: Product) => {
+  const response = await api.put<any>(`kit/products/${id}`, {
+    kit_product: { name },
   });
+
+  return response.data;
+};
+
+const deleteById = async (id: any) => {
+  const response = await api.delete<any>(`kit/products/${id}`);
+
+  return response.data;
+};
+
+export function useProducts(query?: Record<string, any>) {
+  const {
+    data,
+    isFetching,
+    refetch: getAllProducts,
+  } = useQuery(["kit/products"], async () => await findAll(query));
+
+  return {
+    products: data,
+    isLoading: isFetching,
+    getAllProducts,
+  };
+}
+
+export function useProduct(product: Product) {
+  const {
+    data,
+    isFetching: isLoadingProduct,
+    refetch: getProduct,
+  } = useQuery(
+    ["kit/products", product.id],
+    async () => await findById(product.id),
+    { enabled: !!product.id }
+  );
+  const queryClient = useQueryClient();
+
+  const { isLoading: isPostingProduct, mutateAsync: postProduct } = useMutation(
+    (newData: Product) => create(newData),
+    {
+      onSuccess: (data) => {
+        queryClient.prefetchQuery(["kit/products", data.id], data);
+
+        const previousTodos = queryClient.getQueryData<Product[]>([
+          "kit/products",
+        ])!;
+
+        queryClient.setQueryData(["kit/products"], () => [
+          data,
+          ...previousTodos,
+        ]);
+      },
+    }
+  );
+
+  const { isLoading: isPuttingProduct, mutateAsync: putProduct } = useMutation(
+    (newData: Product) => update(product.id, newData),
+    {
+      onSuccess: (data) => {
+        queryClient.invalidateQueries({
+          queryKey: ["kit/products", product.id],
+        });
+
+        const previousTodos = queryClient.getQueryData<Product[]>([
+          "kit/products",
+        ])!;
+
+        queryClient.setQueryData(["kit/products"], () =>
+          previousTodos.map((item) => (item.id === data.id ? data : item))
+        );
+      },
+    }
+  );
+
+  const { isLoading: isDeletingProduct, mutateAsync: deleteProduct } =
+    useMutation(() => deleteById(product.id), {
+      onSuccess: () => {
+        const previousTodos = queryClient.getQueryData<Product[]>([
+          "kit/products",
+        ])!;
+
+        queryClient.setQueryData(["kit/products"], () =>
+          previousTodos.filter((item) => item.id !== product.id)
+        );
+      },
+    });
+
+  return {
+    product: data,
+    isLoading:
+      !!product.id &&
+      (isLoadingProduct ||
+        isPostingProduct ||
+        isPuttingProduct ||
+        isDeletingProduct),
+    getProduct,
+    postProduct,
+    putProduct,
+    deleteProduct,
+  };
 }
diff --git a/frontend/src/components/Form/Actions.tsx b/frontend/src/components/Form/Actions.tsx
index 5c2b665..d21f9b6 100644
--- a/frontend/src/components/Form/Actions.tsx
+++ b/frontend/src/components/Form/Actions.tsx
@@ -1,23 +1,32 @@
 import Link, { LinkProps } from "next/link";
 import clsx from "clsx";
+import Loading from "../Loading";
 
 interface FormActionsProps {
   resource: any;
   children: React.ReactNode;
+  loading: boolean;
 }
 
-function FormActions({ resource, children }: FormActionsProps) {
+function FormActions({
+  resource,
+  children,
+  loading = false,
+}: FormActionsProps) {
   return (
     <footer>
       <div className="flex flex-col py-5 border-t border-slate-200">
         <div className="flex self-end">
           {resource && resource.id && children}
-          <input
+          <button
             type="submit"
             name="commit"
-            value={resource && resource.id ? "Update" : "Create"}
             className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3"
-          />
+            disabled={loading}
+          >
+            {loading && <Loading color="slate-100" />}
+            {resource && resource.id ? "Update" : "Create"}
+          </button>
         </div>
       </div>
     </footer>
diff --git a/frontend/src/components/Form/Input.tsx b/frontend/src/components/Form/Input.tsx
index 6d19b00..3ddaf7d 100644
--- a/frontend/src/components/Form/Input.tsx
+++ b/frontend/src/components/Form/Input.tsx
@@ -12,7 +12,7 @@ export default function Input({ name, register, error, ...rest }: InputProps) {
   if (Array.isArray(error)) {
     errors = error;
   } else if (error) {
-    errors.push(error.message as string);
+    errors.push(error.message as FieldError);
   }
 
   return (
diff --git a/frontend/src/components/Form/index.tsx b/frontend/src/components/Form/index.tsx
index b560ef5..f626db1 100644
--- a/frontend/src/components/Form/index.tsx
+++ b/frontend/src/components/Form/index.tsx
@@ -3,6 +3,7 @@ import { createElement, ReactElement, useEffect } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 
 export { default as Input } from "./Input";
+import Notification from "@/components/Notification";
 
 interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   schema?: any;
@@ -24,6 +25,7 @@ export default function Form({
     handleSubmit,
     register,
     reset,
+    setError,
     formState: { errors },
   } = useForm({
     defaultValues,
@@ -34,8 +36,20 @@ export default function Form({
     reset(defaultValues);
   }, [defaultValues]);
 
+  useEffect(() => {
+    Object.entries(defaultErrors).forEach(([key, value]) =>
+      setError(key, { type: "custom", message: value })
+    );
+  }, [defaultErrors]);
+
+  const baseErrors: string[] = defaultErrors?.base || [];
+
   return (
     <form className={className} onSubmit={handleSubmit(onSubmit)}>
+      {baseErrors && (
+        <Notification messages={baseErrors.map((err) => err)} type="error" />
+      )}
+
       {Array.isArray(children)
         ? children.map((child) => {
             return child.props.name
diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx
new file mode 100644
index 0000000..f19b459
--- /dev/null
+++ b/frontend/src/components/Loading.tsx
@@ -0,0 +1,34 @@
+interface LoadingProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+export default function Loading({
+  width = 24,
+  height = 24,
+  color = "indigo-600",
+}: LoadingProps) {
+  return (
+    <svg
+      className={`animate-spin -ml-1 mr-3 h-5 w-5 text-${color}`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox={`0 0 ${width} ${height}`}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/frontend/src/components/LoadingOverlay.tsx b/frontend/src/components/LoadingOverlay.tsx
new file mode 100644
index 0000000..e85c8a8
--- /dev/null
+++ b/frontend/src/components/LoadingOverlay.tsx
@@ -0,0 +1,9 @@
+import Loading from "./Loading";
+
+export default function LoadingOverlay() {
+  return (
+    <div className="absolute top-0 left-0 right-0 bottom-0 w-full h-full z-50 overflow-hidden bg-slate-100 opacity-75 flex flex-col items-center justify-center">
+      <Loading />
+    </div>
+  );
+}
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
index 46f4289..21aa9a3 100644
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -1,46 +1,124 @@
-import clsx from "clsx";
-
 interface NotificationProps {
-  message: string | undefined;
+  message?: string;
+  messages?: string[];
+  className?: string;
   type?: "success" | "warning" | "error" | "info";
 }
 
-export default function Notification({ message, type }: NotificationProps) {
-  if (!message) return null;
+import { useEffect, useState } from "react";
+
+function Notification({
+  message,
+  messages,
+  className,
+  type,
+}: NotificationProps) {
+  const [open, setOpen] = useState(true);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setOpen(false);
+    }, 3000);
 
-  let colorClass;
+    return () => clearTimeout(timeout);
+  }, []);
 
-  switch (type) {
-    case "warning":
-      colorClass = "";
-      break;
+  useEffect(() => {
+    setOpen(true);
+  }, [message, messages]);
 
-    case "error":
-      colorClass = "";
-      break;
+  if (!message && (!messages || messages.length === 0)) return null;
 
-    case "info":
-      colorClass = "";
-      break;
+  let messageItems = [];
 
-    default:
-      colorClass = "bg-emerald-100 border border-emerald-200 text-emerald-600";
-      break;
-  }
+  if (message) messageItems.push(message);
+  if (messages) messageItems = messageItems.concat(messages);
 
-  return message ? (
-    <div className={`px-4 py-2 rounded-sm text-sm ${colorClass}`}>
-      <div className="flex w-full justify-between items-start">
-        <div className="flex">
+  const typeIcon = (type?: string) => {
+    switch (type) {
+      case "warning":
+        return (
+          <svg
+            className="w-4 h-4 shrink-0 fill-current text-amber-500 mt-[3px] mr-3"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+          </svg>
+        );
+      case "error":
+        return (
+          <svg
+            className="w-4 h-4 shrink-0 fill-current text-rose-500 mt-[3px] mr-3"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
+          </svg>
+        );
+      case "success":
+        return (
           <svg
-            className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3"
+            className="w-4 h-4 shrink-0 fill-current text-emerald-500 mt-[3px] mr-3"
             viewBox="0 0 16 16"
           >
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z"></path>
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
           </svg>
-          <div>{message}</div>
+        );
+      default:
+        return (
+          <svg
+            className="w-4 h-4 shrink-0 fill-current text-indigo-500 mt-[3px] mr-3"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
+          </svg>
+        );
+    }
+  };
+
+  const typeColor = (type?: string) => {
+    switch (type) {
+      case "warning":
+        return "bg-amber-100 border-amber-200 text-amber-600";
+      case "error":
+        return "bg-rose-100 border-rose-200 text-rose-600";
+      case "success":
+        return "bg-emerald-100 border-emerald-200 text-emerald-600";
+      default:
+        return "bg-indigo-100 border-indigo-200 text-indigo-500";
+    }
+  };
+
+  return (
+    <>
+      {open && (
+        <div
+          className={`px-4 py-2 rounded-sm text-sm border mb-4 ${typeColor(
+            type
+          )}`}
+        >
+          <div className="flex w-full justify-between items-start">
+            <div className="flex">
+              {typeIcon(type)}
+              <ul>
+                {messageItems.map((message) => (
+                  <li key={message}>{message}</li>
+                ))}
+              </ul>
+            </div>
+            <button
+              className="opacity-70 hover:opacity-80 ml-3 mt-[3px]"
+              onClick={() => setOpen(false)}
+            >
+              <div className="sr-only">Close</div>
+              <svg className="w-4 h-4 fill-current">
+                <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+              </svg>
+            </button>
+          </div>
         </div>
-      </div>
-    </div>
-  ) : null;
+      )}
+    </>
+  );
 }
+
+export default Notification;
diff --git a/frontend/src/components/Products/Form.tsx b/frontend/src/components/Products/Form.tsx
index ffffbaa..ca8e41c 100644
--- a/frontend/src/components/Products/Form.tsx
+++ b/frontend/src/components/Products/Form.tsx
@@ -1,14 +1,13 @@
 import * as yup from "yup";
 import { useEffect, useState } from "react";
-import { api } from "@/src/services";
 import request from "axios";
 
 import { Product, useProduct } from "@/pages/kit/products/services";
-import FormPrimitive, { Input } from "@/components/Form";
 import Notification from "@/components/Notification";
+import LoadingOverlay from "@/components/LoadingOverlay";
+import FormPrimitive, { Input } from "@/components/Form";
 import * as FormActions from "@/components/Form/Actions";
-import { useProductsActions, useProductsState } from "./context";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { initialState, useProductsActions, useProductsState } from "./context";
 
 const schema = yup
   .object({
@@ -17,109 +16,86 @@ const schema = yup
   .required();
 
 export default function Form(): JSX.Element {
-  const queryClient = useQueryClient();
   const [message, setMessage] = useState<string>();
-  const [errors, setErrors] = useState({});
-  const { productId } = useProductsState();
-  const { setProductId } = useProductsActions();
-  const { data: product } = useProduct(productId);
+  const [errors, setErrors] = useState<Record<string, string[]>>({
+    base: [],
+  });
+
+  const { product: stateProduct } = useProductsState();
+  const { setProduct } = useProductsActions();
+  const { product, postProduct, putProduct, deleteProduct, isLoading } =
+    useProduct(stateProduct);
 
   useEffect(() => {
     setErrors({});
-  }, [productId]);
-
-  const updateMutation = useMutation({
-    mutationFn: async (data: Product) => {
-      try {
-        const { data: updatedProduct } = await api.request({
-          url: `kit/products/${data.id || ""}`,
-          method: data.id ? "put" : "post",
-          data: {
-            kit_product: data,
-          },
-        });
-
-        setMessage(
-          `Product was successfully ${data.id ? "updated" : "created"}`
-        );
-
-        return updatedProduct;
-      } catch (err) {
-        if (request.isAxiosError(err) && err.response) {
-          setErrors(err.response?.data);
-        }
-
-        throw err;
-      }
-    },
-    onSuccess: async (updatedProduct) => {
-      await queryClient.setQueryData<Product[]>(["kit/products"], (old) => {
-        const oldProducts = old ? [...old] : [];
-
-        const index = oldProducts.findIndex(
-          (item) => item.id === updatedProduct.id
-        ) as number;
-
-        if (index > -1) {
-          oldProducts[index] = updatedProduct;
-        } else {
-          oldProducts.push(updatedProduct);
-        }
-
-        return oldProducts;
-      });
+  }, [product]);
 
-      setProductId(updatedProduct.id);
-    },
-  });
+  const onSubmit = async (data: Product) => {
+    try {
+      setErrors({});
+      setMessage(undefined);
 
-  const destroyMutation = useMutation({
-    mutationFn: async (data: Product) => {
-      await api.delete(`kit/products/${data.id}`);
+      if (product?.id) {
+        const newData = await putProduct(data);
 
-      setMessage("Product was successfully destroyed.");
+        setProduct(newData);
+        setMessage("Product was successfully updated");
+      } else {
+        const newData = await postProduct(data);
 
-      return data;
-    },
-    onSuccess: async (updatedProduct) => {
-      await queryClient.setQueryData<Product[]>(["kit/products"], (old) => {
-        const oldProducts = old || [];
-        return oldProducts.filter((item) => item.id !== updatedProduct.id);
-      });
-
-      setProductId(undefined);
-    },
-  });
+        setProduct(newData);
+        setMessage("Product was successfully created");
+      }
+    } catch (error) {
+      let errors = {};
+
+      if (request.isAxiosError(error) && error.response?.status === 422) {
+        errors = error.response?.data;
+      } else {
+        errors = {
+          base: [(error as Error).message],
+        };
+      }
 
-  const onSubmit = (data: Product) => {
-    updateMutation.mutate(data);
+      setErrors(errors);
+    }
   };
 
   const handleDelete = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
 
-    destroyMutation.mutate(product);
+    try {
+      deleteProduct().then(() => {
+        setProduct({ id: undefined } as Product);
+        setMessage("Product was successfully removed");
+      });
+    } catch (error) {
+      setMessage((error as Error).message);
+    }
   };
 
   return (
-    <div className="mb-4 last:mb-0">
+    <div className="mb-4 last:mb-0 relative">
       <h2 className="text-2xl text-slate-800 font-bold mb-6">Edit Product</h2>
-      <Notification message={message} />
+
+      {message && <Notification message={message} type="success" />}
+      {isLoading && <LoadingOverlay />}
+
       <FormPrimitive
         className="simple_form grow space-y-6"
         onSubmit={onSubmit}
         schema={schema}
-        defaultValues={product || { name: "" }}
+        defaultValues={product || initialState.product}
         defaultErrors={errors}
       >
         <Input name="name" className="string form-input w-full" type="text" />
-        <FormActions.Root resource={product}>
+        <FormActions.Root resource={product} loading={isLoading}>
           <FormActions.Extra
             className="btn shadow-none text-rose-500 mr-3"
             href={`/kit/product/${product?.id}`}
             onClick={handleDelete}
           >
-            Destroy this product
+            Destroy this item
           </FormActions.Extra>
           <FormActions.Extra
             className="btn border-slate-200 hover:border-slate-300 text-slate-600"
diff --git a/frontend/src/components/Products/Sidebar.tsx b/frontend/src/components/Products/Sidebar.tsx
index 487e6f0..a67eb1f 100644
--- a/frontend/src/components/Products/Sidebar.tsx
+++ b/frontend/src/components/Products/Sidebar.tsx
@@ -1,22 +1,26 @@
+import { Product, useProducts } from "@/pages/kit/products/services";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useProduct, useProducts } from "@/pages/kit/products/services";
-
 import * as SidebarPrimitive from "../Layout/Sidebar";
 import { useProductsActions, useProductsState } from "./context";
 
 export default function Sidebar() {
+  const { query, product } = useProductsState();
+  const { setQuery, setProduct } = useProductsActions();
+  const { products, getAllProducts } = useProducts(query);
   const router = useRouter();
-  const { setQuery, setProductId } = useProductsActions();
-  const { query, productId } = useProductsState();
-  const { data: products, refetch } = useProducts(query);
-  const { data: product } = useProduct(productId);
 
   useEffect(() => {
-    if (query !== undefined) refetch();
+    if (query === undefined) return;
+
+    getAllProducts();
   }, [query]);
 
+  const handleClickItem = (productId: number) => {
+    setProduct({ id: productId } as Product);
+  };
+
   return (
     <SidebarPrimitive.Root>
       <SidebarPrimitive.Header
@@ -28,7 +32,7 @@ export default function Sidebar() {
         items={products || []}
         selectedItem={product}
         handleSearch={setQuery}
-        handleClickItem={setProductId}
+        handleClickItem={handleClickItem}
       />
     </SidebarPrimitive.Root>
   );
diff --git a/frontend/src/components/Products/context.tsx b/frontend/src/components/Products/context.tsx
index fec5189..7a43930 100644
--- a/frontend/src/components/Products/context.tsx
+++ b/frontend/src/components/Products/context.tsx
@@ -1,12 +1,32 @@
-import { createContext, Dispatch, useContext, useReducer } from "react";
+import { createContext, Dispatch, useContext, useReducer, useRef } from "react";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 
-const initialState: State = {
+import { Product } from "@/pages/kit/products/services";
+
+interface Action {
+  type: ActionKind;
+  payload: any;
+}
+
+interface State {
+  query?: Record<string, any>;
+  product: Product;
+}
+
+export const initialState: State = {
   query: undefined,
-  productId: undefined,
+  product: {
+    id: undefined,
+    name: "",
+  } as Product,
 };
 
+enum ActionKind {
+  SET_QUERY = "SET_QUERY",
+  SET_PRODUCT = "SET_PRODUCT",
+}
+
 const ProductsStateContext = createContext<State>(initialState);
 const ProductsDispatchContext = createContext<Dispatch<Action> | null>(null);
 
@@ -23,10 +43,10 @@ export function useProductsActions() {
       });
     },
 
-    setProductId: (productId: number | undefined) => {
+    setProduct: (product: Product) => {
       dispatch({
-        type: ActionKind.SET_PRODUCT_ID,
-        payload: productId,
+        type: ActionKind.SET_PRODUCT,
+        payload: product,
       });
     },
   });
@@ -42,10 +62,10 @@ function reducer(state: State, action: Action): State {
         query: action.payload,
       };
 
-    case ActionKind.SET_PRODUCT_ID:
+    case ActionKind.SET_PRODUCT:
       return {
         ...state,
-        productId: action.payload,
+        product: action.payload,
       };
 
     default:
@@ -53,44 +73,36 @@ function reducer(state: State, action: Action): State {
   }
 }
 
-enum ActionKind {
-  SET_QUERY = "SET_QUERY",
-  SET_PRODUCT_ID = "SET_PRODUCT_ID",
-}
-
-interface Action {
-  type: ActionKind;
-  payload: any;
-}
-
-interface State {
-  query?: Record<string, any>;
-  productId?: number;
+interface ProductsProviderProps {
+  children: React.ReactNode;
+  value: { fallback?: any; fallbackState?: any };
 }
 
 export const ProductsProvider = ({
   children,
   value,
-}: {
-  children: React.ReactNode;
-  value: { fallback?: any; fallbackState?: any };
-}) => {
-  const router = useRouter();
+}: ProductsProviderProps) => {
   const { fallbackState } = value;
+  const router = useRouter();
   const [state, dispatch] = useReducer(reducer, {
     ...initialState,
     ...fallbackState,
   });
+  const { product } = state;
+  const prevProduct = useRef(product);
 
   useEffect(() => {
     const handleRouteChange = (url: string) => {
       const isRoot = router.pathname === url;
 
-      isRoot &&
+      if (isRoot) {
+        prevProduct.current = initialState.product;
+
         dispatch({
-          type: ActionKind.SET_PRODUCT_ID,
-          payload: undefined,
+          type: ActionKind.SET_PRODUCT,
+          payload: initialState.product,
         });
+      }
     };
 
     router.events.on("routeChangeComplete", handleRouteChange);
@@ -101,17 +113,18 @@ export const ProductsProvider = ({
   }, []);
 
   useEffect(() => {
-    if (
-      state.productId !== undefined &&
-      state.productId !== parseInt(router.query.id as string)
-    ) {
-      router.push(router.pathname, `/kit/products/${state.productId}`, {
+    if (product.id === prevProduct.current.id) return;
+
+    if (product.id) {
+      prevProduct.current = product;
+
+      router.push(router.pathname, `/kit/products/${product.id}`, {
         shallow: true,
       });
-    } else if (router.asPath !== "/kit/products") {
+    } else {
       router.replace("/kit/products");
     }
-  }, [state.productId]);
+  }, [product.id]);
 
   return (
     <ProductsStateContext.Provider value={state}>
diff --git a/frontend/src/components/SearchList/ListItem.tsx b/frontend/src/components/SearchList/ListItem.tsx
index 06ec801..e172531 100644
--- a/frontend/src/components/SearchList/ListItem.tsx
+++ b/frontend/src/components/SearchList/ListItem.tsx
@@ -5,7 +5,7 @@ interface ListItemProps {
   id: number;
   name: string;
   selected: boolean;
-  handleClick: Function;
+  handleClick: (id: number) => void;
 }
 
 export default function ListItem(props: ListItemProps) {
diff --git a/frontend/src/services.ts b/frontend/src/services.ts
index bf49345..4bc6b12 100644
--- a/frontend/src/services.ts
+++ b/frontend/src/services.ts
@@ -1,18 +1,11 @@
-import axios, { AxiosRequestConfig } from "axios";
+import axios from "axios";
 
 const api = axios.create({
   baseURL: "http://localhost:3000/api/",
-  timeout: 1000,
+  timeout: 5000,
   headers: {
     Accept: "application/json",
   },
 });
 
-export const fetcher = (
-  url: string,
-  config?: AxiosRequestConfig<any> | undefined
-) => {
-  return api.get(url, config).then((res) => res.data);
-};
-
 export { api };

From a7cc1587cdd11fd0dce484df5d803061104b53fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Mon, 21 Nov 2022 10:53:23 -0300
Subject: [PATCH 17/25] Improved reducer code

---
 frontend/pages/kit/products/[id].tsx          |   2 +-
 frontend/pages/kit/products/index.tsx         |   2 +-
 frontend/pages/kit/products/services.ts       |   2 +-
 frontend/src/components/LoadingOverlay.tsx    |  12 +-
 frontend/src/components/Notification.tsx      |  19 ++-
 frontend/src/components/Products/Form.tsx     |  24 +++-
 frontend/src/components/Products/Sidebar.tsx  |  27 ++--
 frontend/src/components/Products/context.tsx  | 136 ------------------
 frontend/src/contexts/products/hooks.ts       |  29 ++++
 frontend/src/contexts/products/index.tsx      |  71 +++++++++
 .../src/contexts/products/store/actions.ts    |  20 +++
 frontend/src/contexts/products/store/index.ts |   2 +
 .../src/contexts/products/store/reducer.ts    |  43 ++++++
 frontend/tsconfig.json                        |   3 +
 14 files changed, 227 insertions(+), 165 deletions(-)
 delete mode 100644 frontend/src/components/Products/context.tsx
 create mode 100644 frontend/src/contexts/products/hooks.ts
 create mode 100644 frontend/src/contexts/products/index.tsx
 create mode 100644 frontend/src/contexts/products/store/actions.ts
 create mode 100644 frontend/src/contexts/products/store/index.ts
 create mode 100644 frontend/src/contexts/products/store/reducer.ts

diff --git a/frontend/pages/kit/products/[id].tsx b/frontend/pages/kit/products/[id].tsx
index 0ae5813..5ca55e9 100644
--- a/frontend/pages/kit/products/[id].tsx
+++ b/frontend/pages/kit/products/[id].tsx
@@ -6,7 +6,7 @@ import { findAll, findById, Product } from "./services";
 import Form from "@/src/components/Products/Form";
 import Sidebar from "@/components/Products/Sidebar";
 import * as Page from "@/components/Layout/Page";
-import { ProductsProvider } from "@/src/components/Products/context";
+import { ProductsProvider } from "@/contexts/products";
 
 interface ProductsPageProps {
   product: Product;
diff --git a/frontend/pages/kit/products/index.tsx b/frontend/pages/kit/products/index.tsx
index 48d69e2..90f5ce7 100644
--- a/frontend/pages/kit/products/index.tsx
+++ b/frontend/pages/kit/products/index.tsx
@@ -5,7 +5,7 @@ import { findAll } from "./services";
 import Form from "@/src/components/Products/Form";
 import Sidebar from "@/components/Products/Sidebar";
 import * as Page from "@/components/Layout/Page";
-import { ProductsProvider } from "@/src/components/Products/context";
+import { ProductsProvider } from "@/contexts/products";
 
 interface ProductsPageProps {
   fallback: Record<string, any>;
diff --git a/frontend/pages/kit/products/services.ts b/frontend/pages/kit/products/services.ts
index 4133931..bef6c1b 100644
--- a/frontend/pages/kit/products/services.ts
+++ b/frontend/pages/kit/products/services.ts
@@ -70,7 +70,7 @@ export function useProduct(product: Product) {
     (newData: Product) => create(newData),
     {
       onSuccess: (data) => {
-        queryClient.prefetchQuery(["kit/products", data.id], data);
+        queryClient.prefetchQuery(["kit/products", data.id], () => data);
 
         const previousTodos = queryClient.getQueryData<Product[]>([
           "kit/products",
diff --git a/frontend/src/components/LoadingOverlay.tsx b/frontend/src/components/LoadingOverlay.tsx
index e85c8a8..92b90da 100644
--- a/frontend/src/components/LoadingOverlay.tsx
+++ b/frontend/src/components/LoadingOverlay.tsx
@@ -1,8 +1,16 @@
 import Loading from "./Loading";
 
-export default function LoadingOverlay() {
+interface LoadingOverlayProps {
+  bgColor?: string;
+}
+
+export default function LoadingOverlay({
+  bgColor = "slate-100",
+}: LoadingOverlayProps) {
   return (
-    <div className="absolute top-0 left-0 right-0 bottom-0 w-full h-full z-50 overflow-hidden bg-slate-100 opacity-75 flex flex-col items-center justify-center">
+    <div
+      className={`absolute top-0 left-0 right-0 bottom-0 w-full h-full z-50 overflow-hidden bg-${bgColor} opacity-75 flex flex-col items-center justify-center`}
+    >
       <Loading />
     </div>
   );
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
index 21aa9a3..a1a6a92 100644
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -1,29 +1,36 @@
 interface NotificationProps {
   message?: string;
   messages?: string[];
+  setMessage?: Function;
   className?: string;
   type?: "success" | "warning" | "error" | "info";
 }
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 function Notification({
   message,
   messages,
-  className,
+  setMessage,
   type,
 }: NotificationProps) {
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
   const [open, setOpen] = useState(true);
+  const reset = () => {
+    setOpen(false);
+    setMessage && setMessage(undefined);
+  };
 
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      setOpen(false);
-    }, 3000);
+    timeout.current = setTimeout(reset, 3000);
 
-    return () => clearTimeout(timeout);
+    return () => clearTimeout(timeout.current);
   }, []);
 
   useEffect(() => {
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(reset, 3000);
+
     setOpen(true);
   }, [message, messages]);
 
diff --git a/frontend/src/components/Products/Form.tsx b/frontend/src/components/Products/Form.tsx
index ca8e41c..749ab8f 100644
--- a/frontend/src/components/Products/Form.tsx
+++ b/frontend/src/components/Products/Form.tsx
@@ -7,7 +7,11 @@ import Notification from "@/components/Notification";
 import LoadingOverlay from "@/components/LoadingOverlay";
 import FormPrimitive, { Input } from "@/components/Form";
 import * as FormActions from "@/components/Form/Actions";
-import { initialState, useProductsActions, useProductsState } from "./context";
+import { initialState } from "@/contexts/products/store";
+import {
+  useProductsActions,
+  useProductsState,
+} from "@/contexts/products/hooks";
 
 const schema = yup
   .object({
@@ -61,14 +65,14 @@ export default function Form(): JSX.Element {
     }
   };
 
-  const handleDelete = (event: React.MouseEvent<HTMLElement>) => {
+  const handleDelete = async (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
 
     try {
-      deleteProduct().then(() => {
-        setProduct({ id: undefined } as Product);
-        setMessage("Product was successfully removed");
-      });
+      await deleteProduct();
+
+      setProduct({ id: undefined } as Product);
+      setMessage("Product was successfully removed");
     } catch (error) {
       setMessage((error as Error).message);
     }
@@ -78,7 +82,13 @@ export default function Form(): JSX.Element {
     <div className="mb-4 last:mb-0 relative">
       <h2 className="text-2xl text-slate-800 font-bold mb-6">Edit Product</h2>
 
-      {message && <Notification message={message} type="success" />}
+      {message && (
+        <Notification
+          message={message}
+          setMessage={setMessage}
+          type="success"
+        />
+      )}
       {isLoading && <LoadingOverlay />}
 
       <FormPrimitive
diff --git a/frontend/src/components/Products/Sidebar.tsx b/frontend/src/components/Products/Sidebar.tsx
index a67eb1f..1429f9e 100644
--- a/frontend/src/components/Products/Sidebar.tsx
+++ b/frontend/src/components/Products/Sidebar.tsx
@@ -1,15 +1,17 @@
 import { Product, useProducts } from "@/pages/kit/products/services";
-import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import * as SidebarPrimitive from "../Layout/Sidebar";
-import { useProductsActions, useProductsState } from "./context";
+import {
+  useProductsActions,
+  useProductsState,
+} from "@/src/contexts/products/hooks";
+import * as SidebarPrimitive from "@/components/Layout/Sidebar";
+import LoadingOverlay from "@/components/LoadingOverlay";
 
 export default function Sidebar() {
   const { query, product } = useProductsState();
   const { setQuery, setProduct } = useProductsActions();
-  const { products, getAllProducts } = useProducts(query);
-  const router = useRouter();
+  const { products, getAllProducts, isLoading } = useProducts(query);
 
   useEffect(() => {
     if (query === undefined) return;
@@ -28,12 +30,15 @@ export default function Sidebar() {
         hrefNew="/kit/products"
         title="Products"
       />
-      <SidebarPrimitive.List
-        items={products || []}
-        selectedItem={product}
-        handleSearch={setQuery}
-        handleClickItem={handleClickItem}
-      />
+      <div className="relative">
+        {isLoading && <LoadingOverlay bgColor="white" />}
+        <SidebarPrimitive.List
+          items={products || [{ id: undefined, name: "loading..." }]}
+          selectedItem={product}
+          handleSearch={setQuery}
+          handleClickItem={handleClickItem}
+        />
+      </div>
     </SidebarPrimitive.Root>
   );
 }
diff --git a/frontend/src/components/Products/context.tsx b/frontend/src/components/Products/context.tsx
deleted file mode 100644
index 7a43930..0000000
--- a/frontend/src/components/Products/context.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { createContext, Dispatch, useContext, useReducer, useRef } from "react";
-import { useEffect } from "react";
-import { useRouter } from "next/router";
-
-import { Product } from "@/pages/kit/products/services";
-
-interface Action {
-  type: ActionKind;
-  payload: any;
-}
-
-interface State {
-  query?: Record<string, any>;
-  product: Product;
-}
-
-export const initialState: State = {
-  query: undefined,
-  product: {
-    id: undefined,
-    name: "",
-  } as Product,
-};
-
-enum ActionKind {
-  SET_QUERY = "SET_QUERY",
-  SET_PRODUCT = "SET_PRODUCT",
-}
-
-const ProductsStateContext = createContext<State>(initialState);
-const ProductsDispatchContext = createContext<Dispatch<Action> | null>(null);
-
-export function useProductsState() {
-  return useContext(ProductsStateContext);
-}
-
-export function useProductsActions() {
-  const actions = (dispatch: Dispatch<Action>) => ({
-    setQuery: (query: Record<string, any>) => {
-      dispatch({
-        type: ActionKind.SET_QUERY,
-        payload: query,
-      });
-    },
-
-    setProduct: (product: Product) => {
-      dispatch({
-        type: ActionKind.SET_PRODUCT,
-        payload: product,
-      });
-    },
-  });
-
-  return actions(useContext(ProductsDispatchContext) as Dispatch<Action>);
-}
-
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-    case ActionKind.SET_QUERY:
-      return {
-        ...state,
-        query: action.payload,
-      };
-
-    case ActionKind.SET_PRODUCT:
-      return {
-        ...state,
-        product: action.payload,
-      };
-
-    default:
-      return state;
-  }
-}
-
-interface ProductsProviderProps {
-  children: React.ReactNode;
-  value: { fallback?: any; fallbackState?: any };
-}
-
-export const ProductsProvider = ({
-  children,
-  value,
-}: ProductsProviderProps) => {
-  const { fallbackState } = value;
-  const router = useRouter();
-  const [state, dispatch] = useReducer(reducer, {
-    ...initialState,
-    ...fallbackState,
-  });
-  const { product } = state;
-  const prevProduct = useRef(product);
-
-  useEffect(() => {
-    const handleRouteChange = (url: string) => {
-      const isRoot = router.pathname === url;
-
-      if (isRoot) {
-        prevProduct.current = initialState.product;
-
-        dispatch({
-          type: ActionKind.SET_PRODUCT,
-          payload: initialState.product,
-        });
-      }
-    };
-
-    router.events.on("routeChangeComplete", handleRouteChange);
-
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (product.id === prevProduct.current.id) return;
-
-    if (product.id) {
-      prevProduct.current = product;
-
-      router.push(router.pathname, `/kit/products/${product.id}`, {
-        shallow: true,
-      });
-    } else {
-      router.replace("/kit/products");
-    }
-  }, [product.id]);
-
-  return (
-    <ProductsStateContext.Provider value={state}>
-      <ProductsDispatchContext.Provider value={dispatch}>
-        {children}
-      </ProductsDispatchContext.Provider>
-    </ProductsStateContext.Provider>
-  );
-};
diff --git a/frontend/src/contexts/products/hooks.ts b/frontend/src/contexts/products/hooks.ts
new file mode 100644
index 0000000..c9ce3d2
--- /dev/null
+++ b/frontend/src/contexts/products/hooks.ts
@@ -0,0 +1,29 @@
+import { Dispatch, useContext } from "react";
+
+import { Product } from "@/pages/kit/products/services";
+import { Action, ActionKind } from "./store";
+import { ProductsDispatchContext, ProductsStateContext } from ".";
+
+export function useProductsState() {
+  return useContext(ProductsStateContext);
+}
+
+export function useProductsActions() {
+  const actions = (dispatch: Dispatch<Action>) => ({
+    setQuery: (query: Record<string, any>) => {
+      dispatch({
+        type: ActionKind.SET_QUERY,
+        payload: query,
+      });
+    },
+
+    setProduct: (product: Product) => {
+      dispatch({
+        type: ActionKind.SET_PRODUCT,
+        payload: product,
+      });
+    },
+  });
+
+  return actions(useContext(ProductsDispatchContext) as Dispatch<Action>);
+}
diff --git a/frontend/src/contexts/products/index.tsx b/frontend/src/contexts/products/index.tsx
new file mode 100644
index 0000000..83b188f
--- /dev/null
+++ b/frontend/src/contexts/products/index.tsx
@@ -0,0 +1,71 @@
+import { createContext, Dispatch, useEffect, useReducer, useRef } from "react";
+import { useRouter } from "next/router";
+
+import { Action, ActionKind, initialState, reducer, State } from "./store";
+
+export const ProductsStateContext = createContext<State>(initialState);
+export const ProductsDispatchContext = createContext<Dispatch<Action> | null>(
+  null
+);
+
+interface ProductsProviderProps {
+  children: React.ReactNode;
+  value: { fallback?: any; fallbackState?: any };
+}
+
+export const ProductsProvider = ({
+  children,
+  value,
+}: ProductsProviderProps) => {
+  const { fallbackState } = value;
+  const router = useRouter();
+  const [state, dispatch] = useReducer(reducer, {
+    ...initialState,
+    ...fallbackState,
+  });
+  const { product } = state;
+  const prevProduct = useRef(product);
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      const isRoot = router.pathname === url;
+
+      if (isRoot) {
+        prevProduct.current = initialState.product;
+
+        dispatch({
+          type: ActionKind.SET_PRODUCT,
+          payload: initialState.product,
+        });
+      }
+    };
+
+    router.events.on("routeChangeComplete", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (product.id === prevProduct.current.id) return;
+
+    if (product.id) {
+      prevProduct.current = product;
+
+      router.push(router.pathname, `/kit/products/${product.id}`, {
+        shallow: true,
+      });
+    } else {
+      router.replace("/kit/products");
+    }
+  }, [product.id]);
+
+  return (
+    <ProductsStateContext.Provider value={state}>
+      <ProductsDispatchContext.Provider value={dispatch}>
+        {children}
+      </ProductsDispatchContext.Provider>
+    </ProductsStateContext.Provider>
+  );
+};
diff --git a/frontend/src/contexts/products/store/actions.ts b/frontend/src/contexts/products/store/actions.ts
new file mode 100644
index 0000000..16552c9
--- /dev/null
+++ b/frontend/src/contexts/products/store/actions.ts
@@ -0,0 +1,20 @@
+import { Dispatch } from "react";
+
+import { Product } from "@/pages/kit/products/services";
+import { Action, ActionKind } from "./reducer";
+
+export const actions = (dispatch: Dispatch<Action>) => ({
+  setQuery: (query: Record<string, any>) => {
+    dispatch({
+      type: ActionKind.SET_QUERY,
+      payload: query,
+    });
+  },
+
+  setProduct: (product: Product) => {
+    dispatch({
+      type: ActionKind.SET_PRODUCT,
+      payload: product,
+    });
+  },
+});
diff --git a/frontend/src/contexts/products/store/index.ts b/frontend/src/contexts/products/store/index.ts
new file mode 100644
index 0000000..fb205c4
--- /dev/null
+++ b/frontend/src/contexts/products/store/index.ts
@@ -0,0 +1,2 @@
+export * from "./actions";
+export * from "./reducer";
diff --git a/frontend/src/contexts/products/store/reducer.ts b/frontend/src/contexts/products/store/reducer.ts
new file mode 100644
index 0000000..267c6c5
--- /dev/null
+++ b/frontend/src/contexts/products/store/reducer.ts
@@ -0,0 +1,43 @@
+import { Product } from "@/pages/kit/products/services";
+
+export enum ActionKind {
+  SET_QUERY = "SET_QUERY",
+  SET_PRODUCT = "SET_PRODUCT",
+}
+
+export interface Action {
+  type: ActionKind;
+  payload: any;
+}
+
+export interface State {
+  query?: Record<string, unknown>;
+  product: Product;
+}
+
+export const initialState: State = {
+  query: undefined,
+  product: {
+    id: undefined,
+    name: "",
+  } as Product,
+};
+
+export function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case ActionKind.SET_QUERY:
+      return {
+        ...state,
+        query: action.payload,
+      };
+
+    case ActionKind.SET_PRODUCT:
+      return {
+        ...state,
+        product: action.payload,
+      };
+
+    default:
+      return state;
+  }
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 6d18cfb..5803853 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -34,6 +34,9 @@
       "@/components/*": [
         "src/components/*"
       ],
+      "@/contexts/*": [
+        "src/contexts/*"
+      ],
     }
   },
   "include": [

From e9db07f7584a625348c67843b9d603514a361d8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Tue, 22 Nov 2022 13:46:51 -0300
Subject: [PATCH 18/25] Improved code

---
 frontend/src/contexts/products/index.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/frontend/src/contexts/products/index.tsx b/frontend/src/contexts/products/index.tsx
index 83b188f..270001a 100644
--- a/frontend/src/contexts/products/index.tsx
+++ b/frontend/src/contexts/products/index.tsx
@@ -1,7 +1,7 @@
 import { createContext, Dispatch, useEffect, useReducer, useRef } from "react";
 import { useRouter } from "next/router";
 
-import { Action, ActionKind, initialState, reducer, State } from "./store";
+import { Action, actions, initialState, reducer, State } from "./store";
 
 export const ProductsStateContext = createContext<State>(initialState);
 export const ProductsDispatchContext = createContext<Dispatch<Action> | null>(
@@ -27,32 +27,26 @@ export const ProductsProvider = ({
   const prevProduct = useRef(product);
 
   useEffect(() => {
-    const handleRouteChange = (url: string) => {
+    const handle = (url: string) => {
       const isRoot = router.pathname === url;
 
       if (isRoot) {
         prevProduct.current = initialState.product;
-
-        dispatch({
-          type: ActionKind.SET_PRODUCT,
-          payload: initialState.product,
-        });
+        actions(dispatch).setProduct(initialState.product);
       }
     };
 
-    router.events.on("routeChangeComplete", handleRouteChange);
+    router.events.on("routeChangeComplete", handle);
 
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-    };
+    return () => router.events.off("routeChangeComplete", handle);
   }, []);
 
   useEffect(() => {
     if (product.id === prevProduct.current.id) return;
 
-    if (product.id) {
-      prevProduct.current = product;
+    prevProduct.current = product;
 
+    if (product.id) {
       router.push(router.pathname, `/kit/products/${product.id}`, {
         shallow: true,
       });

From b907edad8314ce05b8a0a42405dfc76da3cbce63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Thu, 24 Nov 2022 13:52:17 -0300
Subject: [PATCH 19/25] Using new hosting

---
 Gemfile                           | 12 ++++++++----
 Gemfile.lock                      |  2 ++
 bin/render-build.sh               |  8 ++++++++
 config/database.yml               |  3 ++-
 config/environments/production.rb |  2 +-
 config/puma.rb                    |  4 ++--
 render.yaml                       | 18 ++++++++++++++++++
 7 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100755 bin/render-build.sh
 create mode 100644 render.yaml

diff --git a/Gemfile b/Gemfile
index 8d9dd91..d3928cc 100644
--- a/Gemfile
+++ b/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 'rubocop', '~> 1.37'
   gem 'rubocop-rails', '~> 2.17'
+  gem 'solargraph'
 end
 
 group :test do
@@ -81,6 +81,10 @@ group :test do
   gem 'webdrivers'
 end
 
+group :production do
+  gem 'pg', '~> 1.4'
+end
+
 gem 'pagy', '~> 5.10'
 gem 'rack-cors', '~> 1.1'
 gem 'ransack', '~> 3.2'
diff --git a/Gemfile.lock b/Gemfile.lock
index 5d94768..f77b7ee 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -141,6 +141,7 @@ GEM
     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)
@@ -288,6 +289,7 @@ DEPENDENCIES
   jbuilder
   jsbundling-rails
   pagy (~> 5.10)
+  pg (~> 1.4)
   puma (~> 5.0)
   rack-cors (~> 1.1)
   rails (~> 7.0.4)
diff --git a/bin/render-build.sh b/bin/render-build.sh
new file mode 100755
index 0000000..00700a0
--- /dev/null
+++ b/bin/render-build.sh
@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+# exit on error
+set -o errexit
+
+bundle install
+bundle exec rake assets:precompile
+bundle exec rake assets:clean
+bundle exec rake db:migrate
diff --git a/config/database.yml b/config/database.yml
index fcba57f..83a6543 100644
--- a/config/database.yml
+++ b/config/database.yml
@@ -22,4 +22,5 @@ test:
 
 production:
   <<: *default
-  database: db/production.sqlite3
+  adapter: postgresql
+  url: <%= ENV['DATABASE_URL'] %>
diff --git a/config/environments/production.rb b/config/environments/production.rb
index a154870..66f4c04 100644
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@@ -22,7 +22,7 @@
 
   # Disable serving static files from the `/public` folder by default since
   # Apache or NGINX already handles this.
-  config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
+  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? || ENV['RENDER'].present?
 
   # Compress CSS using a preprocessor.
   # config.assets.css_compressor = :sass
diff --git a/config/puma.rb b/config/puma.rb
index daaf036..81dae67 100644
--- a/config/puma.rb
+++ b/config/puma.rb
@@ -30,14 +30,14 @@
 # Workers do not work on JRuby or Windows (both of which do not support
 # processes).
 #
-# workers ENV.fetch("WEB_CONCURRENCY") { 2 }
+workers ENV.fetch("WEB_CONCURRENCY") { 4 }
 
 # Use the `preload_app!` method when specifying a `workers` number.
 # This directive tells Puma to first boot the application and load code
 # before forking the application. This takes advantage of Copy On Write
 # process behavior so workers use less memory.
 #
-# preload_app!
+preload_app!
 
 # Allow puma to be restarted by `bin/rails restart` command.
 plugin :tmp_restart
diff --git a/render.yaml b/render.yaml
new file mode 100644
index 0000000..f439d05
--- /dev/null
+++ b/render.yaml
@@ -0,0 +1,18 @@
+databases:
+  - name: rails-7-fullstack
+    databaseName: rails-7-fullstack
+    user: rails-7-fullstack
+
+services:
+  - type: web
+    name: rails-7-fullstack
+    env: ruby
+    buildCommand: "./bin/render-build.sh"
+    startCommand: "bundle exec puma -C config/puma.rb"
+    envVars:
+      - key: DATABASE_URL
+        fromDatabase:
+          name: rails-7-fullstack
+          property: connectionString
+      - key: RAILS_MASTER_KEY
+        sync: false

From a11c97fea2bb63fec9f68849ffa4befcc2b99c7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Thu, 24 Nov 2022 13:57:30 -0300
Subject: [PATCH 20/25] Using new hosting

---
 render.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/render.yaml b/render.yaml
index f439d05..99df0ea 100644
--- a/render.yaml
+++ b/render.yaml
@@ -1,7 +1,7 @@
 databases:
   - name: rails-7-fullstack
-    databaseName: rails-7-fullstack
-    user: rails-7-fullstack
+    databaseName: rails_7_fullstack
+    user: rails_7_fullstack_user
 
 services:
   - type: web

From 6076db8152e18d4da4d5f1b8b791d827a72336d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Thu, 24 Nov 2022 14:14:19 -0300
Subject: [PATCH 21/25] Using new hosting

---
 Gemfile.lock | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Gemfile.lock b/Gemfile.lock
index f77b7ee..fd909e6 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -136,6 +136,8 @@ 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)
@@ -242,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)
@@ -280,6 +283,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-21
+  x86_64-linux
 
 DEPENDENCIES
   bootsnap

From 3663634de27821db150371ae79a1ded7ed3cc072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Thu, 24 Nov 2022 14:19:40 -0300
Subject: [PATCH 22/25] Using new hosting

---
 db/migrate/20221022131756_create_kit_components.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/db/migrate/20221022131756_create_kit_components.rb b/db/migrate/20221022131756_create_kit_components.rb
index 32a5cb1..910d264 100644
--- a/db/migrate/20221022131756_create_kit_components.rb
+++ b/db/migrate/20221022131756_create_kit_components.rb
@@ -3,7 +3,7 @@
 class CreateKitComponents < ActiveRecord::Migration[7.0]
   def change
     create_table(:kit_components) do |t|
-      t.references(:product, null: false, foreign_key: true)
+      t.references(:kit_product, null: false, foreign_key: true)
       t.string(:name)
 
       t.timestamps

From 184b19b0f7f4b5542706347046a1e64f8e2f5c7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Thu, 24 Nov 2022 14:56:12 -0300
Subject: [PATCH 23/25] Using new hosting

---
 app/components/search_list_form_component.rb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/search_list_form_component.rb b/app/components/search_list_form_component.rb
index cda2cc5..98a3f39 100644
--- a/app/components/search_list_form_component.rb
+++ b/app/components/search_list_form_component.rb
@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require 'ransack/helpers'
+
 module SearchListFormHelper
   def form_tag(options = {}, &)
     options.merge!({ builder: SearchListBuilder })

From 898b7b5177b194ee692940d3320682532c4f7dc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Thu, 24 Nov 2022 15:43:53 -0300
Subject: [PATCH 24/25] Using new hosting

---
 .../20221022131756_create_kit_components.rb   |  2 +-
 db/schema.rb                                  | 26 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/db/migrate/20221022131756_create_kit_components.rb b/db/migrate/20221022131756_create_kit_components.rb
index 910d264..795ca19 100644
--- a/db/migrate/20221022131756_create_kit_components.rb
+++ b/db/migrate/20221022131756_create_kit_components.rb
@@ -3,7 +3,7 @@
 class CreateKitComponents < ActiveRecord::Migration[7.0]
   def change
     create_table(:kit_components) do |t|
-      t.references(:kit_product, null: false, foreign_key: true)
+      t.references(:product, null: false, foreign_key: { to_table: :kit_products })
       t.string(:name)
 
       t.timestamps
diff --git a/db/schema.rb b/db/schema.rb
index 59cddb3..7ea3aba 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 # This file is auto-generated from the current state of the database. Instead
 # of editing this file, please use the migrations feature of Active Record to
 # incrementally modify your database, and then regenerate this schema definition.
@@ -12,20 +10,20 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 20_221_022_131_756) do
-  create_table 'kit_components', force: :cascade do |t|
-    t.integer('product_id', null: false)
-    t.string('name')
-    t.datetime('created_at', null: false)
-    t.datetime('updated_at', null: false)
-    t.index(['product_id'], name: 'index_kit_components_on_product_id')
+ActiveRecord::Schema[7.0].define(version: 2022_10_22_131756) do
+  create_table "kit_components", force: :cascade do |t|
+    t.integer "product_id", null: false
+    t.string "name"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["product_id"], name: "index_kit_components_on_product_id"
   end
 
-  create_table 'kit_products', force: :cascade do |t|
-    t.string('name')
-    t.datetime('created_at', null: false)
-    t.datetime('updated_at', null: false)
+  create_table "kit_products", force: :cascade do |t|
+    t.string "name"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
   end
 
-  add_foreign_key 'kit_components', 'kit_products', column: 'product_id'
+  add_foreign_key "kit_components", "kit_products", column: "product_id"
 end

From 64649170137ecdd9e9cf08c640f7cbcafd072f61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raphael=20Ara=C3=BAjo?= <raphox.araujo@gmail.com>
Date: Fri, 25 Nov 2022 07:21:31 -0300
Subject: [PATCH 25/25] Using env variables

---
 frontend/src/services.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/services.ts b/frontend/src/services.ts
index 4bc6b12..8b3f63d 100644
--- a/frontend/src/services.ts
+++ b/frontend/src/services.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const api = axios.create({
-  baseURL: "http://localhost:3000/api/",
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
   timeout: 5000,
   headers: {
     Accept: "application/json",