pulse_view_components 0.3.0

data/app/components/pulse/table/cell.html.slim

@@ -0,0 +1,10 @@
+/! components/pulse/tables/cell
+= render Pulse::BaseComponent.new(**options) do
+  - if sortable?
+    = link_to request.params.merge(**url_options), class: merge_classes('pulse-inline-flex pulse-items-center pulse-gap-1', title_classes) do
+      = content
+      = render Pulse::Icon.new(icon: icon, width: 9, height: 8, classes: 'pulse-shrink-0', title: t(".#{icon}"))
+
+  - else
+    span class=title_classes
+      = content

data/app/components/pulse/table/cell.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Pulse
+  class Table
+    # Renders a table cell
+    class Cell < Pulse::Component
+      attr_reader :sort_by, :current_sort_column, :current_sort_direction,
+                  :additional_params, :footer
+
+      HEAD_DEFAULT_SCHEME = :xs
+      HEAD_SCHEME_MAPPINGS = {
+        sm: 'pulse-px-3 pulse-py-4 print:pulse-px-2 print:pulse-py-3 ' \
+            'pulse-text-sm print:pulse-text-xs pulse-font-base',
+        xs: 'pulse-px-2 pulse-py-4 print:pulse-py-2 pulse-text-xs ' \
+            'print:pulse-text-2xs pulse-font-medium'
+      }.freeze
+      HEAD_SCHEME_OPTIONS = HEAD_SCHEME_MAPPINGS.keys.freeze
+
+      DEFAULT_CELL_CLASSES = 'pulse-text-start first:pulse-ps-4 ' \
+                             'last:pulse-pe-4 pulse-px-2 pulse-text-gray ' \
+                             'print:first:pulse-ps-2 print:last:pulse-pe-2'
+      DEFAULT_TH_CLASSES = 'pulse-uppercase pulse-tracking-wider'
+      DEFAULT_TD_CLASSES = 'pulse-py-2 pulse-whitespace-nowrap ' \
+                           'pulse-text-sm print:pulse-text-xs pulse-text-gray'
+
+      def initialize(sort_by: nil, current_sort_column: nil,
+                     current_sort_direction: nil, additional_params: {},
+                     head_scheme: HEAD_DEFAULT_SCHEME, footer: nil,
+                     title_classes: '', **options)
+        @sort_by = sort_by
+        @current_sort_column = current_sort_column
+        @current_sort_direction = current_sort_direction
+        @additional_params = additional_params
+        @footer = footer
+        @title_classes = title_classes
+        @options = options
+        @options[:classes] = merge_classes(
+          DEFAULT_CELL_CLASSES,
+          header_or_footer? ? DEFAULT_TH_CLASSES : DEFAULT_TD_CLASSES,
+          header_or_footer? ? HEAD_SCHEME_MAPPINGS[head_scheme] : '',
+          options[:classes]
+        )
+      end
+
+      def options
+        { tag: 'td' }.deep_merge(@options).tap do |args|
+          args[:classes] = class_names(
+            args[:classes]
+          )
+        end
+      end
+
+      def title_classes
+        header_or_footer? ? @title_classes : ''
+      end
+
+      def active
+        sort_by && sort_by == current_sort_column
+      end
+
+      def sortable?
+        sort_by && params[:q].blank?
+      end
+
+      def dir
+        current_sort_direction
+      end
+
+      def icon
+        active ? "sort_#{dir}" : 'sort'
+      end
+
+      def header_or_footer?
+        @options[:tag] == 'th' || @footer
+      end
+
+      def url_options
+        { sort: sort_by, direction: }.merge(additional_params)
+      end
+
+      def direction
+        params[:sort].nil? || params[:sort] == sort_by ? sort_dir : nil
+      end
+
+      def sort_dir
+        params[:direction] == 'asc' ? 'desc' : 'asc'
+      end
+    end
+  end
+end

data/app/components/pulse/table/cell.yml

@@ -0,0 +1,5 @@
+en:
+  sort: "Sort"
+  sort_: "Sort"
+  sort_asc: "Sorting Ascending"
+  sort_desc: "Sorting Descending"

