ruby_ui 1.0.0.beta1 → 1.0.0.rc1

data/lib/ruby_ui/hover_card/hover_card_controller.js

@@ -0,0 +1,144 @@
+import { Controller } from "@hotwired/stimulus";
+import tippy from "tippy.js";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "menuItem"];
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    },
+    // make content width of the trigger element (true/false)
+    matchWidth: {
+      type: Boolean,
+      default: false,
+    }
+  }
+
+  connect() {
+    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
+    this.initializeTippy();
+    this.selectedIndex = -1;
+  }
+
+  disconnect() {
+    this.destroyTippy();
+  }
+
+  initializeTippy() {
+    const defaultOptions = {
+      content: this.contentTarget.innerHTML,
+      allowHTML: true,
+      interactive: true,
+      onShow: (instance) => {
+        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
+        this.addEventListeners();
+      },
+      onHide: () => {
+        this.removeEventListeners();
+        this.deselectAll();
+      },
+      popperOptions: {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 4]
+            },
+          },
+        ],
+      }
+    };
+
+    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
+    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  }
+
+  destroyTippy() {
+    if (this.tippy) {
+      this.tippy.destroy();
+    }
+  }
+
+  setContentWidth(instance) {
+    // box-sizing: border-box
+    const content = instance.popper.querySelector('.tippy-content');
+    if (content) {
+      content.style.width = `${instance.reference.offsetWidth}px`;
+    }
+  }
+
+  handleContextMenu(event) {
+    event.preventDefault();
+    this.open();
+  }
+
+  open() {
+    this.tippy.show();
+  }
+
+  close() {
+    this.tippy.hide();
+  }
+
+  handleKeydown(e) {
+    // return if no menu items (one line fix for)
+    if (this.menuItemTargets.length === 0) { return; }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      this.updateSelectedItem(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this.updateSelectedItem(-1);
+    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+      e.preventDefault();
+      this.menuItemTargets[this.selectedIndex].click();
+    }
+  }
+
+  updateSelectedItem(direction) {
+    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
+    this.menuItemTargets.forEach((item, index) => {
+      if (item.getAttribute('aria-selected') === 'true') {
+        this.selectedIndex = index;
+      }
+    });
+
+    if (this.selectedIndex >= 0) {
+      this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.menuItemTargets.length - 1;
+    } else if (this.selectedIndex >= this.menuItemTargets.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
+  }
+
+  toggleAriaSelected(element, isSelected) {
+    // Add or remove attribute
+    if (isSelected) {
+      element.setAttribute('aria-selected', 'true');
+    } else {
+      element.removeAttribute('aria-selected');
+    }
+  }
+
+  deselectAll() {
+    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+
+  addEventListeners() {
+    document.addEventListener('keydown', this.boundHandleKeydown);
+  }
+
+  removeEventListeners() {
+    document.removeEventListener('keydown', this.boundHandleKeydown);
+  }
+}

data/lib/ruby_ui/masked_input/masked_input_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+import { MaskInput } from "maska";
+
+// Connects to data-controller="ruby-ui--masked-input"
+export default class extends Controller {
+  connect() {
+    new MaskInput(this.element)
+  }
+}

data/lib/ruby_ui/popover/popover_controller.js

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = {
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    trigger: { type: String, default: "hover" },
+  };
+
+  connect() {
+    this.closeTimeout = null;
+    this.cleanup = null;
+    this.addEventListeners();
+  }
+
+  disconnect() {
+    this.removeEventListeners();
+    if (this.cleanup) {
+      this.cleanup();
+    }
+  }
+
+  addEventListeners() {
+    if (this.triggerValue === "hover") {
+      this.triggerTarget.addEventListener("mouseenter", this.handleMouseEnter);
+      this.triggerTarget.addEventListener("mouseleave", this.handleMouseLeave);
+      this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
+      this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    } else if (this.triggerValue === "click") {
+      this.triggerTarget.addEventListener("click", this.handleClick);
+      document.addEventListener("click", this.handleOutsideClick);
+    }
+  }
+
+  removeEventListeners() {
+    this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.removeEventListener("click", this.handleClick);
+    document.removeEventListener("click", this.handleOutsideClick);
+  }
+
+  handleMouseEnter = () => {
+    clearTimeout(this.closeTimeout);
+    this.openValue = true;
+    this.showPopover();
+  };
+
+  handleMouseLeave = () => {
+    this.closeTimeout = setTimeout(() => {
+      this.openValue = false;
+      this.hidePopover();
+    }, 100);
+  };
+
+  handleClick = (event) => {
+    event.stopPropagation();
+    this.openValue = !this.openValue;
+    this.openValue ? this.showPopover() : this.hidePopover();
+  };
+
+  handleOutsideClick = (event) => {
+    if (!this.element.contains(event.target) && this.openValue) {
+      this.openValue = false;
+      this.hidePopover();
+    }
+  };
+
+  showPopover() {
+    this.contentTarget.classList.remove("hidden");
+    this.updatePosition();
+  }
+
+  hidePopover() {
+    this.contentTarget.classList.add("hidden");
+    if (this.cleanup) {
+      this.cleanup();
+    }
+  }
+
+  updatePosition() {
+    if (this.cleanup) {
+      this.cleanup();
+    }
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom",
+        middleware: [flip(), shift(), offset(8)],
+      }).then(({ x, y }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+}

data/lib/ruby_ui/progress/progress.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Progress < Base
+    def initialize(value: 0, **attrs)
+      @value = value.to_f.clamp(0, 100)
+
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        div(**indicator_attrs)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "progressbar",
+        aria_valuenow: @value,
+        aria_valuemin: 0,
+        aria_valuemax: 100,
+        aria_valuetext: "#{@value}%",
+        class: "relative h-2 overflow-hidden rounded-full bg-primary/20 [&>*]:bg-primary"
+      }
+    end
+
+    def indicator_attrs
+      {
+        class: "h-full w-full flex-1",
+        style: "transform: translateX(-#{100 - @value}%)"
+      }
+    end
+  end
+end

