ruby_ui 1.0.0.pre.alpha.4 → 1.0.0.rc1

data/lib/ruby_ui/carousel/carousel_controller.js

@@ -0,0 +1,60 @@
+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.#updateControls.bind(this))
+    this.carousel.on("reInit", this.#updateControls.bind(this))
+    this.carousel.on("select", this.#updateControls.bind(this))
+  }
+
+  destroyCarousel() {
+    this.carousel.destroy()
+  }
+
+  scrollNext() {
+    this.carousel.scrollNext()
+  }
+
+  scrollPrev() {
+    this.carousel.scrollPrev()
+  }
+
+  #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
+    }
+  }
+}

data/lib/ruby_ui/carousel/carousel_item.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CarouselItem < Base
+    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",
+          "group-[.is-horizontal]:pl-4",
+          "group-[.is-vertical]:pt-4"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/carousel/carousel_next.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CarouselNext < Base
+    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",
+          "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",
+          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

data/lib/ruby_ui/carousel/carousel_previous.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CarouselPrevious < Base
+    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",
+          "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",
+          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

data/lib/{rbui → ruby_ui}/chart/chart.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Chart < Base
     def initialize(options: {}, **attrs)
       @options = options.to_json
@@ -15,8 +15,8 @@ module RBUI
 
     def default_attrs
       {
-        data_controller: "rbui--chart",
-        data_rbui__chart_options_value: @options
+        data_controller: "ruby-ui--chart",
+        data_ruby_ui__chart_options_value: @options
       }
     end
   end

data/lib/ruby_ui/chart/chart_controller.js

@@ -0,0 +1,103 @@
+import { Controller } from "@hotwired/stimulus"
+import Chart from 'chart.js/auto'
+
+// Chart controller
+export default class extends Controller {
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    }
+  }
+
+  // Function to initialize the chart when the controller is connected
+  connect() {
+    this.initDarkModeObserver()
+    this.initChart()
+  }
+
+  disconnect() {
+    this.darkModeObserver?.disconnect()
+    this.chart?.destroy()
+  }
+
+  // Function to initialize the chart
+  initChart() {
+    this.setColors()
+    const ctx = this.element.getContext('2d');
+    this.chart = new Chart(ctx, this.mergeOptionsWithDefaults());
+  }
+
+  setColors() {
+    this.setDefaultColorsForChart()
+  }
+
+  getThemeColor(name) {
+    const color = getComputedStyle(document.documentElement).getPropertyValue(`--${name}`)
+    const [hue, saturation, lightness] = color.split(' ')
+    return `hsl(${hue}, ${saturation}, ${lightness})`
+  }
+
+  defaultThemeColor() {
+    return {
+      backgroundColor: this.getThemeColor('background'),
+      hoverBackgroundColor: this.getThemeColor('accent'),
+      borderColor: this.getThemeColor('primary'),
+      borderWidth: 1,
+    }
+  }
+
+  // Function to set chart default colors
+  setDefaultColorsForChart() {
+    Chart.defaults.color = this.getThemeColor('muted-foreground') // font color
+    Chart.defaults.borderColor = this.getThemeColor('border') // border color
+    Chart.defaults.backgroundColor = this.getThemeColor('background') // background color
+
+    // tooltip colors
+    Chart.defaults.plugins.tooltip.backgroundColor = this.getThemeColor('background')
+    Chart.defaults.plugins.tooltip.borderColor = this.getThemeColor('border')
+    Chart.defaults.plugins.tooltip.titleColor = this.getThemeColor('foreground')
+    Chart.defaults.plugins.tooltip.bodyColor = this.getThemeColor('muted-foreground')
+    Chart.defaults.plugins.tooltip.borderWidth = 1
+
+    // legend
+    // options.plugins.legend.labels
+    Chart.defaults.plugins.legend.labels.boxWidth = 12
+    Chart.defaults.plugins.legend.labels.boxHeight = 12
+    Chart.defaults.plugins.legend.labels.borderWidth = 0
+    Chart.defaults.plugins.legend.labels.useBorderRadius = true
+    Chart.defaults.plugins.legend.labels.borderRadius = this.getThemeColor('radius')
+  }
+
+  // Function to refresh the chart
+  refreshChart() {
+    // Destroy the chart if it's a valid Chart.js instance
+    this.chart?.destroy()
+    // Reinitialize the chart
+    this.initChart()
+  }
+
+  // Function to initialize the dark mode observer
+  initDarkModeObserver() {
+    this.darkModeObserver = new MutationObserver(() => {
+      this.refreshChart()
+    })
+    this.darkModeObserver.observe(document.documentElement, { attributeFilter: ['class'] })
+  }
+
+  // Function to merge the options with the defaults
+  mergeOptionsWithDefaults() {
+    return {
+      ...this.optionsValue,
+      data: {
+        ...this.optionsValue.data,
+        datasets: this.optionsValue.data.datasets.map((dataset) => {
+          return {
+            ...this.defaultThemeColor(),
+            ...dataset,
+          }
+        })
+      }
+    }
+  }
+}

