rails_app_generator 0.1.2 → 0.1.5

data/after_templates/rag_tailwind_hotwire_form/contacts_controller.rb

@@ -0,0 +1,98 @@
+class ContactsController < ApplicationController
+  include ActionView::RecordIdentifier
+
+  before_action :set_contact, only: %i[show edit update destroy]
+  before_action :all_contacts #, except: [:new, :create, :index]
+
+  # GET /contacts or /contacts.json
+  def index
+  end
+
+  # GET /contacts/1 or /contacts/1.json
+  def show
+  end
+
+  # GET /contacts/new
+  def new
+    @contact = Contact.new
+  end
+
+  # GET /contacts/1/edit
+  def edit
+  end
+
+  # POST /contacts or /contacts.json
+  def create
+    @contact = Contact.new(contact_params)
+
+    if @contact.save
+      flash[:notice] = 'Contact was successfully created.'
+    else
+      render :new, status: :unprocessable_entity
+    end
+    # respond_to do |format|
+    #   if @contact.save
+    #     format.html { redirect_to contact_url(@contact), notice: "Contact was successfully created." }
+    #     format.json { render :show, status: :created, location: @contact }
+    #   else
+    #     format.html { render :new, status: :unprocessable_entity }
+    #     format.json { render json: @contact.errors, status: :unprocessable_entity }
+    #   end
+    # end
+  end
+
+  # PATCH/PUT /contacts/1 or /contacts/1.json
+  def update
+    if @contact.update(contact_params)
+      flash[:notice] = "Contact updated"
+    else
+      render :edit, status: :unprocessable_entity
+    end
+    # respond_to do |format|
+    #   if @contact.update(contact_params)
+    #     format.html { redirect_to contact_url(@contact), notice: "Contact was successfully updated." }
+    #     format.json { render :show, status: :ok, location: @contact }
+    #   else
+    #     format.html { render :edit, status: :unprocessable_entity }
+    #     format.json { render json: @contact.errors, status: :unprocessable_entity }
+    #   end
+    # end
+  end
+
+  # DELETE /contacts/1 or /contacts/1.json
+  # def destroy
+  #   @contact.destroy
+
+  #   respond_to do |format|
+  #     format.html { redirect_to contacts_url, notice: "Contact was successfully destroyed." }
+  #     format.json { head :no_content }
+  #   end
+  # end
+  def destroy
+    @contact.destroy
+    flash[:notice] = "Contact removed"
+    render turbo_stream: [
+      turbo_stream.update("flash", partial: "shared/flash"),
+      turbo_stream.remove(dom_id(@contact)),
+      turbo_stream.update("contacts-count", partial: "contacts/count", locals: { contacts: @contacts })
+    ]
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_contact
+      @contact = Contact.find(params.require(:id))
+    end
+
+    def contact_params
+      params.require(:contact).permit(:name, :age, :email)
+    end
+    # def contact_params
+    #   params.require(:contact).permit!
+    # end
+
+    def all_contacts
+      @contacts = Contact.all
+    end
+
+end

data/after_templates/rag_tailwind_hotwire_form/create.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.update("flash", partial: "shared/flash") %>
+<%= turbo_stream.append("contacts-list", partial: "contacts/contact", locals: { contact: @contact }) %>
+<%= turbo_stream.update("contacts-count", partial: "contacts/count", locals: { contacts: @contacts }) %>
+<%= turbo_stream.update("contact-form", partial: "contacts/form", locals: { contact: Contact.new }) %>

data/after_templates/rag_tailwind_hotwire_form/edit.html.erb

@@ -0,0 +1,12 @@
+<div class="prose lg:prose-xl">
+  <h1>Edit contact</h1>
+</div>
+
+<div class="grid grid-cols-2 gap-4 mt-8">
+  <div class="bg-gray-100 p-8">
+    <%= render partial: "list", locals: { contacts: @contacts } %>
+  </div>
+  <div class="form-control w-full max-w-xs">
+    <%= render partial: "form", locals: { contact: @contact } %>
+  </div>
+</div>

data/after_templates/rag_tailwind_hotwire_form/index.html.erb

