primer_view_components 0.0.44 → 0.0.45

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

@@ -7,7 +7,7 @@ module ERBLint
     module ArgumentMappers
       # Maps element attributes to system arguments.
       class SystemArguments
-        STRING_PARAETERS = %w[aria- data-].freeze
+        STRING_PARAMETERS = %w[aria- data-].freeze
         TEST_SELECTOR_REGEX = /test_selector\((?<selector>.+)\)$/.freeze
 
         attr_reader :attribute
@@ -29,7 +29,9 @@ module ERBLint
             { test_selector: m[:selector].tr("'", '"') }
           elsif attr_name == "data-test-selector"
             { test_selector: attribute.value.to_json }
-          elsif attr_name.start_with?(*STRING_PARAETERS)
+          elsif attr_name.start_with?(*STRING_PARAMETERS)
+            raise ConversionError, "Cannot convert attribute \"#{attr_name}\" because its value contains an erb block" if attribute.value_node&.children&.any? { |n| n.try(:type) == :erb }
+
             # if attribute has no value_node, it means it is a boolean attribute.
             { "\"#{attr_name}\"" => attribute.value_node ? attribute.value.to_json : true }
           else

data/lib/primer/view_components/linters/button_component_migration_counter.rb

@@ -21,14 +21,18 @@ module ERBLint
         nil
       end
 
-      def message(tag)
-        args = map_arguments(tag)
+      def correction(args)
+        return nil if args.nil?
 
+        correction = "<%= render Primer::ButtonComponent.new"
+        correction += "(#{args})" if args.present?
+        "#{correction} do %>"
+      end
+
+      def message(args)
         return MESSAGE if args.nil?
 
-        msg = "#{MESSAGE}\n\nTry using:\n\n<%= render Primer::ButtonComponent.new"
-        msg += "(#{args})" if args.present?
-        "#{msg} %>\n\nInstead of:\n"
+        "#{MESSAGE}\n\nTry using:\n\n#{correction(args)}\n\nInstead of:\n"
       end
     end
   end

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

@@ -7,19 +7,50 @@ module ERBLint
   module Linters
     # Helper methods for linting ERB.
     module Helpers
+      # from https://github.com/Shopify/erb-lint/blob/6179ee2d9d681a6ec4dd02351a1e30eefa748d3d/lib/erb_lint/linters/self_closing_tag.rb
+      SELF_CLOSING_TAGS = %w[
+        area base br col command embed hr input keygen
+        link menuitem meta param source track wbr img
+      ].freeze
+
       def self.included(base)
         base.include(ERBLint::LinterRegistry)
 
         define_method "run" do |processed_source|
-          tags(processed_source).each do |tag|
+          @offenses_not_corrected = 0
+          tags = tags(processed_source)
+          tag_tree = build_tag_tree(tags)
+
+          tags.each do |tag|
             next if tag.closing?
             next unless self.class::TAGS&.include?(tag.name)
 
-            classes = tag.attributes["class"]&.value&.split(" ")
+            classes = tag.attributes["class"]&.value&.split(" ") || []
+
+            tag_tree[tag][:offense] = false
 
-            next if self.class::CLASSES.any? && (classes & self.class::CLASSES).blank?
+            next unless self.class::CLASSES.blank? || (classes & self.class::CLASSES).any?
 
-            generate_offense(self.class, processed_source, tag, message(tag))
+            args = map_arguments(tag)
+            correction = correction(args)
+
+            tag_tree[tag][:offense] = true
+            tag_tree[tag][:correctable] = !correction.nil?
+            tag_tree[tag][:message] = message(args)
+            tag_tree[tag][:correction] = correction
+          end
+
+          tag_tree.each do |tag, h|
+            next unless h[:offense]
+
+            # We always fix the offenses using blocks. The closing tag corresponds to `<% end %>`.
+            if h[:correctable]
+              add_offense(tag.loc, h[:message], h[:correction])
+              add_offense(h[:closing].loc, h[:message], "<% end %>")
+            else
+              @offenses_not_corrected += 1
+              generate_offense(self.class, processed_source, tag, h[:message])
+            end
           end
 
           counter_correct?(processed_source)
@@ -29,12 +60,10 @@ module ERBLint
           return unless offense.context
 
           lambda do |corrector|