data/app/components/pulse/table/column.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Pulse
+  class Table
+    # Encapsulates table column properties
+    class Column < Pulse::Component
+      attr_reader :title, :sr_title, :sort_by, :footer, :options
+
+      def initialize(title: '', sr_title: nil, sort_by: nil, footer: nil,
+                     **options, &block)
+        @title = title
+        @sr_title = sr_title
+        @sort_by = sort_by
+        @footer = footer
+        @block = block
+        @options = options
+      end
+
+      delegate :call, to: :@block
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+/! components/pulse/table
+- if collection.present?
+  div class="pulse-flex pulse-flex-col pulse-gap-4"
+    div class=class_names("pulse-w-full pulse-shadow print:pulse-shadow-none sm:pulse-rounded-lg", 'pulse-overflow-x-scroll': scroll)
+      = render Pulse::BaseComponent.new(**table_options) do
+        - if header
+          = render Pulse::BaseComponent.new(tag: :thead, classes: head_classes) do
+            tr
+              - columns.each_with_index do |column, index|
+                = render_cell( \
+                    sr_title: column.sr_title,
+                    sort_by: (column.sort_by unless collection.empty?),
+                    current_sort_column: current_sort_column,
+                    current_sort_direction: current_sort_direction,
+                    tag: 'th',
+                    **column.options \
+                  ) do
+                    = column.title&.html_safe
+
+        = render Pulse::BaseComponent.new(tag: :tbody, classes: body_classes) do
+          - collection.each do |row|
+            = render Pulse::BaseComponent.new(**row_arguments(row)) do
+              - columns.each_with_index do |column, index|
+                = render_cell( \
+                    tag: 'td',
+                    **column.options \
+                  ) do
+                  = column.call(row)
+
+          - if footer?
+            tr class=head_classes
+              - columns.each_with_index do |column, index|
+                = render_cell( \
+                    tag: 'td',
+                    footer: true,
+                    **column.options \
+                  ) do
+                    = column.footer
+
+
+    - if pagination? && collection.respond_to?(:total_pages)
+      div class="pulse-text-center pulse-text-gray"
+        = paginate(collection, window: 9)
+
+- else
+  - if empty_state?
+    = empty_state
+  - else
+    = render Pulse::BlankSlate.new do |c|
+      - c.with_title { t('.no_data') }

data/app/components/pulse/table.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a table
+  # Inspiration taken from
+  # https://github.com/baoagency/polaris_view_components/
+  class Table < Pulse::Component
+    DEFAULT_TABLE_CLASSES = 'pulse-min-w-full pulse-divide-y ' \
+                            'pulse-divide-gray-300'
+    DEFAULT_HEAD_CLASSES = 'pulse-bg-gray-100'
+    DEFAULT_TH_CLASSES = 'pulse-text-start pulse-text-gray pulse-uppercase ' \
+                         'pulse-tracking-wider pulse-px-4 print:pulse-px-2 ' \
+                         'pulse-py-4 print:pulse-py-3 text-xs pulse-font-medium'
+    DEFAULT_BODY_CLASSES = 'pulse-bg-white pulse-divide-y pulse-text-sm ' \
+                           'pulse-leading-extra-snug pulse-divide-gray-300 ' \
+                           'print:pulse-divide-gray-400 pulse-tracking-tight ' \
+                           ''
+    DEFAULT_ROW_CLASSES = 'pulse-border-secondary-300'
+    DEFAULT_TD_CLASSES = 'pulse-px-4 print:pulse-px-2 pulse-py-4'
+
+    delegate :paginate, to: :helpers
+
+    renders_many :columns, lambda { |**options, &block|
+      Pulse::Table::Column.new(**options, &block)
+    }
+    renders_one :empty_state, Pulse::BlankSlate
+
+    attr_reader :collection, :additional_params, :pagination, :striped,
+                :full_width, :current_sort_column, :current_sort_direction,
+                :hoverable, :row_classes, :header, :scroll
+
+    def initialize(collection, additional_params: {}, pagination: true,
+                   striped: false, current_sort_column: nil,
+                   current_sort_direction: nil, hoverable: false,
+                   row_classes: nil, header: true, scroll: true, **options)
+      @collection = collection
+      @additional_params = additional_params
+      @pagination = pagination
+      @striped = striped
+      @current_sort_column = current_sort_column
+      @current_sort_direction = current_sort_direction
+      @hoverable = hoverable
+      @row_classes = row_classes
+      @header = header
+      @scroll = scroll
+      @options = options
+    end
+
+    def pagination?
+      pagination
+    end
+
+    def footer?
+      columns.any?(&:footer)
+    end
+
+    def table_options
+      { tag: 'table' }.deep_merge(@options).tap do |args|
+        args[:classes] = merge_classes(
+          DEFAULT_TABLE_CLASSES,
+          'pulse-container pulse-mx-auto',
+          args[:classes]
+        )
+        args[:data] ||= {}
+      end
+    end
+
+    def head_classes
+      merge_classes(
+        DEFAULT_HEAD_CLASSES,
+        @options[:head_classes]
+      )
+    end
+
+    def head_cell_classes
+      merge_classes(
+        DEFAULT_TH_CLASSES
+      )
+    end
+
+    def body_classes
+      merge_classes(
+        DEFAULT_BODY_CLASSES,
+        '[&>tr:nth-child(even)]:pulse-bg-gray-50': striped,
+        'pulse-border-b [&>tr]:pulse-border-t [&>tr:first-child]:pulse-border-t-0': !striped # rubocop:disable Layout/LineLength
+      )
+    end
+
+    def row_arguments(row)
+      { tag: 'tr' }.tap do |args|
+        args[:classes] = merge_classes(
+          DEFAULT_ROW_CLASSES,
+          { 'hover:pulse-bg-dark-charcoal-50': hoverable },
+          row_classes
+        )
+        args[:id] = dom_id(row) if row.respond_to?(:to_key)
+        args[:data] ||= {}
+      end
+    end
+
+    def render_cell(**arguments, &)
+      render(
+        Pulse::Table::Cell.new(
+          additional_params:,
+          **arguments
+        ),
+        &
+      )
+    end
+  end
+end

