primer_view_components 0.0.38 → 0.0.43

data/app/lib/primer/classify.rb

@@ -3,16 +3,11 @@
 module Primer
   # :nodoc:
   class Classify
-    DIRECTION_KEY = :direction
-    JUSTIFY_CONTENT_KEY = :justify_content
-    ALIGN_ITEMS_KEY = :align_items
     DISPLAY_KEY = :display
     SPACING_KEYS = Primer::Classify::Spacing::KEYS
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
-    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
+    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
       (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
@@ -21,16 +16,16 @@ module Primer
     BG_KEY = :bg
     VERTICAL_ALIGN_KEY = :vertical_align
     WORD_BREAK_KEY = :word_break
-    TEXT_KEYS = %i[text_align font_weight].freeze
-    FLEX_KEY = :flex
-    FLEX_GROW_KEY = :flex_grow
-    FLEX_SHRINK_KEY = :flex_shrink
-    ALIGN_SELF_KEY = :align_self
+    TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
     VISIBILITY_KEY = :visibility
     ANIMATION_KEY = :animation
+    CONTAINER_KEY = :container
+
+    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
+    RESPONSIVE_KEYS = ([DISPLAY_KEY, :float, Primer::Classify::Grid::COL_KEY] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -89,6 +84,8 @@ module Primer
       BORDER_MARGIN_KEYS +
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
+      Primer::Classify::Flex::KEYS +
+      Primer::Classify::Grid::KEYS +
       [
         BORDER_KEY,
         BORDER_COLOR_KEY,
@@ -98,18 +95,12 @@ module Primer
         DISPLAY_KEY,
         VERTICAL_ALIGN_KEY,
         WORD_BREAK_KEY,
-        DIRECTION_KEY,
-        JUSTIFY_CONTENT_KEY,
-        ALIGN_ITEMS_KEY,
-        FLEX_KEY,
-        FLEX_GROW_KEY,
-        FLEX_SHRINK_KEY,
-        ALIGN_SELF_KEY,
         WIDTH_KEY,
         HEIGHT_KEY,
         BOX_SHADOW_KEY,
         VISIBILITY_KEY,
-        ANIMATION_KEY
+        ANIMATION_KEY,
+        CONTAINER_KEY
       ]
     ).freeze
 
@@ -120,7 +111,7 @@ module Primer
         extracted_results[:class] = [
           validated_class_names(classes),
           extracted_results.delete(:classes)
-        ].compact.join(" ").presence
+        ].compact.join(" ").strip.presence
 
         extracted_results[:style] = [
           extracted_results.delete(:styles),
@@ -135,13 +126,13 @@ module Primer
       def validated_class_names(classes)
         return if classes.blank?
 
-        if ENV["RAILS_ENV"] == "development"
+        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) }
             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." 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." if invalid_class_names.any?
         end
 
         classes
@@ -216,23 +207,12 @@ module Primer
           memo[:classes] << "#{key.to_s.dasherize}-#{val}"
         elsif key == BORDER_RADIUS_KEY
           memo[:classes] << "rounded-#{val}"
-        elsif key == DIRECTION_KEY
-          memo[:classes] << "flex#{breakpoint}-#{val.to_s.dasherize}"
-        elsif key == JUSTIFY_CONTENT_KEY
-          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
-          memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
-        elsif key == ALIGN_ITEMS_KEY
-          memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub('flex_', '')}"
-        elsif key == FLEX_KEY
-          memo[:classes] << "flex-#{val}"
-        elsif key == FLEX_GROW_KEY
-          memo[:classes] << "flex-grow-#{val}"
-        elsif key == FLEX_SHRINK_KEY
-          memo[:classes] << "flex-shrink-#{val}"
-        elsif key == ALIGN_SELF_KEY
-          memo[:classes] << "flex-self-#{val}"
+        elsif Primer::Classify::Flex::KEYS.include?(key)
+          memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
+        elsif Primer::Classify::Grid::KEYS.include?(key)
+          memo[:classes] << Primer::Classify::Grid.classes(key, val, breakpoint)
         elsif key == WIDTH_KEY || key == HEIGHT_KEY
-          if val == :fit || val == :fill
+          if val == :fit
             memo[:classes] << "#{key}-#{val}"
           else
             memo[key] = val
@@ -240,7 +220,11 @@ module Primer
         elsif TEXT_KEYS.include?(key)
           memo[:classes] << "text-#{val.to_s.dasherize}"
         elsif TYPOGRAPHY_KEYS.include?(key)
-          memo[:classes] << "f#{val.to_s.dasherize}"
+          memo[:classes] << if val == :small || val == :normal
+                              "text-#{val.to_s.dasherize}"
+                            else
+                              "f#{val.to_s.dasherize}"
+                            end
         elsif key == BOX_SHADOW_KEY
           memo[:classes] << if val == true
                               "color-shadow-small"
@@ -261,6 +245,10 @@ module Primer
           memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
         end
       end
