rails_app_generator 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 52910e6cbc4c2985a98a24d7786a1711e3004511d4047b97037c73f43355dd30
-  data.tar.gz: 7156016d4fc968fe23fa4c5068da48c5a5b087899822556c8484493a045026d8
+  metadata.gz: e1b9515cc01763f710f8f7461e0d8166d5192771ed45267be53c399fa4d0f9c8
+  data.tar.gz: c2c4069a59328153fcab6e5f81c78e39f58a11f759103dda01d0c74571611ea5
 SHA512:
-  metadata.gz: 0767dd3e641b70864186624f83ac45c9210d6ba884258d648c28c048da2ea8b6b0a4edc708543d4bec09a08a38f272f1311f5ba5d4ac2a614143cab9517b2d26
-  data.tar.gz: 03bcd1e0dd42e3f21869a0ab807fd7d91975f00ca50c32d305987d99d3d68d8b7f923a482afa2265a9a68800e1e927374599a91006ff61958546f2936015de49
+  metadata.gz: 3576c0c56cb8efaf50aab437e827a5e8ef973107537b9ae5f8362d91426161d0382b2bc463bae598419af396740eed71ba6720585b4d085f47051b64c3b0d4a0
+  data.tar.gz: 84ee7ac005aa6715de7697ccc8d0a2650f9d49d6dff1bbbc4d0e71ce51337ebe185449612fd3ec4204623f9fed3571427f1f028c3c7e4426d8d1f96b68ccead1

