ariadne_view_components 0.0.47-x86_64-darwin → 0.0.49-x86_64-darwin

data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.js

@@ -0,0 +1,237 @@
+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 _OutletManagerController_instances, _OutletManagerController_outlets_get;
+import { Controller } from '@hotwired/stimulus';
+class OutletManagerController extends Controller {
+    constructor() {
+        super(...arguments);
+        _OutletManagerController_instances.add(this);
+        this.outletEventsLookup = null;
+        this.eventRecords = new Map();
+    }
+    getOutlets() {
+        return null;
+    }
+    outletUpdate(event, data) { }
+    getState() {
+        return null;
+    }
+    connect() {
+        this.syncOutlets();
+    }
+    syncOutlets() {
+        const event = new Event('init');
+        this.sendToOutlets(event, {
+            data: this.getState(),
+            eventKey: this.getEventKey(event),
+        });
+    }
+    sendToOutlets(event, updateTo = {}) {
+        var _a;
+        const eventKey = (_a = updateTo.eventKey) !== null && _a !== void 0 ? _a : this.getEventKey(event);
+        const outlets = __classPrivateFieldGet(this, _OutletManagerController_instances, "a", _OutletManagerController_outlets_get);
+        if (outlets === null || outlets === void 0 ? void 0 : outlets.length) {
+            for (const index in outlets) {
+                const outlet = outlets[index];
+                if (outlet.isListeningForOutletEvent(eventKey) && !this.hasHeardEvent(event)) {
+                    const isSameControllerType = this.identifier === outlet.identifier;
+                    outlet.outletUpdate(event, { eventKey, data: isSameControllerType ? updateTo.data : undefined });
+                }
+            }
+        }
+    }
+    isListeningForOutletEvent(eventTypes) {
+        const eventTypeNames = eventTypes.split('-');
+        if (!eventTypeNames.length) {
+            return false;
+        }
+        let lookup = this.outletEvents;
+        for (let i = 0; i < eventTypeNames.length; i++) {
+            const name = eventTypeNames[i];
+            if (typeof lookup === 'boolean') {
+                return lookup;
+            }
+            const hasWildCard = lookup['*'] !== undefined;
+            let nextKey = name;
+            if (hasWildCard) {
+                nextKey = '*';
+            }
+            else {
+                const isListeningForDOMEvent = lookup.domEvent !== undefined;
+                if (isListeningForDOMEvent && !this.isDOMEventName(name)) {
+                    return false;
+                }
+                else if (isListeningForDOMEvent) {
+                    nextKey = 'domEvent';
+                }
+            }
+            if (!lookup[nextKey]) {
+                return false;
+            }
+            lookup = lookup[nextKey];
+        }
+        return true;
+    }
+    isDOMEventName(eventName) {
+        return OutletManagerController.domEvents[eventName];
+    }
+    getEventKey(event) {
+        const pre = this.event_key_prefix;
+        const post = this.event_key_postfix;
+        const maybePreHyphen = pre ? '-' : '';
+        const maybePrefix = pre !== null && pre !== void 0 ? pre : '';
+        const maybePostHyphen = post ? '-' : '';
+        const maybePostfix = post !== null && post !== void 0 ? post : '';
+        return `${this.identifier}-${maybePrefix}${maybePreHyphen}${event.type}${maybePostHyphen}${maybePostfix}`;
+    }
+    hasHeardEvent(event) {
+        if (this.eventRecords.has(event)) {
+            return true;
+        }
+        this.eventRecords.set(event, true);
+        setTimeout(() => this.eventRecords.delete(event));
+        return false;
+    }
+    get event_key_prefix() {
+        return '';
+    }
+    get event_key_postfix() {
+        return '';
+    }
+    get outletEvents() {
+        if (!this.outletEventsLookup && this.hasOutletEventsValue) {
+            this.outletEventsLookup = this.outletEventsValue.reduce((acc, eventType) => {
+                let step = acc;
+                eventType.split('-').forEach((eventTypeName, i, splitArr) => {
+                    if (typeof step === 'boolean') {
+                        return;
+                    }
+                    if (i === splitArr.length - 1) {
+                        step[eventTypeName] = true;
+                    }
+                    else if (step[eventTypeName] === undefined) {
+                        step[eventTypeName] = {};
+                    }
+                    step = step[eventTypeName];
+                });
+                return acc;
+            }, {});
+        }
+        else if (!this.outletEventsLookup) {
+            this.outletEventsLookup = { '*': true };
+        }
+        return this.outletEventsLookup;
+    }
+}
+_OutletManagerController_instances = new WeakSet(), _OutletManagerController_outlets_get = function _OutletManagerController_outlets_get() {
+    const outlets = this.getOutlets();
+    if (outlets) {
+        return outlets;
+    }
+    const defaultOutlets = [];
+    if (this.hasToggleableOutlet) {
+        defaultOutlets.push(...this.toggleableOutlets);
+    }
+    if (this.hasOptionsOutlet) {
+        defaultOutlets.push(...this.optionsOutlets);
+    }
+    if (this.hasStringMatchOutlet) {
+        defaultOutlets.push(...this.stringMatchOutlets);
+    }
+    return defaultOutlets;
+};
+OutletManagerController.values = {
+    outletEvents: Array,
+};
+OutletManagerController.outlets = ['toggleable', 'options', 'string-match'];
+OutletManagerController.domEvents = {
+    abort: true,
+    afterprint: true,
+    animationend: true,
+    animationiteration: true,
+    animationstart: true,
+    beforeprint: true,
+    beforeunload: true,
+    blur: true,
+    canplay: true,
+    canplaythrough: true,
+    change: true,
+    click: true,
+    contextmenu: true,
+    copy: true,
+    cut: true,
+    dblclick: true,
+    drag: true,
+    dragend: true,
+    dragenter: true,
+    dragleave: true,
+    dragover: true,
+    dragstart: true,
+    drop: true,
+    durationchange: true,
+    ended: true,
+    error: true,
+    focus: true,
+    focusin: true,
+    focusout: true,
+    fullscreenchange: true,
+    fullscreenerror: true,
+    hashchange: true,
+    input: true,
+    invalid: true,
+    keydown: true,
+    keypress: true,
+    keyup: true,
+    load: true,
+    loadeddata: true,
+    loadedmetadata: true,
+    loadstart: true,
+    message: true,
+    mousedown: true,
+    mouseenter: true,
+    mouseleave: true,
+    mousemove: true,
+    mouseover: true,
+    mouseout: true,
+    mouseup: true,
+    mousewheel: true,
+    offline: true,
+    online: true,
+    open: true,
+    pagehide: true,
+    pageshow: true,
+    paste: true,
+    pause: true,
+    play: true,
+    playing: true,
+    popstate: true,
+    progress: true,
+    ratechange: true,
+    resize: true,
+    reset: true,
+    scroll: true,
+    search: true,
+    seeked: true,
+    seeking: true,
+    select: true,
+    show: true,
+    stalled: true,
+    storage: true,
+    submit: true,
+    suspend: true,
+    timeupdate: true,
+    toggle: true,
+    touchcancel: true,
+    touchend: true,
+    touchmove: true,
+    touchstart: true,
+    transitionend: true,
+    unload: true,
+    volumechange: true,
+    waiting: true,
+    wheel: true,
+};
+export default OutletManagerController;

