ariadne_view_components 0.0.59 → 0.0.65

data/app/components/ariadne/text.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # `Text` is a wrapper component that will apply typography styles to the text inside.
-  class Text < Ariadne::Component
-    DEFAULT_TAG = :span
-
-    # @example Default
-    #   <%= render(Ariadne::Text.new(tag: :p, attributes: { font_weight: :bold })) { "Bold Text" } %>
-    #   <%= render(Ariadne::Text.new(tag: :p, attributes: { color: :danger })) { "Danger Text" } %>
-    #
-    # @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: {})
-      @tag = tag
-      @classes = classes
-      @attributes = attributes
-    end
-
-    def call
-      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
-    end
-  end
-end

data/app/components/ariadne/time_ago_component/time-ago-component.d.ts

@@ -1 +0,0 @@
-import '@github/time-elements';

data/app/components/ariadne/time_ago_component/time-ago-component.js

@@ -1 +0,0 @@
-import '@github/time-elements';

data/app/components/ariadne/time_ago_component/time-ago-component.ts

@@ -1 +0,0 @@
-import '@github/time-elements'

data/app/components/ariadne/time_ago_component.rb

@@ -1,56 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # Displays a time ariadne-relative to how long ago it was. This component requires JavaScript.
-  class TimeAgoComponent < Ariadne::Component
-    DEFAULT_TAG = :"time-ago"
-    TAG_OPTIONS = [DEFAULT_TAG].freeze
-
-    DEFAULT_CLASSES = "ariadne-whitespace-nowrap"
-
-    # @example Default
-    #
-    #   <%= render(Ariadne::TimeAgoComponent.new(time: Time.now)) %>
-    #
-    # @param tag [Symbol, String] The rendered tag name.
-    # @param time [Time] The time to be formatted
-    # @param micro [Boolean] If true then the text will be formatted in "micro" mode, using as few characters as possible
-    # @param classes [String] <%%= link_to_classes_docs %>
-    # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: DEFAULT_TAG, time:, micro: false, classes: "", attributes: {})
-      @tag = check_incoming_tag(DEFAULT_TAG, tag)
-      @classes = merge_class_names(
-        DEFAULT_CLASSES,
-        classes,
-      )
-
-      @time = time
-      @micro = micro
-      @attributes = attributes
-      @attributes[:datetime] = @time.utc.iso8601
-      @attributes[:format] = "micro" if @micro
-    end
-
-    def call
-      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { time_in_words }
-    end
-
-    private def time_in_words
-      return @time.in_time_zone.strftime("%b %-d, %Y") unless @micro
-
-      seconds_ago = Time.current - @time
-
-      if seconds_ago < 1.minute
-        "1m"
-      elsif seconds_ago >= 1.minute && seconds_ago < 1.hour
-        "#{(seconds_ago / 60).floor}m"
-      elsif seconds_ago >= 1.hour && seconds_ago < 1.day
-        "#{(seconds_ago / 60 / 60).floor}h"
-      elsif seconds_ago >= 1.day && seconds_ago < 1.year
-        "#{(seconds_ago / 60 / 60 / 24).floor}d"
-      elsif seconds_ago >= 1.year
-        "#{(seconds_ago / 60 / 60 / 24 / 365).floor}y"
-      end
-    end
-  end
-end

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

@@ -1,19 +0,0 @@
-<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
-  <div>
-    <div class="ariadne-divide-y ariadne-divide-gray-200">
-      <div class="ariadne-pb-4">
-        <h2 id="activity-title" class="ariadne-text-lg ariadne-font-medium ariadne-text-gray-900">Timeline</h2>
-      </div>
-      <div class="ariadne-pt-6">
-        <!-- Activity feed-->
-        <div class="ariadne-flow-root">
-          <ul role="list" class="ariadne--mb-8">
-            <% items.each do %>
-              <%= items %>
-            <% end %>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-<% end %>

data/app/components/ariadne/timeline_component.rb

