yattho_view_components 0.0.1

data/lib/yattho/yard/component_manifest.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Yattho
+  module YARD
+    # The set of documented components (and associated metadata).
+    class ComponentManifest
+      COMPONENTS = {
+        Yattho::Beta::RelativeTime => {},
+        Yattho::Beta::IconButton => {},
+        Yattho::Beta::Button => {},
+        Yattho::Alpha::SegmentedControl => {},
+        Yattho::Alpha::Layout => {},
+        Yattho::Alpha::HellipButton => {},
+        Yattho::Alpha::Image => {},
+        Yattho::LocalTime => { js: true },
+        Yattho::Alpha::OcticonSymbols => {},
+        Yattho::Alpha::ImageCrop => { js: true },
+        Yattho::IconButton => { js: true },
+        Yattho::Beta::AutoComplete => { js: true },
+        Yattho::Beta::AutoComplete::Item => {},
+        Yattho::Beta::Avatar => {},
+        Yattho::Beta::AvatarStack => {},
+        Yattho::Beta::BaseButton => {},
+        Yattho::Alpha::Banner => { js: true },
+        Yattho::Beta::Blankslate => {},
+        Yattho::Beta::BorderBox => {},
+        Yattho::Beta::BorderBox::Header => {},
+        Yattho::Box => {},
+        Yattho::Beta::Breadcrumbs => {},
+        Yattho::ButtonComponent => { js: true },
+        Yattho::Beta::ButtonGroup => {},
+        Yattho::Alpha::ButtonMarketing => {},
+        Yattho::Beta::ClipboardCopy => { js: true },
+        Yattho::Beta::CloseButton => {},
+        Yattho::Beta::Counter => {},
+        Yattho::Beta::Details => {},
+        Yattho::Alpha::Dialog => {},
+        Yattho::Alpha::Dropdown => { js: true },
+        Yattho::Beta::Flash => {},
+        Yattho::Beta::Heading => {},
+        Yattho::Alpha::HiddenTextExpander => {},
+        Yattho::Beta::Label => {},
+        Yattho::LayoutComponent => {},
+        Yattho::Beta::Link => { js: true },
+        Yattho::Beta::Markdown => {},
+        Yattho::Alpha::Menu => {},
+        Yattho::Navigation::TabComponent => {},
+        Yattho::Beta::Octicon => {},
+        Yattho::Beta::Popover => {},
+        Yattho::Beta::ProgressBar => {},
+        Yattho::Beta::State => {},
+        Yattho::Beta::Spinner => {},
+        Yattho::Beta::Subhead => {},
+        Yattho::Alpha::TabContainer => { js: true },
+        Yattho::Beta::Text => {},
+        Yattho::TimeAgoComponent => { js: true },
+        Yattho::Beta::TimelineItem => {},
+        Yattho::Tooltip => {},
+        Yattho::Truncate => {},
+        Yattho::Beta::Truncate => {},
+        Yattho::Alpha::UnderlineNav => {},
+        Yattho::Alpha::UnderlinePanels => { js: true },
+        Yattho::Alpha::TabNav => {},
+        Yattho::Alpha::TabPanels => { js: true },
+        Yattho::Alpha::Tooltip => { js: true },
+        Yattho::Alpha::ToggleSwitch => { js: true },
+
+        # Examples can be seen in the NavList docs
+        Yattho::Alpha::NavList => { js: true },
+        Yattho::Alpha::NavList::Item => { js: true, examples: false },
+        Yattho::Alpha::NavList::Section => { 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
+        Yattho::Alpha::ActionList => { js: true, examples: false },
+        Yattho::Alpha::ActionList::Divider => { examples: false },
+        Yattho::Alpha::ActionList::Heading => { examples: false },
+        Yattho::Alpha::ActionList::Item => { examples: false },
+
+        # Forms
+        Yattho::Alpha::TextField => { form_component: true }
+      }.freeze
+
+      class << self
+        def each(&block)
+          COMPONENTS.keys.each(&block)
+        end
+
+        def components_with_docs
+          @components_with_docs ||= COMPONENTS.keys
+        end
+
+        def all_components
+          @all_components ||= Yattho::Component.descendants - [Yattho::BaseComponent]
+        end
+
+        def components_without_docs
+          @components_without_docs ||= all_components - components_with_docs
+        end
+
+        def components_with_examples
+          @components_with_examples ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:examples, true)
+          end
+        end
+
+        def components_requiring_js
+          @components_requiring_js ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:js, false)
+          end
+        end
+
+        def form_components
+          @form_components ||= COMPONENTS.keys.select do |c|
+            COMPONENTS[c].fetch(:form_component, false)
+          end
+        end
+      end
+    end
+  end
+end
+# :nocov:

