openproject-primer_view_components 0.6.3

data/lib/primer/yard/component_manifest.rb

@@ -0,0 +1,144 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  module Yard
+    # The set of documented components (and associated metadata).
+    class ComponentManifest
+      COMPONENTS = {
+        Primer::Beta::RelativeTime => {},
+        Primer::Beta::IconButton => {},
+        Primer::Beta::Button => {},
+        Primer::Alpha::SegmentedControl => {},
+        Primer::Alpha::Layout => {},
+        Primer::Alpha::HellipButton => {},
+        Primer::Alpha::Image => {},
+        Primer::Alpha::OcticonSymbols => {},
+        Primer::Alpha::ImageCrop => { js: true },
+        Primer::IconButton => { js: true },
+        Primer::Beta::AutoComplete => { js: true },
+        Primer::Beta::AutoComplete::Item => {},
+        Primer::Beta::Avatar => {},
+        Primer::Beta::AvatarStack => {},
+        Primer::Beta::BaseButton => {},
+        Primer::Alpha::Banner => { js: true },
+        Primer::Beta::Blankslate => {},
+        Primer::BlankslateComponent => {},
+        Primer::Beta::BorderBox => {},
+        Primer::Beta::BorderBox::Header => {},
+        Primer::Box => {},
+        Primer::Beta::Breadcrumbs => {},
+        Primer::ButtonComponent => { js: true },
+        Primer::Beta::ButtonGroup => {},
+        Primer::Alpha::ButtonMarketing => {},
+        Primer::Beta::ClipboardCopy => { js: true },
+        Primer::Beta::CloseButton => {},
+        Primer::Beta::Counter => {},
+        Primer::Beta::Details => {},
+        Primer::Alpha::Dialog => {},
+        Primer::Alpha::Dropdown => { js: true },
+        Primer::Beta::Flash => {},
+        Primer::Beta::Heading => {},
+        Primer::Alpha::HiddenTextExpander => {},
+        Primer::Beta::Label => {},
+        Primer::LayoutComponent => {},
+        Primer::Beta::Link => { js: true },
+        Primer::Beta::Markdown => {},
+        Primer::Alpha::Menu => {},
+        Primer::Navigation::TabComponent => {},
+        Primer::Alpha::Navigation::Tab => {},
+        Primer::Beta::Octicon => {},
+        Primer::Beta::Popover => {},
+        Primer::Beta::ProgressBar => {},
+        Primer::Beta::State => {},
+        Primer::Beta::Spinner => {},
+        Primer::Beta::Subhead => {},
+        Primer::Alpha::TabContainer => { js: true },
+        Primer::Beta::Text => {},
+        Primer::Beta::TimelineItem => {},
+        Primer::Tooltip => {},
+        Primer::Truncate => {},
+        Primer::Beta::Truncate => {},
+        Primer::Alpha::UnderlineNav => {},
+        Primer::Alpha::UnderlinePanels => { js: true },
+        Primer::Alpha::TabNav => {},
+        Primer::Alpha::TabPanels => { js: true },
+        Primer::Alpha::Tooltip => { js: true },
+        Primer::Alpha::ToggleSwitch => { js: true },
+        Primer::Alpha::Overlay => { js: true },
+        Primer::Alpha::ActionMenu => { js: true },
+
+        # Examples can be seen in the NavList docs
+        Primer::Alpha::NavList => { js: true },
+        Primer::Alpha::NavList::Item => { js: true, examples: false },
+        Primer::Alpha::NavList::Group => { js: true, examples: false },
+
+        # ActionList is a base component that should not be used by itself, and thus
+        # does not have examples of its own
+        Primer::Alpha::ActionList => { js: true, examples: false },
+        Primer::Alpha::ActionList::Divider => { examples: false },
+        Primer::Alpha::ActionList::Heading => { examples: false },
+        Primer::Alpha::ActionList::Item => { examples: false },
+
+        # Forms
+        Primer::Alpha::TextField => { form_component: true },
+        Primer::Alpha::TextArea => { form_component: true, published: false },
+        Primer::Alpha::Select => { form_component: true, published: false },
+        Primer::Alpha::MultiInput => { form_component: true, js: true, published: false },
+        Primer::Alpha::RadioButton => { form_component: true, published: false },
+        Primer::Alpha::RadioButtonGroup => { form_component: true, published: false },
+        Primer::Alpha::CheckBox => { form_component: true, published: false },
+        Primer::Alpha::CheckBoxGroup => { form_component: true, published: false },
+        Primer::Alpha::SubmitButton => { form_component: true, published: false },
+        Primer::Alpha::FormButton => { form_component: true, published: false }
+      }.freeze
+
+      include Enumerable
+
+      def initialize(components)
+        @components = components
+      end
+
+      def each
+        return to_enum(__method__) unless block_given?
+
+        @components.each do |klass|
+          yield self.class.ref_for(klass)
+        end
+      end
+
+      def where(**attrs)
+        self.class.where(@components, **attrs)
+      end
+
+      class << self
+        def where(components = COMPONENTS, **desired_attrs)
+          new(
+            components.each_with_object([]) do |(klass, component_attrs), memo|
+              matches = desired_attrs.all? do |name, desired_value|
+                component_attrs.fetch(name, ComponentRef::ATTR_DEFAULTS[name]) == desired_value
+              end
+
+              memo << klass if matches
+            end
+          )
+        end
+
+        def all
+          new(COMPONENTS.keys)
+        end
+
+        def ref_for(klass)
+          ref_cache[klass] ||= ComponentRef.new(klass, COMPONENTS.fetch(klass, {}))
+        end
+
+        private
+
+        def ref_cache
+          @ref_cache ||= {}
+        end
+      end
+    end
+  end
+end
+# :nocov:

