Update RubyUI (#137)

Author: stephannv

Gemfile

@@ -74,7 +74,11 @@ end
 gem "phlex", github: "phlex-ruby/phlex"
 gem "phlex-rails", github: "phlex-ruby/phlex-rails"
 
-gem "ruby_ui", github: "ruby-ui/ruby_ui", branch: "main"
+gem "ruby_ui", github: "ruby-ui/ruby_ui", branch: "main", require: false
 # gem "ruby_ui", path: "../ruby_ui"
 
 gem "pry"
+
+gem "tailwind_merge", "~> 0.13.2"
+
+gem "rouge", "~> 4.5"

Gemfile.lock

@@ -14,13 +14,10 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: 468d5804a217caaae933c70e2f76ad28636c6b82
+  revision: 8909f0ecdd9ade28b01d76946e9d7438849b5856
   branch: main
   specs:
     ruby_ui (1.0.0.pre.alpha.4)
-      phlex (>= 2.0.0.beta2)
-      rouge (~> 4.2.0)
-      tailwind_merge (~> 0.12)
 
 GEM
   remote: https://rubygems.org/
@@ -234,7 +231,7 @@ GEM
     reline (0.5.11)
       io-console (~> 0.5)
     rexml (3.3.9)
-    rouge (4.2.1)
+    rouge (4.5.1)
     rubocop (1.66.1)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
@@ -318,11 +315,13 @@ DEPENDENCIES
   pry
   puma (= 6.4.2)
   rails (= 7.2.0)
+  rouge (~> 4.5)
   ruby_ui!
   selenium-webdriver
   sqlite3 (>= 1.4)
   standard
   stimulus-rails (= 1.3.3)
+  tailwind_merge (~> 0.13.2)
   turbo-rails (= 2.0.6)
   tzinfo-data
   web-console

app/assets/stylesheets/application.tailwind.css

@@ -24,14 +24,14 @@
     --input: 240 5.9% 90%;
     --ring: 240 5.9% 10%;
     --radius: 0.5rem;
-    
-    /* rbui especific */
+
+    /* ruby_ui especific */
     --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%;
@@ -53,7 +53,7 @@
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
 
-    /* rbui especific */
+    /* ruby_ui especific */
     --warning: 38 92% 50%;
     --warning-foreground: 0 0% 100%;
     --success: 84 81% 44%;
@@ -65,6 +65,7 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
@@ -73,4 +74,4 @@
     /* https://css-tricks.com/snippets/css/system-font-stack/ */
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   }
-}
+}

app/components/base.rb

@@ -1,4 +1,10 @@
 class Components::Base < Phlex::HTML
+  include Components
+  include RubyUI
+
+  # Include any helpers you want to be available across all components
+  include Phlex::Rails::Helpers::Routes
+
   TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
 
   attr_reader :attrs
@@ -8,7 +14,7 @@ def initialize(**user_attrs)
     @attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class]) if @attrs[:class]
   end
 
-  if defined?(Rails) && Rails.env.development?
+  if Rails.env.development?
     def before_template
       comment { "Before #{self.class.name}" }
       super

app/components/rbui/index.js

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Accordion < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full"
+      }
+    end
+  end
+end

app/components/ruby_ui/accordion.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__accordion_target: "content"
+        },
+        class: "overflow-y-hidden",
+        style: "height: 0px;"
+      }
+    end
+  end
+end

app/components/ruby_ui/accordion/accordion_content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionDefaultContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "pb-4 pt-0 text-sm"
+      }
+    end
+  end
+end

app/components/ruby_ui/accordion/accordion_default_content.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionDefaultTrigger < Base
+    def view_template(&block)
+      div(class: "flex items-center justify-between w-full") do
+        p(&block)
+        RubyUI.AccordionIcon
+      end
+    end
+
+    def default_attrs
+      {
+        data: {action: "click->ruby-ui--accordion#toggle"},
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
+    end
+  end
+end

app/components/ruby_ui/accordion/accordion_default_trigger.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionIcon < Base
+    def view_template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          fill_rule: "evenodd",
+          d:
+            "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        class: "opacity-50",
+        data: {ruby_ui__accordion_target: "icon"}
+      }
+    end
+  end
+end

app/components/ruby_ui/accordion/accordion_icon.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionItem < Base
+    def initialize(open: false, rotate_icon: 180, **attrs)
+      @open = open
+      @rotate_icon = rotate_icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--accordion",
+          ruby_ui__accordion_open_value: @open,
+          ruby_ui__accordion_rotate_icon_value: @rotate_icon
+        },
+        class: "border-b"
+      }
+    end
+  end
+end

app/components/ruby_ui/accordion/accordion_item.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionTrigger < Base
+    def view_template(&)
+      button(**attrs, &)
+    end
+
+    def default_attrs
+      {
+        type: "button",
+        data: {action: "click->ruby-ui--accordion#toggle"},
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
+    end
+  end
+end

app/components/ruby_ui/accordion/accordion_trigger.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Alert < Base
+    def initialize(variant: nil, **attrs)
+      @variant = variant
+      super(**attrs) # must be called after variant is set
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def colors
+      case @variant
+      when nil
+        "ring-border bg-muted/20 text-foreground [&>svg]:opacity-80"
+      when :warning
+        "ring-warning/20 bg-warning/5 text-warning [&>svg]:text-warning/80"
+      when :success
+        "ring-success/20 bg-success/5 text-success [&>svg]:text-success/80"
+      when :destructive
+        "ring-destructive/20 bg-destructive/5 text-destructive [&>svg]:text-destructive/80"
+      end
+    end
+
+    def default_attrs
+      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8"
+      {
+        class: [base_classes, colors]
+      }
+    end
+  end
+end

app/components/ruby_ui/alert.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDescription < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm [&_p]:leading-relaxed"
+      }
+    end
+  end
+end

app/components/ruby_ui/alert/alert_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertTitle < Base
+    def view_template(&)
+      h5(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "mb-1 font-medium leading-none tracking-tight"
+      }
+    end
+  end
+end

app/components/ruby_ui/alert/alert_title.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDialog < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--alert-dialog",
+          ruby_ui__alert_dialog_open_value: @open.to_s
+        },
+        class: "inline-block"
+      }
+    end
+  end
+end