Update to phlex 2 beta

.gitignore

@@ -38,5 +38,4 @@
 .env* 
 
 .tool-versions
-
-config/credentials/production.key
+/config/credentials/production.key

Gemfile

@@ -73,7 +73,7 @@ group :test do
   gem "selenium-webdriver"
 end
 
-gem "phlex-rails"
+gem "phlex-rails", "= 2.0.0.beta2"
 
 gem "ruby_ui", github: "ruby-ui/ruby_ui", branch: "main"
 # gem "ruby_ui", path: "../rbui"

Gemfile.lock

@@ -1,10 +1,10 @@
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: 33dc56c7565e64080f976594b7a67eb0b7e2412f
+  revision: 9dc4378689fb7157091584108b7563371eab0cf9
   branch: main
   specs:
     ruby_ui (1.0.0.pre.alpha.4)
-      phlex (~> 1.10, < 3)
+      phlex (>= 1.10, < 3)
       rouge (~> 4.2.0)
       tailwind_merge (~> 0.12)
 
@@ -186,11 +186,10 @@ GEM
     parser (3.3.4.0)
       ast (~> 2.4.1)
       racc
-    phlex (1.11.0)
-    phlex-rails (1.1.1)
-      phlex (~> 1.9)
+    phlex (2.0.0.beta2)
+    phlex-rails (2.0.0.beta2)
+      phlex (= 2.0.0.beta2)
       railties (>= 6.1, < 8)
-      zeitwerk (~> 2.6)
     propshaft (0.9.0)
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
@@ -348,7 +347,7 @@ DEPENDENCIES
   jsbundling-rails (= 1.3.0)
   lookbook (= 2.3.2)
   lucide-rails (= 0.4.0)
-  phlex-rails
+  phlex-rails (= 2.0.0.beta2)
   propshaft (= 0.9.0)
   pry
   puma (= 6.4.2)

app/components/base.rb

@@ -1,23 +1,25 @@
+# frozen_string_literal: true
+
 class Components::Base < Phlex::HTML
-  TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
+  include RBUI
+  include ApplicationHelper
 
-  attr_reader :attrs
+  # Include any helpers you want to be available across all components
+  include Phlex::Rails::Helpers::Routes
 
-  def initialize(**user_attrs)
-    @attrs = mix(default_attrs, user_attrs)
-    @attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class]) if @attrs[:class]
-  end
+  GITHUB_REPO_URL = "https://github.com/ruby-ui/ruby_ui/"
+  GITHUB_FILE_URL = "#{GITHUB_REPO_URL}blob/main/"
+end
 
-  if defined?(Rails) && Rails.env.development?
-    def before_template
-      comment { "Before #{self.class.name}" }
-      super
-    end
-  end
+class MethodCallFinder < Prism::Visitor
+  attr_reader :calls
 
-  private
+  def initialize(calls)
+    @calls = calls
+  end
 
-  def default_attrs
-    {}
+  def visit_call_node(node)
+    super
+    calls << node.name
   end
 end

app/views/components/docs/components_table.rb → app/components/docs/components_table.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Docs::ComponentsTable < ApplicationComponent
+class Components::Docs::ComponentsTable < Components::Base
   def initialize(components, file_components = nil)
     @components = components.sort_by { |component| [component.built_using, component.name] }
     @file_components = file_components.sort_by { |component| [component.built_using, component.name] } if file_components

app/views/components/docs/header.rb → app/components/docs/header.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Docs::Header < ApplicationComponent
+class Components::Docs::Header < Components::Base
   def initialize(title: nil, description: nil)
     @title = title
     @description = description

app/views/components/docs/tailwind_config.rb → app/components/docs/tailwind_config.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Docs::TailwindConfig < ApplicationComponent
+class Components::Docs::TailwindConfig < Components::Base
   def view_template
     Text(size: "4", weight: "semibold") { "Update Tailwind Configuration" }
     Text do

