Tailwind rewrite

Gemfile

@@ -37,6 +37,7 @@ gem 'acts_as_list', '~> 1.0'
 gem 'amazing_print', '~> 1.3'
 gem 'blueprinter', '~> 1.0'
 gem 'cocoon', '~> 1.2'
+gem "commonmarker", "~> 2.3"
 gem 'datadog', '~> 2.2', require: 'datadog/auto_instrument'
 gem 'devise', '~> 4.7'
 gem 'devise-jwt', '~> 0.12.0'
@@ -49,15 +50,21 @@ gem 'high_voltage', '~> 4.0'
 gem 'image_processing', '~> 1.11'
 gem "importmap-rails", "~> 2.1"
 gem "inline_svg", "~> 1.10"
+gem "literal", "~> 1.7"
 gem 'meta-tags', '~> 2.13'
 gem 'mini_magick', '~> 5.2'
 gem 'ostruct', '~> 0.6.1' # dependency of gaffe
+gem 'phlex-rails', '~> 2.2'
 gem 'pundit', '~> 2.1'
 gem 'rails_semantic_logger', '~> 4.6'
 gem 'rswag-api', '~> 2.4'
 gem 'rswag-ui', '~> 2.4'
 gem 'simple_form', '~> 5.0'
 gem 'spicy-proton', '~> 2.1'
+gem 'stimulus-rails', '~> 1.3'
+gem 'tailwindcss-rails', '~> 4.2'
+gem 'tailwindcss-ruby', '~> 4.1'
+gem 'tailwind_merge', '~> 1.2'
 gem 'wicked', '~> 2.0'
 
 # gems for buttondown - eventually move this to its own gem
@@ -86,6 +93,7 @@ group :development do
   gem 'better_errors'
   gem 'foreman'
   gem 'haml-rails'
+  gem 'ruby_ui', require: false
 end
 
 group :test do

Gemfile.lock

@@ -166,6 +166,8 @@ GEM
     cocoon (1.2.15)
     coderay (1.1.3)
     colorize (1.1.0)
+    commonmarker (2.3.0)
+      rb_sys (~> 0.9)
     concurrent-ruby (1.3.5)
     connection_pool (2.5.3)
     crack (1.0.0)
@@ -323,6 +325,8 @@ GEM
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
+    literal (1.8.1)
+      zeitwerk
     logger (1.7.0)
     loofah (2.24.1)
       crass (~> 1.0.2)
@@ -363,6 +367,12 @@ GEM
     orm_adapter (0.5.0)
     ostruct (0.6.2)
     pg (1.5.9)
+    phlex (2.3.1)
+      zeitwerk (~> 2.7)
+    phlex-rails (2.3.1)
+      phlex (~> 2.3.0)
+      railties (>= 7.1, < 9)
+      zeitwerk (~> 2.7)
     pp (0.6.2)
       prettyprint
     prettyprint (0.2.0)
@@ -435,13 +445,16 @@ GEM
       thor (~> 1.0, >= 1.2.2)
       zeitwerk (~> 2.6)
     rake (13.3.0)
+    rake-compiler-dock (1.9.1)
     ransack (4.3.0)
       activerecord (>= 6.1.5)
       activesupport (>= 6.1.5)
       i18n
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
+    rb_sys (0.9.116)
+      rake-compiler-dock (= 1.9.1)
     rdoc (6.14.1)
       erb
       psych (>= 4.0.0)
@@ -490,12 +503,14 @@ GEM
     ruby-vips (2.2.4)
       ffi (~> 1.12)
       logger
+    ruby_ui (1.0.1)
     securerandom (0.4.1)
     semantic_logger (4.16.1)
       concurrent-ruby (~> 1.0)
     simple_form (5.3.1)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
+    sin_lru_redux (2.5.2)
     spicy-proton (2.1.15)
       bindata (~> 2.3)
     spinach (0.12.0)
