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

data/lib/{rbui → ruby_ui}/command/command_dialog_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CommandDialogContent < Base
     SIZES = {
       xs: "max-w-sm",
@@ -17,8 +17,8 @@ module RBUI
     end
 
     def view_template(&block)
-      template_tag(data: {rbui__command_target: "content"}) do
-        div(data: {controller: "rbui--command"}) do
+      template(data: {ruby_ui__command_target: "content"}) do
+        div(data: {controller: "ruby-ui--command"}) do
           backdrop
           div(**attrs, &block)
         end
@@ -30,17 +30,17 @@ module RBUI
     def default_attrs
       {
         data_state: "open",
-        class: tokens(
+        class: [
           "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
           SIZES[@size]
-        )
+        ]
       }
     end
 
     def backdrop
       div(
         data_state: "open",
-        data_action: "click->rbui--command#dismiss esc->rbui--command#dismiss",
+        data_action: "click->ruby-ui--command#dismiss esc->ruby-ui--command#dismiss",
         class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       )
     end

data/lib/{rbui → ruby_ui}/command/command_dialog_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CommandDialogTrigger < Base
     DEFAULT_KEYBINDINGS = [
       "keydown.ctrl+k@window",
@@ -8,7 +8,7 @@ module RBUI
     ].freeze
 
     def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
-      @keybindings = keybindings.map { |kb| "#{kb}->rbui--command#open" }
+      @keybindings = keybindings.map { |kb| "#{kb}->ruby-ui--command#open" }
       super(**attrs)
     end
 
@@ -21,7 +21,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          action: tokens("click->rbui--command#open", @keybindings.join(" "))
+          action: ["click->ruby-ui--command#open", @keybindings.join(" ")]
         }
       }
     end

data/lib/{rbui → ruby_ui}/command/command_empty.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CommandEmpty < Base
     def view_template(&)
       div(**attrs, &)
@@ -12,7 +12,7 @@ module RBUI
       {
         class: "py-6 text-center text-sm",
         role: "presentation",
-        data: {rbui__command_target: "empty"}
+        data: {ruby_ui__command_target: "empty"}
       }
     end
   end

data/lib/{rbui → ruby_ui}/command/command_group.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CommandGroup < Base
     def initialize(title: nil, **attrs)
       @title = title
@@ -32,7 +32,7 @@ module RBUI
         role: "presentation",
         data: {
           value: @title,
-          rbui__command_target: "group"
+          ruby_ui__command_target: "group"
         }
       }
     end

data/lib/{rbui → ruby_ui}/command/command_input.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CommandInput < Base
     def initialize(placeholder: "Type a command or search...", **attrs)
       @placeholder = placeholder
@@ -40,8 +40,8 @@ module RBUI
       {
         class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         placeholder: @placeholder,
-        data_action: "input->rbui--command#filter keydown.down->rbui--command#handleKeydown keydown.up->rbui--command#handleKeydown keydown.enter->rbui--command#handleKeydown keydown.esc->rbui--command#dismiss",
-        data_rbui__command_target: "input",
+        data_action: "input->ruby-ui--command#filter keydown.down->ruby-ui--command#handleKeydown keydown.up->ruby-ui--command#handleKeydown keydown.enter->ruby-ui--command#handleKeydown keydown.esc->ruby-ui--command#dismiss",
+        data_ruby_ui__command_target: "input",
         autocomplete: "off",
         autocorrect: "off",
         spellcheck: false,

data/lib/{rbui → ruby_ui}/command/command_item.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CommandItem < Base
     def initialize(value:, text: "", href: "#", **attrs)
       @value = value
@@ -21,7 +21,7 @@ module RBUI
         href: @href,
         role: "option",
         data: {
-          rbui__command_target: "item",
+          ruby_ui__command_target: "item",
           value: @value,
           text: @text
         }

data/lib/{rbui → ruby_ui}/command/command_list.rb

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

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ContextMenu < Base
     def initialize(options: {}, **attrs)
       @options = options
@@ -17,7 +17,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--context-menu",
+          controller: "ruby-ui--context-menu",
           popover_options_value: @options.to_json
         }
       }

data/lib/{rbui → ruby_ui}/context_menu/context_menu_content.rb

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

data/lib/ruby_ui/context_menu/context_menu_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}/context_menu/context_menu_item.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ContextMenuItem < Base
     def initialize(href: "#", checked: false, shortcut: nil, disabled: false, **attrs)
       @href = href
@@ -56,8 +56,8 @@ module RBUI
               "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none 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 pl-8",
         tabindex: "-1",
         data_orientation: "vertical",
