Make generators compatible with importmaps

lib/generators/ruby_ui/component_generator.rb

@@ -43,8 +43,11 @@ def copy_js_files
           copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name)
         end
 
-        say "Updating Stimulus controllers manifest"
-        run "rake stimulus:manifest:update"
+        # Importmap doesn't have controller manifest, instead it uses `eagerLoadControllersFrom("controllers", application)`
+        if !using_importmap?
+          say "Updating Stimulus controllers manifest"
+          run "rake stimulus:manifest:update"
+        end
       end
 
       def install_dependencies
@@ -90,20 +93,62 @@ def install_js_packages(js_packages)
       end
 
       def install_js_package(package)
-        if File.exist?(Rails.root.join("package-lock.json"))
-          run "npm install #{package}"
-        elsif File.exist?(Rails.root.join("yarn.lock"))
+        if using_importmap?
+          pin_with_importmap(package)
+        elsif using_yarn?
           run "yarn add #{package}"
+        elsif using_npm?
+          run "npm install #{package}"
         else
           say "Could not detect the package manager, you need to install '#{package}' manually", :red
         end
       end
 
+      def pin_with_importmap(package)
+        case package
+        when "motion"
+          pin_motion
+        when "tippy.js"
+          pin_tippy_js
+        else
+          run "bin/importmap pin #{package}"
+        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
 
         @dependencies[component_folder_name]
       end
+
+      def using_importmap?
+        File.exist?(Rails.root.join("config/importmap.rb")) && File.exist?(Rails.root.join("bin/importmap"))
+      end
+
+      def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
+
+      def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
     end
   end
 end

lib/generators/ruby_ui/install/install_generator.rb

@@ -56,7 +56,14 @@ def add_tailwind_css
 
       def add_tailwind_config
         say "Adding RubyUI config to tailwind config"
-        template "tailwind.config.js.erb", Rails.root.join("tailwind.config.js")
+
+        if File.exist?(Rails.root.join("tailwind.config.js")) # tailwindcss js package
+          template "tailwind.config.js.js-package.erb", Rails.root.join("tailwind.config.js")
+        elsif File.exist?(Rails.root.join("config/tailwind.config.js")) # tailwindcss-rails gem
+          template "tailwind.config.js.tailwindcss-rails.erb", Rails.root.join("config/tailwind.config.js")
+        else
+          say "Cannot find tailwind.config.js. You will need to install tailwind config manually", :red
+        end
       end
 
       def add_ruby_ui_base

lib/generators/ruby_ui/install/templates/tailwind.config.js.tailwindcss-rails.erb

@@ -0,0 +1,81 @@
+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'),
+  ]
+}