ariadne_view_components 0.0.58 → 0.0.64

data/app/components/ariadne/list_component.rb

@@ -1,70 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # `List` is used to show a list of items in a vertical format.
-  class ListComponent < Ariadne::Component
-    DEFAULT_TAG = :ul
-    DEFAULT_UL_CLASSES = "ariadne-divide-y ariadne-divide-gray-300"
-
-    renders_many :items, "ListItem"
-
-    # @example Basic
-    #   <% numbers = [1, 2, 3] %>
-    #   <%= render(Ariadne::ListComponent.new) do |list| %>
-    #     <% numbers.each do |number| %>
-    #       <%= list.with_item do |item|  %>
-    #         <%= number %>
-    #       <% end %>
-    #     <% end %>
-    #   <% end %>
-    #
-    #
-    # @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_UL_CLASSES, classes)
-      @attributes = attributes
-    end
-
-    def render?
-      items?
-    end
-
-    # This component is part of `ListComponent` and should not be
-    # used as a standalone component.
-    class ListItem < Ariadne::Component
-      DEFAULT_ITEM_CLASSES = "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
-
-      attr_reader :link, :classes, :attributes
-
-      def initialize(link: {}, classes: "", attributes: {})
-        @link = link
-        @classes = merge_class_names(DEFAULT_ITEM_CLASSES, classes)
-        @attributes = attributes
-      end
-
-      def selected?
-        @selected
-      end
-
-      private def linked?
-        @link.present?
-      end
-
-      def call
-        render(Ariadne::BaseComponent.new(tag: :li, classes: @classes, attributes: @attributes)) do
-          if linked?
-            classes = @link[:classes] || ""
-            attributes = @link[:attributes] || {}
-            render(Ariadne::LinkComponent.new(href: @link[:href], classes: classes, attributes: attributes)) do
-              content
-            end
-          else
-            content
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,11 +0,0 @@
-<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
-  <%= base %>
-  <%= render Ariadne::BaseComponent.new(tag: @shadow_tag, classes: @shadow_classes, attributes: @shadow_attributes) do %>
-    <div class="<%= @content_classes %>" data-controller="events" data-action="click->events#stopPropagation">
-      <%= render Ariadne::CloseButtonComponent.new(classes: @close_button_classes, aria_label: @close_button_aria_label, attributes: { "data-action": "click->toggleable#toggle" }) %>
-      <% items.each do |item| %>
-        <%= item %>
-      <% end %>
-    </div>
-  <% end %>
-<% end %>

data/app/components/ariadne/modal_component.rb

@@ -1,88 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # Renders a full screen modal
-  class ModalComponent < Ariadne::Component
-    DEFAULT_TAG = :div
-    DEFAULT_SHADOW_TAG = :div
-    TAG_OPTIONS = [DEFAULT_TAG].freeze
-
-    DEFAULT_CLASSES = {
-      wrapper: "ariadne-group",
-      shadow: "ariadne-w-screen ariadne-h-screen ariadne-bg-black/20 ariadne-fixed ariadne-top-0 ariadne-left-0 ariadne-flex ariadne-justify-center ariadne-items-center data-[close-on-click=true]:ariadne-cursor-pointer",
-      content: "ariadne-bg-white ariadne-p-2 ariadne-relative ariadne-cursor-default",
-      close_button: "ariadne-absolute ariadne-right-2 ariadne-pt-1 ariadne-pb-1 ariadne-pl-1 ariadne-pr-1",
-    }
-
-    DEFAULT_ATTRIBUTES = {
-      wrapper: {
-        "data-controller": "toggleable",
-        "data-action": "click->toggleable#toggle",
-        "data-toggleable-anti-attrs-value": '["aria-hidden"]',
-      },
-      shadow: {},
-      content: { role: :dialog },
-      close_button: {},
-    }
-
-    SHADOW_VISIBILITY_CLASSES = "group-aria-hidden:ariadne-hidden"
-
-    renders_one :base
-
-    renders_many :items
-
-    # @example Default
-    #
-    #   <%= render(Ariadne::ModalComponent.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,
-      classes: "",
-      attributes: {},
-      initial_visible: false,
-      shadow_tag: DEFAULT_SHADOW_TAG,
-      shadow_classes: "",
-      shadow_attributes: {},
-      content_classes: "",
-      content_attributes: {},
-      close_button_classes: "",
-      close_button_attributes: {},
-      close_button_aria_label: "Close modal button",
-      close_on_shadow_click: true
-    )
-      @tag = check_incoming_tag(DEFAULT_TAG, tag)
-      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
-      @attributes = DEFAULT_ATTRIBUTES[:wrapper]
-        .merge({
-          "aria-hidden": true,
-          "data-toggleable-state-value": false,
-        })
-        .merge(attributes)
-
-      @initial_visible = initial_visible
-      @shadow_tag = check_incoming_tag(DEFAULT_SHADOW_TAG, shadow_tag)
-      @shadow_classes = merge_class_names(
-        DEFAULT_CLASSES[:shadow],
-        SHADOW_VISIBILITY_CLASSES,
-        shadow_classes,
-      )
-      @shadow_attributes = DEFAULT_ATTRIBUTES[:shadow]
-        .merge({
-          "data-controller": "events",
-          "data-close-on-click": close_on_shadow_click,
-          "data-action": close_on_shadow_click ? "" : "click->events#stopPropagation",
-        })
-        .merge(shadow_attributes)
-
-      @content_classes = merge_class_names(DEFAULT_CLASSES[:content], content_classes)
-      @content_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
-
-      @close_button_aria_label = close_button_aria_label
-      @close_button_classes = merge_class_names(DEFAULT_CLASSES[:close_button], close_button_classes)
-      @close_button_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
-    end
-  end
-end

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

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