@@ -0,0 +1,5 @@
+<div class="prose lg:prose-xl">
+  <h1>Contacts list</h1>
+
+  <%= link_to "Add new contact", new_contact_path, class: "btn btn-primary" %>
+</div>

data/after_templates/rag_tailwind_hotwire_form/new.html.erb

@@ -0,0 +1,12 @@
+<div class="prose lg:prose-xl">
+  <h1>New contact</h1>
+</div>
+
+<div class="grid grid-cols-2 gap-4 mt-8">
+  <div class="bg-gray-100 p-8">
+    <%= render partial: "list", locals: { contacts: @contacts } %>
+  </div>
+  <div class="form-control w-full max-w-xs" id="contact-form">
+    <%= render partial: "form", locals: { contact: @contact } %>
+  </div>
+</div>

data/after_templates/rag_tailwind_hotwire_form/show.html.erb

@@ -0,0 +1,16 @@
+<div class="prose lg:prose-xl">
+  <h1>Contact details</h2>
+</div>
+
+<div class="w-1/2 mx-auto p-8 border-2 m-8 grid grid-cols-2 gap-4">
+  <div>
+  <div class="my-4">Name: <%= @contact.name %></div>
+  <hr />
+  <div class="my-4">Age: <%= @contact.age %></div>
+  <hr />
+  <div class="my-4">Email: <%= @contact.email %></div>
+  </div>
+  <div>
+    <img src="https://i.pravatar.cc/300" />
+  </div>
+</div>

data/after_templates/rag_tailwind_hotwire_form/update.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.update("flash", partial: "shared/flash") %>
+<%= turbo_stream.replace(dom_id(@contact), partial: "contacts/contact", locals: { contact: @contact }) %>

data/after_templates/rag_tailwind_hotwire_form.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+# How to Start a Ruby on Rails 7 App With Hotwire and Tailwind CSS
+# https://www.youtube.com/watch?v=-n7IbUFKjoM
+
+require 'pry'
+
+self.local_template_path = File.join(File.dirname(__FILE__), 'rag_tailwind_hotwire_form')
+
+gac 'base rails 7 image created'
+
+route("resources :contacts")
+route("root 'contacts#index'")
+
+after_bundle do
+  gsub_file 'app/views/layouts/application.html.erb', %(container mx-auto mt-28 px-5 flex), 'container mt-8 mx-auto'
+
+  # add_scaffold('contact', 'name', 'email')
+  add_migration('create_contacts', 'name', 'email', 'age:integer')
+  # rails generate migration CreateUsers name:string salary:decimal
+
+  copy_file 'contact.rb'                  , 'app/models/contact.rb'
+  copy_file 'contacts_controller.rb'      , 'app/controllers/contacts_controller.rb'
+
+  copy_file '_contact.html.erb'           , 'app/views/contacts/_contact.html.erb'
+  copy_file '_count.html.erb'             , 'app/views/contacts/_count.html.erb'
+  copy_file '_form.html.erb'              , 'app/views/contacts/_form.html.erb'
+  copy_file '_list.html.erb'              , 'app/views/contacts/_list.html.erb'
+  copy_file 'edit.html.erb'               , 'app/views/contacts/edit.html.erb'
+  copy_file 'index.html.erb'              , 'app/views/contacts/index.html.erb'
+  copy_file 'new.html.erb'                , 'app/views/contacts/new.html.erb'
+  copy_file 'show.html.erb'               , 'app/views/contacts/show.html.erb'
+
+  copy_file 'application_helper.rb'       , 'app/helpers/application_helper.rb'                 , force: true
+  copy_file 'application.html.erb'        , 'app/views/layouts/application.html.erb'            , force: true
+  copy_file 'create.turbo_stream.erb'     , 'app/views/contacts/create.turbo_stream.erb'
+  copy_file 'update.turbo_stream.erb'     , 'app/views/contacts/update.turbo_stream.erb'
+  copy_file 'application.js'              , 'app/javascript/application.js'                     , force: true
+
+  copy_file '_flash.html.erb'             , 'app/views/shared/_flash.html.erb'
+
+  # Install tailwind directly, instead of via the --css=tailwind option so that we can configure 3rd party plugins
+  # gem "jsbundling-rails"
+  gem "cssbundling-rails"
+
+  rails_command('css:install:tailwind')
+  run('npm install daisyui')
+  run('npm install -D @tailwindcss/typography')
+  
+  gsub_file 'tailwind.config.js', %(]\n}), "],\n  plugins: [require(\"daisyui\"), require(\"@tailwindcss/typography\")],\n}"
+  copy_file 'application.tailwind.css'    , 'app/assets/stylesheets/application.tailwind.css'   , force: true
+
+  rails_command('db:migrate')
+end