-        data_action: "click->rbui--context-menu#close",
-        data_rbui__context_menu_target: "menuItem",
+        data_action: "click->ruby-ui--context-menu#close",
+        data_ruby_ui__context_menu_target: "menuItem",
         data_disabled: @disabled,
         disabled: @disabled
       }

data/lib/{rbui → ruby_ui}/context_menu/context_menu_label.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ContextMenuLabel < Base
     def initialize(inset: false, **attrs)
       @inset = inset
@@ -17,7 +17,7 @@ module RBUI
 
     def default_attrs
       {
-        class: tokens("px-2 py-1.5 text-sm font-semibold text-foreground", inset?: "pl-8")
+        class: ["px-2 py-1.5 text-sm font-semibold text-foreground", inset?: "pl-8"]
       }
     end
   end

data/lib/{rbui → ruby_ui}/context_menu/context_menu_separator.rb

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

data/lib/{rbui → ruby_ui}/context_menu/context_menu_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ContextMenuTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,8 +11,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__context_menu_target: "trigger",
-          action: "contextmenu->rbui--context-menu#handleContextMenu"
+          ruby_ui__context_menu_target: "trigger",
+          action: "contextmenu->ruby-ui--context-menu#handleContextMenu"
         }
       }
     end

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

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

data/lib/{rbui → ruby_ui}/dialog/dialog_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DialogContent < Base
     SIZES = {
       xs: "max-w-sm",
@@ -17,8 +17,8 @@ module RBUI
     end
 
     def view_template
-      template_tag(data: {rbui__dialog_target: "content"}) do
-        div(data_controller: "rbui--dialog") do
+      template(data: {ruby_ui__dialog_target: "content"}) do
+        div(data_controller: "ruby-ui--dialog") do
           backdrop
           div(**attrs) do
             yield
@@ -33,18 +33,18 @@ module RBUI
     def default_attrs
       {
         data_state: "open",
-        class: tokens(
-          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        class: [
+          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
           SIZES[@size]
-        )
+        ]
       }
     end
 
     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",
-        data_action: "click->rbui--dialog#dismiss"
+        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--dialog#dismiss"
       ) do
         svg(
           width: "15",
@@ -69,7 +69,7 @@ module RBUI
     def backdrop
       div(
         data_state: "open",
-        data_action: "click->rbui--dialog#dismiss esc->rbui--dialog#dismiss",
+        data_action: "click->ruby-ui--dialog#dismiss esc->ruby-ui--dialog#dismiss",
         class:
               "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       )

data/lib/ruby_ui/dialog/dialog_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+  static targets = ["content"]
+  static values = {
+    open: {
+      type: Boolean,
+      default: false
+    },
+  }
+
+  connect() {
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  open(e) {
+    e.preventDefault()
+    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
+    // prevent scroll on body
+    document.body.classList.add('overflow-hidden')
+  }
+
+  dismiss() {
+    // allow scroll on body
+    document.body.classList.remove('overflow-hidden')
+    // remove the element
+    this.element.remove()
+  }
+}

data/lib/{rbui → ruby_ui}/dialog/dialog_description.rb

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

data/lib/{rbui → ruby_ui}/dialog/dialog_footer.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DialogFooter < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0"
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0 rtl:space-x-reverse"
       }
     end
   end

data/lib/{rbui → ruby_ui}/dialog/dialog_header.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DialogHeader < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        class: "flex flex-col space-y-1.5 text-center sm:text-left"
+        class: "flex flex-col space-y-1.5 text-center sm:text-left rtl:sm:text-right"
       }
     end
   end

data/lib/{rbui → ruby_ui}/dialog/dialog_middle.rb

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

data/lib/{rbui → ruby_ui}/dialog/dialog_title.rb

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

data/lib/{rbui → ruby_ui}/dialog/dialog_trigger.rb

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

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DropdownMenu < Base
     def initialize(options: {}, **attrs)
       @options = options
@@ -16,9 +16,9 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--dropdown-menu",
-          action: "click@window->rbui--dropdown-menu#onClickOutside",
-          rbui__dropdown_menu_options_value: @options.to_json
+          controller: "ruby-ui--dropdown-menu",
+          action: "click@window->ruby-ui--dropdown-menu#onClickOutside",
+          ruby_ui__dropdown_menu_options_value: @options.to_json
         }
       }
     end

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

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class DropdownMenuContent < Base
     def view_template(&block)
-      div(data: {rbui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0;") do
+      div(data: {ruby_ui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0;") do
         div(**attrs, &block)
       end
     end