ruby_ui 1.0.0.beta1 → 1.0.0.rc1

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/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/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/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/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/ruby_ui/combobox/combobox.rb

@@ -2,6 +2,11 @@
 
 module RubyUI
   class Combobox < Base
+    def initialize(term: "items", **)
+      @term = term
+      super(**)
+    end
+
     def view_template(&)
       div(**attrs, &)
     end
@@ -10,14 +15,11 @@ module RubyUI
 
     def default_attrs
       {
+        role: "combobox",
         data: {
           controller: "ruby-ui--combobox",
-          ruby_ui__combobox_open_value: "false",
-          action: "click@window->ruby-ui--combobox#onClickOutside",
-          ruby_ui__combobox_ruby_ui__combobox_content_outlet: ".combobox-content",
-          ruby_ui__combobox_ruby_ui__combobox_item_outlet: ".combobox-item"
-        },
-        class: "group/combobox w-full relative"
+          ruby_ui__combobox_term_value: @term.to_s
+        }
       }
     end
   end

data/lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxCheckbox < Base
+    def view_template
+      input(type: "checkbox", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ],
+        data: {
+          ruby_ui__combobox_target: "input",
+          action: "ruby-ui--combobox#inputChanged"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -0,0 +1,176 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
+
+// Connects to data-controller="ruby-ui--combobox"
+export default class extends Controller {
+  static values = {
+    term: String
+  }
+
+  static targets = [
+    "input",
+    "toggleAll",
+    "popover",
+    "item",
+    "emptyState",
+    "searchInput",
+    "trigger",
+    "triggerContent"
+  ]
+
+  selectedItemIndex = null
+
+  connect() {
+    this.updateTriggerContent()
+  }
+
+  disconnect() {
+    if (this.cleanup) { this.cleanup() }
+  }
+
+  inputChanged(e) {
+    this.updateTriggerContent()
+
+    if (e.target.type == "radio") {
+      this.closePopover()
+    }
+
+    if (this.hasToggleAllTarget && !e.target.checked) {
+      this.toggleAllTarget.checked = false
+    }
+  }
+
+  inputContent(input) {
+    return input.dataset.text || input.parentElement.textContent
+  }
+
+  toggleAllItems() {
+    const isChecked = this.toggleAllTarget.checked
+    this.inputTargets.forEach(input => input.checked = isChecked)
+    this.updateTriggerContent()
+  }
+
+  updateTriggerContent() {
+    const checkedInputs = this.inputTargets.filter(input => input.checked)
+
+    if (checkedInputs.length == 0) {
+      this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder
+    } else if (checkedInputs.length === 1) {
+      this.triggerContentTarget.innerText = this.inputContent(checkedInputs[0])
+    } else {
+      this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`
+    }
+  }
+
+  openPopover(event) {
+    event.preventDefault()
+
+    this.updatePopoverPosition()
+    this.updatePopoverWidth()
+    this.triggerTarget.ariaExpanded = "true"
+    this.selectedItemIndex = null
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
+    this.popoverTarget.showPopover()
+  }
+
+  closePopover() {
+    this.triggerTarget.ariaExpanded = "false"
+    this.popoverTarget.hidePopover()
+  }
+
+  filterItems(e) {
+    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) {
+      return
+    }
+
+    const filterTerm = this.searchInputTarget.value.toLowerCase()
+
+    if (this.hasToggleAllTarget) {
+      if (filterTerm) this.toggleAllTarget.parentElement.classList.add("hidden")
+      else this.toggleAllTarget.parentElement.classList.remove("hidden")
+    }
+
+    let resultCount = 0
+
+    this.selectedItemIndex = null
+
+    this.inputTargets.forEach((input) => {
+      const text = this.inputContent(input).toLowerCase()
+
+      if (text.indexOf(filterTerm) > -1) {
+        input.parentElement.classList.remove("hidden")
+        resultCount++
+      } else {
+        input.parentElement.classList.add("hidden")
+      }
+    })
+
+    this.emptyStateTarget.classList.toggle("hidden", resultCount !== 0)
+  }
+
+  keyDownPressed() {
+    if (this.selectedItemIndex !== null) {
+      this.selectedItemIndex++
+    } else {
+      this.selectedItemIndex = 0
+    }
+
+    this.focusSelectedInput()
+  }
+
+  keyUpPressed() {
+    if (this.selectedItemIndex !== null) {
+      this.selectedItemIndex--
+    } else {
+      this.selectedItemIndex = -1
+    }
+
+    this.focusSelectedInput()
+  }
+
+  focusSelectedInput() {
+    const visibleInputs = this.inputTargets.filter(input => !input.parentElement.classList.contains("hidden"))
+
+    this.wrapSelectedInputIndex(visibleInputs.length)
+
+    visibleInputs.forEach((input, index) => {
+      if (index == this.selectedItemIndex) {
+        input.parentElement.ariaCurrent = "true"
+        input.parentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+      } else {
+        input.parentElement.ariaCurrent = "false"
+      }
+    })
+  }
+
+  keyEnterPressed(event) {
+    event.preventDefault()
+    const option = this.itemTargets.find(item => item.ariaCurrent === "true")
+
+    if (option) {
+      option.click()
+    }
+  }
+
+  wrapSelectedInputIndex(length) {
+    this.selectedItemIndex = ((this.selectedItemIndex % length) + length) % length
+  }
+
+  updatePopoverPosition() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
+      computePosition(this.triggerTarget, this.popoverTarget, {
+        placement: 'bottom-start',
+        middleware: [offset(4), flip()],
+      }).then(({ x, y }) => {
+        Object.assign(this.popoverTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+
+  updatePopoverWidth() {
+    this.popoverTarget.style.width = `${this.triggerTarget.offsetWidth}px`
+  }
+}

data/lib/ruby_ui/combobox/{combobox_empty.rb → combobox_empty_state.rb}

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module RubyUI
-  class ComboboxEmpty < Base
+  class ComboboxEmptyState < Base
     def view_template(&)
       div(**attrs, &)
     end
@@ -13,7 +13,7 @@ module RubyUI
         role: "presentation",
         class: "hidden py-6 text-center text-sm",
         data: {
-          ruby_ui__combobox_content_target: "empty"
+          ruby_ui__combobox_target: "emptyState"
         }
       }
     end

data/lib/ruby_ui/combobox/combobox_item.rb

@@ -2,51 +2,23 @@
 
 module RubyUI
   class ComboboxItem < Base
-    def initialize(value: nil, **attrs)
-      @value = value
-      super(**attrs)
-    end
-
-    def view_template(&block)
-      div(**attrs) do
-        div(class: "invisible group-aria-selected:visible") { icon }
-        block.call
-      end
+    def view_template(&)
+      label(**attrs, &)
     end
 
     private
 
-    def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        class: "mr-2 h-4 w-4",
-        stroke_width: "2",
-        stroke_linecap: "round",
-        stroke_linejoin: "round"
-      ) do |s|
-        s.path(
-          d: "M20 6 9 17l-5-5"
-        )
-      end
-    end
-
     def default_attrs
       {
+        class: [
+          "flex flex-row w-full text-wrap [&>span,&>div]:truncate gap-2 items-center rounded-sm px-2 py-1 text-sm outline-none cursor-pointer",
+          "select-none has-[:checked]:bg-accent hover:bg-accent p-2",
+          "[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2"
+        ],
         role: "option",
-        tabindex: "0",
-        class:
-          "combobox-item group relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-[current]:bg-accent aria-[current]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         data: {
-          value: @value,
-          ruby_ui__combobox_target: "item",
-          ruby_ui__combobox_content_target: "item",
-          controller: "ruby-ui--combobox-item",
-          action: "click->ruby-ui--combobox#onItemSelected"
-        },
-        aria_selected: "false"
+          ruby_ui__combobox_target: "item"
+        }
       }
     end
   end

data/lib/ruby_ui/combobox/combobox_list.rb

@@ -2,11 +2,6 @@
 
 module RubyUI
   class ComboboxList < Base
-    def initialize(**attrs)
-      @id = "list#{SecureRandom.hex(4)}"
-      super
-    end
-
     def view_template(&)
       div(**attrs, &)
     end
@@ -15,12 +10,8 @@ module RubyUI
 
     def default_attrs
       {
-        id: @id,
-        data: {
-          ruby_ui__combobox_target: "list"
-        },
-        role: "listbox",
-        tabindex: "-1"
+        class: "flex flex-col gap-1 p-1 max-h-72 overflow-y-auto text-foreground",
+        role: "listbox"
       }
     end
   end

data/lib/ruby_ui/combobox/combobox_list_group.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxListGroup < Base
+    LABEL_CLASSES = "before:content-[attr(label)] before:px-2 before:py-1.5 before:text-xs before:font-medium before:text-muted-foreground before:not-italic"
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: ["hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1 border-b", LABEL_CLASSES],
+        role: "group"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_popover.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxPopover < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inset-auto m-0 absolute border bg-background shadow-lg rounded-lg",
+        role: "popover",
+        autofocus: true,
+        popover: true,
+        data: {
+          ruby_ui__combobox_target: "popover",
+          action: %w[
+            keydown.down->ruby-ui--combobox#keyDownPressed
+            keydown.up->ruby-ui--combobox#keyUpPressed
+            keydown.enter->ruby-ui--combobox#keyEnterPressed
+            keydown.esc->ruby-ui--combobox#closeDialog:prevent
+            resize@window->ruby-ui--combobox#updatePopoverWidth
+          ]
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_radio.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxRadio < Base
+    def view_template
+      input(type: "radio", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        data: {
+          ruby_ui__combobox_target: "input",
+          ruby_ui__form_field_target: "input",
+          action: %w[
+            ruby-ui--combobox#inputChanged
+            input->ruby-ui--form-field#onInput
+            invalid->ruby-ui--form-field#onInvalid
+          ]
+        }
+      }
+    end
+  end
+end