primer_view_components 0.0.46 → 0.0.50

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require_relative "helpers"
+require_relative "autocorrectable"
+require_relative "argument_mappers/label"
+
+module ERBLint
+  module Linters
+    # Counts the number of times a HTML label is used instead of the component.
+    class LabelComponentMigrationCounter < Linter
+      include Helpers
+      include Autocorrectable
+
+      TAGS = Primer::ViewComponents::Constants.get(
+        component: "Primer::LabelComponent",
+        constant: "TAG_OPTIONS"
+      ).freeze
+
+      CLASSES = %w[Label].freeze
+      MESSAGE = "We are migrating labels to use [Primer::LabelComponent](https://primer.style/view-components/components/label), please try to use that instead of raw HTML."
+      ARGUMENT_MAPPER = ArgumentMappers::Label
+      COMPONENT = "Primer::LabelComponent"
+    end
+  end
+end

data/lib/primer/view_components/statuses.rb

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

data/lib/primer/view_components/version.rb

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

data/lib/rubocop/config/default.yml

@@ -0,0 +1,12 @@
+require:
+  - rubocop/cop/primer
+
+AllCops:
+  DisabledByDefault: true
+
+Primer/SystemArgumentInsteadOfClass:
+  Enabled: true
+
+Primer/NoTagMemoize:
+  Enabled: false
+

data/lib/rubocop/cop/primer.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+require "rubocop/cop/primer/no_tag_memoize"
+require "rubocop/cop/primer/system_argument_instead_of_class"

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+module RuboCop
+  module Cop
+    module Primer
+      # This cop ensures that tags are not set with ||=
+      #
+      # bad
+      # @system_arguments[:tag] ||= :h1
+      #
+      # good
+      # @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+      #
+      # good
+      # @system_arguments[:tag] = :h2
+      class NoTagMemoize < RuboCop::Cop::Cop
+        INVALID_MESSAGE = <<~STR
+          Avoid `[:tag] ||=`. Instead, try one of the following:
+            - Don't allow consumers to update the tag by having a fixed tag (e.g. `system_arguments[:tag] = :div`)
+            - Use the `fetch_or_fallback` helper to only allow a tag from a restricted list.
+        STR
+
+        def_node_search :tag_memoized?, <<~PATTERN
+          (or-asgn
+            (send
+              _
+              _
+              (sym :tag)
+            )
+            _
+          )
+        PATTERN
+
+        def on_or_asgn(node)
+          add_offense(node, message: INVALID_MESSAGE) if tag_memoized?(node)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+require "rubocop"
+require "primer/classify/utilities"
+require "primer/view_components/statuses"
+
+module RuboCop
+  module Cop
+    module Primer
+      # This cop ensures that components use System Arguments instead of CSS classes.
+      #
+      # bad
+      # Component.new(classes: "mr-1")
+      #
+      # good
+      # Component.new(mr: 1)
+      class SystemArgumentInsteadOfClass < RuboCop::Cop::Cop
+        INVALID_MESSAGE = <<~STR
+          Avoid using CSS classes when you can use System Arguments: https://primer.style/view-components/system-arguments.
+        STR
+
+        def on_send(node)
+          return unless node.method_name == :new
+          return unless ::Primer::ViewComponents::STATUSES.key?(node.receiver.const_name)
+          return unless node.arguments?
+
+          # we are looking for hash arguments and they are always last
+          kwargs = node.arguments.last
+
+          return unless kwargs.type == :hash
+
+          # find classes pair
+          classes_arg = kwargs.pairs.find { |kwarg| kwarg.key.value == :classes }
+
+          return if classes_arg.nil?
+          return unless classes_arg.value.type == :str
+
+          # get actual classes
+          classes = classes_arg.value.value
+
+          system_arguments = ::Primer::Classify::Utilities.classes_to_hash(classes)
+
+          # no classes are fixable
+          return if system_arguments[:classes] == classes
+
+          add_offense(classes_arg, message: INVALID_MESSAGE)
+        end
+
+        def autocorrect(node)
+          lambda do |corrector|
+            system_arguments = ::Primer::Classify::Utilities.classes_to_hash(node.value.value)
+            corrector.replace(node.loc.expression, arguments_as_string(system_arguments))
+          end
+        end
+
+        private
+
+        def arguments_as_string(system_arguments)
+          system_arguments.map do |key, value|
+            val = case value
+                  when Symbol
+                    ":#{value}"
+                  when String
+                    value.to_json
+                  else
+                    value
+                  end
+
+            "#{key}: #{val}"
+          end.join(", ")
+        end
+      end
+    end
+  end
+end

data/lib/tasks/constants.rake

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+namespace :constants do
+  task :dump do
+    require File.expand_path("./../../demo/config/environment.rb", __dir__)
+    require "primer/view_components"
+    # Loads all components for `.descendants` to work properly
+    Dir["./app/components/primer/**/*.rb"].sort.each { |file| require file }
+
+    Primer::ViewComponents.dump_constants
+  end
+end

