From 673fcbcf38e17aa4774b47c167dbb54e1bfd93a2 Mon Sep 17 00:00:00 2001
From: stephann <3025661+stephannv@users.noreply.github.com>
Date: Tue, 25 Mar 2025 10:33:05 -0300
Subject: [PATCH] Prepare generator for jsbundling + Tailwind V4

---
 lib/generators/ruby_ui/component_generator.rb | 21 -----
 .../ruby_ui/install/install_generator.rb      | 32 +++-----
 .../templates/application.tailwind.css.erb    | 77 -----------------
 .../tailwind.config.js.js-package.erb         | 77 -----------------
 .../tailwind.config.js.tailwindcss-rails.erb  | 82 -------------------
 .../{application.css.erb => tailwind.css.erb} | 17 ++--
 lib/generators/ruby_ui/javascript_utils.rb    | 21 +++++
 7 files changed, 41 insertions(+), 286 deletions(-)
 delete mode 100644 lib/generators/ruby_ui/install/templates/application.tailwind.css.erb
 delete mode 100644 lib/generators/ruby_ui/install/templates/tailwind.config.js.js-package.erb
 delete mode 100644 lib/generators/ruby_ui/install/templates/tailwind.config.js.tailwindcss-rails.erb
 rename lib/generators/ruby_ui/install/templates/{application.css.erb => tailwind.css.erb} (93%)

diff --git a/lib/generators/ruby_ui/component_generator.rb b/lib/generators/ruby_ui/component_generator.rb
index 487844bd..24e88b15 100644
--- a/lib/generators/ruby_ui/component_generator.rb
+++ b/lib/generators/ruby_ui/component_generator.rb
@@ -99,27 +99,6 @@ def install_js_packages(js_packages)
         end
       end
 
-      def pin_motion
-        say <<~TEXT
-          WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
-        TEXT
-
-        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
-          pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm"\n
-        RUBY
-      end
-
-      def pin_tippy_js
-        say <<~TEXT
-          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
-        TEXT
-
-        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
-          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
-          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
-        RUBY
-      end
-
       def dependencies
         @dependencies ||= YAML.load_file(File.join(__dir__, "dependencies.yml")).freeze
 
diff --git a/lib/generators/ruby_ui/install/install_generator.rb b/lib/generators/ruby_ui/install/install_generator.rb
index f8ffd620..12f8ea4c 100644
--- a/lib/generators/ruby_ui/install/install_generator.rb
+++ b/lib/generators/ruby_ui/install/install_generator.rb
@@ -14,17 +14,12 @@ def install_phlex_rails
         say "Checking for phlex-rails"
 
         if gem_installed?("phlex-rails")
-          if Gem::Specification.find_by_name("phlex-rails").version < "2.0.0.beta2"
-            say "You need to upgrade to phlex-rails 2 to use RubyUI", :red
-            exit
-          else
-            say "phlex-rails is already installed", :green
-          end
+          say "phlex-rails is already installed", :green
         else
           say "Adding phlex-rails to Gemfile"
-          run %(bundle add phlex-rails --github="phlex-ruby/phlex-rails")
+          run %(bundle add phlex-rails)
 
-          say "Running phlex-rails structure"
+          say "Generating phlex-rails structure"
           run "bin/rails generate phlex:install"
         end
       end
@@ -52,31 +47,26 @@ def add_ruby_ui_module_to_components_base
         end
       end
 
-      def add_tailwind_config
-        say "Adding RubyUI config to tailwind config"
+      def add_tailwind_css
+        say "Adding Tailwind css"
 
-        if using_tailwindcss_rails_gem?
-          template "application.css.erb", Rails.root.join("app/assets/tailwind/application.css")
+        css_path = if using_importmap?
+          Rails.root.join("app/assets/tailwind/application.css")
         else
-          template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
+          Rails.root.join("app/assets/stylesheets/application.tailwind.css")
         end
+
+        template "tailwind.css.erb", css_path
       end
 
-      def install_tw_animate_css
+      def install_tailwind_plugins
         say "Installing tw-animate-css plugin"
-
         install_js_package("tw-animate-css")
-      end
 
-      def install_tailwindcss_forms
         say "Installing @tailwindcss/forms plugin"
-
         install_js_package("@tailwindcss/forms")
-      end
 
-      def install_tailwindcss_typography
         say "Installing @tailwindcss/typography plugin"
-
         install_js_package("@tailwindcss/typography")
       end
 