data/app/components/pulse/table.yml

@@ -0,0 +1,2 @@
+en:
+  no_data: "No records found"

data/app/components/pulse/text.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Base Text component
+  class Text < Pulse::Component
+    STYLE_MAPPINGS = {
+      h1: 'pulse-text-3xl pulse-font-bold print:pulse-text-2xl',
+      h2: 'pulse-text-2xl pulse-font-bold print:pulse-text-xl',
+      h3: 'pulse-text-xl pulse-font-bold print:pulse-text-lg',
+      h4: 'pulse-text-lg pulse-font-bold print:pulse-text-base',
+      subtitle: 'pulse-text-xl print:pulse-text-lg pulse-leading-tight ' \
+                'pulse-font-bold tracking-tight',
+      body1: 'pulse-text-lg print:pulse-text-base pulse-font-bold ' \
+             'pulse-leading-6 tracking-tight',
+      body2: 'pulse-text-lg print:pulse-text-base pulse-font-normal ' \
+             'pulse-leading-6 tracking-tight',
+      body3: 'pulse-text-base print:pulse-text-sm pulse-font-bold ' \
+             'pulse-leading-normal',
+      body4: 'pulse-text-base print:pulse-text-sm pulse-font-normal ' \
+             'pulse-leading-normal',
+      body5: 'pulse-text-sm print:pulse-text-xs pulse-font-bold ' \
+             'pulse-leading-snug',
+      body6: 'pulse-text-sm print:pulse-text-xs pulse-font-normal ' \
+             'pulse-leading-snug',
+      body7: 'pulse-text-xs pulse-font-bold pulse-leading-5',
+      body8: 'pulse-text-xs pulse-font-normal pulse-leading-5',
+      caption1: 'pulse-text-2xs pulse-font-bold tracking-normal ' \
+                'pulse-leading-extra-tight',
+      caption2: 'pulse-text-2xs pulse-font-normal tracking-normal ' \
+                'pulse-leading-extra-tight'
+    }.freeze
+
+    TAG_MAPPINGS = {
+      h1: :h1,
+      h2: :h2,
+      h3: :h3,
+      h4: :h4,
+      subtitle: :h2,
+      body1: :p,
+      body2: :p,
+      body3: :p,
+      body4: :p,
+      body5: :p,
+      body6: :p,
+      body7: :p,
+      body8: :p,
+      caption1: :p,
+      caption2: :p
+    }.freeze
+
+    def initialize(type:, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:classes] = merge_classes(
+        STYLE_MAPPINGS[type],
+        system_arguments[:classes]
+      )
+      @system_arguments[:tag] ||= TAG_MAPPINGS[type]
+    end
+
+    def tag
+      @el_tag || TAG_MAPPINGS[@type]
+    end
+
+    def call
+      render Pulse::BaseComponent.new(**@system_arguments).with_content(content)
+    end
+
+    def render?
+      content.present?
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+/! components/pulse/toast
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  div class="pulse-flex pulse-w-full" data-theme=(@theme)
+    div class="pulse-flex-1 pulse-flex pulse-justify-between pulse-items-start"
+      div class="pulse-flex-1 pulse-flex pulse-justify-between pulse-items-center pulse-gap-4"
+        = render Pulse::Text.new(type: :body6, classes: 'pulse-mb-0 pulse-min-w-[250px]') do
+          = content
+        div class="pulse-mt-0"
+          div class="pulse-flex pulse-items-center pulse-gap-3.5 -pulse-my-2"
+            - if action?
+              = render Pulse::Text.new(type: :body5, classes: merge_classes(link_classes, 'pulse-uppercase pulse-mb-0')) do
+                = action
+            button class="pulse-appearance-none pulse-bg-transparent pulse-border-0 pulse-p-2" data-action="click->pulse--toast#dismiss"
+              = render Pulse::Icon.new(icon: :close, width: 9, height: 9, class: link_classes)

