kaze 0.2.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa07032d843778439756cd1f5440d066f46e368ca699aadd2c96559721e9456d
-  data.tar.gz: e9a408babe88ac76f5d524b8ed4e35213eb2407a0135c422dfd1c0ee29ae5438
+  metadata.gz: c2c180c5d3390cc6b2013e98ce172091691001be25971dfc2f2f28fe7022eaf1
+  data.tar.gz: ddc60156cf90ab2827ea0907e0f7d68e6bc4c760963ad271809b80132b0a7884
 SHA512:
-  metadata.gz: 5e6ca9927646f4aaca149938b413af65d8257f65a0883fe5dff23512f10829e77c865ba08295edca37c8293273443aaf75e60c2cab375fb1fdf5b766c5dcc105
-  data.tar.gz: 8824870ef8846a2c370cf64c06def95cb657032482dcd56521e63483c895175fa921c9658efb49dbde2f23770cbd8b58be3fa34fc279c924dc0bc2d57e0aad8b
+  metadata.gz: 7a47cce2a4bd167ac9f57ac2c367794f61f7354e3400619112abd2482d59a1341ccbe1bbd6881f61104404f4b7a87c59600fe1889abbd5577ab8f12d22308ef6
+  data.tar.gz: 0f885b972c32e66757b2412481b8cce0aacc03fd7512bebbc41e007bc4e715afec41afc36c946fe05e462a5c26256cfbe47955ce61e66508df9467be82ddab77

data/README.md

