basecoat 0.1.3 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dadf44785123af07635692a4f315fb01b9643fdd78ca5ad069f3a102569bcaf0
-  data.tar.gz: fcf782397f0232aa0e99456d80fb8169639d64a3aed3b910e39ecc8a5ad192cd
+  metadata.gz: 17085310ec6fbb84cd7e779e04cf55362947f1cf440c7d92d5762d2e5759bf6c
+  data.tar.gz: 8370e2d4f4237d2f8d59ca917ca21edcacbec77cf45a4ee9acbfdc841a4bdff1
 SHA512:
-  metadata.gz: ae5d800a24e3cbbfdf80577591615678ea1e176033b2e3ee5c0827f33d418e2bb30cf290d2329838ea13e8f588717dbf278ef6a6b86bfc24ebb1e318838a3e85
-  data.tar.gz: 03706d6dc426530b68bfa825de75e66ffd97138f268a6ce64e498ec02192650487f73a4d25dd3eb23af0c1a0fa88c7ee209020da1227ce18d1b3112b4652eec0
+  metadata.gz: 5e8baf2623834233d0dfeb1dc08939ca7ab3f0e0994ff2a0401b7b40f0e05ec948c072d8eb840c1afd20b3b1073b55240106bebf663dadb17e31e98733c56165
+  data.tar.gz: bd091f59684a2d9e5370b46e2f7bce65c0cc8e3d658c9153adc2d671ce6380c786577fb46fd1e83711d4b68afd840ae5668b194b37e09b6d9d9487d150033295

data/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

data/README.md

@@ -167,6 +167,7 @@ The authentication views include:
 - Tailwind CSS ([installation instructions](https://github.com/rails/tailwindcss-rails))
 - Basecoat CSS
 - Turbo Rails (for scaffold templates)
+- Stimulus (for the theme toggle, can be moved to something else if you desire...)
 
 ## How It Works
 

data/lib/basecoat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Basecoat
-  VERSION = "0.1.3"
+  VERSION = "1.0.1"
 end

data/lib/generators/basecoat/templates/application.html.erb

@@ -6,7 +6,7 @@
     <%= render "layouts/aside" %>
     <main>
       <%= render "layouts/header" %>
-      <div class="py-8">
+      <div class="py-8 px-4">
         <%= turbo_frame_tag "main_content" do %>
           <%= yield %>
         <% end %>

data/lib/generators/basecoat/templates/devise.html.erb

@@ -5,17 +5,14 @@
     <%= render 'layouts/notice', notice: notice if notice %>
     <div class="grid min-h-svh lg:grid-cols-2">
       <div class="flex flex-col gap-4 p-6 md:p-10">
-        <div class="flex justify-between items-center gap-2">
+        <div class="flex justify-between items-center gap-2" data-controller="theme">
           <a href="#" class="flex items-center gap-2 font-medium">
             <div class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4"><rect width="256" height="256" fill="none"></rect><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line></svg>
             </div>
             Basecoat
           </a>
-          <button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="left" onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))" class="btn-icon-outline size-8">
-            <span class="hidden dark:block"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></span>
-            <span class="block dark:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></span>
-          </button>
+          <%= render "layouts/theme_toggle" %>
         </div>
         <%= render 'layouts/alert', alert: alert if alert %>
 

data/lib/generators/basecoat/templates/layouts/_header.html.erb

@@ -1,12 +1,9 @@
-<header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10 px-4">
+<header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10 px-4" data-controller="theme">
   <div class="flex h-14 flex-1 items-center gap-2">
     <button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))" aria-label="Toggle sidebar" data-tooltip="Toggle sidebar" data-side="bottom" data-align="start" class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg>
     </button>
-    <button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="left" onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))" class="btn-icon-outline size-8">
-      <span class="hidden dark:block"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></span>
-      <span class="block dark:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></span>
-    </button>
+    <%= render "layouts/theme_toggle" %>
     <!-- DEVISE_USER_DROPDOWN -->
   </div>
 </header>

data/lib/generators/basecoat/templates/layouts/_theme_toggle.html.erb