data/app/components/pulse/toast.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a toast popup.
+  class Toast < Pulse::Component
+    include Turbo::FramesHelper
+
+    renders_one :action, lambda { |url:, **system_arguments, &block|
+      system_arguments[:tag] = :a
+      system_arguments[:href] = url
+      system_arguments[:classes] = merge_classes(
+        system_arguments[:classes],
+        LINK_MAPPINGS[@theme]
+      )
+      BaseComponent.new(**system_arguments, &block)
+    }
+
+    LINK_MAPPINGS = {
+      default: 'pulse-text-white hover:pulse-text-white',
+      error: 'pulse-text-gray hover:pulse-text-gray',
+      success: 'pulse-text-white hover:pulse-text-white'
+    }.freeze
+
+    THEME_MAPPINGS = {
+      default: 'pulse-bg-gray-700 pulse-text-white',
+      error: 'pulse-bg-error-100 pulse-text-gray-900',
+      success: 'pulse-bg-gray-700 pulse-text-white'
+    }.freeze
+    DEFAULT_THEME = :default
+
+    def initialize(
+      auto_hide: true,
+      theme: DEFAULT_THEME,
+      **system_arguments
+    )
+      @auto_hide = auto_hide
+      @system_arguments = system_arguments
+      @theme = theme
+
+      @system_arguments[:tag] ||= :div
+      @system_arguments[:data] = data_attributes
+      @system_arguments[:classes] = class_attributes
+    end
+
+    private
+
+    def class_attributes
+      merge_classes(
+        @system_arguments[:classes],
+        # 'pulse-hidden',
+        'pulse-pl-8',
+        'pulse-pr-4',
+        'pulse-py-2.5',
+        'pulse-mb-4',
+        'pulse-rounded',
+        'pulse-shadow-toast',
+        'pulse-z-100',
+        THEME_MAPPINGS[@theme]
+      )
+    end
+
+    def data_attributes
+      merge_attributes(
+        @system_arguments[:data],
+        {
+          controller: 'pulse--toast',
+          pulse__toast_auto_hide_value: @auto_hide,
+          transition_enter: 'pulse-transition pulse-ease-out ' \
+                            'pulse-duration-500',
+          transition_enter_start: 'pulse-transform pulse-opacity-0 ' \
+                                  'pulse-translate-y-full',
+          transition_enter_end: 'pulse-transform pulse-opacity-100 ' \
+                                'pulse-translate-y-0',
+          transition_leave: 'pulse-transition pulse-ease-in pulse-duration-200',
+          transition_leave_start: 'pulse-transform pulse-opacity-100',
+          transition_leave_end: 'pulse-transform pulse-opacity-0'
+        }
+      )
+    end
+
+    def link_classes
+      LINK_MAPPINGS[@theme]
+    end
+  end
+end

data/app/components/pulse/toast_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+import { enter, leave } from "el-transition"
+
+// Connects to data-controller="pulse--toast"
+export default class extends Controller {
+  static values = {
+    autoHide: { type: Boolean, default: true },
+    autoHideDuration: { type: Number, default: 3000 },
+  }
+
+  connect() {
+    enter(this.element)
+
+    if (this.autoHideValue) {
+      this.autoHideTimeout = setTimeout(() => {
+        this.dismiss()
+      }, this.autoHideDurationValue)
+    }
+  }
+
+  disconnect() {
+    if (this.autoHideValue) {
+      clearTimeout(this.autoHideTimeout)
+    }
+  }
+
+  dismiss() {
+    leave(this.element).then(() => {
+      this.element.remove()
+    })
+  }
+}

data/app/javascript/pulse_view_components/application.js

