yattho_view_components 0.0.1

data/app/components/yattho/alpha/modal_dialog.js

@@ -0,0 +1,162 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
+import { focusTrap } from '@primer/behaviors';
+import { getFocusableChild } from '@primer/behaviors/utils';
+function focusIfNeeded(elem) {
+    if (document.activeElement !== elem) {
+        elem === null || elem === void 0 ? void 0 : elem.focus();
+    }
+}
+const overlayStack = [];
+function clickHandler(event) {
+    const target = event.target;
+    const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    if (!button)
+        return;
+    // If the user is clicking a valid dialog trigger
+    let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
+    if (dialogId) {
+        event.stopPropagation();
+        const dialog = document.getElementById(dialogId);
+        if (dialog instanceof ModalDialogElement) {
+            dialog.openButton = button;
+            dialog.show();
+            return;
+        }
+    }
+    // Find the top level dialog that is open.
+    const topLevelDialog = overlayStack[overlayStack.length - 1];
+    if (!topLevelDialog)
+        return;
+    dialogId = button.getAttribute('data-close-dialog-id');
+    if (dialogId === topLevelDialog.id) {
+        overlayStack.pop();
+        topLevelDialog.close();
+    }
+    dialogId = button.getAttribute('data-submit-dialog-id');
+    if (dialogId === topLevelDialog.id) {
+        overlayStack.pop();
+        topLevelDialog.close(true);
+    }
+}
+function mousedownHandler(event) {
+    const target = event.target;
+    if (target === null || target === void 0 ? void 0 : target.closest('button'))
+        return;
+    // Find the top level dialog that is open.
+    const topLevelDialog = overlayStack[overlayStack.length - 1];
+    if (!topLevelDialog)
+        return;
+    // Check if the mousedown happened outside the boundary of the top level dialog
+    const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`);
+    // Only close dialog if it's a click outside the dialog and the dialog has a button?
+    if (mouseDownOutsideDialog) {
+        target.ownerDocument.addEventListener('mouseup', (upEvent) => {
+            if (upEvent.target === target) {
+                overlayStack.pop();
+                topLevelDialog.close();
+            }
+        }, { once: true });
+    }
+}
+export class ModalDialogElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ModalDialogElement_instances.add(this);
+        //TODO: Do we remove the abortController from focusTrap?
+        _ModalDialogElement_focusAbortController.set(this, new AbortController());
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b, _c, _d;
+        if (value) {
+            if (this.open)
+                return;
+            this.setAttribute('open', '');
+            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
+            document.body.style.overflow = 'hidden';
+            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
+                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
+            }
+            focusTrap(this, undefined, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+            overlayStack.push(this);
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
+            document.body.style.overflow = 'initial';
+            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
+            // if #openButton is a child of a menu, we need to focus a suitable child of the menu
+            // element since it is expected for the menu to close on click
+            const menu = ((_c = this.openButton) === null || _c === void 0 ? void 0 : _c.closest('details')) || ((_d = this.openButton) === null || _d === void 0 ? void 0 : _d.closest('action-menu'));
+            if (menu) {
+                focusIfNeeded(getFocusableChild(menu));
+            }
+            else {
+                focusIfNeeded(this.openButton);
+            }
+            this.openButton = null;
+        }
+    }
+    get showButtons() {
+        // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
+        return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        document.addEventListener('click', clickHandler);
+        document.addEventListener('mousedown', mousedownHandler);
+        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
+    }
+    show() {
+        this.open = true;
+    }
+    close(closedNotCancelled = false) {
+        if (this.open === false)
+            return;
+        const eventType = closedNotCancelled ? 'close' : 'cancel';
+        const dialogEvent = new Event(eventType);
+        this.dispatchEvent(dialogEvent);
+        this.open = false;
+    }
+}
+_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
+    var _a;
+    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-modal-dialog-overlay')) {
+        return this.parentElement;
+    }
+    return null;
+}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    if (event.isComposing)
+        return;
+    switch (event.key) {
+        case 'Escape':
+            if (this.open) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            break;
+    }
+};
+if (!window.customElements.get('modal-dialog')) {
+    window.ModalDialogElement = ModalDialogElement;
+    window.customElements.define('modal-dialog', ModalDialogElement);
+}

data/app/components/yattho/alpha/modal_dialog.ts

@@ -0,0 +1,173 @@
+import {focusTrap} from '@primer/behaviors'
+import {getFocusableChild} from '@primer/behaviors/utils'
+
+function focusIfNeeded(elem: HTMLElement | undefined | null) {
+  if (document.activeElement !== elem) {
+    elem?.focus()
+  }
+}
+
+const overlayStack: ModalDialogElement[] = []
+
+function clickHandler(event: Event) {
+  const target = event.target as HTMLElement
+  const button = target?.closest('button')
+  if (!button) return
+
+  // If the user is clicking a valid dialog trigger
+  let dialogId = button?.getAttribute('data-show-dialog-id')
+  if (dialogId) {
+    event.stopPropagation()
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof ModalDialogElement) {
+      dialog.openButton = button
+      dialog.show()
+      return
+    }
+  }
+
+  // Find the top level dialog that is open.
+  const topLevelDialog = overlayStack[overlayStack.length - 1]
+  if (!topLevelDialog) return
+
+  dialogId = button.getAttribute('data-close-dialog-id')
+  if (dialogId === topLevelDialog.id) {
+    overlayStack.pop()
+    topLevelDialog.close()
+  }
+
+  dialogId = button.getAttribute('data-submit-dialog-id')
+  if (dialogId === topLevelDialog.id) {
+    overlayStack.pop()
+    topLevelDialog.close(true)
+  }
+}
+
+function mousedownHandler(event: Event) {
+  const target = event.target as HTMLElement
+  if (target?.closest('button')) return
+
+  // Find the top level dialog that is open.
+  const topLevelDialog = overlayStack[overlayStack.length - 1]
+  if (!topLevelDialog) return
+
+  // Check if the mousedown happened outside the boundary of the top level dialog
+  const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`)
+
+  // Only close dialog if it's a click outside the dialog and the dialog has a button?
+  if (mouseDownOutsideDialog) {
+    target.ownerDocument.addEventListener(
+      'mouseup',
+      (upEvent: Event) => {
+        if (upEvent.target === target) {
+          overlayStack.pop()
+          topLevelDialog.close()
+        }
+      },
+      {once: true}
+    )
+  }
+}
+
+export class ModalDialogElement extends HTMLElement {
+  //TODO: Do we remove the abortController from focusTrap?
+  #focusAbortController = new AbortController()
+  openButton: HTMLButtonElement | null
+
+  get open() {
+    return this.hasAttribute('open')
+  }
+  set open(value: boolean) {
+    if (value) {
+      if (this.open) return
+      this.setAttribute('open', '')
+      this.#overlayBackdrop?.classList.remove('Overlay--hidden')
+      document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`
+      document.body.style.overflow = 'hidden'
+      if (this.#focusAbortController.signal.aborted) {
+        this.#focusAbortController = new AbortController()
+      }
+      focusTrap(this, undefined, this.#focusAbortController.signal)
+      overlayStack.push(this)
+    } else {
+      if (!this.open) return
+      this.removeAttribute('open')
+      this.#overlayBackdrop?.classList.add('Overlay--hidden')
+      document.body.style.paddingRight = '0'
+      document.body.style.overflow = 'initial'
+      this.#focusAbortController.abort()
+      // if #openButton is a child of a menu, we need to focus a suitable child of the menu
+      // element since it is expected for the menu to close on click
+      const menu = this.openButton?.closest('details') || this.openButton?.closest('action-menu')
+      if (menu) {
+        focusIfNeeded(getFocusableChild(menu))
+      } else {
+        focusIfNeeded(this.openButton)
+      }
+      this.openButton = null
+    }
+  }
+
+  get #overlayBackdrop(): HTMLElement | null {
+    if (this.parentElement?.hasAttribute('data-modal-dialog-overlay')) {
+      return this.parentElement
+    }
+
+    return null
+  }
+
+  get showButtons(): NodeList {
+    // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
+    return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`)
+  }
+
+  connectedCallback(): void {
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'dialog')
+
+    document.addEventListener('click', clickHandler)
+    document.addEventListener('mousedown', mousedownHandler)
+
+    this.addEventListener('keydown', e => this.#keydown(e))
+  }
+
+  show() {
+    this.open = true
+  }
+
+  close(closedNotCancelled = false) {
+    if (this.open === false) return
+    const eventType = closedNotCancelled ? 'close' : 'cancel'
+    const dialogEvent = new Event(eventType)
+    this.dispatchEvent(dialogEvent)
+    this.open = false
+  }
+
+  #keydown(event: Event) {
+    if (!(event instanceof KeyboardEvent)) return
+    if (event.isComposing) return
+
+    switch (event.key) {
+      case 'Escape':
+        if (this.open) {
+          this.close()
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        break
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ModalDialogElement: typeof ModalDialogElement
+  }
+  interface HTMLElementTagNameMap {
+    'modal-dialog': ModalDialogElement
+  }
+}
+
+if (!window.customElements.get('modal-dialog')) {
+  window.ModalDialogElement = ModalDialogElement
+  window.customElements.define('modal-dialog', ModalDialogElement)
+}

data/app/components/yattho/alpha/nav_list/item.html.erb

@@ -0,0 +1,13 @@
+<% with_private_content do %>
+  <% unless items.empty? %>
+    <% capture do %>
+      <%= render(Yattho::BaseComponent.new(tag: :ul, **@sub_list_arguments)) do %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render_parent %>

data/app/components/yattho/alpha/nav_list/item.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    class NavList
+      # Items are rendered as styled links. They can optionally include leading and/or trailing visuals,
+      # such as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the
+      # `selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also
+      # themselves contain sub items. Sub items are rendered collapsed by default.
+      class Item < Yattho::Alpha::ActionList::Item
+        attr_reader :selected_by_ids, :sub_item
+
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Yattho::Alpha::ActionList::Item) %>.
+        renders_many :items, lambda { |**system_arguments|
+          raise "Items can only be nested 2 levels deep" if sub_item?
+
+          @list.build_item(parent: self, sub_item: true, **system_arguments).tap do |item|
+            @list.will_add_item(item)
+          end
+        }
+
+        # Whether or not this item is nested under a parent item.
+        #
+        # @return [Boolean]
+        alias sub_item? sub_item
+
+        # @param selected_item_id [Symbol] The ID of the currently selected list item. Used internally.
+        # @param selected_by_ids [Array<Symbol>] The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected.
+        # @param expanded [Boolean] Whether this item shows (expands) or hides (collapses) its list of sub items.
+        # @param sub_item [Boolean] Whether or not this item is nested under a parent item. Used internally.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(selected_item_id: nil, selected_by_ids: [], sub_item: false, expanded: false, **system_arguments)
+          @selected_item_id = selected_item_id
+          @selected_by_ids = Array(selected_by_ids)
+          @expanded = expanded
+          @sub_item = sub_item
+
+          system_arguments[:classes] = class_names(
+            system_arguments[:classes],
+            "ActionListItem--subItem" => @sub_item
+          )
+
+          @sub_list_arguments = {
+            classes: class_names(
+              "ActionList",
+              "ActionList--subGroup"
+            )
+          }
+
+          overrides = { 'data-item-id': @selected_by_ids.join(" ") }
+
+          super(**system_arguments, **overrides)
+        end
+
+        def active?
+          item_active?(self)
+        end
+
+        # Cause this item to show its list of sub items when rendered.
+        def expand!
+          @expanded = true
+        end
+
+        def before_render
+          if active_sub_item?
+            expand!
+
+            @content_arguments[:classes] = class_names(
+              @content_arguments[:classes],
+              "ActionListContent--hasActiveSubItem"
+            )
+          end
+
+          super
+
+          raise "Cannot render a trailing action for an item with subitems" if items.present? && trailing_action.present?
+
+          return if items.blank?
+
+          @content_arguments[:tag] = :button
+          @content_arguments[:'aria-expanded'] = @expanded.to_s
+          @content_arguments[:'data-action'] = "click:#{@list.custom_element_name}#handleItemWithSubItemClick"
+
+          with_private_trailing_action_icon(:'chevron-down', classes: "ActionListItem-collapseIcon")
+
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            "ActionListItem--hasSubItem"
+          )
+        end
+
+        private
+
+        # Normally it would be easier to simply ask each item for its active status, eg.
+        # items.any?(&:active?), but unfortunately the view context is not set on each
+        # item until _after_ the parent's before_render, etc methods have been called.
+        # This means helper methods like current_page? will blow up with an error, since
+        # `helpers` is simply an alias for the view context (i.e. an instance of
+        # ActionView::Base). Since we know the view context for the parent object must
+        # be set before `before_render` is invoked, we can call helper methods here in
+        # the parent and bypass the problem entirely. Maybe not the most OO approach,
+        # but it works.
+        def item_active?(item)
+          if item.selected_by_ids.present?
+            item.selected_by_ids.include?(@selected_item_id)
+          elsif item.href
+            current_page?(item.href)
+          else
+            # :nocov:
+            false
+            # :nocov:
+          end
+        end
+
+        def active_sub_item?
+          items.any? { |subitem| item_active?(subitem) }
+        end
+
+        def current_page?(url)
+          helpers.current_page?(url)
+        end
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/nav_list/section.html.erb

