polaris_view_components 0.9.1 → 0.11.0

data/app/components/polaris/index_table_component.html.erb

@@ -12,15 +12,13 @@
       </thead>
       <tbody>
         <% @data.each do |row| %>
-          <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
+          <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
             <% columns.each_with_index do |column, index| %>
-              <%= render_cell(
-                flush: column.flush,
-              ) do %>
+              <%= render_cell(flush: column.flush, **column.system_arguments) do %>
                 <%= column.call(row) %>
               <% end %>
             <% end %>
-          </tr>
+          <% end %>
         <% end %>
       </tbody>
     </table>

data/app/components/polaris/index_table_component.rb

@@ -18,6 +18,16 @@ module Polaris
       end
     end
 
+    def row_arguments(row)
+      {tag: "tr"}.tap do |args|
+        args[:classes] = class_names(
+          "Polaris-IndexTable__TableRow",
+          "Polaris-IndexTable__TableRow--unclickable"
+        )
+        args[:id] = dom_id(row) if row.respond_to?(:to_key)
+      end
+    end
+
     def render_cell(**arguments, &block)
       render(IndexTable::CellComponent.new(**arguments), &block)
     end

data/app/components/polaris/page_component.html.erb

@@ -1,6 +1,6 @@
-<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <% if render_header? %>
-    <%= render Polaris::BaseComponent.new(**@header_arguments) do %>
+    <%= render Polaris::BaseComponent.new(**header_arguments) do %>
       <div class="Polaris-Page-Header__Row">
         <% if @back_url.present? %>
           <div class="Polaris-Page-Header__BreadcrumbWrapper">
@@ -17,7 +17,7 @@
         <% end %>
 
         <div class="Polaris-Page-Header__TitleWrapper">
-          <div <% if thumbnail.present? %>class="Polaris-Header-Title--hasThumbnail"<% end %>>
+          <%= tag.div(class: ["Polaris-Header-Title--hasThumbnail": thumbnail.present?]) do %>
             <% if thumbnail.present? %>
               <div>
                 <%= thumbnail %>
@@ -38,18 +38,89 @@
               <% end %>
 
               <% if @subtitle.present? %>
-                <div class="Polaris-Header-Title__SubTitle">
+                <%= render Polaris::BaseComponent.new(**subtitle_arguments) do %>
                   <p><%= @subtitle %></p>
-                </div>
+                <% end %>
               <% end %>
             </div>
-          </div>
+          <% end %>
         </div>
 
-        <% if primary_action.present? %>
+        <% if @secondary_actions.any? || action_group.present? || render_primary_action? || has_pagination? %>
           <div class="Polaris-Page-Header__RightAlign">
-            <div class="Polaris-Page-Header__PrimaryActionWrapper">
-              <%= primary_action %>
+            <div class="Polaris-Page-Header__Actions">
+              <% if @secondary_actions.any? || action_group.present? %>
+                <div class="Polaris-ActionMenu Polaris-ActionMenu--mobile">
+                  <div class="Polaris-ActionMenu-RollupActions__RollupActivator">
+                    <%= polaris_popover(position: :below, alignment: :right) do |popover| %>
+                      <% popover.button do |button| %>
+                        <% button.icon(name: "HorizontalDotsMinor") %>
+                      <% end %>
+                      <%= polaris_action_list(style: "text-align: left;") do |action_list| %>
+                        <% if @secondary_actions.any? %>
+                          <% action_list.section do |section| %>
+                            <% @secondary_actions.each do |action| %>
+                              <% section.item(**action) { action[:content] } %>
+                            <% end %>
+                          <% end %>
+                        <% end %>
+
+                        <% if action_group.present? %>
+                          <% action_list.section(title: action_group.title) do |section| %>
+                            <% action_group.actions.each do |action| %>
+                              <% section.item(**action) { action[:content] } %>
+                            <% end %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  </div>
+                </div>
+                <div class="Polaris-ActionMenu Polaris-ActionMenu--desktop">
+                  <div class="Polaris-ActionMenu-Actions__ActionsLayout">
+                    <%= polaris_button_group(spacing: :extra_tight) do |group| %>
+                      <% @secondary_actions.each do |action| %>
+                        <% group.item do %>
+                          <% destructive = action.delete(:destructive) %>
+                          <% tag.span(class: ["Polaris-ActionMenu-SecondaryAction", "Polaris-ActionMenu-SecondaryAction--destructive": destructive]) do %>
+                            <%= polaris_button(**action) { action[:content] } %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                      <% if action_group.present? %>
+                        <% group.item do %>
+                          <span class="Polaris-ActionMenu-SecondaryAction">
+                            <%= action_group %>
+                          </span>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  </div>
+                </div>
+              <% end %>
+              <% if render_primary_action? %>
+                <div class="Polaris-Page-Header__PrimaryActionWrapper">
+                  <%= primary_action || custom_primary_action %>
+                </div>
+              <% end %>
+              <% if has_pagination? %>
+                <div class="Polaris-Page-Header__PaginationWrapper">
+                  <nav aria-label="Pagination">
+                    <%= polaris_button_group(segmented: true) do |group| %>
+                      <% group.item do %>
+                        <%= polaris_button(url: @prev_url, outline: true, disabled: @prev_url.blank?) do |button| %>
+                          <% button.icon(name: "ChevronLeftMinor") %>
+                        <% end %>
+                      <% end %>
+                      <% group.item do %>
+                        <%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?) do |button| %>
+                          <% button.icon(name: "ChevronRightMinor") %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  </nav>
+                </div>
+              <% end %>
             </div>
           </div>
         <% end %>
