ariadne_view_components 0.0.93.1 → 0.0.94

data/app/frontend/stylesheets/theme.css

@@ -0,0 +1,88 @@
+[data-ariadne-color-mode] {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+[data-ariadne-light-theme='light'] {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 262.76 30% 36%;
+  --primary-foreground: 227.98 6% 99%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --danger: 0 84.2% 60.2%;
+  --danger-foreground: 0 0% 98%;
+
+  --warning: 43 100% 42%;
+  --warning-foreground: 210 40% 98%;
+
+  --success: 93 85% 32%;
+  --success-foreground: 0 0% 100%;
+
+  --info: 211 100% 50%;
+  --info-foreground: 199 89% 48%;
+
+  --ring: 240 5.9% 10%;
+}
+
+[data-ariadne-dark-theme='dark'] {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 259.98 94% 88%;
+  --primary-foreground: 227.98 6% 99%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --danger: 0 62.8% 30.6%;
+  --danger-foreground: 0 0% 98%;
+
+  --warning: 43 100% 42%;
+  --warning-foreground: 210 40% 98%;
+
+  --success: 93 85% 32%;
+  --success-foreground: 0 0% 100%;
+
+  --info: 217 91% 60%;
+  --info-foreground: 0 0% 100%;
+
+  --ring: 240 4.9% 83.9%;
+}

data/app/frontend/utils/createController.ts

@@ -88,6 +88,15 @@ export function controllerFactory<E extends HTMLElement>() {
     class ExtendedController extends Controller<E> {
       static targets = Object.keys(targets ?? {})
       static values = values ?? {}
+
+      private dispatchEvent(target: HTMLElement, name: string, options: {bubbles?: boolean, cancelable?: boolean} = {}) {
+        // Dispatching event to trigger all related actions
+        const event = new Event(name, {
+          bubbles: options.bubbles || false,
+          cancelable: options.cancelable || false,
+        });
+        target.dispatchEvent(event);
+      }
     }
 
     return ExtendedController as unknown as new () => ControllerWithTargets<E, T, Y>

data/app/helpers/ariadne/color_helper.rb

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module ColorHelper
+    VALID_COLORS =
+      {
+        "red": [
+          "ariadne-bg-red-500/15",
+          "ariadne-text-red-700",
+          "group-data-[hover]:ariadne-bg-red-500/25",
+          "dark:ariadne-bg-red-500/10",
+          "dark:ariadne-text-red-400",
+          "dark:group-data-[hover]:ariadne-bg-red-500/20",
+        ],
+        "orange": [
+          "ariadne-bg-orange-500/15",
+          "ariadne-text-orange-700",
+          "group-data-[hover]:ariadne-bg-orange-500/25",
+          "dark:ariadne-bg-orange-500/10",
+          "dark:ariadne-text-orange-400",
+          "dark:group-data-[hover]:ariadne-bg-orange-500/20",
+        ],
+        "amber": [
+          "ariadne-bg-amber-400/20",
+          "ariadne-text-amber-700",
+          "group-data-[hover]:ariadne-bg-amber-400/30",
+          "dark:ariadne-bg-amber-400/10",
+          "dark:ariadne-text-amber-400",
+          "dark:group-data-[hover]:ariadne-bg-amber-400/15",
+        ],
+        "yellow": [
+          "ariadne-bg-yellow-400/20",
+          "ariadne-text-yellow-700",
+          "group-data-[hover]:ariadne-bg-yellow-400/30",
+          "dark:ariadne-bg-yellow-400/10",
+          "dark:ariadne-text-yellow-300",
+          "dark:group-data-[hover]:ariadne-bg-yellow-400/15",
+        ],
+        "lime": [
+          "ariadne-bg-lime-400/20",
+          "ariadne-text-lime-700",
+          "group-data-[hover]:ariadne-bg-lime-400/30",
+          "dark:ariadne-bg-lime-400/10",
+          "dark:ariadne-text-lime-300",
+          "dark:group-data-[hover]:ariadne-bg-lime-400/15",
+        ],
+        "green": [
+          "ariadne-bg-green-500/15",
+          "ariadne-text-green-700",
+          "group-data-[hover]:ariadne-bg-green-500/25",
+          "dark:ariadne-bg-green-500/10",
+          "dark:ariadne-text-green-400",
+          "dark:group-data-[hover]:ariadne-bg-green-500/20",
+        ],
+        "emerald": [
+          "ariadne-bg-emerald-500/15",
+          "ariadne-text-emerald-700",
+          "group-data-[hover]:ariadne-bg-emerald-500/25",
+          "dark:ariadne-bg-emerald-500/10",
+          "dark:ariadne-text-emerald-400",
+          "dark:group-data-[hover]:ariadne-bg-emerald-500/20",
+        ],
+        "teal": [
+          "ariadne-bg-teal-500/15",
+          "ariadne-text-teal-700",
+          "group-data-[hover]:ariadne-bg-teal-500/25",
+          "dark:ariadne-bg-teal-500/10",
+          "dark:ariadne-text-teal-300",
+          "dark:group-data-[hover]:ariadne-bg-teal-500/20",
+        ],
+        "cyan": [
+          "ariadne-bg-cyan-400/20",
+          "ariadne-text-cyan-700",
+          "group-data-[hover]:ariadne-bg-cyan-400/30",
+          "dark:ariadne-bg-cyan-400/10",
+          "dark:ariadne-text-cyan-300",
+          "dark:group-data-[hover]:ariadne-bg-cyan-400/15",
+        ],
+        "sky": [
+          "ariadne-bg-sky-500/15",
+          "ariadne-text-sky-700",
+          "group-data-[hover]:ariadne-bg-sky-500/25",
+          "dark:ariadne-bg-sky-500/10",
+          "dark:ariadne-text-sky-300",
+          "dark:group-data-[hover]:ariadne-bg-sky-500/20",
+        ],
+        "blue": [
+          "ariadne-bg-blue-500/15",
+          "ariadne-text-blue-700",
+          "group-data-[hover]:ariadne-bg-blue-500/25",
+          "dark:ariadne-text-blue-400",
+          "dark:group-data-[hover]:ariadne-bg-blue-500/25",
+        ],
+        "indigo": [
+          "ariadne-bg-indigo-500/15",
+          "ariadne-text-indigo-700",
+          "group-data-[hover]:ariadne-bg-indigo-500/25",
+          "dark:ariadne-text-indigo-400",
+          "dark:group-data-[hover]:ariadne-bg-indigo-500/20",
+        ],
+        "violet": [
+          "ariadne-bg-violet-500/15",
+          "ariadne-text-violet-700",
+          "group-data-[hover]:ariadne-bg-violet-500/25",
+          "dark:ariadne-text-violet-400",
+          "dark:group-data-[hover]:ariadne-bg-violet-500/20",
+        ],
+        "purple": [
+          "ariadne-bg-purple-500/15",
+          "ariadne-text-purple-700",
+          "group-data-[hover]:ariadne-bg-purple-500/25",
+          "dark:ariadne-text-purple-400",
+          "dark:group-data-[hover]:ariadne-bg-purple-500/20",
+        ],
+        "fuchsia": [
+          "ariadne-bg-fuchsia-400/15",
+          "ariadne-text-fuchsia-700",
+          "group-data-[hover]:ariadne-bg-fuchsia-400/25",
+          "dark:ariadne-bg-fuchsia-400/10",
+          "dark:ariadne-text-fuchsia-400",
+          "dark:group-data-[hover]:ariadne-bg-fuchsia-400/20",
+        ],
+        "pink": [
+          "ariadne-bg-pink-400/15",
+          "ariadne-text-pink-700",
+          "group-data-[hover]:ariadne-bg-pink-400/25",
+          "dark:ariadne-bg-pink-400/10",
+          "dark:ariadne-text-pink-400",
+          "dark:group-data-[hover]:ariadne-bg-pink-400/20",
+        ],
+        "rose": [
+          "ariadne-bg-rose-400/15",
+          "ariadne-text-rose-700",
+          "group-data-[hover]:ariadne-bg-rose-400/25",
+          "dark:ariadne-bg-rose-400/10",
+          "dark:ariadne-text-rose-400",
+          "dark:group-data-[hover]:ariadne-bg-rose-400/20",
+        ],
+        "zinc": [
+          "ariadne-bg-zinc-600/10",
+          "ariadne-text-zinc-700",
+          "group-data-[hover]:ariadne-bg-zinc-600/20",
+          "dark:ariadne-bg-white/5",
+          "dark:ariadne-text-zinc-400",
+          "dark:group-data-[hover]:ariadne-bg-white/10",
+        ],
+      }.freeze
+
+    def include_colors!
+      @variants[:color] ||= {}
+      @variants[:color] = {}
+
+      VALID_COLORS.each do |color, classes|
+        @variants[:color][color] = classes
+      end
+    end
+  end
+end

data/app/helpers/ariadne/form_helper.rb

@@ -5,6 +5,7 @@ module Ariadne
   # :nodoc:
   module FormHelper
     def ariadne_form_with(**kwargs, &block)
+      kwargs[:id] ||= Ariadne::BaseComponent.generate_id(base_name: "form")
       form_with(**kwargs, skip_default_ids: false, builder: Ariadne::Forms::Builder, &block)
     end
 

data/app/helpers/ariadne/size_helper.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module SizeHelper
+    VALID_SIZES = [:xs, :sm, :md, :lg, :xl].freeze
+  end
+end

data/app/lib/ariadne/attributes_helper.rb

@@ -43,8 +43,8 @@ module Ariadne
     # It's designed to be used to normalize and merge aria information from system_arguments
     # hashes. Consider using this pattern in component initializers:
     #
-    # @system_arguments[:aria] = merge_aria(
-    #   @system_arguments,
+    # html_attrs[:aria] = merge_aria(
+    #   html_attrs,
     #   { aria: { labelled_by: id } }
     # )
     def merge_aria(*hashes)
@@ -68,8 +68,8 @@ module Ariadne
     # It's designed to be used to normalize and merge data information from system_arguments
     # hashes. Consider using this pattern in component initializers:
     #
-    # @system_arguments[:data] = merge_aria(
-    #   @system_arguments,
+    # html_attrs[:data] = merge_aria(
+    #   html_attrs,
     #   { data: { foo: "bar" } }
     # )
     def merge_data(*hashes)

data/app/lib/ariadne/view_component/style_variants.rb

@@ -59,7 +59,7 @@ module Ariadne
       # merge Araidne style variants with user provided overrides
       def merged_styles(name = self.class.default_style_name, **variants)
         default_styles = self.class.style_config.compile(name.to_sym, **variants)
-        Ariadne::ViewComponents.tailwind_merger.merge([default_styles, styles.fetch(name, "")])
+        merge_tailwind_classes([default_styles, styles.fetch(name, "")])
       end
     end
   end

data/app/lib/ariadne/view_helper.rb

@@ -6,12 +6,6 @@ module Ariadne
   module ViewHelper
     class ViewHelperNotFound < StandardError; end
 
-    class << self
-      def generate_id
-        SecureRandom.hex(6)
-      end
-    end
-
     HELPERS = {
       heroicon: "Ariadne::UI::Heroicon::Component",
     }.freeze

data/lib/ariadne/accessibility.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Ariadne
+  # :nodoc:
+  module Accessibility
+    # Skip axe checks for components that should be tested as part of a larger component.
+    # Do not add to this list for any other reason!
+    IGNORED_PREVIEWS = [].freeze
+
+    # Skip `:region` which relates to preview page structure rather than individual component.
+    AXE_RULES_TO_SKIP = {
+      # these will be skipped in CI
+      will_fix: {
+        global: [],
+
+        per_component: {},
+      },
+
+      # these will always be skipped
+      wont_fix: {
+        global: [
+          :region,
+        ],
+
+        per_component: {},
+      },
+    }.freeze
+
+    class << self
+      def ignore_preview?(preview_class)
+        IGNORED_PREVIEWS.include?(preview_class)
+      end
+
+      def axe_rules_to_skip(component: nil, scenario_name: nil, flatten: false)
+        to_skip = {
+          wont_fix: Set.new(AXE_RULES_TO_SKIP.dig(:wont_fix, :global) || []),
+          will_fix: Set.new(AXE_RULES_TO_SKIP.dig(:will_fix, :global) || []),
+        }
+
+        if component
+          to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, :all_scenarios) || [])
+          to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, :all_scenarios) || [])
+
+          if scenario_name
+            to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, scenario_name) || [])
+            to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, scenario_name) || [])
+          end
+        end
+
+        if flatten
+          flattened = to_skip.each_with_object(Set.new) do |(_, rule_set), memo|
+            memo.merge(rule_set)
+          end
+
+          return flattened.to_a
+        end
+
+        to_skip.transform_values(&:to_a)
+      end
+    end
+  end
+end
+# :nocov:

