primer_view_components 0.0.51 → 0.0.55

data/lib/primer/classify/functional_colors.rb

@@ -24,9 +24,9 @@ module Primer
           value:,
           mappings:,
           non_functional_prefix:,
+          functional_options:,
           functional_prefix: "",
           number_prefix: "",
-          functional_options:,
           options_without_mappigs: []
         )
           sym_value = value.to_sym

data/lib/primer/classify/utilities.rb

@@ -85,7 +85,7 @@ module Primer
           return { classes: classes } if ENV["RAILS_ENV"] == "production"
 
           obj = {}
-          classes = classes.split(" ")
+          classes = classes.split
           # Loop through all classes supplied and reject ones we find a match for
           # So when we're at the end of the loop we have classes left with any non-system classes.
           classes.reject! do |classname|
@@ -114,6 +114,21 @@ module Primer
           obj
         end
 
+        def classes_to_args(classes)
+          classes_to_hash(classes).map do |key, value|
+            val = case value
+                  when Symbol
+                    ":#{value}"
+                  when String
+                    value.to_json
+                  else
+                    value
+                  end
+
+            "#{key}: #{val}"
+          end.join(", ")
+        end
+
         private
 
         def find_selector(selector)
@@ -160,7 +175,7 @@ module Primer
           unless supported_value?(key, val)
             raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless ENV["RAILS_ENV"] == "production"
 
-            return ""
+            return "#{key.to_s.dasherize}-#{val.to_s.dasherize}"
           end
 
           nil

data/lib/primer/classify/utilities.yml

@@ -22,6 +22,39 @@
   - anim-hover-grow
   :rotate:
   - anim-rotate
+:color:
+  :text_primary:
+  - color-text-primary
+  :text_secondary:
+  - color-text-secondary
+  :text_tertiary:
+  - color-text-tertiary
+  :text_link:
+  - color-text-link
+  :text_success:
+  - color-text-success
+  :text_warning:
+  - color-text-warning
+  :text_danger:
+  - color-text-danger
+  :text_inverse:
+  - color-text-inverse
+  :text_white:
+  - color-text-white
+  :icon_primary:
+  - color-icon-primary
+  :icon_secondary:
+  - color-icon-secondary
+  :icon_tertiary:
+  - color-icon-tertiary
+  :icon_info:
+  - color-icon-info
+  :icon_danger:
+  - color-icon-danger
+  :icon_success:
+  - color-icon-success
+  :icon_warning:
+  - color-icon-warning
 :position:
   :static:
   - position-static
@@ -1220,6 +1253,8 @@
   - py-lg-12
   - py-xl-12
 :word_break:
+  :break_word:
+  - wb-break-word
   :break_all:
   - wb-break-all
 :display:

data/lib/primer/classify/validation.rb

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

data/lib/primer/classify.rb

@@ -4,9 +4,9 @@ require_relative "classify/cache"
 require_relative "classify/flex"
 require_relative "classify/functional_background_colors"
 require_relative "classify/functional_border_colors"
-require_relative "classify/functional_text_colors"
 require_relative "classify/grid"
 require_relative "classify/utilities"
+require_relative "classify/validation"
 
 module Primer
   # :nodoc:
@@ -14,10 +14,6 @@ module Primer
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = %i[text box_shadow].freeze
 
-    INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
-
-    COLOR_KEY = :color
     BG_KEY = :bg
     TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     BOX_SHADOW_KEY = :box_shadow
@@ -90,7 +86,6 @@ module Primer
         BORDER_KEY,
         BORDER_COLOR_KEY,
         BORDER_RADIUS_KEY,
-        COLOR_KEY,
         BG_KEY,
         BOX_SHADOW_KEY,
         CONTAINER_KEY
@@ -109,7 +104,7 @@ module Primer
         extracted_results[:style] = [
           extracted_results.delete(:styles),
           style
-        ].compact.join("").presence
+        ].compact.join.presence
 
         extracted_results
       end
@@ -121,8 +116,8 @@ module Primer
 
         if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
           invalid_class_names =
-            classes.split(" ").each_with_object([]) do |class_name, memo|
-              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) } || Primer::Classify::Utilities.supported_selector?(class_name)
+            classes.split.each_with_object([]) do |class_name, memo|
+              memo << class_name if Primer::Classify::Validation.invalid?(class_name)
             end
 
           raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning." if invalid_class_names.any?
@@ -178,8 +173,6 @@ module Primer
           else
             memo[:classes] << Primer::Classify::FunctionalBackgroundColors.color(val)
           end
-        elsif key == COLOR_KEY
-          memo[:classes] << Primer::Classify::FunctionalTextColors.color(val)
         elsif key == BORDER_KEY
           border_value = if val == true
                            "border"
