ariadne_view_components 0.0.1 → 0.0.4

data/app/components/ariadne/heroicon_component.rb

@@ -9,8 +9,8 @@ module Ariadne
     include IconHelper
     include HeroiconsHelper
 
-    SIZE_DEFAULT = :small
-    SIZE_MEDIUM = :medium
+    SIZE_DEFAULT = :s
+    SIZE_MEDIUM = :m
 
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,
@@ -39,6 +39,8 @@ module Ariadne
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
       { name: "mail",
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
+      { name: "menu",
+        variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
       { name: "pencil",
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
       { name: "plus-sm",
@@ -60,7 +62,7 @@ module Ariadne
     #   <%= render(Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_SOLID)) %>
     #
     # @example Medium
-    #   <%= render(Ariadne::HeroiconComponent.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :medium)) %>
+    #   <%= render(Ariadne::HeroiconComponent.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :m)) %>
     #
     # @example Helper
     #   <%= ariadne_heroicon(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>

data/app/components/ariadne/image_component.rb

@@ -6,6 +6,8 @@ module Ariadne
   # @accessibility
   #   Always provide a meaningful `alt`.
   class ImageComponent < Ariadne::Component
+    DEFAULT_TAG = :img
+
     # @example Default
     #
     #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub")) %>
@@ -23,16 +25,16 @@ module Ariadne
     #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", attributes: { height: 100, width: 100 })) %>
     #
     # @param tag [Symbol, String] The rendered tag name
-    # @param classes [String] <%= link_to_classes_docs %>
     # @param src [String] The source url of the image.
     # @param alt [String] Specifies an alternate text for the image.
     # @param lazy [Boolean] Whether or not to lazily load the image.
+    # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: :img, src:, alt:, lazy: false, classes: "", attributes: {})
+    def initialize(tag: DEFAULT_TAG, src:, alt:, lazy: false, classes: "", attributes: {})
       @attributes = attributes
 
       @src = src
-      @tag = check_incoming_tag(:img, tag)
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
       @classes = classes
 
       @attributes[:alt] = alt

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

@@ -0,0 +1,5 @@
+<%= render(Ariadne::BaseComponent.new(tag: :span, classes: @classes, attributes: @attributes)) do |component| %>
+  <%= icon %>
+  <%= item %>
+  <%= text %>
+<% end %>

data/app/components/ariadne/inline_flex_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Represents two items side-by-side. Typically, this will be an icon (of CSS classes, SVG, or a Heroicon icon)
+  # with optional text.
+  #
+  # InlineFlexComponent differs from HeroiconComponent in that it is intended to be
+  # used within (or next to) text, whereas HeroiconComponent is intended to only
+  # present a static list of SVG images (and can be embedded in buttons or shown alone).
+  class InlineFlexComponent < Ariadne::Component
+    DEFAULT_TAG = :span
+    DEFAULT_CLASSES = "inline-flex items-baseline"
+
+    STATE_OPTIONS = [:closed, :open].freeze
+
+    STATE_OPEN_SVG = <<~MSG
+      <svg viewBox="0 0 24 24" width="12" height="12" class="stroke-state-open" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+      </svg>
+    MSG
+    STATE_CLOSED_SVG = <<~MSG
+      <svg viewBox="0 0 24 24" width="12" height="12" class="stroke-state-closed fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+      </svg>
+    MSG
+
+    renders_one :icon, lambda { |icon, tag: :svg, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}|
+      Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes)
+    }
+
+    renders_one :item, lambda { |tag: :span, classes: "", attributes: {}|
+      Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes) { content }
+    }
+
+    DEFAULT_TEXT_OPEN_CLASSES = "text-state-open"
+    DEFAULT_TEXT_CLOSED_CLASSES = "text-state-closed"
+    DEFAULT_TEXT_CLASSES = "pl-2 text-sm font-medium text-gray-900 text-sm"
+    renders_one :text, lambda { |classes: "", attributes: {}|
+      actual_classes = class_names(DEFAULT_TEXT_CLASSES, classes)
+      Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
+    #      <% c.item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
+    #   <% end %>
+    #
+    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
+    #      <% c.icon(:check, size: :s, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
+    #      <% c.text { "Closed" } %>
+    #   <% end %>
+    #
+    # @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 = class_names(DEFAULT_CLASSES, classes)
+      @attributes = attributes
+    end
+  end
+end

data/app/components/ariadne/link_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default styling and hover text-decoration.
+  class LinkComponent < Ariadne::Component
+    DEFAULT_TAG = :a
+    TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+    # `Tooltip` that appears on mouse hover or keyboard focus over the link. Use tooltips sparingly and as a last resort.
+    # Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
+    #
+    # @param tag [Symbol, String] The rendered tag name
+    # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :tooltip, lambda { |tag: :"tool-tip", text:, classes: "", attributes: {}|
+      raise ArgumentError, "Links with a tooltip must have a unique `id` set on the `LinkComponent`." if @id.blank?
+
+      actual_classes = class_names(classes)
+
+      Ariadne::TooltipComponent.new(tag: tag, text: text, classes: actual_classes, attributes: attributes)
+    }
+
+    # @example Default
+    #   <%= render(Ariadne::LinkComponent.new(href: "#")) { "Link" } %>
+    #
+    # @example Span as link
+    #   <%= render(Ariadne::LinkComponent.new(tag: :span, href: "#")) { "Span as a link" } %>
+    #
+    # @example With tooltip
+    #   @description
+    #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
+    #   @code
+    #     <%= render(Ariadne::LinkComponent.new(href: "#", attributes: { id: "link-with-tooltip" })) do |c| %>
+    #       <% c.tooltip(text: "Tooltip text") %>
+    #       Link
+    #     <% end %>
+    #
+    # @param tag [String]  <%= one_of(Ariadne::LinkComponent::TAG_OPTIONS) %>
+    # @param href [String] URL to be used for the link.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, href:, classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+
+      @attributes = attributes
+      @attributes[:href] = href
+
+      @id = @attributes[:id]
+
+      @classes = classes
+    end
+
+    def call
+      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do
+        content.to_s + tooltip.to_s
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
+  <% items.each do |item| %>
+    <% if item.linked? %>
+      <li data-highlight-target="highlightable" class="relative <%= selected? ? 'bg-button-bg-color' : 'hover:bg-button-hover-color' %> focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
+        <%= render(item.link) do %>
+          <%= item.header %>
+          <%= item.entry %>
+        <% end %>
+      </li>
+    <% else %>
+      <li data-highlight-target="highlightable" class="relative <%= selected? ? 'bg-button-bg-color' : 'hover:bg-button-hover-color' %> focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
+        <%= item.header %>
+        <%= item.entry %>
+      </li>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/list_component.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # `List` is used to show a list of items in a vertical format.
+  class ListComponent < Ariadne::Component
+    DEFAULT_UL_CLASSES = "divide-y divide-gray-300"
+
+    renders_many :items, "Item"
+
+    # @example Basic
+    #   <% numbers = [1, 2, 3] %>
+    #   <%= render(Ariadne::ListComponent.new) do |list| %>
+    #     <% numbers.each do |number| %>
+    #       <%= list.item do |item|  %>
+    #         <%= item.entry { number } %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With a header
+    #   <% numbers = [1, 2, 3] %>
+    #   <%= render(Ariadne::ListComponent.new) do |list| %>
+    #     <% numbers.each_with_index do |number, idx| %>
+    #       <%= list.item do |item|  %>
+    #         <%= item.header { idx } %>
+    #         <%= item.entry { number } %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(classes: "", attributes: {})
+      @tag = :ul
+      @classes = class_names(DEFAULT_UL_CLASSES, classes)
+      @attributes = attributes
+      @attributes[:"data-controller"] = "highlight"
+    end
+
+    def selected?
+      false
+    end
+
+    def render?
+      items.any?
+    end
+
+    # This component is part of `ListComponent` and should not be
+    # used as a standalone component.
+    class Item < Ariadne::Component
+      renders_one :header, lambda { |static_content = nil, &block|
+        next static_content if static_content.present?
+
+        render(Ariadne::BaseComponent.new(tag: :div, classes: "flex justify-between")) do
+          view_context.capture { block&.call }
+        end
+      }
+
+      renders_one :entry, lambda { |static_content = nil, &block|
+        next static_content if static_content.present?
+
+        render(Ariadne::BaseComponent.new(tag: :div, classes: "mt-1")) do
+          view_context.capture { block&.call }
+        end
+      }
+
+      attr_accessor :selected
+      attr_reader :link, :classes, :attributes
+
+      def initialize(link: {}, classes: "", attributes: {})
+        if link.present?
+          @link = Ariadne::LinkComponent.new(**link)
+        end
+
+        @classes = classes
+        @attributes = attributes
+        @selected = false
+      end
+
+      def selected?
+        @selected
+      end
+
+      def linked?
+        @link.present?
+      end
+
+      def call
+        if selected
+          link_arguments[:"aria-current"] = "page"
+        end
+
+        Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes)
+      end
+    end
+  end
+end

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

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

