basecoat 2.2.1 → 2.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6fa9470ef968e4c5dff1e61b2c016056700d4bac56cb48601d86c7cd6eb0a0e1
-  data.tar.gz: 1116eb1741c23532506854d7243c8785431a7ea9957a6ab097ec952ead59d345
+  metadata.gz: 1ec22802652367bcd30144e5e34a1df474e3d52b5943a35c21013d63284e46a1
+  data.tar.gz: 5aa8e17dc9669ff89072f3bb51ef8a4316410f448117406e5a64e18a96dafbfd
 SHA512:
-  metadata.gz: 9ee345ffafaa76be5521b2fb9c9fade4f527517963acdb1f5cd50d283ff469e8704bde799d0b9c6070ffaa200f916e8d5ebb160416ef2466efabf653ef1c5f7d
-  data.tar.gz: e50d6e88672d5f555466e4d12abe0f5dc712b6bb29054403a306964d8fa8ca0d99391a602ae39c3ae588dddb89f00cc96cf5b797de8deed1176178357035b500
+  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 
@@ -30,6 +31,143 @@ Basecoat CSS combines tailwind with clean css classes. It creates the looks of s
 
 If you need more complex components; enrich the views with https://railsblocks.com/ or https://shadcn.rails-components.com/ or just the shadcn React components themselves.
 