@@ -513,7 +528,15 @@ GEM
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     stringio (3.1.7)
+    tailwind_merge (1.3.1)
+      sin_lru_redux (~> 2.5)
+    tailwindcss-rails (4.2.3)
+      railties (>= 7.0.0)
+      tailwindcss-ruby (~> 4.0)
+    tailwindcss-ruby (4.1.10)
     temple (0.10.3)
     thor (1.3.2)
     tilt (2.6.0)
@@ -574,6 +597,7 @@ DEPENDENCIES
   byebug
   capybara-screenshot
   cocoon (~> 1.2)
+  commonmarker (~> 2.3)
   cssbundling-rails (~> 1.1)
   cuprite
   database_cleaner
@@ -596,10 +620,12 @@ DEPENDENCIES
   inline_svg (~> 1.10)
   jsbundling-rails (~> 1.1)
   listen
+  literal (~> 1.7)
   meta-tags (~> 2.13)
   mini_magick (~> 5.2)
   ostruct (~> 0.6.1)
   pg (>= 0.18, < 2.0)
+  phlex-rails (~> 2.2)
   pry-rails
   pry-rescue
   puma (~> 6.0)
@@ -614,11 +640,16 @@ DEPENDENCIES
   rswag-api (~> 2.4)
   rswag-specs (~> 2.4)
   rswag-ui (~> 2.4)
+  ruby_ui
   simple_form (~> 5.0)
   spicy-proton (~> 2.1)
   spinach
   spinach-rails
   sprockets-rails (~> 3.5)
+  stimulus-rails (~> 1.3)
+  tailwind_merge (~> 1.2)
+  tailwindcss-rails (~> 4.2)
+  tailwindcss-ruby (~> 4.1)
   timecop
   turbo-rails (~> 2.0)
   web-console (>= 3.3.0)

app/assets/tailwind/application.css

@@ -0,0 +1,152 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.57 0.2077 22.63);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.32 0.0192 264.26);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* ruby_ui specific */
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --success: hsl(87 100% 37%);
+  --success-foreground: hsl(0 0% 100%);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+
+  /* ruby_ui specific */
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --success: hsl(84 81% 44%);
+  --success-foreground: hsl(0 0% 100%);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --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);
+  --color-success-foreground: var(--success-foreground);
+}
+
+/* Container settings */
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  max-width: 1400px;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/components/base.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Components::Base < Phlex::HTML
+  extend Literal::Properties
+  include Components
+  include RubyUI
+
+  # Include any helpers you want to be available across all components
+  include Phlex::Rails::Helpers::Routes
+  include Phlex::Rails::Helpers::T
+
+  register_output_helper :icon
+  register_output_helper :inline_svg_tag
+
+  if Rails.env.development?
+    def before_template
+      comment { "Before #{self.class.name}" }
+      super
+    end
+  end
+
+  def container_classes
+    %w[mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8]
+  end
+
+end

app/components/layout.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+class Components::Layout < Components::Base
+  include Phlex::Rails::Layout
+
+  register_output_helper :display_meta_tags
+
+  def view_template
+    doctype
+    html(lang: 'en', class: html_class) do
+      render_head
+      body(class: 'bg-background text-foreground') do
+        yield
+      end
+    end
+  end
+
+  protected
+
+  def html_class
+    nil
+  end
+
+  def render_head
+    head do
+      display_meta_tags default_meta_tags
+      csrf_meta_tags
+      csp_meta_tag
+      favicon_link_tag
+      favicon_link_tag 'apple-touch-icon.png', rel: 'apple-touch-icon', type: 'image/png'
+      link(rel: 'manifest', href: manifest_path(format: :json))
+      javascript_include_tag 'application', data_turbo_track: 'reload', type: 'module'
+      stylesheet_link_tag 'tailwind', media: 'all', data_turbo_track: 'reload'
+      render partial('layouts/ga')
+    end
+  end
+
+  def default_meta_tags
+    {
+      site: t('product_name'), 
+      reverse: true, 
+      viewport: 'width=device-width, initial-scale=1.0', 
+      'theme-color' => '#2e333d',
+      'view-transition': 'same-origin',
+      'turbo-refresh-method': 'morph',
+    }
+  end
+end