@@ -1,34 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # Represents a linear timeline of events. Typically, this is shown
-  # as part of the Conversation component.
-  class TimelineComponent < Ariadne::Component
-    DEFAULT_TAG = :div
-    DEFAULT_CLASSES = ""
-
-    # The sub-items(s) to render
-    renders_many :items, lambda { |static_content = nil, &block|
-      next static_content if static_content.present?
-
-      view_context.capture { block&.call }
-    }
-
-    # @example Default
-    #
-    #   <%= render(Ariadne::TimelineComponent.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: {})
-      @tag = check_incoming_tag(DEFAULT_TAG, tag)
-      @classes = merge_class_names(
-        DEFAULT_CLASSES,
-        classes,
-      )
-
-      @attributes = attributes
-    end
-  end
-end

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

@@ -1,15 +0,0 @@
-<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |wrapper| %>
-  <label class="ariadne-flex ariadne-w-fit ariadne-items-center <%= @label_classes %>">
-    <% if content? %>
-      <span class="group-data-[label-position=start]/wrapper:ariadne-mr-1.5 group-data-[label-position=end]/wrapper:ariadne-ml-1"><%= content %></span>
-    <% end %>
-    <%= render Ariadne::BaseComponent.new(tag: :button, classes: @button_classes, attributes: @button_attributes) do |button| %>
-      <span class="ariadne-sr-only ariadne-translate-x-3">Use setting</span>
-      <span aria-hidden="true" class="ariadne-pointer-events-none ariadne-absolute ariadne-h-full ariadne-w-full ariadne-rounded-md ariadne-bg-white"></span>
-      <span aria-hidden="true"
-      class="ariadne-bg-gray-200 ariadne-pointer-events-none ariadne-absolute ariadne-mx-auto ariadne-rounded-full ariadne-transition-colors ariadne-duration-200 ariadne-ease-in-out <%= @track_classes %>"></span>
-      <span aria-hidden="true"
-      class="ariadne-pointer-events-none ariadne-absolute ariadne-left-0 ariadne-inline-block ariadne-transform ariadne-rounded-full ariadne-border ariadne-border-gray-200 ariadne-bg-white ariadne-shadow ariadne-ring-0 ariadne-transition-transform ariadne-duration-200 ariadne-ease-in-out <%= @thumb_classes %>"></span>
-    <% end %>
-  </label>
-<% end %>

data/app/components/ariadne/toggle_component.rb