@@ -0,0 +1,24 @@
+import { Application } from "@hotwired/stimulus"
+import Dropdown from "stimulus-dropdown"
+import * as Turbo from "@hotwired/turbo"
+
+// import * as ActiveStorage from "@rails/activestorage"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus = application
+
+// application.register("dropdown", Dropdown)
+
+// Automatically load controllers from ViewComponents directory.
+import controllers from "../../components/**/*_controller.js"
+controllers.forEach(controller => {
+  var name = controller.name.replace("..--..--components--", "")
+  application.register(name, controller.module.default)
+})
+
+export { application }
+
+// ActiveStorage.start()

data/app/javascript/pulse_view_components.js

@@ -0,0 +1,4 @@
+import "@hotwired/turbo-rails"
+import './pulse_view_components/application'
+
+import "el-transition"

data/app/lib/pulse/attributes_helper.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Pulse
+  # :nodoc:
+  module AttributesHelper
+    PLURAL_ARIA_ATTRIBUTES = [:describedby, :labelledby].freeze
+    PLURAL_DATA_ATTRIBUTES = [:target, :targets].freeze
+
+    def aria(val, system_arguments)
+      system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria,
+                                                               val.to_sym)
+    end
+
+    def data(val, system_arguments)
+      system_arguments[:"data-#{val}"] || system_arguments.dig(:data,
+                                                               val.to_sym)
+    end
+
+    # Merges hashes that contain "aria-*" keys and nested aria: hashes. Removes keys from
+    # each hash and returns them in the new hash.
+    #
+    # Eg. merge_aria({ "aria-disabled": "true" }, { aria: { invalid: "true" } })
+    #     => { disabled: "true", invalid: "true" }
+    #
+    # Certain aria attributes can contain multiple values separated by spaces. merge_aria
+    # will combine these plural attributes into a composite string.
+    #
+    # Eg. merge_aria({ "aria-labelledby": "foo" }, { aria: { labelledby: "bar" } })
+    #     => { labelledby: "foo bar" }
+    #
+    # It's designed to be used to normalize and merge aria information from system_arguments
+    # hashes. Consider using this pattern in component initializers:
+    #
+    # @system_arguments[:aria] = merge_aria(
+    #   @system_arguments,
+    #   { aria: { labelled_by: id } }
+    # )
+    def merge_aria(*hashes)
+      merge_prefixed_attribute_hashes(
+        *hashes, prefix: :aria, plural_keys: PLURAL_ARIA_ATTRIBUTES
+      )
+    end
+
+    # Merges hashes that contain "data-*" keys and nested data: hashes. Removes keys from
+    # each hash and returns them in the new hash.
+    #
+    # Eg. merge_data({ "data-foo": "true" }, { data: { bar: "true" } })
+    #     => { foo: "true", bar: "true" }
+    #
+    # Certain data attributes can contain multiple values separated by spaces. merge_data
+    # will combine these plural attributes into a composite string.
+    #
+    # Eg. merge_data({ "data-target": "foo" }, { data: { target: "bar" } })
+    #     => { target: "foo bar" }
+    #
+    # It's designed to be used to normalize and merge data information from system_arguments
+    # hashes. Consider using this pattern in component initializers:
+    #
+    # @system_arguments[:data] = merge_aria(
+    #   @system_arguments,
+    #   { data: { foo: "bar" } }
+    # )
+    def merge_data(*hashes)
+      merge_prefixed_attribute_hashes(
+        *hashes, prefix: :data, plural_keys: PLURAL_DATA_ATTRIBUTES
+      )
+    end
+
+    def merge_prefixed_attribute_hashes(*hashes, prefix:, plural_keys:)
+      {}.tap do |result|
+        hashes.each do |hash|
+          next unless hash
+
+          prefix_hash = hash.delete(prefix) || {}
+
+          prefix_hash.each_pair do |key, val|
+            result[key] =
+              if plural_keys.include?(key)
+                [*(result[key] || '').split, val].join(' ').strip
+              else
+                val
+              end
+          end
+
+          hash.delete_if do |key, val|
+            key_s = key.to_s
+
+            if key.start_with?("#{prefix}-")
+              bare_key = key_s.sub("#{prefix}-", '').to_sym
+
+              result[bare_key] =
+                if plural_keys.include?(bare_key)
+                  [*(result[bare_key] || '').split, val].join(' ').strip
+                else
+                  val
+                end
+
+              true
+            else
+              false
+            end
+          end
+        end
+      end
+    end
+  end
+end