Upgrade to tailwind 4

TailwindCSS 4 and its rails integration include some breaking
changes. This adjusts the installation generator to work with that.

Also includes a custom form builder, because tailwind's form plugin is
no longer bundled.

Author: oneiros

README.md

@@ -41,6 +41,10 @@ ask if it should also install the `fasp_data_sharing` engine. This is
 only needed for discovery FASP that want to implement the `data_sharing`
 capability.
 
+It will try to overwrite `app/views/layout/application.html.erb` and
+`app/assets/tailwind/application.css`. Confirm both unless you want to
+start from scratch with you own markup and possibly CSS.
+
 Once all the generators have finished this should leave you with a
 working rails application. Just run `bin/dev` and have a look at
 `http://localhost:3000`.

fasp_base/app/controllers/fasp_base/application_controller.rb

@@ -5,5 +5,7 @@ class ApplicationController < ActionController::Base
     helper Rails.application.helpers
 
     layout "layouts/application"
+
+    default_form_builder FaspBase::FormBuilder
   end
 end

fasp_base/app/form_builder/fasp_base/form_builder.rb

@@ -0,0 +1,25 @@
+module FaspBase
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    INPUT_CLASSES = %w(px-2 py-1 border border-blue-400 text-base)
+
+    def text_field(method, options = {})
+      options[:class] = [options[:class], INPUT_CLASSES].compact.join(" ")
+      super
+    end
+
+    def email_field(method, options = {})
+      options[:class] = [options[:class], INPUT_CLASSES].compact.join(" ")
+      super
+    end
+
+    def password_field(method, options = {})
+      options[:class] = [options[:class], INPUT_CLASSES].compact.join(" ")
+      super
+    end
+
+    def url_field(method, options = {})
+      options[:class] = [options[:class], INPUT_CLASSES].compact.join(" ")
+      super
+    end
+  end
+end

fasp_base/app/helpers/fasp_base/application_helper.rb

@@ -1,11 +1,11 @@
 module FaspBase
   module ApplicationHelper
-    ALERT_CLASSES = "mt-1 mb-2 rounded px-4 py-2 text-gray-600 font-medium"
+    ALERT_CLASSES = "mt-1 mb-2 rounded-sm px-4 py-2 text-gray-600 font-medium"
     ALERT_COLORS = {
       notice: "border-blue-400 bg-blue-50",
       alert: "border-red-400 bg-red-50"
     }.freeze
-    BUTTON_CLASSES = "font-bold rounded px-4 py-2"
+    BUTTON_CLASSES = "font-bold rounded-sm px-4 py-2"
 
     def notification(message, type: :notice)
       tag.div(message, class: "#{ALERT_CLASSES} #{ALERT_COLORS[type]}")
@@ -29,7 +29,7 @@ def button_link_to(*args, **kwargs, &block)
     end
 
     def nav_link_to(*args, **kwargs)
-      link_to(*args, **(kwargs.merge(class: "text-gray-600 font-medium px-2 py-1 rounded hover:bg-blue-200 hover:text-gray-700")))
+      link_to(*args, **(kwargs.merge(class: "text-gray-600 font-medium px-2 py-1 rounded-sm hover:bg-blue-200 hover:text-gray-700")))
     end
 
     def button(type: :button, &block)

fasp_base/app/views/fasp_base/servers/show.html.erb

@@ -6,7 +6,7 @@
 
 <p class="my-2 font-bold"><%=t ".key_fingerprint" %></p>
 
-<code class="block my-2 rounded p-2 font-mono bg-gray-200">
+<code class="block my-2 rounded-sm p-2 font-mono bg-gray-200">
   <%= @server.fasp_public_key_fingerprint %>
 </code>
 

fasp_base/lib/generators/fasp_base/install/install_generator.rb

@@ -11,6 +11,7 @@ def install
     copy_file "initializers/fasp_base.rb", "config/initializers/fasp_base.rb"
     copy_file "config/tailwind.config.js", "config/tailwind.config.js"
     copy_file "layouts/application.html.erb", "app/views/layouts/application.html.erb"
+    copy_file "tailwind/application.css", "app/assets/tailwind/application.css"
 
     inject_into_class "app/controllers/application_controller.rb", "ApplicationController" do
       "  include FaspBase::Authentication\n\n"

fasp_base/lib/generators/fasp_base/install/templates/config/tailwind.config.js

@@ -1,4 +1,3 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
 const execSync = require('child_process').execSync
 
 let content = [
@@ -12,25 +11,12 @@ const gems = ['fasp_base']
 
 gems.forEach((gem) => {
   const gemPath = execSync(`bundle show ${gem}`, { encoding: 'utf-8' }).trim()
+  content.push(`${gemPath}/app/form_builder/**/*.rb`)
   content.push(`${gemPath}/app/helpers/**/*.rb`)
   content.push(`${gemPath}/app/javascript/**/*.js`)
   content.push(`${gemPath}/app/views/**/*.{erb,haml,html,slim}`)
 })
 
-console.log(content)
-
 module.exports = {
-  content: content,
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
-      },
-    },
-  },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/container-queries'),
-  ]
+  content: content
 }

fasp_base/lib/generators/fasp_base/install/templates/layouts/application.html.erb

@@ -13,7 +13,7 @@
     <link rel="icon" href="/icon.png" type="image/png">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/icon.png">
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>

fasp_base/lib/generators/fasp_base/install/templates/tailwind/application.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@config "../../../config/tailwind.config.js";