data/app/components/ariadne/narrow_container_component.rb

@@ -1,30 +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 NarrowContainerComponent < Ariadne::Component
-    DEFAULT_TAG = :div
-    TAG_OPTIONS = [DEFAULT_TAG].freeze
-
-    DEFAULT_CLASSES = "ariadne-max-w-7xl ariadne-mx-auto ariadne-py-12 ariadne-px-4 sm:ariadne-px-6 lg:ariadne-py-16 lg:ariadne-px-8"
-
-    # @example Default
-    #   <%= render(Ariadne::NarrowContainerComponent.new) do |container| %>
-    #     <%= render(Ariadne::ButtonComponent.new) { "Click me!" } %>
-    #   <% end %>
-    #
-    # @param classes [String] <%= link_to_classes_docs %>
-    # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(classes: "", attributes: {})
-      @tag = :div
-      @classes = merge_class_names(
-        DEFAULT_CLASSES,
-        classes,
-      )
-
-      @attributes = attributes
-    end
-  end
-end

data/app/components/ariadne/options_controller/options_controller.d.ts

@@ -1,39 +0,0 @@
-import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
-import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
-type TOptionKey = string | number;
-type TActiveOptions = {
-    [k: TOptionKey]: boolean;
-};
-export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
-    select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
-}
-export default class OptionsController extends SyncedBooleanAttributesController<TActiveOptions> implements OptionsOutlet {
-    #private;
-    static outlets: string[];
-    static targets: string[];
-    static values: {
-        activeOptions: ObjectConstructor;
-        isMulti: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        toggleable: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        syncedAttrs: ArrayConstructor;
-        antiAttrs: ArrayConstructor;
-        protectAttrs: BooleanConstructor;
-        outletEvents: ArrayConstructor;
-    };
-    readonly optionTargets: Array<Element>;
-    activeOptionsValue: TActiveOptions;
-    readonly isMultiValue: boolean;
-    readonly toggleableValue: boolean;
-    select(event: Event, updateTo?: TOutletChangeData<TActiveOptions>): void;
-    optionTargetConnected(element: Element): void;
-    getValueForElement(element: Element): boolean;
-    getState(): TActiveOptions;
-    outletUpdate: (event: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
-}
-export {};

data/app/components/ariadne/options_controller/options_controller.js

@@ -1,89 +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 _OptionsController_instances, _OptionsController_shouldChangeState, _OptionsController_activateKey, _OptionsController_deactivateKey, _OptionsController_getElementKey;
-import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
-class OptionsController extends SyncedBooleanAttributesController {
-    constructor() {
-        super(...arguments);
-        _OptionsController_instances.add(this);
-        this.outletUpdate = this.select;
-    }
-    select(event, updateTo = {}) {
-        var _a;
-        const activeOptions = updateTo.data;
-        for (const index in this.optionTargets) {
-            const target = this.optionTargets[index];
-            const wasSelected = target === event.currentTarget;
-            const isCurrentlyActive = (_a = this.getValueForElement(target)) !== null && _a !== void 0 ? _a : false;
-            const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, target);
-            const shouldChangeState = activeOptions !== undefined
-                ? !!activeOptions[optionKey] !== isCurrentlyActive
-                : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_shouldChangeState).call(this, isCurrentlyActive, wasSelected);
-            if (shouldChangeState) {
-                const willBeActive = !isCurrentlyActive;
-                this.updateAttributesForElement(target, willBeActive);
-                willBeActive ? __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateKey).call(this, optionKey) : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateKey).call(this, optionKey);
-            }
-        }
-        this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: this.activeOptionsValue }));
-    }
-    optionTargetConnected(element) {
-        const key = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, element);
-        const isActive = this.activeOptionsValue[key] || this.doesElementHaveOnAttrs(element);
-        if (isActive) {
-            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateKey).call(this, key);
-        }
-        else {
-            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateKey).call(this, key);
-        }
-        this.updateAttributesForElement(element, isActive);
-    }
-    getValueForElement(element) {
-        var _a;
-        const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, element);
-        return (_a = this.activeOptionsValue[optionKey]) !== null && _a !== void 0 ? _a : false;
-    }
-    getState() {
-        return this.activeOptionsValue;
-    }
-}
-_OptionsController_instances = new WeakSet(), _OptionsController_shouldChangeState = function _OptionsController_shouldChangeState(isCurrentlyActive, wasSelected) {
-    if (!wasSelected && !isCurrentlyActive) {
-        // Not currently on and wasn't selected, no reason to change
-        return false;
-    }
-    if (!wasSelected && isCurrentlyActive && this.isMultiValue) {
-        // It wasn't selected and it is on. However, multi value is on so just leave it
-        return false;
-    }
-    if (wasSelected && isCurrentlyActive && !this.toggleableValue) {
-        // It was selected and it's on. But toggle isn't on so just leave it
-        return false;
-    }
-    // Wasn't selected and it's active but only one can be active
-    // Was selected and it's active but toggling behavior means it should deactivate
-    // Was selected and it's not on, so it just needs to be turned on
-    return true;
-}, _OptionsController_activateKey = function _OptionsController_activateKey(key) {
-    this.activeOptionsValue = Object.assign(Object.assign({}, this.activeOptionsValue), { [key]: true });
-}, _OptionsController_deactivateKey = function _OptionsController_deactivateKey(key) {
-    const copy = Object.assign({}, this.activeOptionsValue);
-    delete copy[key];
-    this.activeOptionsValue = copy;
-}, _OptionsController_getElementKey = function _OptionsController_getElementKey(element) {
-    const elementValue = element === null || element === void 0 ? void 0 : element.getAttribute('data-option-value');
-    if (elementValue)
-        return elementValue;
-    const content = element === null || element === void 0 ? void 0 : element.textContent;
-    if (content === null) {
-        throw new Error(`${element.tagName} was given as an options target without a data-option-value or textContent. One must be provided to identify the target.`);
-    }
-    return content.trim();
-};
-OptionsController.outlets = SyncedBooleanAttributesController.outlets;
-OptionsController.targets = ['option'];
-OptionsController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { activeOptions: Object, isMulti: { type: Boolean, default: false }, toggleable: { type: Boolean, default: false } });
-export default OptionsController;