data/after_templates/rag_tailwind_hotwire_form_search/_contact.html.erb

@@ -0,0 +1,8 @@
+<tr id="<%= dom_id(contact) %>" data-stream-enter-class="animate-item-in" data-stream-exit-class="animate-item-out">
+  <td><%= contact.id %></td>
+  <td><%= link_to contact.name, contact_path(contact), data: { turbo_frame: "_top" } %></td>
+  <td><%= contact.age %></td>
+  <td><%= contact.email %></td>
+  <td><%= link_to "Edit", edit_contact_path(contact), class: "btn btn-link btn-sm", data: { turbo_frame: "_top" } %></td>
+  <td><%= button_to "Delete", contact_path(contact), method: :delete, class: "btn btn-link btn-sm" %></td>
+</tr>

data/after_templates/rag_tailwind_hotwire_form_search/_count.html.erb

@@ -0,0 +1 @@
+<span data-stream-enter-class="animate-item-in" data-stream-exit-class="animate-item-out">Showing <%= contacts.length %> <%= "contact".pluralize(contacts.length) %></span>

data/after_templates/rag_tailwind_hotwire_form_search/_flash.html.erb

@@ -0,0 +1,6 @@
+<% flash.each do |type, msg| %>
+  <% alert_class = type == "notice" ? "success" : "error" %>
+  <div class="alert alert-<%= alert_class %> mb-8 text-white" data-stream-enter-class="animate-in" data-stream-exit-class="animate-out">
+    <%= msg %>
+  </div>
+<% end %>

data/after_templates/rag_tailwind_hotwire_form_search/_form.html.erb

@@ -0,0 +1,16 @@
+<%= form_for contact do |f| %>
+  <% if contact.errors.any? %>
+    <div class="form-errors">
+      <div class="alert shadow-lg alert-error text-white">
+        Your form's got some errors
+      </div>
+    </div>
+  <% end %>
+  <%= f.text_field :name, placeholder: "Your first name", class: "input input-bordered w-full max-w-xs my-5" %>
+  <%= inline_error_for(:name, contact) %>
+  <%= f.text_field :age, placeholder: "Your age", class: "input input-bordered w-full max-w-xs my-4" %>
+  <%= inline_error_for(:age, contact) %>
+  <%= f.text_field :email, placeholder: "Your email address", class: "input input-bordered w-full max-w-xs my-4" %>
+  <%= inline_error_for(:email, contact) %>
+  <%= f.submit "Save", class: "form-control btn btn-primary my-4" %>
+<% end %>

data/after_templates/rag_tailwind_hotwire_form_search/_list.html.erb

@@ -0,0 +1,19 @@
+<table class="table table-zebra mt-0 w-full">
+  <thead>
+    <tr class="w-full">
+      <th class="text-left">ID</th>
+      <th class="text-left">Name</th>
+      <th class="text-left">Age</th>
+      <th class="text-left">Email</th>
+      <th class="text-center" colspan="2">Actions</th>
+    </tr>
+  </thead>
+  <tbody id="contacts-list" data-controller="contacts" data-action="">
+  <% contacts.each do |contact| %>
+    <%= render partial: "contact", locals: { contact: contact }  %>
+  <% end %>
+  </tbody>
+</table>
+<div class="text-gray-400 mt-4 text-xs text-right" id="contacts-count">
+  <%= render partial: "count", locals: { contacts: contacts } %>
+</div>

data/after_templates/rag_tailwind_hotwire_form_search/_theme_changer.html.erb

