Pathogen: Demo app and lookbook

bin/dev

@@ -5,4 +5,12 @@ if ! gem list foreman -i --silent; then
   gem install foreman
 fi
 
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+# Let the debug gem allow remote connections,
+# but avoid loading until `debugger` is called
+export RUBY_DEBUG_OPEN="true"
+export RUBY_DEBUG_LAZY="true"
+
 exec foreman start -f Procfile.dev "$@"

embedded_gems/pathogen/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+demo/node_modules
+demo/log
+demo/tmp
+app/assets/builds

embedded_gems/pathogen/Gemfile

@@ -13,4 +13,5 @@ group :development do
   gem 'rubocop-performance'
   gem 'rubocop-rails'
   gem 'rubocop-rails-accessibility', '~> 1.0'
+  gem 'tailwindcss-rails'
 end

embedded_gems/pathogen/Gemfile.lock

@@ -220,6 +220,15 @@ GEM
       rubocop (>= 1.0.0)
     ruby-progressbar (1.13.0)
     stringio (3.1.1)
+    tailwindcss-rails (3.0.0)
+      railties (>= 7.0.0)
+      tailwindcss-ruby
+    tailwindcss-ruby (3.4.15)
+    tailwindcss-ruby (3.4.15-aarch64-linux)
+    tailwindcss-ruby (3.4.15-arm-linux)
+    tailwindcss-ruby (3.4.15-arm64-darwin)
+    tailwindcss-ruby (3.4.15-x86_64-darwin)
+    tailwindcss-ruby (3.4.15-x86_64-linux)
     thor (1.3.2)
     timeout (0.4.1)
     tzinfo (2.0.6)
@@ -251,6 +260,7 @@ DEPENDENCIES
   rubocop-performance
   rubocop-rails
   rubocop-rails-accessibility (~> 1.0)
+  tailwindcss-rails
 
 BUNDLED WITH
    2.5.21

embedded_gems/pathogen/Procfile

@@ -0,0 +1,2 @@
+css: tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/pathogen_view_components.css --watch
+web: cd demo && bin/dev

embedded_gems/pathogen/app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

embedded_gems/pathogen/app/components/pathogen/button.rb

@@ -13,9 +13,61 @@ class Button < Pathogen::Component
     SCHEME_OPTIONS = %i[primary default danger].freeze
     DEFAULT_SCHEME = :default
     # rubocop:disable Layout/LineLength
-    DEFAULT_CLASSES = 'relative pointer select-none transition ease-in-out delay-150 duration-300 rounded-lg font-medium focus:outline-none focus:ring-4 focus:z-10 disabled:opacity-70 disabled:cursor-not-allowed'
+    DEFAULT_CLASSES = 'relative pointer select-none rounded-lg font-medium focus:outline-none focus:ring-4 focus:z-10 disabled:opacity-70 disabled:cursor-not-allowed'
     # rubocop:enable Layout/LineLength
 
+    # CSS classes for different button schemes
+    PRIMARY_SCHEME_CLASSES = [
+      'bg-light-brand-primary',
+      'text-light-onbrand-primary',
+      'border',
+      'border-light-brand-primary',
+      'disabled:hover:bg-light-brand-primary hover:bg-light-brand-primary-hover',
+      'focus:ring-light-brand-primary'
+    ].freeze
+
+    PRIMARY_DARK_SCHEME_CLASSES = [
+      'dark:bg-dark-brand-primary',
+      'dark:text-dark-onbrand-primary',
+      'dark:border-dark-brand-primary',
+      'dark:disabled:hover:bg-dark-brand-primary dark:hover:bg-dark-brand-primary-hover',
+      'dark:focus:ring-dark-brand-primary'
+    ].freeze
+
+    DEFAULT_SCHEME_CLASSES = [
+      'bg-light-neutral-primary',
+      'text-light-onneutral-primary',
+      'border',
+      'border-light-neutral-primary',
+      'disabled:hover:bg-light-neutral-primary hover:bg-light-neutral-primary-hover',
+      'focus:ring-light-neutral-primary'
+    ].freeze
+
+    DEFAULT_DARK_SCHEME_CLASSES = [
+      'dark:bg-dark-neutral-primary',
+      'dark:text-dark-onneutral-primary',
+      'dark:border-dark-neutral-primary',
+      'dark:disabled:hover:bg-dark-neutral-primary dark:hover:bg-dark-neutral-primary-hover',
+      'dark:focus:ring-dark-neutral-primary'
+    ].freeze
+
+    DANGER_SCHEME_CLASSES = [
+      'bg-light-danger-primary',
+      'text-light-ondanger-primary',
+      'border',
+      'border-light-danger-primary',
+      'disabled:hover:bg-light-danger-primary hover:bg-light-danger-primary-hover',
+      'focus:ring-light-danger-primary'
+    ].freeze
+
+    DANGER_DARK_SCHEME_CLASSES = [
+      'dark:bg-dark-danger-primary',
+      'dark:text-dark-ondanger-primary',
+      'dark:border-dark-danger-primary',
+      'dark:disabled:hover:bg-dark-danger-primary dark:hover:bg-dark-danger-primary-hover',
+      'dark:focus:ring-dark-danger-primary'
+    ].freeze
+
     # rubocop:disable Metrics/ParameterLists
     def initialize(base_button_class: Pathogen::BaseButton, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, block: false,
                    disabled: false, **system_arguments)