app/views/components/docs/tailwind_css.rb → app/components/docs/tailwind_css.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Docs::TailwindCss < ApplicationComponent
+class Components::Docs::TailwindCss < Components::Base
   def view_template
     Text(size: "4", weight: "semibold") { "Add CSS variables" }
     Text do

app/views/components/docs/visual_code_example.rb → app/components/docs/visual_code_example.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Docs::VisualCodeExample < ApplicationComponent
+class Components::Docs::VisualCodeExample < Components::Base
   @@collected_code = []
 
   def self.collected_code
@@ -72,7 +72,7 @@ def render_preview_tab(&block)
     div(class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
       div(class: "preview flex min-h-[350px] w-full justify-center p-10 items-center") do
         decoded_code = CGI.unescapeHTML(@display_code)
-        @context.instance_eval(decoded_code)
+        instance_eval(decoded_code)
       end
     end
   end

app/components/heading.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Components
-  class Heading < Base
+  class Heading < RBUI::Base
     def initialize(level: nil, as: nil, size: nil, **attrs)
       @level = level
       @as = as

app/views/home_view/banner.rb → app/components/home/banner.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-class HomeView::Banner < ApplicationComponent
+class Components::Home::Banner < Components::Base
   include Phlex::DeferredRender
 
   def view_template(&block)
     div(class: "relative overflow-hidden") do
-      render Shared::GridPattern.new(spacing: :md)
-      render HomeView::Shapes.new(size: :xl, color: :pink, class: "hidden sm:block absolute right-0 top-1/2 transform -translate-y-1/2 sm:translate-x-2/3 md:translate-x-1/2")
+      render Components::Shared::GridPattern.new(spacing: :md)
+      render Components::Home::Shapes.new(size: :xl, color: :pink, class: "hidden sm:block absolute right-0 top-1/2 transform -translate-y-1/2 sm:translate-x-2/3 md:translate-x-1/2")
       div(class: "relative container mx-auto max-w-3xl py-24 lg:py-32 px-4 sm:text-center flex flex-col sm:items-center gap-y-6") do
         Heading(level: 1) do
           plain "A UI component library, crafted precisely for Ruby devs"

app/views/home_view/shapes.rb → app/components/home/shapes.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class HomeView::Shapes < ApplicationComponent
+class Components::Home::Shapes < Components::Base
   def initialize(size: :md, **attributes)
     @attributes = attributes
     @circle_sizes = {

app/components/layouts/base.rb

@@ -0,0 +1,32 @@
+class Components::Layouts::Base < Phlex::HTML
+  # include Components
+
+  if Rails.env.development?
+    def before_template
+      comment { "Before #{self.class.name}" }
+      super
+    end
+  end
+
+  PageInfo = Data.define(:title)
+
+  def around_template
+    doctype
+
+    html do
+      render Components::Shared::Head.new(page_info)
+
+      body do
+        render Components::Shared::Navbar.new
+        yield # This will render the content of child layouts/views
+        render Components::Shared::Flashes.new(notice: helpers.flash[:notice], alert: helpers.flash[:alert])
+      end
+    end
+  end
+
+  def page_info
+    PageInfo.new(
+      title: page_title
+    )
+  end
+end

app/components/layouts/docs.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class Components::Layouts::Docs < Components::Layouts::Base
+  include ApplicationHelper
+
+  def around_template
+    super do # Call the Base layout's template method
+      div(class: "flex-1") do
+        div(class: "border-b") do
+          div(class: "container px-4 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10") do
+            render Components::Shared::Sidebar.new
+            main(class: "relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]") do
+              yield # This will render the content of views using this layout
+            end
+          end
+        end
+      end
+    end
+  end
+end

app/components/layouts/errors.rb

@@ -0,0 +1,31 @@
+class Components::Layouts::Errors < Components::Base
+  include Components
+
+  PageInfo = Data.define(:title)
+
+  include Phlex::Rails::Layout
+
+  def view_template(&block)
+    doctype
+
+    html do
+      render Components::Shared::Head.new(page_info)
+
+      body do
+        main(class: "relative flex flex-col items-center justify-center gap-y-6 h-screen w-screen overflow-y-scroll") do
+          render Shared::GridPattern.new
+          ThemeToggle(class: "hidden") # In order for dark mode to work, we need to render the theme toggle somewhere in the DOM
+          render Shared::Logo.new
+          div(class: "container w-full max-w-md", &block)
+        end
+        render Shared::Flashes.new(notice: helpers.flash[:notice], alert: helpers.flash[:alert])
+      end
+    end
+  end
+
+  def page_info
+    PageInfo.new(
+      title: page_title
+    )
+  end
+end

app/components/layouts/pages.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Components::Layouts::Pages < Components::Layouts::Base
+  def around_template
+    super do # Call the Base layout's template method
+      main(class: "relative") { yield }
+    end
+  end
+end

app/components/ruby_ui_base.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class Components::RubyUiBase < Phlex::HTML
+  include RBUI
+  # include Components
+  include ApplicationHelper
+
+  # Include any helpers you want to be available across all components
+  include Phlex::Rails::Helpers::Routes
+
+  GITHUB_REPO_URL = "https://github.com/ruby-ui/ruby_ui/"
+  GITHUB_FILE_URL = "#{GITHUB_REPO_URL}blob/main/"
+
+  if Rails.env.development?
+    def before_template
+      comment { "Before #{self.class.name}" }
+      super
+    end
+  end
+end
+
+class MethodCallFinder < Prism::Visitor
+  attr_reader :calls
+
+  def initialize(calls)
+    @calls = calls
+  end
+
+  def visit_call_node(node)
+    super
+    calls << node.name
+  end
+end

app/views/components/shared/container.rb → app/components/shared/container.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Shared::Container < ApplicationComponent
+class Components::Shared::Container < Components::Base
   DEFAULT_CLASS = "container mx-auto w-full px-4"
   SIZE_CLASSES = {
     sm: "max-w-md",
@@ -12,7 +12,7 @@ class Shared::Container < ApplicationComponent
 
   def initialize(size: "md", **attrs)
     @attrs = attrs
-    @attrs[:class] = tokens(DEFAULT_CLASS, SIZE_CLASSES[size].to_s, @attrs[:class])
+    @attrs[:class] = [DEFAULT_CLASS, SIZE_CLASSES[size].to_s, @attrs[:class]]
   end
 
   def view_template(&)

app/views/components/shared/flashes.rb → app/components/shared/flashes.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Shared::Flashes < ApplicationComponent
+class Components::Shared::Flashes < Components::Base
   def initialize(notice: nil, alert: nil)
     @notice = notice
     @alert = alert

app/views/components/shared/grid_pattern.rb → app/components/shared/grid_pattern.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Shared::GridPattern < ApplicationComponent
+class Components::Shared::GridPattern < Components::Base
   def initialize(spacing: :md)
     sizes = {
       xs: 15,

app/views/components/shared/head.rb → app/components/shared/head.rb

@@ -1,11 +1,17 @@
 # frozen_string_literal: true
 
-class Shared::Head < ApplicationComponent
+class Components::Shared::Head < Components::Base
   include Phlex::Rails::Layout
+  include Phlex::Rails::Helpers::CSRFMetaTags
+  include Phlex::Rails::Helpers::StylesheetLinkTag
+
+  def initialize(page_info)
+    @page_info = page_info
+  end
 
   def view_template
     head do
-      title { "RBUI - Component Library" }
+      title { "RBUI - " + @page_info.title }
       meta name: "viewport", content: "width=device-width,initial-scale=1"
       meta name: "turbo-refresh-method", content: "morph"
       meta name: "turbo-refresh-scroll", content: "preserve"

app/views/components/shared/logo.rb → app/components/shared/logo.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Shared::Logo < ApplicationComponent
+class Components::Shared::Logo < Components::Base
   def view_template
     a(href: helpers.root_url, class: "mr-6 flex items-center space-x-2") do
       Heading(level: 4, class: "flex items-center") {