WIP

ruby-ui · Oct 6, 2024 · 0ddd80d · 0ddd80d
1 parent 0efb8f2
commit 0ddd80d
Show file tree

Hide file tree

Showing 50 changed files with 201 additions and 160 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -9,18 +9,41 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.2)
+    capybara (3.40.0)
+      addressable
+      matrix
+      mini_mime (>= 0.1.3)
+      nokogiri (~> 1.11)
+      rack (>= 1.6.0)
+      rack-test (>= 0.6.3)
+      regexp_parser (>= 1.5, < 3.0)
+      xpath (~> 3.2)
     json (2.7.2)
     language_server-protocol (3.17.0.3)
     lint_roller (1.1.0)
     lru_redux (1.1.0)
+    matrix (0.4.2)
+    mini_mime (1.1.5)
+    mini_portile2 (2.8.7)
     minitest (5.25.1)
+    nokogiri (1.16.7)
+      mini_portile2 (~> 2.8.2)
+      racc (~> 1.4)
+    nokogiri (1.16.7-arm64-darwin)
+      racc (~> 1.4)
     parallel (1.25.1)
     parser (3.3.3.0)
       ast (~> 2.4.1)
       racc
     phlex (2.0.0.beta2)
+    public_suffix (6.0.1)
     racc (1.8.0)
+    rack (3.1.7)
+    rack-test (2.1.0)
+      rack (>= 1.3)
     rainbow (3.1.1)
     rake (13.2.1)
     regexp_parser (2.9.2)
@@ -60,12 +83,15 @@ GEM
     tailwind_merge (0.13.0)
       lru_redux (~> 1.1)
     unicode-display_width (2.5.0)
+    xpath (3.2.0)
+      nokogiri (~> 1.8)
 
 PLATFORMS
   arm64-darwin-23
   ruby
 
 DEPENDENCIES
+  capybara
   minitest
   rake
   rbui!

diff --git a/lib/rbui/alert/alert.rb b/lib/rbui/alert/alert.rb
@@ -29,7 +29,7 @@ def colors
     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: tokens(base_classes, colors)
+        class: [base_classes, colors]
       }
     end
   end

diff --git a/lib/rbui/avatar/avatar.rb b/lib/rbui/avatar/avatar.rb
@@ -24,7 +24,7 @@ def view_template(&)
 
     def default_attrs
       {
-        class: tokens("relative flex shrink-0 overflow-hidden rounded-full", @size_classes)
+        class: ["relative flex shrink-0 overflow-hidden rounded-full", @size_classes]
       }
     end
   end

diff --git a/lib/rbui/badge/badge.rb b/lib/rbui/badge/badge.rb
@@ -53,7 +53,7 @@ def view_template(&)
 
     def default_attrs
       {
-        class: tokens("inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant])
+        class: ["inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant]]
       }
     end
   end

diff --git a/lib/rbui/button/button.rb b/lib/rbui/button/button.rb
@@ -35,45 +35,60 @@ def size_classes
     end
 
     def primary_classes
-      tokens(
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md",
+        "font-medium transition-colors focus-visible:outline-none focus-visible:ring-1",
+        "focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         size_classes
-      )
+      ]
     end
 
     def link_classes
-      tokens(
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium",
+        "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
         size_classes
-      )
+      ]
     end
 
     def secondary_classes
-      tokens(
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium",
+        "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
         size_classes
-      )
+      ]
     end
 
     def destructive_classes
-      tokens(
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium",
+        "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground",
+        "shadow-sm hover:bg-destructive/90",
         size_classes
-      )
+      ]
     end
 
     def outline_classes
-      tokens(
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium",
+        "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm",
+        "hover:bg-accent hover:text-accent-foreground",
         size_classes
-      )
+      ]
     end
 
     def ghost_classes
-      tokens(
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
+      [
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none",
+        "disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
         size_classes
-      )
+      ]
     end
 
     def default_classes

diff --git a/lib/rbui/calendar/calendar_days.rb b/lib/rbui/calendar/calendar_days.rb
@@ -2,7 +2,16 @@
 
 module RBUI
   class CalendarDays < Base
-    BASE_CLASS = "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+    BASE_CLASS = [
+      "inline-flex items-center justify-center",
+      "rounded-md text-sm",
+      "ring-offset-background transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2",
+      "focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "h-8 w-8 p-0 font-normal",
+      "aria-selected:opacity-100"
+    ]
 
     def view_template
       render_selected_date_template
