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

data/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js

@@ -0,0 +1,120 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, flip, shift, offset } from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "menuItem"];
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Object,
+      default: {},
+    },
+  }
+
+  connect() {
+    this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later
+    this.selectedIndex = -1;
+  }
+
+  #computeTooltip() {
+    computePosition(this.triggerTarget, this.contentTarget, {
+      placement: this.optionsValue.placement || "top",
+      middleware: [flip(), shift(), offset(8)],
+    }).then(({ x, y }) => {
+      Object.assign(this.contentTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+
+  onClickOutside(event) {
+    if (!this.openValue) return;
+    if (this.element.contains(event.target)) return;
+
+    event.preventDefault();
+    this.close();
+  }
+
+  toggle() {
+    this.contentTarget.classList.contains("hidden") ? this.#open() : this.close();
+  }
+
+  #open() {
+    this.openValue = true;
+    this.#deselectAll();
+    this.#addEventListeners();
+    this.#computeTooltip()
+    this.contentTarget.classList.remove("hidden");
+  }
+
+  close() {
+    this.openValue = false;
+    this.#removeEventListeners();
+    this.contentTarget.classList.add("hidden");
+  }
+
+  #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/{rbui → ruby_ui}/dropdown_menu/dropdown_menu_item.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DropdownMenuItem < Base
     def initialize(href: "#", **attrs)
       @href = href
@@ -18,8 +18,8 @@ module RBUI
         href: @href,
         role: "menuitem",
         class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        data_action: "click->rbui--dropdown-menu#close",
-        data_rbui__dropdown_menu_target: "menuItem",
+        data_action: "click->ruby-ui--dropdown-menu#close",
+        data_ruby_ui__dropdown_menu_target: "menuItem",
         tabindex: "-1",
         data_orientation: "vertical"
       }

data/lib/{rbui → ruby_ui}/dropdown_menu/dropdown_menu_label.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DropdownMenuLabel < Base
     def view_template(&)
       h3(**attrs, &)

data/lib/{rbui → ruby_ui}/dropdown_menu/dropdown_menu_separator.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DropdownMenuSeparator < Base
     def view_template
       div(**attrs)

data/lib/{rbui → ruby_ui}/dropdown_menu/dropdown_menu_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DropdownMenuTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        data: {rbui__dropdown_menu_target: "trigger", action: "click->rbui--dropdown-menu#toggle"},
+        data: {ruby_ui__dropdown_menu_target: "trigger", action: "click->ruby-ui--dropdown-menu#toggle"},
         class: "inline-block"
       }
     end

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Form < Base
     def view_template(&)
       form(**attrs, &)

data/lib/{rbui → ruby_ui}/form/form_field.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class FormField < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,7 +11,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--form-field"
+          controller: "ruby-ui--form-field"
         },
         class: "space-y-2"
       }

data/lib/ruby_ui/form/form_field_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "error"];
+  static values = { shouldValidate: false };
+
+  connect() {
+    if (this.hasErrorTarget) {
+      if (this.errorTarget.textContent) {
+        this.shouldValidateValue = true;
+      } else {
+        this.errorTarget.classList.add("hidden");
+      }
+    }
+  }
+
+  onInvalid(error) {
+    error.preventDefault();
+
+    this.shouldValidateValue = true;
+    this.#setErrorMessage();
+  }
+
+  onInput() {
+    this.#setErrorMessage();
+  }
+
+  onChange() {
+    this.#setErrorMessage();
+  }
+
+  #setErrorMessage() {
+    if (!this.shouldValidateValue) return;
+
+    if (this.inputTarget.validity.valid) {
+      this.errorTarget.textContent = "";
+      this.errorTarget.classList.add("hidden");
+    } else {
+      this.errorTarget.textContent = this.#getValidationMessage();
+      this.errorTarget.classList.remove("hidden");
+    }
+  }
+
+  #getValidationMessage() {
+    let errorMessage;
+
+    const { validity, dataset, validationMessage } = this.inputTarget;
+
+    if (validity.tooLong) errorMessage = dataset.tooLong;
+    if (validity.tooShort) errorMessage = dataset.tooShort;
+    if (validity.badInput) errorMessage = dataset.badInput;
+    if (validity.typeMismatch) errorMessage = dataset.typeMismatch;
+    if (validity.stepMismatch) errorMessage = dataset.stepMismatch;
+    if (validity.valueMissing) errorMessage = dataset.valueMissing;
+    if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow;
+    if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow;
+    if (validity.patternMismatch) errorMessage = dataset.patternMismatch;
+
+    return errorMessage || validationMessage;
+  }
+}