data/app/components/ariadne/options_controller/options_controller.ts

@@ -1,122 +0,0 @@
-import {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
-import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
-
-type TOptionKey = string | number
-type TActiveOptions = {[k: TOptionKey]: boolean}
-export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
-  select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void
-}
-
-export default class OptionsController
-  extends SyncedBooleanAttributesController<TActiveOptions>
-  implements OptionsOutlet
-{
-  static outlets = SyncedBooleanAttributesController.outlets
-  static targets = ['option']
-
-  static values = {
-    ...SyncedBooleanAttributesController.values,
-    activeOptions: Object, // The currently active elements in TActiveOptions format
-    isMulti: {type: Boolean, default: false}, // Allows more than one selection
-    toggleable: {type: Boolean, default: false}, // If true, selecting the same value twice will turn it off. If false, nothing happens
-  }
-
-  // Targets
-  declare readonly optionTargets: Array<Element>
-
-  // Values
-  declare activeOptionsValue: TActiveOptions
-  declare readonly isMultiValue: boolean
-  declare readonly toggleableValue: boolean
-
-  select(event: Event, updateTo: TOutletChangeData<TActiveOptions> = {}) {
-    const activeOptions = updateTo.data
-    for (const index in this.optionTargets) {
-      const target = this.optionTargets[index]
-      const wasSelected = target === event.currentTarget
-      const isCurrentlyActive = this.getValueForElement(target) ?? false
-      const optionKey = this.#getElementKey(target)
-      const shouldChangeState =
-        activeOptions !== undefined
-          ? !!activeOptions[optionKey] !== isCurrentlyActive
-          : this.#shouldChangeState(isCurrentlyActive, wasSelected)
-
-      if (shouldChangeState) {
-        const willBeActive = !isCurrentlyActive
-        this.updateAttributesForElement(target, willBeActive)
-        willBeActive ? this.#activateKey(optionKey) : this.#deactivateKey(optionKey)
-      }
-    }
-
-    this.sendToOutlets(event, {...updateTo, data: this.activeOptionsValue})
-  }
-
-  optionTargetConnected(element: Element) {
-    const key = this.#getElementKey(element)
-    const isActive = this.activeOptionsValue[key] || this.doesElementHaveOnAttrs(element)
-    if (isActive) {
-      this.#activateKey(key)
-    } else {
-      this.#deactivateKey(key)
-    }
-
-    this.updateAttributesForElement(element, isActive)
-  }
-
-  #shouldChangeState(isCurrentlyActive: boolean, wasSelected: boolean) {
-    if (!wasSelected && !isCurrentlyActive) {
-      // Not currently on and wasn't selected, no reason to change
-      return false
-    }
-
-    if (!wasSelected && isCurrentlyActive && this.isMultiValue) {
-      // It wasn't selected and it is on. However, multi value is on so just leave it
-      return false
-    }
-
-    if (wasSelected && isCurrentlyActive && !this.toggleableValue) {
-      // It was selected and it's on. But toggle isn't on so just leave it
-      return false
-    }
-
-    // Wasn't selected and it's active but only one can be active
-    // Was selected and it's active but toggling behavior means it should deactivate
-    // Was selected and it's not on, so it just needs to be turned on
-    return true
-  }
-
-  #activateKey(key: TOptionKey) {
-    this.activeOptionsValue = {...this.activeOptionsValue, [key]: true}
-  }
-
-  #deactivateKey(key: TOptionKey) {
-    const copy = {...this.activeOptionsValue}
-    delete copy[key]
-    this.activeOptionsValue = copy
-  }
-
-  #getElementKey(element: Element) {
-    const elementValue = element?.getAttribute('data-option-value')
-    if (elementValue) return elementValue
-
-    const content = (element as HTMLElement)?.textContent
-    if (content === null) {
-      throw new Error(
-        `${element.tagName} was given as an options target without a data-option-value or textContent. One must be provided to identify the target.`,
-      )
-    }
-
-    return content.trim()
-  }
-
-  getValueForElement(element: Element) {
-    const optionKey = this.#getElementKey(element)
-    return this.activeOptionsValue[optionKey] ?? false
-  }
-
-  getState() {
-    return this.activeOptionsValue
-  }
-
-  outletUpdate = this.select
-}

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