@@ -57,7 +128,7 @@
     <% end %>
   <% end %>
 
-  <%= render Polaris::BaseComponent.new(**@content_arguments) do %>
+  <%= render Polaris::BaseComponent.new(**content_arguments) do %>
     <%= content %>
   <% end %>
 <% end %>

data/app/components/polaris/page_component.rb

@@ -2,55 +2,117 @@
 
 module Polaris
   class PageComponent < Polaris::Component
+    renders_one :title_metadata
+    renders_one :thumbnail, Polaris::ThumbnailComponent
     renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
-    # renders_many :secondary_actions, Polaris::ButtonComponent
-    renders_one :title_metadata
-    renders_one :thumbnail, Polaris::ThumbnailComponent
+    renders_one :custom_primary_action
+    renders_one :action_group, "ActionGroupComponent"
 
     def initialize(
       title: nil,
       subtitle: nil,
+      compact_title: false,
       back_url: nil,
+      prev_url: nil,
+      next_url: nil,
       narrow_width: false,
       full_width: false,
       divider: false,
+      secondary_actions: [],
       **system_arguments
     )
       @title = title
       @subtitle = subtitle
+      @compact_title = compact_title
       @back_url = back_url
-
+      @prev_url = prev_url
+      @next_url = next_url
+      @narrow_width = narrow_width
+      @full_width = full_width
+      @divider = divider
+      @secondary_actions = secondary_actions
       @system_arguments = system_arguments
-      @system_arguments[:tag] = "div"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Page",
-        "Polaris-Page--narrowWidth": narrow_width,
-        "Polaris-Page--fullWidth": full_width
-      )
-
-      @header_arguments = {}
-      @header_arguments[:tag] = "div"
-      @header_arguments[:classes] = class_names(
-        "Polaris-Page-Header",
-        "Polaris-Page-Header--mobileView",
-        "Polaris-Page-Header--mediumTitle",
-        "Polaris-Page-Header--hasNavigation": back_url.present?,
-        "Polaris-Page-Header--noBreadcrumbs": back_url.blank?
-      )
-
-      @content_arguments = {}
-      @content_arguments[:tag] = "div"
-      @content_arguments[:classes] = class_names(
-        "Polaris-Page__Content",
-        "Polaris-Page--divider": divider
-      )
+    end
+
+    def header_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-Page-Header",
+          "Polaris-Page-Header--mobileView",
+          "Polaris-Page-Header--mediumTitle",
+          "Polaris-Page-Header--hasNavigation": @back_url.present?,
+          "Polaris-Page-Header--noBreadcrumbs": @back_url.blank?
+        )
+      }
+    end
+
+    def subtitle_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-Header-Title__SubTitle",
+          "Polaris-Header-Title__SubtitleCompact": @compact_title
+        )
+      }
+    end
+
+    def content_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-Page__Content",
+          "Polaris-Page--divider": @divider
+        )
+      }
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-Page",
+          "Polaris-Page--narrowWidth": @narrow_width,
+          "Polaris-Page--fullWidth": @full_width
+        )
+      end
     end
 
     def render_header?
-      @title.present? || @subtitle.present? || @back_url.present? || primary_action.present?
+      @title.present? || @subtitle.present? || @back_url.present? || render_primary_action?
+    end
+
+    def render_primary_action?
+      primary_action.present? || custom_primary_action.present?
+    end
+
+    def has_pagination?
+      @next_url.present? || @prev_url.present?
+    end
+
+    class ActionGroupComponent < Polaris::Component
+      attr_reader :title
+      attr_reader :actions
+
+      def initialize(title:, actions: [])
+        @title = title
+        @actions = actions
+      end
+
+      def call
+        render(Polaris::PopoverComponent.new(position: :below)) do |popover|
+          popover.button(disclosure: true) { @title }
+
+          polaris_action_list do |list|
+            @actions.each do |action|
+              list.item(**action) { action[:content] }
+            end
+          end
+        end
+      end
     end
   end
 end

