ariadne_view_components 0.0.1

data/lib/ariadne/classify/validation.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require_relative "utilities"
+
+module Ariadne
+  class Classify
+    # :nodoc:
+    class Validation
+      INVALID_CLASS_NAME_PREFIXES = /box-shadow-|box_shadow-/
+
+      class << self
+        def invalid?(class_name)
+          class_name.start_with?(INVALID_CLASS_NAME_PREFIXES) || Ariadne::Classify::Utilities.supported_selector?(class_name)
+        end
+      end
+    end
+  end
+end

data/lib/ariadne/classify.rb

@@ -0,0 +1,210 @@
+# frozen_string_literal: true
+
+require_relative "classify/utilities"
+require_relative "classify/validation"
+
+module Ariadne
+  # :nodoc:
+  class Classify
+    FLEX_VALUES = [1, :auto].freeze
+
+    FLEX_WRAP_MAPPINGS = {
+      wrap: "flex-wrap",
+      nowrap: "flex-nowrap",
+      reverse: "flex-wrap-reverse",
+    }.freeze
+
+    FLEX_ALIGN_SELF_VALUES = [:auto, :start, :end, :center, :baseline, :stretch].freeze
+
+    FLEX_DIRECTION_VALUES = [:column, :column_reverse, :row, :row_reverse].freeze
+
+    FLEX_JUSTIFY_CONTENT_VALUES = [:flex_start, :flex_end, :center, :space_between, :space_around].freeze
+
+    FLEX_ALIGN_ITEMS_VALUES = [:flex_start, :flex_end, :center, :baseline, :stretch].freeze
+
+    LOOKUP = Ariadne::Classify::Utilities::UTILITIES
+
+    class << self
+      # Utility for mapping component configuration into Tailwind CSS class names.
+      #
+      # args can contain utility keys that mimic the interface used by
+      # Ariadne components, as well as the special entries :classes
+      # and :style.
+      #
+      # Returns a hash containing two entries. The :classes entry is a string of
+      # Tailwind CSS class names, including any classes given in the :classes entry
+      # in args. The :style entry is the value of the given :style entry given in
+      # args.
+      #
+      #
+      # Example usage:
+      # extract_css_attrs({ mt: 4, py: 2 }) => { classes: "mt-4 py-2", style: nil }
+      # extract_css_attrs(classes: "d-flex", mt: 4, py: 2) => { classes: "d-flex mt-4 py-2", style: nil }
+      # extract_css_attrs(classes: "d-flex", style: "float: left", mt: 4, py: 2) => { classes: "d-flex mt-4 py-2", style: "float: left" }
+      #
+      def call(args)
+        style = nil
+        args = [] if args.blank?
+
+        classes = [].tap do |result|
+          args.each do |key, val|
+            case key
+            when :classes
+              # insert :classes first to avoid huge doc diffs
+              if (class_names = validated_class_names(val))
+                result.unshift(class_names)
+              end
+              next
+            when :style
+              style = val
+              next
+            end
+
+            next unless LOOKUP[key]
+
+            if val.is_a?(Array)
+              # A while loop is ~3.5x faster than Array#each.
+              brk = 0
+              while brk < val.size
+                item = val[brk]
+
+                if item.nil?
+                  brk += 1
+                  next
+                end
+
+                # Believe it or not, three calls to Hash#[] and an inline rescue
+                # are about 30% faster than Hash#dig. It also ensures validate is
+                # only called when necessary, i.e. when the class can't be found
+                # in the lookup table.
+                # rubocop:disable Style/RescueModifier
+                found = (LOOKUP[key][item][brk] rescue nil) || validate(key, item, brk)
+                # rubocop:enable Style/RescueModifier
+                result << found if found
+                brk += 1
+              end
+            else
+              next if val.nil?
+
+              # rubocop:disable Style/RescueModifier
+              found = (LOOKUP[key][val][0] rescue nil) || validate(key, val, 0)
+              # rubocop:enable Style/RescueModifier
+              result << found if found
+            end
+          end
+        end.join(" ")
+
+        result = {}
+
+        result[:class] = classes if classes.present?
+        result[:style] = style if style.present?
+
+        result
+      end
+
+      private def validate(key, val, brk)
+        brk_str = Ariadne::Classify::Utilities::BREAKPOINTS[brk]
+        Ariadne::Classify::Utilities.validate(key, val, brk_str)
+      end
+
+      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
+      end
+
+      private def raise_on_invalid_options?
+        Rails.application.config.ariadne_view_components.raise_on_invalid_options
+      end
+    end
+  end
+end