@@ -1,95 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # Simple toggle switch with on/off state. The logic is controlled by toggleable_controller and styles applied through
-  # tailwind's group+data attributes: https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes
-  class ToggleComponent < Ariadne::Component
-    DEFAULT_TAG = :div
-
-    DEFAULT_STATUS_LABEL_POSITION = :start
-    STATUS_LABEL_POSITION_MAPPINGS = {
-      start: "ariadne-flex-row",
-      end: "ariadne-flex-row-reverse",
-    }.freeze
-    STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
-
-    DEFAULT_SIZE = :md
-    THUMB_SIZE_MAPPINGS = { sm: "ariadne-translate-x-0 ariadne-h-3 ariadne-w-3 group-aria-checked/toggle:ariadne-translate-x-3", md: "ariadne-translate-x-0 ariadne-h-5 ariadne-w-5 group-aria-checked/toggle:ariadne-translate-x-5" }.freeze
-    TRACK_SIZE_MAPPINGS = { sm: "ariadne-h-2 ariadne-w-4", md: "ariadne-h-4 ariadne-w-9" }.freeze
-    BUTTON_SIZE_MAPPINGS = { sm: "ariadne-h-3 ariadne-w-6", md: "ariadne-h-5 ariadne-w-10" }.freeze
-    LABEL_SIZE_MAPPINGS = { sm: "ariadne-text-xs", md: "ariadne-text-lg" }.freeze
-    SIZE_OPTIONS = THUMB_SIZE_MAPPINGS.keys.freeze
-
-    DEFAULT_CLASSES = {
-      wrapper: "ariadne-group/wrapper data-[disabled=true]:ariadne-opacity-50 data-[disabled=true]:ariadne-cursor-auto",
-      button: "ariadne-flex ariadne-justify-center ariadne-group/toggle ariadne-relative ariadne-inline-flex ariadne-flex-shrink-0 group-data-[disabled=false]/wrapper:ariadne-cursor-pointer ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-focus:outline-none ariadne-focus:ring-2 ariadne-focus:ring-indigo-600 ariadne-focus:ring-offset-2 disabled:ariadne-cursor-auto",
-    }
-
-    DEFAULT_ATTRIBUTES = {
-      wrapper: {}.freeze,
-      button: {
-        role: "switch",
-        "data-controller": "toggleable",
-        "data-toggleable-synced-attrs-value": '["aria-checked"]',
-        "data-action": "click->toggleable#toggle",
-      },
-    }.freeze
-
-    DEFAULT_TRACK_COLOR = :indigo
-    TRACK_COLOR_MAPPINGS = {
-      white: "group-aria-checked/toggle:ariadne-bg-white",
-      green: "group-aria-checked/toggle:ariadne-bg-green-600",
-      blue: "group-aria-checked/toggle:ariadne-bg-blue-600",
-      billy_purple: "group-aria-checked/toggle:ariadne-bg-billy-purple",
-      indigo: "group-aria-checked/toggle:ariadne-bg-indigo-600",
-    }
-    TRACK_COLOR_OPTIONS = TRACK_COLOR_MAPPINGS.keys.freeze
-
-    # @example Default
-    #
-    #   <%= render(Ariadne::ToggleComponent.new) { "Example" } %>
-    #
-    # @param classes [String] <%= link_to_classes_docs %>
-    # @param color [String] <%= link_to_classes_docs %>
-    # @param checked [Boolean] <%= link_to_classes_docs %>
-    # @param disabled [Boolean] <%= link_to_classes_docs %>
-    # @param size [String] <%= link_to_classes_docs %>
-    # @param label [String] <%= link_to_classes_docs %>
-    # @param status_label_position [String] <%= link_to_classes_docs %>
-    # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(
-      classes: nil,
-      checked: false,
-      disabled: false,
-      size: DEFAULT_SIZE,
-      color: DEFAULT_TRACK_COLOR,
-      status_label_position: DEFAULT_STATUS_LABEL_POSITION,
-      attributes: {}
-    )
-      @tag = DEFAULT_TAG
-      @size = fetch_or_raise(SIZE_OPTIONS, size)
-      @status_label_position = fetch_or_raise(STATUS_LABEL_POSITION_OPTIONS, status_label_position)
-      @color = fetch_or_raise(TRACK_COLOR_OPTIONS, color)
-      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
-      @checked = checked
-      @disabled = disabled
-      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({ "data-label-position": @status_label_position, "data-disabled": @disabled }).merge(attributes)
-
-      @label_classes = merge_class_names(STATUS_LABEL_POSITION_MAPPINGS.fetch(@status_label_position), LABEL_SIZE_MAPPINGS.fetch(@size))
-
-      @button_classes = merge_class_names(DEFAULT_CLASSES[:button], BUTTON_SIZE_MAPPINGS.fetch(@size))
-      @button_attributes = DEFAULT_ATTRIBUTES[:button].merge({ "aria-checked": @checked, "data-toggleable-state-value": @checked, disabled: @disabled })
-
-      @thumb_classes = THUMB_SIZE_MAPPINGS.fetch(@size)
-      @track_classes = merge_class_names(TRACK_SIZE_MAPPINGS.fetch(@size), TRACK_COLOR_MAPPINGS.fetch(@color))
-    end
-
-    def on?
-      @checked
-    end
-
-    def disabled?
-      @disabled
-    end
-  end
-end

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

@@ -1,34 +0,0 @@
-import type { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
-import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
-export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
-    toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void;
-}
-export default class ToggleableController extends SyncedBooleanAttributesController<boolean> implements ToggleableOutlet {
-    static outlets: string[];
-    static values: {
-        state: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        closeOnOutsideClick: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        syncedAttrs: ArrayConstructor;
-        antiAttrs: ArrayConstructor;
-        protectAttrs: BooleanConstructor;
-        outletEvents: ArrayConstructor;
-    };
-    stateValue: boolean;
-    readonly closeOnOutsideClickValue: boolean;
-    connect(): void;
-    toggle(event: Event, updateTo?: TOutletChangeData<boolean>): void;
-    on(event: Event): void;
-    off(event: Event): void;
-    clickOutside(event: Event): void;
-    getValueForElement(element: Element): boolean | null;
-    getElementsToSync(): Element[] | null | undefined;
-    getState(): boolean;
-    get event_key_postfix(): "on" | "off";
-    outletUpdate: (event: Event, updateTo?: TOutletChangeData<boolean>) => void;
-}