@@ -0,0 +1,4 @@
+<button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="left" data-action="click->theme#toggle" class="btn-icon-outline size-8">
+  <span class="hidden dark:block"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></span>
+  <span class="block dark:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></span>
+</button>

data/lib/generators/basecoat/templates/sessions.html.erb

@@ -5,17 +5,14 @@
 <%= render 'layouts/notice', notice: notice if notice %>
 <div class="grid min-h-svh lg:grid-cols-2">
     <div class="flex flex-col gap-4 p-6 md:p-10">
-        <div class="flex justify-between items-center gap-2">
+        <div class="flex justify-between items-center gap-2" data-controller="theme">
             <a href="#" class="flex items-center gap-2 font-medium">
                 <div class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4"><rect width="256" height="256" fill="none"></rect><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line></svg>
                 </div>
                 Basecoat
             </a>
-            <button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="left" onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))" class="btn-icon-outline size-8">
-                <span class="hidden dark:block"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></span>
-                <span class="block dark:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></span>
-            </button>
+            <%= render "layouts/theme_toggle" %>
         </div>
         <%= render 'layouts/alert', alert: alert if alert %>
 

data/lib/generators/basecoat/templates/theme_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    // Apply theme on initial load (runs immediately to prevent flash)
+    this.applyStoredTheme()
+  }
+
+  toggle() {
+    const isDark = !document.documentElement.classList.contains('dark')
+    this.apply(isDark)
+  }
+
+  apply(dark) {
+    document.documentElement.classList.toggle('dark', dark)
+    try {
+      localStorage.setItem('themeMode', dark ? 'dark' : 'light')
+    } catch (_) {}
+  }
+
+  applyStoredTheme() {
+    try {
+      const stored = localStorage.getItem('themeMode')
+      if (stored ? stored === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark')
+      }
+    } catch (_) {}
+  }
+}

data/lib/tasks/basecoat.rake

@@ -3,10 +3,27 @@ require 'fileutils'
 namespace :basecoat do
   desc "Install Basecoat application layout and partials"
   task :install do
-    # Install basecoat-css (always install via yarn/npm for CSS)
+    # Install basecoat-css (detect package manager)
     puts "\n📦 Installing basecoat-css..."
-    system("yarn add basecoat-css") || system("npm install basecoat-css")
-    puts "  Installed: basecoat-css via yarn/npm"
+
+    # Detect package manager
+    if File.exist?(Rails.root.join("bun.lockb"))
+      system("bun add basecoat-css")
+      puts "  Installed: basecoat-css via bun"
+    elsif File.exist?(Rails.root.join("yarn.lock"))
+      system("yarn add basecoat-css")
+      puts "  Installed: basecoat-css via yarn"
+    elsif File.exist?(Rails.root.join("package-lock.json"))
+      system("npm install basecoat-css")
+      puts "  Installed: basecoat-css via npm"
+    elsif File.exist?(Rails.root.join("pnpm-lock.yaml"))
+      system("pnpm add basecoat-css")
+      puts "  Installed: basecoat-css via pnpm"
+    else
+      # Fallback: try bun first, then yarn, then npm
+      system("bun add basecoat-css") || system("yarn add basecoat-css") || system("npm install basecoat-css")
+      puts "  Installed: basecoat-css"
+    end
 
     # If using importmap, also add to importmap.rb for JS
     if File.exist?(Rails.root.join("config/importmap.rb"))
@@ -41,21 +58,38 @@ namespace :basecoat do
         puts "  Added: basecoat-css import to app/javascript/application.js"
       end
 
-      # Copy basecoat-helper.js
-      helper_source = File.expand_path("../generators/basecoat/templates/basecoat-helper.js", __dir__)
-      helper_destination = Rails.root.join("app/javascript/basecoat-helper.js")
-
-      FileUtils.cp(helper_source, helper_destination)
-      puts "  Created: app/javascript/basecoat-helper.js"
-
-      # Add basecoat-helper import
+      # Add basecoat helper JavaScript directly to application.js
       js_content = File.read(js_path)
