Add phlex and rbui

Gemfile

@@ -9,8 +9,10 @@ gem "image_processing", "~> 1.2"
 gem "jsbundling-rails"
 gem "kamal", ">= 2.0.0.rc2", require: false
 gem "pg", "~> 1.1"
+gem "phlex-rails", "2.0.0.beta2"
 gem "propshaft"
 gem "puma", ">= 5.0"
+gem "rbui", github: "rbui-labs/rbui", branch: "upgrade-to-phlex-v2-beta" # TODO: Upgrade to released version when available
 gem "solid_cache"
 gem "solid_queue"
 gem "solid_cable"

Gemfile.lock

@@ -97,6 +97,16 @@ GIT
       thor (~> 1.0, >= 1.2.2)
       zeitwerk (~> 2.6)
 
+GIT
+  remote: https://github.com/rbui-labs/rbui.git
+  revision: b9f846b142464c4c3a64511547f51f58bde1eb6f
+  branch: upgrade-to-phlex-v2-beta
+  specs:
+    rbui (1.0.0.pre.alpha.4)
+      phlex (>= 1.10)
+      rouge (~> 4.2.0)
+      tailwind_merge (>= 0.12)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -182,6 +192,7 @@ GEM
     loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    lru_redux (1.1.0)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
@@ -235,6 +246,10 @@ GEM
       ast (~> 2.4.1)
       racc
     pg (1.5.8)
+    phlex (2.0.0.beta2)
+    phlex-rails (2.0.0.beta2)
+      phlex (= 2.0.0.beta2)
+      railties (>= 6.1, < 8)
     propshaft (1.1.0)
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
@@ -275,6 +290,7 @@ GEM
     reline (0.5.10)
       io-console (~> 0.5)
     rexml (3.3.8)
+    rouge (4.2.1)
     rubocop (1.66.1)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
@@ -344,6 +360,8 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.1)
+    tailwind_merge (0.13.1)
+      lru_redux (~> 1.1)
     thor (1.3.2)
     thruster (0.1.8)
     thruster (0.1.8-aarch64-linux)
@@ -395,11 +413,13 @@ DEPENDENCIES
   minitest-spec-rails
   mocha
   pg (~> 1.1)
+  phlex-rails (= 2.0.0.beta2)
   propshaft
   pry
   pry-rails
   puma (>= 5.0)
   rails!
+  rbui!
   rubocop-rails-omakase
   selenium-webdriver
   shoulda-context

app/assets/stylesheets/application.tailwind.css

@@ -1,3 +1,69 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+    --success: 87 100% 37%;
+    --success-foreground: 0 0% 100%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+    --success: 84 81% 44%;
+    --success-foreground: 0 0% 100%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}

app/controllers/application_controller.rb

@@ -2,4 +2,7 @@ class ApplicationController < ActionController::Base
   include Authentication
   # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
   allow_browser versions: :modern
+
+  # Use the Phlex application layout instead of rails erb version.
+  layout -> { ApplicationLayout }
 end

app/javascript/application.js

@@ -3,3 +3,4 @@ import "@hotwired/turbo-rails"
 import "trix"
 import "@rails/actiontext"
 import "./controllers"
+import "rbui-js"

app/views/application_view.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class ApplicationView < ApplicationComponent
+  # The ApplicationView is an abstract class for all your views.
+
+  # By default, it inherits from `ApplicationComponent`, but you
+  # can change that to `Phlex::HTML` if you want to keep views and
+  # components independent.
+end

app/views/components/application_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class ApplicationComponent < Phlex::HTML
+  include Phlex::Rails::Helpers::Routes
+  include RBUI
+
+  if Rails.env.development?
+    def before_template
+      comment { "Before #{self.class.name}" }
+      super
+    end
+  end
+end

app/views/layouts/application.html.erb

@@ -1,10 +1,19 @@
+<%#
+  Currently, this layout is not being used as the Phlex layout is being used instead.
+  Add any updates or changes directly to application_layout.rb.
+%>
 <!DOCTYPE html>
 <html>
   <head>
     <title><%= content_for(:title) || "PostIt" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
