ariadne_view_components 0.0.10-aarch64-linux

data/app/components/ariadne/tooltip_component.rb

@@ -0,0 +1,108 @@
+# 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 z-max"
+
+    DATA_CONTROLLER = "tooltip-component"
+    DATA_ACTION = "mouseover->tooltip-component#show mouseout->tooltip-component#hide"
+
+    TYPE_DEFAULT = :description
+    TYPE_OPTIONS = [: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::TYPE_OPTIONS) %>
+    # @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 = 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(TYPE_OPTIONS, type)
+      @attributes[:"data-tooltip-component-target"] = "tooltip"
+    end
+  end
+end

data/app/lib/ariadne/action_view_extensions/form_helper.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module ActionViewExtensions
+    # :nodoc:
+    module FormHelper
+      include ClassNameHelper
+
+      DEFAULT_FORM_CLASSES = "space-y-8 divide-y divide-gray-200 sm:space-y-5"
+      def ariadne_form_with(model: nil, scope: nil, url: nil, format: nil, classes: {}, attributes: {}, **options, &block)
+        options[:class] = class_names(DEFAULT_FORM_CLASSES, options[:class])
+        options[:builder] ||= Ariadne::FormBuilder
+        options[:html] ||= {}
+        options = options.merge(attributes)
+        data = {
+          controller: "ariadne-form",
+        }
+        form_with(model: model, scope: scope, url: url, format: format, data: data, **options, &block)
+      end
+    end
+  end
+end
+
+ActiveSupport.on_load(:action_view) do
+  include Ariadne::ActionViewExtensions::FormHelper
+end

data/app/lib/ariadne/audited/dsl.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Ariadne
+  # :nodoc:
+  module Audited
+    # DSL to register when a component has passed an accessibility audit.
+    #
+    # Example:
+    #
+    # class MyComponent < ViewComponent::Base
+    #   include Ariadne::Audited::Dsl
+    #   audited_at 'YYYY-MM-DD'
+    # end
+    module Dsl
+      extend ActiveSupport::Concern
+
+      included do
+        class_attribute :audit_date, instance_writer: false
+      end
+
+      class_methods do
+        def audited_at(date = nil)
+          return audit_date if date.nil?
+
+          self.audit_date = date
+        end
+      end
+    end
+  end
+end

data/app/lib/ariadne/class_name_helper.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Helps build a list of conditional class names
+module Ariadne
+  # :nodoc:
+  module ClassNameHelper
+    def class_names(*args)
+      [].tap do |classes|
+        args.each do |class_name|
+          next if class_name.blank?
+
+          case class_name
+          when String
+            classes << class_name
+          else
+            raise ArgumentError, "Expected String class name, got #{class_name.class}"
+          end
+        end
+      end.join(" ")
+    end
+  end
+end

data/app/lib/ariadne/fetch_or_fallback_helper.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+# Ariadne::FetchOrFallbackHelper
+# A little helper to enable graceful fallbacks
+#
+# Use this helper to quietly ensure a value is
+# one that you expect:
+#
+# allowed_values    - allowed options for *value*
+# given_value       - input being coerced
+# fallback          - returned if *given_value* is not included in *allowed_values*
+#
+# fetch_or_raise([1,2,3], 5) => 2
+# fetch_or_raise([1,2,3], 1) => 1
+# fetch_or_raise([1,2,3], nil) => 2
+module Ariadne
+  # :nodoc:
+  module FetchOrFallbackHelper
+    include LoggerHelper
+
+    mattr_accessor :fallback_raises, default: true
+
+    InvalidValueError = Class.new(StandardError)
+
+    TRUE_OR_FALSE = [true, false].freeze
+
+    def fetch_or_raise(allowed_values, given_value)
+      if !allowed_values.is_a?(Array) && !allowed_values.is_a?(Set)
+        raise ArgumentError, "allowed_values must be an array or a set; it was #{allowed_values.class}"
+      end
+
+      if allowed_values.include?(given_value)
+        given_value
+      else
+        raise InvalidValueError, <<~MSG
+          fetch_or_raise was called with an invalid value.
+
+          Expected one of: #{allowed_values.inspect}
+          Got: #{given_value.inspect}
+        MSG
+      end
+    end
+
+    def fetch_or_raise_boolean(given_value)
+      fetch_or_raise(TRUE_OR_FALSE, given_value)
+    end
+
+    # TODO: test this
+    def check_incoming_tag(preferred_tag, given_tag)
+      return preferred_tag if given_tag.blank? || preferred_tag == given_tag
+
+      unless silence_warnings?
+        message = <<~MSG
+          Ariadne: note that `#{preferred_tag}` is the preferred tag here;
+          you passed `#{given_tag}` (which will still be used)
+        MSG
+
+        logger.warn(message)
+      end
+
+      given_tag
+    end
+
+    # TODO: test this
+    def check_incoming_attribute(preferred_attribute, given_attribute)
+      return preferred_attribute if given_attribute.blank? || preferred_attribute != given_attribute
+
+      unless silence_warnings?
+        message = <<~MSG
+          Ariadne: note that `#{preferred_attribute}` is the preferred attribute here;
+          you passed `#{given_attribute}` (which will still be used)
+        MSG
+
+        logger.warn(message)
+      end
+
+      given_attribute
+    end
+
+    # TODO: test this
+    def check_incoming_value(preferred_value, given_pair)
+      return preferred_value if given_pair.blank? || !given_pair.is_a?(Hash)
+
+      given_key = given_pair.keys.first
+      given_value = given_pair.values.first
+
+      return preferred_value if given_value.blank?
+
+      unless silence_warnings?
+
+        message = <<~MSG
+          Ariadne: note that `#{preferred_value}` is the preferred value for `#{given_key}` here;
+          you passed `#{given_value}` (which will still be used)
+        MSG
+
+        logger.warn(message)
+      end
+
+      given_value
+    end
+  end
+end