-      unless js_content.include?("basecoat-helper")
-        # Add import after the last import line
-        js_content = js_content.sub(/(import\s+.*\n)(?!import)/, "\\1import \"basecoat-helper\"\n")
-        File.write(js_path, js_content)
-        puts "  Added: basecoat-helper import to app/javascript/application.js"
+      unless js_content.include?("Re-initialize basecoat-css components")
+        basecoat_js = <<~JS
+
+          // Re-initialize basecoat-css components after Turbo navigation
+          document.addEventListener('turbo:load', () => {
+            document.dispatchEvent(new Event('DOMContentLoaded', { bubbles: true, cancelable: false }))
+          })
+
+          // View transitions for turbo frame navigation
+          addEventListener("turbo:before-frame-render", (event) => {
+              if (document.startViewTransition) {
+                  const originalRender = event.detail.render
+                  event.detail.render = async (currentElement, newElement) => {
+                      const transition = document.startViewTransition(() => originalRender(currentElement, newElement))
+                      await transition.finished
+                  }
+              }
+          })
+        JS
+        File.open(js_path, "a") { |f| f.write(basecoat_js) }
+        puts "  Added: Basecoat helper JavaScript to app/javascript/application.js"
       end
+
+      # Copy theme_controller.js
+      theme_controller_source = File.expand_path("../generators/basecoat/templates/theme_controller.js", __dir__)
+      theme_controller_destination = Rails.root.join("app/javascript/controllers/theme_controller.js")
+
+      FileUtils.mkdir_p(File.dirname(theme_controller_destination))
+      FileUtils.cp(theme_controller_source, theme_controller_destination)
+      puts "  Created: app/javascript/controllers/theme_controller.js"
     end
 
     # Add CSS imports and styles
@@ -71,40 +105,76 @@ namespace :basecoat do
         File.write(tailwind_css, updated_content)
         puts "  Added: basecoat-css import to app/assets/tailwind/application.css"
       end
-    else
-      # Traditional setup with app/assets/stylesheets
-      css_path = Rails.root.join("app/assets/stylesheets/application.css")
-      if File.exist?(css_path)
-        css_content = File.read(css_path)
-
-        css_code = <<~CSS
-          .field_with_errors label {
-              color: var(--color-destructive);
-          }
-          
-          .field_with_errors input {
-              border-color: var(--color-destructive);
-          }
-        CSS
-        File.open(css_path, "a") { |f| f.write(css_code) }
-        puts "  Added: invalid input styles to app/assets/stylesheets/application.css"
+    end
+    # Traditional setup with app/assets/stylesheets
+    # Check for application.tailwind.css first, then application.css
+    css_path = if File.exist?(Rails.root.join("app/assets/stylesheets/application.tailwind.css"))
+                 Rails.root.join("app/assets/stylesheets/application.tailwind.css")
+               else
+                 Rails.root.join("app/assets/stylesheets/application.css")
+               end
+
+    if File.exist?(css_path)
+      css_content = File.read(css_path)
+
+      css_code = <<~CSS
+        .field_with_errors {
+            label {
+                color: var(--color-destructive);
+            }
+        
+            input {
+                border-color: var(--color-destructive);
+            }
+        }
+
+        dl {
+            font-size: var(--text-sm);
+            dt {
+                font-weight: var(--font-weight-bold);
+                margin-top: calc(var(--spacing)*4);
+            }
+        }
+      CSS
+      File.open(css_path, "a") { |f| f.write(css_code) }
+      puts "  Added: basic styles to #{css_path.relative_path_from(Rails.root)}"
+    end
+
+    # Extract <head> from existing application.html.erb BEFORE overwriting it
+    layout_destination = Rails.root.join("app/views/layouts/application.html.erb")
+    partials_source = File.expand_path("../generators/basecoat/templates/layouts", __dir__)
+    partials_destination = Rails.root.join("app/views/layouts")
+
+    FileUtils.mkdir_p(partials_destination)
+
+    if File.exist?(layout_destination)
+      content = File.read(layout_destination)
+      # Extract everything between <head> and </head>
+      if content =~ /(<head>.*?<\/head>)/m
+        head_content = $1
+        head_destination = partials_destination.join("_head.html.erb")
+        File.write(head_destination, head_content + "\n")
+        puts "  Created: app/views/layouts/_head.html.erb (extracted from existing application.html.erb)"
+      else
+        # Fallback: copy the template if no <head> found in existing layout
+        FileUtils.cp("#{partials_source}/_head.html.erb", partials_destination.join("_head.html.erb"))
+        puts "  Created: app/views/layouts/_head.html.erb (from template)"
       end