+
+      def force_system_arguments?
+        Rails.application.config.primer_view_components.force_system_arguments
+      end
     end
 
     Cache.preload!

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

@@ -40,18 +40,33 @@ module Primer
           )
 
           preload(
-            keys: Primer::Classify::DIRECTION_KEY,
-            values: [:row, :column]
+            keys: Primer::Classify::Flex::DIRECTION_KEY,
+            values: Primer::Classify::Flex::DIRECTION_VALUES
           )
 
           preload(
-            keys: Primer::Classify::JUSTIFY_CONTENT_KEY,
-            values: [:flex_start, :flex_end, :center, :space_between, :space_around]
+            keys: Primer::Classify::Flex::JUSTIFY_CONTENT_KEY,
+            values: Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES
           )
 
           preload(
-            keys: Primer::Classify::ALIGN_ITEMS_KEY,
-            values: [:flex_start, :flex_end, :center, :baseline, :stretch]
+            keys: Primer::Classify::Flex::ALIGN_ITEMS_KEY,
+            values: Primer::Classify::Flex::ALIGN_ITEMS_VALUES
+          )
+
+          preload(
+            keys: Primer::Classify::Grid::CONTAINER_KEY,
+            values: Primer::Classify::Grid::CONTAINER_VALUES
+          )
+
+          preload(
+            keys: Primer::Classify::Grid::CLEARFIX_KEY,
+            values: [true]
+          )
+
+          preload(
+            keys: Primer::Classify::Grid::COL_KEY,
+            values: Primer::Classify::Grid::COL_VALUES
           )
 
           preload(
@@ -61,12 +76,12 @@ module Primer
 
           preload(
             keys: [Primer::Classify::COLOR_KEY],
-            values: [*Primer::Classify::FunctionalTextColors::OPTIONS, *Primer::Classify::FunctionalTextColors::DEPRECATED_OPTIONS]
+            values: Primer::Classify::FunctionalTextColors::OPTIONS
           )
 
           preload(
             keys: [Primer::Classify::BG_KEY],
-            values: [*Primer::Classify::FunctionalBackgroundColors::OPTIONS, *Primer::Classify::FunctionalBackgroundColors::DEPRECATED_OPTIONS]
+            values: Primer::Classify::FunctionalBackgroundColors::OPTIONS
           )
 
           preload(
@@ -90,23 +105,28 @@ module Primer
           )
 
           preload(
-            keys: Primer::Classify::FLEX_KEY,
-            values: [1, :auto]
+            keys: Primer::Classify::Flex::FLEX_KEY,
+            values: Primer::Classify::Flex::FLEX_VALUES
+          )
+
+          preload(
+            keys: Primer::Classify::Flex::GROW_KEY,
+            values: Primer::Classify::Flex::GROW_VALUES
           )
 
           preload(
-            keys: [Primer::Classify::FLEX_GROW_KEY, Primer::Classify::FLEX_SHRINK_KEY],
-            values: [0]
+            keys: Primer::Classify::Flex::SHRINK_KEY,
+            values: Primer::Classify::Flex::SHRINK_VALUES
           )
 
           preload(
-            keys: [Primer::Classify::ALIGN_SELF_KEY],
-            values: [:auto, :start, :end, :center, :baseline, :stretch]
+            keys: Primer::Classify::Flex::ALIGN_SELF_KEY,
+            values: Primer::Classify::Flex::ALIGN_SELF_VALUES
           )
 
           preload(
             keys: [Primer::Classify::WIDTH_KEY, Primer::Classify::HEIGHT_KEY],
-            values: [:fit, :fill]
+            values: [:fit]
           )
 
           preload(

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

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Handler for PrimerCSS flex classes.
+    class Flex
+      extend Primer::FetchOrFallbackHelper
+
+      FLEX_KEY = :flex
+      FLEX_VALUES = [1, :auto].freeze
+
+      WRAP_KEY = :flex_wrap
+      WRAP_MAPPINGS = {
+        wrap: "flex-wrap",
+        nowrap: "flex-nowrap",
+        reverse: "flex-wrap-reverse"
+      }.freeze
+
+      SHRINK_KEY = :flex_shrink
+      SHRINK_VALUES = [0].freeze
+
+      GROW_KEY = :flex_grow
+      GROW_VALUES = [0].freeze
+
+      ALIGN_SELF_KEY = :align_self
+      ALIGN_SELF_VALUES = [:auto, :start, :end, :center, :baseline, :stretch].freeze
+
+      DIRECTION_KEY = :direction
+      DIRECTION_VALUES = [:column, :column_reverse, :row, :row_reverse].freeze
+
+      JUSTIFY_CONTENT_KEY = :justify_content
+      JUSTIFY_CONTENT_VALUES = [:flex_start, :flex_end, :center, :space_between, :space_around].freeze
+
+      ALIGN_ITEMS_KEY = :align_items
+      ALIGN_ITEMS_VALUES = [:flex_start, :flex_end, :center, :baseline, :stretch].freeze
+
+      KEYS = [FLEX_KEY, WRAP_KEY, SHRINK_KEY, GROW_KEY, ALIGN_SELF_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY].freeze
+      RESPONSIVE_KEYS = [DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY].freeze
+
+      class << self
+        def classes(key, value, breakpoint)
+          send(key, value, breakpoint)
+        end
+
+        private
+
+        def flex(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: FLEX_VALUES,
+            prefix: "flex"
+          )
+        end
+
+        def flex_shrink(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: SHRINK_VALUES,
+            prefix: "flex-shrink"
+          )
+        end
+
+        def flex_grow(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: GROW_VALUES,
+            prefix: "flex-grow"
+          )
+        end
+
+        def align_self(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: ALIGN_SELF_VALUES,
+            prefix: "flex-self"
+          )
+        end
+
+        def flex_wrap(value, _breakpoint)
+          WRAP_MAPPINGS[fetch_or_fallback(WRAP_MAPPINGS.keys, value)]
+        end
+
+        def direction(value, breakpoint)
+          val = fetch_or_fallback(DIRECTION_VALUES, value)
+
+          "flex#{breakpoint}-#{val.to_s.dasherize}"
+        end
+
+        def justify_content(value, breakpoint)
+          val = fetch_or_fallback(JUSTIFY_CONTENT_VALUES, value)
+
+          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
+          "flex#{breakpoint}-justify-#{formatted_value}"
+        end
+
+        def align_items(value, breakpoint)
+          val = fetch_or_fallback(ALIGN_ITEMS_VALUES, value)
+
+          formatted_value = val.to_s.gsub("flex_", "")
+          "flex#{breakpoint}-items-#{formatted_value}"
+        end
+
+        def generate(value:, allowed_values:, prefix:)
+          val = fetch_or_fallback(allowed_values, value)
+
+          "#{prefix}-#{val}"
+        end
+      end
+    end
+  end
+end

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

@@ -13,8 +13,7 @@ module Primer
         success: :success,
         warning: :warning,
         danger: :danger,
-        inverse: :inverse,
-        overlay: :overlay
+        inverse: :inverse
       }.freeze
 
       MAPPINGS = {

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Handler for PrimerCSS grid classes.
+    class Grid
+      extend Primer::FetchOrFallbackHelper
+
+      CONTAINER_KEY = :container
+      CONTAINER_VALUES = [:xl, :lg, :md, :sm].freeze
+
+      CLEARFIX_KEY = :clearfix
+      CLEARFIX_VALUES = [true, false].freeze
+
+      COL_KEY = :col
+      COL_VALUES = (1..12).to_a.freeze
+
+      KEYS = [CONTAINER_KEY, CLEARFIX_KEY, COL_KEY].freeze
+
+      class << self
+        def classes(key, value, breakpoint)
+          send(key, value, breakpoint)
+        end
+
+        private
+
+        def container(value, _breakpoint)
+          val = fetch_or_fallback(CONTAINER_VALUES, value)
+
+          "container-#{val}"
+        end
+
+        def clearfix(value, _breakpoint)
+          "clearfix" if fetch_or_fallback(CLEARFIX_VALUES, value)
+        end
+
+        def col(value, breakpoint)
+          val = fetch_or_fallback(COL_VALUES, value.to_i)
+
+          "col#{breakpoint}-#{val}"
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -25,10 +25,10 @@ module Primer
 
     InvalidValueError = Class.new(StandardError)
 
-    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: [])
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: nil)
       if allowed_values.include?(given_value)
         given_value