data/app/components/ariadne/pill_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Creates a rounded label that resembles a medicine pill.
+  class PillComponent < Ariadne::Component
+    DEFAULT_TAG = :span
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = "flex-shrink-0 inline-block px-2 py-0.5 text-xs font-medium rounded-full"
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::PillComponent.new(color: "FF0000")) { "Admin" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param color [String] The hex 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)
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      @attributes = attributes
+      @attributes["style"] = "background-color: ##{color};"
+    end
+  end
+end

data/app/components/ariadne/slideover-component.ts

@@ -0,0 +1,26 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class SlideoverComponent extends Controller {
+  static targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper']
+
+  declare readonly expandableTarget: HTMLDivElement
+  declare readonly expandWrapperTarget: HTMLDivElement
+  declare readonly slidePanelTargets: [HTMLDivElement]
+  declare readonly buttonWrapperTarget: HTMLDivElement
+
+  toggle() {
+    this.expandableTarget.classList.toggle('hidden')
+    this.expandWrapperTarget.classList.toggle('bg-filter-panel')
+    for (const slidePanel of this.slidePanelTargets) {
+      slidePanel.classList.toggle('hidden')
+    }
+    this.buttonWrapperTarget.classList.toggle('bg-filter-panel')
+    if (document.getElementById('btnClose')?.classList.contains('hidden')) {
+      const formID = this.buttonWrapperTarget.getAttribute('data-slideover-component-form-id')
+      if (formID) {
+        const form = <HTMLFormElement>document.getElementById(formID)
+        form?.submit()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |slideover| %>
+  <div data-slideover-component-target="expandWrapper" class="flex flex-col">
+    <div data-slideover-component-target="expandable" class="hidden bg-filter-panel px-3 pb-4">
+      <%= content %>
+    </div>
+    <div class="relative top-4 inset-0 flex flex-row items-center bg-filter-panel" aria-hidden="true">
+      <div class="w-full border-t border-billy-purple z-10"></div>
+    </div>
+    <div data-slideover-component-target="buttonWrapper" data-slideover-component-form-id="<%= @form_id %>" class="relative flex justify-center">
+      <%= open_button %>
+      <%= close_button %>
+    </div>
+  </div>
+<% end %>

data/app/components/ariadne/slideover_component.rb

@@ -0,0 +1,77 @@
+# 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 SlideoverComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DIRECTION_Y = :y
+    DIRECTION_X = :x
+    VALID_DIRECTIONS = [DIRECTION_Y, DIRECTION_X].freeze
+
+    DEFAULT_CLASSES = ""
+
+    DEFAULT_BUTTON_CLASSES = "inline-flex items-center shadow-sm px-4 py-1.5 border border-our-purple-300 z-50 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    renders_one :open_button, lambda { |text:, classes: "", attributes: {}|
+      actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes)
+
+      attributes[:id] ||= "btnOpen"
+      attributes[:"data-slideover-component-target"] ||= "slidePanel"
+      attributes[:"data-action"] ||= "click->slideover-component#toggle"
+      attributes[:type] ||= "submit"
+
+      render(Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)) do
+        render(Ariadne::InlineFlexComponent.new(attributes: { "data-slideover-component-target" => "slide-panel" })) do |flex|
+          flex.icon(:"chevron-double-down", size: :s, variant: HeroiconsHelper::Icon::VARIANT_SOLID)
+          flex.text { text }
+        end
+      end
+    }
+
+    renders_one :close_button, lambda { |text:, classes: "", attributes: {}|
+      actual_classes = class_names(DEFAULT_BUTTON_CLASSES, classes)
+
+      attributes[:id] ||= "btnClose"
+      attributes[:"data-slideover-component-target"] ||= "slidePanel"
+      attributes[:"data-action"] ||= "click->slideover-component#toggle"
+      attributes[:type] ||= "submit"
+
+      render(Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)) do
+        render(Ariadne::InlineFlexComponent.new(attributes: { "data-slideover-component-target" => "slide-panel" })) do |flex|
+          flex.icon(:"chevron-double-up", size: :s, variant: HeroiconsHelper::Icon::VARIANT_SOLID)
+          flex.text { text }
+        end
+      end
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::SlideoverComponent.new(direction: Ariadne::SlideoverComponent::DIRECTION_Y)) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param direction [Symbol] <%= one_of(Ariadne::SlideoverComponent::VALID_DIRECTIONS) %>
+    # @param form_id [String] The ID of any <form> tag to submit when the button is clicked.
+    # @param open_text [String] The text to use to open the slideover.
+    # @param close_text [String] The text to use to close the slideover.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, direction:, form_id: nil, open_text: "Open", close_text: "Close", classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      @direction = fetch_or_raise(VALID_DIRECTIONS, direction)
+      @form_id = form_id
+
+      @open_text = open_text
+      @close_text = close_text
+      @attributes = attributes
+      @attributes[:"data-controller"] = "slideover-component"
+    end
+  end
+end

