ariadne_view_components 0.0.2 → 0.0.5

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 = "invisible absolute bg-slate-900 text-white font-semibold max-w-xs py-1 px-2 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

@@ -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 = "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(tag: :h3, classes: "", attributes: {}, &block)
+      actual_classes = class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
+      options = { class: actual_classes, **attributes }
+      @template.content_tag(tag, **options, &block)
+    end
+
+    DEFAULT_SECTION_SUBHEADING_CLASSES = "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 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"
+    def text_field(method, options = {})
+      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"
+    def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      options[:class] = class_names(DEFAULT_CHECKBOX_CLASSES, options.delete(:classes))
+      super(method, options, checked_value, unchecked_value)
+    end
+
+    DEFAULT_RADIO_CLASSES = "focus: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.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"
+    def text_area(method, options = {})
+      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"
+    def email_field(method, options = {})
+      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"
+    def password_field(method, options = {})
+      options[:class] = class_names(DEFAULT_PASSWORD_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+  end
+end

data/lib/ariadne/classify.rb

@@ -3,6 +3,8 @@
 require_relative "classify/utilities"
 require_relative "classify/validation"
 
+require "tailwind_merge"
+
 module Ariadne
   # :nodoc:
   class Classify
@@ -110,96 +112,8 @@ module Ariadne
       private def validated_class_names(classes)
         return if classes.blank?
 
-        corrected_classes = correct_classes(classes)
-
-        if raise_on_invalid_options? && !ENV["ARIADNE_WARNINGS_DISABLED"]
-          invalid_class_names =
-            corrected_classes.each_with_object([]) do |class_name, memo|
-              memo << class_name if Ariadne::Classify::Validation.invalid?(class_name)
-            end
-
-          # TODO: implement this
-          if invalid_class_names.any?
-            # raise ArgumentError, <<~MSG
-            #   Use Tailwind CSS class names instead of your own #{"name".pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}.
-            #   Set ARIADNE_WARNINGS_DISABLED=1 to disable this warning.
-            # MSG
-          end
-        end
-
-        corrected_classes.join(" ")
-      end
-
-      # TODO: automate this, ugh. peek at utilities.yml
-      BG_PREFIX = /^bg-/.freeze
-      BG_PSEUDO_PREFIX = /^\S+:bg-/.freeze
-      BORDER_PREFIX = /^border-/.freeze
-      BORDER_PSEUDO_PREFIX = /^\S+:border-/.freeze
-      TEXT_ASPECT_PREFIX = /^text-\S+-/.freeze
-      TEXT_ASPECT_PSEUDO_PREFIX = /^\S+:text-\S+-/.freeze
-      TEXT_PREFIX = /^text-/.freeze
-      TEXT_PSEUDO_PREFIX = /^\S+:text-/.freeze
-
-      # TODO: TEST!
-      private def correct_classes(classes)
-        matched_bg = ""
-        matched_bg_pseudo = {}
-        matched_border = ""
-        matched_border_pseudo = {}
-        matched_text_aspect = {}
-        matched_text_aspect_pseudo = {}
-        matched_text = ""
-        matched_text_pseudo = {}
-
-        classes.split(" ").reverse.each_with_object([]) do |c, memo|
-          next if c.blank?
-
-          class_name = c.strip
-
-          if class_name.match(BG_PREFIX)
-            next if matched_bg.present?
-
-            memo << matched_bg = class_name
-          elsif class_name.match(BG_PSEUDO_PREFIX)
-            next if matched_bg_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_bg_pseudo[class_name] = true
-            memo << class_name
-
-          elsif class_name.match(BORDER_PREFIX)
-            next if matched_border.present?
-
-            memo << matched_border = class_name
-          elsif class_name.match(BORDER_PSEUDO_PREFIX)
-            next if matched_border_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_border_pseudo[class_name] = true
-            memo << class_name
-
-          elsif class_name.match(TEXT_ASPECT_PREFIX)
-            next if matched_text_aspect.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_text_aspect[class_name] = true
-            memo << class_name
-          elsif class_name.match(TEXT_ASPECT_PSEUDO_PREFIX)
-            next if matched_text_aspect_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_text_aspect_pseudo[class_name] = true
-            memo << class_name
-
-          elsif class_name.match(TEXT_PREFIX)
-            next if matched_text.present?
-
-            memo << matched_text = class_name
-          elsif class_name.match(TEXT_PSEUDO_PREFIX)
-            next if matched_text_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_text_pseudo[class_name] = true
-            memo << class_name
-          else
-            memo << class_name
-          end
-        end.uniq
+        # TODO: obviously instantiate this
+        TailwindMerge::Merger.new.merge(classes)
       end
 
       private def raise_on_invalid_options?

data/lib/ariadne/view_components/engine.rb

@@ -22,6 +22,12 @@ module Ariadne
         app.config.assets.precompile += ["ariadne_view_components"] if app.config.respond_to?(:assets)
       end
 
+      initializer "ariadne_view_components.importmap", before: "importmap" do |app|
+        if Rails.application.respond_to?(:importmap)
+          app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+        end
+      end
+
       config.after_initialize do |app|
         ::Ariadne::Classify::Utilities.validate_class_names = app.config.ariadne_view_components.delete(:validate_class_names)
       end

data/lib/ariadne/view_components/version.rb

@@ -2,6 +2,6 @@
 
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.2"
+    VERSION = "0.0.5"
   end
 end

data/lib/ariadne/view_components.rb

@@ -15,45 +15,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/cop/ariadne/ariadne_heroicon.rb

@@ -113,7 +113,7 @@ module RuboCop
             if size.between?(10, 16)
               ""
             elsif size.between?(22, 26)
-              ":medium"
+              :md
             else
               size
             end
@@ -209,7 +209,7 @@ module RuboCop
           # No arguments if they map to the default size
           return if size_attributes.blank? || size_attributes.values.all?(&:blank?)
           # Return mapped argument to `size`
-          return "size: :medium" if size_attributes.values.any?(":medium")
+          return "size: :md" if size_attributes.values.any?(:md)
 
           size_attributes.map do |key, value|
             "#{key}: #{value}"

data/lib/tasks/docs.rake

@@ -32,6 +32,12 @@ namespace :docs do
     sleep
   end
 
+  # for classes in hashes
+  CLASS_MAPPINGS = '(?:\\S+|:\\"[\\S-]+\\"): \\"([\\S -]+)\\"'
+  # for classes in constants
+  CLASS_CONSTANT = '[A-Z_]+ = \\"([\\S -]+)\\"'
+  CLASS_REGEX = Regexp.new("(?:#{CLASS_MAPPINGS}|#{CLASS_CONSTANT})")
+
   desc "Generate the documentation."
   task :build do
     registry = generate_yard_registry
@@ -41,76 +47,37 @@ namespace :docs do
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
     components = [
-      # FIXME: these need to be filled in
+      Ariadne::FlexComponent,
+      Ariadne::CommentComponent,
+      Ariadne::BodyComponent,
+      Ariadne::BlankslateComponent,
       Ariadne::BaseButton,
       Ariadne::ButtonComponent,
-      # Ariadne::Alpha::Layout,
-      # Ariadne::HellipButton,
-      # Ariadne::BorderBox::Header,
-      # Ariadne::IconButton,
-      # Ariadne::Beta::AutoComplete,
-      # Ariadne::Beta::AutoComplete::Item,
-      # Ariadne::Beta::Avatar,
-      # Ariadne::Beta::AvatarStack,
-      # Ariadne::Beta::Blankslate,
-      # Ariadne::BorderBoxComponent,
-      # Ariadne::BoxComponent,
-      # Ariadne::Beta::Breadcrumbs,
-      # Ariadne::ButtonGroup,
-      # Ariadne::Alpha::ButtonMarketing,
+      Ariadne::ContainerComponent,
       Ariadne::ClipboardCopyComponent,
-      # Ariadne::CloseButton,
       Ariadne::CounterComponent,
-      # Ariadne::DetailsComponent,
-      # Ariadne::Dropdown,
-      # Ariadne::DropdownMenuComponent,
+      Ariadne::GridComponent,
       Ariadne::FlashComponent,
-      # Ariadne::FlexComponent,
-      # Ariadne::FlexItemComponent,
+      Ariadne::FooterComponent,
+      Ariadne::HeaderComponent,
       Ariadne::HeadingComponent,
-      # Ariadne::HiddenTextExpander,
-      # Ariadne::LabelComponent,
-      # Ariadne::LayoutComponent,
-      # Ariadne::LinkComponent,
-      # Ariadne::Markdown,
-      # Ariadne::MenuComponent,
-      # Ariadne::Navigation::TabComponent,
       Ariadne::HeroiconComponent,
-      # Ariadne::LocalTime,
       Ariadne::ImageComponent,
-      # Ariadne::ImageCrop,
-      # Ariadne::PopoverComponent,
-      # Ariadne::ProgressBarComponent,
-      # Ariadne::StateComponent,
-      # Ariadne::SpinnerComponent,
-      # Ariadne::SubheadComponent,
-      # Ariadne::TabContainerComponent,
+      Ariadne::InlineFlexComponent,
+      Ariadne::LinkComponent,
+      Ariadne::ListComponent,
+      Ariadne::MainComponent,
+      Ariadne::PillComponent,
+      Ariadne::SlideoverComponent,
       Ariadne::Text,
-      # Ariadne::TimeAgoComponent,
-      # Ariadne::TimelineItemComponent,
-      # Ariadne::TooltipComponent,
-      # Ariadne::Truncate,
-      # Ariadne::Beta::Truncate,
-      # Ariadne::Alpha::UnderlineNav,
-      # Ariadne::Alpha::UnderlinePanels,
-      # Ariadne::Alpha::TabNav,
-      # Ariadne::Alpha::TabPanels,
+      Ariadne::TimeAgoComponent,
+      Ariadne::TimelineComponent,
       Ariadne::TooltipComponent,
     ]
 
     js_components = [
-      # Ariadne::Dropdown,
-      # Ariadne::LocalTime,
-      # Ariadne::ImageCrop,
-      # Ariadne::Beta::AutoComplete,
       Ariadne::ClipboardCopyComponent,
-      # Ariadne::TabContainerComponent,
-      # Ariadne::TimeAgoComponent,
-      # Ariadne::Alpha::UnderlinePanels,
-      # Ariadne::Alpha::TabPanels,
-      # Ariadne::TooltipComponent,
-      # Ariadne::ButtonComponent,
-      # Ariadne::LinkComponent,
+      Ariadne::TimeAgoComponent,
     ]
 
     all_components = Ariadne::Component.descendants - [Ariadne::BaseComponent, Ariadne::Content] # TODO: why is `Ariadne::Content` not picked up?
@@ -263,7 +230,7 @@ namespace :docs do
           f.puts
           html = view_context.render(inline: code)
           html.scan(/class="([^"]*)"/) do |classnames|
