primer_view_components 0.0.61 → 0.0.62

data/lib/primer/classify/utilities.yml

@@ -47,38 +47,6 @@
   - color-fg-on-emphasis
   :inherit:
   - color-fg-inherit
-  :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
 :bg:
   :default:
   - color-bg-default
@@ -118,30 +86,6 @@
   - color-bg-sponsors
   :sponsors_emphasis:
   - color-bg-sponsors-emphasis
-  :canvas:
-  - color-bg-canvas
-  :canvas_inverse:
-  - color-bg-canvas-inverse
-  :canvas_inset:
-  - color-bg-canvas-inset
-  :primary:
-  - color-bg-primary
-  :secondary:
-  - color-bg-secondary
-  :tertiary:
-  - color-bg-tertiary
-  :info:
-  - color-bg-info
-  :info_inverse:
-  - color-bg-info-inverse
-  :danger_inverse:
-  - color-bg-danger-inverse
-  :success_inverse:
-  - color-bg-success-inverse
-  :warning:
-  - color-bg-warning
-  :warning_inverse:
-  - color-bg-warning-inverse
 :border_color:
   :default:
   - color-border-default
@@ -177,18 +121,6 @@
   - color-border-sponsors
   :sponsors_emphasis:
   - color-border-sponsors-emphasis
-  :primary:
-  - color-border-primary
-  :secondary:
-  - color-border-secondary
-  :tertiary:
-  - color-border-tertiary
-  :inverse:
-  - color-border-inverse
-  :info:
-  - color-border-info
-  :warning:
-  - color-border-warning
 :position:
   :static:
   - position-static
@@ -1545,3 +1477,195 @@
   - col-md-12
   - col-lg-12
   - col-xl-12
+:font_size:
+  '00':
+  - f00
+  1:
+  - f1
+  2:
+  - f2
+  3:
+  - f3
+  4:
+  - f4
+  5:
+  - f5
+  6:
+  - f6
+  :small:
+  - text-small
+  :normal:
+  - text-normal
+:top:
+  false:
+  - top-0
+:bottom:
+  false:
+  - bottom-0
+:left:
+  false:
+  - left-0
+:right:
+  false:
+  - right-0
+:underline:
+  true:
+  - text-underline
+  false:
+  - no-underline
+:font_family:
+  :mono:
+  - text-mono
+:font_style:
+  :italic:
+  - text-italic
+:text_transform:
+  :uppercase:
+  - text-uppercase
+:text_align:
+  :right:
+  - text-right
+  :left:
+  - text-left
+  :center:
+  - text-center
+:font_weight:
+  :light:
+  - text-light
+  :normal:
+  - text-normal
+  :bold:
+  - text-bold
+  :semibold:
+  - text-semibold
+  :emphasized:
+  - text-emphasized
+:box_shadow:
+  true:
+  - color-shadow-small
+  :small:
+  - color-shadow-small
+  :medium:
+  - color-shadow-medium
+  :large:
+  - color-shadow-large
+  :extra_large:
+  - color-shadow-extra-large
+  :none:
+  - box-shadow-none
+  false:
+  - box-shadow-none
+:border:
+  :left:
+  - border-left
+  :top:
+  - border-top
+  :bottom:
+  - border-bottom
+  :right:
+  - border-right
+  :y:
+  - border-y
+  :x:
+  - border-x
+  true:
+  - border
+:border_top:
+  0:
+  - border-top-0
+:border_bottom:
+  0:
+  - border-bottom-0
+:border_left:
+  0:
+  - border-left-0
+:border_right:
+  0:
+  - border-right-0
+:border_radius:
+  0:
+  - rounded-0
+  1:
+  - rounded-1
+  2:
+  - rounded-2
+  3:
+  - rounded-3
+:justify_content:
+  :flex_start:
+  - flex-justify-start
+  :flex_end:
+  - flex-justify-end
+  :center:
+  - flex-justify-center
+  :space_between:
+  - flex-justify-between
+  :space_around:
+  - flex-justify-around
+:align_items:
+  :flex_start:
+  - flex-items-start
+  :flex_end:
+  - flex-items-end
+  :center:
+  - flex-items-center
+  :baseline:
+  - flex-items-baseline
+  :stretch:
+  - flex-items-stretch
+:flex_wrap:
+  :wrap:
+  - flex-wrap
+  :nowrap:
+  - flex-nowrap
+  :reverse:
+  - flex-wrap-reverse
+:direction:
+  :column:
+  - flex-column
+  - flex-sm-column
+  - flex-md-column
+  - flex-lg-column
+  - flex-xl-column
+  :column_reverse:
+  - flex-column-reverse
+  - flex-sm-column-reverse
+  - flex-md-column-reverse
+  - flex-lg-column-reverse
+  - flex-xl-column-reverse
+  :row:
+  - flex-row
+  - flex-sm-row
+  - flex-md-row
+  - flex-lg-row
+  - flex-xl-row
+  :row_reverse:
+  - flex-row-reverse
+  - flex-sm-row-reverse
+  - flex-md-row-reverse
+  - flex-lg-row-reverse
+  - flex-xl-row-reverse
+:flex:
+  1:
+  - flex-1
+  :auto:
+  - flex-auto
+:align_self:
+  :auto:
+  - flex-self-auto
+  :start:
+  - flex-self-start
+  :end:
+  - flex-self-end
+  :center:
+  - flex-self-center
+  :baseline:
+  - flex-self-baseline
+  :stretch:
+  - flex-self-stretch
+:flex_grow:
+  0:
+  - flex-grow-0
+:flex_shrink:
+  0:
+  - flex-shrink-0