@@ -1,42 +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 {
-    #private;
-    static values: {
-        outletEvents: ArrayConstructor;
-    };
-    readonly outletEventsValue: Array<string>;
-    readonly hasOutletEventsValue: boolean;
-    static outlets: string[];
-    readonly toggleableOutlets: Array<OutletManagerController<T>>;
-    readonly hasToggleableOutlet: boolean;
-    readonly optionsOutlets: Array<OutletManagerController<T>>;
-    readonly hasOptionsOutlet: boolean;
-    readonly stringMatchOutlets: Array<OutletManagerController<T>>;
-    readonly hasStringMatchOutlet: boolean;
-    outletEventsLookup: TOutletEventLookup | null;
-    static domEvents: {
-        [k: string]: boolean;
-    };
-    eventRecords: Map<Event, boolean>;
-    getOutlets(): Array<OutletManagerController<T>> | null | void;
-    outletUpdate(event: Event, data: TOutletChangeData<T>): void;
-    getState(): T;
-    connect(): void;
-    syncOutlets(): void;
-    sendToOutlets(event: Event, updateTo?: TOutletChangeData<T>): void;
-    isListeningForOutletEvent(eventTypes: string): boolean;
-    isDOMEventName(eventName: string): boolean;
-    getEventKey(event: Event): string;
-    hasHeardEvent(event: Event): boolean;
-    get event_key_prefix(): string;
-    get event_key_postfix(): string;
-    get outletEvents(): TOutletEventLookup;
-}
-export {};