basecoat 1.0.1 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 17085310ec6fbb84cd7e779e04cf55362947f1cf440c7d92d5762d2e5759bf6c
-  data.tar.gz: 8370e2d4f4237d2f8d59ca917ca21edcacbec77cf45a4ee9acbfdc841a4bdff1
+  metadata.gz: 30c46abb1310bf79995534b1fcd52074a67f327d42ea93a933065b46b02d8563
+  data.tar.gz: 509ac587a90f7be78362d5d92d0506de9528dc3e773d0c20b7bdfa2050eedc30
 SHA512:
-  metadata.gz: 5e8baf2623834233d0dfeb1dc08939ca7ab3f0e0994ff2a0401b7b40f0e05ec948c072d8eb840c1afd20b3b1073b55240106bebf663dadb17e31e98733c56165
-  data.tar.gz: bd091f59684a2d9e5370b46e2f7bce65c0cc8e3d658c9153adc2d671ce6380c786577fb46fd1e83711d4b68afd840ae5668b194b37e09b6d9d9487d150033295
+  metadata.gz: f01fd3115a85191fb41f999662adfda41666f022d54f53e46242987ba5b61fc4459322f41d48f238b1dc2537573a161b2514baf8faee83762fff80e2e7faa11d
+  data.tar.gz: c58e1ced83b1ad2b8083e0cbc7481476fe06ba8abe26cc95280f4047d1c0174596b129dcfcaf5f1bfa9b5d77c27689649dfb6334743251a6bf9c42607b1c5651

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.1"
+  VERSION = "2.0.0"
 end

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

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

@@ -0,0 +1,16 @@
+<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>
+    </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">
+      Get started by creating your first <%= resource_name.singularize %>.
+    </p>
+  </header>
+  <section class="flex w-full max-w-sm flex-col items-center gap-4 text-sm text-balance">
+    <div class="flex gap-2">
+      <%= link_to "New #{resource_name.singularize}", new_path, class: "btn", data: { turbo_action: "advance" } %>
+    </div>
+  </section>
+</div>

data/lib/tasks/basecoat.rake

@@ -32,7 +32,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.2/dist/js/all.js\""
+          f.puts "\npin \"basecoat-css/all\", to: \"https://cdn.jsdelivr.net/npm/basecoat-css@0.3.3/dist/js/all.js\""
         end
         puts "  Added: basecoat-css to config/importmap.rb"
       end
@@ -58,16 +58,10 @@ namespace :basecoat do
         puts "  Added: basecoat-css import to app/javascript/application.js"
       end
 
-      # Add basecoat helper JavaScript directly to application.js
+      # Add cool view transition to application.js
       js_content = File.read(js_path)
       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) {
@@ -80,7 +74,7 @@ namespace :basecoat do
           })
         JS
         File.open(js_path, "a") { |f| f.write(basecoat_js) }
-        puts "  Added: Basecoat helper JavaScript to app/javascript/application.js"
+        puts "  Added: cool view transition to app/javascript/application.js"
       end
 
       # Copy theme_controller.js
@@ -179,6 +173,17 @@ namespace :basecoat do
       puts "  Created: app/views/layouts/#{filename}"
     end
 
+    # Copy shared partials
+    shared_source = File.expand_path("../generators/basecoat/templates/shared", __dir__)
+    shared_destination = Rails.root.join("app/views/shared")
+
+    FileUtils.mkdir_p(shared_destination)
+    Dir.glob("#{shared_source}/*").each do |file|
+      filename = File.basename(file)
+      FileUtils.cp(file, shared_destination.join(filename))
+      puts "  Created: app/views/shared/#{filename}"
+    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")
@@ -236,7 +241,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 +322,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/_form.html.erb.tt

@@ -1,15 +1,15 @@
-<%%= form_with(model: <%= model_resource_name %>, class: "space-y-6") do |form| %>
+<%%= form_with(model: <%= model_resource_name %>, class: "space-y-4") do |form| %>
   <%%= render "/layouts/form_errors", object: <%= singular_table_name %> if <%= singular_table_name %>.errors.any? %>
 
 <% attributes.each do |attribute| -%>
 <% required = attribute.to_s.include?('{null}') -%>
-  <div class="grid gap-3">
+  <div class="field">
 <% if attribute.password_digest? -%>
     <%%= form.label :password, class: "label" %>
     <%%= form.password_field :password, class: "input", required: true %>
   </div>
 
-  <div class="grid gap-3">
+  <div class="field">
     <%%= form.label :password_confirmation, class: "label" %>
     <%%= form.password_field :password_confirmation, class: "input", required: true %>
 <% elsif attribute.attachments? -%>

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

@@ -45,15 +45,6 @@
   </div>
 
   <%% if @<%= plural_table_name %>.empty? %>
-    <div class="text-center py-12">
-      <div class="mb-4">
-        <svg class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13h2m13-8V4a1 1 0 00-1-1H7a1 1 0 00-1 1v1h10z" />
-        </svg>
-      </div>
-      <h3 class="text-lg font-medium mb-2">No <%= human_name.pluralize.downcase %> yet</h3>
-      <p class="mb-6">Get started by creating your first <%= human_name.downcase %>.</p>
-      <%%= link_to "New <%= human_name.downcase %>", <%= new_helper(type: :path) %>, class: "btn", data: { turbo_action: "advance" } %>
-    </div>
+    <%%= render "shared/empty", resource_name: "<%= human_name.pluralize.downcase %>", new_path: <%= new_helper(type: :path) %> %>
   <%% end %>
 <%% end %>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: basecoat
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 2.0.0
 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
@@ -72,6 +75,7 @@ files:
 - 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/shared/_empty.html.erb
 - lib/generators/basecoat/templates/theme_controller.js
 - lib/tasks/basecoat.rake
 - lib/templates/erb/scaffold/_form.html.erb.tt