pulse_view_components 0.3.0

data/app/components/pulse/button.rb

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a button or link button
+  class Button < Pulse::Component
+    attr_reader :kwargs, :label, :url, :tag, :button_to_helper,
+                :disabled
+
+    delegate :button_to, to: :helpers
+
+    DEFAULT_SCHEME = :secondary
+    SCHEME_MAPPINGS = {
+      primary: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
+               'pulse-bg-green-700 pulse-text-white hover:pulse-bg-green-800 ' \
+               'focus-visible:pulse-bg-green-800 hover:pulse-text-white ' \
+               'focus-visible:pulse-text-white ' \
+               'focus-visible:pulse-shadow-btn-inset',
+      secondary: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
+                 'pulse-bg-gray-50 pulse-text-gray hover:pulse-bg-gray-100 ' \
+                 'focus-visible:pulse-bg-gray-100',
+      danger: 'pulse-border pulse-border-solid pulse-border-gray-300 ' \
+              'pulse-bg-gray-50 pulse-text-danger-800 ' \
+              'hover:pulse-bg-danger-800 focus-visible:pulse-bg-danger-800 ' \
+              'hover:pulse-text-white focus-visible:pulse-text-white ' \
+              'focus-visible:pulse-shadow-btn-inset'
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+    DEFAULT_SIZE = :md
+    SIZE_MAPPINGS = {
+      xs: 'pulse-text-xs pulse-leading-5 pulse-font-medium pulse-py-0.5 ' \
+          'pulse-px-4',
+      sm: 'pulse-text-sm pulse-font-medium pulse-py-1 pulse-px-5',
+      md: 'pulse-text-base pulse-font-bold pulse-py-1.5 pulse-px-6'
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    # Leading visuals appear to the left of the button text.
+    #
+    # Use:
+    #
+    # - `leading_visual_icon` for a <%= link_to_component(Ui::Icon) %>.
+    #
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Ui::Icon) %>.
+    renders_one :leading_visual, types: {
+      icon: lambda { |**system_arguments|
+        system_arguments[:classes] = merge_classes(
+          'pulse-me-2',
+          system_arguments[:classes]
+        )
+
+        Pulse::Icon.new(**system_arguments)
+      }
+    }
+
+    def initialize(label: nil, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE,
+                   url: nil, button_to: false, disabled: false, **kwargs)
+      @kwargs = kwargs
+      @label = label
+      @scheme = scheme
+      @url = url
+      @size = size
+      @button_to_helper = button_to
+      @disabled = disabled
+      @tag = kwargs.fetch(:tag, :button)
+    end
+
+    def options
+      @options ||= begin
+        values = kwargs.except(:style, :tag, :label, :url, :size, :classes)
+
+        if tag == :button && url.blank?
+          # Default button to "type" to prevent the HTML5 default "submit"
+          # behavior
+          # See: https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms
+          values = values.merge(type: kwargs.fetch(:type, 'button'))
+        end
+
+        values.merge(class: btn_class)
+      end
+    end
+
+    def btn_class
+      merge_classes(
+        'pulse-appearance-none pulse-inline-flex pulse-justify-center',
+        'pulse-items-center pulse-rounded-md pulse-no-underline',
+        'hover:pulse-no-underline focus-visible:pulse-no-underline',
+        'focus-visible:-pulse-outline-offset-2',
+        'focus-visible:pulse-outline-[2px] focus-visible:pulse-outline-solid',
+        'focus-visible:pulse-outline-[var(--pulse-focus-outlineColor)]',
+        'disabled:pulse-opacity-25 disabled:pulse-cursor-not-allowed',
+        SIZE_MAPPINGS[@size],
+        SCHEME_MAPPINGS[@scheme],
+        kwargs.fetch(:classes, '')
+      )
+    end
+
+    def render_link
+      if label.present?
+        link_to(helpers.safe_join([leading_visual, label]), url, options)
+      else
+        link_to(url, options) { helpers.safe_join([leading_visual, content]) }
+      end
+    end
+
+    def render_button
+      if label.present?
+        content_tag(tag, helpers.safe_join([leading_visual, label]), options)
+      else
+        content_tag(tag, options) do
+          helpers.safe_join([leading_visual, content])
+        end
+      end
+    end
+
+    def render_button_to
+      form_class = options[:form_class] || 'contents'
+
+      if label.present?
+        button_to(helpers.safe_join([leading_visual, label]), url,
+                  options.merge(form_class:))
+      else
+        button_to(url, options.merge(form_class:)) do
+          helpers.safe_join([leading_visual, content])
+        end
+      end
+    end
+
+    def call
+      if button_to_helper
+        raise(ArgumentError, 'URL is required') if url.blank?
+
+        @options = options.merge(disabled:) if disabled
+        render_button_to
+      elsif url.present?
+        if disabled
+          @options = options.merge(disabled:) if disabled
+          render_button
+        else
+          render_link
+        end
+      else
+        @options = options.merge(disabled:) if disabled
+        render_button
+      end
+    end
+  end
+end

data/app/components/pulse/component.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+require 'tailwind_merge'
+
+module Pulse
+  # This core `Component` class provides a place to include shared modules
+  # and helper methods that can be used by any child component.
+  class Component < ViewComponent::Base
+    TW_MERGE = TailwindMerge::Merger.new(config: { prefix: 'pulse-' })
+
+    include AttributesHelper
+    include FetchOrFallbackHelper
+    include SvgHelper
+
+    # include Pulse::ViewHelper
+
+    delegate :inline_svg_tag, :inline_svg, to: :helpers
+
+    # Merge nested attributes together. Particularly helpful when combining
+    # data attributes without squashing previously existing data.
+    #
+    # For example:
+    #
+    # ```ruby
+    # data = { data: { controller: "gallery" } }
+    #
+    # @options[:data] = merge_attributes(
+    #   data,
+    #   action: "click->gallery#next",
+    # )
+    # ```
+    #
+    # Returns:
+    #
+    # ```ruby
+    # @options[:data]
+    #   # => { controller: "gallery", action: "click->gallery#next" }
+    # ```
+    #
+    def merge_attributes(*args)
+      args = Array.new(2) { {} } if args.compact.blank?
+      hashed_args = args.map { |el| el.presence || {} }
+
+      hashed_args.first.deep_merge(hashed_args.second) do |_key, val, other_val|
+        val + " #{other_val}"
+      end
+    end
+
+    def merge_classes(*args)
+      args = args.compact_blank
+      return '' if args.empty?
+
+      classes = class_names(*args)
+      return classes unless args.many?
+
+      # Handle arbitrary variants, which `class_names` will escape
+      classes = CGI.unescapeHTML(classes) if classes.include?('[&')
+
+      TW_MERGE.merge(classes)
+    end
+
+    def self.generate_id(base_name: name.demodulize.underscore.dasherize)
+      "#{base_name}-#{SecureRandom.uuid}"
+    end
+
+    private
+
+    def raise_on_invalid_options?
+      true
+      # Rails.application.config.primer_view_components.raise_on_invalid_options
+    end
+
+    def deny_single_argument(key, help_text, **arguments)
+      raise ArgumentError, "`#{key}` is an invalid argument. #{help_text}" \
+        if should_raise_error? && arguments.key?(key)
+
+      arguments.except!(key)
+    end
+
+    def deny_aria_key(key, help_text, **arguments)
+      raise ArgumentError, help_text if should_raise_aria_error? &&
+                                        aria(key, arguments)
+    end
+
+    def deny_tag_argument(**arguments)
+      deny_single_argument(:tag, 'This component has a fixed tag.', **arguments)
+    end
+
+    def should_raise_error?
+      !Rails.env.production? &&
+        raise_on_invalid_options? &&
+        !ENV['PULSE_WARNINGS_DISABLED']
+    end
+
+    def should_raise_aria_error?
+      !Rails.env.production?
+    end
+  end
+end

data/app/components/pulse/conditional_wrapper.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Conditionally renders a `BaseComponent` around the given content. If the given condition
+  # is true, a `BaseComponent` will render around the content. If the condition is false, only
+  # the content is rendered.
+  class ConditionalWrapper < Pulse::Component
+    # @param condition [Boolean] Whether or not to wrap the content in a `BaseComponent`.
+    # @param base_component_arguments [Hash] The arguments to pass to `BaseComponent`.
+    def initialize(condition:, **base_component_arguments)
+      @condition = condition
+      @base_component_arguments = base_component_arguments
+    end
+
+    def call
+      return content unless @condition
+
+      BaseComponent.new(**@base_component_arguments).render_in(self) { content }
+    end
+  end
+end

data/app/components/pulse/content.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Use `Content` as a helper to render content passed to a slot without adding
+  # any tags.
+  class Content < Pulse::Component
+    def call
+      content
+    end
+  end
+end

data/app/components/pulse/counter.css

@@ -0,0 +1,10 @@
+/* Counter */
+.Counter {
+  @apply pulse-inline-block pulse-min-w-[var(--base-size-20)] pulse-text-[length:var(--text-body-size-small)] pulse-font-[number:var(--base-text-weight-medium)] pulse-leading-[calc(var(--base-size-20)_-_var(--borderWidth-thin)_*_2)] pulse-text-[color:var(--fgColor-default)] pulse-text-center bg-[color:var(--bgColor-neutral-muted,var(--color-neutral-muted))] pulse-border-[length:var(--borderWidth-thin)] pulse-border-[color:var(--counter-borderColor)] pulse-px-1.5 pulse-py-0 pulse-rounded-[2em] pulse-border-solid empty:pulse-hidden; /* makes sure it's a circle with just one digit */ /* 20px - 2px for the borders */
+}
+.Counter--primary {
+  @apply pulse-text-[color:var(--pulse-fgColor-onEmphasis)] pulse-bg-[color:var(--bgColor-neutral-emphasis)];
+}
+.Counter--secondary {
+  @apply pulse-text-[color:var(--fgColor-muted)] pulse-bg-[color:var(--bgColor-neutral-muted)];
+}

data/app/components/pulse/counter.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Use `Counter` to add a count to navigational elements and buttons.
+  #
+  # @accessibility
+  #   Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
+  #   should be accompanied with text such as `issues` or `pull requests`.
+  #
+  class Counter < Pulse::Component
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => '',
+      :primary => 'Counter--primary',
+      :secondary => 'Counter--secondary',
+      # deprecated
+      :gray => 'Counter--primary',
+      :light_gray => 'Counter--secondary'
+    }.freeze
+    DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze
+    SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
+
+    # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
+    # @param scheme [Symbol] Color scheme. <%= one_of(Pulse::Counter::SCHEME_OPTIONS) %>
+    # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
+    # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
+    # @param text [String] Text to display instead of count.
+    # @param round [Boolean] Whether to apply our standard rounding logic to value.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      count: 0,
+      scheme: DEFAULT_SCHEME,
+      limit: 5_000,
+      hide_if_zero: false,
+      text: '',
+      round: false,
+      **system_arguments
+    )
+      @count = count
+      @limit = limit
+      @hide_if_zero = hide_if_zero
+      @text = text
+      @round = round
+      @system_arguments = deny_tag_argument(**system_arguments)
+
+      @has_limit = !@limit.nil?
+      @system_arguments[:title] = title
+      @system_arguments[:tag] = :span
+      @system_arguments[:classes] = merge_classes(
+        'Counter',
+        @system_arguments[:classes],
+        SCHEME_MAPPINGS[fetch_or_fallback(
+          SCHEME_OPTIONS,
+          scheme,
+          DEFAULT_SCHEME
+        )]
+      )
+      @system_arguments[:hidden] = true if count.zero? && hide_if_zero
+    end
+
+    def call
+      render(Pulse::BaseComponent.new(**@system_arguments)) { 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(@has_limit ? [count, @limit].min : count)
+        str += '+' if @has_limit && 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 = @has_limit ? [@count.to_i, @limit].min : @count.to_i
+          precision = count.between?(100_000, 999_999) ? 0 : 1
+          units = { thousand: 'k', million: 'm', billion: 'b' }
+          str = number_to_human(count, precision:, significant: false, units:,
+                                       format: '%n%u')
+        else
+          @count = @count.to_i
+          str = number_with_delimiter(@has_limit ? [@count,
+                                                    @limit].min : @count)
+        end
+
+        str += '+' if @has_limit && @count.to_i > @limit
+        str
+      end
+    end
+  end
+end

data/app/components/pulse/flash.html.slim

@@ -0,0 +1,9 @@
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  - if @icon
+    = render Pulse::Icon.new(icon: @icon)
+  = content
+
+  - if @dismissible
+    = render Pulse::IconButton.new(icon: :x, scheme: :invisible, classes: 'flash-close js-flash-close', 'aria-label': 'Dismiss alert')
+
+  = action

data/app/components/pulse/flash.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Use `Flash` to inform users of successful or pending actions.
+  class Flash < Pulse::Component
+    # Optional action content showed on the right side of the component.
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :action, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        system_arguments[:classes],
+        'flash-action'
+      )
+
+      Pulse::BaseComponent.new(**system_arguments)
+    }
+
+    # TODO: Style icon in scheme color
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      default: 'pulse-bg-[#ddf4ff] pulse-border pulse-border-[#54aeff]',
+      warning: 'pulse-bg-[#fff8c5] pulse-border pulse-border-[#f6e05e]',
+      danger: 'pulse-bg-[#ffebe9] pulse-border pulse-border-[#ff8182]',
+      success: 'pulse-bg-[#dafbe1] pulse-border pulse-border-[#4ac26b]'
+    }.freeze
+
+    # @param full [Boolean] Whether the component should take up the full width of the screen.
+    # @param spacious [Boolean] Whether to add margin to the bottom of the component.
+    # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
+    # @param icon [Symbol] Name of Octicon icon to use.
+    # @param scheme [Symbol] <%= one_of(Pulse::Flash::SCHEME_MAPPINGS.keys) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(full: false, spacious: false, dismissible: false,
+                   icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
+      @icon = icon
+      @dismissible = dismissible
+      @system_arguments = deny_tag_argument(**system_arguments)
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        'pulse-px-3 pulse-py-2 pulse-font-medium pulse-rounded-lg pulse-my-3',
+        'pulse-flex pulse-gap-2 pulse-items-center pulse-justify-start',
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme,
+                                          DEFAULT_SCHEME)],
+        system_arguments[:classes],
+        'flash-full': full
+      )
+      @system_arguments[:mb] ||= spacious ? 4 : nil
+    end
+  end
+end

