pulse_view_components 0.3.0

data/previews/pulse/modal_preview.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Pulse
+  # :nodoc:
+  class ModalPreview < ViewComponent::Preview
+    # @label Playground
+    # @param title text
+    # @param content text
+    # @param size select {{ Pulse::Modal::SIZE_OPTIONS }}
+    # @param close_button toggle
+    # @param close_on_esc toggle
+    # @param close_on_overlay_click toggle
+    # @param close_on_submit toggle
+    # @param auto_close toggle
+    def playground(
+      title: 'Modal title',
+      content: 'Modal content',
+      footer: 'Footer content',
+      size: Pulse::Modal::DEFAULT_SIZE,
+      close_button: true,
+      close_on_esc: true,
+      close_on_overlay_click: true,
+      close_on_submit: true,
+      auto_close: false
+    )
+      render Pulse::Modal.new(size:,
+                              close_button:,
+                              close_on_esc:,
+                              close_on_overlay_click:,
+                              close_on_submit:,
+                              auto_close:) do |component|
+        component.with_title { title }
+        component.with_footer { footer }
+        content
+      end
+    end
+
+    # @label Default options
+    # @param title text
+    # @param content text
+    def default(title: 'Modal title', content: 'Modal content')
+      render Pulse::Modal.new do |component|
+        component.with_title { title }
+        content
+      end
+    end
+  end
+end

data/previews/pulse/nav_link_preview.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Pulse
+  # :nodoc:
+  class NavLinkPreview < ViewComponent::Preview
+    # @label Playground
+    # @display bg_color "rgb(31 41 55)"
+    # @param label text
+    # @param path text
+    # @param active_mode select [inclusive, exclusive]
+    # @param variant select {{ Pulse::NavLink::VARIANT_OPTIONS }}
+    def playground(label: 'Link', path: '#', active_mode: :inclusive,
+                   variant: :desktop)
+      render Pulse::NavLink.new(
+        label:,
+        path:,
+        active_mode:,
+        variant:
+      )
+    end
+
+    # @label Active
+    # @display bg_color "rgb(31 41 55)"
+    # @param label text
+    # @param variant select {{ Pulse::NavLink::VARIANT_OPTIONS }}
+    def active(label: 'Link', variant: :desktop)
+      render Pulse::NavLink.new(
+        label:,
+        path: '#',
+        active_mode: :inclusive,
+        variant:
+      )
+    end
+
+    # @label Inactive
+    # @display bg_color "rgb(31 41 55)"
+    # @param label text
+    # @param variant select {{ Pulse::NavLink::VARIANT_OPTIONS }}
+    def inactive(label: 'Link', variant: :desktop)
+      render Pulse::NavLink.new(
+        label:,
+        path: '/elsewhere',
+        active_mode: :inclusive,
+        variant:
+      )
+    end
+  end
+end

data/previews/pulse/nav_list_preview.rb

