ariadne_view_components 0.0.6 → 0.0.7

data/app/components/ariadne/blankslate_component.rb

@@ -12,14 +12,14 @@ module Ariadne
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG].freeze
 
-    DEFAULT_CLASSES = "max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
+    DEFAULT_CLASSES = "ariadne-text-center"
 
     # Optional visual that renders an <%= link_to_component(Ariadne::HeroiconComponent) %>.
     #
     # @param tag [Symbol, String] The rendered tag name
     # @param icon [String] Name of <%= link_to_heroicons %> to use.
     # @param size [Symbol] <%= one_of(Ariadne::HeroiconComponent::SIZE_MAPPINGS, sort: false) %>
-    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VARIANTS, sort: false) %>
+    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
     renders_one :icon, lambda { |tag: :svg, icon:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}|
@@ -113,10 +113,10 @@ module Ariadne
     #
     # @example Icon
     #   @description
-    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #     Add an `icon` to give additional context. Refer to the [Heroicons](https://heroicons.com) documentation to choose an icon.
     #   @code
     #     <%= render Ariadne::BlankslateComponent.new do |c| %>
-    #       <% c.icon(icon: :globe) %>
+    #       <% c.icon(icon: :"globe-europe-africa") %>
     #       <% c.heading(tag: :h2).with_content("heading") %>
     #       <% c.description { "Description"} %>
     #     <% end %>
@@ -142,10 +142,5 @@ module Ariadne
     def render?
       heading.present?
     end
-
-    def wrapper
-      yield
-      nil # returning `yield` causes a double render
-    end
   end
 end

data/app/components/ariadne/body_component.rb

@@ -5,7 +5,7 @@ module Ariadne
   # Add additional usage considerations or best practices that may aid the user to use the component correctly.
   # @accessibility Add any accessibility considerations
   class BodyComponent < Ariadne::Component
-    DEFAULT_CLASSES = "flex flex-col min-h-screen"
+    DEFAULT_CLASSES = "ariadne-flex ariadne-flex-col ariadne-min-h-screen"
 
     # @example Default
     #

data/app/components/ariadne/button_component.rb

@@ -9,11 +9,12 @@ module Ariadne
     LINK_SCHEME = :link
 
     SCHEME_CLASS_MAPPINGS = {
-      default: "text-purple-800 bg-purple-50 hover:bg-purple-100 border-purple-300 focus:ring-offset-purple-50 focus:ring-purple-600",
-      info: "text-blue-800 bg-blue-50 hover:bg-blue-100 border-blue-300 focus:ring-offset-blue-50 focus:ring-blue-600",
-      success: "text-green-800 bg-green-50 hover:bg-green-100 border-green-300 focus:ring-offset-green-50 focus:ring-green-600",
-      warning: "text-yellow-800 bg-yellow-50 hover:bg-yellow-100 border-yellow-300 focus:ring-offset-yellow-50 focus:ring-yellow-600",
-      danger: "text-red-800 bg-red-50 hover:bg-red-100 border-red-300 focus:ring-offset-red-50 focus:ring-red-600",
+      none: "",
+      default: "ariadne-text-purple-800 ariadne-bg-purple-50 hover:ariadne-bg-purple-100 ariadne-border-purple-300 focus:ariadne-ring-offset-purple-50 focus:ariadne-ring-purple-600",
+      info: "ariadne-text-blue-800 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 ariadne-border-blue-300 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
+      success: "ariadne-text-green-800 ariadne-bg-green-50 hover:ariadne-bg-green-100 ariadne-border-green-300 focus:ariadne-ring-offset-green-50 focus:ariadne-ring-green-600",
+      warning: "ariadne-text-yellow-800 ariadne-bg-yellow-50 hover:ariadne-bg-yellow-100 ariadne-border-yellow-300 focus:ariadne-ring-offset-yellow-50 focus:ariadne-ring-yellow-600",
+      danger: "ariadne-text-red-800 ariadne-bg-red-50 hover:ariadne-bg-red-100 ariadne-border-red-300 focus:ariadne-ring-offset-red-50 focus:ariadne-ring-red-600",
     }.freeze
     VALID_SCHEMES = SCHEME_CLASS_MAPPINGS.keys.freeze
 