data/app/components/pulse/forms/error_explanation.html.slim

@@ -0,0 +1,8 @@
+/! components/pulse/forms/error_explanation
+= render Pulse::BaseComponent.new(tag: :div, **@options) do
+  = render Pulse::Text.new(type: :body1, tag: :h2) do
+    = t('errors.template.header', count: resource.errors.count, model: resource.class.model_name.human.downcase)
+
+  ul class="pulse-list-disc pulse-list-inside"
+    - errors.full_messages.each do |msg|
+      li = msg

data/app/components/pulse/forms/error_explanation.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Pulse
+  module Forms
+    # Render error message box for an ActiveModel resource
+    class ErrorExplanation < ViewComponent::Base
+      def initialize(resource:, **options)
+        @resource = resource
+        @options = options
+        @options[:classes] = class_names(
+          'pulse-bg-error-50 pulse-text-error pulse-px-3 pulse-py-2',
+          'pulse-font-medium pulse-rounded-lg pulse-my-3',
+          options[:classes]
+        )
+      end
+
+      def errors
+        @errors = ActiveModel::Errors.new(resource)
+        # Only display the last of each attribute error, to avoid needless
+        # duplication.
+        resource.errors.group_by(&:attribute).values.map(&:last).each do |error|
+          @errors.add(error.attribute, error.message)
+        end
+        @errors
+      end
+
+      def render?
+        resource.errors.any?
+      end
+
+      private
+
+      attr_reader :resource
+    end
+  end
+end

