basecoat 2.2.2 → 2.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 745c8eb3926d13292445d2d4fbd0b7550bfe5573ef3888ed27c19fc8018fe9c4
-  data.tar.gz: 321640c46d3f61ee0b87beb7214be8f4cd82ed31f10f4291a26d99a9cb455430
+  metadata.gz: 1ec22802652367bcd30144e5e34a1df474e3d52b5943a35c21013d63284e46a1
+  data.tar.gz: 5aa8e17dc9669ff89072f3bb51ef8a4316410f448117406e5a64e18a96dafbfd
 SHA512:
-  metadata.gz: 8a415461f36459cca8d34235c3939c51b8aa754bc68c5691ebc65f083bc8e2c6a086f600309c326127cb38e3a45f3b3a61dcc0c3684936b4641a2ba0ffc8a566
-  data.tar.gz: d021c20201711920476b6985174c60d27a8e4fa9d5faaaadb473196a15c9b7407000ad903e584b200df122ef9d69b2d0366302eef25b52078a4d6076d32eee47
+  metadata.gz: 89b9cabbb20c51b45aefdea591f85ccdbe55dcb73c08363f24a8907b0be88886a7c99c19c68a73eef27e47270415e8756ad4a03318963a450f2013e7c422c8bc
+  data.tar.gz: 1aa2c47cb3737cd0e7bd9a4143d4cd8fbc7943e2c9d52e065c7f71042ad6a147963a9891408ca56037f8aa14740807d8818b115f6677fa92ca494e7a3ca5f234

data/README.md

@@ -13,6 +13,7 @@ Try it from scratch:
 
     rails new myproject -c tailwind
     cd myproject
+    yarn
     bundle add basecoat
     rails basecoat:install
     rails g scaffold Post title:string! description:text posted_at:datetime active:boolean rating:integer 
@@ -165,7 +166,7 @@ Options:
 - `except`: Array of country codes to exclude
 - All `basecoat_select_tag` options (placeholder, scrollable, etc.)
 
-**Note:** This helper requires the `countries` gem, which is automatically installed with `rake basecoat:install`.
+**Note:** This helper requires the `countries` gem.
 
 ## Rake tasks
 
@@ -223,7 +224,7 @@ rake basecoat:install:pagy
 - Rails 8.0+
 - Tailwind CSS ([installation instructions](https://github.com/rails/tailwindcss-rails))
 - Basecoat CSS
-- Stimulus (for the theme toggle, can be moved to something else if you desire...)
+- Stimulus (for the search helper)
 
 ## Issues
 

data/lib/basecoat/version.rb

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

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

@@ -5,7 +5,7 @@
     <%= 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" data-controller="theme">
+        <div class="flex justify-between items-center gap-2">
           <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>

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

@@ -7,7 +7,7 @@
         </div>
         <div class="grid flex-1 text-left text-sm leading-tight">
           <span class="truncate font-medium">Basecoat</span>
-          <span class="truncate text-xs">v0.3.9</span>
+          <span class="truncate text-xs">v0.3.10</span>
         </div>
       </a>
     </header>

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

@@ -18,4 +18,27 @@
   <%# Includes all stylesheet files in app/assets/stylesheets %>
   <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
   <%= javascript_importmap_tags %>
+  <script>
+      (() => {
+          try {
+              const stored = localStorage.getItem('themeMode');
+              if (stored ? stored === 'dark'
+                  : matchMedia('(prefers-color-scheme: dark)').matches) {
+                  document.documentElement.classList.add('dark');
+              }
+          } catch (_) {}
+
+          const apply = dark => {
+              document.documentElement.classList.toggle('dark', dark);
+              try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
+          };
+
+          document.addEventListener('basecoat:theme', (event) => {
+              const mode = event.detail?.mode;
+              apply(mode === 'dark' ? true
+                  : mode === 'light' ? false
+                      : !document.documentElement.classList.contains('dark'));
+          });
+      })();
+  </script>
 </head>

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

@@ -1,4 +1,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">
+<header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10 px-4">
   <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">
       <%= lucide_icon "panel-left" %>

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

@@ -1,4 +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-ghost size-8">
+<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-ghost size-8">
   <span class="hidden dark:block"><%= lucide_icon "sun" %></span>
   <span class="block dark:hidden"><%= lucide_icon "moon" %></span>
 </button>

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

@@ -5,7 +5,7 @@
 <%= 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" data-controller="theme">
+        <div class="flex justify-between items-center gap-2">
             <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>

data/lib/tasks/basecoat.rake

@@ -51,7 +51,7 @@ namespace :basecoat do
 
       unless importmap_content.include?("basecoat-css")
         File.open(importmap_path, "a") do |f|
-          f.puts "\npin \"basecoat-css/all\", to: \"https://cdn.jsdelivr.net/npm/basecoat-css@0.3.9/dist/js/all.js\""
+          f.puts "\npin \"basecoat-css/all\", to: \"https://cdn.jsdelivr.net/npm/basecoat-css@0.3.10/dist/js/all.js\""
         end
         puts "  Added: basecoat-css to config/importmap.rb"
       end
@@ -89,18 +89,6 @@ namespace :basecoat do
         puts "  Added: cool view transition 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))
-      if prompt_overwrite(theme_controller_destination, overwrite_all)
-        FileUtils.cp(theme_controller_source, theme_controller_destination)
-        puts "  Created: app/javascript/controllers/theme_controller.js"
-      else
-        puts "  Skipped: app/javascript/controllers/theme_controller.js"
-      end
-
       # Copy search_controller.js
       search_controller_source = File.expand_path("../generators/basecoat/templates/search_controller.js", __dir__)
       search_controller_destination = Rails.root.join("app/javascript/controllers/search_controller.js")
@@ -248,7 +236,7 @@ namespace :basecoat do
         head_content = File.read(head_path)
         unless head_content.include?("basecoat.cdn.min.css")
           cdn_link = '  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.9/dist/basecoat.cdn.min.css">'
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.10/dist/basecoat.cdn.min.css">'
           # Insert before the closing </head> tag
           updated_content = head_content.sub(/(<\/head>)/, "#{cdn_link}\n\\1")
           File.write(head_path, updated_content)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: basecoat
 version: !ruby/object:Gem::Version
-  version: 2.2.2
+  version: 2.3.0
 platform: ruby
 authors:
 - Martijn Lafeber
@@ -92,7 +92,6 @@ files:
 - lib/generators/basecoat/templates/sessions.html.erb
 - lib/generators/basecoat/templates/sessions/new.html.erb
 - lib/generators/basecoat/templates/shared/_empty.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

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

@@ -1,29 +0,0 @@
-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 (_) {}
-  }
-}