From bc0206544a7e84ae24f45a133b605cffe60b529c Mon Sep 17 00:00:00 2001 From: stephann <3025661+stephannv@users.noreply.github.com> Date: Mon, 18 Nov 2024 17:17:48 -0300 Subject: [PATCH] Make generators compatible with importmaps --- lib/generators/ruby_ui/component_generator.rb | 55 +++++++++++-- .../ruby_ui/install/install_generator.rb | 9 ++- ....erb => tailwind.config.js.js-package.erb} | 0 .../tailwind.config.js.tailwindcss-rails.erb | 81 +++++++++++++++++++ 4 files changed, 139 insertions(+), 6 deletions(-) rename lib/generators/ruby_ui/install/templates/{tailwind.config.js.erb => tailwind.config.js.js-package.erb} (100%) create mode 100644 lib/generators/ruby_ui/install/templates/tailwind.config.js.tailwindcss-rails.erb diff --git a/lib/generators/ruby_ui/component_generator.rb b/lib/generators/ruby_ui/component_generator.rb index c8c6c718..b77d5940 100644 --- a/lib/generators/ruby_ui/component_generator.rb +++ b/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 diff --git a/lib/generators/ruby_ui/install/install_generator.rb b/lib/generators/ruby_ui/install/install_generator.rb index 32dbb27f..27d3c775 100644 --- a/lib/generators/ruby_ui/install/install_generator.rb +++ b/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 diff --git a/lib/generators/ruby_ui/install/templates/tailwind.config.js.erb b/lib/generators/ruby_ui/install/templates/tailwind.config.js.js-package.erb similarity index 100% rename from lib/generators/ruby_ui/install/templates/tailwind.config.js.erb rename to lib/generators/ruby_ui/install/templates/tailwind.config.js.js-package.erb 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 new file mode 100644 index 00000000..4ef7d106 --- /dev/null +++ b/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'), + ] +}