+
+    <% if authenticated? %>
+      <meta name="current-user-id" content="<%= current_user.id %>">
+    <% end %>
+
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
@@ -23,7 +32,7 @@
   </head>
 
   <body>
-    <main class="container mx-auto mt-28 px-5 flex">
+    <main class="container mx-auto flex">
       <%= yield %>
     </main>
   </body>

app/views/layouts/application_layout.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class ApplicationLayout < ApplicationView
+  include Phlex::Rails::Layout
+
+  def view_template(&block)
+    doctype
+
+    html do
+      head do
+        title { yield(:title) || "PostIt" }
+        meta name: "viewport", content: "width=device-width,initial-scale=1"
+        meta name: "apple-mobile-web-app-capable", content: "yes"
+        meta name: "mobile-web-app-capable", content: "yes"
+
+        if helpers.authenticated?
+          meta name: "current-user-id", content: "<%= current_user.id %>"
+        end
+
+        csrf_meta_tags
+        csp_meta_tag
+
+        yield :head
+
+        # Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!)
+        # tag.link rel: "manifest", href: pwa_manifest_path(format: :json)
+
+        link rel: "icon", href: "/icon.png", type: "image/png"
+        link rel: "icon", href: "/icon.svg", type: "image/svg+xml"
+        link rel: "apple-touch-icon", href: "/icon.png"
+
+        # Includes all stylesheet files in app/views/stylesheets
+        stylesheet_link_tag :app, "data-turbo-track": "reload"
+        javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
+      end
+
+      body do
+        main(&block)
+      end
+    end
+  end
+end

config/application.rb

@@ -8,6 +8,9 @@
 
 module Postit
   class Application < Rails::Application
+    config.autoload_paths << "#{root}/app/views"
+    config.autoload_paths << "#{root}/app/views/layouts"
+    config.autoload_paths << "#{root}/app/views/components"
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 8.0
 

config/brakeman.ignore

@@ -0,0 +1,28 @@
+{
+  "ignored_warnings": [
+    {
+      "warning_type": "Cross-Site Request Forgery",
+      "warning_code": 7,
+      "fingerprint": "6f5239fb87c64764d0c209014deb5cf504c2c10ee424bd33590f0a4f22e01d8f",
+      "check_name": "ForgerySetting",
+      "message": "`protect_from_forgery` should be called in `ApplicationController`",
+      "file": "app/controllers/application_controller.rb",
+      "line": 1,
+      "link": "https://brakemanscanner.org/docs/warning_types/cross-site_request_forgery/",
+      "code": null,
+      "render_path": null,
+      "location": {
+        "type": "controller",
+        "controller": "ApplicationController"
+      },
+      "user_input": null,
+      "confidence": "High",
+      "cwe_id": [
+        352
+      ],
+      "note": "This is a bug in brakeman. Ref: https://github.com/rails/rails/issues/52624#issuecomment-2293717723"
+    }
+  ],
+  "updated": "2024-10-06 23:14:38 -0500",
+  "brakeman_version": "6.2.1"
+}

package.json

@@ -7,7 +7,9 @@
     "@rails/actiontext": "^7.2.100",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
+    "rbui-js": "^1.0.0-alpha.4",
     "tailwindcss": "^3.4.13",
+    "tailwindcss-animate": "^1.0.7",
     "trix": "^2.1.6"
   },
   "scripts": {

tailwind.config.js

@@ -1,8 +1,84 @@
+// For importing tailwind styles from rbui gem
+const execSync = require('child_process').execSync;
+
+// Import rbui gem path (To make sure Tailwind loads classes used by rbui gem)
+const outputRBUI = execSync('bundle show rbui', { encoding: 'utf-8' });
+const rbui_path = outputRBUI.trim() + '/**/*.rb';
+
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
+  darkMode: ["class"],
   content: [
-    './app/views/**/*.html.erb',
+    './app/views/**/*.{erb,haml,html,slim,rb}',
     './app/helpers/**/*.rb',
     './app/assets/stylesheets/**/*.css',
-    './app/javascript/**/*.js'
-  ]
+    './app/javascript/**/*.js',
+    rbui_path
+  ],
+  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))",
+        },
+        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-animate"),
+  ],
 }