basecoat 1.0.0 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f0e95f47da5d59b6f37459c13aa840918f77d977be37d999b0d69601914a925
-  data.tar.gz: e7e669105ff2d246223535996c94c7c103417462af0aeb59ae31ca993090f705
+  metadata.gz: 3273d016589877e63365f54753ec24490331270a14f2870024cf2c17e643d432
+  data.tar.gz: 48df591a8457651c29693b4a7430973146ca90b805307d99517da7525fdb9741
 SHA512:
-  metadata.gz: 696dda706000f74e18239770381dc9899940f5713d84d5040306a4adccd1e89cdf47f6de18425826ce76934babc259af87769f4bac266f16c9eb7348304a3e48
-  data.tar.gz: e8d9137fabcb2fcaf3d12809190ca5bb7c1e8f65ddd1144e1cbdff23adf06dce14d702fbc8a55ba6a5c931fa63e87c66a69c2c431da9f09f3d11c3464cf5c944
+  metadata.gz: 38950b35cb6a9e208f26876d42333ee6c48f08b2feb04f87af01696092b3ba414bf0a350ad55068ee93d42412e6cebc866c59cf5fe4428bc829a28159863187a
+  data.tar.gz: 5578532de781f2fc679a7742d407f0982eaa58f649b5d896b6bce361e19351173673bf889c1eef78790643d3a5ef2bb01f69d2e6fbd4bf5a6d0367502cd4cf7e

data/README.md

@@ -1,26 +1,29 @@
-# All of the shadcn/ui styling, all of the Rails power, no React
+# Basecoat (shadcn) powered views for Rails
 