-            classes_found_in_examples.concat(classnames[0].split.reject { |c| c.starts_with?("heroicon", "js", "my-") }.map { ".#{_1}" })
+            classes_found_in_examples.concat(classnames[0].split.reject { |c| c.starts_with?("heroicon", "js") }.map { ".#{_1}" })
           end
           f.puts("<Example src=\"#{html.tr('"', "\'").delete("\n")}\" />")
           f.puts
@@ -286,8 +253,35 @@ namespace :docs do
       raise
     end
 
+    additional_classes = []
+
+    tailwind_utility_prefixes = ["bg-", "border-", "fill-", "stroke-", "text-"]
+
+    additional_color_classes = [
+      "billy-purple",
+      "state-closed",
+      "state-open",
+    ]
+
+    additional_color_classes.each do |color_class|
+      tailwind_utility_prefixes.each do |prefix|
+        additional_classes.concat([".#{prefix}#{color_class}"])
+      end
+    end
+
+    Dir.glob("./app/components/**/*.rb") do |rb_filename|
+      content = File.read(rb_filename)
+      matches = content.scan(CLASS_REGEX)
+
+      if matches.present?
+        result = matches.flatten.compact.map { |c| c.split(" ") }.flatten.select { |r| r =~ /\A[0-9a-z:\-]+\z/ }.uniq
+        additional_classes.concat(result.map { |r| ".#{r}" }) if result.present?
+      end
+    end
+
+    final_list_of_classes = classes_found_in_examples.concat(additional_classes).uniq.sort
     File.open("static/classes.yml", "w") do |f|
-      f.puts YAML.dump(classes_found_in_examples.sort.uniq)
+      f.puts YAML.dump(final_list_of_classes)
     end
 
     File.open("static/arguments.yml", "w") do |f|