@@ -0,0 +1,138 @@
+# frozen_string_literal: true
+
+module Pulse
+  # @label NavList
+  class NavListPreview < ViewComponent::Preview
+    # @label default
+    def default
+      render Pulse::NavList.new do |list|
+        list.with_heading(title: 'Settings')
+
+        list.with_item(label: 'Access', href: '#') do |item|
+          item.with_leading_visual_icon(icon: :gear)
+        end
+
+        list.with_item(label: 'More', href: '#') do |item|
+          item.with_leading_visual_icon(icon: :ruby)
+        end
+      end
+    end
+    # # @label Playground
+    # def playground
+    #   render(Pulse::NavList.new(selected_item_id: :collaborators)) do |list|
+    #     list.with_heading(title: 'Repository settings')
+
+    #     list.with_item(label: 'General', href: '/general') do |item|
+    #       item.with_leading_visual_icon(icon: :gear)
+    #     end
+
+    #     list.with_group do |group|
+    #       group.with_heading(title: 'Access')
+
+    #       group.with_item(label: 'Collaborators and teams', href: '/collaborators',
+    #                       selected_by_ids: :collaborators) do |item|
+    #         item.with_leading_visual_icon(icon: :people)
+    #       end
+
+    #       group.with_item(label: 'Moderation options') do |item|
+    #         item.with_leading_visual_icon(icon: :'comment-discussion')
+
+    #         item.with_item(label: 'Interaction limits', href: '/interaction-limits',
+    #                        selected_by_ids: :interaction_limits)
+    #         item.with_item(label: 'Code review limits', href: '/review-limits', selected_by_ids: :code_review_limits)
+    #         item.with_item(label: 'Reported content', href: '/reported-content', selected_by_ids: :reported_content)
+    #       end
+    #     end
+    #   end
+    # end
+
+    # # @label Default
+    # def default
+    #   render(Pulse::NavList.new(selected_item_id: :code_review_limits)) do |list|
+    #     list.with_heading(title: 'Repository settings')
+
+    #     list.with_item(label: 'General', href: '/general') do |item|
+    #       item.with_leading_visual_icon(icon: :gear)
+    #     end
+
+    #     list.with_divider
+
+    #     list.with_item(label: 'Settings', href: '/settings') do |item|
+    #       item.with_leading_visual_icon(icon: :beaker)
+    #     end
+
+    #     list.with_group do |group|
+    #       group.with_heading(title: 'Access')
+
+    #       group.with_avatar_item(
+    #         src: 'https://avatars.githubusercontent.com/u/103004183?v=4',
+    #         username: 'hulk_smash',
+    #         full_name: 'Bruce Banner',
+    #         full_name_scheme: :inline,
+    #         href: '/profile',
+    #         avatar_arguments: { shape: :square }
+    #       )
+
+    #       group.with_item(label: 'Collaborators and teams', href: '/collaborators',
+    #                       selected_by_ids: :collaborators) do |item|
+    #         item.with_leading_visual_icon(icon: :people)
+    #       end
+
+    #       group.with_item(label: 'Moderation options') do |item|
+    #         item.with_leading_visual_icon(icon: :'comment-discussion')
+
+    #         item.with_item(label: 'Interaction limits', href: '/interaction-limits',
+    #                        selected_by_ids: :interaction_limits)
+    #         item.with_item(label: 'Code review limits', href: '/review-limits', selected_by_ids: :code_review_limits)
+    #         item.with_item(label: 'Reported content', href: '/reported-content', selected_by_ids: :reported_content)
+    #       end
+    #     end
+    #   end
+    # end
+
+    # # @label Top-level items
+    # #
+    # def top_level_items
+    #   render(Pulse::NavList.new) do |list|
+    #     list.with_heading(title: 'Account settings')
+
+    #     list.with_item(label: 'General', href: '/general') do |item|
+    #       item.with_leading_visual_icon(icon: :gear)
+    #     end
+
+    #     list.with_item(label: 'Billing', href: '/billing') do |item|
+    #       item.with_leading_visual_icon(icon: :'credit-card')
+    #     end
+
+    #     list.with_item(label: 'Change password', href: '/change_password') do |item|
+    #       item.with_leading_visual_icon(icon: :key)
+    #     end
+
+    #     list.with_avatar_item(
+    #       src: 'https://avatars.githubusercontent.com/u/103004183?v=4',
+    #       username: 'hulk_smash',
+    #       full_name: 'Bruce Banner',
+    #       full_name_scheme: :inline,
+    #       href: '/profile'
+    #     )
+    #   end
+    # end
+
+    # # @label Show more item
+    # def show_more_item
+    #   render(Pulse::NavList.new(aria: { label: 'My favorite foods' })) do |list|
+    #     list.with_group do |group|
+    #       group.with_heading(title: 'My favorite foods')
+    #       group.with_item(label: 'Popplers', href: '/foods/popplers')
+    #       group.with_item(label: 'Slurm', href: '/foods/slurm')
+    #       group.with_show_more_item(label: 'Show more foods', src: UrlHelpers.nav_list_items_path, pages: 2) do |item|
+    #         item.with_trailing_visual_icon(icon: :plus)
+    #       end
+    #     end
+    #   end
+    # end
+
+    # # @label Trailing action
+    # def trailing_action; end
+  end
+end

data/previews/pulse/popover_preview.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Pulse
+  # @label Popover
+  class PopoverPreview < ViewComponent::Preview
+    # @label Playground
+    #
+    # @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top]
+    def playground(caret: :top)
+      render Pulse::Popover.new do |component|
+        component.with_heading do
+          'Popover Heading'
+        end
+        component.with_body(caret:) do
+          'This is the Popover body.'
+        end
+      end
+    end
+
+    # @label Default
+    #
+    # @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top]
+    def default(caret: :top)
+      render Pulse::Popover.new do |component|
+        component.with_heading do
+          'Popover Heading'
+        end
+        component.with_body(caret:) do
+          'This is the Popover body.'
+        end
+      end
+    end
+
+    # @label Large
+    def large
+      render Pulse::Popover.new do |component|
+        component.with_body(large: true) do
+          'This is a large Popover body.'
+        end
+      end
+    end
+
+    # @!group Directions
+    def bottom_right
+      render Pulse::Popover.new do |component|
+        component.with_body(caret: :bottom_right) do
+          'This is the Popover body.'
+        end
+      end
+    end
+
+    def top_right
+      render Pulse::Popover.new do |component|
+        component.with_body(caret: :top_right) do
+          'This is the Popover body.'
+        end
+      end
+    end
+
+    def bottom_left
+      render Pulse::Popover.new do |component|
+        component.with_body(caret: :bottom_left) do
+          'This is the Popover body.'
+        end
+      end
+    end
+
+    def top_left
+      render Pulse::Popover.new do |component|
+        component.with_body(caret: :top_left) do
+          'This is the Popover body.'
+        end
+      end
+    end
+    # @!endgroup
+  end
+end