@@ -0,0 +1,35 @@
+<div class="dropdown">
+  <label tabindex="0" class="btn m-1">Select Theme</label>
+  <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52" data-controller='theme-changer' >
+    <li data-value="" data-action="click->theme-changer#select">Default</li>
+    <li data-value="aqua" data-action="click->theme-changer#select">Aqua</li>
+    <li data-value="black" data-action="click->theme-changer#select">Black</li>
+    <li data-value="bumblebee" data-action="click->theme-changer#select">Bumblebee</li>
+    <li data-value="cmyk" data-action="click->theme-changer#select">Cmyk</li>
+    <li data-value="corporate" data-action="click->theme-changer#select">Corporate</li>
+    <li data-value="cupcake" data-action="click->theme-changer#select">Cupcake</li>
+    <li data-value="cyberpunk" data-action="click->theme-changer#select">Cyberpunk</li>
+    <li data-value="dark" data-action="click->theme-changer#select">Dark</li>
+    <li data-value="dracula" data-action="click->theme-changer#select">Dracula</li>
+    <li data-value="emerald" data-action="click->theme-changer#select">Emerald</li>
+    <li data-value="fantasy" data-action="click->theme-changer#select">Fantasy</li>
+    <li data-value="forest" data-action="click->theme-changer#select">Forest</li>
+    <li data-value="garden" data-action="click->theme-changer#select">Garden</li>
+    <li data-value="halloween" data-action="click->theme-changer#select">Halloween</li>
+    <li data-value="light" data-action="click->theme-changer#select">Light</li>
+    <li data-value="lofi" data-action="click->theme-changer#select">Lofi</li>
+    <li data-value="luxury" data-action="click->theme-changer#select">Luxury</li>
+    <li data-value="pastel" data-action="click->theme-changer#select">Pastel</li>
+    <li data-value="retro" data-action="click->theme-changer#select">Retro</li>
+    <li data-value="synthwave" data-action="click->theme-changer#select">Synthwave</li>
+    <li data-value="valentine" data-action="click->theme-changer#select">Valentine</li>
+    <li data-value="wireframe" data-action="click->theme-changer#select">Wireframe</li>
+    <li data-value="autumn" data-action="click->theme-changer#select">Autumn</li>
+    <li data-value="business" data-action="click->theme-changer#select">Business</li>
+    <li data-value="acid" data-action="click->theme-changer#select">Acid</li>
+    <li data-value="lemonade" data-action="click->theme-changer#select">Lemonade</li>
+    <li data-value="night" data-action="click->theme-changer#select">Night</li>
+    <li data-value="coffee" data-action="click->theme-changer#select">Coffee</li>
+    <li data-value="winter" data-action="click->theme-changer#select">Winter</li>
+  </select>
+</div>

data/after_templates/rag_tailwind_hotwire_form_search/application.html.erb

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html data-theme="retro">
+  <head>
+    <title>Tailwind Hotwire Form + Search</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+  </head>
+
+  <body>
+    <%= render partial: "shared/theme_changer" %>
+
+    <main class="container mx-auto">
+      <div class="py-8">
+        <div id="flash" class="flash">
+          <%= render partial: "shared/flash" %>
+        </div>
+        <%= yield %>
+      </div>
+    </main>
+  </body>
+</html>

data/after_templates/rag_tailwind_hotwire_form_search/application.js

@@ -0,0 +1,40 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
+import "controllers"
+
+document.addEventListener("turbo:before-stream-render", function(event) {
+  // Add a class to an element we are about to add to the page
+  // as defined by its "data-stream-enter-class"
+  if (event.target.firstElementChild instanceof HTMLTemplateElement) {
+    var enterAnimationClass = event.target.templateContent.firstElementChild.dataset.streamEnterClass
+    if (enterAnimationClass) {
+      event.target.templateElement.content.firstElementChild.classList.add(enterAnimationClass)
+    }
+  }
+
+  // Add a class to an element we are about to remove from the page
+  // as defined by its "data-stream-exit-class"
+  var elementToRemove = document.getElementById(event.target.target)
+  if (elementToRemove) {
+    var streamExitClass = elementToRemove.dataset.streamExitClass
+    if (streamExitClass) {
+      // Intercept the removal of the element
+      event.preventDefault()
+      elementToRemove.classList.add(streamExitClass)
+      // Wait for its animation to end before removing the element
+      elementToRemove.addEventListener("animationend", function() {
+        event.target.performAction()
+      })
+    }
+  }
+})
+
+// FIX this using stimulus
+// Add Theme Changer Event Listener
+var items = Array.from(document.querySelector('.dropdown > ul').children);
+items.forEach(item => {
+  item.addEventListener('click', event => {
+    var html = document.querySelector('html');
+    html.setAttribute("data-theme", event.target.getAttribute('data-value'));
+  })
+})