data/app/components/ariadne/toggleable_controller/toggleable_controller.js

@@ -1,54 +0,0 @@
-import { useClickOutside } from 'stimulus-use';
-import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
-class ToggleableController extends SyncedBooleanAttributesController {
-    constructor() {
-        super(...arguments);
-        this.outletUpdate = this.toggle;
-    }
-    connect() {
-        this.syncElementAttributes();
-        useClickOutside(this, { dispatchEvent: this.closeOnOutsideClickValue && this.stateValue });
-    }
-    toggle(event, updateTo = {}) {
-        var _a;
-        const v = (_a = updateTo.data) !== null && _a !== void 0 ? _a : !this.stateValue;
-        this.updateAttributesForElement(this.element, v);
-        this.stateValue = v;
-        this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: v }));
-    }
-    on(event) {
-        this.toggle(event, { data: true });
-    }
-    off(event) {
-        this.toggle(event, { data: false });
-    }
-    clickOutside(event) {
-        if (this.closeOnOutsideClickValue && this.stateValue) {
-            this.toggle(event, { data: false });
-        }
-    }
-    getValueForElement(element) {
-        if (element !== this.element) {
-            return null;
-        }
-        return this.stateValue;
-    }
-    getElementsToSync() {
-        return [this.element];
-    }
-    getState() {
-        return this.stateValue;
-    }
-    get event_key_postfix() {
-        return this.stateValue ? 'on' : 'off';
-    }
-}
-ToggleableController.outlets = SyncedBooleanAttributesController.outlets;
-ToggleableController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { state: {
-        type: Boolean,
-        default: false,
-    }, closeOnOutsideClick: {
-        type: Boolean,
-        default: false,
-    } });
-export default ToggleableController;

data/app/components/ariadne/toggleable_controller/toggleable_controller.ts

@@ -1,77 +0,0 @@
-import type {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
-import {useClickOutside} from 'stimulus-use'
-import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
-
-export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
-  toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void
-}
-
-export default class ToggleableController
-  extends SyncedBooleanAttributesController<boolean>
-  implements ToggleableOutlet
-{
-  static outlets = SyncedBooleanAttributesController.outlets
-  static values = {
-    ...SyncedBooleanAttributesController.values,
-    state: {
-      type: Boolean,
-      default: false,
-    },
-    closeOnOutsideClick: {
-      type: Boolean,
-      default: false,
-    },
-  }
-
-  declare stateValue: boolean
-  declare readonly closeOnOutsideClickValue: boolean
-
-  connect(): void {
-    this.syncElementAttributes()
-    useClickOutside(this, {dispatchEvent: this.closeOnOutsideClickValue && this.stateValue})
-  }
-
-  toggle(event: Event, updateTo: TOutletChangeData<boolean> = {}) {
-    const v = updateTo.data ?? !this.stateValue
-
-    this.updateAttributesForElement(this.element, v)
-    this.stateValue = v
-    this.sendToOutlets(event, {...updateTo, data: v})
-  }
-
-  on(event: Event) {
-    this.toggle(event, {data: true})
-  }
-
-  off(event: Event) {
-    this.toggle(event, {data: false})
-  }
-
-  clickOutside(event: Event) {
-    if (this.closeOnOutsideClickValue && this.stateValue) {
-      this.toggle(event, {data: false})
-    }
-  }
-
-  getValueForElement(element: Element): boolean | null {
-    if (element !== this.element) {
-      return null
-    }
-
-    return this.stateValue
-  }
-
-  getElementsToSync(): Element[] | null | undefined {
-    return [this.element]
-  }
-
-  getState() {
-    return this.stateValue
-  }
-
-  get event_key_postfix() {
-    return this.stateValue ? 'on' : 'off'
-  }
-
-  outletUpdate = this.toggle
-}

data/app/components/ariadne/tooltip_component/tooltip-component.d.ts