@@ -0,0 +1,3 @@
+<nav-list>
+  <%= render_parent %>
+</nav-list>

data/app/components/yattho/alpha/nav_list/section.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    class NavList
+      # A logical grouping of navigation links with an optional heading.
+      #
+      # See <%= link_to_component(Yattho::Alpha::NavList) %> for usage examples.
+      class Section < ActionList
+        # A special "show more" list item that appears at the bottom of the section. Clicking
+        # the item will fetch the next page of results from the URL passed in the `src` argument
+        # and append the resulting chunk of HTML to the section.
+        #
+        # @param src [String] The URL to query for additional pages of list items.
+        # @param pages [Integer] The total number of pages in the result set.
+        # @param component_klass [Class] A component class to use instead of the default `Yattho::Alpha::NavList::Item` class.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Yattho::Alpha::NavList::Item) %>.
+        renders_one :show_more_item, lambda { |src:, pages:, component_klass: NavList::Item, **system_arguments|
+          system_arguments[:classes] = class_names(
+            @item_classes,
+            system_arguments[:classes]
+          )
+          system_arguments[:id] = "ActionList--showMoreItem"
+          system_arguments[:hidden] = true
+          system_arguments[:href] = "#"
+          system_arguments[:data] ||= {}
+          system_arguments[:data][:target] = "nav-list.showMoreItem"
+          system_arguments[:data][:action] = "click:nav-list#showMore"
+          system_arguments[:data][:'current-page'] = "1"
+          system_arguments[:data][:'total-pages'] = pages.to_s
+          system_arguments[:label_classes] = class_names(
+            system_arguments[:label_classes],
+            "color-fg-accent"
+          )
+
+          component_klass.new(list: self, src: src, **system_arguments)
+        }
+
+        # @private
+        def self.custom_element_name
+          "nav-list"
+        end
+
+        # @param selected_item_id [Symbol] The ID of the currently selected item. Used internally.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(selected_item_id: nil, **system_arguments)
+          @system_arguments = system_arguments
+          @selected_item_id = selected_item_id
+          @system_arguments[:'data-target'] = "nav-list.list"
+
+          super(**@system_arguments)
+        end
+
+        # Cause this section to show its list of sub items when rendered.
+        # :nocov:
+        def expand!
+          @expanded = true
+        end
+        # :nocov:
+
+        # The items contained within this section.
+        #
+        # @return [Array<Yattho::Alpha::ActionList::Item>]
+        def items
+          [*super, show_more_item].tap(&:compact!)
+        end
+
+        # @!parse
+        #   # Items.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Yattho::Alpha::NavList::Item) %>.
+        #   renders_many :items
+
+        # @private
+        def build_item(component_klass: NavList::Item, **system_arguments)
+          component_klass.new(
+            **system_arguments,
+            selected_item_id: @selected_item_id,
+            list: self
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/nav_list.d.ts

@@ -0,0 +1,25 @@
+declare class NavListElement extends HTMLElement {
+    list: HTMLElement;
+    showMoreItem: HTMLElement;
+    focusMarkers: HTMLElement[];
+    connectedCallback(): void;
+    get showMoreDisabled(): boolean;
+    set showMoreDisabled(value: boolean);
+    set currentPage(value: number);
+    get currentPage(): number;
+    get totalPages(): number;
+    get paginationSrc(): string;
+    expandItem(item: HTMLElement): void;
+    collapseItem(item: HTMLElement): void;
+    itemIsExpanded(item: HTMLElement | null): boolean;
+    handleItemWithSubItemClick(e: Event): void;
+    private showMore;
+    private setShowMoreItemState;
+    private parseHTML;
+}
+declare global {
+    interface Window {
+        NavListElement: typeof NavListElement;
+    }
+}
+export {};

data/app/components/yattho/alpha/nav_list.html.erb

@@ -0,0 +1,10 @@
+<%= render(Yattho::BaseComponent.new(tag: :ul, **@system_arguments)) do %>
+  <% sections.each_with_index do |section, index| %>
+    <% if index > 0 %>
+      <%= render(Yattho::Alpha::ActionList::Divider.new) %>
+    <% end %>
+    <li>
+      <%= section %>
+    </li>
+  <% end %>
+<% end %>