primer_view_components 0.0.1 → 0.0.3

data/app/components/primer/border_box_component.html.erb

@@ -0,0 +1,26 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <% if header %>
+    <%= render Primer::BaseComponent.new(**header.kwargs) do %>
+      <%= header.content %>
+    <% end %>
+  <% end %>
+  <% if body %>
+    <%= render Primer::BaseComponent.new(**body.kwargs) do %>
+      <%= body.content %>
+    <% end %>
+  <% end %>
+  <% if rows.any? %>
+    <ul>
+      <% rows.each do |row| %>
+        <%= render Primer::BaseComponent.new(**row.kwargs) do %>
+          <%= row.content %>
+        <% end %>
+      <% end %>
+    </ul>
+  <% end %>
+  <% if footer %>
+    <%= render Primer::BaseComponent.new(**footer.kwargs) do %>
+      <%= footer.content %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/border_box_component.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Primer
+  class BorderBoxComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :header, class_name: "Header"
+    with_slot :body, class_name: "Body"
+    with_slot :footer, class_name: "Footer"
+    with_slot :row, collection: true, class_name: "Row"
+
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :div
+      @kwargs[:classes] = class_names(
+        "Box",
+        kwargs[:classes]
+      )
+    end
+
+    def render?
+      rows.any? || header.present? || body.present? || footer.present?
+    end
+
+    class Header < Primer::Slot
+
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "Box-header",
+          kwargs[:classes]
+        )
+      end
+    end
+
+    class Body < Primer::Slot
+
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "Box-body",
+          kwargs[:classes]
+        )
+      end
+    end
+
+    class Footer < Primer::Slot
+
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(
+          "Box-footer",
+          kwargs[:classes]
+        )
+      end
+    end
+
+    class Row < Primer::Slot
+
+      attr_reader :kwargs
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :li
+        @kwargs[:classes] = class_names(
+          "Box-row",
+          kwargs[:classes]
+        )
+      end
+    end
+  end
+end

data/app/components/primer/box_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  class BoxComponent < Primer::Component
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :div
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

data/app/components/primer/breadcrumb_component.html.erb

@@ -0,0 +1,8 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <ol>
+    <% items.each do |item| %>
+      <%# The <li> and <a> need to be on the same line to prevent unwanted whitespace %>
+      <%= render Primer::BaseComponent.new(**item.kwargs) do %><%- if item.href.present? %><a href="<%= item.href %>"><%= item.content %></a><%- else %><%= item.content %><%- end %><%- end %>
+    <% end %>
+  </ol>
+<% end %>

data/app/components/primer/breadcrumb_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+##
+# Breadcrumbs are used to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item which is a plain string indicating the current page.
+#
+# ## Example
+#
+# The `Primer::BreadcrumbComponent` uses the [Slots API](https://github.com/github/view_component#slots-experimental) and at least one slot is required for the component to render. Each slot can accept the following parameters:
+#
+# 1. `href` (string). The URL to link to.
+# 2. `selected` (boolean, default=false). Flag indicating whether or not the item is selected and not rendered as a link.
+#
+# Note that if if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link.
+#
+# ```ruby
+# <%= render(Primer::BreadcrumbComponent.new) do |component| %>
+#   <% component.slot(:item, href: "/") do %>Home<% end %>
+#   <% component.slot(:item, href: "/about") do %>About<% end %>
+#   <% component.slot(:item, selected: true) do %>Team<% end %>
+# <% end %>
+# ```
+##
+module Primer
+  class BreadcrumbComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :item, collection: true, class_name: "BreadcrumbItem"
+
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :nav
+      @kwargs[:aria] = { label: "Breadcrumb" }
+    end
+
+    def render?
+      items.any?
+    end
+
+    class BreadcrumbItem < Primer::Slot
+      attr_reader :href, :kwargs
+
+      def initialize(href: nil, selected: false, **kwargs)
+        @href, @kwargs = href, kwargs
+
+        @href = nil if selected
+        @kwargs[:tag] = :li
+        @kwargs[:"aria-current"] = "page" if selected
+        @kwargs[:classes] = "breadcrumb-item #{@kwargs[:classes]}"
+      end
+    end
+  end
+end