@@ -4,7 +4,7 @@ Heavily inspired by [Laravel Breeze](https://github.com/laravel/breeze), this ge
 
 [Kaze](https://github.com/gtkvn/kaze) is a minimal, simple implementation of all of Rails's authentication features, including login, registration, password reset. In addition, Kaze includes a simple "profile" page where the user may update their name, email address, and password.
 
-Kaze provides scaffolding options based on Inertia, with the choice of using Vue or React for the Inertia-based scaffolding.
+Kaze provides scaffolding options based on [Hotwire](https://hotwired.dev) or [Inertia](https://inertiajs.com), with the choice of using Vue or React for the Inertia-based scaffolding.
 
 ## Installation
 
@@ -18,11 +18,30 @@ gem install kaze
 
 Once Kaze is installed, you may scaffold your application using one of the Kaze "stacks" discussed in the documentation below.
 
+## Kaze & Hotwire
+
+The default Kaze "stack" is the Hotwire stack. Hotwire is a powerful way to building dynamic, reactive, front-end UIs primarily using Ruby and ERB templates without using much JavaScript by sending HTML instead of JSON over the wire.
+
+The Hotwire stack may be installed by invoking the `install` command with no other additional arguments inside your app directory.
+
+```
+kaze install
+```
+
+After Kaze's scaffolding is installed, you may start your application:
+
+```
+bin/setup
+bin/dev
+```
+
+Next, you may navigate to your application's `/login` or `/register` URLs in your web browser.
+
 ## Kaze & React / Vue
 
 Kaze offers React and Vue scaffolding via an Inertia frontend implementation. Inertia allows you to build modern, single-page React and Vue applications using classic server-side routing and controllers.
 
-Inertia lets you enjoy the frontend power of React and Vue combined with the incredible backend productivity of Rails and lightning-fast Vite compilation. To use an Inertia stack, specify vue or react as your desired stack when executing the install command inside your app directory:
+Inertia lets you enjoy the frontend power of React and Vue combined with the incredible backend productivity of Rails and lightning-fast Vite compilation. To use an Inertia stack, specify `react` or `vue` as your desired stack when executing the `install` command inside your app directory:
 
 ```
 kaze install react

data/lib/kaze/commands/install_command.rb

@@ -4,10 +4,15 @@ require "open3"
 require "thor"
 
 class Kaze::Commands::InstallCommand < Thor
-  include Kaze::Commands::InstallInertiaStacks
+  include Kaze::Commands::InstallsHotwireStack
+  include Kaze::Commands::InstallsInertiaStacks
 
-  desc "install [STACK]", "Install the Kaze controllers and resources. Supported stacks: react, vue."
+  desc "install [STACK]", "Install the Kaze controllers and resources. Supported stacks: hotwire, react, vue."
   def install(stack = "hotwire")
+    if stack == "hotwire"
+      return install_hotwire_stack
+    end
+
     if stack == "react"
       return install_inertia_react_stack
     end
@@ -16,19 +21,31 @@ class Kaze::Commands::InstallCommand < Thor
       return install_inertia_vue_stack
     end
 
-    say "Invalid stack. Supported stacks are [react], [vue].", :red
+    say "Invalid stack. Supported stacks are [hotwire], [react], [vue].", :red
   end
 
   private
 
-  def require_gems(gems = [])
+  def install_gems(gems = [], group = nil)
+    installed_gems = Bundler::Definition.build("#{Dir.pwd}/Gemfile", nil, {}).dependencies.map(&:name)
+
+    gem_being_installed = gems.map { |gem| gem unless installed_gems.include?(gem) }.compact
+
+    return true if gem_being_installed.empty?
+
+    status = run_command("bundle add #{gem_being_installed.join(" ")}#{group ? " --group \"#{group}\"" : ""}")
+
+    status.success?
+  end
+
+  def remove_gems(gems = [])
     installed_gems = Bundler::Definition.build("#{Dir.pwd}/Gemfile", nil, {}).dependencies.map(&:name)
 
-    installing_gems = gems.map { |gem| gem unless installed_gems.include?(gem) }.compact
+    gems_being_removed = gems.map { |gem| gem if installed_gems.include?(gem) }.compact
 
-    return true if installing_gems.empty?
+    return true if gems_being_removed.empty?
 
-    status = run_command("bundle add #{installing_gems.join(" ")}")
+    status = run_command("bundle remove #{gems_being_removed.join(" ")}")
 
     status.success?
   end

data/lib/kaze/commands/installs_hotwire_stack.rb

@@ -0,0 +1,62 @@
+module Kaze::Commands::InstallsHotwireStack
+  private
+
+  def install_hotwire_stack
+    # Gems...
+    return unless remove_gems([ "sprockets-rails" ])
+    return unless install_gems([ "propshaft", "view_component", "tailwindcss-rails", "turbo-rails", "dotenv", "bcrypt" ])
+    return unless install_gems([ "hotwire-livereload" ], "development")
+
+    # Controllers...
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/hotwire/app/controllers", "#{Dir.pwd}/app/controllers")
+
+    # Models...
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/models", "#{Dir.pwd}/app/models")
+
+    # Forms...
+    ensure_directory_exists("#{Dir.pwd}/app/forms")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/forms", "#{Dir.pwd}/app/forms")
+
+    # Validators...
+    ensure_directory_exists("#{Dir.pwd}/app/validators")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/validators", "#{Dir.pwd}/app/validators")
+
+    # Mailers...
+    ensure_directory_exists("#{Dir.pwd}/app/mailers")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/mailers", "#{Dir.pwd}/app/mailers")
+
+    # Views...
+    ensure_directory_exists("#{Dir.pwd}/app/views/layouts")
+    ensure_directory_exists("#{Dir.pwd}/app/views/user_mailer")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/hotwire/app/views", "#{Dir.pwd}/app/views")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/views/layouts/mailer.html.erb", "#{Dir.pwd}/app/views/layouts/mailer.html.erb")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/views/layouts/mailer.text.erb", "#{Dir.pwd}/app/views/layouts/mailer.text.erb")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/views/user_mailer/reset_password.html.erb", "#{Dir.pwd}/app/views/user_mailer/reset_password.html.erb")
+
+    # Components + Pages...
+    ensure_directory_exists("#{Dir.pwd}/app/components")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/hotwire/app/components", "#{Dir.pwd}/app/components")
+    ensure_directory_exists("#{Dir.pwd}/app/javascript")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/hotwire/app/javascript", "#{Dir.pwd}/app/javascript")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/hotwire/config/importmap.rb", "#{Dir.pwd}/config/importmap.rb")
+
+    # Tests...
+
+    # Routes...
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/config/routes.rb", "#{Dir.pwd}/config/routes.rb")
+
+    # Migrations...
+    install_migrations
+
+    # Tailwind...
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/assets/stylesheets/application.css", "#{Dir.pwd}/app/assets/stylesheets/application.css")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/assets/stylesheets/application.tailwind.css", "#{Dir.pwd}/app/assets/stylesheets/application.tailwind.css")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/hotwire/config/tailwind.config.js", "#{Dir.pwd}/config/tailwind.config.js")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/bin/dev", "#{Dir.pwd}/bin/dev")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/hotwire/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
+    run_command("rails tailwindcss:build")
+
+    say ""
+    say "Kaze scaffolding installed successfully.", :green
+  end
+end

data/lib/kaze/commands/{install_inertia_stacks.rb → installs_inertia_stacks.rb}

@@ -1,15 +1,16 @@
-module Kaze::Commands::InstallInertiaStacks
+module Kaze::Commands::InstallsInertiaStacks
   private
 
   def install_inertia_react_stack
-    # Install Inertia...
-    return unless require_gems([ "propshaft", "tailwindcss-rails", "inertia_rails", "vite_rails", "dotenv", "bcrypt", "js-routes" ])
+    # Gems...
+    return unless remove_gems([ "sprockets-rails" ])
+    return unless install_gems([ "propshaft", "tailwindcss-rails", "inertia_rails", "vite_rails", "dotenv", "bcrypt", "js-routes" ])
 
     # NPM Packages...
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-react-ts/package.json", "#{Dir.pwd}/package.json")
 
     # Controllers...
-    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/controllers", "#{Dir.pwd}/app/controllers")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/inertia-common/app/controllers", "#{Dir.pwd}/app/controllers")
 
     # Models...
     FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/models", "#{Dir.pwd}/app/models")
@@ -22,6 +23,10 @@ module Kaze::Commands::InstallInertiaStacks
     ensure_directory_exists("#{Dir.pwd}/app/validators")
     FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/validators", "#{Dir.pwd}/app/validators")
 
+    # Mailers...
+    ensure_directory_exists("#{Dir.pwd}/app/mailers")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/mailers", "#{Dir.pwd}/app/mailers")
+
     # Views...
     ensure_directory_exists("#{Dir.pwd}/app/views/layouts")
     ensure_directory_exists("#{Dir.pwd}/app/views/user_mailer")
@@ -30,10 +35,6 @@ module Kaze::Commands::InstallInertiaStacks
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/views/layouts/mailer.text.erb", "#{Dir.pwd}/app/views/layouts/mailer.text.erb")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/views/user_mailer/reset_password.html.erb", "#{Dir.pwd}/app/views/user_mailer/reset_password.html.erb")
 
-    # Mailers...
-    ensure_directory_exists("#{Dir.pwd}/app/mailers")
-    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/mailers", "#{Dir.pwd}/app/mailers")
-
     # Components + Pages...
     ensure_directory_exists("#{Dir.pwd}/app/javascript")
     FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/inertia-react-ts/app/javascript", "#{Dir.pwd}/app/javascript")
@@ -50,12 +51,12 @@ module Kaze::Commands::InstallInertiaStacks
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/assets/stylesheets/application.css", "#{Dir.pwd}/app/assets/stylesheets/application.css")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/assets/stylesheets/application.tailwind.css", "#{Dir.pwd}/app/assets/stylesheets/application.tailwind.css")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-react-ts/config/tailwind.config.js", "#{Dir.pwd}/config/tailwind.config.js")
-    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/config/vite.json", "#{Dir.pwd}/config/vite.json")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-common/config/vite.json", "#{Dir.pwd}/config/vite.json")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-react-ts/tsconfig.json", "#{Dir.pwd}/tsconfig.json")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-react-ts/vite.config.ts", "#{Dir.pwd}/vite.config.ts")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/bin/dev", "#{Dir.pwd}/bin/dev")
-    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/bin/vite", "#{Dir.pwd}/bin/vite")
-    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-common/bin/vite", "#{Dir.pwd}/bin/vite")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-common/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
     run_command("rails generate js_routes:middleware")
 
     say ""
@@ -76,14 +77,15 @@ module Kaze::Commands::InstallInertiaStacks
   end
 
   def install_inertia_vue_stack
-    # Install Inertia...
-    return unless require_gems([ "propshaft", "tailwindcss-rails", "inertia_rails", "vite_rails", "dotenv", "bcrypt", "js-routes" ])
+    # Gems...
+    return unless remove_gems([ "sprockets-rails" ])
+    return unless install_gems([ "propshaft", "tailwindcss-rails", "inertia_rails", "vite_rails", "dotenv", "bcrypt", "js-routes" ])
 
     # NPM Packages...
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-vue-ts/package.json", "#{Dir.pwd}/package.json")
 
     # Controllers...
-    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/controllers", "#{Dir.pwd}/app/controllers")
+    FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/inertia-common/app/controllers", "#{Dir.pwd}/app/controllers")
 
     # Models...
     FileUtils.copy_entry("#{File.dirname(__FILE__)}/../../../stubs/default/app/models", "#{Dir.pwd}/app/models")
@@ -124,12 +126,12 @@ module Kaze::Commands::InstallInertiaStacks
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/assets/stylesheets/application.css", "#{Dir.pwd}/app/assets/stylesheets/application.css")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/app/assets/stylesheets/application.tailwind.css", "#{Dir.pwd}/app/assets/stylesheets/application.tailwind.css")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-vue-ts/config/tailwind.config.js", "#{Dir.pwd}/config/tailwind.config.js")
-    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/config/vite.json", "#{Dir.pwd}/config/vite.json")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-common/config/vite.json", "#{Dir.pwd}/config/vite.json")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-vue-ts/tsconfig.json", "#{Dir.pwd}/tsconfig.json")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-vue-ts/vite.config.ts", "#{Dir.pwd}/vite.config.ts")
     FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/bin/dev", "#{Dir.pwd}/bin/dev")
-    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/bin/vite", "#{Dir.pwd}/bin/vite")
-    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/default/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-common/bin/vite", "#{Dir.pwd}/bin/vite")
+    FileUtils.copy_file("#{File.dirname(__FILE__)}/../../../stubs/inertia-common/Procfile.dev", "#{Dir.pwd}/Procfile.dev")
     run_command("rails generate js_routes:middleware")
 
     say ""

data/lib/kaze/version.rb

@@ -1,3 +1,3 @@
 module Kaze
-  VERSION = "0.2.0"
+  VERSION = "0.4.0"
 end

data/stubs/default/app/validators/lowercase_validator.rb

@@ -1,5 +1,6 @@
 class LowercaseValidator < ActiveModel::EachValidator
   def validate_each(record, attribute, value)
+    value = "" if value.nil?
     record.errors.add attribute, (options[:message] || "must be lowercase") unless value == value.downcase
   end
 end

data/stubs/default/app/views/layouts/mailer.html.erb

@@ -340,13 +340,15 @@ img {
 <%= yield %>
 
 <!-- Subcopy -->
+<% if content_for?(:subcopy) %>
 <table class="subcopy" width="100%" cellpadding="0" cellspacing="0" role="presentation">
 <tr>
 <td>
-<%= yield(:subcopy) %>
+<%= yield :subcopy %>
 </td>
 </tr>
 </table>
+<% end %>
 
 </td>
 </tr>

data/stubs/default/app/views/layouts/mailer.text.erb

@@ -5,7 +5,9 @@
 <%= yield %>
 
 <!-- Subcopy -->
-<%= yield(:subcopy) %>
+<% if content_for?(:subcopy) %>
+<%= yield :subcopy %>
+<% end %>
 
 <!-- Footer -->
 © <%= Time.new.year %> <%= ENV.fetch("APP_NAME", "Rails") %>. All rights reserved.

data/stubs/default/config/routes.rb

@@ -17,7 +17,7 @@ Rails.application.routes.draw do
 
   post "logout", to: "auth/authenticated_session#destroy", as: :logout
 
-  get "dashboard", to: "dashboard#show", as: :dashboard
+  get "dashboard", to: "dashboard#index", as: :dashboard
 
   get "profile", to: "profile#edit", as: :profile_edit
   patch "profile", to: "profile#update", as: :profile_update

data/stubs/hotwire/Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server
+css: bin/rails tailwindcss:watch

data/stubs/hotwire/app/components/application_logo_component.rb

@@ -0,0 +1,14 @@
+class ApplicationLogoComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <svg viewBox="0 -6 32 32" xmlns="http://www.w3.org/2000/svg" <%= sanitize @attributes.join(" ") %>>
+      <g fill="none" fill-rule="evenodd">
+        <path d="M0-6h32v32H0z"/>
+        <path fill="#c00" fill-rule="nonzero" d="M.985 19.636s.422-4.163 3.375-9.087c2.954-4.924 7.99-8.65 12.083-9.017 8.144-.816 15.46 6.485 15.46 6.485s-.24.168-.494.38C23.42 2.49 18.54 5.274 17.005 6.02c-7.033 3.925-4.91 13.616-4.91 13.616H.987zM24.137 2.32c-.45-.182-.9-.35-1.364-.505l.056-.93c.885.254 1.237.423 1.363.493l-.056.943zM22.8 5.304c.45.028.915.084 1.393.183l-.056.872c-.464-.1-.928-.155-1.392-.17l.056-.885zM17.597.913c-.407 0-.815.015-1.223.058l-.268-.83c.465-.056.915-.084 1.35-.084l.282.858h-.14zm.676 5.178c.35-.154.76-.31 1.237-.45l.31.93c-.41.125-.817.294-1.225.49l-.323-.97zm-6.386-3.7c-.366.184-.718.395-1.083.62l-.647-.985c.38-.225.745-.42 1.097-.604l.633.97zm2.883 6.33c.252-.323.548-.646.87-.942l.634.957c-.31.323-.59.647-.83 1L14.77 8.72zm-2.04 4.53c.112-.506.24-1.027.422-1.547l1.012.802c-.14.548-.24 1.097-.295 1.645l-1.14-.9zM6.57 6.57c-.34.35-.662.73-.958 1.11L4.53 6.752c.323-.352.674-.704 1.04-1.055l1 .872zm-4.25 6.286c-.224.52-.52 1.21-.702 1.688L0 13.954c.14-.38.436-1.084.703-1.69l1.618.592zm10.2 3.967l1.518.548c.084.663.21 1.28.337 1.83l-1.688-.605c-.07-.422-.14-1.027-.168-1.772z"/>
+      </g>
+    </svg>
+  ERB
+
+  def initialize(attributes = {})
+    @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/components/auth_session_status_component.rb

@@ -0,0 +1,17 @@
+class AuthSessionStatusComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <div <%= sanitize @attributes.join(" ") %>>
+      <%= @status %>
+    </div>
+  ERB
+
+  def initialize(attributes = {})
+    @status = attributes[:status]
+    attributes[:class] = "font-medium text-sm text-green-600 dark:text-green-400#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.without(:status).map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+
+  def render?
+    @status.present?
+  end
+end

data/stubs/hotwire/app/components/danger_button_component.rb

@@ -0,0 +1,13 @@
+class DangerButtonComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <button <%= sanitize @attributes.join(" ") %>>
+      <%= content %>
+    </button>
+  ERB
+
+  def initialize(attributes = {})
+    attributes[:type] = attributes[:type] || "submit"
+    attributes[:class] = "inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/components/dropdown_component.html.erb

@@ -0,0 +1,20 @@
+<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
+    <div @click="open = ! open">
+        <%= trigger %>
+    </div>
+
+    <div x-show="open"
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0 scale-95"
+            x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-95"
+            class="absolute z-50 mt-2 <%= @width %> rounded-md shadow-lg <%= @alignment_classes %>"
+            style="display: none;"
+            @click="open = false">
+        <div class="rounded-md ring-1 ring-black ring-opacity-5 <%= @content_classes %>">
+            <%= content %>
+        </div>
+    </div>
+</div>

data/stubs/hotwire/app/components/dropdown_component.rb

@@ -0,0 +1,15 @@
+class DropdownComponent < ViewComponent::Base
+  renders_one :trigger
+
+  def initialize(align: "right", width: "48", content_classes: "py-1 bg-white dark:bg-gray-700")
+    if align == "left"
+      @alignment_classes = "ltr:origin-top-left rtl:origin-top-right start-0"
+    elsif align == "top"
+      @alignment_classes = "origin-top"
+    else
+      @alignment_classes = "ltr:origin-top-right rtl:origin-top-left end-0"
+    end
+    @width = width == "48" ? "w-48" : width
+    @content_classes = content_classes
+  end
+end

data/stubs/hotwire/app/components/dropdown_link_component.rb

@@ -0,0 +1,12 @@
+class DropdownLinkComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <a <%= sanitize @attributes.join(" ") %>>
+      <%= content %>
+    </a>
+  ERB
+
+  def initialize(attributes = {})
+    attributes[:class] = "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/components/input_error_component.rb

@@ -0,0 +1,18 @@
+class InputErrorComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <div <%= sanitize @attributes.join(" ") %>>
+      <p class="text-sm text-red-600 dark:text-red-400">
+        <%= @message %>
+      </p>
+    </div>
+  ERB
+
+  def initialize(attributes = {})
+    @message = attributes[:message]
+    @attributes = attributes.without(:message).map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+
+  def render?
+    @message.present?
+  end
+end

data/stubs/hotwire/app/components/input_label_component.rb

@@ -0,0 +1,13 @@
+class InputLabelComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <a <%= sanitize @attributes.join(" ") %>>
+      <%= @value ? @value : content %>
+    </a>
+  ERB
+
+  def initialize(attributes = {})
+    @value = attributes[:value] || nil
+    attributes[:class] = "block font-medium text-sm text-gray-700 dark:text-gray-300#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.without(:value).map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/components/modal_component.html.erb

@@ -0,0 +1,62 @@
+<div
+    x-data="{
+        show: <%= @show %>,
+        focusables() {
+            // All focusable element types...
+            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
+            return [...$el.querySelectorAll(selector)]
+                // All non-disabled elements...
+                .filter(el => ! el.hasAttribute('disabled'))
+        },
+        firstFocusable() { return this.focusables()[0] },
+        lastFocusable() { return this.focusables().slice(-1)[0] },
+        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
+        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
+        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
+        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
+    }"
+    x-init="$watch('show', value => {
+        if (value) {
+            document.body.classList.add('overflow-y-hidden');
+            <%= @attributes.has_key?(:focusable) ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' %>
+        } else {
+            document.body.classList.remove('overflow-y-hidden');
+        }
+    })"
+    x-on:open-modal.window="$event.detail == '<%= @name %>' ? show = true : null"
+    x-on:close-modal.window="$event.detail == '<%= @name %>' ? show = false : null"
+    x-on:close.stop="show = false"
+    x-on:keydown.escape.window="show = false"
+    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
+    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
+    x-show="show"
+    class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
+    style="display: <%= @show ? 'block' : 'none' %>;"
+>
+    <div
+        x-show="show"
+        class="fixed inset-0 transform transition-all"
+        x-on:click="show = false"
+        x-transition:enter="ease-out duration-300"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="ease-in duration-200"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+    >
+        <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
+    </div>
+
+    <div
+        x-show="show"
+        class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full <%= @max_width %> sm:mx-auto"
+        x-transition:enter="ease-out duration-300"
+        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+        x-transition:leave="ease-in duration-200"
+        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+    >
+        <%= content %>
+    </div>
+</div>

data/stubs/hotwire/app/components/modal_component.rb

@@ -0,0 +1,14 @@
+class ModalComponent < ViewComponent::Base
+  def initialize(attributes = {})
+    @name = attributes[:name]
+    @show = attributes[:show] || false
+    @max_width = {
+      :sm => "sm:max-w-sm",
+      :md => "sm:max-w-md",
+      :lg => "sm:max-w-lg",
+      :xl => "sm:max-w-xl",
+      "2xl" => "sm:max-w-2xl"
+    }[attributes[:max_width] || "2xl"]
+    @attributes = attributes.without(:name, :show, :max_width)
+  end
+end

data/stubs/hotwire/app/components/nav_link_component.rb

@@ -0,0 +1,15 @@
+class NavLinkComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <a <%= sanitize @attributes.join(" ") %>>
+      <%= content %>
+    </a>
+  ERB
+
+  def initialize(attributes = {})
+    classes = attributes[:active] \
+      ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out' \
+      : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'
+    attributes[:class] = "#{classes}#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.without(:active).map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/components/primary_button_component.rb

@@ -0,0 +1,13 @@
+class PrimaryButtonComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <button <%= sanitize @attributes.join(" ") %>>
+      <%= content %>
+    </button>
+  ERB
+
+  def initialize(attributes = {})
+    attributes[:type] = attributes[:type] || "submit"
+    attributes[:class] = "inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/components/responsive_nav_link_component.rb

@@ -0,0 +1,15 @@
+class ResponsiveNavLinkComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <a <%= sanitize @attributes.join(" ") %>>
+      <%= content %>
+    </a>
+  ERB
+
+  def initialize(attributes = {})
+    classes = attributes[:active] \
+      ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out' \
+      : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'
+    attributes[:class] = "#{classes}#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.without(:active).map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/components/secondary_button_component.rb

@@ -0,0 +1,13 @@
+class SecondaryButtonComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <button <%= sanitize @attributes.join(" ") %>>
+      <%= content %>
+    </button>
+  ERB
+
+  def initialize(attributes = {})
+    attributes[:type] = attributes[:type] || "button"
+    attributes[:class] = "inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/components/text_input_component.rb

@@ -0,0 +1,11 @@
+class TextInputComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <input <%= @disabled ? "disabled" : "" %> <%= sanitize @attributes.join(" ") %>>
+  ERB
+
+  def initialize(attributes = {})
+    @disabled = attributes[:disabled] || false
+    attributes[:class] = "border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm#{" #{attributes[:class]}" if attributes[:class]}"
+    @attributes = attributes.without(:disabled).map { |key, attribute| "#{key}=\"#{attribute}\"" }
+  end
+end

data/stubs/hotwire/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  include Authenticate
+end