data/after_templates/rag_tailwind_hotwire_form_search/application.tailwind.css

@@ -0,0 +1,111 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
+
+html {
+  font-size: 20px
+}
+
+.form-errors {
+  color: red;
+}
+
+.field_with_errors .input-bordered {
+  border: 1px solid red;
+  margin-bottom: 0;
+}
+
+/* Animation                                               */
+/*                                                         */
+/* Got it from here:                                       */
+/* https://edforshaw.co.uk/hotwire-turbo-stream-animations */
+/* and here:                                               */
+/* https://stackoverflow.com/a/61306871/4072276            */
+
+.animate-in {
+  animation: slide-in 0.25s ease-out;
+}
+
+.animate-out {
+  animation: slide-out 0.25s ease-out;
+}
+
+@keyframes slide-in {
+  from { transform: translateX(4rem); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slide-out {
+  from { transform: translateX(0); }
+  to { transform: translateX(4rem); }
+}
+
+.animate-item-in {
+  transition-duration: 0.25s;
+  animation: addRow 0.25s ease-in;
+  transform-origin: top;
+}
+
+.animate-item-out {
+  transition-duration: 0.25s;
+  animation: removeRow 0.25s ease-in;
+  transform-origin: bottom;
+}
+
+@keyframes addRow {
+  0% {
+    transform: scale(1, 0);
+    line-height: 0px;
+    background-color: #fff;
+    visibility: collapse;
+  }
+  50% {
+    transform: scale(1, 1);
+    line-height: 20px;
+    visibility: visible;
+  }
+  100% {
+  }
+}
+
+@keyframes removeRow {
+  100% {
+    transform: scale(1, 1);
+    line-height: 20px;
+    visibility: visible;
+  }
+  50% {
+    transform: scale(1, 0);
+    line-height: 0px;
+    background-color: #fff;
+    visibility: collapse;
+  }
+  0% {
+  }
+}
+.flash {
+  height: 70px;
+  margin-bottom: 2rem;
+}
+
+.alert-success {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--su)/var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: hsl(var(--suc,var(--nc))/var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255/var(--tw-text-opacity));
+}

data/after_templates/rag_tailwind_hotwire_form_search/application_helper.rb

@@ -0,0 +1,13 @@
+module ApplicationHelper
+  def inline_error_for(field, form_obj)
+    html = []
+
+    if form_obj.errors[field].any?
+      html << form_obj.errors[field].map do |msg|
+        tag.div(msg, class: "text-red-400 text-xs m-0 p-0 text-right mb-2")
+      end
+    end
+
+    html.join.html_safe
+  end
+end

data/after_templates/rag_tailwind_hotwire_form_search/contact.rb

@@ -0,0 +1,13 @@
+class Contact < ApplicationRecord
+  validates :name, presence: true
+  validates :age, presence: true, numericality: true, inclusion: { in: 20...100, message: "must be between 20 and 100" }
+  validates :email, presence: true, format: { with: /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i }
+
+  class << self
+    def search(params)
+      return all if params[:query].blank?
+
+      where("name LIKE ?", "%#{sanitize_sql_like(params[:query])}%")
+    end
+  end
+end

data/after_templates/rag_tailwind_hotwire_form_search/contacts_controller.rb

@@ -0,0 +1,72 @@
+class ContactsController < ApplicationController
+  include ActionView::RecordIdentifier
+
+  before_action :set_contact, only: %i[show edit update destroy]
+  before_action :all_contacts
+
+  # GET /contacts or /contacts.json
+  def index
+    @contacts = Contact.search(params)
+  end
+
+  # GET /contacts/1 or /contacts/1.json
+  def show
+  end
+
+  # GET /contacts/new
+  def new
+    @contact = Contact.new
+  end
+
+  # GET /contacts/1/edit
+  def edit
+  end
+
+  # POST /contacts or /contacts.json
+  def create
+    @contact = Contact.new(contact_params)
+
+    if @contact.save
+      flash[:notice] = 'Contact was successfully created.'
+    else
+      render :new, status: :unprocessable_entity
+    end
+  end
+
+  # PATCH/PUT /contacts/1 or /contacts/1.json
+  def update
+    if @contact.update(contact_params)
+      flash[:notice] = "Contact updated"
+    else
+      render :edit, status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    @contact.destroy
+    flash[:notice] = "Contact removed"
+    render turbo_stream: [
+      turbo_stream.update("flash", partial: "shared/flash"),
+      turbo_stream.remove(dom_id(@contact)),
+      turbo_stream.update("contacts-count", partial: "contacts/count", locals: { contacts: @contacts })
+    ]
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_contact
+      @contact = Contact.find(params.require(:id))
+    end
+
+    def contact_params
+      params.require(:contact).permit(:name, :age, :email)
+    end
+    # def contact_params
+    #   params.require(:contact).permit!
+    # end
+
+    def all_contacts
+      @contacts = Contact.all
+    end
+
+end

data/after_templates/rag_tailwind_hotwire_form_search/create.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.update("flash", partial: "shared/flash") %>
+<%= turbo_stream.append("contacts-list", partial: "contacts/contact", locals: { contact: @contact }) %>
+<%= turbo_stream.update("contacts-count", partial: "contacts/count", locals: { contacts: @contacts }) %>
+<%= turbo_stream.update("contact-form", partial: "contacts/form", locals: { contact: Contact.new }) %>

data/after_templates/rag_tailwind_hotwire_form_search/edit.html.erb

@@ -0,0 +1,12 @@
+<div class="prose lg:prose-xl">
+  <h1>Edit contact</h1>
+</div>
+
+<div class="grid grid-cols-2 gap-4 mt-8">
+  <div class="bg-gray-100 p-8">
+    <%= render partial: "list", locals: { contacts: @contacts } %>
+  </div>
+  <div class="form-control w-full max-w-xs">
+    <%= render partial: "form", locals: { contact: @contact } %>
+  </div>
+</div>

data/after_templates/rag_tailwind_hotwire_form_search/index.html.erb

@@ -0,0 +1,15 @@
+<div class="prose lg:prose-xl">
+  <h1>Contacts list</h1>
+  <%= form_tag contacts_path, method: :get, data: { turbo_frame: "search-results", turbo_action: "advance", controller: "search", action: "input->search#submit" } do |f| %>
+    <%= text_field_tag "query", nil, placeholder: "Search ...", class: "input input.bordered w-full max-w-xs my-5" %>
+    <%= submit_tag "Search", class: "btn btn-primary" %>
+  <% end %>
+</div>
+
+<div class="bg-gray-100 p-8 col-span-5">
+  <%= turbo_frame_tag  "search-results" do %>
+    <%= render partial: "list", locals: { contacts: @contacts } %>
+  <% end %>
+</div>
+
+<%= link_to "Add new contact", new_contact_path, class: "btn btn-primary mt-4" %>

data/after_templates/rag_tailwind_hotwire_form_search/new.html.erb

@@ -0,0 +1,12 @@
+<div class="prose lg:prose-xl">
+  <h1>New contact</h1>
+</div>
+
+<div class="grid grid-cols-2 gap-4 mt-8">
+  <div class="bg-gray-100 p-8">
+    <%= render partial: "list", locals: { contacts: @contacts } %>
+  </div>
+  <div class="form-control w-full max-w-xs" id="contact-form">
+    <%= render partial: "form", locals: { contact: @contact } %>
+  </div>
+</div>

data/after_templates/rag_tailwind_hotwire_form_search/search_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus";
+import debounce from "debounce";
+
+// Connects to data-controller="search"
+export default class extends Controller {
+  initialize() {
+    this.submit = debounce(this.submit.bind(this), 300);
+  }
+  connect() {
+    console.log('Search');
+  }
+
+  submit(_event) {
+    this.element.requestSubmit();
+  }
+}