-            if processed_source.file_content.include?("erblint:counter #{self.class.name.demodulize}")
-              # update the counter if exists
-              corrector.replace(offense.source_range, offense.context)
+            if offense.context.include?(counter_disable)
+              correct_counter(corrector, processed_source, offense)
             else
-              # add comment with counter if none
-              corrector.insert_before(processed_source.source_buffer.source_range, "#{offense.context}\n")
+              corrector.replace(offense.source_range, offense.context)
             end
           end
         end
@@ -42,10 +71,77 @@ module ERBLint
 
       private
 
+      # Override this function to convert the HTML element attributes to argument for a component.
+      #
+      # @return [Hash] if possible to map all attributes to arguments.
+      # @return [Nil] if cannot map to arguments.
+      def map_arguments(_tag)
+        nil
+      end
+
+      # Override this function to define how to autocorrect an element to a component.
+      #
+      # @return [String] with the text to replace the HTML element if possible to correct.
+      # @return [Nil] if cannot correct element.
+      def correction(_tag)
+        nil
+      end
+
+      # Override this function to customize the linter message.
+      #
+      # @return [String] message to show on linter error.
       def message(_tag)
         self.class::MESSAGE
       end
 
+      def counter_disable
+        "erblint:counter #{self.class.name.demodulize}"
+      end
+
+      def correct_counter(corrector, processed_source, offense)
+        if processed_source.file_content.include?(counter_disable)
+          # update the counter if exists
+          corrector.replace(offense.source_range, offense.context)
+        else
+          # add comment with counter if none
+          corrector.insert_before(processed_source.source_buffer.source_range, "#{offense.context}\n")
+        end
+      end
+
+      # This assumes that the AST provided represents valid HTML, where each tag has a corresponding closing tag.
+      # From the tags, we build a structured tree which represents the tag hierarchy.
+      # With this, we are able to know where the tags start and end.
+      def build_tag_tree(tags)
+        tag_tree = {}
+        current_opened_tag = nil
+
+        tags.each do |tag|
+          if tag.closing?
+            if current_opened_tag && tag.name == current_opened_tag.name
+              tag_tree[current_opened_tag][:closing] = tag
+              current_opened_tag = tag_tree[current_opened_tag][:parent]
+            end
+
+            next
+          end
+
+          self_closing = self_closing?(tag)
+
+          tag_tree[tag] = {
+            closing: self_closing ? tag : nil,
+            parent: current_opened_tag
+          }
+
+          current_opened_tag = tag unless self_closing
+        end
+
+        tag_tree
+      end
+
+      def self_closing?(tag)
+        tag.self_closing? || SELF_CLOSING_TAGS.include?(tag.name)
+      end
+
       def tags(processed_source)
         processed_source.parser.nodes_with_type(:tag).map { |tag_node| BetterHtml::Tree::Tag.from_node(tag_node) }
       end
@@ -54,7 +150,6 @@ module ERBLint
         comment_node = nil
         expected_count = 0
         rule_name = self.class.name.match(/:?:?(\w+)\Z/)[1]
-        offenses_count = @offenses.length
 
         processed_source.parser.ast.descendants(:erb).each do |node|
           indicator_node, _, code_node, = *node
@@ -62,29 +157,32 @@ module ERBLint
           comment = code_node&.loc&.source&.strip
 
           if indicator == "#" && comment.start_with?("erblint:count") && comment.match(rule_name)
-            comment_node = code_node
+            comment_node = node
             expected_count = comment.match(/\s(\d+)\s?$/)[1].to_i
           end
         end
 