data/lib/ruby_ui/radio_button/radio_button.rb

@@ -15,7 +15,10 @@ module RubyUI
           ruby_ui__form_field_target: "input",
           action: "change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
-        class: "h-4 w-4 p-0 border-primary rounded-full flex-none"
+        class: [
+          "h-4 w-4 p-0 border-primary rounded-full flex-none",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ]
       }
     end
   end

data/lib/ruby_ui/select/select_content.rb

@@ -10,7 +10,7 @@ module RubyUI
     def view_template(&block)
       div(**attrs) do
         div(
-          class: "max-h-96 min-w-max overflow-auto rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[ruby-ui--select-open-value=true]/select:animate-in fade-out-0 group-data-[ruby-ui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[ruby-ui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
+          class: "max-h-96 w-full text-wrap overflow-auto rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[ruby-ui--select-open-value=true]/select:animate-in fade-out-0 group-data-[ruby-ui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[ruby-ui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
         )
       end
     end

data/lib/ruby_ui/select/select_controller.js

@@ -0,0 +1,171 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "input", "value", "item"];
+  static values = { open: Boolean };
+  static outlets = ["ruby-ui--select-item"];
+
+  constructor(...args) {
+    super(...args);
+    this.cleanup;
+  }
+
+  connect() {
+    this.setFloatingElement();
+    this.generateItemsIds();
+  }
+
+  disconnect() {
+    this.cleanup();
+  }
+
+  selectItem(event) {
+    event.preventDefault();
+
+    this.rubyUiSelectItemOutlets.forEach((item) =>
+      item.handleSelectItem(event),
+    );
+
+    const oldValue = this.inputTarget.value;
+    const newValue = event.target.dataset.value;
+
+    this.inputTarget.value = newValue;
+    this.valueTarget.innerText = event.target.innerText;
+
+    this.dispatchOnChange(oldValue, newValue);
+    this.closeContent();
+  }
+
+  onClick() {
+    this.toogleContent();
+
+    if (this.openValue) {
+      this.setFocusAndCurrent();
+    } else {
+      this.resetCurrent();
+    }
+  }
+
+  handleKeyDown(event) {
+    event.preventDefault();
+
+    const currentIndex = this.itemTargets.findIndex(
+      (item) => item.getAttribute("aria-current") === "true",
+    );
+
+    if (currentIndex + 1 < this.itemTargets.length) {
+      this.itemTargets[currentIndex].removeAttribute("aria-current");
+      this.setAriaCurrentAndActiveDescendant(currentIndex + 1);
+    }
+  }
+
+  handleKeyUp(event) {
+    event.preventDefault();
+
+    const currentIndex = this.itemTargets.findIndex(
+      (item) => item.getAttribute("aria-current") === "true",
+    );
+
+    if (currentIndex > 0) {
+      this.itemTargets[currentIndex].removeAttribute("aria-current");
+      this.setAriaCurrentAndActiveDescendant(currentIndex - 1);
+    }
+  }
+
+  handleEsc(event) {
+    event.preventDefault();
+    this.closeContent();
+  }
+
+  setFocusAndCurrent() {
+    const selectedItem = this.itemTargets.find(
+      (item) => item.getAttribute("aria-selected") === "true",
+    );
+
+    if (selectedItem) {
+      selectedItem.focus({ preventScroll: true });
+      selectedItem.setAttribute("aria-current", "true");
+      this.triggerTarget.setAttribute(
+        "aria-activedescendant",
+        selectedItem.getAttribute("id"),
+      );
+    } else {
+      this.itemTarget.focus({ preventScroll: true });
+      this.itemTarget.setAttribute("aria-current", "true");
+      this.triggerTarget.setAttribute(
+        "aria-activedescendant",
+        this.itemTarget.getAttribute("id"),
+      );
+    }
+  }
+
+  resetCurrent() {
+    this.itemTargets.forEach((item) => item.removeAttribute("aria-current"));
+  }
+
+  clickOutside(event) {
+    if (!this.openValue) return;
+    if (this.element.contains(event.target)) return;
+
+    event.preventDefault();
+    this.toogleContent();
+  }
+
+  toogleContent() {
+    this.openValue = !this.openValue;
+    this.contentTarget.classList.toggle("hidden");
+    this.triggerTarget.setAttribute("aria-expanded", this.openValue);
+  }
+
+  setFloatingElement() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        middleware: [offset(4), flip()],
+      }).then(({ x, y }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+
+  generateItemsIds() {
+    const contentId = this.contentTarget.getAttribute("id");
+    this.triggerTarget.setAttribute("aria-controls", contentId);
+
+    this.itemTargets.forEach((item, index) => {
+      item.id = `${contentId}-${index}`;
+    });
+  }
+
+  setAriaCurrentAndActiveDescendant(currentIndex) {
+    const currentItem = this.itemTargets[currentIndex];
+    currentItem.focus({ preventScroll: true });
+    currentItem.setAttribute("aria-current", "true");
+    this.triggerTarget.setAttribute(
+      "aria-activedescendant",
+      currentItem.getAttribute("id"),
+    );
+  }
+
+  closeContent() {
+    this.toogleContent();
+    this.resetCurrent();
+
+    this.triggerTarget.setAttribute("aria-activedescendant", true);
+    this.triggerTarget.focus({ preventScroll: true });
+  }
+
+  dispatchOnChange(oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    const event = new InputEvent("change", {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    this.inputTarget.dispatchEvent(event);
+  }
+}

data/lib/ruby_ui/select/select_item_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus";
+export default class extends Controller {
+
+  handleSelectItem({ target }) {
+    if (this.element.dataset.value == target.dataset.value) {
+      this.element.setAttribute("aria-selected", true);
+    } else {
+      this.element.removeAttribute("aria-selected");
+    }
+  }
+}

data/lib/ruby_ui/select/select_value.rb

@@ -20,7 +20,7 @@ module RubyUI
         data: {
           ruby_ui__select_target: "value"
         },
-        class: "pointer-events-none"
+        class: "truncate pointer-events-none"
       }
     end
   end

data/lib/ruby_ui/separator/separator.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Separator < Base
+    ORIENTATIONS = %i[horizontal vertical].freeze
+
+    def initialize(as: :div, orientation: :horizontal, decorative: true, **attrs)
+      raise ArgumentError, "Invalid orientation: #{orientation}" unless ORIENTATIONS.include?(orientation.to_sym)
+
+      @as = as.to_sym
+      @orientation = orientation.to_sym
+      @decorative = decorative
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: (@decorative ? "none" : "separator"),
+        class: [
+          "shrink-0 bg-border",
+          orientation_classes
+        ]
+      }
+    end
+
+    def orientation_classes
+      return "h-[1px] w-full" if @orientation == :horizontal
+
+      "h-full w-[1px]"
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_content.rb

@@ -42,7 +42,7 @@ module RubyUI
     def close_button
       button(
         type: "button",
-        class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
         data_action: "click->ruby-ui--sheet-content#close"
       ) do
         svg(

data/lib/ruby_ui/sheet/sheet_content_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  close() {
+    this.element.remove()
+  }
+}

data/lib/ruby_ui/sheet/sheet_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  open() {
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
+  }
+}