data/previews/pulse/progress_bar_preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Pulse
+  # @label ProgressBar
+  class ProgressBarPreview < ViewComponent::Preview
+    # @label Playground
+    #
+    # @display wrapper true
+    # @display wrapper_classes 'flex justify-center items-center p-4 bg-gray-50 h-10 w-24'
+    # @param percentage number
+    # @param title text
+    def playground(percentage: 50, title: nil)
+      render Pulse::ProgressBar.new(percentage:, title:)
+    end
+
+    # @label Default
+    #
+    # @param percentage number
+    def default(percentage: 50)
+      render Pulse::ProgressBar.new(percentage:)
+    end
+  end
+end

data/previews/pulse/table_preview.rb

@@ -0,0 +1,168 @@
+# frozen_string_literal: true
+
+module Pulse
+  # @label Table
+  class TablePreview < ViewComponent::Preview
+    COLLECTION = [
+      { column1: 'A1', column2: 'A2', column3: 'A3' },
+      { column1: 'B1', column2: 'B2', column3: 'B3' },
+      { column1: 'C1', column2: 'C2', column3: 'C3' },
+      { column1: 'D1', column2: 'D2', column3: 'D3' },
+      { column1: 'E1', column2: 'E2', column3: 'E3' }
+    ].freeze
+
+    # @label Playground
+    # def playground
+    # end
+
+    # @label Default options
+    def default
+      collection = ::Kaminari.paginate_array(COLLECTION).page(1).per(2)
+      render(Pulse::Table.new(collection)) do |c|
+        c.with_column(title: 'Column 1') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2') do |row|
+          row[:column2]
+        end
+        c.with_column do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def striped
+      render(Pulse::Table.new(COLLECTION, striped: true)) do |c|
+        c.with_column(title: 'Column 1') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2') do |row|
+          row[:column2]
+        end
+        c.with_column do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def hoverable
+      render(Pulse::Table.new(COLLECTION, hoverable: true)) do |c|
+        c.with_column(title: 'Column 1') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2') do |row|
+          row[:column2]
+        end
+        c.with_column do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def without_header
+      render(Pulse::Table.new(COLLECTION, header: false)) do |c|
+        c.with_column do |row|
+          row[:column1]
+        end
+        c.with_column do |row|
+          row[:column2]
+        end
+        c.with_column do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def custom_table_classes
+      render(Pulse::Table.new(COLLECTION, classes: 'pulse-mt-4')) do |c|
+        c.with_column(title: 'Column 1') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2') do |row|
+          row[:column2]
+        end
+        c.with_column do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def custom_head_classes
+      render(
+        Pulse::Table.new(COLLECTION, head_classes: 'pulse-bg-secondary-100')
+      ) do |c|
+        c.with_column(title: 'Column 1') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2') do |row|
+          row[:column2]
+        end
+        c.with_column do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def custom_row_classes
+      render(
+        Pulse::Table.new(COLLECTION, row_classes: 'pulse-bg-secondary-50')
+      ) do |c|
+        c.with_column(title: 'Column 1') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2') do |row|
+          row[:column2]
+        end
+        c.with_column do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def custom_column_classes
+      render(
+        Pulse::Table.new(COLLECTION)
+      ) do |c|
+        c.with_column(title: 'Column 1',
+                      classes: 'pulse-bg-secondary-50') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2', classes: 'pulse-text-primary') do |row|
+          row[:column2]
+        end
+        c.with_column(classes: 'pulse-font-bold') do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def sortable
+      render(Pulse::Table.new(COLLECTION, current_sort_column: 'c2',
+                                          current_sort_direction: :desc)) do |c|
+        c.with_column(title: 'Column 1', sort_by: 'c1') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2', sort_by: 'c2') do |row|
+          row[:column2]
+        end
+        c.with_column do |row|
+          row[:column3]
+        end
+      end
+    end
+
+    def with_footers
+      render(Pulse::Table.new(COLLECTION)) do |c|
+        c.with_column(title: 'Column 1') do |row|
+          row[:column1]
+        end
+        c.with_column(title: 'Column 2', footer: 'foot') do |row|
+          row[:column2]
+        end
+        c.with_column(footer: 'total') do |row|
+          row[:column3]
+        end
+      end
+    end
+  end
+end