data/lib/yattho/yard/docs_helper.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+module Yattho
+  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://yattho.com/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(/Yattho::|Component/, "")
+
+        m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(?<_colons>::)?(?<name>.*)/)
+        [m[:status]&.downcase, m[:name].gsub("::", ""), m[:name]]
+      end
+
+      def pretty_value(val)
+        case val
+        when nil
+          "`nil`"
+        when Symbol
+          "`:#{val}`"
+        else
+          "`#{val}`"
+        end
+      end
+    end
+  end
+end

data/lib/yattho/yard/legacy_gatsby_backend.rb

@@ -0,0 +1,271 @@
+# frozen_string_literal: true
+
+# rubocop:disable Naming/MethodParameterName
+
+# :nocov:
+
+require "yattho/yard/component_manifest"
+require "yattho/yard/backend"
+
+module Yattho
+  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
+
+      def initialize(registry)
+        @registry = registry
+      end
+
+      def generate
+        args_for_components = []
+        errors = []
+
+        each_component do |component|
+          docs = registry.find(component)
+          status_path = docs.status_module.nil? ? "" : "#{docs.status_module}/"
+
+          metadata = docs.metadata.merge(
+            source: source_url(component),
+            lookbook: lookbook_url(component),
+            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 docs.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
+
+            args = []
+            docs.params.each do |tag|
+              default_value = pretty_default_value(tag, component)
+
+              args << {
+                "name" => tag.name,
+                "type" => tag.types.join(", "),
+                "default" => default_value,
+                "description" => view_context.render(inline: tag.text.squish)
+              }
+
+              f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text.squish)} |")
+            end
+
+            component_args = {
+              "component" => metadata[:title],
+              "status" => component.status.to_s,
+              "source" => metadata[:source],
+              "lookbook" => metadata[:lookbook],
+              "parameters" => args
+            }
+
+            args_for_components << component_args
+
+            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 manifest.components_with_examples.include?(component)
+              errors << { component.name => { example: "No examples found" } }
+            end
+          end
+        end
+
+        # Build system arguments docs from BaseComponent
+        system_args_docs = registry.find(Yattho::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
+
+        [args_for_components, 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.components_with_docs.sort_by(&:name).each(&block)
+      end
+
+      def manifest
+        Yattho::YARD::ComponentManifest
+      end
+
+      def source_url(component)
+        path = component.name.split("::").map(&:underscore).join("/")
+
+        "https://github.com/yattho/view_components/tree/main/app/components/#{path}.rb"
+      end
+
+      def lookbook_url(component)
+        path = component.name.underscore.gsub("_component", "")
+
+        "https://yattho.com/view-components/lookbook/inspect/#{path}/default/"
+      end
+
+      def example_path(component)
+        example_path = "../../src/@yattho/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/@yattho/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/yattho/yard/registry.rb

@@ -0,0 +1,146 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+require "yattho/view_components"
+require "yattho/yard/docs_helper"
+require "view_component/test_helpers"
+
+module Yattho
+  module YARD
+    # A wrapper around a YARD class reference that provides convenience methods
+    # for extracting component parameters, accessibility status, etc.
+    class RegistryEntry
+      include DocsHelper
+
+      attr_reader :component, :docs
+
+      delegate_missing_to :docs
+
+      def initialize(component, docs)
+        @component = component
+        @docs = docs
+      end
+
+      def metadata
+        @metadata ||= begin
+          status_module, short_name, class_name = status_module_and_short_name(component)
+          status = component.status.to_s
+          a11y_reviewed = component.audited_at.nil? ? "false" : "true"
+
+          {
+            title: class_name,
+            component_id: short_name.underscore,
+            status: status.capitalize,
+            status_module: status_module,
+            short_name: short_name,
+            a11y_reviewed: a11y_reviewed
+          }
+        end
+      end
+
+      def constructor
+        docs.meths.find(&:constructor?)
+      end
+
+      def params
+        constructor.tags(:param)
+      end
+
+      def slot_methods
+        public_methods.select { |mtd| slot_method?(mtd) }
+      end
+
+      def non_slot_methods
+        public_methods.reject { |mtd| slot_method?(mtd) }
+      end
+
+      def slot_method?(mtd)
+        mtd[:renders_one] || mtd[:renders_many]
+      end
+
+      def public_methods
+        # Returns: only public methods that belong to this class (i.e. no inherited methods)
+        # excluding the constructor
+        @public_methods ||=
+          docs.meths.reject { |mtd| mtd.tag(:private) || mtd.name == :initialize }
+      end
+
+      def title
+        metadata[:title]
+      end
+
+      def component_id
+        metadata[:component_id]
+      end
+
+      def status
+        metadata[:status]
+      end
+
+      def status_module
+        metadata[:status_module]
+      end
+
+      def short_name
+        metadata[:short_name]
+      end
+
+      def a11y_reviewed?
+        metadata[:a11y_reviewed]
+      end
+
+      def requires_js?
+        manifest.components_requiring_js.include?(component)
+      end
+
+      def includes_examples?
+        manifest.components_with_examples.include?(component)
+      end
+
+      private
+
+      def manifest
+        Yattho::YARD::ComponentManifest
+      end
+    end
+
+    # Wrapper around an instance of YARD::Registry that provides easy access to component
+    # documentation.
+    class Registry
+      class << self
+        include ViewComponent::TestHelpers
+        include Yattho::ViewHelper
+        include Yattho::YARD::DocsHelper
+
+        def make
+          registry = ::YARD::RegistryStore.new
+          registry.load!(".yardoc")
+
+          new(registry)
+        end
+      end
+
+      attr_reader :yard_registry
+
+      def initialize(yard_registry)
+        @yard_registry = yard_registry
+      end
+
+      def find(component)
+        return entries[component] if entries.include?(component)
+
+        return unless (docs = yard_registry.get(component.name))
+
+        entries[component] = RegistryEntry.new(component, docs)
+      end
+
+      private
+
+      def entries
+        @entries ||= {}
+      end
+    end
+  end
+end
+# :nocov:

data/lib/yattho/yard/renders_many_handler.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Yattho
+  module YARD
+    # YARD Handler to parse `renders_many` calls.
+    class RendersManyHandler < ::YARD::Handlers::Ruby::Base
+      handles method_call(:renders_many)
+      namespace_only
+
+      process do
+        name = statement.parameters.first.jump(:tstring_content, :ident).source
+        object = ::YARD::CodeObjects::MethodObject.new(namespace, name)
+        register(object)
+        parse_block(statement.last, owner: object)
+
+        object.dynamic = true
+        object[:renders_many] = true
+      end
+    end
+  end
+end
+# :nocov:

data/lib/yattho/yard/renders_one_handler.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Yattho
+  module YARD
+    # YARD Handler to parse `renders_one` calls.
+    class RendersOneHandler < ::YARD::Handlers::Ruby::Base
+      handles method_call(:renders_one)
+      namespace_only
+
+      process do
+        name = statement.parameters.first.jump(:tstring_content, :ident).source
+        object = ::YARD::CodeObjects::MethodObject.new(namespace, name)
+        register(object)
+        parse_block(statement.last, owner: object)
+
+        object.dynamic = true
+        object[:renders_one] = true
+      end
+    end
+  end
+end
+# :nocov:

data/previews/docs/alpha_auto_complete_item_preview/default.html.erb

@@ -0,0 +1,10 @@
+<%= render(Yattho::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
+  <% component.results(classes: "custom-class") do %>
+    <%= render(Yattho::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
+      Apple
+    <% end %>
+    <%= render(Yattho::Alpha::AutoComplete::Item.new(value: "orange")) do %>
+      Orange
+    <% end %>
+  <% end %>
+<% end %>

data/previews/docs/alpha_auto_complete_item_preview.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Docs
+  class AlphaAutoCompleteItemPreview < ViewComponent::Preview
+    def default; end
+  end
+end

data/previews/docs/alpha_auto_complete_preview/default.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>

data/previews/docs/alpha_auto_complete_preview/with_clear_button.html.erb

@@ -0,0 +1 @@
+<%= render(Yattho::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>

data/previews/docs/alpha_auto_complete_preview/with_custom_classes_for_the_input.html.erb

@@ -0,0 +1,3 @@
+<%= render(Yattho::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
+  <% component.with_input(classes: "custom-class") %>
+<% end %>