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

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

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

data/lib/ruby_ui/combobox/combobox_item.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxItem < Base
+    def view_template(&)
+      label(**attrs, &)
+    end
+
+    private
+
+    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",
+        data: {
+          ruby_ui__combobox_target: "item"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_list.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxList < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col gap-1 p-1 max-h-72 overflow-y-auto text-foreground",
+        role: "listbox"
+      }
+    end
+  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

data/lib/{rbui → ruby_ui}/combobox/combobox_search_input.rb

@@ -1,22 +1,38 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ComboboxSearchInput < Base
-    def initialize(placeholder:, **attrs)
+    def initialize(placeholder:, **)
       @placeholder = placeholder
-      super(**attrs)
+      super(**)
     end
 
     def view_template
-      input_container do
-        search_icon
+      div class: "flex text-muted-foreground items-center border-b px-3" do
+        icon
         input(**attrs)
       end
     end
 
     private
 
-    def search_icon
+    def default_attrs
+      {
+        type: "search",
+        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        role: "searchbox",
+        placeholder: @placeholder,
+        data: {
+          ruby_ui__combobox_target: "searchInput",
+          action: "keyup->ruby-ui--combobox#filterItems search->ruby-ui--combobox#filterItems"
+        },
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: "false"
+      }
+    end
+
+    def icon
       svg(
         xmlns: "http://www.w3.org/2000/svg",
         viewbox: "0 0 24 24",
@@ -33,24 +49,5 @@ module RBUI
         )
       end
     end
-
-    def input_container(&)
-      div(class: "flex items-center border-b px-3", &)
-    end
-
-    def default_attrs
-      {
-        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--combobox#onSearchInput",
-          rbui__combobox_target: "search"
-        },
-        autocomplete: "off",
-        autocorrect: "off",
-        spellcheck: false
-      }
-    end
   end
 end

data/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxToggleAllCheckbox < 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: "toggleAll",
+          action: "change->ruby-ui--combobox#toggleAllItems"
+        }
+      }
+    end
+  end
+end

data/lib/{rbui → ruby_ui}/combobox/combobox_trigger.rb

@@ -1,16 +1,39 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ComboboxTrigger < Base
-    def view_template(&block)
+    def initialize(placeholder: "", **)
+      @placeholder = placeholder
+      super(**)
+    end
+
+    def view_template
       button(**attrs) do
-        block&.call
+        span(class: "truncate", data: {ruby_ui__combobox_target: "triggerContent"}) do
+          @placeholder
+        end
         icon
       end
     end
 
     private
 
+    def default_attrs
+      {
+        type: "button",
+        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 justify-between",
+        data: {
+          placeholder: @placeholder,
+          ruby_ui__combobox_target: "trigger",
+          action: "ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+
     def icon
       svg(
         xmlns: "http://www.w3.org/2000/svg",
@@ -30,23 +53,5 @@ module RBUI
         )
       end
     end
-
-    def default_attrs
-      {
-        data: {
-          action: "rbui--combobox#onTriggerClick",
-          rbui__combobox_target: "trigger"
-        },
-        type: "button",
-        role: "combobox",
-        aria: {
-          expanded: "false",
-          haspopup: "listbox",
-          autocomplete: "none",
-          activedescendant: true
-        },
-        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[200px] justify-between"
-      }
-    end
   end
 end

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

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

data/lib/ruby_ui/command/command_controller.js

@@ -0,0 +1,136 @@
+import { Controller } from "@hotwired/stimulus";
+import Fuse from "fuse.js";
+
+// Connects to data-controller="ruby-ui--command"
+export default class extends Controller {
+  static targets = ["input", "group", "item", "empty", "content"];
+
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  };
+
+  connect() {
+    this.inputTarget.focus();
+    this.searchIndex = this.buildSearchIndex();
+    this.toggleVisibility(this.emptyTargets, false);
+    this.selectedIndex = -1;
+
+    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
+    console.log("this.element", this.element);
+    this.element.remove();
+  }
+
+  filter(e) {
+    // Deselect any previously selected item
+    this.deselectAll();
+
+    const query = e.target.value.toLowerCase();
+    if (query.length === 0) {
+      this.resetVisibility();
+      return;
+    }
+
+    this.toggleVisibility(this.itemTargets, false);
+
+    const results = this.searchIndex.search(query);
+    results.forEach((result) =>
+      this.toggleVisibility([result.item.element], true),
+    );
+
+    this.toggleVisibility(this.emptyTargets, results.length === 0);
+    this.updateGroupVisibility();
+  }
+
+  toggleVisibility(elements, isVisible) {
+    elements.forEach((el) => el.classList.toggle("hidden", !isVisible));
+  }
+
+  updateGroupVisibility() {
+    this.groupTargets.forEach((group) => {
+      const hasVisibleItems =
+        group.querySelectorAll(
+          "[data-ruby-ui--command-target='item']:not(.hidden)",
+        ).length > 0;
+      this.toggleVisibility([group], hasVisibleItems);
+    });
+  }
+
+  resetVisibility() {
+    this.toggleVisibility(this.itemTargets, true);
+    this.toggleVisibility(this.groupTargets, true);
+    this.toggleVisibility(this.emptyTargets, false);
+  }
+
+  buildSearchIndex() {
+    const options = {
+      keys: ["value"],
+      threshold: 0.2,
+      includeMatches: true,
+    };
+    const items = this.itemTargets.map((el) => ({
+      value: el.dataset.value,
+      element: el,
+    }));
+    return new Fuse(items, options);
+  }
+
+  handleKeydown(e) {
+    const visibleItems = this.itemTargets.filter(
+      (item) => !item.classList.contains("hidden"),
+    );
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.updateSelectedItem(visibleItems, 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.updateSelectedItem(visibleItems, -1);
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
+      e.preventDefault();
+      visibleItems[this.selectedIndex].click();
+    }
+  }
+
+  updateSelectedItem(visibleItems, direction) {
+    if (this.selectedIndex >= 0) {
+      this.toggleAriaSelected(visibleItems[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    // Ensure the selected index is within the bounds of the visible items
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = visibleItems.length - 1;
+    } else if (this.selectedIndex >= visibleItems.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.toggleAriaSelected(visibleItems[this.selectedIndex], true);
+  }
+
+  toggleAriaSelected(element, isSelected) {
+    element.setAttribute("aria-selected", isSelected.toString());
+  }
+
+  deselectAll() {
+    this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+}

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class CommandDialog < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        data: {controller: "rbui--command"}
+        data: {controller: "ruby-ui--command"}
       }
     end
   end