data/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [0.1.2](https://github.com/klueless-io/rails_app_generator/compare/v0.1.1...v0.1.2) (2022-07-26)
+
+
+### Bug Fixes
+
+* add profile tailwind_hotwire ([b79bb70](https://github.com/klueless-io/rails_app_generator/commit/b79bb70258c7e312d460961dd98516ddd1e2650c))
+* add profile tailwind_hotwire ([c9ac471](https://github.com/klueless-io/rails_app_generator/commit/c9ac471e4391fe0ddd4b97977916da25cdc4f33e))
+
 ## [0.1.1](https://github.com/klueless-io/rails_app_generator/compare/v0.1.0...v0.1.1) (2022-07-26)
 
 

data/after_templates/rag_tailwind.rb

@@ -16,16 +16,13 @@ add_controller('home', 'index', 'about')
 route("root 'home#index'")
 
 index_content = join_templates(
-  'component-section-begin.html',
   'component-nav.html',
   'component-hero.html',
   'component-cta.html',
   'component-faq.html',
   'component-cta.html',
-  'component-footer.html',
-  'component-section-end.html'
+  'component-footer.html'
 )
-# join: "</section>\n\n<section>\n"
 
 create_file 'app/views/home/index.html.erb', index_content, force: true
 
@@ -48,6 +45,7 @@ end
 
 def add_css_customizations
   # Update the manifest to include the stylesheets
+  # IS THIS CONFIGURED?
   append_to_file    'app/assets/config/manifest.js'                       , read_template('manifest.js')
 
   # This is how you would add custom styling via @import in the application.bootstrap.css

data/after_templates/rag_tailwind_daisyui/index.html.erb

@@ -0,0 +1,181 @@
+<div class="lg:flex lg:items-center lg:justify-between">
+  <div class="flex-1 min-w-0">
+    <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">Regular Tailwind CSS</h2>
+    <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
+      <div class="mt-2 flex items-center text-sm text-gray-500">
+        <!-- Heroicon name: solid/briefcase -->
+        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd" />
+          <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z" />
+        </svg>
+        Full-time
+      </div>
+      <div class="mt-2 flex items-center text-sm text-gray-500">
+        <!-- Heroicon name: solid/location-marker -->
+        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
+        </svg>
+        Remote
+      </div>
+      <div class="mt-2 flex items-center text-sm text-gray-500">
+        <!-- Heroicon name: solid/currency-dollar -->
+        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd" />
+        </svg>
+        $120k &ndash; $140k
+      </div>
+      <div class="mt-2 flex items-center text-sm text-gray-500">
+        <!-- Heroicon name: solid/calendar -->
+        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+        </svg>
+        Closing on January 9, 2020
+      </div>
+    </div>
+  </div>
+  <div class="mt-5 flex lg:mt-0 lg:ml-4">
+    <span class="hidden sm:block">
+      <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        <!-- Heroicon name: solid/pencil -->
+        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+        </svg>
+        Edit
+      </button>
+    </span>
+
+    <span class="hidden sm:block ml-3">
+      <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        <!-- Heroicon name: solid/link -->
+        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
+        </svg>
+        View
+      </button>
+    </span>
+
+    <span class="sm:ml-3">
+      <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+        <!-- Heroicon name: solid/check -->
+        <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+        </svg>
+        Publish
+      </button>
+    </span>
+
+    <!-- Dropdown -->
+    <div class="ml-3 relative sm:hidden">
+      <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="mobile-menu-button" aria-expanded="false" aria-haspopup="true">
+        More
+        <!-- Heroicon name: solid/chevron-down -->
+        <svg class="-mr-1 ml-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+        </svg>
+      </button>
+
+      <!--
+        Dropdown menu, show/hide based on menu state.
+
+        Entering: "transition ease-out duration-200"
+          From: "transform opacity-0 scale-95"
+          To: "transform opacity-100 scale-100"
+        Leaving: "transition ease-in duration-75"
+          From: "transform opacity-100 scale-100"
+          To: "transform opacity-0 scale-95"
+      -->
+      <div class="origin-top-right absolute right-0 mt-2 -mr-1 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="mobile-menu-button" tabindex="-1">
+        <!-- Active: "bg-gray-100", Not Active: "" -->
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="mobile-menu-item-0">Edit</a>
+        <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="mobile-menu-item-1">View</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<br>
+<hr>
+<br>
+
+<div class="navbar bg-base-100">
+  <div class="flex-1">
+    <a class="btn btn-ghost normal-case text-2xl font-bold text-gray-900 sm:text-3xl">DaisyUI Tailwind CSS</a>
+  </div>
+  <div class="flex-none">
+    <ul class="menu menu-horizontal p-0">
+      <li><a>Item 1</a></li>
+      <li tabindex="0">
+        <a>
+          Parent
+          <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>
+        </a>
+        <ul class="p-2 bg-base-100">
+          <li><a>Submenu 1</a></li>
+          <li><a>Submenu 2</a></li>
+        </ul>
+      </li>
+      <li><a>Item 3</a></li>
+    </ul>
+  </div>
+</div>
+
+<div class="hero bg-base-200">
+  <div class="hero-content flex-col lg:flex-row-reverse">
+    <img src="https://placeimg.com/260/400/arch" class="max-w-sm rounded-lg shadow-2xl" />
+    <div>
+      <h1 class="text-5xl font-bold">Box Office News!</h1>
+      <p class="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+
+<div class="grid grid-cols-4 gap-4 m-8">
+  <div class="card w-96 bg-base-100 shadow-xl">
+    <div class="card-body">
+      <h2 class="card-title">Shoes!</h2>
+      <p>If a dog chews shoes whose shoes does he choose?</p>
+    </div>
+    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+  </div>
+  <div class="card w-96 bg-base-100 shadow-xl">
+    <div class="card-body">
+      <h2 class="card-title">Shoes!</h2>
+      <p>If a dog chews shoes whose shoes does he choose?</p>
+    </div>
+    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+  </div>
+  <div class="card w-96 bg-base-100 shadow-xl">
+    <div class="card-body">
+      <h2 class="card-title">Shoes!</h2>
+      <p>If a dog chews shoes whose shoes does he choose?</p>
+    </div>
+    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+  </div>
+  <div class="card w-96 bg-base-100 shadow-xl">
+    <div class="card-body">
+      <h2 class="card-title">Shoes!</h2>
+      <p>If a dog chews shoes whose shoes does he choose?</p>
+    </div>
+    <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
+  </div>
+</div>
+
+<footer class="footer footer-center p-10 bg-primary text-primary-content">
+  <div>
+    <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="inline-block fill-current"><path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path></svg>
+    <p class="font-bold">
+      ACME Industries Ltd. <br>Providing reliable tech since 1992
+    </p> 
+    <p>Copyright © 2022 - All right reserved</p>
+  </div> 
+  <div>
+    <div class="grid grid-flow-col gap-4">
+      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a> 
+      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a> 
+      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
+    </div>
+  </div>
+</footer>
+

data/after_templates/rag_tailwind_daisyui.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Daisy 
+require 'pry'
+
+# Do NOT use the --css=tailwind option when using DaisyUI or any other custom plugin syste for tailwindcss
+
+self.local_template_path = File.join(File.dirname(__FILE__), 'rag_tailwind_daisyui')
+
+gac 'base rails 7 image created'
+
+add_controller('home', 'index')
+route("root 'home#index'")
+
+template 'index.html.erb', 'app/views/home/index.html.erb'      , force: true
+
+after_bundle do
+  gem "cssbundling-rails"
+
+  rails_command('css:install:tailwind')
+  run('npm install daisyui')
+
+  gsub_file 'tailwind.config.js', %(]\n}), "],\n  plugins: [require(\"daisyui\")],\n}"
+end
+  

data/after_templates/rag_tailwind_hotwire_form/_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/_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/_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/_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/_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/application.html.erb

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html data-theme="emerald">
+  <head>
+    <title>TailwindHotwireForm</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+  </head>
+
+  <body>
+    <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/application.js

@@ -0,0 +1,30 @@
+// 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()
+      })
+    }
+  }
+})

data/after_templates/rag_tailwind_hotwire_form/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/application_helper.rb

@@ -0,0 +1,15 @@
+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/contact.rb

@@ -0,0 +1,5 @@
+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 }
+end

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>