-      elsif deprecated_values.include?(given_value)
+      elsif deprecated_values&.include?(given_value)
         ActiveSupport::Deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
 
         given_value

data/app/lib/primer/octicon/cache.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Primer
+  module Octicon
+    # :nodoc:
+    class Cache
+      LOOKUP = {} # rubocop:disable Style/MutableConstant
+      # Preload the top 20 used icons.
+      PRELOADED_ICONS = [:alert, :check, :"chevron-down", :clippy, :clock, :"dot-fill", :info, :"kebab-horizontal", :link, :lock, :mail, :pencil, :plus, :question, :repo, :search, :"shield-lock", :star, :trash, :x].freeze
+
+      class << self
+        def get_key(symbol:, size:, width: nil, height: nil)
+          [symbol, size, width, height].join("_")
+        end
+
+        def read(key)
+          LOOKUP[key]
+        end
+
+        # Cache size limit.
+        def limit
+          500
+        end
+
+        def set(key, value)
+          LOOKUP[key] = value
+
+          # Remove first item when the cache is too large.
+          LOOKUP.shift if LOOKUP.size > limit
+        end
+
+        def clear!
+          LOOKUP.clear
+        end
+
+        def preload!
+          PRELOADED_ICONS.each { |icon| Primer::OcticonComponent.new(icon: icon) }
+        end
+      end
+    end
+  end
+end