data/lib/ariadne/forms/dsl/form_object.rb

@@ -9,7 +9,7 @@ module Ariadne
 
         attr_reader :builder, :form, :id
 
-        def initialize(builder:, form:, id: ::Ariadne::ViewHelper.generate_id)
+        def initialize(builder:, form:, id: Ariadne::BaseComponent.generate_id)
           @builder = builder
           @form = form
           @id = id
@@ -17,6 +17,10 @@ module Ariadne
           yield(self) if block_given?
         end
 
+        def generate_id(base_name: "form")
+          Ariadne::BaseComponent.generate_id(base_name:)
+        end
+
         def group(**options, &block)
           add_input(InputGroup.new(builder: @builder, form: @form, **options, &block))
         end

data/lib/ariadne/forms/dsl/input.rb

@@ -108,7 +108,7 @@ module Ariadne
 
           @options[:invalid] = "true" if invalid?
 
-          @base_id = ::Ariadne::ViewHelper.generate_id
+          @base_id = Ariadne::BaseComponent.generate_id(base_name: "ariadne-form-input")
 
           @ids = {}.tap do |id_map|
             id_map[:validation] = "validation-#{@base_id}" if supports_validation?

data/lib/ariadne/static/generate_arguments.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+require "json"
+
+module Ariadne
+  module Static
+    # :nodoc:
+    module GenerateArguments
+      class << self
+        def call(view_context: self.view_context)
+          Ariadne::BaseComponent.descendants.sort_by(&:name).map do |component|
+            docs = registry.find(component)
+            ref = Ariadne::Yard::ComponentManifest.ref_for(component)
+
+            args = docs.params.map do |tag|
+              default_value = Ariadne::Yard::DocsHelper.pretty_default_value(tag, component)
+
+              {
+                "name" => tag.name,
+                "type" => tag.types.join(", "),
+                "default" => default_value,
+                "description" => view_context.render(inline: tag.text&.squish),
+              }
+            end
+
+            {
+              "component" => docs.metadata[:title],
+              "a11y_reviewed" => docs.metadata[:a11y_reviewed] == "true",
+              "short_name" => docs.short_name,
+              "source" => ref.source_url,
+              "lookbook" => ref.lookbook_url,
+              "parameters" => args,
+            }
+          end
+        end
+
+        private
+
+        def view_context
+          @view_context ||= ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context.tap do |vc|
+            vc.singleton_class.include(Ariadne::Yard::DocsHelper)
+            vc.singleton_class.include(Ariadne::ViewHelper)
+          end
+        end
+
+        def registry
+          @registry ||= Ariadne::Yard::Registry.make
+        end
+      end
+    end
+  end
+end

