primer_view_components 0.0.1 → 0.0.3

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

@@ -0,0 +1,11 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <% if actions && @align == :right %>
+    <%= actions %>
+  <% end %>
+  <%= render Primer::BaseComponent.new(tag: :ul, classes: "UnderlineNav-body list-style-none") do %>
+    <%= body %>
+  <% end %>
+  <% if actions && @align == :left %>
+    <%= actions %>
+  <% end %>
+<% end %>

data/app/components/primer/underline_nav_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Primer
+  class UnderlineNavComponent < Primer::Component
+    ALIGN_DEFAULT = :left
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right]
+
+    with_content_areas :body, :actions
+
+    def initialize(align: ALIGN_DEFAULT, **kwargs)
+      @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+
+      @kwargs = kwargs
+      @kwargs[:tag] = :nav
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "UnderlineNav",
+        "UnderlineNav--right" => @align == :right
+      )
+    end
+  end
+end

data/app/components/primer/view_components.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "active_support/core_ext"
+
+# ViewComponent
+
+require "view_component/engine"
+
+# Octicons
+
+require "octicons_helper/helper"
+
+# Helpers
+
+require "primer/class_name_helper"
+require "primer/classify"
+require "primer/fetch_or_fallback_helper"
+
+# Base configurations
+
+require_relative "component"
+require_relative "base_component"
+require_relative "slot"
+
+# Components
+
+require_relative "avatar_component"
+require_relative "blankslate_component"
+require_relative "border_box_component"
+require_relative "box_component"
+require_relative "breadcrumb_component"
+require_relative "button_component"
+require_relative "counter_component"
+require_relative "details_component"
+require_relative "dropdown_menu_component"
+require_relative "flex_component"
+require_relative "flex_item_component"
+require_relative "heading_component"
+require_relative "label_component"
+require_relative "layout_component"
+require_relative "link_component"
+require_relative "progress_bar_component"
+require_relative "state_component"
+require_relative "subhead_component"
+require_relative "text_component"
+require_relative "timeline_item_component"
+require_relative "underline_nav_component"

data/lib/primer/class_name_helper.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+# Inspired by https://github.com/JedWatson/classnames
+#
+# Helps build a list of conditional class names
+module Primer
+  module ClassNameHelper
+    def class_names(*args)
+      classes = []
+
+      args.each do |class_name|
+        case class_name
+        when String
+          classes << class_name if class_name.present?
+        when Hash
+          class_name.each do |key, val|
+            classes << key if val
+          end
+        when Array
+          classes << class_names(*class_name).presence
+        end
+      end
+
+      classes.compact.uniq.join(" ")
+    end
+  end
+end

data/lib/primer/classify.rb