data/app/components/primer/button_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Primer
+  class ButtonComponent < Primer::Component
+    DEFAULT_BUTTON_TYPE = :default
+    BUTTON_TYPE_MAPPINGS = {
+      DEFAULT_BUTTON_TYPE => "",
+      :primary => "btn-primary",
+      :danger => "btn-danger",
+      :outline => "btn-outline"
+    }.freeze
+    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+
+    DEFAULT_VARIANT = :medium
+    VARIANT_MAPPINGS = {
+      :small => "btn-sm",
+      DEFAULT_VARIANT => "",
+      :large => "btn-large",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG, :a].freeze
+
+    DEFAULT_TYPE = :button
+    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+    def initialize(
+      button_type: DEFAULT_BUTTON_TYPE,
+      variant: DEFAULT_VARIANT,
+      tag: DEFAULT_TAG,
+      type: DEFAULT_TYPE,
+      group_item: false,
+      **kwargs
+    )
+      @kwargs = kwargs
+      @kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+      if @kwargs[:tag] == :a
+        @kwargs[:role] = :button
+      else
+        @kwargs[:type] = type
+      end
+
+      @kwargs[:classes] = class_names(
+        "btn",
+        kwargs[:classes],
+        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type.to_sym, DEFAULT_BUTTON_TYPE)],
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
+        group_item ? "BtnGroup-item" : ""
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

data/app/components/primer/component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Primer
+  class Component < ViewComponent::Base
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+    include OcticonsHelper
+  end
+end

data/app/components/primer/counter_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Primer
+  class CounterComponent < Primer::Component
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "Counter",
+      :gray => "Counter Counter--gray",
+      :light_gray => "Counter Counter--gray-light",
+    }.freeze
+
+    def initialize(
+      count: 0,
+      scheme: DEFAULT_SCHEME,
+      limit: 5_000,
+      hide_if_zero: false,
+      text: "",
+      round: false,
+      **kwargs
+    )
+      @count, @limit, @hide_if_zero, @text, @round, @kwargs = count, limit, hide_if_zero, text, round, kwargs
+
+      @kwargs[:title] = title
+      @kwargs[:tag] = :span
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)]
+      )
+      if count == 0 && hide_if_zero
+        @kwargs[:hidden] = true
+      end
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { value }
+    end
+
+    private
+
+    def title
+      if @text.present?
+        @text
+      elsif @count.nil?
+        "Not available"
+      elsif @count == Float::INFINITY
+        "Infinity"
+      else
+        count = @count.to_i
+        str = number_with_delimiter([count, @limit].min)
+        str += "+" if count > @limit
+        str
+      end
+    end
+
+    def value
+      if @text.present?
+        @text
+      elsif @count.nil?
+        "" # CSS will hide it
+      elsif @count == Float::INFINITY
+        "∞"
+      else
+        if @round
+          count = [@count.to_i, @limit].min
+          precision = count.between?(100_000, 999_999) ? 0 : 1
+          units = {thousand: "k", million: "m", billion: "b"}
+          str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
+        else
+          @count = @count.to_i
+          str = number_with_delimiter([@count, @limit].min)
+        end
+
+        str += "+" if @count.to_i > @limit
+        str
+      end
+    end
+  end
+end

data/app/components/primer/details_component.html.erb

@@ -0,0 +1,6 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <%= render Primer::BaseComponent.new(**@summary_kwargs) do %>
+    <%= summary %>
+  <% end %>
+  <%= body %>
+<% end %>

data/app/components/primer/details_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  #
+  # overlay - options are `none`, `default` and `dark`. Dictates the type of overlay to render with.
+  # button - options are `default` and `reset`. default will make the target a default primer ``.btn`
+  #          reset will remove all styles from the <summary> element.
+  #
+  class DetailsComponent < Primer::Component
+    OVERLAY_DEFAULT = :none
+    OVERLAY_MAPPINGS = {
+      OVERLAY_DEFAULT => "",
+      :default => "details-overlay",
+      :dark => "details-overlay details-overlay-dark",
+    }.freeze
+
+    BUTTON_DEFAULT = :default
+    BUTTON_RESET = :reset
+    BUTTON_OPTIONS = [BUTTON_DEFAULT, BUTTON_RESET]
+
+    with_content_areas :summary, :body
+
+    def initialize(overlay: OVERLAY_DEFAULT, button: BUTTON_DEFAULT, **kwargs)
+      @button = fetch_or_fallback(BUTTON_OPTIONS, button, BUTTON_DEFAULT)
+
+      @kwargs = kwargs
+      @kwargs[:tag] = :details
+      @kwargs[:classes] = class_names(
+        kwargs[:classes],
+        OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, OVERLAY_DEFAULT)],
+        "details-reset" => @button == BUTTON_RESET
+      )
+
+      @summary_kwargs = { tag: :summary, role: "button" }
+      @summary_kwargs[:classes] = "btn" if @button == BUTTON_DEFAULT
+    end
+  end
+end

