ariadne_view_components 0.0.4 → 0.0.7

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

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

data/app/components/ariadne/tooltip_component.rb

@@ -24,82 +24,85 @@ module Ariadne
   #   - 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
-    DIRECTION_DEFAULT = :s
-    DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
+    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(attributes: { for: "bold-button-0" }, type: :description, text: "Add bold text", direction: :ne)) %>
+    #     <%= 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(attributes: { for:  "like-button" }, type: :label, text: "Like", direction: :n)) %>
+    #     <%= 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(attributes: { for:  "save-button"}, type: :description, text: "This will immediately impact all organization members", direction: :ne)) %>
+    #     <%= 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(attributes: { for:  "North"}, type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :n)) %>
+    #     <%= 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(attributes: { for:  "South"}, type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :s)) %>
+    #     <%= 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(attributes: { for:  "East"}, type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :e)) %>
+    #     <%= 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(attributes: { for:  "West"}, type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :w)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Northeast", m: 2})) { "Northeast" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "Northeast"}, type: :description, text: "This is a Northeast-facing tooltip and is responsive.", direction: :ne)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Southeast", m: 2})) { "Southeast" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "Southeast"}, type: :description, text: "This is a Southeast-facing tooltip and is responsive.", direction: :se)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Northwest", m: 2})) { "Northwest" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "Northwest"}, type: :description, text: "This is a Northwest-facing tooltip and is responsive.", direction: :nw)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Southwest", m: 2})) { "Southwest" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "Southwest"}, type: :description, text: "This is a Southwest-facing tooltip and is responsive.", direction: :sw)) %>
+    #     <%= 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(attributes: { for:  "test-button" }, type: :description, text: "This tooltip should take up the full width", direction: :ne)) %>
+    #       <%= 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 type [Symbol] <%= one_of(Ariadne::TooltipComponent::TYPE_OPTIONS) %>
+    # @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 direction [Symbol] <%= one_of(Ariadne::TooltipComponent::DIRECTION_OPTIONS) %>
+    # @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: :"tool-tip", type: TYPE_DEFAULT, text:, direction: DIRECTION_DEFAULT, classes: "", attributes: {})
+    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(:"tool-tip", tag)
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
 
       @text = text
-      @classes = classes
+      @classes = class_names(DEFAULT_CLASSES, classes)
 
       @attributes = attributes
-      @attributes[:hidden] = true
-      @attributes[:visible] ||= false
-      @attributes[:"data-direction"] = fetch_or_raise(DIRECTION_OPTIONS, direction)
-      @attributes[:"data-type"] = fetch_or_raise(TYPE_OPTIONS, type)
-    end
+      @attributes[:for] = for_id
 
-    def call
-      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { @text }
+      @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

@@ -12,7 +12,10 @@ module Ariadne
         options[:builder] ||= Ariadne::FormBuilder
         options[:html] ||= {}
         options = options.merge(attributes)
-        form_with(model: model, scope: scope, url: url, format: format, **options, &block)
+        data = {
+          controller: "ariadne-form",
+        }
+        form_with(model: model, scope: scope, url: url, format: format, data: data, **options, &block)
       end
     end
   end

data/app/lib/ariadne/fetch_or_fallback_helper.rb

@@ -25,7 +25,9 @@ module Ariadne
     TRUE_OR_FALSE = [true, false].freeze
 
     def fetch_or_raise(allowed_values, given_value)
-      raise ArgumentError, "allowed_values must be an array; it was #{allowed_values.class}" unless allowed_values.is_a?(Array)
+      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

data/app/lib/ariadne/form_builder.rb

@@ -5,66 +5,66 @@ module Ariadne
   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"
+    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 = "text-lg leading-6 font-medium text-gray-900"
-    def heading(classes: "", attributes: {}, &block)
+    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(:h3, **options, &block)
+      @template.content_tag(tag, **options, &block)
     end
 