data/lib/tasks/docs.rake

@@ -32,10 +32,10 @@ namespace :docs do
       Primer::OcticonSymbolsComponent,
       Primer::ImageCrop,
       Primer::IconButton,
-      Primer::AutoComplete,
-      Primer::AutoComplete::Item,
-      Primer::AvatarComponent,
-      Primer::AvatarStackComponent,
+      Primer::Beta::AutoComplete,
+      Primer::Beta::AutoComplete::Item,
+      Primer::Beta::Avatar,
+      Primer::Beta::AvatarStack,
       Primer::BaseButton,
       Primer::BlankslateComponent,
       Primer::BorderBoxComponent,
@@ -81,7 +81,7 @@ namespace :docs do
       Primer::Dropdown,
       Primer::LocalTime,
       Primer::ImageCrop,
-      Primer::AutoComplete,
+      Primer::Beta::AutoComplete,
       Primer::ClipboardCopy,
       Primer::TabContainerComponent,
       Primer::TabNavComponent,
@@ -97,28 +97,31 @@ namespace :docs do
 
     errors = []
 
-    components.each do |component|
+    # Deletes docs before regenerating them, guaranteeing that we don't keep stale docs.
+    FileUtils.rm_rf(Dir.glob("docs/content/components/**/*.md"))
+
+    components.sort_by(&:name).each do |component|
       documentation = registry.get(component.name)
 
-      # Primer::AvatarComponent => Avatar
-      short_name = component.name.gsub(/Primer|::|Component/, "")
+      data = docs_metadata(component)
 
-      path = Pathname.new("docs/content/components/#{short_name.downcase}.md")
+      path = Pathname.new(data[:path])
       path.dirname.mkdir unless path.dirname.exist?
       File.open(path, "w") do |f|
         f.puts("---")
-        f.puts("title: #{short_name}")
-        f.puts("status: #{component.status.to_s.capitalize}")
-        f.puts("source: https://github.com/primer/view_components/tree/main/app/components/primer/#{component.to_s.demodulize.underscore}.rb")
-        f.puts("storybook: https://primer.style/view-components/stories/?path=/story/primer-#{short_name.underscore.dasherize}-component")
+        f.puts("title: #{data[:title]}")
+        f.puts("componentId: #{data[:component_id]}")
+        f.puts("status: #{data[:status]}")
+        f.puts("source: #{data[:source]}")
+        f.puts("storybook: #{data[:storybook]}")
         f.puts("---")
         f.puts
-        f.puts("import Example from '../../src/@primer/gatsby-theme-doctocat/components/example'")
+        f.puts("import Example from '#{data[:example_path]}'")
 
         initialize_method = documentation.meths.find(&:constructor?)
 
         if js_components.include?(component)
-          f.puts("import RequiresJSFlash from '../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash'")
+          f.puts("import RequiresJSFlash from '#{data[:require_js_path]}'")
           f.puts
           f.puts("<RequiresJSFlash />")
         end
@@ -183,8 +186,8 @@ namespace :docs do
         end
 
         component_args = {
-          "component" => short_name,
-          "source" => "https://github.com/primer/view_components/tree/main/app/components/primer/#{component.to_s.demodulize.underscore}.rb",
+          "component" => data[:title],
+          "source" => data[:source],
           "parameters" => args
         }
 
@@ -225,23 +228,12 @@ namespace :docs do
         f.puts("## Examples")
 
         initialize_method.tags(:example).each do |tag|
-          name = tag.name
-          description = nil
-          code = nil
-
-          if tag.text.include?("@description")
-            splitted = tag.text.split(/@description|@code/)
-            description = splitted.second.gsub(/^[ \t]{2}/, "").strip
-            code = splitted.last.gsub(/^[ \t]{2}/, "").strip
-          else
-            code = tag.text
-          end
-
+          name, description, code = parse_example_tag(tag)
           f.puts
           f.puts("### #{name}")
           if description
             f.puts
-            f.puts(description)
+            f.puts(view_context.render(inline: description.squish))
           end
           f.puts
           html = view_context.render(inline: code)
@@ -328,13 +320,14 @@ namespace :docs do
         f.puts("    class #{short_name}Preview < ViewComponent::Preview")
 
         yard_example_tags.each_with_index do |tag, index|
-          method_name = tag.name.split("|").first.downcase.parameterize.underscore
+          name, _, code = parse_example_tag(tag)
+          method_name = name.split("|").first.downcase.parameterize.underscore
           f.puts("      def #{method_name}; end")
           f.puts unless index == yard_example_tags.size - 1
           path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
           path.dirname.mkdir unless path.dirname.exist?
           File.open(path, "w") do |view_file|