data/app/components/polaris/resource_item_component.rb

@@ -31,6 +31,7 @@ module Polaris
       vertical_alignment: ALIGNMENT_DEFAULT,
       cursor: CURSOR_DEFAULT,
       selectable: false,
+      selected: false,
       offset: false,
       wrapper_arguments: {},
       container_arguments: {},
@@ -40,6 +41,7 @@ module Polaris
       @vertical_alignment = vertical_alignment
       @cursor = fetch_or_fallback(CURSOR_OPTIONS, cursor, CURSOR_DEFAULT)
       @selectable = selectable
+      @selected = selected
       @offset = offset
       @wrapper_arguments = wrapper_arguments
       @container_arguments = container_arguments
@@ -79,7 +81,8 @@ module Polaris
         args[:classes] = class_names(
           args[:classes],
           "Polaris-ResourceItem",
-          "Polaris-ResourceItem--selectable": @selectable
+          "Polaris-ResourceItem--selectable": @selectable,
+          "Polaris-ResourceItem--selected": @selected
         )
         prepend_option(args, :style, "cursor: #{@cursor};")
         prepend_option(args[:data], :action, "click->polaris-resource-item#open")

data/app/components/polaris/resource_list_component.html.erb

@@ -4,6 +4,17 @@
       <%= filters %>
     </div>
   <% end %>
+
+  <% if header_title.present? %>
+    <div class="Polaris-ResourceList__HeaderOuterWrapper">
+      <div class="Polaris-ResourceList__HeaderWrapper">
+        <div class="Polaris-ResourceList__HeaderContentWrapper">
+          <div class="Polaris-ResourceList__HeaderTitleWrapper"><%= header_title %></div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
   <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
     <%= content %>
   <% end %>

data/app/components/polaris/resource_list_component.rb

@@ -5,9 +5,16 @@ module Polaris
     renders_one :filters, Polaris::FiltersComponent
 
     def initialize(
+      items: [],
+      resource_name: nil,
+      total_items_count: nil,
       wrapper_arguments: {},
       **system_arguments
     )
+      @items = items
+      @resource_name = resource_name
+      @total_items_count = total_items_count
+
       @wrapper_arguments = wrapper_arguments
       @wrapper_arguments[:tag] = "div"
       @wrapper_arguments[:classes] = class_names(
@@ -22,5 +29,19 @@ module Polaris
         "Polaris-ResourceList"
       )
     end
+
+    def header_title
+      count unless @total_items_count.nil?
+    end
+
+    def resource_string
+      return @resource_name[:singular] if @items.size === 1 && !@total_items_count
+
+      @resource_name[:plural]
+    end
+
+    def count
+      "Showing #{@items.size} of #{@total_items_count} #{resource_string}"
+    end
   end
 end

data/app/components/polaris/text_field_component.html.erb

@@ -45,7 +45,7 @@
             type="button"
             class="Polaris-TextField__ClearButton
               <% if @value.blank? %>
-                Polaris-TextField__ClearButton--hidden
+                Polaris-TextField__Hidden
               <% end %>"
             tabindex="0"
             data-polaris-text-field-target="clearButton"

data/app/components/polaris/text_field_component.rb