data/app/lib/ariadne/form_builder.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # :nodoc:
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    include ClassNameHelper
+
+    DEFAULT_SECTION_CLASSES = "ariadne-pt-8 ariadne-space-y-6 sm:ariadne-pt-10 sm:ariadne-space-y-5"
+    def section(classes: "", attributes: {}, &block)
+      actual_classes = class_names(DEFAULT_SECTION_CLASSES, classes)
+      options = { class: actual_classes, **attributes }
+      @template.content_tag(:div, **options, &block)
+    end
+
+    DEFAULT_SECTION_HEADING_CLASSES = "ariadne-text-lg ariadne-leading-6 ariadne-font-medium ariadne-text-gray-900"
+    def heading(tag: :h3, classes: "", attributes: {}, &block)
+      actual_classes = class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
+      options = { class: actual_classes, **attributes }
+      @template.content_tag(tag, **options, &block)
+    end
+
+    DEFAULT_SECTION_SUBHEADING_CLASSES = "ariadne-mt-1 ariadne-max-w-2xl ariadne-text-sm ariadne-text-gray-500"
+    def subheading(classes: "", attributes: {}, &block)
+      actual_classes = class_names(DEFAULT_SECTION_SUBHEADING_CLASSES, classes)
+      options = { class: actual_classes, **attributes }
+      @template.content_tag(:p, **options, &block)
+    end
+
+    DEFAULT_LABEL_CLASSES = "ariadne-block ariadne-text-sm ariadne-font-medium ariadne-text-gray-700 ariadne-pl-2"
+    def label(object_name, content, ptions = {}, &block)
+      options[:class] = class_names(DEFAULT_LABEL_CLASSES, options.delete(:classes))
+      super(object_name, content, options, &block)
+    end
+
+    DEFAULT_TEXT_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-indigo-500 focus:ariadne-border-indigo-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border-gray-300 ariadne-rounded-md"
+    def text_field(method, options = {})
+      options[:class] = class_names(DEFAULT_TEXT_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+
+    DEFAULT_CHECKBOX_CLASSES = "focus:ariadne-ring-indigo-500 ariadne-h-4 ariadne-w-4 ariadne-text-indigo-600 ariadne-border-gray-300 ariadne-rounded"
+    def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      options[:class] = class_names(DEFAULT_CHECKBOX_CLASSES, options.delete(:classes))
+      super(method, options, checked_value, unchecked_value)
+    end
+
+    DEFAULT_RADIO_CLASSES = "focus:ariadne-ring-indigo-500 ariadne-h-4 ariadne-w-4 ariadne-text-indigo-600 ariadne-border-gray-300 ariadne-rounded"
+    def radio_button(method, tag_value, options = {})
+      options[:class] = class_names(DEFAULT_RADIO_CLASSES, options.delete(:classes))
+      super(method, tag_value, **options)
+    end
+
+    DEFAULT_TEXTAREA_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-indigo-500 focus:ariadne-border-indigo-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border ariadne-border-gray-300 ariadne-rounded-md"
+    def text_area(method, options = {})
+      options[:class] = class_names(DEFAULT_TEXTAREA_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+
+    DEFAULT_EMAIL_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-indigo-500 focus:ariadne-border-indigo-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border-gray-300 ariadne-rounded-md"
+    def email_field(method, options = {})
+      options[:class] = class_names(DEFAULT_EMAIL_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+
+    DEFAULT_PASSWORD_CLASSES = "ariadne-appearance-none ariadne-block ariadne-w-full ariadne-px-3 ariadne-py-2 ariadne-border ariadne-border-gray-300 ariadne-rounded-md ariadne-shadow-sm ariadne-placeholder-gray-400 focus:ariadne-outline-none focus:ariadne-ring-indigo-500 focus:ariadne-border-indigo-500 sm:ariadne-text-sm"
+    def password_field(method, options = {})
+      options[:class] = class_names(DEFAULT_PASSWORD_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+  end
+end

data/app/lib/ariadne/icon_helper.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+# Ariadne::FetchOrFallbackHelper
+# A little helper to enable graceful fallbacks
+#
+# Use this helper to quietly ensure a value is
+# one that you expect:
+#
+# allowed_values    - allowed options for *value*
+# given_value       - input being coerced
+# fallback          - returned if *given_value* is not included in *allowed_values*
+#
+# fetch_or_raise([1,2,3], 5) => 2
+# fetch_or_raise([1,2,3], 1) => 1
+# fetch_or_raise([1,2,3], nil) => 2
+module Ariadne
+  # :nodoc:
+  module IconHelper
+    include FetchOrFallbackHelper
+
+    def check_icon_presence!(icon, variant)
+      return true unless has_partial_icon?(icon, variant)
+
+      icon_presence!(icon, variant)
+      variant_presence!(icon, variant)
+      fetch_or_raise(HeroiconsHelper::Icon::VALID_VARIANTS, variant)
+
+      true
+    end
+
+    def has_partial_icon?(icon, variant)
+      icon.present? || variant.present?
+    end
+
+    def icon_presence!(icon, variant)
+      raise(ArgumentError, "You must provide an `icon` when providing a `variant`.") if icon.blank? && variant.present?
+
+      true
+    end
+
+    def variant_presence!(icon, variant)
+      raise(ArgumentError, "You must provide a `variant` when providing an `icon`.") if icon.present? && variant.blank?
+
+      true
+    end
+  end
+end

data/app/lib/ariadne/join_style_arguments_helper.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # :nodoc:
+  module JoinStyleArgumentsHelper
+    # Join two `style` arguments
+    #
+    # join_style_arguments("width: 100%", "height: 100%") =>
+    #   "width: 100%;height: 100%"
+    def join_style_arguments(*args)
+      args.compact.join(";")
+    end
+  end
+end

data/app/lib/ariadne/logger_helper.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # :nodoc:
+  module LoggerHelper
+    def logger
+      return Rails.logger if defined?(Rails) && Rails.logger
+
+      require "logger"
+      Logger.new($stderr)
+    end
+
+    # TODO: test
+    def silence_deprecations?
+      Rails.application.config.ariadne_view_components.silence_deprecations
+    end
+
+    # TODO: test
+    def silence_warnings?
+      Rails.application.config.ariadne_view_components.silence_warnings
+    end
+  end
+end

data/app/lib/ariadne/status/dsl.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Ariadne
+  # :nodoc:
+  module Status
+    # DSL to allow components to register their status.
+    #
+    # Example:
+    #
+    # class MyComponent < ViewComponent::Base
+    #   include Ariadne::Status::Dsl
+    #   status :experimental
+    # end
+    module Dsl
+      extend ActiveSupport::Concern
+
+      STATUSES = {
+        experimental: :experimental,
+        stable: :stable,
+      }.freeze
+
+      class UnknownStatusError < StandardError; end
+
+      included do
+        class_attribute :component_status, instance_writer: false, default: STATUSES[:stable]
+      end
+
+      class_methods do
+        def status(status = nil)
+          return component_status if status.nil?
+
+          raise UnknownStatusError, "status #{status} does not exist" if STATUSES[status].nil?
+
+          self.component_status = STATUSES[status]
+        end
+      end
+    end
+  end
+end

data/app/lib/ariadne/tab_nav_helper.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Ariadne
+  # Helper to share tab validation logic between components.
+  # The component will raise an error if there are 0 or 2+ selected tabs.
+  module TabNavHelper
+    extend ActiveSupport::Concern
+
+    EXTRA_ALIGN_DEFAULT = :left
+    EXTRA_ALIGN_OPTIONS = [EXTRA_ALIGN_DEFAULT, :right].freeze
+
+    def tab_nav_tab_classes(classes)
+      class_names(
+        "tabnav-tab",
+        classes
+      )
+    end
+
+    def tab_nav_classes(classes)
+      class_names(
+        "tabnav",
+        classes
+      )
+    end
+
+    def tab_nav_body_classes(classes)
+      class_names(
+        "tabnav-tabs",
+        classes
+      )
+    end
+  end
+end

data/app/lib/ariadne/tabbed_component_helper.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Ariadne
+  # Helper to share tab validation logic between components.
+  # The component will raise an error if there are 0 or 2+ selected tabs.
+  module TabbedComponentHelper
+    extend ActiveSupport::Concern
+
+    class MultipleSelectedTabsError < StandardError; end
+
+    def before_render
+      validate_single_selected_tab unless Rails.env.production?
+    end
+
+    private
+
+    def aria_label_for_page_nav(label)
+      @attributes[:tag] == :nav ? @attributes[:"aria-label"] = label : @body_arguments[:"aria-label"] = label
+    end
+
+    def tab_container_wrapper(with_panel:, **attributes)
+      return yield unless with_panel
+
+      render(Ariadne::TabContainerComponent.new(**attributes)) do
+        yield if block_given?
+      end
+    end
+
+    def validate_single_selected_tab
+      raise MultipleSelectedTabsError, "only one tab can be selected" if selected_tabs_count > 1
+    end
+
+    def selected_tabs_count
+      @selected_tabs_count ||= tabs.count(&:selected)
+    end
+  end
+end

data/app/lib/ariadne/test_selector_helper.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Module to allow components to deal with the `test_selector` argument.
+  # It will only add the selector if env is not Production.
+  #
+  # test_selector: "foo" => data-test-selector="foo"
+  module TestSelectorHelper
+    TEST_SELECTOR_TAG = :test_selector
+
+    def add_test_selector(args)
+      if args.key?(TEST_SELECTOR_TAG)
+        args[:data] ||= {}
+        args[:data][TEST_SELECTOR_TAG] = args[TEST_SELECTOR_TAG]
+      end
+
+      args.except(TEST_SELECTOR_TAG)
+    end
+  end
+end

data/app/lib/ariadne/underline_nav_helper.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Ariadne
+  # Helper to share tab validation logic between components.
+  # The component will raise an error if there are 0 or 2+ selected tabs.
+  module UnderlineNavHelper
+    extend ActiveSupport::Concern
+
+    ALIGN_DEFAULT = :left
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+    ACTIONS_TAG_DEFAULT = :div
+    ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
+
+    def underline_nav_classes(classes, align)
+      class_names(
+        classes,
+        "UnderlineNav",
+        "UnderlineNav--right" => align == :right
+      )
+    end
+
+    def underline_nav_body_classes(classes)
+      class_names(
+        "UnderlineNav-body",
+        classes,
+        "list-style-none"
+      )
+    end
+
+    def underline_nav_action_classes(classes)
+      class_names("UnderlineNav-actions", classes)
+    end
+
+    def underline_nav_tab_classes(classes)
+      class_names(
+        "UnderlineNav-item",
+        classes
+      )
+    end
+  end
+end

data/app/lib/ariadne/view_helper.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Ariadne
+  # Module to allow shorthand calls for Ariadne components
+  module ViewHelper
+    class ViewHelperNotFound < StandardError; end
+
+    HELPERS = {
+      heroicon: "Ariadne::HeroiconComponent",
+      heading: "Ariadne::HeadingComponent",
+      time_ago: "Ariadne::TimeAgoComponent",
+      image: "Ariadne::ImageComponent",
+    }.freeze
+
+    HELPERS.each do |name, component|
+      define_method "ariadne_#{name}" do |*args, **kwargs, &block|
+        render component.constantize.new(*args, **kwargs), &block
+      end
+    end
+  end
+end