-            view_file.puts(tag.text.to_s)
+            view_file.puts(code.to_s)
           end
         end
 
@@ -346,6 +339,7 @@ namespace :docs do
   end
 
   def generate_yard_registry
+    ENV["SKIP_STORYBOOK_PRELOAD"] = "1"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/view_components"
     require "yard/docs_helper"
@@ -371,6 +365,22 @@ namespace :docs do
     registry
   end
 
+  def parse_example_tag(tag)
+    name = tag.name
+    description = nil
+    code = nil
+
+    if tag.text.include?("@description")
+      splitted = tag.text.split(/@description|@code/)
+      description = splitted.second.gsub(/^[ \t]{2}/, "").strip
+      code = splitted.last.gsub(/^[ \t]{2}/, "").strip
+    else
+      code = tag.text
+    end
+
+    [name, description, code]
+  end
+
   def pretty_default_value(tag, component)
     params = tag.object.parameters.find { |param| [tag.name.to_s, tag.name.to_s + ":"].include?(param[0]) }
     default = tag.defaults&.first || params&.second
@@ -384,4 +394,49 @@ namespace :docs do
 
     pretty_value(constant_value)
   end
+
+  def docs_metadata(component)
+    (status_module, short_name) = status_module_and_short_name(component)
+    status_path = status_module.nil? ? "" : "#{status_module}/"
+    status = component.status.to_s
+
+    {
+      title: short_name,
+      component_id: short_name.underscore,
+      status: status.capitalize,
+      source: source_url(component),
+      storybook: storybook_url(component),
+      path: "docs/content/components/#{status_path}#{short_name.downcase}.md",
+      example_path: example_path(component),
+      require_js_path: require_js_path(component)
+    }
+  end
+
+  def source_url(component)
+    path = component.name.split("::").map(&:underscore).join("/")
+
+    "https://github.com/primer/view_components/tree/main/app/components/#{path}.rb"
+  end
+
+  def storybook_url(component)
+    path = component.name.split("::").map { |n| n.underscore.dasherize }.join("-")
+
+    "https://primer.style/view-components/stories/?path=/story/#{path}"
+  end
+
+  def example_path(component)
+    example_path = "../../src/@primer/gatsby-theme-doctocat/components/example"
+    example_path = "../#{example_path}" if status_module?(component)
+    example_path
+  end
+
+  def require_js_path(component)
+    require_js_path = "../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash"
+    require_js_path = "../#{require_js_path}" if status_module?(component)
+    require_js_path
+  end
+
+  def status_module?(component)
+    (%w[Alpha Beta] & component.name.split("::")).any?
+  end
 end

data/lib/tasks/utilities.rake

@@ -5,29 +5,23 @@ namespace :utilities do
     require "yaml"
     require "json"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
+    require "primer/classify/utilities"
 
     # Keys that are looked for to be included in the utilities.yml file
     SUPPORTED_KEYS = %i[
       anim
       d
       float
+      height
       hide
       m mt mr mb ml mx my
       p pt pr pb pl px py
       position
       wb
+      width
       v
     ].freeze
 
-    # Replacements for some classnames that end up being a different argument key
-    REPLACEMENT_KEYS = {
-      "^anim" => "animation",
-      "^v-align" => "vertical_align",
-      "^d" => "display",
-      "^wb" => "word_break",
-      "^v" => "visibility"
-    }.freeze
-
     BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
 
     css_data =
@@ -52,7 +46,7 @@ namespace :utilities do
       key = ""
 
       # Look for a replacement key
-      REPLACEMENT_KEYS.each do |k, v|
+      Primer::Classify::Utilities::REPLACEMENT_KEYS.each do |k, v|
         next unless classname.match?(Regexp.new(k))
 
         key = v

data/lib/yard/docs_helper.rb

@@ -29,7 +29,7 @@ module YARD
     end
 
     def link_to_accessibility
-      "[Accessibility](#system-arguments)"
+      "[Accessibility](#accessibility)"
     end
 
     def link_to_system_arguments_docs
@@ -41,8 +41,10 @@ module YARD
     end
 
     def link_to_component(component)
-      short_name = component.name.gsub(/Primer|::|Component/, "")
-      "[#{short_name}](/components/#{short_name.downcase})"
+      (status_module, short_name) = status_module_and_short_name(component)
+      status_path = status_module.nil? ? "" : "#{status_module}/"
+
+      "[#{short_name}](/components/#{status_path}#{short_name.downcase})"
     end
 
     def link_to_octicons
@@ -53,6 +55,13 @@ module YARD
       "[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)"
     end
 
+    def status_module_and_short_name(component)
+      name_with_status = component.name.gsub(/Primer::|Component/, "")
+
+      m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(::)?(?<name>.*)/)
+      [m[:status]&.downcase, m[:name].gsub("::", "")]
+    end
+
     def pretty_value(val)
       case val
       when nil