-This gem provides you with amazing frontend based on [Basecoat CSS](https://basecoatui.com). 
-It is especially powerful for admin applications with a lot of CRUD actions. 
+This gem provides you with amazing layouts, scaffolds, views and partials based on [Basecoat UI](https://basecoatui.com).
+It is especially powerful for admin applications with a lot of CRUD actions.
 
-Experience beautiful Rails scaffolds, pages for authentication and Devise, and pagy styling. 
-All responsive, all dark & light mode. See all the features below.
+Beautiful responsive, dark & light mode Rails scaffolds, pages for authentication and Devise, and pagy styling.
+
+Login:
+![Basecoat Login](basecoat-login.png)
+Index:
+![Basecoat Index](basecoat-index.png)
+Form, mobile dark mode:
+![Basecoat Dark Form](basecoat-dark-form.png)
 
 ## Why?
 
-There is a new default component library for the web; it's called shadcn. 
-As a developer you are standing on the shoulders of a giant with every component they provide. 
-However... in many (most?) applications you don't need complicated components - 
-e.g. an input field can just be a html tag, not a separate component with its own shadow DOM. 
+Shadcn has quickly become the default ui for the web. However, sometimes we don't _really_ need all the React components.
+Especially with backend applications - where Rails shines as full stack solution.
 
-This is where basecoat-css comes in.
+This is where basecoat-ui comes in. The reason why I love basecoat is because it combines tailwind with clean css classes (like daisy-ui). 
 
-You can still include complicated shadcn React components if you need them, 
-but most of your application is just the simple rails views, leveraging the power of Rails.
+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.
 
 ## Installation
 
-Add this line to your application's Gemfile:
+Add this line to your application's Gemfile in the development group:
 
 ```ruby
 gem 'basecoat'
@@ -45,22 +48,7 @@ Install the Basecoat application layout and partials:
 ```bash
 rake basecoat:install
 ```
-
-This will:
-- Install `basecoat-css` via yarn/npm (if package.json exists) or importmap
-- Add basecoat-css import to `app/javascript/application.js`
-- Add view transition JavaScript for turbo frames
-- Add dark mode toggle functionality
-- Add view transition CSS animations and form validation styles
-- Copy application layout to `app/views/layouts/application.html.erb`
-- Copy layout partials (`_head.html.erb`, `_header.html.erb`, `_aside.html.erb`, `_notice.html.erb`, `_alert.html.erb`, `_form_errors.html.erb`)
-- Copy scaffold hook initializer to `config/initializers/scaffold_hook.rb`
-
-The scaffold templates are automatically available from the gem, so you can immediately generate scaffolds:
-
-```bash
-rails generate scaffold Post title:string body:text published:boolean
-```
+NB: This could overwrite exising files!
 
 The generated views will include:
 *  Basecoat CSS styling
@@ -72,43 +60,20 @@ The generated views will include:
 *  Boolean fields styled as switches
 *  Automatic sidebar navigation links
 
-### Install Devise Views
-
-Install the Basecoat-styled Devise views and layout:
+The scaffold templates are automatically available from the gem, so you can immediately generate scaffolds:
 
 ```bash
-rake basecoat:install:devise
+rails generate scaffold Post title:string body:text published:boolean
 ```
 
-This will copy:
-- All Devise views to `app/views/devise/`
-- Devise layout to `app/views/layouts/devise.html.erb`
-
-The Devise views include:
--  Beautiful login/signup forms
-*  Two-column layout with image placeholder
-*  Dark mode toggle
-*  Responsive design
-*  Password reset flows
-*  Email confirmation views
-
-### Install Pagy Pagination Styles
+### Install Devise Views
 
-Install the Basecoat-styled Pagy pagination:
+Install the Basecoat-styled Devise views and layout:
 
 ```bash
-rake basecoat:install:pagy
+rake basecoat:install:devise
 ```
-
-This will copy:
-- Pagy styles to `app/assets/stylesheets/pagy.scss`
-
-The Pagy styles include:
-
-*  Basecoat CSS button styling using `@apply`
-*  Proper spacing and layout
-*  Active page highlighting
-*  Disabled state styling
+NB: This will overwrite exising files!
 
 ### Install Authentication Views
 
@@ -117,78 +82,42 @@ Install the Basecoat-styled authentication views (for Rails built-in authenticat
 ```bash
 rake basecoat:install:authentication
 ```
+NB: This will overwrite exising files!
 
-This will copy:
-- Sessions views to `app/views/sessions/`
-- Passwords views to `app/views/passwords/`
-- Sessions layout to `app/views/layouts/sessions.html.erb`
-- Adds `layout "sessions"` to `app/controllers/passwords_controller.rb`
-
-The authentication views include:
-
-*  Beautiful sign in form
-*  Password reset flows
-*  Two-column layout with image placeholder
-*  Dark mode toggle
-*  Responsive design
-*  Consistent styling with Devise views
-
-## Features
-
-### Application Layout
-
-- **Sidebar Navigation**: Collapsible sidebar with automatic active state detection
-- **Header**: User dropdown with sign out functionality
-- **Alerts & Notices**: Beautiful toast notifications for flash messages
-- **Form Errors**: Consistent error message styling
-- **Dark Mode**: Built-in theme toggle
-
-### Scaffold Templates
-
-- **Modern UI**: Clean, professional design using Basecoat CSS
-- **Turbo Frames**: SPA-like navigation without full page reloads
-- **View Transitions**: Smooth slide animations between pages
-- **Smart Forms**: Automatic required field detection based on database schema
-- **Auto Sidebar Links**: New scaffolds automatically add navigation links to sidebar
-- **Dark Mode**: Built-in dark mode support
-- **Responsive**: Mobile-first responsive design
+### Install Pagy Pagination Styles
 
-### Devise Views
+Install the Basecoat-styled Pagy pagination:
 
-- **Professional Design**: Matches modern authentication UI patterns
-- **Two-Column Layout**: Image placeholder with form on desktop
-- **Complete Views**: All Devise views including confirmations, passwords, registrations
-- **Dark Mode**: Toggle between light and dark themes
-- **Accessible**: ARIA labels and semantic HTML
+```bash
+rake basecoat:install:pagy
+```
 
 ## Requirements
 
 - Rails 8.0+
 - 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
-
-The gem uses Rails' template resolution system to provide scaffold templates automatically. When you run `rails generate scaffold`, Rails will use the templates from the Basecoat gem instead of the default ones.
-
-The application layout and partials are copied to your application so you can customize them as needed.
-
 ## Discussion
 
-I tried not to be too opinionated with my scaffolds - they're very close to the original ones. With the exception of 
-using a turbo frame main_content. I love this too much not to include it.
-
-However, I have my doubts with the index page reusing the show partial. Especially in admin applications you might want 
-to have a (responsive) table in the index.
+The scaffolds are more opinionated than the default - it includes a main turbo frame. 
+I also strongly feel that the index should not reuse the partial used in show - it defeats the purpose of the show page.
+A responsive table was the best I could come up with - closer to the OG scaffolds before Hotwire.
 
-Also, the arguably ugliest part of the views are the svg tags which contains the lovely lucide icons. 
+Also, the (arguably) most messy part of the views are the svg tags which contain the lovely lucide icons. 
 Since these icons are the default for shadcn I'm considering including https://github.com/heyvito/lucide-rails to clean up the views. 
 
+## Issues
+
+* The javascript included by basecoat needs some improvement. It's not automatically initialized on turbo:load - included is a hack that I hope is temporary.
+* We include extra css for the definition list. Hopefully this will be part of basecoat-css someday.
+* Rails adds class="field_with_errors", so we need extra css for this. I hope Rails will at some point have aria-invalid="true" on the input, basecoat will apply the correct styling.
+* Can the views even be prettier? Probably! I'm more than happy to discuss improvements:
+
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub.
+Bug reports and pull requests are more than welcome on GitHub!
 
 ## License
 

data/lib/basecoat/version.rb

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

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

@@ -4,6 +4,6 @@
       <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>
     <%= render "layouts/theme_toggle" %>
-    <!-- DEVISE_USER_DROPDOWN -->
+    <!-- AUTHENTICATION_DROPDOWN -->
   </div>
 </header>

data/lib/tasks/basecoat.rake

@@ -236,7 +236,7 @@ namespace :basecoat do
                   </div>
                 <% end %>
           HTML
-          updated_content = header_content.sub("<!-- DEVISE_USER_DROPDOWN -->", user_dropdown)
+          updated_content = header_content.sub("<!-- AUTHENTICATION_DROPDOWN -->", user_dropdown)
           File.write(header_path, updated_content)
           puts "  Added: User dropdown to app/views/layouts/_header.html.erb"
         end
@@ -317,6 +317,37 @@ namespace :basecoat do
         end
       end
 
+      # Add user dropdown to header partial
+      header_path = Rails.root.join("app/views/layouts/_header.html.erb")
+      if File.exist?(header_path)
+        header_content = File.read(header_path)
+        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-icon-ghost rounded-full size-8">
+                      <img alt="<%= Current.user.email_address %>" src="https://github.com/lafeber.png" class="size-8 shrink-0 rounded-full">
+                    </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>
+                    </div>
+                  </div>
+                <% end %>
+          HTML
+          updated_content = header_content.sub("<!-- AUTHENTICATION_DROPDOWN -->", user_dropdown)
+          File.write(header_path, updated_content)
+          puts "  Added: User dropdown to app/views/layouts/_header.html.erb"
+        end
+      end
+
       puts "\n✓ Basecoat authentication views installed successfully!"
       puts "  Make sure you have Rails authentication configured in your application."
     end

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

@@ -8,20 +8,20 @@
   <div class="overflow-x-auto" id="<%= plural_table_name %>">
     <table class="table">
       <thead>
-        <tr class="bg-background hover:bg-muted">
+        <tr class="hover:bg-background">
 <% attributes.reject(&:password_digest?).each do |attribute| -%>
           <th>
             <%= attribute.human_name %>
           </th>
 <% end -%>
-          <th class="sticky right-0">
+          <th class="bg-background sticky right-0">
             Actions
           </th>
         </tr>
       </thead>
       <tbody>
         <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
-          <tr>
+          <tr class="hover:bg-background">
 <% attributes.reject(&:password_digest?).each do |attribute| -%>
             <td>
 <% if attribute.attachment? -%>
@@ -35,7 +35,7 @@
 <% end -%>
             </td>
 <% end -%>
-            <td class="sticky right-0">
+            <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>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: basecoat
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.1
 platform: ruby
 authors:
 - Martijn Lafeber
@@ -40,6 +40,9 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- basecoat-dark-form.png
+- basecoat-index.png
+- basecoat-login.png
 - lib/basecoat.rb
 - lib/basecoat/railtie.rb
 - lib/basecoat/version.rb