lycan_ui 0.1.0

data/lib/generators/lycan_ui/templates/javascript/accordion_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["item"];
+
+  focusNext() {
+    this.#focusItem(this.#nextIndex)
+  }
+
+  focusPrevious() {
+    this.#focusItem(this.#previousIndex)
+  }
+
+  focusFirst() {
+    this.#focusItem(0)
+  }
+
+  focusLast() {
+    this.#focusItem(this.itemTargets.length - 1);
+  }
+
+  #focusItem(index) {
+    this.itemTargets[index].focus();
+  }
+
+  get #nextIndex() {
+    const index = this.itemTargets.findIndex((item) => document.activeElement === item);
+
+    if (index == -1) {
+      return 0;
+    }
+
+    return (index + 1) % this.itemTargets.length;
+  }
+
+  get #previousIndex() {
+    const index = this.itemTargets.findIndex((item) => document.activeElement === item);
+    const length = this.itemTargets.length;
+
+    if (index == -1) {
+      return length - 1;
+    }
+
+    return (index - 1 + length) % length;
+  }
+}

data/lib/generators/lycan_ui/templates/javascript/avatar_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["fallback", "image"];
+
+  initialize() {
+    if (!this.hasImageTarget) {
+      this.showFallback()
+      return
+    }
+
+    if (!this.imageTarget.complete) {
+      this.showFallback()
+      return
+    }
+
+    if (this.imageTarget.naturalWidth === 0) {
+      this.showFallback()
+      return
+    }
+
+    this.hideFallback()
+  }
+
+  showFallback() {
+    this.fallbackTarget.hidden = false;
+    this.imageTarget.hidden = true;
+  }
+
+  hideFallback() {
+    this.imageTarget.hidden = false;
+    this.fallbackTarget.hidden = true;
+  }
+}

data/lib/generators/lycan_ui/templates/javascript/collapsible_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = { open: Boolean };
+
+  toggle() {
+    this.openValue = !this.openValue;
+  }
+
+  open() {
+    this.openValue = true;
+  }
+
+  close() {
+    this.openValue = false;
+  }
+
+  openValueChanged(open) {
+    this.triggerTarget.ariaExpanded = open;
+    this.contentTarget.hidden = !open;
+  }
+}

data/lib/generators/lycan_ui/templates/javascript/dialog_controller.js

@@ -0,0 +1,90 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static values = {
+    open: Boolean,
+    frame: String,
+  };
+  static targets = ["trigger", "content"];
+
+  connect() {
+    if (this.openValue) {
+      this.open();
+    }
+  }
+
+  open() {
+    this.contentTarget.showModal();
+
+    this.#bindEventListeners();
+  }
+
+  closeOnFormSubmit(event) {
+    if (!event.detail.success) return;
+
+    this.close();
+  }
+
+  close() {
+    this.contentTarget.close();
+
+    this.#removeEventListeners();
+  }
+
+  get isRemote() {
+    return Boolean(this.frameValue);
+  }
+
+  #frameRender = ({ detail }) => {
+    if (detail.newFrame.id !== this.frameValue) return;
+
+    detail.render = (_, newFrame) => {
+      const selector = `#${this.frameValue} dialog`;
+
+      window.Turbo.renderStreamMessage(
+        `
+          <turbo-stream action="update" method="morph" targets="${selector}">
+            <template>
+              ${newFrame.querySelector("dialog").innerHTML}
+            </template>
+          </turbo-stream>
+        `
+      );
+    };
+  };
+
+  #clickOutside = ({ clientX, clientY }) => {
+    const { top, left, height, width } =
+      this.contentTarget.getBoundingClientRect();
+
+    if (
+      top <= clientY &&
+      clientY <= top + height &&
+      left <= clientX &&
+      clientX <= left + width
+    ) {
+      return;
+    }
+
+    this.close();
+  };
+
+  #bindEventListeners() {
+    document.addEventListener("pointerdown", this.#clickOutside);
+
+    if (!this.isRemote) return;
+
+    document.addEventListener("turbo:before-frame-render", this.#frameRender);
+  }
+
+  #removeEventListeners() {
+    document.removeEventListener("pointerdown", this.#clickOutside);
+
+    if (!this.isRemote) return;
+
+    document.removeEventListener(
+      "turbo:before-frame-render",
+      this.#frameRender
+    );
+  }
+}