+    else
+      # No existing layout, use template
+      FileUtils.cp("#{partials_source}/_head.html.erb", partials_destination.join("_head.html.erb"))
+      puts "  Created: app/views/layouts/_head.html.erb (from template)"
     end
 
     # Copy application layout
     layout_source = File.expand_path("../generators/basecoat/templates/application.html.erb", __dir__)
-    layout_destination = Rails.root.join("app/views/layouts/application.html.erb")
-
-    FileUtils.mkdir_p(File.dirname(layout_destination))
     FileUtils.cp(layout_source, layout_destination)
     puts "  Created: app/views/layouts/application.html.erb"
 
-    # Copy layout partials
-    partials_source = File.expand_path("../generators/basecoat/templates/layouts", __dir__)
-    partials_destination = Rails.root.join("app/views/layouts")
-
+    # Copy layout partials (except _head.html.erb which we already handled)
     Dir.glob("#{partials_source}/*").each do |file|
       filename = File.basename(file)
+      next if filename == "_head.html.erb" # Skip _head.html.erb, we already created it
       FileUtils.cp(file, partials_destination.join(filename))
       puts "  Created: app/views/layouts/#{filename}"
     end

data/lib/templates/erb/scaffold/edit.html.erb.tt

@@ -1,6 +1,5 @@
 <%%= turbo_frame_tag "main_content" do %>
-<%%= render 'layouts/notice', notice: notice if notice %>
-<div class="container mx-auto px-4 py-8">
+  <%%= render 'layouts/notice', notice: notice if notice %>
   <div class="max-w-2xl mx-auto">
     <div class="card">
       <header>
@@ -17,5 +16,4 @@
       <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
     </div>
   </div>
-</div>
 <%% end %>

data/lib/templates/erb/scaffold/index.html.erb.tt

@@ -1,22 +1,47 @@
 <%%= turbo_frame_tag "main_content" do %>
-<%%= render 'layouts/notice', notice: notice if notice %>
-<div class="container mx-auto px-4 py-8">
+  <%%= render 'layouts/notice', notice: notice if notice %>
   <div class="flex justify-between items-center mb-8">
     <h1 class="text-3xl"><%= human_name.pluralize %></h1>
     <%%= link_to "New <%= human_name.downcase %>", <%= new_helper(type: :path) %>, class: "btn", data: { turbo_action: "advance" } %>
   </div>
 
-  <div class="grid gap-4" id="<%= plural_table_name %>">
-    <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
-      <div class="card">
-        <section>
-          <%%= render <%= singular_table_name %> %>
-        </section>
-        <footer class="flex items-center">
-          <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(singular_table_name) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
-        </footer>
-      </div>
-    <%% end %>
+  <div class="overflow-x-auto" id="<%= plural_table_name %>">
+    <table class="table">
+      <thead>
+        <tr class="hover:bg-background">
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+          <th>
+            <%= attribute.human_name %>
+          </th>
+<% end -%>
+          <th class="bg-background sticky right-0">
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
+          <tr class="hover:bg-background">
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+            <td>
+<% if attribute.attachment? -%>
+              <%%= link_to <%= singular_table_name %>.<%= attribute.column_name %>.filename, <%= singular_table_name %>.<%= attribute.column_name %>, target: :_blank, class: "text-blue-600 hover:text-blue-800 underline" if <%= singular_table_name %>.<%= attribute.column_name %>.attached? %>
+<% elsif attribute.attachments? -%>
+              <%% <%= singular_table_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
+                <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %>, target: :_blank, class: "text-blue-600 hover:text-blue-800 underline" %></div>
+              <%% end %>
+<% else -%>
+              <%%= <%= singular_table_name %>.<%= attribute.column_name %> %>
+<% end -%>
+            </td>
+<% end -%>
+            <td class="bg-background sticky right-0">
+              <%%= link_to "Show", <%= model_resource_name(singular_table_name) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
+            </td>
+          </tr>
+        <%% end %>
+      </tbody>
+    </table>
   </div>
 
   <%% if @<%= plural_table_name %>.empty? %>