data/previews/pulse/text_preview.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module Pulse
+  # :nodoc:
+  class TextPreview < ViewComponent::Preview
+    # @param text text
+    # @param type select [h1, h2, h3, h4, subtitle, subtitle2,  subtitle3,
+    #  subtitle4, body1, body2, body3, body4, body5, body6, body7, body8,
+    #  caption1, caption2]
+    # @param tag text
+    # @param classes text
+    def default(text: 'Welcome', type: :h1, tag: nil, classes: nil)
+      render Pulse::Text.new(
+        type:,
+        tag:,
+        classes:
+      ) do
+        text
+      end
+    end
+
+    def h1
+      render(Pulse::Text.new(type: :h1)) { 'Heading' }
+    end
+
+    def h2
+      render(Pulse::Text.new(type: :h2)) { 'Heading' }
+    end
+
+    def h3
+      render(Pulse::Text.new(type: :h3)) { 'Heading' }
+    end
+
+    def h4
+      render(Pulse::Text.new(type: :h4)) { 'Heading' }
+    end
+
+    def subtitle
+      render(Pulse::Text.new(type: :subtitle)) { 'Subtitle' }
+    end
+
+    def body1
+      render(Pulse::Text.new(type: :body1)) do
+        'Lorem ipsum esse soluta voluptas maiores omnis nihil officia consequa.'
+      end
+    end
+
+    def body2
+      render(Pulse::Text.new(type: :body2)) do
+        'Lorem ipsum esse soluta voluptas maiores omnis nihil officia consequa.'
+      end
+    end
+
+    def body3
+      render(Pulse::Text.new(type: :body3)) do
+        'Lorem ipsum esse soluta voluptas maiores omnis nihil officia consequa.'
+      end
+    end
+
+    def body4
+      render(Pulse::Text.new(type: :body4)) do
+        'Lorem ipsum esse soluta voluptas maiores omnis nihil officia conseatr.'
+      end
+    end
+
+    def body5
+      render(Pulse::Text.new(type: :body5)) do
+        'Lorem ipsum esse soluta voluptas maiores omnis nihil officia consequa.'
+      end
+    end
+
+    def body6
+      render(Pulse::Text.new(type: :body6)) do
+        'Lorem ipsum esse soluta voluptas maiores omnis nihil officia consequa.'
+      end
+    end
+
+    def body7
+      render(Pulse::Text.new(type: :body7)) do
+        'Lorem ipsum esse soluta voluptas maiores omnis nihil officia consequa.'
+      end
+    end
+
+    def body8
+      render(Pulse::Text.new(type: :body8)) do
+        'Lorem ipsum esse soluta voluptas maiores omnis nihil officia consequa.'
+      end
+    end
+
+    def caption1
+      render(Pulse::Text.new(type: :caption1)) do
+        'At dolorem rerum ea cupiditate vel eos facilis ea beatae vitae tempor'
+      end
+    end
+
+    def caption2
+      render(Pulse::Text.new(type: :caption2)) do
+        'At dolorem rerum ea cupiditate vel eos facilis ea beatae vitae tempoe.'
+      end
+    end
+  end
+end

data/previews/pulse/toast_preview.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Pulse
+  # :nodoc:
+  class ToastPreview < ViewComponent::Preview
+    # @label Playground
+    # @param theme [Symbol] select [[Default, ~], [Error, error], [Success, success]]
+    # @param auto_hide toggle
+    # @param text text
+    def default(auto_hide: true, theme: :default, text: 'A default toast.')
+      render Pulse::Toast.new(auto_hide:, theme:) do |c|
+        c.with_action(url: 'https://www.jamieoliver.com/snacks/') do
+          'Undo'
+        end
+        text
+      end
+    end
+
+    # @label Default
+    def default_theme
+      render Pulse::Toast.new do |c|
+        c.with_action(url: 'https://www.jamieoliver.com/snacks/') do
+          'Undo'
+        end
+        'A default toast.'
+      end
+    end
+
+    def error
+      render Pulse::Toast.new(theme: :error) do |c|
+        c.with_action(url: 'https://www.jamieoliver.com/snacks/') do
+          'Undo'
+        end
+        'An error toast.'
+      end
+    end
+
+    def success
+      render Pulse::Toast.new(theme: :success) do |c|
+        c.with_action(url: 'https://www.jamieoliver.com/snacks/') do
+          'Undo'
+        end
+        'This is a success toast.'
+      end
+    end
+
+    def auto_hide_off
+      render Pulse::Toast.new(auto_hide: false) do |c|
+        c.with_action(url: 'https://www.jamieoliver.com/snacks/') do
+          'Undo'
+        end
+        'This is a toast message.'
+      end
+    end
+
+    def long_text
+      render Pulse::Toast.new do |c|
+        c.with_action(url: 'https://www.jamieoliver.com/snacks/') do
+          'Undo'
+        end
+        'Blanditiis ut autem nesciunt ex sunt similique tempora et enim ' \
+          'dolorum sit maiores sunt voluptas amet. Cupiditate dolorem ' \
+          'suscipit sapiente eos eligendi eos iste quos'
+      end
+    end
+  end
+end