data/app/components/ariadne/time_ago_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Displays a time 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 = "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 = 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/time_ago_component.ts

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

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

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

data/app/components/ariadne/timeline_component.rb

@@ -0,0 +1,34 @@
+# 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 = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      @attributes = attributes
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+# 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)
+        form_with(model: model, scope: scope, url: url, format: format, **options, &block)
+      end
+    end
+  end
+end
+
+ActiveSupport.on_load(:action_view) do
+  include Ariadne::ActionViewExtensions::FormHelper
+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 = "divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm: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 = "text-lg leading-6 font-medium text-gray-900"
+    def heading(classes: "", attributes: {}, &block)
+      actual_classes = class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
+      options = { class: actual_classes, **attributes }
+      @template.content_tag(:h3, **options, &block)
+    end
+
+    DEFAULT_SECTION_SUBHEADING_CLASSES = "mt-1 max-w-2xl text-sm 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 = "block text-sm font-medium text-gray-700"
+    def label(method, text = nil, options = {}, &block)
+      options[:class] = class_names(DEFAULT_LABEL_CLASSES, options[:class])
+      super(method, **options)
+    end
+
+    DEFAULT_TEXT_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+    def text_field(method, options = {})
+      options[:class] = class_names(DEFAULT_TEXT_CLASSES, options[:class])
+      super(method, **options)
+    end
+
+    DEFAULT_CHECKBOX_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+    def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      options[:class] = class_names(DEFAULT_TEXT_CLASSES, options[:class])
+      super(method, **options)
+    end
+
+    DEFAULT_RADIO_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+    def radio_button(method, tag_value, options = {})
+      options[:class] = class_names(DEFAULT_RADIO_CLASSES, options[:class])
+      super(method, tag_value, **options)
+    end
+
+    DEFAULT_TEXTAREA_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md"
+    def text_area(method, options = {})
+      options[:class] = class_names(DEFAULT_TEXTAREA_CLASSES, options[:class])
+      super(method, **options)
+    end
+
+    DEFAULT_EMAIL_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+    def email_field(method, options = {})
+      options[:class] = class_names(DEFAULT_EMAIL_CLASSES, options[:class])
+      super(method, **options)
+    end
+
+    DEFAULT_PASSWORD_CLASSES = "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+    def password_field(method, options = {})
+      options[:class] = class_names(DEFAULT_PASSWORD_CLASSES, options[:class])
+      super(method, **options)
+    end
+  end
+end