data/lib/primer/classify.rb

@@ -1,221 +1,135 @@
 # frozen_string_literal: true
 
-require_relative "classify/cache"
-require_relative "classify/flex"
 require_relative "classify/utilities"
 require_relative "classify/validation"
 
 module Primer
   # :nodoc:
   class Classify
-    # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = %i[text box_shadow].freeze
-
-    TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
-    BOX_SHADOW_KEY = :box_shadow
-
-    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
-
-    BOOLEAN_MAPPINGS = {
-      underline: {
-        mappings: [
-          {
-            value: true,
-            css_class: "text-underline"
-          },
-          {
-            value: false,
-            css_class: "no-underline"
-          }
-        ]
-      },
-      top: {
-        mappings: [
-          {
-            value: false,
-            css_class: "top-0"
-          }
-        ]
-      },
-      bottom: {
-        mappings: [
-          {
-            value: false,
-            css_class: "bottom-0"
-          }
-        ]
-      },
-      left: {
-        mappings: [
-          {
-            value: false,
-            css_class: "left-0"
-          }
-        ]
-      },
-      right: {
-        mappings: [
-          {
-            value: false,
-            css_class: "right-0"
-          }
-        ]
-      }
+    FLEX_VALUES = [1, :auto].freeze
+
+    FLEX_WRAP_MAPPINGS = {
+      wrap: "flex-wrap",
+      nowrap: "flex-nowrap",
+      reverse: "flex-wrap-reverse"
     }.freeze
-    BORDER_KEY = :border
-    BORDER_MARGIN_KEYS = %i[border_top border_bottom border_left border_right].freeze
-    BORDER_RADIUS_KEY = :border_radius
-    TYPOGRAPHY_KEYS = [:font_size].freeze
-    VALID_KEYS = (
-      Primer::Classify::Utilities::UTILITIES.keys +
-      CONCAT_KEYS +
-      BOOLEAN_MAPPINGS.keys +
-      BORDER_MARGIN_KEYS +
-      TYPOGRAPHY_KEYS +
-      TEXT_KEYS +
-      Primer::Classify::Flex::KEYS +
-      [
-        BORDER_KEY,
-        BORDER_RADIUS_KEY,
-        BOX_SHADOW_KEY
-      ]
-    ).freeze
 
-    class << self
-      def call(classes: "", style: nil, **args)
-        extract_css_attrs(args).tap do |extracted_results|
-          classes = +"#{validated_class_names(classes)} #{extracted_results[:class]}"
-          classes.strip!
-          extracted_results[:class] = presence(classes)
-
-          styles = "#{extracted_results[:style]}#{style}"
-          extracted_results[:style] = presence(styles)
-        end
-      end
+    FLEX_ALIGN_SELF_VALUES = [:auto, :start, :end, :center, :baseline, :stretch].freeze
 
-      private
+    FLEX_DIRECTION_VALUES = [:column, :column_reverse, :row, :row_reverse].freeze
 
-      # do this instead of using Rails' presence/blank?, which are a lot slower
-      def presence(obj)
-        # rubocop:disable Rails/Blank
-        !obj || obj.empty? ? nil : obj
-        # rubocop:enable Rails/Blank
-      end
+    FLEX_JUSTIFY_CONTENT_VALUES = [:flex_start, :flex_end, :center, :space_between, :space_around].freeze
 
-      def validated_class_names(classes)
-        return if classes.blank?
+    FLEX_ALIGN_ITEMS_VALUES = [:flex_start, :flex_end, :center, :baseline, :stretch].freeze
 
-        if raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
-          invalid_class_names =
-            classes.split.each_with_object([]) do |class_name, memo|
-              memo << class_name if Primer::Classify::Validation.invalid?(class_name)
-            end
+    LOOKUP = Primer::Classify::Utilities::UTILITIES
 
-          if invalid_class_names.any?
-            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."
-          end
-        end
-
-        classes
-      end
-
-      # NOTE: This is a fairly naive implementation that we're building as we go.
-      # Feel free to refactor as this is thoroughly tested.
+    class << self
+      # Utility for mapping component configuration into Primer CSS class names.
       #
-      # Utility for mapping component configuration into Primer CSS class names
+      # **args can contain utility keys that mimic the interface used by
+      # https://github.com/primer/components, as well as the special entries :classes
+      # and :style.
       #
-      # styles_hash - A hash with utility keys that mimic the interface used by https://github.com/primer/components
+      # Returns a hash containing two entries. The :classes entry is a string of
+      # Primer 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.
       #
-      # Returns a string of Primer CSS class names and style attributes to be added to an HTML tag.
       #
       # Example usage:
-      # extract_css_attrs({ mt: 4, py: 2 }) => "mt-4 py-2"
-      def extract_css_attrs(styles_hash)
-        classes = []
-        styles = +""
-
-        styles_hash.each do |key, value|
-          if value.is_a?(Array)
-            raise ArgumentError, "#{key} does not support responsive values" unless Primer::Classify::Flex::RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
+      # 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
+        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
 
-            value.each_with_index do |val, index|
-              extract_one_css_attr(classes, styles, key, val, BREAKPOINTS[index])
+            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
-          else
-            extract_one_css_attr(classes, styles, key, value, BREAKPOINTS[0])
           end
-        end
+        end.join(" ")
 
+        # This is much faster than Rails' presence method.
+        # rubocop:disable Rails/Blank
         {
-          class: classes.join(" "),
-          style: styles
+          class: !classes || classes.empty? ? nil : classes,
+          style: !style || style.empty? ? nil : style
         }
+        # rubocop:enable Rails/Blank
       end
 
-      def extract_one_css_attr(classes, styles, key, val, breakpoint)
-        found_classes = Primer::Classify::Cache.instance.fetch(breakpoint, key, val) do
-          classes_from(key, val, breakpoint)
-        end
-
-        classes << found_classes if found_classes
+      private
 
-        found_styles = styles_from(key, val, breakpoint)
-        styles << found_styles if found_styles
+      def validate(key, val, brk)
+        brk_str = Primer::Classify::Utilities::BREAKPOINTS[brk]
+        Primer::Classify::Utilities.validate(key, val, brk_str)
       end
 
-      def styles_from(key, val, _breakpoint)
-        # Turn this into an if/else like classes_from when we have more branches.
-        # Could be that way now, but it makes Rubocop unhappy.
-      end
+      def validated_class_names(classes)
+        return if classes.blank?
 
-      def classes_from(key, val, breakpoint)
-        return if val.nil? || val == ""
+        if raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
+          invalid_class_names =
+            classes.split.each_with_object([]) do |class_name, memo|
+              memo << class_name if Primer::Classify::Validation.invalid?(class_name)
+            end
 
-        if Primer::Classify::Utilities.supported_key?(key)
-          Primer::Classify::Utilities.classname(key, val, breakpoint)
-        elsif BOOLEAN_MAPPINGS.key?(key)
-          bools = BOOLEAN_MAPPINGS[key][:mappings].each_with_object([]) do |m, memo|
-            memo << m[:css_class] if m[:value] == val && m[:css_class].present?
-          end
-          bools.empty? ? nil : bools.join(" ")
-        elsif key == BORDER_KEY
-          if val == true
-            "border"
-          else
-            "border-#{val.to_s.dasherize}"
-          end
-        elsif BORDER_MARGIN_KEYS.include?(key)
-          "#{key.to_s.dasherize}-#{val}"
-        elsif key == BORDER_RADIUS_KEY
-          "rounded-#{val}"
-        elsif Primer::Classify::Flex::KEYS.include?(key)
-          Primer::Classify::Flex.classes(key, val, breakpoint)
-        elsif TEXT_KEYS.include?(key)
-          "text-#{val.to_s.dasherize}"
-        elsif TYPOGRAPHY_KEYS.include?(key)
-          if val == :small || val == :normal
-            "text-#{val.to_s.dasherize}"
-          else
-            "f#{val.to_s.dasherize}"
-          end
-        elsif key == BOX_SHADOW_KEY
-          if val == true
-            "color-shadow-small"
-          elsif val == :none || val.blank?
-            "box-shadow-none"
-          else
-            "color-shadow-#{val.to_s.dasherize}"
+          if invalid_class_names.any?
+            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."
           end
         end
+
+        classes
       end
 
       def raise_on_invalid_options?
         Rails.application.config.primer_view_components.raise_on_invalid_options
       end
     end
-
-    Cache.instance.preload!
   end
 end

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

@@ -17,7 +17,7 @@ module ERBLint
 
           next unless code.include?("Primer::BlankslateComponent")
           # Don't fix custom blankslates
-          next if code.end_with?("do")
+          next if code.end_with?("do", "|")
 
           line = erb_node.loc.source_line
           indent = line.split("<%=").first.size
@@ -61,7 +61,7 @@ module ERBLint
 
           case pair.key.value.to_sym
           when :title
-            new_blankslate[:slots][:heading][:content] = pair.value.value
+            new_blankslate[:slots][:heading][:content] = extract_value(pair.value)
           when :title_tag
             new_blankslate[:slots][:heading][:tag] = source_value
           when :icon
@@ -73,15 +73,15 @@ module ERBLint
           when :image_alt
             new_blankslate[:slots][:visual_image][:alt] = source_value
           when :description
-            new_blankslate[:slots][:description][:content] = pair.value.value
+            new_blankslate[:slots][:description][:content] = extract_value(pair.value)
           when :button_text
-            new_blankslate[:slots][:primary_action][:content] = pair.value.value
+            new_blankslate[:slots][:primary_action][:content] = extract_value(pair.value)
           when :button_url
             new_blankslate[:slots][:primary_action][:href] = source_value
           when :button_classes
             new_blankslate[:slots][:primary_action][:classes] = source_value
           when :link_text
-            new_blankslate[:slots][:secondary_action][:content] = pair.value.value
+            new_blankslate[:slots][:secondary_action][:content] = extract_value(pair.value)
           when :link_url
             new_blankslate[:slots][:secondary_action][:href] = source_value
           when :large
@@ -141,6 +141,12 @@ module ERBLint
 
         "(#{string_args})"
       end
+
+      def extract_value(value)
+        return value.value if value.type == :str
+
+        "<%= #{value.source} %>"
+      end
     end
   end
 end

data/lib/primer/view_components/version.rb

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

data/lib/rubocop/cop/primer/deprecated_layout_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+module RuboCop
+  module Cop
+    module Primer
+      # This cop ensures that the deprecated `Primer::LayoutComponent` isn't used.
+      #
+      # bad
+      # Primer::LayoutComponent.new(foo: :deprecated)
+      #
+      # good
+      # Primer::Alpha::Layout.new(foo: :deprecated)
+      class DeprecatedLayoutComponent < BaseCop
+        MSG = "Please try Primer::Alpha::Layout instead."
+
+        def_node_matcher :legacy_component?, <<~PATTERN
+          (send (const (const nil? :Primer) :LayoutComponent) :new ...)
+        PATTERN
+
+        def on_send(node)
+          return unless legacy_component?(node)
+
+          add_offense(node, message: MSG)
+        end
+      end
+    end
+  end
+end

data/lib/rubocop/cop/primer/primer_octicon.rb

@@ -163,9 +163,7 @@ module RuboCop
 
           color = case args[:color]
                   when :text_white
-                    :text_white
-                  when :text_link
-                    :icon_info
+                    :on_emphasis
                   when Symbol
                     args[:color].to_s.gsub("text_", "icon_").to_sym
                   end