primer_view_components 0.0.1 → 0.0.7

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

data/app/components/primer/flex_item_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Primer
+  class FlexItemComponent < Primer::Component
+    FLEX_AUTO_DEFAULT = false
+    FLEX_AUTO_ALLOWED_VALUES = [FLEX_AUTO_DEFAULT, true]
+
+    def initialize(flex_auto: FLEX_AUTO_DEFAULT, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:classes] =
+        class_names(
+          @kwargs[:classes],
+          "flex-auto" => fetch_or_fallback(FLEX_AUTO_ALLOWED_VALUES, flex_auto, FLEX_AUTO_DEFAULT)
+        )
+    end
+
+    def call
+      render(Primer::BoxComponent.new(**@kwargs)) { content }
+    end
+  end
+end

data/app/components/primer/heading_component.rb

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

data/app/components/primer/label_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Primer
+  class LabelComponent < Primer::Component
+    SCHEME_MAPPINGS = {
+      # gray
+      gray: "Label--gray",
+      dark_gray: "Label--gray-darker",
+
+      # colored
+      yellow: "Label--yellow",
+      orange: "Label--orange",
+      red: "Label--red",
+      green: "Label--green",
+      blue: "Label--blue",
+      purple: "Label--purple",
+      pink: "Label--pink",
+
+      # Deprecated
+      outline: "Label--outline",
+      green_outline: "Label--outline-green",
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys << nil
+
+    VARIANT_MAPPINGS = {
+      large: "Label--large",
+      inline: "Label--inline",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
+
+    def initialize(title:, scheme: nil, variant: nil, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:bg] = :blue if scheme.nil?
+      @kwargs[:tag] ||= :span
+      @kwargs[:title] = title
+      @kwargs[:classes] = class_names(
+        "Label",
+        kwargs[:classes],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme)],
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant)]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= render(Primer::FlexComponent.new(**@kwargs)) do %>
+  <% if @side == :left %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
+      <%= sidebar %>
+    <% end %>
+  <% end %>
+
+  <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @main_col] : @main_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
+    <%= main %>
+  <% end %>
+
+  <% if @side == :right %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)) do %>
+      <%= sidebar %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/layout_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  class LayoutComponent < Primer::Component
+    with_content_areas :main, :sidebar
+
+    DEFAULT_SIDE = :right
+    ALLOWED_SIDES = [DEFAULT_SIDE, :left].freeze
+
+    MAX_COL = 12
+    DEFAULT_SIDEBAR_COL = 3
+    ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
+
+    def initialize(responsive: false, side: DEFAULT_SIDE, sidebar_col: DEFAULT_SIDEBAR_COL, **kwargs)
+      @kwargs = kwargs
+      @side = fetch_or_fallback(ALLOWED_SIDES, side.to_sym, DEFAULT_SIDE)
+      @responsive = responsive
+      @kwargs[:classes] = class_names(
+        "gutter-condensed gutter-lg",
+        @kwargs[:classes]
+      )
+      @kwargs[:direction] = responsive ? [:column, nil, :row] : nil
+
+      @sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
+      @main_col = MAX_COL - @sidebar_col
+    end
+  end
+end

data/app/components/primer/link_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Primer
+  class LinkComponent < Primer::Component
+    def initialize(href:, muted: false, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] = :a
+      @kwargs[:href] = href
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "muted-link" => fetch_or_fallback([true, false], muted, false)
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <%= render body.component do %>
+    <% if heading %>
+      <%= render heading.component do %>
+        <%= heading.content %>
+      <% end %>
+    <% end %>
+    <%= body.content %>
+  <% end %>
+<% end %>

