From 6cf7d9f7943d34aa88ac03adfe059a581fb4bc39 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Fri, 15 Dec 2023 17:18:47 +0100
Subject: [PATCH] Add a script for setting up a local TW build for the admin in
 the host app

---
 admin/docs/customizing_tailwindcss.md         |  49 ++++++++
 .../install/install_generator.rb              |   5 +
 .../lib/solidus_admin/install_tailwindcss.rb  | 105 ++++++++++++++++++
 admin/lib/tasks/tailwind.rake                 |  10 ++
 4 files changed, 169 insertions(+)
 create mode 100644 admin/docs/customizing_tailwindcss.md
 create mode 100644 admin/lib/solidus_admin/install_tailwindcss.rb
 create mode 100644 admin/lib/tasks/tailwind.rake

diff --git a/admin/docs/customizing_tailwindcss.md b/admin/docs/customizing_tailwindcss.md
new file mode 100644
index 00000000000..d4db71b8393
--- /dev/null
+++ b/admin/docs/customizing_tailwindcss.md
@@ -0,0 +1,49 @@
+# Customizing TailwindCSS
+
+Solidus Admin uses [Tailwind CSS](https://tailwindcss.com/) for styling. The
+benefit of using Tailwind is that it allows you to customize the look and feel
+of the admin without having to write any CSS. By leveraging utility classes,
+you can easily change the colors, fonts, and spacing in use.
+
+Solidus Admin provides a precompiled CSS file that includes all the necessary
+Tailwind classes for the admin to work out of the box.
+
+In case you need to customize the admin's look and feel, or create custom
+components, you can do so by running Tailwind's build process in your host
+application.
+
+This process presumes that you have a working knowledge of Tailwind CSS. If you
+are not familiar with Tailwind, please refer to the [Tailwind
+documentation](https://tailwindcss.com/docs) for more information.
+
+## Setting up a local TailwindCSS build for Solidus Admin
+
+In order to customize the admin's look and feel, you'll need to set up a local
+Tailwind build. This is a two-step process:
+
+Add Tailwind configuration files to your application:
+
+```shell
+bin/rails solidus_admin:tailwindcss:install
+```
+
+This will create all the necessary files for you to customize TailwindCSS,
+including:
+- A `config/solidus_admin/tailwind.config.js` configuration file
+  that will automatically import the Solidus Admin's default configuration.
+- An `app/assets/stylesheets/solidus_admin/application.tailwind.css` file
+  in which you can add your own customizations.
+- Tasks to build the CSS file once or watch for changes and automatically
+  rebuild the target `app/assets/builds/solidus_admin/application.css` file.
+
+In order to manually build the CSS file, run:
+
+```shell
+bin/rails solidus_admin:tailwindcss:build
+```
+
+Or, to watch for changes and automatically rebuild the CSS file, run:
+
+```shell
+bin/rails solidus_admin:tailwindcss:watch
+```
diff --git a/admin/lib/generators/solidus_admin/install/install_generator.rb b/admin/lib/generators/solidus_admin/install/install_generator.rb
index b16044a6edf..305ef8eac2e 100644
--- a/admin/lib/generators/solidus_admin/install/install_generator.rb
+++ b/admin/lib/generators/solidus_admin/install/install_generator.rb
@@ -4,6 +4,7 @@ module SolidusAdmin
   module Generators
     class InstallGenerator < Rails::Generators::Base
       class_option :lookbook, type: :boolean, default: !!ENV['SOLIDUS_ADMIN_LOOKBOOK'], desc: 'Install Lookbook for component previews'
+      class_option :tailwind, type: :boolean, default: false, desc: 'Install TailwindCSS for custom components'
 
       source_root "#{__dir__}/templates"
 
@@ -24,6 +25,10 @@ def ignore_tailwind_build_files
         append_file(".gitignore", "app/assets/builds/solidus_admin/") if File.exist?(Rails.root.join(".gitignore"))
       end
 
+      def build_tailwind
+        rake "solidus_admin:tailwindcss:install" if options[:tailwind]
+      end
+
       def install_lookbook
         return unless options[:lookbook]
 
diff --git a/admin/lib/solidus_admin/install_tailwindcss.rb b/admin/lib/solidus_admin/install_tailwindcss.rb
new file mode 100644
index 00000000000..06d5de11231
--- /dev/null
+++ b/admin/lib/solidus_admin/install_tailwindcss.rb
@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+# This file is a Rails app template and should be loaded with `bin/rails `.
+
+config_path = "config/solidus_admin/tailwind.config.js"
+input_path = "app/assets/stylesheets/solidus_admin/application.tailwind.css"
+output_path = "app/assets/builds/solidus_admin/tailwind.css"
+
+unless bundle_command "show tailwindcss-rails"
+  bundle_command "add tailwindcss-rails"
+end
+
+create_file "app/assets/stylesheets/solidus_admin/application.tailwind.css", <<~CSS
+  @import "https://rsms.me/inter/inter.css";
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+CSS
+
+create_file config_path, <<~JS
+  const { execSync } = require('child_process')
+  const adminRoot = execSync('bundle show solidus_admin').toString().trim()
+  const solidusAdmin = require(`${adminRoot}/config/tailwind.config.js`)
+
+  module.exports = {
+    // Read how to use TailwindCSS presets: https://tailwindcss.com/docs/presets.
+    presets: [solidusAdmin],
+
+    content: [
+      // Include paths coming from SolidusAdmin.
+      ...solidusAdmin.content,
+
+      // Include paths to your own components.
+      `${__dirname}/../../app/components/admin/**/*`,
+    ],
+  }
+JS
+
+create_file "lib/tasks/solidus_admin/tailwind.rake", <<~RUBY
+  # frozen_string_literal: true
+
+  namespace :solidus_admin do
+    namespace :tailwindcss do
+      root = Rails.root
+      tailwindcss = Tailwindcss::Commands.executable
+
+      tailwindcss_command = [
+        tailwindcss,
+        "--config", root.join(#{config_path.to_s.inspect}),
+        "--input", root.join(#{input_path.to_s.inspect}),
+        "--output", root.join(#{output_path.to_s.inspect}),
+      ]
+
+      desc 'Build Tailwind CSS'
+      task :build do
+        sh tailwindcss_command.shelljoin
+      end
+
+      desc 'Watch Tailwind CSS'
+      task :watch do
+        sh (tailwindcss_command + ['--watch']).shelljoin
+      end
+    end
+  end
+
+  # Attach Tailwind CSS build to other tasks.
+  %w[
+    assets:precompile
+    test:prepare
+    spec:prepare
+    db:test:prepare
+  ].each do |task_name|
+    next unless Rake::Task.task_defined?(task_name)
+
+    Rake::Task[task_name].enhance(['solidus_admin:tailwindcss:build'])
+  end
+RUBY
+
+append_file ".gitignore", "app/assets/builds/solidus_admin/"
+
+unless Rails.root.join("Procfile.dev").exist?
+  create_file "Procfile.dev", <<~YAML
+    web: bin/rails server
+  YAML
+end
+
+unless Rails.root.join("bin/dev").exist?
+  create_file "bin/dev", <<~SH
+    #!/usr/bin/env sh
+
+    if ! gem list foreman -i --silent; then
+      echo "Installing foreman..."
+      gem install foreman
+    fi
+
+    # Default to port 3000 if not specified
+    export PORT="${PORT:-3000}"
+
+    exec foreman start -f Procfile.dev "$@"
+  SH
+
+  run "chmod +x bin/dev"
+end
+
+append_to_file "Procfile.dev", "admin_css: bin/rails solidus_admin:tailwindcss:watch\n"
diff --git a/admin/lib/tasks/tailwind.rake b/admin/lib/tasks/tailwind.rake
new file mode 100644
index 00000000000..f304a585c9b
--- /dev/null
+++ b/admin/lib/tasks/tailwind.rake
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+namespace :solidus_admin do
+  namespace :tailwindcss do
+    desc 'Install Tailwind CSS on the host application'
+    task :install do
+      system "#{RbConfig.ruby} ./bin/rails app:template LOCATION='#{__dir__}/../solidus_admin/install_tailwindcss.rb'"
+    end
+  end
+end