@@ -26,7 +27,7 @@ module Ariadne
     # @param tag [Symbol, String] The rendered tag name
     # @param classes [String] <%= link_to_classes_docs %>
     # @param icon [String] Name of <%= link_to_heroicons %> to use.
-    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VARIANTS, sort: false) %>
+    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
     # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
     renders_one :icon, lambda { |tag: :svg, icon:, variant:, classes: "", attributes: {}|
                          @icon = icon

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

@@ -2,7 +2,8 @@
   <% if content.present? %>
     <%= content.to_s + tooltip.to_s %>
   <% else %>
-    <%= render Ariadne::HeroiconComponent.new(icon: :duplicate, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
-    <%= render Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { color: :success, style: "display: none;" }) %>
+    <%= render Ariadne::HeroiconComponent.new(icon: :"document-duplicate", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
+    <!-- TODO: fix, check should replace on click -->
+    <%= render Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "ariadne-text-green-600", attributes: { style: "display: none;" }) %>
   <% end %>
 <% end %>

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

@@ -0,0 +1,55 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class CommentComponent extends Controller {
+  static targets = ['tab', 'tabBarComponent']
+
+  declare readonly commentComponentTarget: HTMLDivElement
+  declare readonly tabBarComponentTarget: HTMLElement // technically a `nav but typescript can't find it?
+  declare readonly tabTargets: [HTMLButtonElement]
+
+  SELECTED_TAB_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+  PUBLIC_BACKGROUND_COLOR = 'ariadne-bg-white'
+  INTERNAL_BACKGROUND_COLOR = 'ariadne-bg-internal-message'
+
+  connect() {
+    for (const tab of this.tabTargets) {
+      if (tab.hasAttribute('selected')) {
+        tab.classList.add(...this.SELECTED_TAB_CLASSES)
+      }
+    }
+  }
+
+  toggleTab() {
+    for (const tab of this.tabTargets) {
+      if (tab.hasAttribute('selected')) {
+        tab.removeAttribute('selected')
+        tab.classList.remove(...this.SELECTED_TAB_CLASSES)
+        this.toggleBackgrounds(tab)
+      } else {
+        tab.setAttribute('selected', 'true')
+        tab.classList.add(...this.SELECTED_TAB_CLASSES)
+        this.toggleBackgrounds(tab)
+        if (tab.hasAttribute('data-public')) {
+          document.getElementById('message_public')?.setAttribute('value', 'true')
+        } else {
+          document.getElementById('message_public')?.setAttribute('value', 'false')
+        }
+      }
+    }
+  }
+  toggleBackgrounds(tab: HTMLButtonElement) {
+    if (tab.hasAttribute('selected')) {
+      if (tab.hasAttribute('data-public')) {
+        // this.commentComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
+        // this.commentComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
+        this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
+        this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
+      } else {
+        // this.commentComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
+        // this.commentComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
+        this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
+        this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
+      }
+    }
+  }
+}

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

@@ -1,25 +1,22 @@
-<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |comment| %>
-  <div>
-    <div class="flex items-center" aria-orientation="horizontal" role="tablist">
-      <% tabs.each do |tab| %>
-        <%= tab %>
-      <% end %>
+<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
+  <div class="ariadne-bg-white" data-comment-component-target="commentComponent">
+    <div class="ariadne-hidden sm:ariadne-block">
+      <div class="ariadne-border-b ariadne-border-gray-200">
+        <%= render(Ariadne::TabBarComponent.new(sr_label: @sr_label, attributes: { :"data-comment-component-target" => "tabBarComponent" })) do |tab_bar| %>
+          <%= public_tab %>
+          <%= internal_tab %>
+        <% end %>
+      </div>
     </div>
-    <div class="mt-2">
-      <div id="tabs-1-panel-1" class="p-0.5 -m-0.5 rounded-lg" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
-        <label for="comment" class="sr-only">Comment</label>
-        <div>
-          <textarea rows="5" name="comment" id="comment" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Add your comment..."></textarea>
-        </div>
+    <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
+      <div class="ariadne-overflow-hidden ariadne-border-x ariadne-border-b ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
+        <%= hidden_field_tag 'message_public', true  %>
+        <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true}))  %>
+        <% comment_box.submit { @submit } %>
       </div>
