ariadne_view_components 0.0.58 → 0.0.64

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

@@ -1,237 +0,0 @@
-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) { } // eslint-disable-line no-unused-vars
-    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

@@ -1,278 +0,0 @@
-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 {} // eslint-disable-line no-unused-vars
-
-  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/panel_bar_component/panel_bar_component.html.erb

@@ -1,20 +0,0 @@
-<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
-  <% panels.each_with_index do |panel, idx| %>
-    <%= render Ariadne::BaseComponent.new(tag: :li, classes: panel.classes, attributes: panel.attributes) do %>
-      <%= render Ariadne::BaseComponent.new(tag: :div, classes: Ariadne::PanelBarComponent::PanelItem::DEFAULT_WRAPPER_CLASSES) do %>
-        <span class="ariadne-px-6 ariadne-py-4 ariadne-flex ariadne-items-center ariadne-text-sm ariadne-font-medium">
-          <%= panel.icon %>
-          <span class="ariadne-ml-4 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"><%= panel.label %></span>
-          <!-- TODO: fix this -->
-          <% if idx + 1 < panels.size %>
-            <div class="md:ariadne-block ariadne-hidden ariadne-absolute ariadne-top-0 ariadne-right-0 ariadne-h-full ariadne-w-5" aria-hidden="true">
-              <svg class="ariadne-h-full ariadne-w-full ariadne-text-gray-300" viewBox="0 0 22 80" fill="none" preserveAspectRatio="none">
-                <path d="M0 -2L20 40L0 82" vector-effect="non-scaling-stroke" stroke="currentcolor" stroke-linejoin="round"></path>
-              </svg>
-            </div>
-          <% end %>
-        </span>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/components/ariadne/panel_bar_component.rb

@@ -1,80 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # Add a general description of component here
-  # Add additional usage considerations or best practices that may aid the user to use the component correctly.
-  # @accessibility Add any accessibility considerations
-  class PanelBarComponent < Ariadne::Component
-    DEFAULT_TAG = :ol
-    TAG_OPTIONS = [DEFAULT_TAG].freeze
-
-    DEFAULT_CLASSES = "ariadne-border ariadne-border-gray-300 ariadne-rounded-md ariadne-divide-y ariadne-divide-gray-300 md:ariadne-flex md:ariadne-divide-y-0"
-
-    renders_many :panels, "PanelItem"
-
-    # @example Default
-    #
-    #   <%= render(Ariadne::PanelBarComponent.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(classes: "", attributes: {})
-      @tag = DEFAULT_TAG
-      @classes = merge_class_names(
-        DEFAULT_CLASSES,
-        classes,
-      )
-
-      @attributes = attributes
-      @attributes[:role] ||= "list"
-    end
-
-    # def render?
-    #   items.any?
-    # end
-
-    # This component is part of `PanelBarComponent` and should not be
-    # used as a standalone component.
-    class PanelItem < Ariadne::Component
-      DEFAULT_ITEM_CLASSES = "ariadne-relative md:ariadne-flex-1 md:ariadne-flex"
-      DEFAULT_WRAPPER_CLASSES = "group ariadne-flex ariadne-items-center ariadne-w-full"
-
-      # TODO: fix this
-      renders_one :icon, lambda { |static_content = nil, &block|
-        next static_content if static_content.present?
-
-        view_context.capture { block&.call }
-      }
-
-      renders_one :label, lambda { |static_content = nil, &block|
-        next static_content if static_content.present?
-
-        view_context.capture { block&.call }
-      }
-
-      attr_reader :link, :classes, :attributes
-
-      def initialize(link: {}, classes: "", attributes: {})
-        @link = link
-        if @link.present?
-          @link["classes"] = merge_class_names(DEFAULT_WRAPPER_CLASSES, @link["classes"])
-        end
-        @classes = merge_class_names(DEFAULT_ITEM_CLASSES, classes)
-        @attributes = attributes
-      end
-
-      def selected?
-        @selected
-      end
-
-      def linked?
-        @link.present?
-      end
-
-      def call
-        render(Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes))
-      end
-    end
-  end
-end

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

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

data/app/components/ariadne/pill_component.rb

@@ -1,44 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # Creates a ariadne-rounded label that resembles a medicine pill.
-  class PillComponent < Ariadne::Component
-    DEFAULT_TAG = :span
-    TAG_OPTIONS = [DEFAULT_TAG].freeze
-
-    DEFAULT_CLASSES = "ariadne-flex-shrink-0 ariadne-inline-block ariadne-px-2 ariadne-py-1 ariadne-text-xs ariadne-font-medium ariadne-rounded-full ariadne-whitespace-nowrap"
-
-    # @example Default
-    #
-    #   <%= render(Ariadne::PillComponent.new(color: [49, 186, 115, 1.0])) { "Admin" } %>
-    #
-    # @param tag [Symbol, String] The rendered tag name.
-    # @param color [String] The rgba color of the pill.
-    # @param classes [String] <%= link_to_classes_docs %>
-    # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: DEFAULT_TAG, color:, classes: "", attributes: {})
-      @tag = check_incoming_tag(DEFAULT_TAG, tag)
-
-      @red = color[0]
-      @green = color[1]
-      @blue = color[2]
-      @alpha = color[3]
-
-      @attributes = attributes
-      @attributes["style"] = "background-color: rgba(#{@red}, #{@green}, #{@blue}, #{@alpha});"
-      @text_color = contrast_of(@red, @green, @blue)
-
-      @classes = merge_class_names(
-        DEFAULT_CLASSES,
-        classes,
-        @text_color,
-      )
-    end
-
-    private def contrast_of(red, green, blue)
-      luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255
-
-      luminance > 0.5 ? "ariadne-text-black" : "ariadne-text-white"
-    end
-  end
-end

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

@@ -1,10 +0,0 @@
-<%= 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 %>