-    DEFAULT_SECTION_SUBHEADING_CLASSES = "mt-1 max-w-2xl text-sm text-gray-500"
+    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 = "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)
+    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 = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+    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[:class])
+      options[:class] = class_names(DEFAULT_TEXT_CLASSES, options.delete(:classes))
       super(method, **options)
     end
 
-    DEFAULT_CHECKBOX_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+    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_TEXT_CLASSES, options[:class])
-      super(method, **options)
+      options[:class] = class_names(DEFAULT_CHECKBOX_CLASSES, options.delete(:classes))
+      super(method, options, checked_value, unchecked_value)
     end
 
-    DEFAULT_RADIO_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+    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[:class])
+      options[:class] = class_names(DEFAULT_RADIO_CLASSES, options.delete(:classes))
       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"
+    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[:class])
+      options[:class] = class_names(DEFAULT_TEXTAREA_CLASSES, options.delete(:classes))
       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"
+    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[:class])
+      options[:class] = class_names(DEFAULT_EMAIL_CLASSES, options.delete(:classes))
       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"
+    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[:class])
+      options[:class] = class_names(DEFAULT_PASSWORD_CLASSES, options.delete(:classes))
       super(method, **options)
     end
   end

data/app/lib/ariadne/icon_helper.rb

@@ -23,7 +23,7 @@ module Ariadne
 
       icon_presence!(icon, variant)
       variant_presence!(icon, variant)
-      fetch_or_raise(HeroiconsHelper::Icon::VARIANTS, variant)
+      fetch_or_raise(HeroiconsHelper::Icon::VALID_VARIANTS, variant)
 
       true
     end

data/lib/ariadne/view_components/engine.rb

@@ -1,10 +1,18 @@
 # frozen_string_literal: true
 
 require "rails/engine"
-require "ariadne/classify/utilities"
+
+require "view_component"
+
+require "tailwind_merge"
+require "simple_form"
 
 module Ariadne
+  # The Ariadne gem is a collection of ViewComponents that can be used to build
+  # accessible, responsive, and consistent UIs for Yetto.
   module ViewComponents
+    mattr_accessor :tailwind_merger
+
     # :nodoc:
     class Engine < ::Rails::Engine
       isolate_namespace Ariadne::ViewComponents
@@ -28,8 +36,168 @@ module Ariadne
         end
       end
 