data/app/components/primer/dropdown_menu_component.html.erb

@@ -0,0 +1,8 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <% if @header.present? %>
+    <div class="dropdown-header">
+      <%= @header %>
+    </div>
+  <% end %>
+  <%= content %>
+<% end %>

data/app/components/primer/dropdown_menu_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  class DropdownMenuComponent < Primer::Component
+    SCHEME_DEFAULT = :default
+    SCHEME_MAPPINGS = {
+      SCHEME_DEFAULT => "",
+      :dark => "dropdown-menu-dark",
+    }.freeze
+
+    DIRECTION_DEFAULT = :se
+    DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s]
+
+    def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **kwargs)
+      @header, @direction, @kwargs = header, direction, kwargs
+
+      @kwargs[:tag] = "details-menu"
+      @kwargs[:role] = "menu"
+
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "dropdown-menu",
+        "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
+      )
+    end
+  end
+end

data/app/components/primer/flex_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Primer
+  class FlexComponent < Primer::Component
+    JUSTIFY_CONTENT_DEFAULT = nil
+    JUSTIFY_CONTENT_MAPPINGS = {
+      flex_start: "flex-justify-start",
+      flex_end: "flex-justify-end",
+      center: "flex-justify-center",
+      space_between: "flex-justify-between",
+      space_around: "flex-justify-around",
+    }
+    JUSTIFY_CONTENT_OPTIONS = [JUSTIFY_CONTENT_DEFAULT, *JUSTIFY_CONTENT_MAPPINGS.keys]
+
+    ALIGN_ITEMS_DEFAULT = nil
+    ALIGN_ITEMS_MAPPINGS = {
+      start: "flex-items-start",
+      end: "flex-items-end",
+      center: "flex-items-center",
+      baseline: "flex-items-baseline",
+      stretch: "flex-items-stretch",
+    }
+    ALIGN_ITEMS_OPTIONS = [ALIGN_ITEMS_DEFAULT, *ALIGN_ITEMS_MAPPINGS.keys]
+
+    INLINE_DEFAULT = false
+    INLINE_OPTIONS = [INLINE_DEFAULT, true]
+
+    FLEX_WRAP_DEFAULT = nil
+    FLEX_WRAP_OPTIONS = [FLEX_WRAP_DEFAULT, true, false]
+
+    DEFAULT_DIRECTION = nil
+    ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse]
+
+    def initialize(
+      justify_content: JUSTIFY_CONTENT_DEFAULT,
+      inline: INLINE_DEFAULT,
+      flex_wrap: FLEX_WRAP_DEFAULT,
+      align_items: ALIGN_ITEMS_DEFAULT,
+      direction: nil,
+      **kwargs
+    )
+      @align_items = fetch_or_fallback(ALIGN_ITEMS_OPTIONS, align_items, ALIGN_ITEMS_DEFAULT)
+      @justify_content = fetch_or_fallback(JUSTIFY_CONTENT_OPTIONS, justify_content, JUSTIFY_CONTENT_DEFAULT)
+      @flex_wrap = fetch_or_fallback(FLEX_WRAP_OPTIONS, flex_wrap, FLEX_WRAP_DEFAULT)
+
+      # Support direction argument that is an array
+      @direction =
+        if (Array(direction) - ALLOWED_DIRECTIONS).empty?
+          direction
+        else
+          DEFAULT_DIRECTION
+        end
+
+      @kwargs = kwargs.merge({ direction: @direction }.compact)
+      @kwargs[:classes] = class_names(@kwargs[:classes], component_class_names)
+      @kwargs[:display] = fetch_or_fallback(INLINE_OPTIONS, inline, INLINE_DEFAULT) ? :inline_flex : :flex
+    end
+
+    def call
+      render(Primer::BoxComponent.new(**@kwargs)) { content }
+    end
+
+    private
+
+    def component_class_names
+      out = []
+      out << JUSTIFY_CONTENT_MAPPINGS[@justify_content]
+      out << ALIGN_ITEMS_MAPPINGS[@align_items]
+
+      out <<
+        case @flex_wrap
+        when true
+          "flex-wrap"
+        when false
+          "flex-nowrap"
+        end
+
+      out.compact.join(" ")
+    end
+  end
+end