@@ -19,11 +28,12 @@ def render_selected_date_template
           data_day: "{{day}}",
           data_action: "click->rbui--calendar#selectDay",
           name: "day",
-          class:
-                tokens(
-                  BASE_CLASS,
-                  "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
-                ),
+          class: [
+            *BASE_CLASS,
+            "bg-primary text-primary-foreground",
+            "hover:bg-primary hover:text-primary-foreground",
+            "focus:bg-primary focus:text-primary-foreground"
+          ],
           role: "gridcell",
           tabindex: "0",
           type: "button",
@@ -38,11 +48,12 @@ def render_today_date_template
           data_day: "{{day}}",
           data_action: "click->rbui--calendar#selectDay",
           name: "day",
-          class:
-                tokens(
-                  BASE_CLASS,
-                  "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ),
+          class: [
+            *BASE_CLASS,
+            "bg-accent text-accent-foreground",
+            "hover:bg-accent hover:text-accent-foreground",
+            "focus:bg-accent focus:text-accent-foreground"
+          ],
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -56,11 +67,12 @@ def render_current_month_date_template
           data_day: "{{day}}",
           data_action: "click->rbui--calendar#selectDay",
           name: "day",
-          class:
-                tokens(
-                  BASE_CLASS,
-                  "bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ),
+          class: [
+            *BASE_CLASS,
+            "bg-background text-foreground",
+            "hover:bg-accent hover:text-accent-foreground",
+            "focus:bg-accent focus:text-accent-foreground"
+          ],
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -72,13 +84,14 @@ def render_other_month_date_template
       date_template("otherMonthDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: " click->rbui--calendar#selectDay",
+          data_action: "click->rbui--calendar#selectDay",
           name: "day",
-          class:
-                tokens(
-                  BASE_CLASS,
-                  "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ),
+          class: [
+            *BASE_CLASS,
+            "bg-background text-muted-foreground",
+            "hover:bg-accent hover:text-accent-foreground",
+            "focus:bg-accent focus:text-accent-foreground"
+          ],
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -89,8 +102,12 @@ def render_other_month_date_template
     def date_template(target, &block)
       template_tag(data: {rbui__calendar_target: target}) do
         td(
-          class:
-                "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md",
+          class: [
+            "relative p-0 text-center text-sm",
+            "focus-within:relative focus-within:z-20",
+            "[&:has([aria-selected])]:bg-accent",
+            "[&:has([aria-selected])]:rounded-md"
+          ],
           role: "presentation",
           &block
         )

diff --git a/lib/rbui/calendar/calendar_input_controller.js b/lib/rbui/calendar/calendar_input_controller.js
@@ -1,8 +1,11 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="input"
 export default class extends Controller {
+  connect() {
+    console.log("Connected to input");
+  }
   setValue(value) {
-    this.element.value = value
+    this.element.value = value;
   }
 }
diff --git a/lib/rbui/command/command_dialog_content.rb b/lib/rbui/command/command_dialog_content.rb
@@ -30,10 +30,15 @@ def view_template(&block)
     def default_attrs
       {
         data_state: "open",
-        class: tokens(
-          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        class: [
+          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%]",
+          "translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2",
+          "data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2",
+          "data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
           SIZES[@size]
-        )
+        ]
       }
     end
 

diff --git a/lib/rbui/command/command_dialog_trigger.rb b/lib/rbui/command/command_dialog_trigger.rb
@@ -21,7 +21,7 @@ def view_template(&)
     def default_attrs
       {
         data: {
-          action: tokens("click->rbui--command#open", @keybindings.join(" "))
+          action: ["click->rbui--command#open", @keybindings.join(" ")]
         }
       }
     end

diff --git a/lib/rbui/context_menu/context_menu_label.rb b/lib/rbui/context_menu/context_menu_label.rb
@@ -17,7 +17,7 @@ def inset? = @inset
 
     def default_attrs
       {
-        class: tokens("px-2 py-1.5 text-sm font-semibold text-foreground", inset?: "pl-8")
+        class: ["px-2 py-1.5 text-sm font-semibold text-foreground", inset?: "pl-8"]
       }
     end
   end

diff --git a/lib/rbui/dialog/dialog_content.rb b/lib/rbui/dialog/dialog_content.rb
@@ -33,10 +33,10 @@ def view_template
     def default_attrs
       {
         data_state: "open",
-        class: tokens(
+        class: [
           "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
           SIZES[@size]
-        )
+        ]
       }
     end