@@ -1,24 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import type { Instance, Placement } from '@popperjs/core';
-export default class TooltipComponent extends Controller {
-    static targets: string[];
-    readonly triggerTarget: HTMLElement;
-    readonly tooltipTarget: HTMLElement;
-    static values: {
-        placement: {
-            type: StringConstructor;
-            default: string;
-        };
-        offset: {
-            type: ArrayConstructor;
-            default: number[];
-        };
-    };
-    readonly placementValue: Placement;
-    readonly offsetValue: Array<number>;
-    popperInstance: Instance;
-    connect(): void;
-    disconnect(): void;
-    show(): void;
-    hide(): void;
-}

data/app/components/ariadne/tooltip_component/tooltip-component.js

@@ -1,43 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { createPopper } from '@popperjs/core';
-class TooltipComponent extends Controller {
-    // Create a new Popper instance
-    connect() {
-        this.popperInstance = createPopper(this.triggerTarget, this.tooltipTarget, {
-            placement: this.placementValue,
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: this.offsetValue,
-                    },
-                },
-            ],
-        });
-    }
-    // Destroy the Popper instance
-    disconnect() {
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-        }
-    }
-    show() {
-        this.tooltipTarget.setAttribute('data-tooltip-show', '');
-        this.tooltipTarget.classList.remove('ariadne-invisible');
-        // We need to tell Popper to update the tooltip position
-        // after we show the tooltip, otherwise it will be incorrect
-        this.popperInstance.update();
-        this.dispatch('shown', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
-    }
-    hide() {
-        this.tooltipTarget.removeAttribute('data-tooltip-show');
-        this.tooltipTarget.classList.add('ariadne-invisible');
-        this.dispatch('ariadne-hidden', { detail: { trigger: this.triggerTarget, tooltip: this.tooltipTarget } });
-    }
-}
-TooltipComponent.targets = ['trigger', 'tooltip'];
-TooltipComponent.values = {
-    placement: { type: String, default: 'top' },
-    offset: { type: Array, default: [0, 8] },
-};
-export default TooltipComponent;

data/app/components/ariadne/tooltip_component/tooltip-component.ts

@@ -1,57 +0,0 @@
-import {Controller} from '@hotwired/stimulus'
-import {createPopper} from '@popperjs/core'
-import type {Instance, Placement} from '@popperjs/core'
-
-export default class TooltipComponent extends Controller {
-  static targets = ['trigger', 'tooltip']
-  declare readonly triggerTarget: HTMLElement
-  declare readonly tooltipTarget: HTMLElement
-
-  static values = {
-    placement: {type: String, default: 'top'},
-    offset: {type: Array, default: [0, 8]},
-  }
-  declare readonly placementValue: Placement
-  declare readonly offsetValue: Array<number>
-
-  popperInstance: Instance
-
-  // Create a new Popper instance
-  connect() {
-    this.popperInstance = createPopper(this.triggerTarget, this.tooltipTarget, {
-      placement: this.placementValue,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: this.offsetValue,
-          },
-        },
-      ],
-    })
-  }
-
-  // Destroy the Popper instance
-  disconnect() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy()
-    }
-  }
-
-  show() {
-    this.tooltipTarget.setAttribute('data-tooltip-show', '')
-    this.tooltipTarget.classList.remove('ariadne-invisible')
-
-    // We need to tell Popper to update the tooltip position
-    // after we show the tooltip, otherwise it will be incorrect
-    this.popperInstance.update()
-    this.dispatch('shown', {detail: {trigger: this.triggerTarget, tooltip: this.tooltipTarget}})
-  }
-
-  hide() {
-    this.tooltipTarget.removeAttribute('data-tooltip-show')
-    this.tooltipTarget.classList.add('ariadne-invisible')
-
-    this.dispatch('ariadne-hidden', {detail: {trigger: this.triggerTarget, tooltip: this.tooltipTarget}})
-  }
-}

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

@@ -1,4 +0,0 @@
-<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
-  <span><%= @text %></span>
-  <span class="ariadne-tooltip-arrow ariadne-absolute ariadne-block" data-popper-arrow></span>
-<% end %>

data/app/components/ariadne/tooltip_component.rb