-      config.after_initialize do |app|
-        ::Ariadne::Classify::Utilities.validate_class_names = app.config.ariadne_view_components.delete(:validate_class_names)
+      initializer "ariadne_view_components.simple_form" do |_app|
+        # Use this setup block to configure all options available in SimpleForm.
+        SimpleForm.setup do |config|
+          # Default class for buttons
+          config.button_class = "my-2 bg-blue-500 hover:bg-blue-700 text-white font-bold text-sm py-2 px-4 rounded"
+
+          # Define the default class of the input wrapper of the boolean input.
+          config.boolean_label_class = ""
+
+          # How the label text should be generated altogether with the required text.
+          config.label_text = lambda { |label, required, _explicit_label| "#{label} #{required}" }
+
+          # Define the way to render check boxes / radio buttons with labels.
+          config.boolean_style = :inline
+
+          # You can wrap each item in a collection of radio/check boxes with a tag
+          config.item_wrapper_tag = :div
+
+          # Defines if the default input wrapper class should be included in radio
+          # collection wrappers.
+          config.include_default_input_wrapper_class = false
+
+          # CSS class to add for error notification helper.
+          config.error_notification_class = "text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-400"
+
+          # Method used to tidy up errors. Specify any Rails Array method.
+          # :first lists the first message for each field.
+          # :to_sentence to list all errors for each field.
+          config.error_method = :to_sentence
+
+          # add validation classes to `input_field`
+          config.input_field_error_class = "border-red-500"
+          config.input_field_valid_class = "border-green-400"
+          config.label_class = "text-sm font-medium text-gray-600"
+
+          # vertical forms
+          #
+          # vertical default_wrapper
+          config.wrappers(:vertical_form, tag: "div", class: "mb-4") do |b|
+            b.use(:html5)
+            b.use(:placeholder)
+            b.optional(:maxlength)
+            b.optional(:minlength)
+            b.optional(:pattern)
+            b.optional(:min_max)
+            b.optional(:readonly)
+            b.use(:label, class: "block", error_class: "text-red-500")
+            b.use(:input, class: "shadow appearance-none border border-gray-300 rounded w-full py-2 px-3 bg-white focus:outline-none focus:ring-0 focus:border-blue-500 text-gray-400 leading-6 transition-colors duration-200 ease-in-out", error_class: "border-red-500", valid_class: "border-green-400")
+            b.use(:full_error, wrap_with: { tag: "p", class: "mt-2 text-red-500 text-xs italic" })
+            b.use(:hint, wrap_with: { tag: "p", class: "mt-2 text-grey-700 text-xs italic" })
+          end
+
+          # vertical input for boolean (aka checkboxes)
+          config.wrappers(:vertical_boolean, tag: "div", class: "mb-4 flex items-start", error_class: "") do |b|
+            b.use(:html5)
+            b.optional(:readonly)
+            b.wrapper(tag: "div", class: "flex items-center h-5") do |ba|
+              ba.use(:input, class: "focus:ring-2 focus:ring-indigo-500:focus ring-offset-2 h-4 w-4 text-indigo-600 border-gray-300 rounded")
+            end
+            b.wrapper(tag: "div", class: "ml-3 text-sm") do |bb|
+              bb.use(:label, class: "block", error_class: "text-red-500")
+              bb.use(:hint, wrap_with: { tag: "p", class: "block text-grey-700 text-xs italic" })
+              bb.use(:full_error, wrap_with: { tag: "p", class: "block text-red-500 text-xs italic" })
+            end
+          end
+
+          # vertical input for radio buttons and check boxes
+          config.wrappers(:vertical_collection, item_wrapper_class: "flex items-center", item_label_class: "my-1 ml-3 block text-sm font-medium text-gray-400", tag: "div", class: "my-4") do |b|
+            b.use(:html5)
+            b.optional(:readonly)
+            b.wrapper(:legend_tag, tag: "legend", class: "text-sm font-medium text-gray-600", error_class: "text-red-500") do |ba|
+              ba.use(:label_text)
+            end
+            b.use(:input, class: "focus:ring-2 focus:ring-indigo-500 ring-offset-2 h-4 w-4 text-indigo-600 border-gray-300 rounded", error_class: "text-red-500", valid_class: "text-green-400")
+            b.use(:full_error, wrap_with: { tag: "p", class: "block mt-2 text-red-500 text-xs italic" })
+            b.use(:hint, wrap_with: { tag: "p", class: "mt-2 text-grey-700 text-xs italic" })
+          end
+
+          # vertical file input
+          config.wrappers(:vertical_file, tag: "div", class: "") do |b|
+            b.use(:html5)
+            b.use(:placeholder)
+            b.optional(:maxlength)
+            b.optional(:minlength)
+            b.optional(:readonly)
+            b.use(:label, class: "text-sm font-medium text-gray-600 block", error_class: "text-red-500")
+            b.use(:input, class: "w-full text-gray-500 px-3 py-2 border rounded", error_class: "text-red-500 border-red-500", valid_class: "text-green-400")
+            b.use(:full_error, wrap_with: { tag: "p", class: "mt-2 text-red-500 text-xs italic" })
+            b.use(:hint, wrap_with: { tag: "p", class: "mt-2 text-grey-700 text-xs italic" })
+          end
+
+          # vertical multi select
+          config.wrappers(:vertical_multi_select, tag: "div", class: "my-4", error_class: "f", valid_class: "") do |b|
+            b.use(:html5)
+            b.optional(:readonly)
+            b.wrapper(:legend_tag, tag: "legend", class: "text-sm font-medium text-gray-600", error_class: "text-red-500") do |ba|
+              ba.use(:label_text)
+            end
+            b.wrapper(tag: "div", class: "inline-flex space-x-1") do |ba|
+              # ba.use :input, class: 'flex w-auto w-auto text-gray-500 text-sm border-gray-300 rounded p-2', error_class: 'text-red-500', valid_class: 'text-green-400'
+              ba.use(:input, class: "flex w-auto w-auto shadow appearance-none border border-gray-300 rounded w-full p-2 bg-white focus:outline-none focus:border-blue-500 text-gray-400 leading-4 transition-colors duration-200 ease-in-out")
+            end
+            b.use(:full_error, wrap_with: { tag: "p", class: "mt-2 text-red-500 text-xs italic" })
+            b.use(:hint, wrap_with: { tag: "p", class: "mt-2 text-grey-700 text-xs italic" })
+          end
+
+          # vertical range input
+          config.wrappers(:vertical_range, tag: "div", class: "my-4", error_class: "text-red-500", valid_class: "text-green-400") do |b|
+            b.use(:html5)
+            b.use(:placeholder)
+            b.optional(:readonly)
+            b.optional(:step)
+            b.use(:label, class: "text-sm font-medium text-gray-600 block", error_class: "text-red-500")
+            b.wrapper(tag: "div", class: "flex items-center h-5") do |ba|
+              ba.use(:input, class: "rounded-lg overflow-hidden appearance-none bg-gray-400 h-3 w-full text-gray-300", error_class: "text-red-500", valid_class: "text-green-400")
+            end
+            b.use(:full_error, wrap_with: { tag: "p", class: "mt-2 text-red-500 text-xs italic" })
+            b.use(:hint, wrap_with: { tag: "p", class: "mt-2 text-grey-700 text-xs italic" })
+          end
+
+          # The default wrapper to be used by the FormBuilder.
+          config.default_wrapper = :vertical_form
+
+          # Custom wrappers for input types. This should be a hash containing an input
+          # type as key and the wrapper that will be used for all inputs with specified type.
+          config.wrapper_mappings = {
+            boolean: :vertical_boolean,
+            check_boxes: :vertical_collection,
+            date: :vertical_multi_select,
+            datetime: :vertical_multi_select,
+            file: :vertical_file,
+            radio_buttons: :vertical_collection,
+            range: :vertical_range,
+            time: :vertical_multi_select,
+          }
+        end
+      end
+
+      config.after_initialize do |_app|
+        # TODO: is any of this necessary???
+        ActionView::Base.field_error_proc = proc do |html_tag, instance_tag|
+          fragment = Nokogiri::HTML.fragment(html_tag)
+          field = fragment.at("input,select,textarea")
+
+          model = instance_tag.object
+          error_message = model.errors.full_messages.join(", ")
+
+          html = if field
+            field["class"] = "#{field["class"]} invalid"
+            html = <<-HTML
+                      #{fragment}
+                      <p class="error">#{error_message}</p>
+            HTML
+            html
+          else
+            html_tag
+          end
+
+          html.html_safe # rubocop:disable Rails/OutputSafety
+        end
+
+        Ariadne::ViewComponents.tailwind_merger = TailwindMerge::Merger.new
       end
     end
   end