data/lib/primer/yard/component_ref.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  module Yard
+    # :nodoc:
+    class ComponentRef
+      ATTR_DEFAULTS = {
+        js: false,
+        examples: true,
+        published: true,
+        form_component: false
+      }.freeze
+
+      attr_reader :klass, :attrs
+
+      def initialize(klass, attrs)
+        @klass = klass
+        @attrs = attrs
+      end
+
+      def requires_js?
+        @attrs.fetch(:js, ATTR_DEFAULTS[:js])
+      end
+
+      def should_have_examples?
+        @attrs.fetch(:examples, ATTR_DEFAULTS[:examples])
+      end
+
+      def published?
+        @attrs.fetch(:published, ATTR_DEFAULTS[:published])
+      end
+
+      def form_component?
+        @attrs.fetch(:form_component, ATTR_DEFAULTS[:form_component])
+      end
+
+      def source_url
+        @source_url ||= begin
+          path = klass.name.split("::").map(&:underscore).join("/")
+          "https://github.com/primer/view_components/tree/main/app/components/#{path}.rb"
+        end
+      end
+
+      def lookbook_url
+        @lookbook_url ||= begin
+          path = klass.name.underscore.gsub("_component", "")
+          "https://primer.style/view-components/lookbook/inspect/#{path}/default/"
+        end
+      end
+    end
+  end
+end
+# :nocov:

data/lib/primer/yard/docs_helper.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  # :nodoc:
+  module Yard
+    # Helper methods to use for yard documentation
+    module DocsHelper
+      def one_of(enumerable, lower: false, sort: true)
+        # Sort the array if requested
+        if sort
+          enumerable = enumerable.sort do |a, b|
+            a.instance_of?(b.class) ? a <=> b : a.class.to_s <=> b.class.to_s
+          end
+        end
+
+        values =
+          case enumerable
+          when Hash
+            enumerable.map do |key, value|
+              "#{pretty_value(key)} (#{pretty_value(value)})"
+            end
+          else
+            enumerable.map do |key|
+              pretty_value(key)
+            end
+          end
+
+        prefix = "One of"
+        prefix = prefix.downcase if lower
+
+        "#{prefix} #{values.to_sentence(two_words_connector: ' or ', last_word_connector: ', or ')}."
+      end
+
+      def link_to_accessibility
+        "[Accessibility](#accessibility)"
+      end
+
+      def link_to_system_arguments_docs
+        "[System arguments](/system-arguments)"
+      end
+
+      def link_to_typography_docs
+        "[Typography](/system-arguments#typography)"
+      end
+
+      def link_to_component(component)
+        status_module, short_name, class_name = status_module_and_short_name(component)
+        status_path = status_module.nil? ? "" : "#{status_module}/"
+
+        "[#{class_name}](/components/#{status_path}#{short_name.downcase})"
+      end
+
+      def link_to_octicons
+        "[Octicon](https://primer.style/octicons/)"
+      end
+
+      def link_to_heading_practices
+        "[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)?(?<_colons>::)?(?<name>.*)/)
+        [m[:status]&.downcase, m[:name].gsub("::", ""), m[:name]]
+      end
+
+      def pretty_default_value(tag, component)
+        params = tag.object.parameters.find { |param| [tag.name.to_s, "#{tag.name}:"].include?(param[0]) }
+        default = tag.defaults&.first || params&.second
+
+        return "N/A" unless default
+
+        constant_name = "#{component.name}::#{default}"
+        constant_value = default.safe_constantize || constant_name.safe_constantize
+
+        return pretty_value(default) if constant_value.nil?
+
+        pretty_value(constant_value)
+      end
+
+      def pretty_value(val)
+        case val
+        when nil
+          "`nil`"
+        when Symbol
+          "`:#{val}`"
+        else
+          "`#{val}`"
+        end
+      end
+    end
+
+    DocsHelper.extend(DocsHelper)
+  end
+end
+# :nocov:

data/lib/primer/yard/info_arch_docs_helper.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  module Yard
+    # Helper methods to use for info arch yard documentation
+    module InfoArchDocsHelper
+      include DocsHelper
+
+      def link_to_component(component)
+        "{{#link_to_component}}#{component}{{/link_to_component}}"
+      end
+
+      def link_to_system_arguments_docs
+        "{{link_to_system_arguments_docs}}"
+      end
+
+      def link_to_typography_docs
+        "{{link_to_typography_docs}}"
+      end
+
+      def link_to_accessibility
+        "{{link_to_accessibility}}"
+      end
+
+      def link_to_octicons
+        "{{link_to_octicons}}"
+      end
+    end
+  end
+end

data/lib/primer/yard/legacy_gatsby_backend.rb

@@ -0,0 +1,233 @@
+# frozen_string_literal: true
+
+# rubocop:disable Naming/MethodParameterName
+
+# :nocov:
+module Primer
+  module Yard
+    # Backend that generates documentation for the legacy, Gatsby-powered PVC docsite.
+    class LegacyGatsbyBackend < Backend
+      class << self
+        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
+      end
+
+      attr_reader :registry, :manifest
+
+      def initialize(registry, manifest)
+        @registry = registry
+        @manifest = manifest
+      end
+
+      def generate
+        errors = []
+
+        each_component do |component_ref|
+          component = component_ref.klass
+          docs = registry.find(component)
+          status_path = docs.status_module.nil? ? "" : "#{docs.status_module}/"
+
+          metadata = docs.metadata.merge(
+            source: component_ref.source_url,
+            lookbook: component_ref.lookbook_url,
+            path: "docs/content/components/#{status_path}#{docs.short_name.downcase}.md",
+            example_path: example_path(component),
+            require_js_path: require_js_path(component)
+          )
+
+          path = Pathname.new(metadata[:path])
+          path.dirname.mkpath unless path.dirname.exist?
+
+          File.open(path, "w") do |f|
+            f.puts("---")
+            f.puts("title: #{metadata[:title]}")
+            f.puts("componentId: #{metadata[:component_id]}")
+            f.puts("status: #{metadata[:status]}")
+            f.puts("source: #{metadata[:source]}")
+            f.puts("a11yReviewed: #{metadata[:a11y_reviewed]}")
+            f.puts("lookbook: #{metadata[:lookbook]}") if preview_exists?(component)
+            f.puts("---")
+            f.puts
+            f.puts("import Example from '#{metadata[:example_path]}'")
+
+            if component_ref.requires_js?
+              f.puts("import RequiresJSFlash from '#{metadata[:require_js_path]}'")
+              f.puts
+              f.puts("<RequiresJSFlash />")
+            end
+
+            f.puts
+            f.puts("<!-- Warning: AUTO-GENERATED file, do not edit. Add code comments to your Ruby instead <3 -->")
+            f.puts
+            f.puts(view_context.render(inline: docs.base_docstring))
+
+            if docs.tags(:deprecated).any?
+              f.puts
+              f.puts("## Deprecation")
+              docs.tags(:deprecated).each do |tag|
+                f.puts
+                f.puts view_context.render(inline: tag.text)
+              end
+            end
+
+            if docs.tags(:accessibility).any?
+              f.puts
+              f.puts("## Accessibility")
+              docs.tags(:accessibility).each do |tag|
+                f.puts
+                f.puts view_context.render(inline: tag.text)
+              end
+            end
+
+            errors << { component.name => { arguments: "No argument documentation found" } } unless docs.params.any?
+
+            f.puts
+            f.puts("## Arguments")
+            f.puts
+            f.puts("| Name | Type | Default | Description |")
+            f.puts("| :- | :- | :- | :- |")
+
+            documented_params = docs.params.map(&:name)
+            component_params = component.instance_method(:initialize).parameters.map { |p| p.last.to_s }
+
+            if (documented_params & component_params).size != component_params.size
+              err = { arguments: {} }
+              (component_params - documented_params).each do |arg|
+                err[:arguments][arg] = "Not documented"
+              end
+
+              errors << { component.name => err }
+            end
+
+            docs.params.each do |tag|
+              default_value = pretty_default_value(tag, component)
+              f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text.squish)} |")
+            end
+
+            if docs.slot_methods.any?
+              f.puts
+              f.puts("## Slots")
+
+              docs.slot_methods.each do |slot_docs|
+                emit_method(slot_docs, component, f)
+              end
+            end
+
+            example_tags = docs.constructor.tags(:example)
+
+            if example_tags.any?
+              f.puts
+              f.puts("## Examples")
+
+              example_tags.each do |tag|
+                name, description, code = parse_example_tag(tag)
+                f.puts
+                f.puts("### #{name}")
+                if description
+                  f.puts
+                  f.puts(view_context.render(inline: description.squish))
+                end
+                f.puts
+                html = view_context.render(inline: code)
+                f.puts("<Example src=\"#{html.tr('"', "\'").delete("\n")}\" />")
+                f.puts
+                f.puts("```erb")
+                f.puts(code.to_s)
+                f.puts("```")
+              end
+            elsif component_ref.should_have_examples?
+              errors << { component.name => { example: "No examples found" } }
+            end
+          end
+        end
+
+        # Build system arguments docs from BaseComponent
+        system_args_docs = registry.find(Primer::BaseComponent)
+
+        File.open("docs/content/system-arguments.md", "w") do |f|
+          f.puts("---")
+          f.puts("title: System arguments")
+          f.puts("---")
+          f.puts
+          f.puts("<!-- Warning: AUTO-GENERATED file, do not edit. Add code comments to your Ruby instead <3 -->")
+          f.puts
+          f.puts(system_args_docs.base_docstring)
+          f.puts
+
+          f.puts(view_context.render(inline: system_args_docs.constructor.base_docstring))
+        end
+
+        errors
+      end
+
+      private
+
+      def emit_method(method_docs, component, f)
+        f.puts
+        f.puts("### `#{method_docs.name}`")
+
+        if method_docs.base_docstring.to_s.present?
+          f.puts
+          f.puts(view_context.render(inline: method_docs.base_docstring))
+        end
+
+        param_tags = method_docs.tags(:param)
+        if param_tags.any?
+          f.puts
+          f.puts("| Name | Type | Default | Description |")
+          f.puts("| :- | :- | :- | :- |")
+        end
+
+        param_tags.each do |tag|
+          f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{pretty_default_value(tag, component)} | #{view_context.render(inline: tag.text)} |")
+        end
+      end
+
+      def each_component(&block)
+        manifest.each(&block)
+      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 preview_exists?(component)
+        path = component.name.underscore
+
+        File.exist?("previews/#{path}_preview.rb")
+      end
+
+      def status_module?(component)
+        (%w[Alpha Beta] & component.name.split("::")).any?
+      end
+
+      def parse_example_tag(tag)
+        self.class.parse_example_tag(tag)
+      end
+    end
+  end
+end
+# :nocov:
+
+# rubocop:enable Naming/MethodParameterName

data/lib/primer/yard/lookbook_docs_helper.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Primer
+  module Yard
+    # Helper methods for documentation generated in Lookbook pages.
+    module LookbookDocsHelper
+      # Adheres to the same signature as Primer::Yard::DocsHelper#link_to_component so link_to_component
+      # may be used in a Gatsby or Lookbook context and produce the correct link for each platform.
+      #
+      # @param component [Class] The component class to link to.
+      # @return [String] The link, either in HTML or markdown format.
+      def link_to_component(component)
+        backend = Primer::Yard::LookbookPagesBackend.new(Primer::Yard::Registry.make, nil)
+        component_ref = Primer::Yard::ComponentManifest.ref_for(component)
+        page = backend.page_for(component_ref)
+
+        # If the page_path method is available, we're being rendered into HTML by Lookbook
+        # and should emit an HTML <a> tag. No page_path means we're being rendered into
+        # markdown by LookbookPagesBackend and should emit a markdown + ERB link that
+        # Lookbook will eventually render on page load.
+        if respond_to?(:page_path)
+          link_to(page.docs.short_name, page_path(page.page_id.to_sym.inspect))
+        else
+          # rubocop:disable Rails/OutputSafety
+          "[#{page.docs.short_name}](<%= page_path(#{page.page_id.to_sym.inspect}) %>)".html_safe
+          # rubocop:enable Rails/OutputSafety
+        end
+      end
+    end
+  end
+end