-      <div id="tabs-1-panel-2" class="p-0.5 -m-0.5 rounded-lg" aria-labelledby="tabs-1-tab-2" role="tabpanel" tabindex="0">
-        <div class="border-b">
-          <div class="mx-px mt-px px-3 pt-2 pb-12 text-sm leading-5 text-gray-800">Preview content will render here.</div>
-        </div>
+      <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
+        <%= submit %>
       </div>
-    </div>
-  </div>
-  <div class="mt-2 flex justify-end">
-    <%= submit %>
+    <% end %>
   </div>
 <% end %>

data/app/components/ariadne/comment_component.rb

@@ -1,45 +1,57 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Defines a submittble form for adding comments to a conversation.
+  # Defines a submittable form for adding comments to a conversation.
+  # @accessibility This component requires you to pass in a `sr_label`
+  # attribute, which will be used to label the tabs for screen readers.
   class CommentComponent < Ariadne::Component
-    DEFAULT_TAG = :form
+    DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG].freeze
 
-    DEFAULT_CLASSES = ""
+    DEFAULT_CLASSES = "ariadne-bg-white ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md "
 
-    DEFAULT_TAB_CLASSES = "text-gray-500 hover:text-gray-900 bg-white hover:bg-gray-100 px-3 py-1.5 border border-transparent text-sm font-medium rounded-md"
-    renders_many :tabs, lambda { |classes: "", attributes: {}|
-      actual_classes = class_names(DEFAULT_TAB_CLASSES, classes)
+    renders_one :public_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
+      attributes[:"data-comment-component-target"] ||= "tab"
+      attributes[:"data-action"] ||= "click->comment-component#toggleTab"
+      attributes[:"data-public"] = true
       @tab_idx += 1
-      attributes[:id] = "comment-tabs-tab-#{@tab_idx}"
-      attributes[:"aria-controls"] = "comment-tabs-panel-#{@tab_idx}"
-      attributes[:role] = "tab"
-      attributes[:type] = "button"
+      render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
+    }
 
-      Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)
+    renders_one :internal_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
+      attributes[:"data-comment-component-target"] ||= "tab"
+      attributes[:"data-action"] ||= "click->comment-component#toggleTab"
+      @tab_idx += 1
+      render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
     }
 
     renders_one :submit, lambda { |classes: "", attributes: {}|
-      Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, classes: classes, attributes: attributes)
+      Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, scheme: Ariadne::ButtonComponent::DEFAULT_SCHEME, classes: classes, attributes: attributes)
     }
 
     # @example Default
     #
-    #   <%= render(Ariadne::CommentComponent.new(action: "#")) { "Example" } %>
+    #   <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) { "Example" } %>
     #
-    # @param action [String] The action to take when the form is submitted.
+    # @param url [String] The URL to take action against.
+    # @param method [String] The method to use when submitting the form.
+    # @param sr_label [String] A label to introduce these tabs for screen readers.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(action:, classes: "", attributes: {})
+    def initialize(url:, method:, sr_label:, classes: "", attributes: {})
       @tag = DEFAULT_TAG
       @classes = class_names(
         DEFAULT_CLASSES,
         classes
       )
+      @url = url
+      @method = method
+      @sr_label = sr_label
 
-      @tab_idx = 0
-      @attributes = attributes.merge(action: action)
+      @tab_idx = -1
+      @attributes = attributes
+      @attributes[:"data-controller"] = "comment-component"
+      attributes[:"data-comment-component-target"] = "commentComponent"
     end
   end
 end

data/app/components/ariadne/component.rb

@@ -18,10 +18,10 @@ module Ariadne
     include LoggerHelper
     include Ariadne::ActionViewExtensions::FormHelper
 
-    BASE_HTML_CLASSES = "h-full scroll-smooth bg-white antialiased"
-    BASE_BODY_CLASSES = "flex h-full flex-col"
-    BASE_WRAPPER_CLASSES = "flex flex-col h-screen justify-between"
-    BASE_MAIN_CLASSES = "flex-auto"
+    BASE_HTML_CLASSES = "ariadne-h-full scroll-smooth ariadne-bg-white ariadne-antialiased"
+    BASE_BODY_CLASSES = "ariadne-flex ariadne-h-full ariadne-flex-col"
+    BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
+    BASE_MAIN_CLASSES = "ariadne-flex-auto"
 
     INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
 