@@ -214,8 +207,6 @@ module Primer
                             else
                               "color-shadow-#{val.to_s.dasherize}"
                             end
-        else
-          memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
         end
       end
 

data/lib/primer/view_components/constants.rb

@@ -29,7 +29,7 @@ module Primer
         private
 
         def format_hash(values, invert, symbolize)
-          val = values.invert if invert
+          val = invert ? values.invert : values
           # remove defaults
           val = val.except("", nil)
 

data/lib/primer/view_components/linters/argument_mappers/base.rb

@@ -2,6 +2,7 @@
 
 require "primer/view_components/constants"
 require "primer/classify/utilities"
+require "primer/classify/validation"
 require_relative "conversion_error"
 require_relative "system_arguments"
 require_relative "helpers/erb_block"
@@ -46,18 +47,37 @@ module ERBLint
 
         def attribute_to_args(attribute); end
 
-        def map_classes(classes)
-          system_arguments = system_arguments_to_args(classes.value)
-          args = classes_to_args(system_arguments[:classes])
+        def map_classes(classes_node)
+          erb_helper.raise_if_erb_block(classes_node)
 
-          args.merge(system_arguments.except(:classes))
+          system_arguments = system_arguments_to_args(classes_node.value)
+          args = classes_to_args(system_arguments[:classes]&.split || [])
+
+          invalid_classes = args[:classes].select { |class_name| Primer::Classify::Validation.invalid?(class_name) }
+
+          raise ConversionError, "Cannot convert #{'class'.pluralize(invalid_classes.size)} #{invalid_classes.join(',')}" if invalid_classes.present?
+
+          # Using splat to order the arguments in Component's args -> System Args -> custom classes
+          res = {
+            **args.except(:classes),
+            **system_arguments.except(:classes)
+          }
+
+          if args[:classes].present?
+            res = {
+              **res,
+              classes: args[:classes].join(" ").to_json
+            }
+          end
+
+          res
         end
 
-        # Override this with your component's mappings
+        # Override this with your component's mappings, it should return a hash with the component's arguments,
+        # including a `classes` key that will contain all classes that the mapper couldn't handle.
+        # @returns { classes: Array, ... }
         def classes_to_args(classes)
-          raise ConversionError, "Cannot convert classes `#{classes}`" if classes.present?
-
-          {}
+          { classes: classes }
         end
 
         def system_arguments_to_args(classes)
@@ -68,6 +88,12 @@ module ERBLint
             v.is_a?(Symbol) ? ":#{v}" : v
           end
         end
+
+        private
+
+        def erb_helper
+          @erb_helper ||= Helpers::ErbBlock.new
+        end
       end
     end
   end

data/lib/primer/view_components/linters/argument_mappers/button.rb

@@ -7,8 +7,6 @@ module ERBLint
     module ArgumentMappers
       # Maps classes in a button element to arguments for the Button component.
       class Button < Base