data/lib/ariadne/view_components/version.rb

@@ -2,6 +2,6 @@
 
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.4"
+    VERSION = "0.0.7"
   end
 end

data/lib/ariadne/view_components.rb

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
-require "ariadne/classify"
 require "ariadne/view_components/version"
 require "ariadne/view_components/engine"
 require "ariadne/view_components/constants"
@@ -15,45 +14,47 @@ module Ariadne
       audited_at: "audited_at.json",
     }.freeze
 
-    # generate_statuses returns a hash mapping component name to
-    # the component's status sorted alphabetically by the component name.
-    def self.generate_statuses
-      Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
-        mem[component.to_s] = component.status.to_s
+    class << self
+      # generate_statuses returns a hash mapping component name to
+      # the component's status sorted alphabetically by the component name.
+      def generate_statuses
+        Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+          mem[component.to_s] = component.status.to_s
+        end
       end
-    end
 
-    # generate_audited_at returns a hash mapping component name to
-    # the day the component has passed an accessibility audit.
-    def self.generate_audited_at
-      Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
-        mem[component.to_s] = component.audited_at.to_s
+      # generate_audited_at returns a hash mapping component name to
+      # the day the component has passed an accessibility audit.
+      def generate_audited_at
+        Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+          mem[component.to_s] = component.audited_at.to_s
+        end
       end