data/lib/ruby_ui/{combobox/combobox_separator.rb → skeleton/skeleton.rb}

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module RubyUI
-  class ComboboxSeparator < Base
+  class Skeleton < Base
     def view_template(&)
       div(**attrs, &)
     end
@@ -9,7 +9,9 @@ module RubyUI
     private
 
     def default_attrs
-      {class: "-mx-1 h-px bg-border"}
+      {
+        class: "animate-pulse rounded-md bg-primary/10"
+      }
     end
   end
 end

data/lib/ruby_ui/switch/switch.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Switch < Base
+    def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", **attrs)
+      @include_hidden = include_hidden
+      @checked_value = checked_value
+      @unchecked_value = unchecked_value
+      super(**attrs)
+    end
+
+    def view_template
+      label(
+        role: "switch",
+        class: "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 bg-input has-[:checked]:bg-primary"
+      ) do
+        input(type: "hidden", name: attrs[:name], value: @unchecked_value) if @include_hidden
+        input(**attrs.merge(type: "checkbox", class: "hidden peer", value: @checked_value))
+
+        span(class: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform translate-x-0 peer-checked:translate-x-5 ")
+      end
+    end
+  end
+end

data/lib/ruby_ui/tabs/tabs_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--tabs"
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = { active: String };
+
+  connect() {
+    if (!this.hasActiveValue && this.triggerTargets.length > 0) {
+      this.activeValue = this.triggerTargets[0].dataset.value;
+    }
+  }
+
+  show(e) {
+    this.activeValue = e.currentTarget.dataset.value;
+  }
+
+  activeValueChanged(currentValue, previousValue) {
+    if (currentValue == "" || currentValue == previousValue) return;
+
+    this.contentTargets.forEach((el) => {
+      el.classList.add("hidden");
+    });
+
+    this.triggerTargets.forEach((el) => {
+      el.dataset.state = "inactive";
+    });
+
+    this.activeContentTarget() &&
+      this.activeContentTarget().classList.remove("hidden");
+    this.activeTriggerTarget().dataset.state = "active";
+  }
+
+  activeTriggerTarget() {
+    return this.triggerTargets.find(
+      (el) => el.dataset.value == this.activeValue,
+    );
+  }
+
+  activeContentTarget() {
+    return this.contentTargets.find(
+      (el) => el.dataset.value == this.activeValue,
+    );
+  }
+}