@@ -31,5 +56,4 @@
       <%%= link_to "New <%= human_name.downcase %>", <%= new_helper(type: :path) %>, class: "btn", data: { turbo_action: "advance" } %>
     </div>
   <%% end %>
-</div>
 <%% end %>

data/lib/templates/erb/scaffold/new.html.erb.tt

@@ -1,6 +1,5 @@
 <%%= turbo_frame_tag "main_content" do %>
-<%%= render 'layouts/notice', notice: notice if notice %>
-<div class="container mx-auto px-4 py-8">
+  <%%= render 'layouts/notice', notice: notice if notice %>
   <div class="max-w-2xl mx-auto">
     <div class="card">
       <header>
@@ -16,5 +15,4 @@
       <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
     </div>
   </div>
-</div>
 <%% end %>

data/lib/templates/erb/scaffold/show.html.erb.tt

@@ -1,23 +1,40 @@
 <%%= turbo_frame_tag "main_content" do %>
 <%%= render 'layouts/notice', notice: notice if notice %>
-<div class="container mx-auto px-4 py-8">
-  <div class="max-w-2xl mx-auto">
-    <div class="card">
-      <section>
-        <%%= render @<%= singular_table_name %> %>
-      </section>
-    </div>
+<div class="max-w-2xl mx-auto">
+  <div class="card">
+    <section>
+      <div id="<%%= dom_id @<%= singular_table_name %> %>">
+        <dl>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+          <dt>
+            <%= attribute.human_name %>:
+          </dt>
+          <dd>
+<% if attribute.attachment? -%>
+            <%%= link_to @<%= singular_table_name %>.<%= attribute.column_name %>.filename, @<%= singular_table_name %>.<%= attribute.column_name %>, target: :_blank if @<%= singular_table_name %>.<%= attribute.column_name %>.attached? %>
+<% elsif attribute.attachments? -%>
+            <%% @<%= singular_table_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
+              <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %>, target: :_blank %></div>
+            <%% end %>
+<% else -%>
+            <%%= @<%= singular_table_name %>.<%= attribute.column_name %> %>
+<% end -%>
+          </dd>
+<% end -%>
+        </dl>
+      </div>
+    </section>
+  </div>
 
-    <div class="flex flex-wrap gap-3 mt-6">
-      <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "btn", data: { turbo_action: "advance" } %>
-      <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
-      <%%= button_to "Delete this <%= human_name.downcase %>",
-            <%= model_resource_name(prefix: "@") %>,
-            method: :delete,
-            class: "btn-destructive",
-            data: { turbo_confirm: "Are you sure you want to delete this <%= human_name.downcase %>?", turbo_action: "advance" },
-            form_class: "inline-block" %>
-    </div>
+  <div class="flex flex-wrap gap-3 mt-6">
+    <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "btn", data: { turbo_action: "advance" } %>
+    <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
+    <%%= button_to "Delete this <%= human_name.downcase %>",
+          <%= model_resource_name(prefix: "@") %>,
+          method: :delete,
+          class: "btn-destructive",
+          data: { turbo_confirm: "Are you sure you want to delete this <%= human_name.downcase %>?", turbo_action: "advance" },
+          form_class: "inline-block" %>
   </div>
 </div>
 <%% end %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: basecoat
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 1.0.1
 platform: ruby
 authors:
 - Martijn Lafeber
@@ -33,6 +33,7 @@ extra_rdoc_files: []
 files:
 - ".idea/.gitignore"
 - ".idea/basecoat.iml"
+- ".idea/codeStyles/codeStyleConfig.xml"
 - ".idea/misc.xml"
 - ".idea/modules.xml"
 - ".idea/vcs.xml"
@@ -43,7 +44,6 @@ files:
 - lib/basecoat/railtie.rb
 - lib/basecoat/version.rb
 - lib/generators/basecoat/templates/application.html.erb