@@ -1,108 +0,0 @@
-# frozen_string_literal: true
-
-module Ariadne
-  # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text.
-  # Use tooltips sparingly and as a last resort.
-  #
-  # When using a tooltip, follow the provided guidelines to avoid accessibility issues.
-  #
-  # - Tooltip text should be brief and to the point. The tooltip content must be a string.
-  # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never
-  #  use tooltips to convey critical information.
-  #
-  # @accessibility
-  #   - **Never set tooltips on static elements.** Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
-  #   and screen reader users.
-  #   - Place `Tooltip` adjacent after its trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
-  #   content.
-  #   ### Which `type` should I set?
-  #   Setting `:description` establishes an `aria-describedby` relationship, while `:label` establishes an `aria-labelledby` relationship between the trigger element and the tooltip,
-  #
-  #   The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
-  #   - When there is already a visible label text on the trigger element, the tooltip is likely intended to supplement the existing text, so set `type: :description`.
-  #   The majority of tooltips will fall under this category.
-  #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
-  #   This type is usually only appropriate for an icon-only control.
-  class TooltipComponent < Ariadne::Component
-    DEFAULT_TAG = :tooltip
-    DEFAULT_PLACEMENT = :top
-    VALID_PLACEMENTS = [DEFAULT_PLACEMENT, :right, :bottom, :left].freeze
-
-    DEFAULT_CLASSES = "ariadne-invisible ariadne-absolute ariadne-bg-slate-900 ariadne-text-white ariadne-font-semibold ariadne-max-w-xs ariadne-py-1 ariadne-px-2 ariadne-rounded ariadne-z-max"
-
-    DATA_CONTROLLER = "tooltip-component"
-    DATA_ACTION = "mouseover->tooltip-component#show mouseout->tooltip-component#hide"
-
-    TYPE_DEFAULT = :description
-    VALID_TYPES = [:label, TYPE_DEFAULT].freeze
-
-    # DEFAULT_DATA_ATTRIBUTES = {
-    #   "data-controller": DATA_CONTROLLER,
-    #   "data-action": "mouseover->tooltip-component#show mouseout->tooltip-component#hide",
-    #   "data-tooltip-component-placement": DEFAULT_PLACEMENT,
-    # }
-
-    # @example As a description for an icon-only button
-    #   @description
-    #     If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
-    #     The trigger element should also have a _concise_ accessible label via `aria-label`.
-    #   @code
-    #     <%= render(Ariadne::HeroiconComponent.new(icon: :moon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { id: "bold-button-0" })) %>
-    #     <%= render(Ariadne::TooltipComponent.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :top)) %>
-    # @example As a label for an icon-only button
-    #   @description
-    #     If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
-    #   @code
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: { id: "like-button" })) { "👍" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(for_id: "like-button", type: :label, text: "Like", direction: :top)) %>
-    #
-    # @example As a description for a button with visible label
-    #   @description
-    #     If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
-    #   @code
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "save-button"}, scheme: :success)) { "Save" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :right)) %>
-    # @example With direction
-    #   @description
-    #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
-    #   @code
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "North", m: 2})) { "North" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :top)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "South", m: 2})) { "South" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :bottom)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "East", m: 2})) { "East" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :right)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "West", m: 2})) { "West" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(for_id: "West""", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :left)) %>
-    # @example With relative parent
-    #   @description
-    #     When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
-    #   @code
-    #     <span style="position: relative;">
-    #       <%= render(Ariadne::ButtonComponent.new(attributes: {id: "test-button"}, scheme: :info)) { "Test" } %>
-    #       <%= render(Ariadne::TooltipComponent.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :bottom)) %>
-    #     </span>
-    # @param tag [Symbol, String] The rendered tag name
-    # @param for_id [String] The ID of the element that the tooltip should be attached to.
-    # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
-    # @param type [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_TYPES) %>
-    # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
-    # @param classes [String] <%= link_to_classes_docs %>
-    # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {})
-      raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
-
-      @tag = check_incoming_tag(DEFAULT_TAG, tag)
-
-      @text = text
-      @classes = merge_class_names(DEFAULT_CLASSES, classes)
-
-      @attributes = attributes
-      @attributes[:for] = for_id
-
-      @attributes[:"data-tooltip-component-placement"] = fetch_or_raise(VALID_PLACEMENTS, direction)
-      @attributes[:"data-type"] = fetch_or_raise(VALID_TYPES, type)
-      @attributes[:"data-tooltip-component-target"] = "tooltip"
-    end
-  end
-end