data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.ts

@@ -0,0 +1,278 @@
+import {Controller} from '@hotwired/stimulus'
+
+type TOutletEventLookup = boolean | {[k: string]: TOutletEventLookup}
+
+export type TOutletChangeData<T> =
+  | {
+      eventKey?: string
+      data?: T
+    }
+  | undefined
+
+export default class OutletManagerController<T> extends Controller {
+  static values = {
+    outletEvents: Array,
+  }
+
+  declare readonly outletEventsValue: Array<string>
+  declare readonly hasOutletEventsValue: boolean
+
+  static outlets = ['toggleable', 'options', 'string-match']
+  declare readonly toggleableOutlets: Array<OutletManagerController<T>>
+  declare readonly hasToggleableOutlet: boolean
+  declare readonly optionsOutlets: Array<OutletManagerController<T>>
+  declare readonly hasOptionsOutlet: boolean
+  declare readonly stringMatchOutlets: Array<OutletManagerController<T>>
+  declare readonly hasStringMatchOutlet: boolean
+
+  outletEventsLookup: TOutletEventLookup | null = null
+
+  static domEvents: {[k: string]: boolean} = {
+    abort: true,
+    afterprint: true,
+    animationend: true,
+    animationiteration: true,
+    animationstart: true,
+    beforeprint: true,
+    beforeunload: true,
+    blur: true,
+    canplay: true,
+    canplaythrough: true,
+    change: true,
+    click: true,
+    contextmenu: true,
+    copy: true,
+    cut: true,
+    dblclick: true,
+    drag: true,
+    dragend: true,
+    dragenter: true,
+    dragleave: true,
+    dragover: true,
+    dragstart: true,
+    drop: true,
+    durationchange: true,
+    ended: true,
+    error: true,
+    focus: true,
+    focusin: true,
+    focusout: true,
+    fullscreenchange: true,
+    fullscreenerror: true,
+    hashchange: true,
+    input: true,
+    invalid: true,
+    keydown: true,
+    keypress: true,
+    keyup: true,
+    load: true,
+    loadeddata: true,
+    loadedmetadata: true,
+    loadstart: true,
+    message: true,
+    mousedown: true,
+    mouseenter: true,
+    mouseleave: true,
+    mousemove: true,
+    mouseover: true,
+    mouseout: true,
+    mouseup: true,
+    mousewheel: true,
+    offline: true,
+    online: true,
+    open: true,
+    pagehide: true,
+    pageshow: true,
+    paste: true,
+    pause: true,
+    play: true,
+    playing: true,
+    popstate: true,
+    progress: true,
+    ratechange: true,
+    resize: true,
+    reset: true,
+    scroll: true,
+    search: true,
+    seeked: true,
+    seeking: true,
+    select: true,
+    show: true,
+    stalled: true,
+    storage: true,
+    submit: true,
+    suspend: true,
+    timeupdate: true,
+    toggle: true,
+    touchcancel: true,
+    touchend: true,
+    touchmove: true,
+    touchstart: true,
+    transitionend: true,
+    unload: true,
+    volumechange: true,
+    waiting: true,
+    wheel: true,
+  }
+
+  eventRecords: Map<Event, boolean> = new Map()
+
+  getOutlets(): Array<OutletManagerController<T>> | null | void {
+    return null
+  }
+
+  outletUpdate(event: Event, data: TOutletChangeData<T>): void {}
+
+  getState(): T {
+    return null as T
+  }
+
+  connect() {
+    this.syncOutlets()
+  }
+
+  syncOutlets() {
+    const event = new Event('init')
+    this.sendToOutlets(event, {
+      data: this.getState(),
+      eventKey: this.getEventKey(event),
+    })
+  }
+
+  sendToOutlets(event: Event, updateTo: TOutletChangeData<T> = {}): void {
+    const eventKey = updateTo.eventKey ?? this.getEventKey(event)
+    const outlets = this.#outlets
+    if (outlets?.length) {
+      for (const index in outlets) {
+        const outlet = outlets[index]
+        if (outlet.isListeningForOutletEvent(eventKey) && !this.hasHeardEvent(event)) {
+          const isSameControllerType = this.identifier === outlet.identifier
+          outlet.outletUpdate(event, {eventKey, data: isSameControllerType ? updateTo.data : undefined})
+        }
+      }
+    }
+  }
+
+  isListeningForOutletEvent(eventTypes: string) {
+    const eventTypeNames = eventTypes.split('-')
+
+    if (!eventTypeNames.length) {
+      return false
+    }
+
+    let lookup = this.outletEvents
+    for (let i = 0; i < eventTypeNames.length; i++) {
+      const name = eventTypeNames[i]
+      if (typeof lookup === 'boolean') {
+        return lookup
+      }
+
+      const hasWildCard = lookup['*'] !== undefined
+      let nextKey = name
+      if (hasWildCard) {
+        nextKey = '*'
+      } else {
+        const isListeningForDOMEvent = lookup.domEvent !== undefined
+        if (isListeningForDOMEvent && !this.isDOMEventName(name)) {
+          return false
+        } else if (isListeningForDOMEvent) {
+          nextKey = 'domEvent'
+        }
+      }
+
+      if (!lookup[nextKey]) {
+        return false
+      }
+
+      lookup = lookup[nextKey]
+    }
+
+    return true
+  }
+
+  isDOMEventName(eventName: string) {
+    return OutletManagerController.domEvents[eventName]
+  }
+
+  getEventKey(event: Event) {
+    const pre = this.event_key_prefix
+    const post = this.event_key_postfix
+
+    const maybePreHyphen = pre ? '-' : ''
+    const maybePrefix = pre ?? ''
+    const maybePostHyphen = post ? '-' : ''
+    const maybePostfix = post ?? ''
+
+    return `${this.identifier}-${maybePrefix}${maybePreHyphen}${event.type}${maybePostHyphen}${maybePostfix}`
+  }
+
+  hasHeardEvent(event: Event) {
+    if (this.eventRecords.has(event)) {
+      return true
+    }
+
+    this.eventRecords.set(event, true)
+    setTimeout(() => this.eventRecords.delete(event))
+
+    return false
+  }
+
+  get event_key_prefix() {
+    return ''
+  }
+
+  get event_key_postfix() {
+    return ''
+  }
+
+  get outletEvents() {
+    if (!this.outletEventsLookup && this.hasOutletEventsValue) {
+      this.outletEventsLookup = this.outletEventsValue.reduce((acc, eventType) => {
+        let step = acc
+        eventType.split('-').forEach((eventTypeName, i, splitArr) => {
+          if (typeof step === 'boolean') {
+            return
+          }
+
+          if (i === splitArr.length - 1) {
+            step[eventTypeName] = true
+          } else if (step[eventTypeName] === undefined) {
+            step[eventTypeName] = {}
+          }
+
+          step = step[eventTypeName]
+        })
+
+        return acc
+      }, {} as TOutletEventLookup)
+    } else if (!this.outletEventsLookup) {
+      this.outletEventsLookup = {'*': true}
+    }
+
+    return this.outletEventsLookup
+  }
+
+  get #outlets(): Array<OutletManagerController<T>> | null | void {
+    const outlets = this.getOutlets()
+
+    if (outlets) {
+      return outlets
+    }
+
+    const defaultOutlets: Array<OutletManagerController<T>> = []
+
+    if (this.hasToggleableOutlet) {
+      defaultOutlets.push(...this.toggleableOutlets)
+    }
+
+    if (this.hasOptionsOutlet) {
+      defaultOutlets.push(...this.optionsOutlets)
+    }
+
+    if (this.hasStringMatchOutlet) {
+      defaultOutlets.push(...this.stringMatchOutlets)
+    }
+
+    return defaultOutlets
+  }
+}