-        require "pry"
-
         SCHEME_MAPPINGS = Primer::ViewComponents::Constants.get(
           component: "Primer::ButtonComponent",
           constant: "SCHEME_MAPPINGS",
@@ -35,9 +33,10 @@ module ERBLint
         def attribute_to_args(attribute)
           attr_name = attribute.name
 
-          if attr_name == "disabled"
+          case attr_name
+          when "disabled"
             { disabled: true }
-          elsif attr_name == "type"
+          when "type"
             # button is the default type, so we don't need to do anything.
             return {} if attribute.value == "button"
 
@@ -48,7 +47,7 @@ module ERBLint
         end
 
         def classes_to_args(classes)
-          classes.split(" ").each_with_object({}) do |class_name, acc|
+          classes.each_with_object({ classes: [] }) do |class_name, acc|
             next if class_name == "btn"
 
             if SCHEME_MAPPINGS[class_name] && acc[:scheme].nil?
@@ -60,7 +59,7 @@ module ERBLint
             elsif class_name == "BtnGroup-item"
               acc[:group_item] = true
             else
-              raise ConversionError, "Cannot convert class \"#{class_name}\""
+              acc[:classes] << class_name
             end
           end
         end

data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb

@@ -8,11 +8,12 @@ module ERBLint
       # Maps attributes in the clipboard-copy element to arguments for the ClipboardCopy component.
       class ClipboardCopy < Base
         DEFAULT_TAG = "clipboard-copy"
-        ATTRIBUTES = %w[value].freeze
+        ATTRIBUTES = %w[role tabindex for value id style].freeze
 
         def attribute_to_args(attribute)
-          Helpers::ErbBlock.raise_if_erb_block(attribute)
-          { value: attribute.value.to_json }
+          attr_name = attribute.name
+
+          { attr_name.to_sym => erb_helper.convert(attribute) }
         end
       end
     end

data/lib/primer/view_components/linters/argument_mappers/close_button.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require_relative "base"
+
+module ERBLint
+  module Linters
+    module ArgumentMappers
+      # Maps classes in a close-button element to arguments for the CloseButton component.
+      class CloseButton < Base
+        ATTRIBUTES = %w[type].freeze
+
+        TYPE_OPTIONS = Primer::ViewComponents::Constants.get(
+          component: "Primer::CloseButton",
+          constant: "TYPE_OPTIONS"
+        ).freeze
+
+        DEFAULT_TYPE = Primer::ViewComponents::Constants.get(
+          component: "Primer::CloseButton",
+          constant: "DEFAULT_TYPE"
+        ).freeze
+
+        DEFAULT_CLASS = "close-button"
+
+        def attribute_to_args(attribute)
+          # button is the default type, so we don't need to do anything.
+          return {} if attribute.value == DEFAULT_TYPE
+
+          raise ConversionError, "CloseButton component does not support type \"#{attribute.value}\"" unless TYPE_OPTIONS.include?(attribute.value)
+
+          { type: ":#{attribute.value}" }
+        end
+
+        def classes_to_args(classes)
+          classes.each_with_object({ classes: [] }) do |class_name, acc|
+            next if class_name == DEFAULT_CLASS
+
+            acc[:classes] << class_name
+          end
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/linters/argument_mappers/flash.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require_relative "base"
+
+module ERBLint
+  module Linters
+    module ArgumentMappers
+      # Maps classes in a flash element to arguments for the Flash component.
+      class Flash < Base
+        SCHEME_MAPPINGS = Primer::ViewComponents::Constants.get(
+          component: "Primer::FlashComponent",
+          constant: "SCHEME_MAPPINGS",
+          symbolize: true
+        ).freeze
+
+        def classes_to_args(classes)
+          classes.each_with_object({ classes: [] }) do |class_name, acc|
+            next if class_name == "flash"
+
+            if SCHEME_MAPPINGS[class_name] && acc[:scheme].nil?
+              acc[:scheme] = SCHEME_MAPPINGS[class_name]
+            elsif class_name == "flash-full"
+              acc[:full] = true
+            else
+              acc[:classes] << class_name
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/linters/argument_mappers/helpers/erb_block.rb

@@ -8,15 +8,58 @@ module ERBLint
       module Helpers
         # provides helpers to identify and deal with ERB blocks.
         class ErbBlock
-          class << self
-            def raise_if_erb_block(attribute)
-              raise ERBLint::Linters::ArgumentMappers::ConversionError, "Cannot convert attribute \"#{attribute.name}\" because its value contains an erb block" if any?(attribute)
+          INTERPOLATION_REGEX = /^<%=(?<rb>.*)%>$/.freeze
+
+          def raise_if_erb_block(attribute)
+            raise_error(attribute) if any?(attribute)
+          end
+
+          def convert(attribute)
+            raise_error(attribute) unless interpolation?(attribute)
+
+            if any?(attribute)
+              convert_interpolation(attribute)
+            else
+              attribute.value.to_json
             end
+          end
 
-            def any?(attribute)
-              attribute.value_node&.children&.any? { |n| n.try(:type) == :erb }
+          private
+
+          def interpolation?(attribute)
+            erb_blocks(attribute).all? do |erb|
+              # If the blocks does not have an indicator, it's not an interpolation.
+              erb.children.to_a.compact.any? { |node| node.type == :indicator }
             end
           end
+
+          def raise_error(attribute)
+            raise ERBLint::Linters::ArgumentMappers::ConversionError, "Cannot convert attribute \"#{attribute.name}\" because its value contains an erb block"
+          end
+
+          def any?(attribute)
+            erb_blocks(attribute).any?
+          end
+
+          def basic?(attribute)
+            return false if erb_blocks(attribute).size != 1
+
+            attribute.value.match?(INTERPOLATION_REGEX)
+          end
+
+          def erb_blocks(attribute)
+            (attribute.value_node&.children || []).select { |n| n.try(:type) == :erb }
+          end
+
+          def convert_interpolation(attribute)
+            if basic?(attribute)
+              m = attribute.value.match(INTERPOLATION_REGEX)
+              return m[:rb].strip
+            end
+
+            # we use `source` instead of `value` because it does not convert encoded HTML entities.
+            attribute.value_node.loc.source.gsub("<%=", '#{').gsub("%>", "}")
+          end
         end
       end
     end