@@ -72,13 +124,17 @@ def trimmed_content
     # @param scheme [Symbol] The color scheme of the button (:primary, :default, or :danger).
     # @return [String] A string of CSS classes corresponding to the specified scheme.
     def generate_scheme_mapping(scheme)
-      # rubocop:disable Layout/LineLength
-      {
-        primary: 'bg-primary-700 text-white enabled:hover:bg-primary-800 focus:ring-primary-100 dark:focus:ring-primary-600',
-        default: 'text-slate-900 bg-white border border-slate-200 enabled:hover:bg-slate-100 enabled:hover:text-primary-700 focus:ring-4 focus:ring-slate-100 dark:focus:ring-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600 enabled:dark:hover:text-white enabled:dark:hover:bg-slate-700',
-        danger: 'border border-red-100 bg-slate-50 text-red-500 enabled:hover:text-red-50 enabled:dark:hover:text-red-50 enabled:hover:bg-red-800 focus:ring-red-300 dark:border-red-800 dark:bg-slate-900 dark:text-red-500 dark:focus:ring-red-900'
-      }[scheme]
-      # rubocop:enable Layout/LineLength
+      case scheme
+      when :primary
+        (PRIMARY_SCHEME_CLASSES + PRIMARY_DARK_SCHEME_CLASSES).join(' ')
+      when :default
+        (DEFAULT_SCHEME_CLASSES + DEFAULT_DARK_SCHEME_CLASSES).join(' ')
+      when :danger
+        (DANGER_SCHEME_CLASSES + DANGER_DARK_SCHEME_CLASSES).join(' ')
+      else
+        # Default case for other schemes or fallback
+        ''
+      end
     end
   end
 end

embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb

@@ -12,8 +12,8 @@ class TabsPanel < Pathogen::Component
 
     BODY_TAG_DEFAULT = :ul
     BODY_DEFAULT_CLASSES = 'flex flex-wrap text-sm font-medium text-center ' \
-                           'text-slate-500 border-b border-slate-200 ' \
-                           'dark:border-slate-700 dark:text-slate-400'
+                           'text-light-default border-b border-light-neutral-secondary ' \
+                           'dark:border-dark-neutral-primary dark:text-dark-default'
     renders_many :tabs, lambda { |count: nil, selected: false, **system_arguments|
       Pathogen::TabsPanel::Tab.new(
         selected: selected,

embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb

@@ -12,17 +12,9 @@ def initialize(count: nil, selected: false, **system_arguments)
         @system_arguments = system_arguments
 
         @system_arguments[:tag] = TAG_DEFAULT
-        @system_arguments[:classes] = generate_count_classes
-      end
-
-      def generate_count_classes
-        if @selected
-          'bg-slate-300 text-slate-800 text-xs font-medium ms-2 px-2 py-1
-          rounded-full dark:bg-slate-500 dark:text-slate-300'
-        else
-          'bg-slate-100 text-slate-800 text-xs font-medium ms-2 px-2 py-1
-          rounded-full dark:bg-slate-700 dark:text-slate-300'
-        end
+        @system_arguments[:classes] = 'bg-light-neutral-secondary text-light-onneutral-primary text-xs ' \
+                                      'font-medium ms-2 px-2 py-1 rounded-full dark:bg-dark-neutral-secondary ' \
+                                      'dark:text-dark-onneutral-primary'
       end
     end
   end

embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb

@@ -36,6 +36,7 @@ def initialize(controls:, tab_type:, selected: false, text: '', wrapper_argument
         @system_arguments[:'aria-current'] = @selected ? 'page' : 'false'
         @system_arguments[:classes] = generate_tab_classes
         @system_arguments[:'aria-controls'] = @controls
+        @system_arguments[:'aria-selected'] = @selected
       end
       # rubocop:enable Metrics/ParameterLists
 
@@ -51,20 +52,23 @@ def generate_tab_classes
 
       def default_tab_classes
         if @selected
-          'inline-block p-4 text-primary-600 bg-slate-100 rounded-t-lg active dark:bg-slate-800 dark:text-primary-500'
+          'inline-block p-4 text-light-brand-onneutral bg-light-neutral-primary ' \
+            'rounded-t-lg active dark:bg-dark-neutral-primary dark:text-dark-brand-onneutral'
         else
-          'inline-block p-4 rounded-t-lg hover:text-slate-600
-        hover:bg-slate-50 dark:hover:bg-slate-800 dark:hover:text-slate-300'
+          'inline-block p-4 rounded-t-lg hover:text-light-neutral-emphasis ' \
+            'hover:bg-light-default dark:hover:bg-dark-neutral-primary-hover dark:hover:text-dark-onneutral-primary'
         end
       end
 
       def underline_tab_classes
         if @selected
-          'inline-block p-4 text-primary-600 border-b-2 border-primary-600
-          rounded-t-lg active dark:text-primary-500 dark:border-primary-500'
+          'inline-block p-4 text-light-brand-onneutral border-b-2 ' \
+            'border-light-brand-primary rounded-t-lg active ' \
+            'dark:text-dark-brand-onneutral dark:border-dark-brand-primary'
         else
-          'inline-block p-4 border-b-2 border-transparent rounded-t-lg
-          hover:text-slate-600 hover:border-slate-300 dark:hover:text-slate-300'
+          'inline-block p-4 border-b-2 border-transparent rounded-t-lg ' \
+            'hover:text-neutral-emphasis hover:border-light-neutral-primary ' \
+            'dark:hover:text-dark-neutral-onneutral dark:hover:border-dark-neutral-primary'
         end
       end
     end

embedded_gems/pathogen/bin/dev

@@ -0,0 +1,57 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+# Colors for output
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Help text
+show_help() {
+    cat << EOF
+Usage: ./dev [options]
+
+Starts the development environment using foreman.
+
+Options:
+    -h, --help     Show this help message
+    -v, --version  Show foreman version
+EOF
+}
+
+# Check if running from correct directory
+if [ ! -f "Procfile" ]; then
+    echo -e "${RED}Error: Procfile not found in current directory${NC}"
+    exit 1
+fi
+
+# Parse arguments
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        -h|--help) show_help; exit 0 ;;
+        -v|--version) foreman --version; exit 0 ;;
+        *) break ;;
+    esac
+    shift
+done
+
+# Check for minimum foreman version
+MIN_FOREMAN_VERSION="0.87.2"
+install_or_upgrade_foreman() {
+    echo -e "${GREEN}Installing/upgrading foreman...${NC}"
+    gem install foreman -v ">= $MIN_FOREMAN_VERSION"
+}
+
+if ! command -v foreman >/dev/null 2>&1; then
+    install_or_upgrade_foreman
+else
+    CURRENT_VERSION=$(foreman --version | cut -d' ' -f2)
+    if [ "$(printf '%s\n' "$MIN_FOREMAN_VERSION" "$CURRENT_VERSION" | sort -V | head -n1)" = "$MIN_FOREMAN_VERSION" ]; then
+        install_or_upgrade_foreman
+    fi
+fi
+
+# Run foreman with Procfile
+echo -e "${GREEN}Starting development environment...${NC}"
+exec foreman start -f Procfile "$@"