data/app/components/ariadne/popover_component.html.erb

@@ -0,0 +1,10 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <div class="<%= @base_classes %>">
+    <%= base %>
+  </div>
+  <div class="<%= @items_wrapper_classes %>" data-action="click->toggleable#toggle">
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/ariadne/popover_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Displays content in a box that hovers over other content
+  class PopoverComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DIRECTIONS = [:top, :right, :bottom, :left]
+
+    # Menu: List of selectable items (ie: navigation)
+    # Dialog: Essentiall a modal
+    # Listbox: Something like a dropdown for a <select> element
+    # Tooltip: plain text
+    ROLES = [:menu, :dialog, :listbox, :tooltip]
+    HORIZONTAL_ALIGNMENTS = [:left, :right, :center]
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group ariadne-relative ariadne-w-fit",
+      items: "ariadne-w-fit ariadne-absolute ariadne-shadow-lg ariadne-z-10 ariadne-p-2 ariadne-bg-white ariadne-rounded-md",
+      base: "ariadne-inline-block",
+    }
+
+    ITEMS_DIRECITON_CLASSES = "group-data-[popover-direction=top]:ariadne-bottom-full group-data-[popover-direction=top]:-ariadne-translate-y-2 group-data-[popover-direction=bottom]:ariadne-top-full group-data-[popover-direction=bottom]:ariadne-translate-y-2"
+    ITEMS_HORIZONTAL_ALIGNMENT_CLASSES = "group-data-[popover-horizontal-alignment=left]:ariadne-left-0 group-data-[popover-horizontal-alignment=right]:ariadne-right-0 group-data-[popover-horizontal-alignment=center]:ariadne-left-1/2 group-data-[popover-horizontal-alignment=center]:-ariadne-translate-x-1/2"
+    ITEMS_VISIBILITY_CLASSES = "group-data-[popover-visible=false]:ariadne-hidden"
+
+    DEFAULT_ATTRIBUTES = {
+      "data-controller": "toggleable",
+      "data-action": "click->toggleable#toggle",
+      "data-toggleable-synced-attrs-value": '["data-popover-visible"]',
+    }
+
+    renders_one :base
+
+    renders_many :items
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::PopoverComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      direction: :bottom,
+      classes: "",
+      role:,
+      attributes: {},
+      horizontal_alignment: :center,
+      initial_visible: false,
+      base_wrapper_classes: "",
+      items_wrapper_classes: ""
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @direction = fetch_or_raise(DIRECTIONS, direction)
+      @horizontal_alignment = fetch_or_raise(HORIZONTAL_ALIGNMENTS, horizontal_alignment)
+      @role = fetch_or_raise(ROLES, role)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+
+      @attributes = DEFAULT_ATTRIBUTES
+        .merge({
+          "data-popover-direction": @direction,
+          "data-popover-horizontal-alignment": @horizontal_alignment,
+          "data-popover-visible": initial_visible,
+          "data-toggleable-close-on-outside-click-value": true,
+        })
+        .merge(attributes)
+
+      @base_classes = merge_class_names(DEFAULT_CLASSES[:base], base_wrapper_classes)
+      @items_wrapper_classes = merge_class_names(
+        DEFAULT_CLASSES[:items],
+        ITEMS_DIRECITON_CLASSES,
+        ITEMS_HORIZONTAL_ALIGNMENT_CLASSES,
+        ITEMS_VISIBILITY_CLASSES,
+        items_wrapper_classes,
+      )
+    end
+  end
+end

