Replace CarouselContext with Tailwind group

Author: lsouoliveira

lib/ruby_ui/carousel/carousel.rb

@@ -10,16 +10,14 @@ def initialize(orientation: :horizontal, options: {}, **user_attrs)
     end
 
     def view_template(&)
-      CarouselContext.with_context(orientation: @orientation) do
-        div(**attrs, &)
-      end
+      div(**attrs, &)
     end
 
     private
 
     def default_attrs
       {
-        class: "relative",
+        class: ["relative group", orientation_classes],
         role: "region",
         aria_roledescription: "carousel",
         data: {
@@ -34,5 +32,9 @@ def default_options
         axis: (@orientation == :horizontal) ? "x" : "y"
       }
     end
+
+    def orientation_classes
+      (@orientation == :horizontal) ? "is-horizontal" : "is-vertical"
+    end
   end
 end

lib/ruby_ui/carousel/carousel_content.rb

@@ -2,17 +2,6 @@
 
 module RubyUI
   class CarouselContent < Base
-    ORIENTATION_CLASSES = {
-      horizontal: "-ml-4",
-      vertical: "-mt-4 flex-col"
-    }
-
-    def initialize(**attrs)
-      @orientation = CarouselContext.orientation || :horizontal
-
-      super
-    end
-
     def view_template(&)
       div(class: "overflow-hidden", data: {ruby_ui__carousel_target: "viewport"}) do
         div(**attrs, &)
@@ -23,7 +12,11 @@ def view_template(&)
 
     def default_attrs
       {
-        class: ["flex", ORIENTATION_CLASSES[@orientation]]
+        class: [
+          "flex",
+          "group-[.is-horizontal]:-ml-4",
+          "group-[.is-vertical]:-mt-4 group-[.is-vertical]:flex-col"
+        ]
       }
     end
   end

lib/ruby_ui/carousel/carousel_context.rb

@@ -27,7 +27,7 @@ export default class extends Controller {
 
     this.carousel.on("init", this.#updateControls.bind(this))
     this.carousel.on("reInit", this.#updateControls.bind(this))
-    this.carousel.on("select", this.#handleSelect.bind(this))
+    this.carousel.on("select", this.#updateControls.bind(this))
   }
 
   destroyCarousel() {
@@ -42,11 +42,6 @@ export default class extends Controller {
     this.carousel.scrollPrev()
   }
 
-  #handleSelect() {
-    this.#updateControls()
-    this.dispatch("select", { detail: { carousel: this.carousel } })
-  }
-
   #updateControls() {
     this.#toggleButtonsDisabledState(this.nextButtonTargets, !this.carousel.canScrollNext())
     this.#toggleButtonsDisabledState(this.prevButtonTargets, !this.carousel.canScrollPrev())

lib/ruby_ui/carousel/carousel_controller.js

@@ -2,17 +2,6 @@
 
 module RubyUI
   class CarouselItem < Base
-    ORIENTATION_CLASSES = {
-      horizontal: "pl-4",
-      vertical: "pt-4"
-    }
-
-    def initialize(**attrs)
-      @orientation = CarouselContext.orientation || :horizontal
-
-      super
-    end
-
     def view_template(&)
       div(**attrs, &)
     end
@@ -23,7 +12,11 @@ def default_attrs
       {
         role: "group",
         aria_roledescription: "slide",
-        class: ["min-w-0 shrink-0 grow-0 basis-full", ORIENTATION_CLASSES[@orientation]]
+        class: [
+          "min-w-0 shrink-0 grow-0 basis-full",
+          "group-[.is-horizontal]:pl-4",
+          "group-[.is-vertical]:pt-4"
+        ]
       }
     end
   end

lib/ruby_ui/carousel/carousel_item.rb

@@ -2,17 +2,6 @@
 
 module RubyUI
   class CarouselNext < Base
-    ORIENTATION_CLASSES = {
-      horizontal: "-right-12 top-1/2 -translate-y-1/2",
-      vertical: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90"
-    }
-
-    def initialize(**attrs)
-      @orientation = CarouselContext.orientation || :horizontal
-
-      super
-    end
-
     def view_template(&)
       Button(**attrs) do
         icon
@@ -25,7 +14,11 @@ def default_attrs
       {
         variant: :outline,
         icon: true,
-        class: ["absolute h-8 w-8 rounded-full", ORIENTATION_CLASSES[@orientation]],
+        class: [
+          "absolute h-8 w-8 rounded-full",
+          "group-[.is-horizontal]:-right-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2",
+          "group-[.is-vertical]:-bottom-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90"
+        ],
         disabled: true,
         data: {
           action: "click->ruby-ui--carousel#scrollNext",

lib/ruby_ui/carousel/carousel_next.rb

@@ -2,17 +2,6 @@
 
 module RubyUI
   class CarouselPrevious < Base
-    ORIENTATION_CLASSES = {
-      horizontal: "-left-12 top-1/2 -translate-y-1/2",
-      vertical: "-top-12 left-1/2 -translate-x-1/2 rotate-90"
-    }
-
-    def initialize(**attrs)
-      @orientation = CarouselContext.orientation || :horizontal
-
-      super
-    end
-
     def view_template(&)
       Button(**attrs) do
         icon
@@ -26,7 +15,11 @@ def default_attrs
       {
         variant: :outline,
         icon: true,
-        class: ["absolute h-8 w-8 rounded-full", ORIENTATION_CLASSES[@orientation]],
+        class: [
+          "absolute h-8 w-8 rounded-full",
+          "group-[.is-horizontal]:-left-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2",
+          "group-[.is-vertical]:-top-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90"
+        ],
         disabled: true,
         data: {
           action: "click->ruby-ui--carousel#scrollPrev",

lib/ruby_ui/carousel/carousel_previous.rb

@@ -16,11 +16,12 @@ def test_render_with_all_items
 
     assert_match(/Item/, output)
     assert_match(/button/, output)
+    assert_match(/ is-horizontal/, output)
   end
 
-  def test_render_with_vertical_orientation
+  def test_render_with_horizontal_orientation
     output = phlex do
-      RubyUI.Carousel(orientation: :vertical) do
+      RubyUI.Carousel(orientation: :horizontal) do
         RubyUI.CarouselContent() do
           RubyUI.CarouselItem() { "Item" }
         end
@@ -29,31 +30,20 @@ def test_render_with_vertical_orientation
       end
     end
 
-    assert_match(/-mt-4 flex-col/, output)
-    assert_match(/pt-4/, output)
-    assert_match(/-top-12/, output)
-    assert_match(/-bottom-12/, output)
-  end
-
-  def test_sets_context_while_rendering
-    phlex do
-      RubyUI.Carousel(orientation: :test) do
-        assert_equal ({orientation: :test}), Thread.current[:ruby_ui__carousel_state]
-      end
-    end
+    assert_match(/ is-horizontal/, output)
   end
 
-  def test_clears_context_after_render
-    phlex do
+  def test_render_with_vertical_orientation
+    output = phlex do
       RubyUI.Carousel(orientation: :vertical) do
-        RubyUI.CarouselContent do
-          RubyUI.CarouselItem { "Item" }
+        RubyUI.CarouselContent() do
+          RubyUI.CarouselItem() { "Item" }
         end
         RubyUI.CarouselPrevious()
         RubyUI.CarouselNext()
       end
     end
 
-    assert_nil Thread.current[:ruby_ui__carousel_state]
+    assert_match(/ is-vertical/, output)
   end
 end