data/app/components/ariadne/container_component.rb

@@ -3,7 +3,7 @@
 module Ariadne
   # The container wraps the majority, if not all, of the content on a page.
   class ContainerComponent < Ariadne::Component
-    DEFAULT_CLASSES = "px-4 sm:px-6 lg:px-8"
+    DEFAULT_CLASSES = "ariadne-px-4 sm:ariadne-px-6 lg:ariadne-px-8"
 
     # @example Default
     #   <%= render(Ariadne::ContainerComponent.new) do |container| %>

data/app/components/ariadne/counter_component.rb

@@ -1,15 +1,15 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Use `Counter` to add a count to navigational elements and buttons.
+  # Use `CounterComponent` to add a count to navigational elements and buttons.
   #
   # @accessibility
-  #   Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
+  #   Always use `CounterComponent` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
   #   should be accompanied with text such as `issues` or `pull requests`.
   #
   class CounterComponent < Ariadne::Component
-    DEFAULT_CLASSES = "inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-    #
+    DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-p-1 ariadne-border ariadne-border-transparent ariadne-rounded-full ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+
     # @example Default
     #   <%= render(Ariadne::CounterComponent.new(count: 25)) %>
     #

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

@@ -1,27 +1,27 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
-  <div class="rounded-md p-4 <%= BG_SCHEME_CLASS_MAPPINGS[@scheme] %>">
-    <div class="flex">
-      <div class="flex-shrink-0">
+  <div class="ariadne-rounded-md ariadne-p-4 <%= BG_SCHEME_CLASS_MAPPINGS[@scheme] %>">
+    <div class="ariadne-flex">
+      <div class="ariadne-flex-shrink-0">
         <%= icon %>
       </div>
-      <div class="ml-3">
-        <div class="mt-2 text-sm <%= CONTENT_SCHEME_CLASS_MAPPINGS[@scheme] %>">
+      <div class="ariadne-ml-3">
+        <div class="ariadne-mt-2 ariadne-text-sm <%= CONTENT_SCHEME_CLASS_MAPPINGS[@scheme] %>">
           <p><%= content %></p>
         </div>
         <% if has_action? %>
-          <div class="mt-4 pt-5">
-            <div class="-mx-2 -my-1.5 flex">
+          <div class="ariadne-mt-4 ariadne-pt-5">
+            <div class="ariadne--mx-2 ariadne--my-1.5 ariadne-flex">
               <%= action %>
             </div>
           </div>
         <% end %>
       </div>
       <% if dismissible? %>
-        <div class="pl-3">
-          <div class="-mx-1.5 -my-1.5">
-            <button type="button" class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 <%= dismissible_classes %>">
-              <span class="sr-only">Dismiss</span>
-              <%= ariadne_heroicon icon: :x, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE %>
+        <div class="ariadne-pl-3">
+          <div class="ariadne--mx-1.5 ariadne--my-1.5">
+            <button type="button" class="ariadne-inline-flex ariadne-rounded-md ariadne-p-1.5 focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 <%= dismissible_classes %>">
+              <span class="ariadne-sr-only">Dismiss</span>
+              <%= ariadne_heroicon icon: :"x-mark", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE %>
             </button>
           </div>
         </div>

data/app/components/ariadne/flash_component.rb

