Add Carousel component

Author: lsouoliveira

lib/generators/ruby_ui/dependencies.yml

@@ -10,6 +10,10 @@ calendar:
   js_packages:
     - "mustache"
 
+carousel:
+  js_packages:
+    - "embla-carousel"
+
 chart:
   js_packages:
     - "chart.js"

lib/ruby_ui/carousel/carousel.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Carousel < Base
+    def initialize(orientation: :horizontal, options: {}, **user_attrs)
+      @orientation = orientation
+      @options = options
+
+      super(**user_attrs)
+    end
+
+    def view_template(&)
+      CarouselContext.with_context(orientation: @orientation) do
+        div(**attrs, &)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative",
+        role: "region",
+        aria_roledescription: "carousel",
+        data: {
+          controller: "ruby-ui--carousel",
+          ruby_ui__carousel_options_value: default_options.merge(@options).to_json
+        }
+      }
+    end
+
+    def default_options
+      {
+        axis: (@orientation == :horizontal) ? "x" : "y"
+      }
+    end
+  end
+end

lib/ruby_ui/carousel/carousel_content.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+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, &)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: ["flex", ORIENTATION_CLASSES[@orientation]]
+      }
+    end
+  end
+end

lib/ruby_ui/carousel/carousel_context.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CarouselContext
+    def self.with_context(**state)
+      Thread.current[:ruby_ui__carousel_state] = state
+      yield
+    ensure
+      Thread.current[:ruby_ui__carousel_state] = nil
+    end
+
+    def self.state
+      Thread.current[:ruby_ui__carousel_state] || {}
+    end
+
+    def self.orientation
+      state[:orientation]
+    end
+  end
+end

lib/ruby_ui/carousel/carousel_controller.js

@@ -0,0 +1,72 @@
+import { Controller } from "@hotwired/stimulus";
+import EmblaCarousel from 'embla-carousel'
+
+const DEFAULT_OPTIONS = {
+  loop: true
+}
+
+export default class extends Controller {
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    }
+  }
+  static targets = ["viewport", "nextButton", "prevButton"]
+
+  connect() {
+    this.initCarousel(this.#mergedOptions)
+  }
+
+  disconnect() {
+    this.destroyCarousel()
+  }
+
+  initCarousel(options, plugins = []) {
+    this.carousel = EmblaCarousel(this.viewportTarget, options, plugins)
+    this.carousel.on("init", this.#handleInit.bind(this))
+    this.carousel.on("reInit", this.#handleReInit.bind(this))
+    this.carousel.on("select", this.#handleSelect.bind(this))
+  }
+
+  destroyCarousel() {
+    this.carousel.destroy()
+  }
+
+  scrollNext() {
+    this.carousel.scrollNext()
+  }
+
+  scrollPrev() {
+    this.carousel.scrollPrev()
+  }
+
+  #handleInit() {
+    this.#updateControls()
+  }
+
+  #handleReInit() {
+    this.#updateControls()
+  }
+
+  #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())
+  }
+
+  #toggleButtonsDisabledState(buttons, isDisabled) {
+    buttons.forEach((button) => button.disabled = isDisabled)
+  }
+
+  get #mergedOptions() {
+    return {
+      ...DEFAULT_OPTIONS,
+      ...this.optionsValue
+    }
+  }
+}

lib/ruby_ui/carousel/carousel_item.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+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
+
+    private
+
+    def default_attrs
+      {
+        role: "group",
+        aria_roledescription: "slide",
+        class: ["min-w-0 shrink-0 grow-0 basis-full", ORIENTATION_CLASSES[@orientation]]
+      }
+    end
+  end
+end

lib/ruby_ui/carousel/carousel_next.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+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
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :outline,
+        icon: true,
+        class: ["absolute h-8 w-8 rounded-full", ORIENTATION_CLASSES[@orientation]],
+        disabled: true,
+        data: {
+          action: "click->ruby-ui--carousel#scrollNext",
+          ruby_ui__carousel_target: "nextButton"
+        }
+      }
+    end
+
+    def icon
+      svg(
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(d: "M5 12h14")
+        s.path(d: "m12 5 7 7-7 7")
+      end
+    end
+  end
+end

lib/ruby_ui/carousel/carousel_previous.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+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
+        span(class: "sr-only") { "Next slide" }
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :outline,
+        icon: true,
+        class: ["absolute h-8 w-8 rounded-full", ORIENTATION_CLASSES[@orientation]],
+        disabled: true,
+        data: {
+          action: "click->ruby-ui--carousel#scrollPrev",
+          ruby_ui__carousel_target: "prevButton"
+        }
+      }
+    end
+
+    def icon
+      svg(
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(d: "m12 19-7-7 7-7")
+        s.path(d: "M19 12H5")
+      end
+    end
+  end
+end

test/ruby_ui/carousel_test.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::CarouselTest < ComponentTest
+  def test_render_with_all_items
+    output = phlex do
+      RubyUI.Carousel do
+        RubyUI.CarouselContent do
+          RubyUI.CarouselItem { "Item" }
+        end
+        RubyUI.CarouselPrevious()
+        RubyUI.CarouselNext()
+      end
+    end
+
+    assert_match(/Item/, output)
+    assert_match(/button/, output)
+  end
+
+  def test_render_with_vertical_orientation
+    output = phlex do
+      RubyUI.Carousel(orientation: :vertical) do
+        RubyUI.CarouselContent() do
+          RubyUI.CarouselItem() { "Item" }
+        end
+        RubyUI.CarouselPrevious()
+        RubyUI.CarouselNext()
+      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
+  end
+
+  def test_clears_context_after_render
+    phlex do
+      RubyUI.Carousel(orientation: :vertical) do
+        RubyUI.CarouselContent do
+          RubyUI.CarouselItem { "Item" }
+        end
+        RubyUI.CarouselPrevious()
+        RubyUI.CarouselNext()
+      end
+    end
+
+    assert_nil Thread.current[:ruby_ui__carousel_state]
+  end
+end