-- lib/generators/basecoat/templates/basecoat-helper.js
 - lib/generators/basecoat/templates/devise.html.erb
 - lib/generators/basecoat/templates/devise/confirmations/new.html.erb
 - lib/generators/basecoat/templates/devise/mailer/confirmation_instructions.html.erb
@@ -65,18 +65,19 @@ files:
 - lib/generators/basecoat/templates/layouts/_head.html.erb
 - lib/generators/basecoat/templates/layouts/_header.html.erb
 - lib/generators/basecoat/templates/layouts/_notice.html.erb
+- lib/generators/basecoat/templates/layouts/_theme_toggle.html.erb
 - lib/generators/basecoat/templates/pagy.scss
 - lib/generators/basecoat/templates/passwords/edit.html.erb
 - lib/generators/basecoat/templates/passwords/new.html.erb
 - lib/generators/basecoat/templates/scaffold_hook.rb
 - lib/generators/basecoat/templates/sessions.html.erb
 - lib/generators/basecoat/templates/sessions/new.html.erb
+- lib/generators/basecoat/templates/theme_controller.js
 - lib/tasks/basecoat.rake
 - lib/templates/erb/scaffold/_form.html.erb.tt
 - lib/templates/erb/scaffold/edit.html.erb.tt
 - lib/templates/erb/scaffold/index.html.erb.tt
 - lib/templates/erb/scaffold/new.html.erb.tt
-- lib/templates/erb/scaffold/partial.html.erb.tt
 - lib/templates/erb/scaffold/show.html.erb.tt
 - sig/basecoat.rbs
 homepage: https://github.com/lafeber/basecoat-rb

data/lib/generators/basecoat/templates/basecoat-helper.js

@@ -1,38 +0,0 @@
-// Re-initialize basecoat-css components after Turbo navigation
-document.addEventListener('turbo:load', () => {
-  document.dispatchEvent(new Event('DOMContentLoaded', { bubbles: true, cancelable: false }))
-})
-
-// View transitions for turbo frame navigation
-addEventListener("turbo:before-frame-render", (event) => {
-    if (document.startViewTransition) {
-        const originalRender = event.detail.render
-        event.detail.render = async (currentElement, newElement) => {
-            const transition = document.startViewTransition(() => originalRender(currentElement, newElement))
-            await transition.finished
-        }
-    }
-})
-
-// Dark mode toggle
-const apply = dark => {
-    document.documentElement.classList.toggle('dark', dark);
-    try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
-};
-
-// Apply theme on initial load (runs immediately to prevent flash)
-try {
-    const stored = localStorage.getItem('themeMode');
-    if (stored ? stored === 'dark'
-        : matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.classList.add('dark');
-    }
-} catch (_) {}
-
-// Set up theme toggle event listener
-document.addEventListener('basecoat:theme', (event) => {
-    const mode = event.detail?.mode;
-    apply(mode === 'dark' ? true
-        : mode === 'light' ? false
-            : !document.documentElement.classList.contains('dark'));
-})

data/lib/templates/erb/scaffold/partial.html.erb.tt

@@ -1,20 +0,0 @@
-<div id="<%%= dom_id <%= singular_table_name %> %>" class="space-y-4">
-<% attributes.reject(&:password_digest?).each do |attribute| -%>
-  <div class="flex flex-col sm:flex-row sm:items-center py-2">
-    <dt class="text-sm font-medium sm:w-1/3 mb-1 sm:mb-0">
-      <%= attribute.human_name %>:
-    </dt>
-    <dd class="text-sm sm:w-2/3">
-<% if attribute.attachment? -%>
-      <%%= link_to <%= singular_table_name %>.<%= attribute.column_name %>.filename, <%= singular_table_name %>.<%= attribute.column_name %>, target: :_blank, class: "text-blue-600 hover:text-blue-800 underline" if <%= singular_table_name %>.<%= attribute.column_name %>.attached? %>
-<% elsif attribute.attachments? -%>
-      <%% <%= singular_table_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
-        <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %>, target: :_blank, class: "text-blue-600 hover:text-blue-800 underline" %></div>
-      <%% end %>
-<% else -%>
-      <%%= <%= singular_table_name %>.<%= attribute.column_name %> %>
-<% end -%>
-    </dd>
-  </div>
-<% end -%>
-</div>