@@ -8,29 +8,29 @@ module Ariadne
     DEFAULT_SCHEME = :default
 
     DISMISSIBLE_SCHEME_CLASS_MAPPINGS = {
-      default: "text-blue-500 bg-blue-50 hover:bg-blue-100 focus:ring-offset-blue-50 focus:ring-blue-600",
-      info: "text-blue-500 bg-blue-50 hover:bg-blue-100 focus:ring-offset-blue-50 focus:ring-blue-600",
-      success: "text-green-500 bg-green-50 hover:bg-green-100 focus:ring-offset-green-50 focus:ring-green-600",
-      warning: "text-yellow-500 bg-yellow-50 hover:bg-yellow-100 focus:ring-offset-yellow-50 focus:ring-yellow-600",
-      danger: "text-red-500 bg-red-50 hover:bg-red-100 focus:ring-offset-red-50 focus:ring-red-600",
+      default: "ariadne-text-blue-500 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
+      info: "ariadne-text-blue-500 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
+      success: "ariadne-text-green-500 ariadne-bg-green-50 hover:ariadne-bg-green-100 focus:ariadne-ring-offset-green-50 focus:ariadne-ring-green-600",
+      warning: "ariadne-text-yellow-500 ariadne-bg-yellow-50 hover:ariadne-bg-yellow-100 focus:ariadne-ring-offset-yellow-50 focus:ariadne-ring-yellow-600",
+      danger: "ariadne-text-red-500 ariadne-bg-red-50 hover:ariadne-bg-red-100 focus:ariadne-ring-offset-red-50 focus:ariadne-ring-red-600",
     }.freeze
     VALID_DISMISSIBLE_SCHEMES = DISMISSIBLE_SCHEME_CLASS_MAPPINGS.keys.freeze
 
     BG_SCHEME_CLASS_MAPPINGS = {
-      default: "bg-blue-50",
-      info: "bg-blue-50",
-      success: "bg-green-50",
-      warning: "bg-yellow-50",
-      danger: "bg-red-50",
+      default: "ariadne-bg-blue-50",
+      info: "ariadne-bg-blue-50",
+      success: "ariadne-bg-green-50",
+      warning: "ariadne-bg-yellow-50",
+      danger: "ariadne-bg-red-50",
     }.freeze
     VALID_BG_SCHEMES = BG_SCHEME_CLASS_MAPPINGS.keys.freeze
 
     CONTENT_SCHEME_CLASS_MAPPINGS = {
-      default: "text-blue-700",
-      info: "text-blue-700",
-      success: "text-green-700",
-      warning: "text-yellow-700",
-      danger: "text-red-700",
+      default: "ariadne-text-blue-700",
+      info: "ariadne-text-blue-700",
+      success: "ariadne-text-green-700",
+      warning: "ariadne-text-yellow-700",
+      danger: "ariadne-text-red-700",
     }.freeze
     VALID_CONTENT_SCHEMES = CONTENT_SCHEME_CLASS_MAPPINGS.keys.freeze
 
@@ -42,7 +42,7 @@ module Ariadne
     #
     # @option params [Symbol] :icon The rendered tag name
     # @option params [Symbol] :icon Name of <%= link_to_heroicons %> to use.
-    # @option params [Symbol] :variant <%= one_of(HeroiconsHelper::Icon::VARIANTS, sort: false) %>
+    # @option params [Symbol] :variant <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
     # @option params [String] :classes  <%= link_to_classes_docs %>
     # @option params [Hash] :attributes Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
     renders_one :icon, lambda { |tag: :svg, icon:, variant:, classes: "", attributes: {}|

data/app/components/ariadne/flex_component.rb

@@ -1,9 +1,7 @@
 # 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
+  # Adds a flex container to the page.
   class FlexComponent < Ariadne::Component
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG].freeze
@@ -26,13 +24,13 @@ module Ariadne
 
       flex_class = case @type
       when :row
-        "flex-row"
+        "ariadne-flex-row"
       when :column
-        "flex-col"
+        "ariadne-flex-col"
       when :row_reverse
-        "flex-row-reverse"
+        "ariadne-flex-row-reverse"
       when :column_reverse