+## Icons
+
+Basecoat uses the [lucide-rails](https://github.com/heyvito/lucide-rails) gem for beautiful, consistent icons throughout the UI. The gem is automatically installed as a dependency.
+
+You can use Lucide icons in your views with the `lucide_icon` helper:
+
+```erb
+<%= lucide_icon "home" %>
+<%= lucide_icon "user", class: "w-5 h-5" %>
+```
+
+Browse available icons at [lucide.dev](https://lucide.dev/icons/).
+
+### Using Different Icon Libraries
+
+If you prefer to use a different icon library, you can switch to the [rails_icons](https://github.com/nejdetkadir/rails_icons) gem which supports multiple icon libraries including Lucide, Font Awesome, Heroicons, and more. Simply:
+
+1. Add `rails_icons` to your Gemfile
+2. Replace `lucide_icon` calls with `icon` calls from rails_icons in the generated views
+3. Configure your preferred icon library in `config/initializers/rails_icons.rb`
+
+## Form Helpers
+
+Basecoat includes custom form helpers for enhanced UI components:
+
+### Select Component
+
+Use `basecoat_select` in forms or `basecoat_select_tag` outside of forms:
+
+```erb
+<%= form_for @user do |f| %>
+  <%= f.basecoat_select :fruit, [["Apple", 1], ["Pear", 2]] %>
+<% end %>
+
+<%# Or without a form: %>
+<%= basecoat_select_tag "fruit", [["Apple", 1], ["Pear", 2]] %>
+
+<%# With options: %>
+<%= f.basecoat_select :fruit, [["Apple", 1], ["Pear", 2]],
+    group_label: "Fruits",
+    placeholder: "Search fruits..." %>
+
+<%# You can add a remote url, which does a turbo call %>
+  <%= f.basecoat_select :fruit, [[]], url: "/fruits/search", turbo_frame: "custom_frame" %>
+
+  `fruits/search.turbo_stream.erb` should then have the following content:
+
+  <%= turbo_stream.update "custom_frame" do %>
+    <% @fruits.each do |fruit| %>
+      <%= tag.div fruit.name, role: "option", data: { value: fruit.id } %>
+    <% end %>
+  <% end %>
+
+# If you don't add the turbo_frame option there's a fallback to underscored URL (_fruits_search)
+<%= f.basecoat_select :fruit, [[]], url: "/fruits/search" %>
+
+Make sure this matches the frame in your partial!
+```
+
+### Remote Search Component
+
+Use `basecoat_remote_search_tag` for a standalone search component with Turbo Stream support:
+
+```erb
+<%# Basic usage: %>
+<%= basecoat_remote_search_tag("/posts/search") %>
+
+<%# With custom turbo frame name: %>
+<%= basecoat_remote_search_tag("/posts/search", turbo_frame: "custom_frame") %>
+
+<%# With custom placeholder: %>
+<%= basecoat_remote_search_tag("/posts/search", placeholder: "Search posts...") %>
+```
+
+Your controller should respond with a Turbo Stream that updates the frame:
+
+```ruby
+# posts_controller.rb
+def search
+  @posts = Post.where("title LIKE ?", "%#{params[:query]}%")
+
+  respond_to do |format|
+    format.turbo_stream
+  end
+end
+```
+
+```erb
+<%# posts/search.turbo_stream.erb %>
+<%= turbo_stream.update "_posts_search" do %>
+  <% @posts.each do |post| %>
+    <%= link_to post.title, post_path(post), class: "block p-2 hover:bg-muted" %>
+  <% end %>
+<% end %>
+```
+
+Options:
+- `url` (required): The URL to fetch search results from
+- `turbo_frame`: Custom turbo frame name (defaults to underscored URL, e.g., `/posts/search` becomes `_posts_search`)
+- `placeholder`: Custom placeholder text (defaults to "Type a command or search...")
+
+### Country Select Component
+
+Use `basecoat_country_select_tag` for a country picker with flag emojis:
+
+```erb
+<%# Basic usage (all countries): %>
+<%= basecoat_country_select_tag :country %>
+
+<%# With pre-selected country: %>
+<%= basecoat_country_select_tag :country, selected: "US" %>
+
+<%# With priority countries at the top: %>
+<%= basecoat_country_select_tag :country, priority: ["US", "CA", "GB"] %>
+
+<%# Only show specific countries: %>
+<%= basecoat_country_select_tag :country, countries: ["US", "CA", "MX"] %>
+
+<%# Exclude specific countries: %>
+<%= basecoat_country_select_tag :country, except: ["KP", "IR"] %>
+
+<%# In a form: %>
+<%= form_for @user do |f| %>
+  <%= f.label :country %>
+  <%= f.basecoat_country_select :country %>
+<% end %>
+```
+
+Options:
+- `selected`: Pre-select a country by its ISO 3166-1 alpha-2 code (e.g., "US")
+- `priority`: Array of country codes to show at the top of the list
+- `countries`: Array of country codes to include (shows only these countries)
+- `except`: Array of country codes to exclude
+- All `basecoat_select_tag` options (placeholder, scrollable, etc.)
+
+**Note:** This helper requires the `countries` gem.
+
 ## Rake tasks
 
 ### Layout (required)
@@ -55,7 +193,7 @@ The scaffold templates are automatically available from the gem, so you can imme
 
 Install the Basecoat-styled authentication views (for Rails built-in authentication):
     
-    rails generate:authentication
+    rails generate authentication
     rails db:migrate
     rake basecoat:install:authentication
 
@@ -86,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/form_builder.rb

@@ -0,0 +1,22 @@
+module Basecoat
+  module FormBuilder
+    def basecoat_select(method, choices, options = {}, html_options = {})
+      value = @object.public_send(method) if @object
+      options = options.merge(selected: value) if value
+
+      name = "#{@object_name}[#{method}]"
+      options[:group_label] ||= method.to_s.titleize.pluralize
+
+      @template.basecoat_select_tag(name, choices, options)
+    end
+
+    def basecoat_country_select(method, options = {})
+      value = @object.public_send(method) if @object
+      options = options.merge(selected: value) if value
+
+      name = "#{@object_name}[#{method}]"
+
+      @template.basecoat_country_select_tag(name, options)
+    end
+  end
+end

data/lib/basecoat/form_helper.rb

@@ -0,0 +1,239 @@
+module Basecoat
+  module FormHelper
+    ##
+    # Renders a remote search component with Turbo Stream support.
+    #
+    # ==== Parameters
+    # * +url+ - The URL to fetch search results from (required)
+    # * +options+ - Hash of optional parameters:
+    #   * +:turbo_frame+ - Custom turbo frame name (defaults to underscored URL)
+    #   * +:placeholder+ - Custom placeholder text (defaults to "Type a command or search...")
+    #   * +:data_empty+ - Message shown when no results found (defaults to "No results found.")
+    #   * +:classes+ - Additional CSS classes to apply to the component
+    #
+    # ==== Examples
+    #   <%= basecoat_remote_search_tag("/posts/search") %>
+    #   <%= basecoat_remote_search_tag("/posts/search", turbo_frame: "custom_frame") %>
+    #   <%= basecoat_remote_search_tag("/posts/search", placeholder: "Search posts...", classes: "rounded-lg border shadow-md") %>
+    def basecoat_remote_search_tag(url, options = {})
+      turbo_frame = options[:turbo_frame] || url.gsub("/", "_")
+      placeholder = options[:placeholder] || "Type a command or search..."
+      data_empty = options[:data_empty] || "No results found."
+      classes = options[:classes] || ""
+      search_id = "search-#{SecureRandom.random_number(1000000)}"
+
+      content_tag(:div, id: search_id, data: { controller: "search", search_url_value: url }, class: "command #{classes}", "aria-label": "Command menu") do
+        content_tag(:header) do
+          lucide_icon("search").html_safe +
+          tag(:input,
+            type: "search",
+            id: "#{search_id}-input",
+            placeholder: placeholder,
+            autocomplete: "off",
+            autocorrect: "off",
+            spellcheck: "false",
+            "aria-autocomplete": "list",
+            role: "combobox",
+            "aria-expanded": "true",
+            "aria-controls": "#{search_id}-menu",
+            data: {
+              search_target: "input",
+              action: "input->search#search"
+            }
+          )
+        end +
+        content_tag(:div, role: "menu", id: "#{search_id}-menu", "aria-orientation": "vertical", data: { empty: data_empty }, class: "scrollbar") do
+          turbo_frame_tag(turbo_frame)
+        end
+      end
+    end
+
+    ##
+    # Renders a select component outside of a form context.
+    #
+    # ==== Parameters
+    # * +name+ - The name attribute for the hidden input field (required)
+    # * +choices+ - Array of [label, value] pairs for select options (required)
+    # * +options+ - Hash of optional parameters:
+    #   * +:selected+ - The initially selected value (defaults to first choice)
+    #   * +:group_label+ - Label for the option group (defaults to titleized and pluralized name)
+    #   * +:placeholder+ - Placeholder text for the search input (defaults to "Search entries...")
+    #   * +:url+ - URL for remote search via Turbo Stream
+    #   * +:turbo_frame+ - Custom turbo frame name when using +:url+ (defaults to underscored URL)
+    #   * +:scrollable+ - Whether to make the listbox scrollable with max height (defaults to false)
+    #
+    # ==== Examples
+    #   <%= basecoat_select_tag "fruit", [["Apple", 1], ["Pear", 2]] %>
+    #   <%= basecoat_select_tag "fruit", [["Apple", 1], ["Pear", 2]], selected: 2, placeholder: "Search fruits..." %>
+    #   <%= basecoat_select_tag "fruit", [], url: "/fruits/search", turbo_frame: "custom_frame", scrollable: true %>
+    def basecoat_select_tag(name, choices, options = {})
+      select_id = "select-#{SecureRandom.random_number(1000000)}"
+      url = options[:url]
+
+      if url || choices.empty?
+        selected_value = options[:selected]
+        selected_label = options[:selected_label] || "Select..."
+      else
+        selected_value = options[:selected] || choices.first[1]
+        selected_choice = choices.find { |label, val| val.to_s == selected_value.to_s }
+        selected_label = selected_choice ? selected_choice[0] : choices.first[0]
+      end
+
+      group_label = options[:group_label] || name.to_s.titleize.pluralize
+      placeholder = options[:placeholder] || "Search entries..."
+      scrollable = options[:scrollable] || false
+      turbo_frame = options[:turbo_frame] || (url ? url.gsub("/", "_") : nil)
+
+      select_attrs = { id: select_id, class: "select" }
+      if url
+        select_attrs[:data] = {
+          controller: "search",
+          search_url_value: url
+        }
+      end
+
+      content_tag(:div, select_attrs) do
+        basecoat_select_button(select_id, selected_label) +
+        basecoat_select_popover(select_id, choices, group_label, placeholder, selected_value, url, scrollable, turbo_frame) +
+        tag(:input, type: "hidden", name: name, value: selected_value)
+      end
+    end
+
+    ##
+    # Renders a country select component with flag emojis.
+    #
+    # ==== Parameters
+    # * +name+ - The name attribute for the hidden input field (required)
+    # * +options+ - Hash of optional parameters:
+    #   * +:selected+ - The initially selected country code (e.g., "US")
+    #   * +:countries+ - Array of country codes to include (defaults to all countries)
+    #   * +:priority+ - Array of priority country codes to show at the top
+    #   * +:except+ - Array of country codes to exclude
+    #   * All other basecoat_select_tag options (placeholder, scrollable, etc.)
+    #
+    # ==== Examples
+    #   <%= basecoat_country_select_tag :country %>
+    #   <%= basecoat_country_select_tag :country, selected: "US" %>
+    #   <%= basecoat_country_select_tag :country, priority: ["US", "CA", "GB"] %>
+    #   <%= basecoat_country_select_tag :country, countries: ["US", "CA", "MX"] %>
+    def basecoat_country_select_tag(name, options = {})
+      require 'countries'
+
+      # Extract country-specific options
+      country_codes = options.delete(:countries)
+      priority_codes = options.delete(:priority) || []
+      except_codes = options.delete(:except) || []
+
+      # Get all countries or filtered list
+      all_countries = if country_codes
+        country_codes.map { |code| ISO3166::Country[code] }.compact
+      else
+        ISO3166::Country.all
+      end
+
+      # Remove excluded countries
+      all_countries.reject! { |country| except_codes.include?(country.alpha2) } if except_codes.any?
+
+      # Build choices with flag emoji
+      choices = all_countries.map do |country|
+        ["#{country.emoji_flag} #{country.iso_short_name}", country.alpha2]
+      end
+
+      # Sort alphabetically by country name
+      choices.sort_by! { |label, _| label }
+
+      # Add priority countries at the top
+      if priority_codes.any?
+        priority_choices = priority_codes.map do |code|
+          country = ISO3166::Country[code]
+          next unless country
+          ["#{country.emoji_flag} #{country.iso_short_name}", country.alpha2]
+        end.compact
+
+        choices.reject! { |_, code| priority_codes.include?(code) }
+        choices = priority_choices + [["---", nil]] + choices
+      end
+
+      # Update selected_label if a country is selected
+      if options[:selected]
+        country = ISO3166::Country[options[:selected]]
+        options[:selected_label] = "#{country.emoji_flag} #{country.iso_short_name}" if country
+      end
+
+      # Set defaults
+      options[:placeholder] ||= "Search countries..."
+      options[:group_label] ||= "Countries"
+      options[:scrollable] = true unless options.key?(:scrollable)
+
+      basecoat_select_tag(name, choices, options)
+
+    rescue LoadError
+      content_tag :div, class: "alert-destructive" do
+        lucide_icon("circle-alert") + tag.section("gem 'countries' required")
+      end
+    end
+
+    private
+
+    def basecoat_select_button(select_id, selected_label)
+      content_tag(:button, type: "button", class: "btn-outline justify-between font-normal w-[180px]", id: "#{select_id}-trigger", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "#{select_id}-listbox") do
+        content_tag(:span, selected_label, class: "truncate") +
+        lucide_icon("chevrons-up-down", class: "text-muted-foreground opacity-50 shrink-0").html_safe
+      end
+    end
+
+    def basecoat_select_popover(select_id, choices, group_label, placeholder, selected_value, url, scrollable, turbo_frame)
+      content_tag(:div, id: "#{select_id}-popover", data: { popover: true }, "aria-hidden": "true") do
+        basecoat_select_search_header(select_id, placeholder) +
+        basecoat_select_listbox(select_id, choices, group_label, selected_value, url, scrollable, turbo_frame)
+      end
+    end
+
+    def basecoat_select_search_header(select_id, placeholder)
+      content_tag(:header) do
+        lucide_icon("search").html_safe +
+        tag(:input, type: "text", value: "", placeholder: placeholder, autocomplete: "off", autocorrect: "off", spellcheck: "false", "aria-autocomplete": "list", role: "combobox", "aria-expanded": "false", "aria-controls": "#{select_id}-listbox", "aria-labelledby": "#{select_id}-trigger", data: { search_target: "input", action: "input->search#search" })
+      end
+    end
+
+    def basecoat_select_listbox(select_id, choices, group_label, selected_value, url, scrollable, turbo_frame)
+      listbox_attrs = {
+        role: "listbox",
+        id: "#{select_id}-listbox",
+        "aria-orientation": "vertical",
+        "aria-labelledby": "#{select_id}-trigger"
+      }
+
+      listbox_attrs[:class] = "scrollbar overflow-y-auto max-h-64" if scrollable
+
+      if url
+        listbox_attrs[:data] = {
+          controller: "search",
+          search_url_value: url
+        }
+      end
+
+      content_tag(:div, listbox_attrs) do
+        if url
+          turbo_frame_tag(turbo_frame)
+        else
+          content_tag(:div, role: "group", "aria-labelledby": "group-label-#{select_id}-items-1") do
+            content_tag(:div, group_label, role: "heading", id: "group-label-#{select_id}-items-1") +
+            choices.map.with_index do |(label, value), index|
+              basecoat_select_option(select_id, label, value, index + 1, value.to_s == selected_value.to_s)
+            end.join.html_safe
+          end
+        end
+      end
+    end
+
+    def basecoat_select_option(select_id, label, value, index, selected)
+      content_tag(:div, label,
+        id: "#{select_id}-items-1-#{index}",
+        role: "option",
+        "data-value": value,
+        "aria-selected": selected
+      )
+    end
+  end
+end

data/lib/basecoat/railtie.rb

@@ -7,5 +7,12 @@ module Basecoat
     config.app_generators do |g|
       g.templates.unshift File.expand_path("../templates", __dir__)
     end
+
+    initializer "basecoat.form_builder" do
+      ActiveSupport.on_load(:action_view) do
+        ActionView::Helpers::FormBuilder.include Basecoat::FormBuilder
+        ActionView::Base.include Basecoat::FormHelper
+      end
+    end
   end
 end

data/lib/basecoat/version.rb

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

data/lib/basecoat.rb

@@ -2,6 +2,14 @@
 
 require_relative "basecoat/version"
 require_relative "basecoat/railtie" if defined?(Rails)
+require_relative "basecoat/form_builder" if defined?(Rails)
+require_relative "basecoat/form_helper" if defined?(Rails)
+
+begin
+  require "lucide-rails"
+rescue LoadError
+  # lucide-rails is optional but recommended
+end
 
 module Basecoat
   class Error < StandardError; end

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

@@ -1,8 +1,6 @@
 <% if resource.errors.any? %>
   <div class="alert-destructive max-w-2xl mx-auto" data-turbo-cache="false">
-    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-    </svg>
+    <%= lucide_icon "circle-x", class: "w-5 h-5" %>
     <h2><%= pluralize(resource.errors.count, "error") %> prohibited this <%= resource.class.model_name.human.downcase %> from being saved</h2>
     <section>
       <ul>

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/_alert.html.erb

@@ -1,6 +1,4 @@
 <div class="alert-destructive max-w-2xl mx-auto" data-turbo-cache="false">
-  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-  </svg>
+  <%= lucide_icon "circle-x", class: "w-5 h-5" %>
   <h2><%= alert %></h2>
 </div>

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.3</span>
+          <span class="truncate text-xs">v0.3.10</span>
         </div>
       </a>
     </header>

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

@@ -1,7 +1,5 @@
 <div class="alert-destructive max-w-2xl mx-auto">
-  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-  </svg>
+  <%= lucide_icon "circle-x", class: "w-5 h-5" %>
   <h2><%= pluralize(object.errors.count, "error") %> prohibited this object from being saved</h2>
   <section>
     <ul>

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,7 +1,7 @@
-<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">
-      <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>
+      <%= lucide_icon "panel-left" %>
     </button>
     <%= render "layouts/theme_toggle" %>
     <!-- AUTHENTICATION_DROPDOWN -->

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

@@ -1,10 +1,7 @@
 <div id="toaster" class="toaster">
   <div class="toast" role="status" aria-atomic="true" aria-hidden="false" data-category="success">
    <div class="toast-content">
-     <svg aria-hidden="true" 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="10" />
-       <path d="m9 12 2 2 4-4" />
-     </svg>
+     <%= lucide_icon "circle-check" %>
 
      <section>
        <h2><%= notice %></h2>

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">
-  <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 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/scaffold_hook.rb

@@ -14,11 +14,7 @@ begin
       link_html = <<~HTML
             <li>
               <%= link_to #{plural_table_name}_path, data: { turbo_frame: "main_content", turbo_action: "advance" } do %>
-                <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="m7 11 2-2-2-2" />
-                  <path d="M11 13h4" />
-                  <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-                </svg>
+                <%= lucide_icon "square-terminal" %>
                 <span>#{human_name.pluralize}</span>
               <% end %>
             </li>

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

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input"]
+  static values = {
+    url: String
+  }
+
+  search(event) {
+    const query = event.target.value
+    const url = `${this.urlValue}?query=${encodeURIComponent(query)}`
+
+    fetch(url, {
+      headers: {
+        Accept: "text/vnd.turbo-stream.html"
+      }
+    })
+      .then(response => response.text())
+      .then(html => Turbo.renderStreamMessage(html))
+  }
+}

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/generators/basecoat/templates/shared/_empty.html.erb

@@ -1,7 +1,7 @@
 <div class="flex mt-10 flex-1 flex-col items-center justify-center gap-6">
   <header class="flex max-w-sm flex-col items-center gap-2 text-center">
     <div class="mb-2 bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg">
-      <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="M10 10.5 8 13l2 2.5" /><path d="m14 10.5 2 2.5-2 2.5" /><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z" /></svg>
+      <%= lucide_icon "folder-code" %>
     </div>
     <h3 class="text-lg font-medium tracking-tight">No <%= resource_name %> yet</h3>
     <p class="text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4">

data/lib/tasks/basecoat.rake

@@ -21,12 +21,13 @@ namespace :basecoat do
 
   desc "Install Basecoat application layout and partials"
   task :install do
+    no_package_manager = false
     overwrite_all = { value: false }
     # Install basecoat-css (detect package manager)
     puts "\n📦 Installing basecoat-css..."
 
     # Detect package manager
-    if File.exist?(Rails.root.join("bun.lockb"))
+    if File.exist?(Rails.root.join("bun.lock"))
       system("bun add basecoat-css")
       puts "  Installed: basecoat-css via bun"
     elsif File.exist?(Rails.root.join("yarn.lock"))
@@ -39,9 +40,8 @@ namespace :basecoat do
       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"
+      no_package_manager = true
+      puts "  No package manager detected! We'll insert CDN links into _head.html.erb..."
     end
 
     # If using importmap, also add to importmap.rb for JS
@@ -51,17 +51,10 @@ 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.3/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
-
-      unless importmap_content.include?("basecoat-helper")
-        File.open(importmap_path, "a") do |f|
-          f.puts "pin \"basecoat-helper\""
-        end
-        puts "  Added: basecoat-helper to config/importmap.rb"
-      end
     end
 
     # Add JavaScript imports and code
@@ -96,16 +89,16 @@ 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")
+      # 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")
 
-      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"
+      FileUtils.mkdir_p(File.dirname(search_controller_destination))
+      if prompt_overwrite(search_controller_destination, overwrite_all)
+        FileUtils.cp(search_controller_source, search_controller_destination)
+        puts "  Created: app/javascript/controllers/search_controller.js"
       else
-        puts "  Skipped: app/javascript/controllers/theme_controller.js"
+        puts "  Skipped: app/javascript/controllers/search_controller.js"
       end
     end
 
@@ -135,25 +128,25 @@ namespace :basecoat do
       css_content = File.read(css_path)
 
       css_code = <<~CSS
-dl {
-    font-size: var(--text-sm);
-    dt {
-        font-weight: var(--font-weight-bold);
-        margin-top: calc(var(--spacing)*4);
-    }
-}
-
-label:has(+ input:required):after {
-    content: " *"
-}
-
-input:user-invalid, .field_with_errors input {
-    border-color: var(--color-destructive);
-}
-
-label:has(+ input:user-invalid), .field_with_errors label {
-    color: var(--color-destructive);
-}
+        dl {
+            font-size: var(--text-sm);
+            dt {
+                font-weight: var(--font-weight-bold);
+                margin-top: calc(var(--spacing)*4);
+            }
+        }
+
+        label:has(+ input:required):after {
+            content: " *"
+        }
+
+        input:user-invalid, .field_with_errors input {
+            border-color: var(--color-destructive);
+        }
+
+        label:has(+ input:user-invalid), .field_with_errors label {
+            color: var(--color-destructive);
+        }
       CSS
       File.open(css_path, "a") { |f| f.write(css_code) }
       puts "  Added: basic styles to #{css_path.relative_path_from(Rails.root)}"
@@ -237,6 +230,21 @@ label:has(+ input:user-invalid), .field_with_errors label {
       end
     end
 
+    if no_package_manager
+      head_path = Rails.root.join("app/views/layouts/_head.html.erb")
+      if File.exist?(head_path)
+        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.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)
+          puts "  Added: CDN link to app/views/layouts/_head.html.erb"
+        end
+      end
+    end
+
     # Copy scaffold hook initializer
     initializer_source = File.expand_path("../generators/basecoat/templates/scaffold_hook.rb", __dir__)
     initializer_destination = Rails.root.join("config/initializers/scaffold_hook.rb")
@@ -296,23 +304,23 @@ label:has(+ input:user-invalid), .field_with_errors label {
         unless header_content.include?("dropdown-user")
           user_dropdown = <<~HTML
 
-                <% if defined?(user_signed_in?) && user_signed_in? %>
-                  <div id="dropdown-user" class="dropdown-menu">
-                    <button type="button" id="dropdown-user-trigger" aria-haspopup="menu" aria-controls="dropdown-user-menu" aria-expanded="false" class="btn-ghost size-8">
-                      <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" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
-                    </button>
-                    <div id="dropdown-user-popover" data-popover="" aria-hidden="true" data-align="end">
-                      <div role="menu" id="dropdown-user-menu" aria-labelledby="dropdown-user-trigger">
-                        <div class="px-1 py-1.5">
-                          <%= button_to destroy_user_session_path, method: :delete, class: "btn-link" do %>
-                            <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="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                            Log out
-                          <% end %>
-                        </div>
-                      </div>
+            <% if defined?(user_signed_in?) && user_signed_in? %>
+              <div id="dropdown-user" class="dropdown-menu">
+                <button type="button" id="dropdown-user-trigger" aria-haspopup="menu" aria-controls="dropdown-user-menu" aria-expanded="false" class="btn-ghost size-8">
+                  <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" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
+                </button>
+                <div id="dropdown-user-popover" data-popover="" aria-hidden="true" data-align="end">
+                  <div role="menu" id="dropdown-user-menu" aria-labelledby="dropdown-user-trigger">
+                    <div class="px-1 py-1.5">
+                      <%= button_to destroy_user_session_path, method: :delete, class: "btn-link" do %>
+                        <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="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                        Log out
+                      <% end %>
                     </div>
                   </div>
-                <% end %>
+                </div>
+              </div>
+            <% end %>
           HTML
           updated_content = header_content.sub("<!-- AUTHENTICATION_DROPDOWN -->", user_dropdown)
           File.write(header_path, updated_content)
@@ -437,23 +445,23 @@ label:has(+ input:user-invalid), .field_with_errors label {
         unless header_content.include?("dropdown-user")
           user_dropdown = <<~HTML
 
-                <% if defined?(Current) && defined?(Current.user) && Current.user %>
-                  <div id="dropdown-user" class="dropdown-menu">
-                    <button type="button" id="dropdown-user-trigger" aria-haspopup="menu" aria-controls="dropdown-user-menu" aria-expanded="false" class="btn-ghost size-8">
-                      <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" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
-                    </button>
-                    <div id="dropdown-user-popover" data-popover="" aria-hidden="true" data-align="end">
-                      <div role="menu" id="dropdown-user-menu" aria-labelledby="dropdown-user-trigger">
-                        <div class="px-1 py-1.5">
-                          <%= button_to session_path, method: :delete, class: "btn-link" do %>
-                            <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="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
-                            Log out
-                          <% end %>
-                        </div>
-                      </div>
+            <% if defined?(Current) && defined?(Current.user) && Current.user %>
+              <div id="dropdown-user" class="dropdown-menu">
+                <button type="button" id="dropdown-user-trigger" aria-haspopup="menu" aria-controls="dropdown-user-menu" aria-expanded="false" class="btn-ghost size-8">
+                  <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" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
+                </button>
+                <div id="dropdown-user-popover" data-popover="" aria-hidden="true" data-align="end">
+                  <div role="menu" id="dropdown-user-menu" aria-labelledby="dropdown-user-trigger">
+                    <div class="px-1 py-1.5">
+                      <%= button_to session_path, method: :delete, class: "btn-link" do %>
+                        <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="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                        Log out
+                      <% end %>
                     </div>
                   </div>
-                <% end %>
+                </div>
+              </div>
+            <% end %>
           HTML
           updated_content = header_content.sub("<!-- AUTHENTICATION_DROPDOWN -->", user_dropdown)
           File.write(header_path, updated_content)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: basecoat
 version: !ruby/object:Gem::Version
-  version: 2.2.1
+  version: 2.3.0
 platform: ruby
 authors:
 - Martijn Lafeber
@@ -23,6 +23,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: lucide-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
 description: Provides beautiful, production-ready scaffold templates and Devise views
   styled with Basecoat CSS framework
 email:
@@ -43,6 +57,8 @@ files:
 - basecoat-login.png
 - basecoat-new.png
 - lib/basecoat.rb
+- lib/basecoat/form_builder.rb
+- lib/basecoat/form_helper.rb
 - lib/basecoat/railtie.rb
 - lib/basecoat/version.rb
 - lib/generators/basecoat/templates/application.html.erb
@@ -72,10 +88,10 @@ files:
 - 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/search_controller.js
 - 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 (_) {}
-  }
-}