data/app/components/primer/popover_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Primer
+  class PopoverComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :heading, class_name: "Heading"
+    with_slot :body, class_name: "Body"
+
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] ||= :div
+      @kwargs[:classes] = class_names(
+        kwargs[:classes],
+        "Popover"
+      )
+      @kwargs[:position] ||= :relative
+      @kwargs[:right] = false unless kwargs.key?(:right)
+      @kwargs[:left] = false unless kwargs.key?(:left)
+    end
+
+    def render?
+      body.present?
+    end
+
+    class Heading < ViewComponent::Slot
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:mb] ||= 2
+        @kwargs[:tag] ||= :h4
+      end
+
+      def component
+        Primer::HeadingComponent.new(**@kwargs)
+      end
+    end
+
+    class Body < Slot
+      CARET_DEFAULT = :top
+      CARET_MAPPINGS = {
+        CARET_DEFAULT => "",
+        :bottom => "Popover-message--bottom",
+        :bottom_right => "Popover-message--bottom-right",
+        :bottom_left => "Popover-message--bottom-left",
+        :left => "Popover-message--left",
+        :left_bottom => "Popover-message--left-bottom",
+        :left_top => "Popover-message--left-top",
+        :right => "Popover-message--right",
+        :right_bottom => "Popover-message--right-bottom",
+        :right_top => "Popover-message--right-top",
+        :top_left => "Popover-message--top-left",
+        :top_right => "Popover-message--top-right"
+      }.freeze
+
+      def initialize(caret: CARET_DEFAULT, large: false, **kwargs)
+        @kwargs = kwargs
+        @kwargs[:classes] = class_names(
+          kwargs[:classes],
+          "Popover-message Box",
+          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+          "Popover-message--large" => large
+        )
+        @kwargs[:p] ||= 4
+        @kwargs[:mt] ||= 2
+        @kwargs[:mx] ||= :auto
+        @kwargs[:text_align] ||= :left
+        @kwargs[:box_shadow] ||= :large
+      end
+
+      def component
+        Primer::BoxComponent.new(**@kwargs)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <% items.each do |item| %>
+    <%= render Primer::BaseComponent.new(**item.kwargs) %>
+  <% end %>
+<% end %>

data/app/components/primer/progress_bar_component.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+##
+# Use progress components to visualize task completion.
+
+## Basic example
+#
+# The `Primer::ProgressBarComponent` can take the following arguments:
+#
+# 1. `size` (string). Can be "small" or "large". Increases the height of the progress bar.
+#
+# The `Primer::ProgressBarComponent` 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 accepts a `percentage` parameter, which is used to set the width of the completed bar.
+#
+# ```ruby
+#   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
+#     <% component.slot(:item, bg: :blue-4, percentage: 50) %>
+#   <% end %>
+# ```
+##
+module Primer
+  class ProgressBarComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :item, collection: true, class_name: "Item"
+
+    SIZE_DEFAULT = :default
+
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      :small => "Progress--small",
+      :large => "Progress--large",
+    }.freeze
+
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(size: SIZE_DEFAULT, percentage: 0, **kwargs)
+      @kwargs = kwargs
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "Progress",
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+      )
+      @kwargs[:tag] = :span
+
+    end
+
+    def render?
+      items.any?
+    end
+
+    class Item < ViewComponent::Slot
+      include ClassNameHelper
+      attr_reader :kwargs
+
+      def initialize(percentage: 0, bg: :green, **kwargs)
+        @percentage = percentage
+        @kwargs = kwargs
+
+        @kwargs[:tag] = :span
+        @kwargs[:bg] = bg
+        @kwargs[:style] = "width: #{@percentage}%;"
+        @kwargs[:classes] = class_names("Progress-item", @kwargs[:classes])
+      end
+    end
+  end
+end

data/app/components/primer/slot.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Primer
+  class Slot < ViewComponent::Slot
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+  end
+end

data/app/components/primer/state_component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Primer
+  class StateComponent < Primer::Component
+    # Component for rendering the status of an item
+    #
+    # title(string): (required) title attribute
+    # color(symbol): label background color
+    # size(symbol): label size
+    # counter(integer): counter value
+    # **args(hash): utility parameters for Primer::Classify
+    COLOR_DEFAULT = :default
+    COLOR_MAPPINGS = {
+      COLOR_DEFAULT => "",
+      :green => "State--green",
+      :red => "State--red",
+      :purple => "State--purple",
+    }.freeze
+    COLOR_OPTIONS = COLOR_MAPPINGS.keys
+
+    SIZE_DEFAULT = :default
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      :small => "State--small",
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    TAG_DEFAULT = :span
+    TAG_OPTIONS = [TAG_DEFAULT, :div, :a]
+
+    def initialize(
+      title:,
+      color: COLOR_DEFAULT,
+      tag: TAG_DEFAULT,
+      size: SIZE_DEFAULT,
+      **kwargs
+    )
+      @kwargs = kwargs
+      @kwargs[:title] = title
+      @kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "State",
+        COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@kwargs)) { content }
+    end
+  end
+end