@@ -105,7 +105,7 @@ module Polaris
         tag: "div",
         data: {
           polaris_text_field_has_value_class: "Polaris-TextField--hasValue",
-          polaris_text_field_clear_button_hidden_class: "Polaris-TextField__ClearButton--hidden"
+          polaris_text_field_clear_button_hidden_class: "Polaris-TextField__Hidden"
         }
       }.deep_merge(@system_arguments).tap do |opts|
         opts[:classes] = class_names(

data/app/components/polaris/visually_hidden_component.rb

@@ -2,9 +2,6 @@
 
 module Polaris
   class VisuallyHiddenComponent < Polaris::Component
-    def initialize
-    end
-
     def call
       content_tag(:span, content, class: "Polaris-VisuallyHidden")
     end

data/app/helpers/polaris/url_helper.rb

@@ -15,5 +15,42 @@ module Polaris
         content
       end
     end
+
+    def polaris_link_to(name = nil, options = nil, html_options = nil, &block)
+      html_options, options, name = options, name, block if block
+      options ||= {}
+
+      html_options = convert_options_to_data_attributes(options, html_options)
+      html_options[:classes] = html_options[:class]
+      html_options.delete(:class)
+
+      url = url_target(name, options)
+
+      link = Polaris::LinkComponent.new(url: url, **html_options)
+      link = link.with_content(name) unless block
+
+      render(link, &block)
+    end
+
+    def polaris_mail_to(email_address, name = nil, html_options = {}, &block)
+      html_options, name = name, nil if name.is_a?(Hash)
+      html_options = (html_options || {}).stringify_keys
+      html_options[:classes] = html_options[:class]
+      html_options.delete(:class)
+
+      extras = %w[cc bcc body subject reply_to].map! { |item|
+        option = html_options.delete(item).presence || next
+        "#{item.dasherize}=#{ERB::Util.url_encode(option)}"
+      }.compact
+      extras = extras.empty? ? "" : "?" + extras.join("&")
+
+      encoded_email_address = ERB::Util.url_encode(email_address).gsub("%40", "@")
+      url = "mailto:#{encoded_email_address}#{extras}"
+
+      link = Polaris::LinkComponent.new(url: url, **html_options)
+      link = link.with_content(name || email_address) unless block
+
+      render(link, &block)
+    end
   end
 end

data/app/helpers/polaris/view_helper.rb

@@ -24,6 +24,7 @@ module Polaris
       description_list:         "Polaris::DescriptionListComponent",
       display_text:             "Polaris::DisplayTextComponent",
       dropzone:                 "Polaris::DropzoneComponent",
+      empty_search_results:     "Polaris::EmptySearchResultsComponent",
       empty_state:              "Polaris::EmptyStateComponent",
       exception_list:           "Polaris::ExceptionListComponent",
       footer_help:              "Polaris::FooterHelpComponent",

data/lib/install/install.rb

@@ -0,0 +1,57 @@
+APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
+IMPORTMAP_BINSTUB = Rails.root.join("bin/importmap")
+IMPORTMAP_CONFIG_PATH = Rails.root.join("config/importmap.rb")
+STIMULUS_PATH = Rails.root.join("app/javascript/controllers/index.js")
+
+if APPLICATION_LAYOUT_PATH.exist?
+  say "Add Polaris styles in application layout"
+  insert_into_file APPLICATION_LAYOUT_PATH.to_s, "\n    <%= stylesheet_link_tag \"polaris_view_components\" %>", before: /\s*<\/head>/
+
+  if File.read(APPLICATION_LAYOUT_PATH).include?("<body>")
+    say "Add Polaris inline styles for <body> in application layout"
+    gsub_file APPLICATION_LAYOUT_PATH.to_s, "<body>", "<body style=\"<%= polaris_body_styles %>\">"
+  else
+    say "<body> tag is not found in application layout.", :red
+    say "        Replace <body> with <body style=\"<%= polaris_body_styles %>\"> in your custom layour."
+  end
+else
+  say "Default application.html.erb is missing!", :red
+  say "        1. Add <%= stylesheet_link_tag \"polaris_view_components\" %> within the <head> tag in your custom layout."
+  say "        2. Replace <body> with <body style=\"<%= polaris_body_styles %>\"> in your custom layour."
+end
+
+if IMPORTMAP_BINSTUB.exist?
+  importmaps = File.read(IMPORTMAP_CONFIG_PATH)
+
+  unless importmaps.include?("@rails/request.js")
+    say "Pin @rails/request.js dependency"
+    run "bin/importmap pin @rails/request.js --download"
+  end
+
+  say "Pin polaris_view_components"
+  append_to_file IMPORTMAP_CONFIG_PATH do
+    'pin "polaris-view-components", to: "polaris_view_components.js"\n'
+  end
+else
+  package_json = File.read(Rails.root.join("package.json"))
+
+  unless package_json.include?("@rails/request.js")
+    say "Add @rails/request.js dependency"
+    run "yarn add @rails/request.js"
+  end
+
+  say "Add polaris-view-components package"
+  run "yarn add polaris-view-components"
+end
+
+if STIMULUS_PATH.exist?
+  say "Add Polaris Stimulus controllers"
+  append_to_file STIMULUS_PATH do
+    "\nimport { registerPolarisControllers } from \"polaris-view-components\"\nregisterPolarisControllers(Stimulus)\n"
+  end
+else
+  say "Default Stimulus location is missing: app/javascript/controllers/index.js", :red
+  say "        Add to your Stimulus index.js:"
+  say "            import { registerPolarisControllers } from \"polaris-view-components\""
+  say "            registerPolarisControllers(Stimulus)"
+end

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.9.1"
+    VERSION = "0.11.0"
   end
 end

data/lib/tasks/polaris_view_components_tasks.rake

@@ -0,0 +1,6 @@
+namespace :polaris_view_components do
+  desc "Setup Polaris::ViewComponents for the app"
+  task :install do
+    system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/install.rb", __dir__)}"
+  end
+end