data/app/components/ariadne/progress_bar_component.html.erb

@@ -0,0 +1,5 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |c| %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/ariadne/progress_bar_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Bar used to show a progress in an activity, supports single bars or multiple bars within one component
+  # use aria-labelledby and aria-describedby to describe the progress bar's purpose
+  class ProgressBarComponent < Ariadne::Component
+    DEFAULT_TAGS = {
+      wrapper: :div,
+      item: :div,
+    }
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-flex ariadne-gap-1 ariadne-bg-slate-200 ariadne-rounded-md ariadne-overflow-hidden",
+      item: "",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {
+        role: "progressbar",
+        "data-controller": "accumulator",
+        "aria-valuenow": 0,
+      },
+      item: { "data-accumulator-target": "sum" },
+    }
+
+    BAR_SIZES = {
+      sm: "ariadne-h-2",
+      md: "ariadne-h-3",
+      lg: "ariadne-h-4",
+    }
+
+    renders_many :items, lambda { |tag: DEFAULT_TAGS[:item], classes: "", value: 0, attributes: {}|
+      Ariadne::BaseComponent.new(
+        tag: check_incoming_tag(DEFAULT_TAGS[:item], tag),
+        classes: merge_class_names(DEFAULT_CLASSES[:item], BAR_SIZES[@size], classes),
+        attributes: DEFAULT_ATTRIBUTES[:item].merge({
+          style: "width: #{(value - @min).to_f / (@max - @min) * 100}%",
+          "data-value": value,
+        }).merge(attributes),
+      )
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ProgressBarComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAGS[:wrapper], min: 0, max: 100, classes: "", size: :md, attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAGS[:wrapper], tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+
+      @min = min
+      @max = max
+      @size = size
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({
+        "aria-valuemin": @min,
+        "aria-valuemax": @max,
+      }).merge(attributes)
+    end
+  end
+end

data/app/components/ariadne/relative_time_component.html.erb

@@ -0,0 +1,3 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= @formatted_date %>
+<% end %>