-    end
 
-    # generate_constants returns a hash mapping component name to
-    # all of its constants.
-    def self.generate_constants
-      Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
-        mem[component.to_s] = component.constants(false).sort.each_with_object({}) do |constant, h|
-          h[constant] = component.const_get(constant)
+      # generate_constants returns a hash mapping component name to
+      # all of its constants.
+      def generate_constants
+        Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+          mem[component.to_s] = component.constants(false).sort.each_with_object({}) do |constant, h|
+            h[constant] = component.const_get(constant)
+          end
         end
       end
-    end
 
-    # dump generates the requested stat hash and outputs it to a file.
-    def self.dump(stats)
-      require "json"
+      # dump generates the requested stat hash and outputs it to a file.
+      def dump(stats)
+        require "json"
 
-      File.open(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]), "w") do |f|
-        f.write(JSON.pretty_generate(send("generate_#{stats}")))
-        f.write($INPUT_RECORD_SEPARATOR)
+        File.open(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]), "w") do |f|
+          f.write(JSON.pretty_generate(send("generate_#{stats}")))
+          f.write($INPUT_RECORD_SEPARATOR)
+        end
       end
-    end
 
-    # read returns a JSON string matching the output of the corresponding stat.
-    def self.read(stats)
-      File.read(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]))
+      # read returns a JSON string matching the output of the corresponding stat.
+      def read(stats)
+        File.read(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]))
+      end
     end
   end
 end

data/lib/rubocop/config/default.yml

@@ -4,11 +4,5 @@ require:
 AllCops:
   DisabledByDefault: true
 
-Ariadne/SystemArgumentInsteadOfClass:
-  Enabled: true
-
 Ariadne/NoTagMemoize:
-  Enabled: false
-
-Ariadne/AriadneHeroicon:
   Enabled: true

data/lib/rubocop/cop/ariadne/no_tag_memoize.rb

@@ -16,6 +16,7 @@ module RuboCop
       #
       # good
       # @attributes[:tag] = :h2
+      # TODO: TEST THIS
       class NoTagMemoize < RuboCop::Cop::Cop
         INVALID_MESSAGE = <<~STR
           Avoid `[:tag] ||=`. Instead, try one of the following:

data/lib/tasks/docs.rake

@@ -47,6 +47,9 @@ namespace :docs do
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
     components = [
+      Ariadne::RichTextAreaComponent,
+      Ariadne::CommentComponent,
+      Ariadne::BodyComponent,
       Ariadne::BlankslateComponent,
       Ariadne::BaseButton,
       Ariadne::ButtonComponent,
@@ -55,6 +58,7 @@ namespace :docs do
       Ariadne::CounterComponent,
       Ariadne::GridComponent,
       Ariadne::FlashComponent,
+      Ariadne::FlexComponent,
       Ariadne::FooterComponent,
       Ariadne::HeaderComponent,
       Ariadne::HeadingComponent,
@@ -63,8 +67,13 @@ namespace :docs do
       Ariadne::InlineFlexComponent,
       Ariadne::LinkComponent,
       Ariadne::ListComponent,
+      Ariadne::MainComponent,
+      Ariadne::NarrowContainerComponent,
+      Ariadne::PanelBarComponent,
       Ariadne::PillComponent,
       Ariadne::SlideoverComponent,
+      Ariadne::TabComponent,
+      Ariadne::TabBarComponent,
       Ariadne::Text,
       Ariadne::TimeAgoComponent,
       Ariadne::TimelineComponent,