data/lib/{rbui → ruby_ui}/checkbox/checkbox.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Checkbox < Base
     def view_template
       input(**attrs)
@@ -12,9 +12,9 @@ module RBUI
       {
         type: "checkbox",
         data: {
-          rbui__form_field_target: "input",
-          rbui__checkbox_group_target: "checkbox",
-          action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid change->rbui--checkbox-group#onChange"
+          ruby_ui__form_field_target: "input",
+          ruby_ui__checkbox_group_target: "checkbox",
+          action: "change->ruby-ui--checkbox-group#onChange change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
         class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary"
       }

data/lib/{rbui → ruby_ui}/checkbox/checkbox_group.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CheckboxGroup < Base
     def view_template(&)
       div(**attrs, &)
@@ -12,7 +12,7 @@ module RBUI
       {
         role: "group",
         data: {
-          controller: "rbui--checkbox-group"
+          controller: "ruby-ui--checkbox-group"
         }
       }
     end

data/lib/ruby_ui/checkbox/checkbox_group_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["checkbox"];
+
+  connect() {
+    this.#handleRequired();
+  }
+
+  onChange() {
+    this.#handleRequired();
+  }
+
+  #handleRequired() {
+    if (!this.element.hasAttribute("data-required")) return;
+
+    const checked = this.checkboxTargets.some(({ checked }) => checked);
+
+    this.checkboxTargets.forEach((checkbox) => (checkbox.required = !checked));
+  }
+}

data/lib/{rbui → ruby_ui}/clipboard/clipboard.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Clipboard < Base
     def initialize(options: {}, success: "Copied!", error: "Copy Failed!", **attrs)
       @options = options
@@ -30,11 +30,11 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--clipboard",
-          action: "click@window->rbui--clipboard#onClickOutside",
-          rbui__clipboard_success_value: @success,
-          rbui__clipboard_error_value: @error,
-          rbui__clipboard_options_value: @options.to_json
+          controller: "ruby-ui--clipboard",
+          action: "click@window->ruby-ui--clipboard#onClickOutside",
+          ruby_ui__clipboard_success_value: @success,
+          ruby_ui__clipboard_error_value: @error,
+          ruby_ui__clipboard_options_value: @options.to_json
         }
       }
     end

data/lib/ruby_ui/clipboard/clipboard_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, flip, shift } from "@floating-ui/dom";
+
+// Connects to data-controller="accordion"
+export default class extends Controller {
+  static targets = ['trigger', 'source', 'successPopover', 'errorPopover']
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    },
+  }
+
+  copy() {
+    let sourceElement = this.sourceTarget.children[0];
+    if (!sourceElement) {
+      this.showErrorPopover();
+      return;
+    }
+    let textToCopy = sourceElement.tagName === 'INPUT' ? sourceElement.value : sourceElement.innerText;
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      this.#showSuccessPopover();
+    }).catch(() => {
+      this.#showErrorPopover();
+    })
+  }
+
+  onClickOutside() {
+    if (!this.successPopoverTarget.classList.contains("hidden")) this.successPopoverTarget.classList.add("hidden");
+    if (!this.errorPopoverTarget.classList.contains("hidden")) this.errorPopoverTarget.classList.add("hidden");
+  }
+
+  #computeTooltip(popoverElement) {
+    computePosition(this.triggerTarget, popoverElement, {
+      placement: this.optionsValue.placement || "top",
+      middleware: [flip(), shift()],
+    }).then(({ x, y }) => {
+      Object.assign(popoverElement.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+
+  #showSuccessPopover() {
+    this.#computeTooltip(this.successPopoverTarget);
+    this.successPopoverTarget.classList.remove("hidden");
+  }
+
+  #showErrorPopover() {
+    this.#computeTooltip(this.errorPopoverTarget);
+    this.errorPopoverTarget.classList.remove("hidden");
+  }
+}

data/lib/{rbui → ruby_ui}/clipboard/clipboard_popover.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ClipboardPopover < Base
     def initialize(type:, **attrs)
       @type = type