-        "flex-col-reverse"
+        "ariadne-flex-col-reverse"
       end
 
       @classes = class_names(

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

@@ -1,6 +1,6 @@
 <%= render Ariadne::BaseComponent.new(tag: :footer, classes: @classes, attributes: @attributes) do |footer| %>
   <%= render Ariadne::ContainerComponent.new do |container| %>
-    <p class="mt-6 text-sm text-slate-500 sm:mt-0">
+    <p class="ariadne-mt-6 ariadne-text-sm text-slate-500 sm:ariadne-mt-0">
       <%= content %>
     </p>
   <% end %>

data/app/components/ariadne/footer_component.rb

@@ -3,7 +3,7 @@
 module Ariadne
   # Adds a footer to the bottom of every page.
   class FooterComponent < Ariadne::Component
-    DEFAULT_CLASSES = "py-5"
+    DEFAULT_CLASSES = "ariadne-py-5"
 
     # @example Default
     #

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

@@ -1,15 +1,15 @@
 <%= render Ariadne::BaseComponent.new(tag: :ul, classes: @classes, attributes: @attributes) do |grid| %>
   <% items.each do |item| %>
-    <li class="<%= item.classes %> <%= item.has_href? ? Ariadne::GridComponent::DEFAULT_LINK_COLOR_CLASSES : "bg-white" %>">
+    <li class="<%= item.classes %> <%= item.has_href? ? Ariadne::GridComponent::DEFAULT_LINK_COLOR_CLASSES : "ariadne-bg-white" %>">
       <% if item.has_href? %>
         <%= render Ariadne::LinkComponent.new(href: item.href) do %>
           <%= item.entry %>
         <% end %>
         <% if item.actions.any? %>
           <div>
-            <div class="-mt-px flex divide-x">
+            <div class="ariadne--mt-px ariadne-flex ariadne-divide-x">
               <% item.actions.each_with_index do |action, idx| %>
-                <div class="<%= idx.zero? ? '' : '-ml-px ' %>w-0 flex-1 flex">
+                <div class="<%= idx.zero? ? '' : 'ariadne--ml-px ' %>w-0 ariadne-flex-1 ariadne-flex">
                   <%= action %>
                 </div>
               <% end %>
@@ -17,7 +17,7 @@
           </div>
         <% end %>
       <% else %>
-        <div class="flex-1 flex flex-col p-8">
+        <div class="ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8">
           <%= item.entry %>
         </div>
       <% end %>

data/app/components/ariadne/grid_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Arranges items as a grid.
+  # Arranges items as a ariadne-grid.
   class GridComponent < Ariadne::Component
-    DEFAULT_CLASSES = "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
+    DEFAULT_CLASSES = "ariadne-grid ariadne-gap-6 sm:ariadne-grid-cols-2 lg:ariadne-grid-cols-3"
 
-    DEFAULT_LINK_COLOR_CLASSES = "text-button-text-color bg-button-bg-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+    DEFAULT_LINK_COLOR_CLASSES = "ariadne-text-button-text-color ariadne-bg-button-bg-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
 
-    # The items to show in the grid.
-    renders_many :items, "Item"
+    # The items to show in the ariadne-grid.
+    renders_many :items, "GridItem"
 
     # @example Default
     #
@@ -28,17 +28,17 @@ module Ariadne
 
     # This component is part of `GridComponent` and should not be
     # used as a standalone component.
-    class Item < Ariadne::Component
-      DEFAULT_ITEM_CLASSES = "flex flex-col text-center rounded-lg shadow my-4 text-black-700 border-black"
+    class GridItem < Ariadne::Component
+      DEFAULT_ITEM_CLASSES = "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow ariadne-my-4 text-black-700 ariadne-border-black"
 
-      DEFAULT_ENTRY_CLASSES = "group flex-1 flex flex-col p-8 hover:bg-button-hover-color hover:text-gray-500 rounded-lg"
+      DEFAULT_ENTRY_CLASSES = "group ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8 hover:ariadne-bg-button-hover-color hover:ariadne-text-gray-500 ariadne-rounded-lg"
       renders_one :entry, lambda { |classes: "", &block|
         view_context.capture do
           render(Ariadne::BaseComponent.new(tag: :div, classes: classes)) { block&.call }
         end
       }
 
-      DEFAULT_ACTION_LINK_CLASSES = "text-button-text-color relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm font-medium border border-transparent rounded-bl-lg rounded-lg"
+      DEFAULT_ACTION_LINK_CLASSES = "text-button-text-color ariadne-relative ariadne--mr-px ariadne-w-0 ariadne-flex-1 ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-py-4 ariadne-text-sm ariadne-font-medium ariadne-border ariadne-border-transparent ariadne-rounded-bl-lg ariadne-rounded-lg"
       renders_many :actions, lambda { |href:, icon:, label:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}, text_classes: ""|
         actual_classes = class_names(DEFAULT_ACTION_LINK_CLASSES, classes)
         render(Ariadne::LinkComponent.new(href: href, classes: actual_classes, attributes: attributes)) do

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

@@ -1,23 +1,23 @@
  <%= render Ariadne::BaseComponent.new(tag: :header, classes: @classes, attributes: @attributes) do |header| %>
   <%= render Ariadne::ContainerComponent.new do |container| %>
-    <nav class="relative z-50 flex justify-between">
-      <div class="flex items-center md:gap-x-12">
+    <nav class="ariadne-relative ariadne-z-50 ariadne-flex ariadne-justify-between">
+      <div class="ariadne-flex ariadne-items-center md:ariadne-gap-x-12">
         <% if has_logo? %>
-          <%= render Ariadne::LinkComponent.new(href: @href) do %>
+          <%= render Ariadne::LinkComponent.new(href: @href, classes: "ariadne-text-billy-purple") do %>
             <% if has_image_logo? %>
-              <span class="sr-only"><%= content %></span>
+              <span class="ariadne-sr-only"><%= content %></span>
             <% end %>
             <%= logo %>
           <% end %>
         <% end %>
-        <div class="md:flex md:gap-x-6">
+        <div class="md:ariadne-flex md:ariadne-gap-x-6">
           <% navigation_links.each do |link| %>
             <%= link %>
           <% end %>
         </div>
       </div>
-      <div class="flex items-center gap-x-5 md:gap-x-8">
-        <div class="md:block">
+      <div class="ariadne-flex ariadne-items-center ariadne-gap-x-5 md:ariadne-gap-x-8">
+        <div class="md:ariadne-block">
           <% action_links.each do |link| %>
             <%= link %>
           <% end %>

data/app/components/ariadne/header_component.rb

@@ -3,12 +3,12 @@
 module Ariadne
   # Represents the top navigation bar on every page.
   class HeaderComponent < Ariadne::Component
-    DEFAULT_CLASSES = "sticky top-0 z-50 px-4 py-5 bg-white shadow-sm shadow-slate-900/5 transition duration-500"
-    # flex flex-wrap items-center justify-between bg-white   dark:shadow-none  dark:bg-transparent
-    LINK_CLASSES = "rounded-lg py-1 px-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+    DEFAULT_CLASSES = "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-py-5 ariadne-bg-white ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500"
+    # ariadne-flex ariadne-flex-wrap ariadne-items-center ariadne-justify-between ariadne-bg-white   dark:ariadne-shadow-none  dark:ariadne-bg-transparent
+    LINK_CLASSES = "ariadne-rounded-lg ariadne-py-1 ariadne-px-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900"
 
-    DEFAULT_TEXT_LOGO_CLASSES = "flex items-center font-bold text-xl"
-    DEFAULT_IMAGE_LOGO_CLASSES = "h-10 w-auto"
+    DEFAULT_TEXT_LOGO_CLASSES = "ariadne-flex ariadne-items-center ariadne-font-bold ariadne-text-xl"
+    DEFAULT_IMAGE_LOGO_CLASSES = "ariadne-h-10 ariadne-w-auto"
 
     # Leading visuals at the far left of the header. You can pass either
     # `src` or `as_text` but not both.
@@ -37,7 +37,7 @@ module Ariadne
     # @param href [String] The link destination.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    DEFAULT_NAV_LINK_CLASSES = "inline-block rounded-lg py-1 px-2 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+    DEFAULT_NAV_LINK_CLASSES = "ariadne-inline-block ariadne-rounded-lg ariadne-py-1 ariadne-px-2 ariadne-text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
     renders_many :navigation_links, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_NAV_LINK_CLASSES, classes)
       Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
@@ -60,13 +60,13 @@ module Ariadne
     # @param href [String] The link destination.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    DEFAULT_SIGNUP_LINK_CLASSES = "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    DEFAULT_SIGNUP_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
     renders_one :signup_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_SIGNUP_LINK_CLASSES, classes)
       Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
     }
 
-    DEFAULT_PROFILE_LINK_CLASSES = "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    DEFAULT_PROFILE_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
     renders_one :profile_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_PROFILE_LINK_CLASSES, classes)
       Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)

data/app/components/ariadne/heading_component.rb

@@ -20,9 +20,9 @@ module Ariadne
     TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
 
     TAG_TO_CLASSES = {
-      h1: "font-bold leading-7 sm:text-3xl",
-      h2: "text-3xl font-extrabold",
-      h3: "text-2xl font-extrabold",
+      h1: "ariadne-font-bold ariadne-leading-7 sm:ariadne-text-3xl",
+      h2: "ariadne-text-3xl ariadne-font-extrabold",
+      h3: "ariadne-text-2xl ariadne-font-extrabold",
     }
     # @example Default
     #   <%= render(Ariadne::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>