data/lib/ariadne/view_components/constants.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Ariadne
+  module ViewComponents
+    # A module for constants that are used in the view components.
+    class Constants
+      CONSTANTS = JSON.parse(
+        File.read(
+          File.join(File.dirname(__FILE__), "../../../static/constants.json")
+        )
+      ).freeze
+
+      class << self
+        def get(component:, constant:, invert: true, symbolize: false)
+          values = CONSTANTS.dig(component, constant)
+
+          case values
+          when Hash
+            format_hash(values, invert, symbolize)
+          when Array
+            format_array(values, symbolize)
+          else
+            values
+          end
+        end
+
+        private def format_hash(values, invert, symbolize)
+          val = invert ? values.invert : values
+          # remove defaults
+          val = val.except("", nil)
+
+          return val.transform_values { |v| symbolize_value(v) } if symbolize
+
+          val
+        end
+
+        private def format_array(values, symbolize)
+          val = values.select(&:present?)
+
+          return val.map { |v| symbolize_value(v) } if symbolize
+
+          val
+        end
+
+        private def symbolize_value(value)
+          ":#{value}"
+        end
+      end
+    end
+  end
+end

data/lib/ariadne/view_components/engine.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require "rails/engine"
+require "ariadne/classify/utilities"
+
+module Ariadne
+  module ViewComponents
+    # :nodoc:
+    class Engine < ::Rails::Engine
+      isolate_namespace Ariadne::ViewComponents
+      config.eager_load_paths = ["#{root}/app/components", "#{root}/app/lib"]
+
+      config.ariadne_view_components = ActiveSupport::OrderedOptions.new
+
+      config.ariadne_view_components.raise_on_invalid_options = true
+      config.ariadne_view_components.silence_deprecations = false
+      config.ariadne_view_components.silence_warnings = false
+      config.ariadne_view_components.validate_class_names = true
+      config.ariadne_view_components.raise_on_invalid_aria = true
+
+      initializer "ariadne_view_components.assets" do |app|
+        app.config.assets.precompile += ["ariadne_view_components"] if app.config.respond_to?(:assets)
+      end
+
+      config.after_initialize do |app|
+        ::Ariadne::Classify::Utilities.validate_class_names = app.config.ariadne_view_components.delete(:validate_class_names)
+      end
+    end
+  end
+end

data/lib/ariadne/view_components/linters.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+Dir[File.join(__dir__, "linters", "*.rb")].sort.each { |file| require file }

data/lib/ariadne/view_components/statuses.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Ariadne
+  # :nodoc:
+  module ViewComponents
+    STATUSES = JSON.parse(
+      File.read(
+        File.join(File.dirname(__FILE__), "../../../static/statuses.json")
+      )
+    ).freeze
+  end
+end

data/lib/ariadne/view_components/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module ViewComponents
+    VERSION = "0.0.1"
+  end
+end

data/lib/ariadne/view_components.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require "ariadne/classify"
+require "ariadne/view_components/version"
+require "ariadne/view_components/engine"
+require "ariadne/view_components/constants"
+
+module Ariadne
+  # :nodoc:
+  module ViewComponents
+    DEFAULT_STATIC_PATH = File.expand_path("static")
+    FILE_NAMES = {
+      statuses: "statuses.json",
+      constants: "constants.json",
+      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
+      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
+      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)
+        end
+      end
+    end
+
+    # dump generates the requested stat hash and outputs it to a file.
+    def self.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)
+      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]))
+    end
+  end
+end

data/lib/rubocop/config/default.yml

@@ -0,0 +1,14 @@
+require:
+  - rubocop/cop/ariadne
+
+AllCops:
+  DisabledByDefault: true
+
+Ariadne/SystemArgumentInsteadOfClass:
+  Enabled: true
+
+Ariadne/NoTagMemoize:
+  Enabled: false
+
+Ariadne/AriadneHeroicon:
+  Enabled: true

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