diff --git a/lib/generators/ruby_ui/install/templates/application.tailwind.css.erb b/lib/generators/ruby_ui/install/templates/application.tailwind.css.erb
deleted file mode 100644
index e1bb6c14..00000000
--- a/lib/generators/ruby_ui/install/templates/application.tailwind.css.erb
+++ /dev/null
@@ -1,77 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-
-    /* ruby_ui especific */
-    --warning: 38 92% 50%;
-    --warning-foreground: 0 0% 100%;
-    --success: 87 100% 37%;
-    --success-foreground: 0 0% 100%;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-
-    /* ruby_ui especific */
-    --warning: 38 92% 50%;
-    --warning-foreground: 0 0% 100%;
-    --success: 84 81% 44%;
-    --success-foreground: 0 0% 100%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-
-    /* docs specific */
-    /* https://css-tricks.com/snippets/css/system-font-stack/ */
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  }
-}
diff --git a/lib/generators/ruby_ui/install/templates/tailwind.config.js.js-package.erb b/lib/generators/ruby_ui/install/templates/tailwind.config.js.js-package.erb
deleted file mode 100644
index fb50dfe8..00000000
--- a/lib/generators/ruby_ui/install/templates/tailwind.config.js.js-package.erb
+++ /dev/null
@@ -1,77 +0,0 @@
-module.exports = {
-  content: [
-    './app/views/**/*.rb', // Phlex views
-    './app/components/**/*.rb', // Phlex components
-    './app/views/**/*.html.erb',
-    './app/helpers/**/*.rb',
-    './app/assets/stylesheets/**/*.css',
-    './app/javascript/**/*.js'
-  ],
-  darkMode: ["class"],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        /* ruby_ui especific */
-        warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))",
-        },
-        success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", 'ui-sans-serif', 'system-ui', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
-      },
-    },
-  },
-  plugins: [
-    require("tailwindcss-animate"),
-  ],
-}
diff --git a/lib/generators/ruby_ui/install/templates/tailwind.config.js.tailwindcss-rails.erb b/lib/generators/ruby_ui/install/templates/tailwind.config.js.tailwindcss-rails.erb
deleted file mode 100644
index 0189af0a..00000000
--- a/lib/generators/ruby_ui/install/templates/tailwind.config.js.tailwindcss-rails.erb
+++ /dev/null
@@ -1,82 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
-module.exports = {
-  content: [
-    './app/views/**/*.rb', // Phlex views
-    './app/components/**/*.rb', // Phlex components
-    './public/*.html',
-    './app/helpers/**/*.rb',
-    './app/javascript/**/*.js',
-    './app/views/**/*.{erb,haml,html,slim}'
-  ],
-  darkMode: ["class"],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        /* ruby_ui especific */
-        warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))",
-        },
-        success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
-      },
-    },
-  },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/container-queries'),
-    require("../vendor/javascript/tailwindcss-animate")
-  ]
-}
diff --git a/lib/generators/ruby_ui/install/templates/application.css.erb b/lib/generators/ruby_ui/install/templates/tailwind.css.erb
similarity index 93%
rename from lib/generators/ruby_ui/install/templates/application.css.erb
rename to lib/generators/ruby_ui/install/templates/tailwind.css.erb
index 10864760..8a94cf9c 100644
--- a/lib/generators/ruby_ui/install/templates/application.css.erb
+++ b/lib/generators/ruby_ui/install/templates/tailwind.css.erb
@@ -1,9 +1,14 @@
 @import "tailwindcss";
-@import "../../../vendor/javascript/tw-animate-css.js";
 
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 
+<% if using_importmap? %>
+@import "../../../vendor/javascript/tw-animate-css.js";
+<% else %>
+@import "tw-animate-css";
+<% end %>
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -131,6 +136,8 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ruby_ui specific */
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
   --color-success: var(--success);
@@ -139,15 +146,9 @@
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
-
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-
-    /* docs specific */
-    /* https://css-tricks.com/snippets/css/system-font-stack/ */
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   }
 }
diff --git a/lib/generators/ruby_ui/javascript_utils.rb b/lib/generators/ruby_ui/javascript_utils.rb
index 89b10183..be70aaf0 100644
--- a/lib/generators/ruby_ui/javascript_utils.rb
+++ b/lib/generators/ruby_ui/javascript_utils.rb
@@ -31,6 +31,27 @@ def using_importmap?
       def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
 
       def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
+
+      def pin_motion
+        say <<~TEXT
+          WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
+        TEXT
+
+        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+          pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm"\n
+        RUBY
+      end
+
+      def pin_tippy_js
+        say <<~TEXT
+          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
+        TEXT
+
+        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
+          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
+        RUBY
+      end
     end
   end
 end