data/lib/{rbui → ruby_ui}/form/form_field_error.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class FormFieldError < Base
     def view_template(&)
       p(**attrs, &)
@@ -11,7 +11,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__form_field_target: "error"
+          ruby_ui__form_field_target: "error"
         },
         class: "text-sm font-medium text-destructive"
       }

data/lib/{rbui → ruby_ui}/form/form_field_hint.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class FormFieldHint < Base
     def view_template(&)
       p(**attrs, &)

data/lib/{rbui → ruby_ui}/form/form_field_label.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class FormFieldLabel < Base
     def view_template(&)
       label(**attrs, &)

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class HoverCard < Base
     def initialize(option: {}, **attrs)
       @options = option
@@ -18,8 +18,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--hover-card",
-          rbui__hover_card_options_value: @options.to_json
+          controller: "ruby-ui--hover-card",
+          ruby_ui__hover_card_options_value: @options.to_json
         }
       }
     end

data/lib/{rbui → ruby_ui}/hover_card/hover_card_content.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class HoverCardContent < Base
     def view_template(&block)
-      template_tag(data: {rbui__hover_card_target: "content"}) do
+      template(data: {ruby_ui__hover_card_target: "content"}) do
         div(**attrs, &block)
       end
     end

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/{rbui → ruby_ui}/hover_card/hover_card_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class HoverCardTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,7 +11,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__hover_card_target: "trigger"
+          ruby_ui__hover_card_target: "trigger"
         },
         class: "inline-block"
       }

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Input < Base
     def initialize(type: :string, **attrs)
       @type = type.to_sym
@@ -16,8 +16,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__form_field_target: "input",
-          action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid"
+          ruby_ui__form_field_target: "input",
+          action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
         class: "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground"
       }

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Link < Base
     def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs)
       @href = href
@@ -35,45 +35,45 @@ module RBUI
     end
 
     def primary_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
         size_classes
-      )
+      ]
     end
 
     def link_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
         size_classes
-      )
+      ]
     end
 
     def secondary_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
         size_classes
-      )
+      ]
     end
 
     def destructive_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         size_classes
-      )
+      ]
     end
 
     def outline_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         size_classes
-      )
+      ]
     end
 
     def ghost_classes
-      tokens(
+      [
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
         size_classes
-      )
+      ]
     end
 
     def default_classes

data/lib/ruby_ui/masked_input/masked_input.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MaskedInput < Base
+    def view_template
+      Input(type: "text", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {data: {controller: "ruby-ui--masked-input"}}
+    end
+  end
+end

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/{rbui → ruby_ui}/pagination/pagination.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Pagination < Base
     def view_template(&)
       nav(**attrs, &)

data/lib/{rbui → ruby_ui}/pagination/pagination_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class PaginationContent < Base
     def view_template(&)
       ul(**attrs, &)

data/lib/{rbui → ruby_ui}/pagination/pagination_ellipsis.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class PaginationEllipsis < Base
     def view_template(&block)
       li do

data/lib/{rbui → ruby_ui}/pagination/pagination_item.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class PaginationItem < Base
     def initialize(href: "#", active: false, **attrs)
       @href = href
@@ -19,9 +19,9 @@ module RBUI
     def default_attrs
       {
         aria: {current: @active ? "page" : nil},
-        class: tokens(
-          RBUI::Button.new(variant: @active ? :outline : :ghost).attrs[:class]
-        )
+        class: [
+          RubyUI::Button.new(variant: @active ? :outline : :ghost).attrs[:class]
+        ]
       }
     end
   end

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Popover < Base
     def initialize(options: {}, **attrs)
       @options = options
@@ -16,9 +16,9 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--popover",
-          rbui__popover_options_value: @options.to_json,
-          rbui__popover_trigger_value: @options[:trigger] || "hover"
+          controller: "ruby-ui--popover",
+          ruby_ui__popover_options_value: @options.to_json,
+          ruby_ui__popover_trigger_value: @options[:trigger] || "hover"
         }
       }
     end