@@ -0,0 +1,252 @@
+# frozen_string_literal: true
+
+require "rubocop"
+require "ariadne/classify/utilities"
+require "ariadne/classify/validation"
+
+# :nocov:
+module RuboCop
+  module Cop
+    module Ariadne
+      # This cop ensures that components use System Arguments instead of CSS classes.
+      #
+      # bad
+      # heroicon(icon: :icon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)
+      # heroicon(icon: "icon", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)
+      # heroicon(icon: "icon-with-dashes")
+      # heroicon(icon: @ivar)
+      # heroicon(icon: condition > "icon" : "other-icon")
+      #
+      # good
+      # ariadne_heroicon(icon: :icon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)
+      # ariadne_heroicon(icon: :"icon-with-dashes", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)
+      # ariadne_heroicon(icon: @ivar, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)
+      # ariadne_heroicon(icon: condition > "icon" : "other-icon", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)
+      class AriadneHeroicon < RuboCop::Cop::Cop
+        INVALID_MESSAGE = <<~STR
+          Replace the `heroicon` helper with `ariadne_heroicon`. See https://ariadne.style/view-components/components/heroicon for details.
+        STR
+
+        ICON_ATTRIBUTES = ["icon", "variant"].freeze
+        SIZE_ATTRIBUTES = ["height", "width", "size"].freeze
+        STRING_ATTRIBUTES = ["aria-", "data-"].freeze
+        REST_ATTRIBUTES = ["title"].freeze
+        VALID_ATTRIBUTES = [*ICON_ATTRIBUTES, *SIZE_ATTRIBUTES, *STRING_ATTRIBUTES, *REST_ATTRIBUTES, "class"].freeze
+
+        STRING_ATTRIBUTE_REGEX = Regexp.union(STRING_ATTRIBUTES).freeze
+        ATTRIBUTE_REGEX = Regexp.union(VALID_ATTRIBUTES).freeze
+        INVALID_ATTRIBUTE = -1
+
+        def on_send(node)
+          return unless node.method_name == :heroicon
+          return unless node.arguments?
+
+          kwargs = kwargs(node)
+
+          return unless kwargs.type == :hash
+
+          attributes = kwargs.keys.map(&:value)
+
+          # Don't convert unknown attributes
+          return unless attributes.all? { |attribute| attribute.match?(ATTRIBUTE_REGEX) }
+
+          # Can't convert size
+          return if heroicon_size_attributes(kwargs) == INVALID_ATTRIBUTE
+
+          # find class pair
+          classes = classes(kwargs)
+
+          return if classes == INVALID_ATTRIBUTE
+
+          # check if classes are convertible
+          if classes.present?
+            attributes = ::Ariadne::Classify::Utilities.classes_to_hash(classes)
+            invalid_classes = (attributes[:classes]&.split(" ") || []).select { |class_name| ::Ariadne::Classify::Validation.invalid?(class_name) }
+
+            # Uses system argument that can't be converted
+            return if invalid_classes.present?
+          end
+
+          add_offense(node, message: INVALID_MESSAGE)
+        end
+
+        def autocorrect(node)
+          lambda do |corrector|
+            kwargs = kwargs(node)
+
+            # Converting arguments for the component
+            classes = classes(kwargs)
+            icon_and_variant = transform_icon_and_variant(kwargs)
+            size_attributes = transform_sizes(kwargs)
+            rest_attributes = rest_args(kwargs)
+
+            args = arguments_as_string(node, icon_and_variant, size_attributes, rest_attributes, classes)
+
+            if node.dot?
+              corrector.replace(node.loc.expression, "#{node.receiver.source}.ariadne_heroicon(#{args})")
+            else
+              corrector.replace(node.loc.expression, "ariadne_heroicon(#{args})")
+            end
+          end
+        end
+
+        private def transform_icon_and_variant(kwargs)
+          kwargs.pairs.each_with_object({}) do |pair, h|
+            next unless ICON_ATTRIBUTES.include?(pair.key.value.to_s)
+
+            # We only support symbol or string values...
+            h[pair.key.value] = case pair.value.type
+            when :str
+              { value: pair.value.value.to_s, type: :str }
+            when :sym
+              { value: pair.value.source.to_sym, type: :sym }
+            else # ... but calling source will also get when you want, for :const, :if, etc.
+              { value: pair.value.source, type: :other }
+            end
+          end
+        end
+
+        private def transform_sizes(kwargs)
+          attributes = heroicon_size_attributes(kwargs)
+
+          attributes.transform_values do |size|
+            if size.between?(10, 16)
+              ""
+            elsif size.between?(22, 26)
+              ":medium"
+            else
+              size
+            end
+          end
+        end
+
+        private def rest_args(kwargs)
+          kwargs.pairs.each_with_object({}) do |pair, h|
+            next unless REST_ATTRIBUTES.include?(pair.key.value.to_s)
+
+            h[pair.key.value] = pair.value.source
+          end
+        end
+
+        private def heroicon_size_attributes(kwargs)
+          kwargs.pairs.each_with_object({}) do |pair, h|
+            next unless SIZE_ATTRIBUTES.include?(pair.key.value.to_s)
+
+            # We only support string or int values.
+            case pair.value.type
+            when :int
+              h[pair.key.value] = pair.value.source.to_i
+            when :str
+              h[pair.key.value] = pair.value.value.to_i
+            else
+              return INVALID_ATTRIBUTE
+            end
+          end
+        end
+
+        private def classes(kwargs)
+          # find class pair
+          class_arg = kwargs.pairs.find { |kwarg| kwarg.key.value == :class }
+
+          return if class_arg.blank?
+          return INVALID_ATTRIBUTE unless class_arg.value.type == :str
+
+          class_arg.value.value
+        end
+
+        private def arguments_as_string(node, icon_and_variant, size_attributes, rest_attributes, classes)
+          icon = case icon_and_variant[:icon][:type]
+          when :str
+            "icon: \"#{icon_and_variant[:icon][:value]}\""
+          when :sym, :other
+            "icon: #{icon_and_variant[:icon][:value]}"
+          end
+          variant = case icon_and_variant[:variant][:type]
+          when :str
+            "variant: \"#{icon_and_variant[:variant][:value]}\""
+          when :sym, :other
+            "variant: #{icon_and_variant[:variant][:value]}"
+          end
+
+          args = "#{icon}, #{variant}"
+
+          size_args = size_attributes_to_string(size_attributes)
+          string_args = string_args_to_string(node)
+          rest_args = rest_args_to_string(rest_attributes)
+
+          args = "#{args}, #{size_args}" if size_args.present?
+          args = "#{args}, #{rest_args}" if rest_args.present?
+          args = "#{args}, #{utilities_args(classes)}" if classes.present?
+          args = "#{args}, #{string_args}" if string_args.present?
+
+          args
+        end
+
+        private def rest_args_to_string(attrs)
+          return if attrs.blank?
+
+          attrs.map do |key, value|
+            "#{key}: #{value}"
+          end.join(", ")
+        end
+
+        private def utilities_args(classes)
+          args = ::Ariadne::Classify::Utilities.classes_to_hash(classes)
+
+          color = case args[:color]
+          when :text_white
+            :on_emphasis
+          when Symbol
+            args[:color].to_s.gsub("text_", "icon_").to_sym
+          end
+
+          args[:color] = color if color
+
+          ::Ariadne::Classify::Utilities.hash_to_args(args)
+        end
+
+        private def size_attributes_to_string(size_attributes)
+          # 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")
+
+          size_attributes.map do |key, value|
+            "#{key}: #{value}"
+          end.join(", ")
+        end
+
+        private def string_args_to_string(node)
+          kwargs = kwargs(node)
+
+          args = kwargs.pairs.each_with_object([]) do |pair, acc|
+            next unless pair.key.value.to_s.match?(STRING_ATTRIBUTE_REGEX)
+
+            key =  pair.key.value.to_s == "data-test-selector" ? "test_selector" : "\"#{pair.key.value}\""
+            acc << "#{key}: #{pair.value.source}"
+          end
+
+          args.join(",")
+        end
+
+        Kwargs = Struct.new(:keys, :pairs, :type)
+        def kwargs(node)
+          return node.arguments.last if node.arguments.size > 1
+
+          keys = node.arguments.first.keys
+          pairs = node.arguments.first.pairs
+          Kwargs.new(keys, pairs, :hash)
+        end
+
+        private def icon(node)
+          return node.source unless node.type == :str
+          return ":#{node.value}" unless node.value.include?("-")
+
+          # If the icon contains `-` we need to cast the string as a symbol
+          # E.g: `arrow-down` becomes `:"arrow-down"`
+          ":#{node.source}"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "rubocop"
+require "ariadne/view_components/statuses"
+require_relative "../../../../app/lib/ariadne/view_helper"
+
+module RuboCop
+  module Cop
+    module Ariadne
+      # :nodoc:
+      class BaseCop < RuboCop::Cop::Cop
+        # We only verify SystemArguments if it's a `.new` call on a component or
+        # a ViewHeleper call.
+        def valid_node?(node)
+          return if node.nil?
+
+          view_helpers.include?(node.method_name) || (node.method_name == :new && !node.receiver.nil? && ::Ariadne::ViewComponents::STATUSES.key?(node.receiver.const_name))
+        end
+
+        private def view_helpers
+          ::Ariadne::ViewHelper::HELPERS.keys.map { |key| "ariadne_#{key}".to_sym }
+        end
+      end
+    end
+  end
+end