data/app/components/pulse/icon.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Render icons from the images/pulse_view_components/icons directory.
+  class Icon < Pulse::Component
+    SIZE_DEFAULT = :sm
+    SIZE_MAPPINGS = {
+      xs: 12,
+      sm: 16,
+      md: 24
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(icon: nil, size: SIZE_DEFAULT, **system_arguments)
+      @icon = "pulse_view_components/icons/#{icon}"
+
+      @system_arguments = system_arguments
+      @system_arguments[:class] = class_names(
+        'pulse-icon',
+        system_arguments[:classes]
+      )
+      @system_arguments[:height] ||=
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+    end
+
+    def call
+      render_svg(@icon, **@system_arguments)
+    end
+  end
+end

data/app/components/pulse/label.html.slim

@@ -0,0 +1,5 @@
+/! components/pulse/label
+= render Pulse::BaseComponent.new(**@options,
+                                  title: "Label: #{title}",
+                                  style: "background-color: ##{bg_color}") do
+  = title

data/app/components/pulse/label.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Pulse
+  # A kind of badge. Used for displaying github labels. Perhaps could be
+  # consolidated with badges?
+  # Accepts Hex color value for bg_color, with or without a leading "#"
+  class Label < Pulse::Component
+    attr_reader :title, :bg_color
+
+    def initialize(title:, bg_color: 'ffffff', **options)
+      @title = title
+      @bg_color = bg_color || 'ffffff'
+      @options = options
+      @options[:classes] = merge_classes(
+        'pulse-px-2 pulse-inline-flex pulse-text-xs print:pulse-text-2xs',
+        'pulse-leading-5 pulse-font-semibold pulse-rounded-full',
+        text_color,
+        options[:classes]
+      )
+      @options[:tag] ||= :span
+    end
+
+    private
+
+    def text_color
+      @bg_color = @bg_color[1..] if @bg_color[0] == '#'
+
+      r, g, b = @bg_color.scan(/../).map { |color| color.to_i(16) }
+
+      # Normalize RGB values to 0-1
+      r_norm = r / 255.0
+      g_norm = g / 255.0
+      b_norm = b / 255.0
+
+      # Calculate luminance
+      luminance = (0.2126 * r_norm) + (0.7152 * g_norm) + (0.0722 * b_norm)
+
+      # Choose text color based on luminance
+      luminance > 0.5 ? 'pulse-text-black' : 'pulse-text-white'
+    end
+  end
+end