@@ -11,7 +11,7 @@ module RBUI
       div(
         class: "hidden",
         style: "width: max-content; position: absolute; top: 0; left: 0;",
-        data: {rbui__clipboard_target: clipboard_target}
+        data: {ruby_ui__clipboard_target: clipboard_target}
       ) do
         div(**attrs, &block)
       end

data/lib/{rbui → ruby_ui}/clipboard/clipboard_source.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ClipboardSource < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,7 +11,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__clipboard_target: "source"
+          ruby_ui__clipboard_target: "source"
         }
       }
     end

data/lib/{rbui → ruby_ui}/clipboard/clipboard_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ClipboardTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,8 +11,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__clipboard_target: "trigger",
-          action: "click->rbui--clipboard#copy"
+          ruby_ui__clipboard_target: "trigger",
+          action: "click->ruby-ui--clipboard#copy"
         }
       }
     end

data/lib/{rbui → ruby_ui}/codeblock/codeblock.rb

@@ -2,7 +2,7 @@
 
 require "rouge"
 
-module RBUI
+module RubyUI
   class Codeblock < Base
     FORMATTER = ::Rouge::Formatters::HTML.new
     ROUGE_CSS = Rouge::Themes::Github.mode(:dark).render(scope: ".highlight") # See themes here: https://rouge-ruby.github.io/docs/Rouge/CSSTheme.html
@@ -34,18 +34,19 @@ module RBUI
 
     def default_attrs
       {
+        style: {tab_size: 2},
         class: "highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"
       }
     end
 
     def with_clipboard
-      RBUI.Clipboard(success: @clipboard_success, error: @clipboard_error, class: "relative") do
-        RBUI.ClipboardSource do
+      RubyUI.Clipboard(success: @clipboard_success, error: @clipboard_error, class: "relative") do
+        RubyUI.ClipboardSource do
           codeblock
         end
         div(class: "absolute top-2 right-2") do
-          RBUI.ClipboardTrigger do
-            RBUI.Button(variant: :ghost, size: :sm, icon: true, class: "text-white hover:text-white hover:bg-white/20") { clipboard_icon }
+          RubyUI.ClipboardTrigger do
+            RubyUI.Button(variant: :ghost, size: :sm, icon: true, class: "text-white hover:text-white hover:bg-white/20") { clipboard_icon }
           end
         end
       end
@@ -54,11 +55,7 @@ module RBUI
     def codeblock
       div(**attrs) do
         div(class: "after:content-none") do
-          pre do
-            unsafe_raw FORMATTER.format(
-              lexer.lex(@code)
-            )
-          end
+          pre { raw(safe(FORMATTER.format(lexer.lex(@code)))) }
         end
       end
     end

data/lib/{rbui → ruby_ui}/collapsible/collapsible.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Collapsible < Base
     def initialize(open: false, **attrs)
       @open = open
@@ -16,8 +16,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--collapsible",
-          rbui__collapsible_open_value: @open
+          controller: "ruby-ui--collapsible",
+          ruby_ui__collapsible_open_value: @open
         }
       }
     end

data/lib/{rbui → ruby_ui}/collapsible/collapsible_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CollapsibleContent < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        data: {rbui__collapsible_target: "content"},
+        data: {ruby_ui__collapsible_target: "content"},
         class: "overflow-y-hidden"
       }
     end

data/lib/ruby_ui/collapsible/collapsible_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="accordion"
+export default class extends Controller {
+  static targets = ['content']
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  }
+
+  connect() {
+    // Set the initial state of the accordion
+    this.openValue ? this.open() : this.close()
+  }
+
+  // Toggle the 'open' value
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  // Handle changes in the 'open' value
+  openValueChanged(isOpen, wasOpen) {
+    if (isOpen) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  // Open the accordion content
+  open() {
+    if (this.hasContentTarget) {
+      this.contentTarget.classList.remove('hidden')
+      this.openValue = true
+    }
+  }
+
+  // Close the accordion content
+  close() {
+    if (this.hasContentTarget) {
+      this.contentTarget.classList.add('hidden')
+      this.openValue = false
+    }
+  }
+}

data/lib/{rbui → ruby_ui}/collapsible/collapsible_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CollapsibleTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,7 +11,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          action: "click->rbui--collapsible#toggle"
+          action: "click->ruby-ui--collapsible#toggle"
         }
       }
     end

data/lib/ruby_ui/combobox/combobox.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Combobox < Base
+    def initialize(term: "items", **)
+      @term = term
+      super(**)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "combobox",
+        data: {
+          controller: "ruby-ui--combobox",
+          ruby_ui__combobox_term_value: @term.to_s
+        }
+      }
+    end
+  end
+end