data/lib/ariadne/static/generate_audited_at.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Ariadne
+  module Static
+    # :nodoc:
+    module GenerateAuditedAt
+      class << self
+        def call
+          Ariadne::BaseComponent.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+            mem[component.to_s] = component.audited_at.to_s
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ariadne/static/generate_constants.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Ariadne
+  module Static
+    # :nodoc:
+    module GenerateConstants
+      class << self
+        def call
+          Ariadne::BaseComponent.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+            mem[component.to_s] = component.constants(false).sort.index_with do |constant|
+              component.const_get(constant)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ariadne/static/generate_previews.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+require "json"
+
+module Ariadne
+  module Static
+    # :nodoc:
+    module GeneratePreviews
+      class << self
+        def call
+          Lookbook.previews.filter_map do |preview|
+            next if preview.preview_class == Ariadne::FormsPreview
+            next if Ariadne::Accessibility.ignore_preview?(preview.preview_class)
+
+            class_name, _ = Ariadne::Yard::DocsHelper.component_and_short_name(preview.preview_class)
+
+            {
+              type: preview.lookup_path.split("/")[1], # e.g. preview.lookup_path => "ariadne/ui/badge"
+              name: preview.name,
+              component: class_name,
+              lookup_path: preview.lookup_path,
+              examples: preview.scenarios.flat_map do |parent_scenario|
+                scenarios = parent_scenario.type == :scenario_group ? parent_scenario.scenarios : [parent_scenario]
+
+                scenarios.map do |scenario|
+                  snapshot_tag = scenario.tags.find { |tag| tag.tag_name == "snapshot" }
+                  snapshot = if snapshot_tag.nil?
+                    "false"
+                  elsif snapshot_tag.text.blank?
+                    "true"
+                  else
+                    snapshot_tag.text
+                  end
+                  {
+                    preview_path: scenario.lookup_path,
+                    name: scenario.name,
+                    snapshot: snapshot,
+                    skip_rules: Ariadne::Accessibility.axe_rules_to_skip(
+                      component: class_name,
+                      scenario_name: scenario.name,
+                    ),
+                  }
+                end
+              end,
+            }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/ariadne/static/generate_statuses.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Ariadne
+  module Static
+    # :nodoc:
+    module GenerateStatuses
+      class << self
+        def call
+          Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+            mem[component.to_s] = component.status.to_s
+          end
+        end
+      end
+    end
+  end
+end