@@ -0,0 +1,237 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    MARGIN_DIRECTION_KEYS = [:mt, :ml, :mb, :mr]
+    SPACING_KEYS = ([:m, :my, :mx, :p, :py, :px, :pt, :pl, :pb, :pr] + MARGIN_DIRECTION_KEYS).freeze
+    DIRECTION_KEY = :direction
+    JUSTIFY_CONTENT_KEY = :justify_content
+    ALIGN_ITEMS_KEY = :align_items
+    DISPLAY_KEY = :display
+    RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
+    BREAKPOINTS = ["", "-sm", "-md", "-lg"]
+
+    # Keys where we can simply translate { key: value } into ".key-value"
+    CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text].freeze
+
+    INVALID_CLASS_NAME_PREFIXES =
+      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+
+    COLOR_KEY = :color
+    BG_KEY = :bg
+    VERTICAL_ALIGN_KEY = :vertical_align
+    WORD_BREAK_KEY = :word_break
+    TEXT_KEYS = [:text_align, :font_weight]
+    FLEX_KEY = :flex
+    FLEX_GROW_KEY = :flex_grow
+    FLEX_SHRINK_KEY = :flex_shrink
+    ALIGN_SELF_KEY = :align_self
+    WIDTH_KEY = :width
+    HEIGHT_KEY = :height
+
+
+    BOOLEAN_MAPPINGS = {
+      underline: {
+        mappings: [
+          {
+            value: true,
+            css_class: "text-underline",
+          },
+          {
+            value: false,
+            css_class: "no-underline",
+          },
+        ],
+      },
+      top: {
+        mappings: [
+          {
+            value: false,
+            css_class: "top-0"
+          }
+        ]
+      },
+      bottom: {
+        mappings: [
+          {
+            value: false,
+            css_class: "bottom-0"
+          }
+        ]
+      },
+      left: {
+        mappings: [
+          {
+            value: false,
+            css_class: "left-0"
+          }
+        ]
+      },
+      right: {
+        mappings: [
+          {
+            value: false,
+            css_class: "right-0"
+          }
+        ]
+      }
+    }.freeze
+    BORDER_KEYS = [:border, :border_color].freeze
+    TYPOGRAPHY_KEYS = [:font_size].freeze
+    VALID_KEYS = (
+      CONCAT_KEYS +
+      BOOLEAN_MAPPINGS.keys +
+      BORDER_KEYS +
+      TYPOGRAPHY_KEYS +
+      TEXT_KEYS +
+      [
+        COLOR_KEY,
+        BG_KEY,
+        DISPLAY_KEY,
+        VERTICAL_ALIGN_KEY,
+        WORD_BREAK_KEY,
+        DIRECTION_KEY,
+        JUSTIFY_CONTENT_KEY,
+        ALIGN_ITEMS_KEY,
+        FLEX_KEY,
+        FLEX_GROW_KEY,
+        FLEX_SHRINK_KEY,
+        ALIGN_SELF_KEY,
+        WIDTH_KEY,
+        HEIGHT_KEY
+      ]
+    ).freeze
+
+    class << self
+      def call(classes: "", style: nil, **args)
+        extracted_results = extract_hash(args)
+
+        {
+          class: [validated_class_names(classes), extracted_results[:classes]].compact.join(" ").presence,
+          style: [extracted_results[:styles], style].compact.join("").presence,
+        }.merge(extracted_results.except(:classes, :styles))
+      end
+
+      private
+
+      def validated_class_names(classes)
+        return unless classes.present?
+
+        if ENV["RAILS_ENV"] == "development"
+          invalid_class_names =
+            classes.split(" ").each_with_object([]) do |class_name, memo|
+              if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
+                memo << class_name
+              end
+            end
+
+          if invalid_class_names.any?
+            raise ArgumentError.new(
+              "Primer CSS class #{'name'.pluralize(invalid_class_names.length)} \
+              #{invalid_class_names.to_sentence} #{'is'.pluralize(invalid_class_names.length)} \
+              not allowed, use hash syntax instead. This warning will not be raised in production.",
+            )
+          end
+        end
+
+        classes
+      end
+
+      # NOTE: This is a fairly naive implementation that we're building as we go.
+      # Feel free to refactor as this is thoroughly tested.
+      #
+      # Utility for mapping component configuration into Primer CSS class names
+      #
+      # styles_hash - A hash with utility keys that mimic the interface used by https://github.com/primer/components
+      #
+      # Returns a string of Primer CSS class names to be added to an HTML class attribute
+      #
+      # Example usage:
+      # extract_hash({ mt: 4, py: 2 }) => "mt-4 py-2"
+      def extract_hash(styles_hash)
+        out = styles_hash.each_with_object({ classes: [], styles: [] }) do |(key, value), memo|
+          next unless VALID_KEYS.include?(key)
+
+          if value.is_a?(Array) && !RESPONSIVE_KEYS.include?(key)
+            raise ArgumentError, "#{key} does not support responsive values"
+          end
+
+          Array(value).each_with_index do |val, index|
+            next if val.nil?
+
+            if SPACING_KEYS.include?(key)
+              if MARGIN_DIRECTION_KEYS.include?(key)
+                raise ArgumentError, "value must be between -6 and 6" if (val < -6 || val > 6)
+              else
+                raise ArgumentError, "value must be between 0 and 6" if (val < 0 || val > 6)
+              end
+            end
+
+            dasherized_val = val.to_s.dasherize
+            breakpoint = BREAKPOINTS[index]
+
+            if BOOLEAN_MAPPINGS.has_key?(key)
+              BOOLEAN_MAPPINGS[key][:mappings].map { |m| m[:css_class] if m[:value] == val }.compact.each do |css_class|
+                memo[:classes] << css_class
+              end
+            elsif key == BG_KEY
+              if val.to_s.starts_with?("#")
+                memo[:styles] << "background-color: #{val};"
+              else
+                memo[:classes] << "bg-#{dasherized_val}"
+              end
+            elsif key == COLOR_KEY
+              if val.to_s.chars.last !~ /\D/
+                memo[:classes] << "color-#{dasherized_val}"
+              else
+                memo[:classes] << "text-#{dasherized_val}"
+              end
+            elsif key == DISPLAY_KEY
+              memo[:classes] << "d#{breakpoint}-#{dasherized_val}"
+            elsif key == VERTICAL_ALIGN_KEY
+              memo[:classes] << "v-align-#{dasherized_val}"
+            elsif key == WORD_BREAK_KEY
+              memo[:classes] << "wb-#{dasherized_val}"
+            elsif BORDER_KEYS.include?(key)
+              memo[:classes] << "border-#{dasherized_val}"
+            elsif key == DIRECTION_KEY
+              memo[:classes] << "flex#{breakpoint}-#{dasherized_val}"
+            elsif key == JUSTIFY_CONTENT_KEY
+              formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
+              memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
+            elsif key == ALIGN_ITEMS_KEY
+              memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub("flex_", "")}"
+            elsif key == FLEX_KEY
+              memo[:classes] << "flex-#{val}"
+            elsif key == FLEX_GROW_KEY
+              memo[:classes] << "flex-grow-#{val}"
+            elsif key == FLEX_SHRINK_KEY
+              memo[:classes] << "flex-shrink-#{val}"
+            elsif key == ALIGN_SELF_KEY
+              memo[:classes] << "flex-self-#{val}"
+            elsif key == WIDTH_KEY || key == HEIGHT_KEY
+              if val == :fit || val == :fill
+                memo[:classes] << "#{key}-#{val}"
+              else
+                memo[key] = val
+              end
+            elsif TEXT_KEYS.include?(key)
+              memo[:classes] << "text-#{dasherized_val}"
+            elsif TYPOGRAPHY_KEYS.include?(key)
+              memo[:classes] << "f#{dasherized_val}"
+            elsif MARGIN_DIRECTION_KEYS.include?(key) && val < 0
+              memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
+            else
+              memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{dasherized_val}"
+            end
+          end
+        end
+
+        {
+          classes: out[:classes].join(" "),
+          styles: out[:styles].join(" ")
+        }.merge(out.except(:classes, :styles))
+      end
+    end
+  end
+end

