rails-contact 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 96bbf7fb23c7f016bf4ca07ef9713a0f2412f1236efeb11b20d978f3e8c809cc
-  data.tar.gz: c16b7c6f1258b827468f1f816b67bfe6bb77ad7e7fc2ceafb36a5197b5923bfe
+  metadata.gz: b40ac2006fcc2931b47cbc8b339770f3c148bca499cae741ee87c2e756a1a290
+  data.tar.gz: 6be3bc28491e1f20cd6c61409f8d6454db921bf1907b1834e801760d5abb304a
 SHA512:
-  metadata.gz: c97455fedc7043f89e3a3ffcb5ebcc38a80d68ef597df76b2c4a25fb506c76d2c6e1dd577ffb071b4c4cd6df5de3f5c773b7ce5fad8bdcb51b9b72468293c4de
-  data.tar.gz: a16a9da2acbccebe3aaeac7371c5023f511278b6c8f88a2f5b629b8d2aada0336b5e68b2f327bd53c0f8844d99b5a22fb05f6cb754e46d9fe8fc1f188df17db0
+  metadata.gz: 32f9fc983a9c6eea9e37ceb4d3e220ad4f0f14e4ba54d195e5ef1278f3674e598492b242cddde852efc7f51b797280758cf0f4b95ac8e905beb1dd69a2c5f65b
+  data.tar.gz: ca941d755aa4db4679f79a8a7122f3bfa36db04b0ba32f9623d522cdf2afc2df93091dd2f4bc3b7e415f7ef167e563808ffee61ecca190e8fc8f3291f89eeac1

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.4
+
+- Default to the host `application` layout when the engine is mounted, with `inherit_host_layout` (default `true`) to opt back into the engine-only layout.
+- Ensure nested field add/remove and bulk checkbox scripts run when the host uses importmap (inline scripts + idempotent global guards; same guard in `nested_fields.js` for the Sprockets bundle).
+- Pull engine stylesheet into each main contact view so styling works without the engine layout’s asset tags.
+
 ## 0.1.3
 
 - Flatten view partial paths under `app/views/rails/contact` and remove legacy `contacts/` partial nesting.

data/README.md