data/lib/generators/lycan_ui/templates/javascript/dropdown_controller.js

@@ -0,0 +1,395 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  autoUpdate,
+  computePosition,
+  offset,
+  flip,
+  shift,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static values = {
+    open: Boolean,
+    placement: { type: String, default: "bottom" },
+    submenuPlacement: { type: String, default: "right-start" },
+    query: String,
+    queryReset: { type: Number, default: 500 },
+    typeahead: { type: Boolean, default: true },
+  };
+  static targets = ["trigger", "content", "item", "submenu", "submenuItem"];
+
+  focusAfterOpen = false;
+  searchTimeout = null;
+  submenuCleanupFns = {};
+
+  disconnect() {
+    this.close();
+  }
+
+  toggle(event) {
+    this.focusAfterOpen = this.openValue && event.detail === 0;
+
+    if (this.openValue) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    this.openValue = true;
+    this.contentTarget.dataset.open = true;
+    this.triggerTarget.ariaExpanded = true;
+
+    this.#bindClickOutsideListeners();
+
+    const updatePosition = this.#updatePosition(
+      this.triggerTarget,
+      this.contentTarget,
+      this.placementValue
+    );
+    updatePosition();
+
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentTarget,
+      updatePosition
+    );
+
+    this.itemTargets.forEach((i) => (i.tabIndex = -1));
+
+    if (this.focusAfterOpen) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.focusItem({ target: this.itemTargets[0] });
+        });
+      });
+
+      this.focusAfterOpen = false;
+    }
+  }
+
+  close() {
+    this.openValue = false;
+    this.contentTarget.dataset.open = false;
+    this.triggerTarget.ariaExpanded = false;
+
+    this.closeAllSubmenus();
+
+    this.#removeClickOutsideListeners();
+
+    if (this.cleanup) this.cleanup();
+  }
+
+  focusItem({ target: item, params }) {
+    if (!item) return;
+    if (this.#itemDisabled(item)) return;
+
+    if (
+      this.hasSubmenuTarget &&
+      !this.#isSubmenuCurrentlyOpen(item.dataset.submenu)
+    ) {
+      this.closeAllSubmenus();
+    }
+
+    if (params?.submenu) {
+      this.#submenuItems(params.submenu).forEach((i) => (i.tabIndex = -1));
+    } else {
+      this.itemTargets.forEach((i) => (i.tabIndex = -1));
+    }
+
+    item.tabIndex = 0;
+    item.focus();
+  }
+
+  focusTrigger() {
+    this.itemTargets.forEach((i) => (i.tabIndex = -1));
+
+    this.triggerTarget.focus();
+  }
+
+  focusSubmenuTrigger({ params: { submenu } }) {
+    this.#submenuItems(submenu).forEach((i) => (i.tabIndex = -1));
+
+    const trigger = this.#submenuTrigger(submenu);
+
+    trigger?.focus();
+  }
+
+  handleKeydown(event) {
+    switch (event.key) {
+      case "Tab":
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.close();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.#focusPrev(this.itemTargets);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+
+        if (this.openValue) {
+          this.#focusNext(this.itemTargets);
+        } else {
+          this.focusAfterOpen = true;
+          this.open();
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        this.focusItem({ target: this.itemTargets[0] });
+        break;
+      case "End":
+        event.preventDefault();
+        this.focusItem({
+          target: this.itemTargets[this.itemTargets.length - 1],
+        });
+        break;
+      default:
+        this.#typeahead(event);
+    }
+  }
+
+  submenuHandleKeydown(event) {
+    event.stopPropagation();
+
+    const submenuId = event.params.submenu;
+    const itemTargets = this.#submenuItems(submenuId);
+
+    switch (event.key) {
+      case "Tab":
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.close();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.#focusPrev(itemTargets);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        this.#focusNext(itemTargets);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        this.closeSubmenu(event);
+        this.focusSubmenuTrigger(event);
+        break;
+      case "Home":
+        event.preventDefault();
+        this.focusItem({ target: itemTargets[0] });
+        break;
+      case "End":
+        event.preventDefault();
+        this.focusItem({
+          target: itemTargets[itemTargets.length - 1],
+        });
+        break;
+    }
+  }
+
+  openSubmenu(event) {
+    const {
+      currentTarget,
+      params: { submenu },
+    } = event;
+
+    const menu = this.submenuTargets.find((element) => element.id === submenu);
+
+    if (!menu) return;
+
+    if (menu.dataset.open === "true") return;
+
+    menu.dataset.open = true;
+    const updatePosition = this.#updatePosition(
+      currentTarget,
+      menu,
+      this.submenuPlacementValue
+    );
+
+    updatePosition();
+    this.submenuCleanupFns[submenu] = autoUpdate(
+      this.triggerTarget,
+      this.contentTarget,
+      updatePosition
+    );
+
+    currentTarget.ariaExpanded = true;
+
+    const items = this.#submenuItems(submenu);
+    items.forEach((item) => (item.tabIndex = -1));
+
+    if (
+      event.detail === 0 &&
+      (event.pointerType === undefined || event.pointerType === "")
+    ) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.focusItem({ target: items[0] });
+        });
+      });
+    }
+  }
+
+  closeSubmenu({ params: { submenu } }) {
+    const element = this.submenuTargets.find((menu) => menu.id === submenu);
+
+    if (!element) return;
+
+    this.#closeSubmenuByElement(element);
+  }
+
+  closeAllSubmenus() {
+    this.submenuTargets.forEach((element) =>
+      this.#closeSubmenuByElement(element)
+    );
+  }
+
+  #closeSubmenuByElement(element) {
+    element.dataset.open = false;
+
+    const trigger = this.#submenuTrigger(element.id);
+
+    trigger?.setAttribute("aria-expanded", false);
+
+    if (this.submenuCleanupFns[element.id]) {
+      this.submenuCleanupFns[element.id]();
+    }
+  }
+
+  #itemDisabled(item) {
+    return item.disabled || item.getAttribute("aria-disabled") === "true";
+  }
+
+  #typeahead(event) {
+    if (!this.typeaheadValue) return;
+    if (!this.openValue) return;
+    if (event.ctrlKey || event.altKey || event.metaKey) return;
+    if (event.key.length !== 1) return;
+    if (event.key === " ") return;
+
+    event.preventDefault();
+
+    if (this.searchTimeout) clearTimeout(this.searchTimeout);
+
+    this.queryValue += event.key.toLowerCase();
+
+    const isRepeated =
+      this.queryValue.length > 1 &&
+      this.queryValue.split("").every((char) => char === this.queryValue[0]);
+    const normalizedQuery = isRepeated ? this.queryValue[0] : this.queryValue;
+
+    const focusedIndex = this.#focusedItemIndex(this.itemTargets);
+    const candidates = this.#candidateItems(this.itemTargets);
+    const currentIndex = Math.max(focusedIndex, 0);
+    const currentItem = focusedIndex === -1 ? null : candidates[currentIndex];
+    let items = candidates.map(
+      (_, index, array) => array[(currentIndex + index) % array.length]
+    );
+
+    if (normalizedQuery.length === 1) {
+      items = items.filter((item) => item !== currentItem);
+    }
+
+    let nextItem = items.find(
+      (item) =>
+        item?.innerText &&
+        item.innerText.trim().toLowerCase().startsWith(normalizedQuery)
+    );
+
+    if (nextItem !== currentItem) this.focusItem({ target: nextItem });
+
+    this.searchTimeout = setTimeout(() => {
+      this.queryValue = "";
+      this.searchTimeout = null;
+    }, this.queryResetValue);
+  }
+
+  #focusNext(items) {
+    const candidates = this.#candidateItems(items);
+    const index = (this.#focusedItemIndex(items) + 1) % candidates.length;
+
+    this.focusItem({ target: candidates[index] });
+  }
+
+  #focusPrev(items) {
+    const candidates = this.#candidateItems(items);
+    const length = candidates.length;
+    const focused = this.#focusedItemIndex(items);
+
+    if (focused < 0) {
+      this.focusItem({ target: candidates.at(-1) });
+
+      return;
+    }
+
+    const index = (focused - 1 + length) % length;
+    this.focusItem({ target: candidates[index] });
+  }
+
+  #isSubmenuCurrentlyOpen(submenu) {
+    if (!submenu) return false;
+
+    return this.submenuTargets.some(
+      (target) => target.id === submenu && target.dataset.open === "true"
+    );
+  }
+
+  #submenuTrigger(id) {
+    return this.itemTargets.find(
+      (trigger) => trigger.getAttribute("aria-controls") === id
+    );
+  }
+
+  #submenuItems(id) {
+    return this.submenuItemTargets.filter(
+      (item) => item.dataset.submenu === id
+    );
+  }
+
+  #focusedItemIndex(items) {
+    return this.#candidateItems(items).findIndex(
+      (item) => document.activeElement === item
+    );
+  }
+
+  #candidateItems(items) {
+    return items.filter((item) => !this.#itemDisabled(item));
+  }
+
+  #updatePosition = (trigger, content, placement) => () => {
+    computePosition(trigger, content, {
+      placement,
+      middleware: [offset(5), flip(), shift({ padding: 5 })],
+    }).then(({ x, y, placement }) => {
+      content.dataset.side = placement.split("-")[0];
+
+      Object.assign(content.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  };
+
+  #clickOutside = ({ target }) => {
+    if (this.element.contains(target)) return;
+
+    this.close();
+  };
+
+  #bindClickOutsideListeners() {
+    document.addEventListener("click", this.#clickOutside);
+    document.addEventListener("touchend", this.#clickOutside);
+    document.addEventListener("focusin", this.#clickOutside);
+  }
+
+  #removeClickOutsideListeners() {
+    document.removeEventListener("click", this.#clickOutside);
+    document.removeEventListener("touchend", this.#clickOutside);
+    document.removeEventListener("focusin", this.#clickOutside);
+  }
+}

data/lib/generators/lycan_ui/templates/javascript/popover_controller.js

@@ -0,0 +1,114 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  autoUpdate,
+  computePosition,
+  offset,
+  arrow,
+  flip,
+  shift,
+} from "@floating-ui/dom";
+import * as focusTrap from "focus-trap";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = {
+    open: Boolean,
+    placement: { type: String, default: "bottom" },
+    offset: { type: Number, default: 8 },
+  };
+
+  connect() {
+    this.#updatePosition();
+
+    this.focusTrap = focusTrap.createFocusTrap(this.contentTarget, {
+      fallbackFocus: this.contentTarget,
+      setReturnFocus: this.triggerTarget,
+      allowOutsideClick: true,
+      escapeDeactivates: false,
+      clickOutsideDeactivates: false,
+    });
+  }
+
+  disconnect() {
+    this.close();
+  }
+
+  toggle() {
+    if (this.openValue) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    this.openValue = true;
+    this.contentTarget.show();
+
+    this.#updatePosition();
+
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentTarget,
+      this.#updatePosition
+    );
+    this.#bindClickOutsideListeners();
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.focusTrap.activate();
+      });
+    });
+  }
+
+  close() {
+    this.openValue = false;
+    this.contentTarget.close();
+    this.focusTrap.deactivate();
+
+    this.#removeClickOutsideListeners();
+    if (this.cleanup) this.cleanup();
+  }
+
+  #updatePosition = () => {
+    computePosition(this.triggerTarget, this.contentTarget, {
+      placement: this.placementValue,
+      middleware: [offset(5), flip(), shift({ padding: 5 })],
+    }).then(({ x, y, placement }) => {
+      this.contentTarget.dataset.side = placement.split("-")[0];
+
+      Object.assign(this.contentTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  };
+
+  #clickOutside = ({ target }) => {
+    if (this.element.contains(target)) return;
+
+    this.close();
+  };
+
+  #escPressed = (event) => {
+    if (event.key !== "Escape") return;
+
+    event.preventDefault();
+
+    this.close();
+  };
+
+  #bindClickOutsideListeners() {
+    document.addEventListener("click", this.#clickOutside);
+    document.addEventListener("touchend", this.#clickOutside);
+    document.addEventListener("focusin", this.#clickOutside);
+    document.addEventListener("keydown", this.#escPressed);
+  }
+
+  #removeClickOutsideListeners() {
+    document.removeEventListener("click", this.#clickOutside);
+    document.removeEventListener("touchend", this.#clickOutside);
+    document.removeEventListener("focusin", this.#clickOutside);
+    document.removeEventListener("keydown", this.#escPressed);
+  }
+}