data/lib/primer/fetch_or_fallback_helper.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# Primer::FetchOrFallbackHelper
+# A little helper to enable graceful fallbacks
+#
+# Use this helper to quietly ensure a value is
+# one that you expect:
+#
+# allowed_values  - allowed options for *value*
+# given_value     - input being coerced
+# fallback        - returned if *given_value* is not included in *allowed_values*
+#
+# fetch_or_fallback([1,2,3], 5, 2) => 2
+# fetch_or_fallback([1,2,3], 1, 2) => 1
+# fetch_or_fallback([1,2,3], nil, 2) => 2
+module Primer
+  module FetchOrFallbackHelper
+    mattr_accessor :fallback_raises, default: true
+
+    InvalidValueError = Class.new(StandardError)
+
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil)
+      if allowed_values.include?(given_value)
+        given_value
+      else
+        if fallback_raises && ENV["RAILS_ENV"] != "production"
+          raise InvalidValueError, <<~MSG
+            fetch_or_fallback was called with an invalid value.
+
+            Expected one of: #{allowed_values.inspect}
+            Got: #{given_value.inspect}
+
+            This will not raise in production, but will instead fallback to: #{fallback.inspect}
+          MSG
+        end
+
+        fallback
+      end
+    end
+  end
+end

data/lib/primer/view_components.rb

@@ -1,4 +1,7 @@
+# frozen_string_literal: true
+
 require "primer/view_components/version"
+require "primer/view_components/engine"
 
 module Primer
   module ViewComponents

data/lib/primer/view_components/engine.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    class Engine < ::Rails::Engine
+      isolate_namespace Primer::ViewComponents
+    end
+  end
+end
+
+require "#{Primer::ViewComponents::Engine.root}/app/components/primer/view_components.rb"

data/lib/primer/view_components/version.rb

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

metadata

@@ -1,15 +1,131 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.3
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-03 00:00:00.000000000 Z
-dependencies: []
+date: 2020-08-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '7.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '7.0'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: octicons_helper
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 9.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: 11.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 9.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: 11.0.0
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 5.6.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 5.6.0
+- !ruby/object:Gem::Dependency
+  name: pry
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: '0.74'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: '0.74'
+- !ruby/object:Gem::Dependency
+  name: rubocop-github
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.13.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.13.0
 description: 
 email:
 - opensource+primer_view_components@github.com
@@ -20,7 +136,46 @@ files:
 - CHANGELOG.md
 - LICENSE.txt
 - README.md
+- app/components/primer/avatar_component.rb
+- app/components/primer/base_component.rb
+- app/components/primer/blankslate_component.html.erb
+- app/components/primer/blankslate_component.rb
+- app/components/primer/border_box_component.html.erb
+- app/components/primer/border_box_component.rb
+- app/components/primer/box_component.rb
+- app/components/primer/breadcrumb_component.html.erb
+- app/components/primer/breadcrumb_component.rb
+- app/components/primer/button_component.rb
+- app/components/primer/component.rb
+- app/components/primer/counter_component.rb
+- app/components/primer/details_component.html.erb
+- app/components/primer/details_component.rb
+- app/components/primer/dropdown_menu_component.html.erb
+- app/components/primer/dropdown_menu_component.rb
+- app/components/primer/flex_component.rb
+- app/components/primer/flex_item_component.rb
+- app/components/primer/heading_component.rb
+- app/components/primer/label_component.rb
+- app/components/primer/layout_component.html.erb
+- app/components/primer/layout_component.rb
+- app/components/primer/link_component.rb
+- app/components/primer/progress_bar_component.html.erb
+- app/components/primer/progress_bar_component.rb
+- app/components/primer/slot.rb
+- app/components/primer/state_component.rb
+- app/components/primer/subhead_component.html.erb
+- app/components/primer/subhead_component.rb
+- app/components/primer/text_component.rb
+- app/components/primer/timeline_item_component.html.erb
+- app/components/primer/timeline_item_component.rb
+- app/components/primer/underline_nav_component.html.erb
+- app/components/primer/underline_nav_component.rb
+- app/components/primer/view_components.rb
+- lib/primer/class_name_helper.rb
+- lib/primer/classify.rb
+- lib/primer/fetch_or_fallback_helper.rb
 - lib/primer/view_components.rb
+- lib/primer/view_components/engine.rb
 - lib/primer/view_components/version.rb
 homepage: https://github.com/primer/view_components
 licenses:
@@ -42,7 +197,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.1.2
 signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System