-        if offenses_count.zero?
-          add_offense(processed_source.to_source_range(comment_node.loc), "Unused erblint:count comment for #{rule_name}") if comment_node
+        if @offenses_not_corrected.zero?
+          # have to adjust to get `\n` so we delete the whole line
+          add_offense(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:count comment for #{rule_name}", "") if comment_node
           return
         end
 
         first_offense = @offenses[0]
 
         if comment_node.nil?
-          add_offense(processed_source.to_source_range(first_offense.source_range), "#{rule_name}: If you must, add <%# erblint:counter #{rule_name} #{offenses_count} %> to bypass this check.", "<%# erblint:counter #{rule_name} #{offenses_count} %>")
-        else
+          add_offense(processed_source.to_source_range(first_offense.source_range), "#{rule_name}: If you must, add <%# erblint:counter #{rule_name} #{@offenses_not_corrected} %> to bypass this check.", "<%# erblint:counter #{rule_name} #{@offenses_not_corrected} %>")
+        elsif expected_count != @offenses_not_corrected
+          add_offense(processed_source.to_source_range(comment_node.loc), "Incorrect erblint:counter number for #{rule_name}. Expected: #{expected_count}, actual: #{@offenses_not_corrected}.", "<%# erblint:counter #{rule_name} #{@offenses_not_corrected} %>")
+        # the only offenses remaining are not autocorrectable, so we can ignore them
+        elsif expected_count == @offenses_not_corrected && @offenses.size == @offenses_not_corrected
           clear_offenses
-          add_offense(processed_source.to_source_range(comment_node.loc), "Incorrect erblint:counter number for #{rule_name}. Expected: #{expected_count}, actual: #{offenses_count}.", " erblint:counter #{rule_name} #{offenses_count} ") if expected_count != offenses_count
         end
       end
 
       def generate_offense(klass, processed_source, tag, message = nil, replacement = nil)
         message ||= klass::MESSAGE
-        klass_name = klass.name.split("::")[-1]
+        klass_name = klass.name.demodulize
         offense = ["#{klass_name}:#{message}", tag.node.loc.source].join("\n")
         add_offense(processed_source.to_source_range(tag.loc), offense, replacement)
       end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 44
+      PATCH = 45
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/utilities.rake

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+namespace :utilities do
+  task :build do
+    require "yaml"
+    require "json"
+    require File.expand_path("./../../demo/config/environment.rb", __dir__)
+
+    # Keys that are looked for to be included in the utilities.yml file
+    SUPPORTED_KEYS = %i[
+      hide
+      float
+      m mt mr mb ml mx my
+      p pt pr pb pl px py
+    ].freeze
+
+    # Replacements for some classnames that end up being a different argument key
+    REPLACEMENT_KEYS = {
+      "^v-align" => "vertical_align",
+      "^d" => "display",
+      "^wb" => "word_break",
+      "^v" => "visibility"
+    }.freeze
+
+    BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
+
+    css_data =
+      JSON.parse(
+        File.read(
+          File.join(
+            __FILE__.split("lib/tasks/utilities.rake")[0], "/node_modules/@primer/css/dist/stats/utilities.json"
+          )
+        )
+      )["selectors"]["values"]
+
+    output = {}
+
+    css_data.each do |selector|
+      selector.sub!(/^./, "")
+      # Next if selector has ancestors or sibling selectors
+      next if selector.match?(/[:><~\[\.]/)
+      next unless SUPPORTED_KEYS.any? { |key| selector.start_with?("#{key}-") }
+
+      # Dupe so we still have the selector at the end of slicing it up
+      classname = selector.dup
+      key = ""
+
+      # Look for a replacement key
+      REPLACEMENT_KEYS.each do |k, v|
+        next unless classname.match?(Regexp.new(k))
+
+        key = v
+        classname.sub!(Regexp.new(k + "-"), "")
+      end
+
+      # If we didn't find a replacement, grab the first text before hyphen
+      if classname == selector
+        key = classname.split("-").first
+        classname.sub!(/^[^-]+-/, "")
+      end
+
+      # Check if the next bit of the classname is a breakpoint
+      if classname.match?(/^(sm-|md-|lg-|xl-)/)
+        breakpoint = classname.split("-").first
+        classname.sub!(/^[^-]+-/, "")
+      end
+
+      # Change the rest from hypens to underscores
+      classname.sub!(/\-/, "_")
+
+      # convert padding/margin negative values ie n7 to -7
+      classname.sub!(/^n/, "-") if classname.match?(/^n[0-9]/)
+
+      key = key.to_sym
+
+      classname = if classname.match?(/\A[-+]?[0-9]+\z/)
+                    classname.to_i
+                  else
+                    classname.to_sym
+                  end
+
+      if output[key].nil?
+        output[key] = { classname => Array.new(5, nil) }
+      elsif output[key][classname].nil?
+        output[key][classname] = Array.new(5, nil)
+      end
+
+      output[key][classname][BREAKPOINTS.index(breakpoint)] = selector
+    end
+
+    output.transform_values! do |x|
+      x.transform_values { |y| y.reverse.drop_while(&:nil?).reverse }
+    end
+
+    File.open("app/lib/primer/classify/utilities.yml", "w") do |f|
+      f.puts YAML.dump(output)
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.44
+  version: 0.0.45
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-06-10 00:00:00.000000000 Z
+date: 2021-06-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -356,9 +356,9 @@ files:
 - app/components/primer/auto_complete/auto_complete.html.erb
 - app/components/primer/auto_complete/auto_complete.js
 - app/components/primer/auto_complete/auto_complete.ts
-- app/components/primer/auto_complete/auto_component.d.ts
-- app/components/primer/auto_complete/auto_component.js
 - app/components/primer/auto_complete/item.rb
+- app/components/primer/auto_complete_component.d.ts
+- app/components/primer/auto_complete_component.js
 - app/components/primer/avatar_component.rb
 - app/components/primer/avatar_stack_component.html.erb
 - app/components/primer/avatar_stack_component.rb
@@ -386,6 +386,8 @@ files:
 - app/components/primer/counter_component.rb
 - app/components/primer/details_component.html.erb
 - app/components/primer/details_component.rb
+- app/components/primer/details_menu_component.d.ts
+- app/components/primer/details_menu_component.js
 - app/components/primer/dropdown.d.ts
 - app/components/primer/dropdown.html.erb
 - app/components/primer/dropdown.js
@@ -465,7 +467,8 @@ files:
 - app/lib/primer/classify/functional_colors.rb
 - app/lib/primer/classify/functional_text_colors.rb
 - app/lib/primer/classify/grid.rb
-- app/lib/primer/classify/spacing.rb
+- app/lib/primer/classify/utilities.rb
+- app/lib/primer/classify/utilities.yml
 - app/lib/primer/fetch_or_fallback_helper.rb
 - app/lib/primer/join_style_arguments_helper.rb
 - app/lib/primer/octicon/cache.rb
@@ -486,6 +489,7 @@ files:
 - lib/tasks/coverage.rake
 - lib/tasks/docs.rake
 - lib/tasks/statuses.rake
+- lib/tasks/utilities.rake
 - lib/yard/docs_helper.rb
 - lib/yard/renders_many_handler.rb
 - lib/yard/renders_one_handler.rb
@@ -510,7 +514,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.1.2
 signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System

data/app/lib/primer/classify/spacing.rb

@@ -1,63 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  class Classify
-    # Handler for PrimerCSS spacing classes.
-    class Spacing
-      BASE_OPTIONS = (0..6).to_a.freeze
-      BASE_MAPPINGS = {
-        my: BASE_OPTIONS,
-        pb: BASE_OPTIONS,
-        pl: BASE_OPTIONS,
-        pr: BASE_OPTIONS,
-        pt: BASE_OPTIONS,
-        px: BASE_OPTIONS,
-        py: BASE_OPTIONS
-      }.freeze
-
-      MARGIN_DIRECTION_OPTIONS = [*(-6..-1), *BASE_OPTIONS].freeze
-      MARGIN_DIRECTION_MAPPINGS = {
-        mb: MARGIN_DIRECTION_OPTIONS,
-        ml: MARGIN_DIRECTION_OPTIONS,
-        mr: MARGIN_DIRECTION_OPTIONS,
-        mt: MARGIN_DIRECTION_OPTIONS
-      }.freeze
-
-      AUTO_OPTIONS = [*BASE_OPTIONS, :auto].freeze
-      AUTO_MAPPINGS = {
-        m: AUTO_OPTIONS,
-        mx: AUTO_OPTIONS
-      }.freeze
-
-      RESPONSIVE_OPTIONS = [*BASE_OPTIONS, :responsive].freeze
-      RESPONSIVE_MAPPINGS = {
-        p: RESPONSIVE_OPTIONS
-      }.freeze
-
-      MAPPINGS = {
-        **BASE_MAPPINGS,
-        **MARGIN_DIRECTION_MAPPINGS,
-        **AUTO_MAPPINGS,
-        **RESPONSIVE_MAPPINGS
-      }.freeze
-      KEYS = MAPPINGS.keys.freeze
-
-      class << self
-        def spacing(key, val, breakpoint)
-          validate(key, val) unless Rails.env.production?
-
-          return "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}" if val.is_a?(Numeric) && val.negative?
-
-          "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
-        end
-
-        private
-
-        def validate(key, val)
-          raise ArgumentError, "#{key} is not a spacing key" unless KEYS.include?(key)
-          raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of  #{MAPPINGS[key]}" unless MAPPINGS[key].include?(val)
-        end
-      end
-    end
-  end
-end