embedded_gems/pathogen/bin/setup

@@ -0,0 +1,53 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "fileutils"
+
+class Setup
+  COLORS = {
+    green: "\e[32m",
+    red: "\e[31m",
+    reset: "\e[0m"
+  }.freeze
+
+  def initialize
+    @step = 1
+  end
+
+  def system!(*args)
+    system(*args) || abort("#{COLORS[:red]}\n== Command #{args} failed ==#{COLORS[:reset]}")
+  end
+
+  def step(message)
+    puts "\n#{COLORS[:green]}== Step #{@step}: #{message} ==#{COLORS[:reset]}"
+    @step += 1
+    yield if block_given?
+  end
+
+  def install_dependencies(path = ".")
+    Dir.chdir(path) do
+      system! "gem install bundler --conservative"
+      # Use parallel installation for better performance
+      system("bundle check") || system!("bundle install --jobs=$(nproc)")
+      system! "pnpm install --frozen-lockfile"
+    end
+  end
+
+  def run
+    step "Checking environment" do
+      abort "Ruby version >= 3.0.0 required" unless RUBY_VERSION.to_f >= 3.0
+      abort "Node.js required" unless system("which node > /dev/null")
+      abort "pnpm required" unless system("which pnpm > /dev/null")
+    end
+
+    step "Installing main dependencies" do
+      install_dependencies
+    end
+
+    step "Installing demo dependencies" do
+      install_dependencies("demo")
+    end
+  end
+end
+
+Setup.new.run

embedded_gems/pathogen/demo/.dockerignore

@@ -0,0 +1,39 @@
+# See https://docs.docker.com/engine/reference/builder/#dockerignore-file for more about ignoring files.
+
+# Ignore git directory.
+/.git/
+/.gitignore
+
+# Ignore bundler config.
+/.bundle
+
+# Ignore all environment files (except templates).
+/.env*
+!/.env*.erb
+
+# Ignore all default key files.
+/config/master.key
+/config/credentials/*.key
+
+# Ignore all logfiles and tempfiles.
+/log/*
+/tmp/*
+
+# Ignore storage (uploaded files in development and any SQLite databases).
+/storage/*
+
+# Ignore assets.
+/node_modules/
+/app/assets/builds/*
+!/app/assets/builds/.keep
+/public/assets
+
+# Ignore CI service files.
+/.github
+
+# Ignore development files
+/.devcontainer
+
+# Ignore Docker-related files
+/.dockerignore
+/Dockerfile*

embedded_gems/pathogen/demo/.github/dependabot.yml

@@ -0,0 +1,12 @@
+version: 2
+updates:
+- package-ecosystem: bundler
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+- package-ecosystem: github-actions
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10