@@ -20,7 +20,7 @@ It provides:
 ### 1) Add gem
 
 ```ruby
-gem "rails-contact", "~> 0.1.3"
+gem "rails-contact", "~> 0.1.4"
 ```
 
 ```bash
@@ -55,6 +55,18 @@ mount Rails::Contact::Engine => "/contacts", as: "rails_contact"
 - `/contacts/new`
 - `/contacts/:id`
 
+### Host layout and importmap
+
+By default the engine uses your host app layout named `application` so contacts pages match the rest of your UI (including Turbo and importmap). Styles for engine markup are included per page via `stylesheet_link_tag`, and nested “add row” / bulk-selection behavior uses small inline scripts so you do **not** need to pin gem JavaScript in the host importmap.
+
+To use the engine’s standalone layout and bundled `javascript_include_tag "rails/contact/application"` instead:
+
+```ruby
+Rails::Contact.configure do |config|
+  config.inherit_host_layout = false
+end
+```
+
 ---
 
 ## Generators

data/app/assets/javascripts/rails/contact/nested_fields.js

@@ -1,4 +1,7 @@
 (() => {
+  if (window.__railsContactNestedFieldsBound) return;
+  window.__railsContactNestedFieldsBound = true;
+
   function addRow(event) {
     const button = event.target.closest("[data-add-nested]");
     if (!button) return;

data/app/assets/stylesheets/rails/contact/application.css

@@ -1,15 +1,187 @@
 /*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
  *= require_self
  */
+
+/* Basic reset-ish defaults scoped to engine layout usage */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: #f8fafc;
+  color: #111827;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+body {
+  line-height: 1.4;
+}
+
+a {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Utility classes used in engine views */
+.space-y-6 > * + * {
+  margin-top: 1.5rem;
+}
+
+.space-y-4 > * + * {
+  margin-top: 1rem;
+}
+
+.space-y-3 > * + * {
+  margin-top: 0.75rem;
+}
+
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.ml-4 { margin-left: 1rem; }
+.pt-2 { padding-top: 0.5rem; }
+
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.items-center { align-items: center; }
+.items-end { align-items: flex-end; }
+.items-start { align-items: flex-start; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-2 { gap: 0.5rem; }
+.gap-6 { gap: 1.5rem; }
+
+.grid { display: grid; }
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.md\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.md\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.md\:grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.md\:grid-cols-5 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+
+.w-full { width: 100%; }
+.w-24 { width: 6rem; }
+.w-28 { width: 7rem; }
+.h-4 { height: 1rem; }
+.w-4 { width: 1rem; }
+.h-24 { height: 6rem; }
+.min-w-full { min-width: 100%; }
+
+.rounded-md { border-radius: 0.375rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-xl { border-radius: 0.75rem; }
+.rounded-full { border-radius: 9999px; }
+
+.border { border: 1px solid #d1d5db; }
+.border-gray-200 { border-color: #e5e7eb; }
+.border-gray-300 { border-color: #d1d5db; }
+.border-red-200 { border-color: #fecaca; }
+
+.bg-white { background: #fff; }
+.bg-gray-50 { background: #f9fafb; }
+.bg-gray-100 { background: #f3f4f6; }
+.bg-gray-900 { background: #111827; }
+.bg-blue-600 { background: #2563eb; }
+.bg-red-50 { background: #fef2f2; }
+.bg-red-600 { background: #dc2626; }
+
+.text-white { color: #fff; }
+.text-gray-900 { color: #111827; }
+.text-gray-700 { color: #374151; }
+.text-gray-600 { color: #4b5563; }
+.text-gray-500 { color: #6b7280; }
+.text-red-700 { color: #b91c1c; }
+.text-blue-600 { color: #2563eb; }
+
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-2xl { font-size: 1.5rem; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.uppercase { text-transform: uppercase; }
+.tracking-wide { letter-spacing: 0.03em; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-center { text-align: center; }
+
+.p-4 { padding: 1rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+.pl-5 { padding-left: 1.25rem; }
+
+.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
+.overflow-hidden { overflow: hidden; }
+.object-cover { object-fit: cover; }
+.whitespace-pre-line { white-space: pre-line; }
+.list-disc { list-style: disc; }
+
+.divide-y > * + * {
+  border-top: 1px solid #e5e7eb;
+}
+
+.divide-gray-100 > * + * {
+  border-top-color: #f3f4f6;
+}
+
+.divide-gray-200 > * + * {
+  border-top-color: #e5e7eb;
+}
+
+.hover\:bg-gray-50:hover { background: #f9fafb; }
+.hover\:bg-blue-700:hover { background: #1d4ed8; }
+.hover\:bg-red-700:hover { background: #b91c1c; }
+.hover\:bg-gray-700:hover { background: #374151; }
+.hover\:text-blue-700:hover { color: #1d4ed8; }
+
+input,
+textarea,
+select,
+button {
+  font: inherit;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="number"],
+input[type="date"],
+textarea {
+  box-sizing: border-box;
+}
+
+button,
+input[type="submit"] {
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+/* Layout breathing room */
+body > * {
+  max-width: 1100px;
+  margin: 1.5rem auto;
+  padding: 0 1rem;
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+  .md\:items-end { align-items: end; }
+  .md\:col-span-2 { grid-column: span 2 / span 2; }
+  .md\:col-span-3 { grid-column: span 3 / span 3; }
+}

data/app/controllers/rails/contact/application_controller.rb

@@ -3,8 +3,14 @@ module Rails
     class ApplicationController < ActionController::Base
       protect_from_forgery with: :exception
 
+      layout :rails_contact_layout
+
       private
 
+      def rails_contact_layout
+        Rails::Contact.configuration.inherit_host_layout ? "application" : "rails/contact/application"
+      end
+
       def t_flash(key, default:)
         I18n.t("rails_contact.flash.#{key}", default: default)
       end

data/app/views/rails/contact/_bulk_selection_script.html.erb

@@ -0,0 +1,13 @@
+<script>
+(() => {
+  if (window.__railsContactBulkSelectionBound) return;
+  window.__railsContactBulkSelectionBound = true;
+
+  document.addEventListener("change", function(event) {
+    if (!event.target.classList.contains("bulk-id-checkbox")) return;
+    const values = Array.from(document.querySelectorAll(".bulk-id-checkbox:checked")).map((node) => node.value);
+    const field = document.getElementById("bulk-ids-field");
+    if (field) field.value = values.join(",");
+  });
+})();
+</script>

data/app/views/rails/contact/_form.html.erb

@@ -184,3 +184,4 @@
     <%= link_to "Back", contacts_path, class: "inline-flex rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50" %>
   </div>
 <% end %>
+<%= render "rails/contact/nested_fields_script" %>

data/app/views/rails/contact/_nested_fields_script.html.erb

@@ -0,0 +1,51 @@
+<script>
+(() => {
+  if (window.__railsContactNestedFieldsBound) return;
+  window.__railsContactNestedFieldsBound = true;
+
+  function addRow(event) {
+    const button = event.target.closest("[data-add-nested]");
+    if (!button) return;
+
+    const wrapper = button.closest("[data-nested-wrapper]");
+    const targetSelector = button.dataset.target;
+    const templateSelector = button.dataset.template;
+    if (!wrapper || !targetSelector || !templateSelector) return;
+
+    const container = wrapper.querySelector(targetSelector);
+    const template = wrapper.querySelector(templateSelector);
+    if (!container || !template) return;
+
+    const uniqueId = String(Date.now() + Math.floor(Math.random() * 1000));
+    const html = template.innerHTML.replace(/NEW_RECORD/g, uniqueId);
+    container.insertAdjacentHTML("beforeend", html);
+  }
+
+  function removeRow(event) {
+    const button = event.target.closest("[data-action='nested-fields#remove']");
+    if (!button) return;
+    const row = button.closest("[data-nested-fields-target='row']");
+    if (!row) return;
+
+    const destroyField = row.querySelector("[data-nested-fields-target='destroyField']");
+    if (destroyField) {
+      destroyField.value = "1";
+      row.style.display = "none";
+    } else {
+      row.remove();
+    }
+  }
+
+  document.addEventListener("click", (event) => {
+    if (event.target.closest("[data-add-nested]")) {
+      event.preventDefault();
+      addRow(event);
+      return;
+    }
+    if (event.target.closest("[data-action='nested-fields#remove']")) {
+      event.preventDefault();
+      removeRow(event);
+    }
+  });
+})();
+</script>

data/app/views/rails/contact/_stylesheet.html.erb

@@ -0,0 +1 @@
+<%= stylesheet_link_tag "rails/contact/application", "data-turbo-track": "reload" %>

data/app/views/rails/contact/edit.html.erb

@@ -1,3 +1,4 @@
+<%= render "rails/contact/stylesheet" %>
 <h1>Edit Contact</h1>
 <%= render "rails/contact/form", contact: @contact %>
 <%= link_to "Back", contacts_path %>

data/app/views/rails/contact/index.html.erb

@@ -1,3 +1,4 @@
+<%= render "rails/contact/stylesheet" %>
 <div class="space-y-6">
   <div class="flex items-center justify-between">
     <h1 class="text-2xl font-bold text-gray-900">Contacts</h1>
@@ -78,11 +79,4 @@
   </div>
 </div>
 
-<script>
-  document.addEventListener("change", function(event) {
-    if (!event.target.classList.contains("bulk-id-checkbox")) return;
-    const values = Array.from(document.querySelectorAll(".bulk-id-checkbox:checked")).map((node) => node.value);
-    const field = document.getElementById("bulk-ids-field");
-    if (field) field.value = values.join(",");
-  });
-</script>
+<%= render "rails/contact/bulk_selection_script" %>

data/app/views/rails/contact/new.html.erb

@@ -1,3 +1,4 @@
+<%= render "rails/contact/stylesheet" %>
 <h1>New Contact</h1>
 <%= render "rails/contact/form", contact: @contact %>
 <%= link_to "Back", contacts_path %>

data/app/views/rails/contact/show.html.erb

@@ -1,3 +1,4 @@
+<%= render "rails/contact/stylesheet" %>
 <div class="space-y-6">
   <div class="flex items-start justify-between">
     <div>

data/lib/generators/rails/contact/templates/contacts_controller.rb.tt

@@ -1,8 +1,6 @@
 module Rails
   module Contact
     class ContactsController < Rails::Contact::ContactsController
-      layout "application"
-
       # Override actions here when needed.
     end
   end

data/lib/rails/contact/configuration.rb

@@ -4,7 +4,8 @@ module Rails
       attr_accessor :contact_class_name, :elasticsearch_url, :search_backend,
                     :google_sync_enabled, :google_max_contacts, :rolling_window_sort,
                     :google_client_id, :google_client_secret, :google_redirect_uri,
-                    :google_token_path, :reset_index_on_boot, :default_per_page
+                    :google_token_path, :reset_index_on_boot, :default_per_page,
+                    :inherit_host_layout
 
       def initialize
         @contact_class_name = "Rails::Contact::Contact"
@@ -19,6 +20,10 @@ module Rails
         @google_token_path = ENV.fetch("RAILS_CONTACT_GOOGLE_TOKEN_PATH", "tmp/rails_contact_google_token.json")
         @reset_index_on_boot = false
         @default_per_page = 25
+        # When true (default), engine pages use the host app +layout+ named +application+ so
+        # importmap/Turbo match the rest of the app. Engine CSS and nested-field JS are still
+        # injected from gem templates so behavior does not depend on the engine layout asset tags.
+        @inherit_host_layout = true
       end
     end
   end

data/lib/rails/contact/version.rb

@@ -1,5 +1,5 @@
 module Rails
   module Contact
-    VERSION = "0.1.3"
+    VERSION = "0.1.4"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-contact
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Kshitiz Sinha
@@ -133,10 +133,13 @@ files:
 - app/models/rails/contact/label.rb
 - app/views/layouts/rails/contact/application.html.erb
 - app/views/rails/contact/_address_fields.html.erb
+- app/views/rails/contact/_bulk_selection_script.html.erb
 - app/views/rails/contact/_email_fields.html.erb
 - app/views/rails/contact/_event_fields.html.erb
 - app/views/rails/contact/_form.html.erb
+- app/views/rails/contact/_nested_fields_script.html.erb
 - app/views/rails/contact/_phone_fields.html.erb
+- app/views/rails/contact/_stylesheet.html.erb
 - app/views/rails/contact/_website_fields.html.erb
 - app/views/rails/contact/edit.html.erb
 - app/views/rails/contact/index.html.erb