RubyGems - polaris_view_components - Versions diffs - 0.1.1 → 0.3.0 - Mend

polaris_view_components 0.1.1 → 0.3.0

Files changed (36) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1a11eec04f3214877a985fa4b015bbb30aaa11b5ba6bd88728eee58cb457b72c
-  data.tar.gz: 4fcc63ed09e2a5de504f9006e2564097ccd7c7cf0e2bfc4424762dd24fa1aaf9
+  metadata.gz: 1eda78e6803a1783585a9912d600193f29bba781d019204be62bd1cab484e97a
+  data.tar.gz: 5b9ba5de1405b1eb089991c7a2db6117d00bddc7787b6484515e35ecddd4b55e
 SHA512:
-  metadata.gz: dcf50eb971d01da05634bcc8c9e0c159b131100c42db1ab65e2d22077bcd53d4414772ae992c69e5185553eb32916fe876e9357ccd5fd286af7a0a84b7b60f95
-  data.tar.gz: eacaf9cf0bf374e2e8d0b625b2ddd9df1aa9e116ddaae67623510df7b8d96f60969b426e51dc2d9544bf6a79005b38c635e716852807bcc3316ac66196460c9e
+  metadata.gz: c433aa42655eacf3e55eccb3709d25356e6219a61f9f5880d529dd2c51f41ca8fe019a1f699675f0832efabdae104e2a0e26fb4a0100b1c8e0d0005b7917f0b5
+  data.tar.gz: 44ad24c6ff886a6bb9cb11d5fdce9936218f66337924c6474dcd78b4e68357fa08871492f38affb31dac7f19cce81ea4d7151179bba38ef656910ef49b2e0a72

data/README.md CHANGED Viewed

@@ -2,6 +2,8 @@
 Polaris ViewComponents is an implementation of the Polaris Design System using [ViewComponent](https://github.com/github/view_component).
+![Polaris ViewComponents](.github/assets/preview.png)
 > **This library is under active development. Breaking changes are likely until stable release.**
 ## Preview
@@ -26,6 +28,11 @@ In `Gemfile`, add:
 gem 'polaris_view_components'
 ```
+Run install generator:
+```bash
+rails generate polaris_view_components:install
+```
 Setup Polaris styles in your layouts `<head>` tag:
 ```erb
@@ -33,6 +40,22 @@ Setup Polaris styles in your layouts `<head>` tag:
 <%= stylesheet_link_tag 'polaris_view_components' %>
 ```
+Define Polaris style on your `<body>` tag:
+```erb
+<body style="<%= polaris_body_styles %>">
+```
+### Importmaps
+Add to `config/importmap.rb`:
+```rb
+pin "polaris-view-components", to: "polaris_view_components.js"
+```
+### NPM
 Install NPM package:
 ```bash
 yarn add polaris-view-components
@@ -42,7 +65,7 @@ Add to `app/javascript/controllers/index.js`:
 ```javascript
 // Polaris ViewComponents
 import { registerPolarisControllers } from "polaris-view-components"
-registerPolarisControllers(application)
+registerPolarisControllers(Stimulus)
 ```
 ## Dependencies

data/app/assets/javascripts/{polaris.js → polaris_view_components.js} RENAMED Viewed

@@ -1,20 +1,19 @@
-import { Controller } from "stimulus";
+import { Controller } from "@hotwired/stimulus";
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
+class ResourceItem extends Controller {
+  static targets=[ "link" ];
+  open(event) {
+    if (this.hasLinkTarget && this.targetNotClickable(event.target)) {
+      this.linkTarget.click();
+    }
+  }
+  targetNotClickable(element) {
+    return !element.closest("a") && !element.closest("button") && element.nodeName !== "INPUT";
   }
-  return obj;
 }
-class _class$1 extends Controller {
+class Select extends Controller {
+  static targets=[ "selectedOption" ];
   update(event) {
     const select = event.currentTarget;
     const option = select.options[select.selectedIndex];
@@ -22,9 +21,17 @@ class _class$1 extends Controller {
   }
 }
-_defineProperty(_class$1, "targets", [ "selectedOption" ]);
-class _class extends Controller {
+class TextField extends Controller {
+  static targets=[ "input", "clearButton", "characterCount" ];
+  static classes=[ "hasValue", "clearButtonHidden" ];
+  static values={
+    value: String,
+    labelTemplate: String,
+    textTemplate: String,
+    step: Number,
+    min: Number,
+    max: Number
+  };
   connect() {
     this.syncValue();
     this.stepValue = this.inputTarget.getAttribute("step");
@@ -85,29 +92,16 @@ class _class extends Controller {
     if (isNaN(numericValue)) {
       return;
     }
-    console.log(numericValue, this.stepValue);
     const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue));
     const newValue = Math.min(Number(this.maxValue), Math.max(numericValue + steps * this.stepValue, Number(this.minValue)));
     this.value = String(newValue.toFixed(decimalPlaces));
   }
 }
-_defineProperty(_class, "targets", [ "input", "clearButton", "characterCount" ]);
-_defineProperty(_class, "classes", [ "hasValue", "clearButtonHidden" ]);
-_defineProperty(_class, "values", {
-  value: String,
-  labelTemplate: String,
-  textTemplate: String,
-  step: Number,
-  min: Number,
-  max: Number
-});
 function registerPolarisControllers(application) {
-  application.register("polaris-select", _class$1);
-  application.register("polaris-text-field", _class);
+  application.register("polaris-resource-item", ResourceItem);
+  application.register("polaris-select", Select);
+  application.register("polaris-text-field", TextField);
 }
-export { _class$1 as Select, _class as TextField, registerPolarisControllers };
+export { ResourceItem, Select, TextField, registerPolarisControllers };

data/app/components/polaris/button_component.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<%= render Polaris::BaseComponent.new(tag: @tag, **dynamic_arguments) do %>
+<%= render Polaris::BaseComponent.new(tag: @tag, **system_arguments) do %>
   <span class="Polaris-Button__Content">
     <% if @loading %>
       <span class="Polaris-Button__Spinner">

data/app/components/polaris/button_component.rb CHANGED Viewed

@@ -1,90 +1,6 @@
 # frozen_string_literal: true
 module Polaris
-  class ButtonComponent < Polaris::NewComponent
-    SIZE_DEFAULT = :medium
-    SIZE_MAPPINGS = {
-      SIZE_DEFAULT => "",
-      :slim => "Polaris-Button--sizeSlim",
-      :large => "Polaris-Button--sizeLarge",
-    }
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    TEXT_ALIGN_DEFAULT = :default
-    TEXT_ALIGN_MAPPINGS = {
-      TEXT_ALIGN_DEFAULT => "",
-      :left => "Polaris-Button--textAlignLeft",
-      :center => "Polaris-Button--textAlignCenter",
-      :right => "Polaris-Button--textAlignRight",
-    }
-    TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
-    renders_one :icon, IconComponent
-    def initialize(
-      url: nil,
-      outline: false,
-      plain: false,
-      primary: false,
-      pressed: false,
-      monochrome: false,
-      loading: false,
-      destructive: false,
-      disabled: false,
-      external: false,
-      full_width: false,
-      submit: false,
-      remove_underline: false,
-      size: SIZE_DEFAULT,
-      text_align: TEXT_ALIGN_DEFAULT,
-      **system_arguments
-    )
-      @tag = url.present? ? 'a' : 'button'
-      @text_classes = class_names(
-        "Polaris-Button__Text",
-        "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
-      )
-      @loading = loading
-      @system_arguments = system_arguments
-      @system_arguments[:type] = submit ? 'submit' : 'button'
-      if loading
-        @system_arguments[:disabled] = true
-      end
-      if url.present?
-        @system_arguments.delete(:type)
-        @system_arguments[:href] = url
-        @system_arguments[:target] = "_blank" if external
-      end
-      if disabled
-        @system_arguments[:disabled] = disabled
-      end
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Button",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
-        TEXT_ALIGN_MAPPINGS[fetch_or_fallback(TEXT_ALIGN_OPTIONS, text_align, TEXT_ALIGN_DEFAULT)],
-        "Polaris-Button--destructive": destructive,
-        "Polaris-Button--disabled": disabled || loading,
-        "Polaris-Button--loading": loading,
-        "Polaris-Button--fullWidth": full_width,
-        "Polaris-Button--monochrome": monochrome,
-        "Polaris-Button--outline": outline,
-        "Polaris-Button--plain": plain,
-        "Polaris-Button--primary": primary,
-        "Polaris-Button--pressed": pressed,
-        "Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
-      )
-    end
-    private
-    def dynamic_arguments
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Button--iconOnly": icon.present? && content.blank?,
-      )
-      @system_arguments
-    end
+  class ButtonComponent < HeadlessButton
   end
 end

data/app/components/polaris/card/section_component.rb CHANGED Viewed

@@ -6,6 +6,7 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
     subdued: false,
     flush: false,
     full_width: false,
+    unstyled: false,
     actions: [],
     **system_arguments
   )
@@ -13,10 +14,10 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
     @system_arguments[:tag] = :div
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
-      "Polaris-Card__Section",
       "Polaris-Card__Section--flush": flush,
       "Polaris-Card__Section--subdued": subdued,
       "Polaris-Card__Section--fullWidth": full_width,
+      "Polaris-Card__Section": !unstyled,
     )
     @title = title

data/app/components/polaris/card_component.html.erb CHANGED Viewed

@@ -11,8 +11,14 @@
     <% sections.each do |section| %>
       <%= section %>
     <% end %>
-  <% else %>
-    <%= render Polaris::Card::SectionComponent.new do %>
+  <% end %>
+  <% if content.present? %>
+    <% if @sectioned %>
+      <%= render Polaris::Card::SectionComponent.new do %>
+        <%= content %>
+      <% end %>
+    <% else %>
       <%= content %>
     <% end %>
   <% end %>

data/app/components/polaris/card_component.rb CHANGED Viewed

@@ -21,12 +21,14 @@ module Polaris
     def initialize(
       title: "",
       actions: [],
+      sectioned: true,
       subdued: false,
       footer_action_alignment: FOOTER_ACTION_ALIGNMENT_DEFAULT,
       **system_arguments
     )
       @title = title
       @actions = actions
+      @sectioned = sectioned
       @footer_action_alignment = footer_action_alignment
       @system_arguments = system_arguments

data/app/components/polaris/dropzone/controller.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from "@hotwired/stimulus"
 import { fileAccepted, getDataTransferFiles } from './utils'

data/app/components/polaris/headless_button.html.erb ADDED Viewed

@@ -0,0 +1,22 @@
+<span class="Polaris-Button__Content">
+  <% if @loading %>
+    <span class="Polaris-Button__Spinner">
+      <%= polaris_spinner(size: :small) %>
+    </span>
+  <% end %>
+  <% if icon.present? %>
+    <div class="Polaris-Button__Icon">
+      <%= icon %>
+    </div>
+    <% if content.present? %>
+      &nbsp;
+    <% end %>
+  <% end %>
+  <% if content.present? %>
+    <div class="<%= @text_classes %>">
+      <%= content %>
+    </div>
+  <% end %>
+</span>

data/app/components/polaris/headless_button.rb ADDED Viewed

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+module Polaris
+  class HeadlessButton < Polaris::NewComponent
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      :slim => "Polaris-Button--sizeSlim",
+      :large => "Polaris-Button--sizeLarge",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+    TEXT_ALIGN_DEFAULT = :default
+    TEXT_ALIGN_MAPPINGS = {
+      TEXT_ALIGN_DEFAULT => "",
+      :left => "Polaris-Button--textAlignLeft",
+      :center => "Polaris-Button--textAlignCenter",
+      :right => "Polaris-Button--textAlignRight",
+    }
+    TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
+    renders_one :icon, IconComponent
+    def initialize(
+      url: nil,
+      outline: false,
+      plain: false,
+      primary: false,
+      pressed: false,
+      monochrome: false,
+      loading: false,
+      destructive: false,
+      disabled: false,
+      external: false,
+      full_width: false,
+      submit: false,
+      remove_underline: false,
+      size: SIZE_DEFAULT,
+      text_align: TEXT_ALIGN_DEFAULT,
+      **system_arguments
+    )
+      @tag = url.present? ? 'a' : 'button'
+      @text_classes = class_names(
+        "Polaris-Button__Text",
+        "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
+      )
+      @loading = loading
+      @system_arguments = system_arguments
+      @system_arguments[:type] = submit ? 'submit' : 'button'
+      if loading
+        @system_arguments[:disabled] = true
+      end
+      if url.present?
+        @system_arguments.delete(:type)
+        @system_arguments[:href] = url
+        @system_arguments[:target] = "_blank" if external
+      end
+      if disabled
+        @system_arguments[:disabled] = disabled
+      end
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Button",
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        TEXT_ALIGN_MAPPINGS[fetch_or_fallback(TEXT_ALIGN_OPTIONS, text_align, TEXT_ALIGN_DEFAULT)],
+        "Polaris-Button--destructive": destructive,
+        "Polaris-Button--disabled": disabled || loading,
+        "Polaris-Button--loading": loading,
+        "Polaris-Button--fullWidth": full_width,
+        "Polaris-Button--monochrome": monochrome,
+        "Polaris-Button--outline": outline,
+        "Polaris-Button--plain": plain,
+        "Polaris-Button--primary": primary,
+        "Polaris-Button--pressed": pressed,
+        "Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
+      )
+    end
+    def system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Button--iconOnly": icon.present? && content.blank?,
+      )
+      @system_arguments
+    end
+    def html_options
+      options = system_arguments
+      options[:class] = options[:classes]
+      options.delete(:classes)
+      options
+    end
+  end
+end

data/app/components/polaris/resource_item_component.html.erb ADDED Viewed

@@ -0,0 +1,27 @@
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <div class="Polaris-ResourceItem__ItemWrapper">
+    <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+      <% if @url %>
+        <a
+          class="Polaris-ResourceItem__Link"
+          tabindex="0"
+          href="<%= @url %>"
+          data-polaris-unstyled="true"
+          data-polaris-resource-item-target="link"></a>
+      <% end %>
+      <%= render(Polaris::BaseComponent.new(**container_arguments)) do %>
+        <% if media.present? %>
+          <div class="Polaris-ResourceItem__Owned">
+            <div class="Polaris-ResourceItem__Media">
+              <%= media %>
+            </div>
+          </div>
+        <% end %>
+        <div class="Polaris-ResourceItem__Content">
+          <%= content %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/polaris/resource_item_component.rb ADDED Viewed

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+module Polaris
+  class ResourceItemComponent < Polaris::NewComponent
+    CURSOR_DEFAULT = :default
+    CURSOR_OPTIONS = %i[default pointer]
+    ALIGNMENT_DEFAULT = :default
+    ALIGNMENT_MAPPINGS = {
+      ALIGNMENT_DEFAULT => "",
+      center: "Polaris-ResourceItem--alignmentCenter",
+    }
+    ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
+    renders_one :media
+    def initialize(
+      url: nil,
+      vertical_alignment: ALIGNMENT_DEFAULT,
+      wrapper_arguments: {},
+      container_arguments: {},
+      **system_arguments
+    )
+      @url = url
+      @vertical_alignment = vertical_alignment
+      @wrapper_arguments = wrapper_arguments
+      @container_arguments = container_arguments
+      @system_arguments = system_arguments
+    end
+    def wrapper_arguments
+      {
+        tag: "li",
+        data: {},
+      }.deep_merge(@wrapper_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-ResourceItem__ListItem",
+        )
+        prepend_option(args[:data], :controller, "polaris-resource-item")
+      end
+    end
+    def container_arguments
+      {
+        tag: "div",
+      }.deep_merge(@container_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-ResourceItem__Container",
+          ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)],
+        )
+      end
+    end
+    def system_arguments
+      {
+        tag: "div",
+        data: {},
+      }.deep_merge(@system_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-ResourceItem",
+        )
+        prepend_option(args, :style, "cursor: #{cursor};")
+        prepend_option(args[:data], :action, "click->polaris-resource-item#open")
+      end
+    end
+    private
+      def cursor
+        @url.present? ? "pointer" : "default"
+      end
+  end
+end

data/app/components/polaris/resource_list_component.rb ADDED Viewed

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+module Polaris
+  class ResourceListComponent < Polaris::NewComponent
+    def initialize(
+      wrapper_arguments: {},
+      **system_arguments
+    )
+      @wrapper_arguments = wrapper_arguments
+      @wrapper_arguments[:tag] = "div"
+      @wrapper_arguments[:classes] = class_names(
+        @wrapper_arguments[:classes],
+        "Polaris-ResourceList__ResourceListWrapper",
+      )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "ul"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ResourceList",
+      )
+    end
+    def call
+      render(Polaris::BaseComponent.new(**@wrapper_arguments)) do
+        render(Polaris::BaseComponent.new(**@system_arguments)) do
+          content
+        end
+      end
+    end
+  end
+end

data/app/components/polaris/select_component.html.erb CHANGED Viewed

@@ -1,9 +1,18 @@
 <%= render Polaris::LabelledComponent.new(**@wrapper_arguments) do %>
   <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
     <% if @form.present? && @attribute.present? %>
-      <%= @form.select(@attribute, options_for_select(@options, @selected), @select_options, @input_options) %>
+      <%= @form.select(
+        @attribute,
+        options_for_select(@options, selected: @selected, disabled: @disabled_options),
+        @select_options,
+        @input_options,
+      ) %>
     <% else %>
-      <%= select_tag(@name, options_for_select(@options, @selected), @input_options) %>
+      <%= select_tag(
+        @name,
+        options_for_select(@options, selected: @selected, disabled: @disabled_options),
+        @input_options,
+      ) %>
     <% end %>
     <div

data/app/components/polaris/select_component.rb CHANGED Viewed

@@ -8,6 +8,7 @@ module Polaris
       name: nil,
       options:,
       selected: nil,
+      disabled_options: nil,
       label: nil,
       label_hidden: false,
       label_inline: false,
@@ -26,6 +27,7 @@ module Polaris
       @name = name
       @options = options
       @selected = selected
+      @disabled_options = disabled_options
       @label = label
       @label_hidden = label_hidden
       @label_inline = label_inline

data/app/components/polaris/skeleton_body_text_component.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% @lines.times do %>
+    <div class="Polaris-SkeletonBodyText"></div>
+  <% end %>
+<% end %>

data/app/components/polaris/skeleton_body_text_component.rb ADDED Viewed

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+module Polaris
+  class SkeletonBodyTextComponent < Polaris::NewComponent
+    def initialize(lines: 3, **system_arguments)
+      @lines = lines
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
+      )
+    end
+  end
+end

data/app/components/polaris/tag_component.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <span class="Polaris-TagText">
+    <%= content %>
+  </span>
+  <%= remove_button %>
+<% end %>

data/app/components/polaris/tag_component.rb ADDED Viewed

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+module Polaris
+  class TagComponent < Polaris::NewComponent
+    renders_one :remove_button, lambda { |**system_arguments|
+      render Polaris::BaseButton.new(
+        classes: "Polaris-Tag__Button",
+        disabled: @disabled,
+        **system_arguments
+      ) do |button|
+        polaris_icon(name: "CancelSmallMinor")
+      end
+    }
+    def initialize(clickable: false, disabled: false, **system_arguments)
+      @clickable = clickable
+      @disabled = disabled
+      @system_arguments = system_arguments
+    end
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = @clickable ? "button" : "span"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Tag",
+          "Polaris-Tag--clickable" => @clickable,
+          "Polaris-Tag--disabled" => @disabled,
+          "Polaris-Tag--removable" => remove_button.present?
+        )
+      end
+    end
+  end
+end

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

@@ -8,9 +8,9 @@
     <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
       <%= render Polaris::BaseComponent.new(**system_arguments) do %>
-        <% if @prefix.present? %>
+        <% if prefix.present? || @prefix.present? %>
           <div class="Polaris-TextField__Prefix">
-            <%= @prefix %>
+            <%= prefix || @prefix %>
           </div>
         <% end %>
@@ -20,9 +20,9 @@
           <%= public_send(input_tag, @name, @value, input_options) %>
         <% end %>
-        <% if @suffix.present? %>
+        <% if suffix.present? || @suffix.present? %>
           <div class="Polaris-TextField__Suffix">
-            <%= @suffix %>
+            <%= suffix || @suffix %>
           </div>
         <% end %>

data/app/components/polaris/text_field_component.rb CHANGED Viewed

@@ -19,6 +19,8 @@ module Polaris
     attr_reader :value
+    renders_one :prefix
+    renders_one :suffix
     renders_one :connected_left
     renders_one :connected_right
@@ -143,7 +145,7 @@ module Polaris
         default_options[:rows] = @rows
       end
-      default_options.deep_merge(@input_options).tap do |opts|
+      default_options.deep_merge(@input_options).compact.tap do |opts|
         opts[:class] = class_names(
           opts[:class],
           "Polaris-TextField__Input",

data/app/helpers/polaris/form_builder.rb CHANGED Viewed

@@ -1,16 +1,52 @@
 module Polaris
   class FormBuilder < ActionView::Helpers::FormBuilder
-    def polaris_text_field(method, **options, &block)
-      options[:error] ||= errors_for(method)
-      @template.render(
-        Polaris::TextFieldComponent.new(form: self, attribute: method, **options, &block)
-      )
+    attr_reader :template
+    delegate :render, :pluralize, to: :template
+    def errors_summary
+      return if object.blank?
+      return unless object.errors.any?
+      model_name = object.class.model_name.human.downcase
+      render Polaris::BannerComponent.new(
+        title: "There's #{pluralize(object.errors.count, "error")} with this #{model_name}:",
+        status: :critical,
+      ) do
+        render(Polaris::ListComponent.new) do |list|
+          object.errors.each do |error|
+            list.item { error.full_message }
+          end
+        end
+      end
     end
-    def errors_for(method)
+    def error_for(method)
       return if object.blank?
       return unless object.errors.key?(method)
-      object.errors[method].join(', ').html_safe
+      object.errors.full_messages_for(method)&.first
+    end
+    def polaris_text_field(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      render Polaris::TextFieldComponent.new(form: self, attribute: method, **options, &block)
+    end
+    def polaris_select(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      value = object&.public_send(method)
+      if value.present?
+        options[:selected] = value
+      end
+      render Polaris::SelectComponent.new(form: self, attribute: method, **options, &block)
     end
   end
 end

data/app/helpers/polaris/url_helper.rb ADDED Viewed

@@ -0,0 +1,19 @@
+module Polaris
+  module UrlHelper
+    def polaris_button_to(name = nil, options = nil, html_options = nil, &block)
+      html_options, options = options, name if block_given?
+      options      ||= {}
+      html_options ||= {}
+      html_options[:classes] = html_options[:class]
+      html_options.delete(:class)
+      button = Polaris::HeadlessButton.new(submit: true, **html_options)
+      button = button.with_content(name) unless block_given?
+      content = render(button, &block)
+      button_to(options, button.html_options) do
+        content
+      end
+    end
+  end
+end

data/app/helpers/polaris/view_helper.rb CHANGED Viewed

@@ -30,11 +30,15 @@ module Polaris
       pagination:               "Polaris::PaginationComponent",
       progress_bar:             "Polaris::ProgressBarComponent",
       radio_button:             "Polaris::RadioButtonComponent",
+      resource_list:            "Polaris::ResourceListComponent",
+      resource_item:            "Polaris::ResourceItemComponent",
       select:                   "Polaris::SelectComponent",
       shopify_navigation:       "Polaris::ShopifyNavigationComponent",
       stack:                    "Polaris::StackComponent",
       subheading:               "Polaris::SubheadingComponent",
       spinner:                  "Polaris::SpinnerComponent",
+      skeleton_body_text:       "Polaris::SkeletonBodyTextComponent",
+      tag:                      "Polaris::TagComponent",
       text_container:           "Polaris::TextContainerComponent",
       text_field:               "Polaris::TextFieldComponent",
       text_style:               "Polaris::TextStyleComponent",

data/app/javascript/{polaris → polaris_view_components}/index.js RENAMED Viewed

@@ -1,9 +1,11 @@
+import ResourceItem from './resource_item_controller'
 import Select from './select_controller'
 import TextField from './text_field_controller'
-export { Select, TextField }
+export { ResourceItem, Select, TextField }
 export function registerPolarisControllers(application) {
+  application.register('polaris-resource-item', ResourceItem)
   application.register('polaris-select', Select)
   application.register('polaris-text-field', TextField)
 }

data/app/javascript/polaris_view_components/resource_item_controller.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  static targets = ['link']
+  open(event) {
+    if (this.hasLinkTarget && this.targetNotClickable(event.target)) {
+      this.linkTarget.click()
+    }
+  }
+  targetNotClickable(element) {
+    return !element.closest('a') && !element.closest('button') && element.nodeName !== "INPUT"
+  }
+}

data/app/javascript/{polaris → polaris_view_components}/select_controller.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ['selectedOption']

data/app/javascript/{polaris → polaris_view_components}/text_field_controller.js RENAMED Viewed

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ['input', 'clearButton', 'characterCount']
@@ -99,7 +99,6 @@ export default class extends Controller {
     // Making sure the new value has the same length of decimal places as the
     // step / value has.
-    console.log(numericValue, this.stepValue)
     const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue))
     const newValue = Math.min(

data/lib/generators/polaris_view_components/USAGE ADDED Viewed

@@ -0,0 +1,5 @@
+Description:
+    Creates or adds import of NPM package to your application + additional installation steps.
+Example:
+    rails generate polaris_view_components:install

data/lib/generators/polaris_view_components/install_generator.rb ADDED Viewed

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+require 'rails/generators/active_record'
+module PolarisViewComponents
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path('templates', __dir__)
+    def add_npm_package
+      say "Adding NPM package", :green
+      run "yarn add polaris-view-components"
+    end
+    def add_to_stimulus_controller
+      say "Adding import to to Stimulus controller", :green
+      dir_path = "app/javascript/controllers"
+      empty_directory('app/javascript')
+      empty_directory(dir_path)
+      file_path = "#{dir_path}/index.js"
+      unless File.exist?(file_path)
+        copy_file 'stimulus_index.js', file_path
+      end
+      append_to_file file_path do
+        "import { registerPolarisControllers } from \"polaris-view-components\"\nregisterPolarisControllers(Stimulus)"
+      end
+    end
+    def show_readme
+      readme 'README'
+    end
+  end
+end

data/lib/generators/polaris_view_components/templates/README ADDED Viewed

@@ -0,0 +1,14 @@
+===============================================================================
+Some manual setup is still required:
+  1. Setup Polaris styles in your layouts <head> tag:
+       <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@6.6.0/dist/styles.css" />
+       <%= stylesheet_link_tag 'polaris_view_components' %>
+  2. Define Polaris style on your <body> tag:
+       <body style="<%= polaris_body_styles %>">
+===============================================================================

data/lib/generators/polaris_view_components/templates/stimulus_index.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { Application } from "@hotwired/stimulus"
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
+window.Stimulus = Application.start()
+const context = require.context("./", true, /\.js$/)
+Stimulus.load(definitionsFromContext(context))

data/lib/polaris/view_components/engine.rb CHANGED Viewed

@@ -13,13 +13,16 @@ module Polaris
       initializer "polaris_view_components.assets" do |app|
         if app.config.respond_to?(:assets)
-          app.config.assets.precompile += %w[polaris_view_components.css]
+          app.config.assets.precompile += %w[
+            polaris_view_components.js polaris_view_components.css
+          ]
         end
       end
       initializer "polaris_view_components.helpers" do
         ActiveSupport.on_load(:action_controller_base) do
           helper Polaris::ViewHelper
+          helper Polaris::UrlHelper
           helper Polaris::ActionHelper
           helper Polaris::ConditionalHelper
         end

data/lib/polaris/view_components/version.rb CHANGED Viewed

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.1.1"
+    VERSION = "0.3.0"
   end
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.3.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-09 00:00:00.000000000 Z
+date: 2021-10-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -20,7 +20,7 @@ dependencies:
         version: 5.0.0
     - - "<"
       - !ruby/object:Gem::Version
-        version: 7.0.0
+        version: 8.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -30,7 +30,7 @@ dependencies:
         version: 5.0.0
     - - "<"
       - !ruby/object:Gem::Version
-        version: 7.0.0
+        version: 8.0.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -447,7 +447,7 @@ files:
 - app/assets/icons/polaris/WearableMajor.svg
 - app/assets/icons/polaris/WholesaleMajor.svg
 - app/assets/icons/polaris/WifiMajor.svg
-- app/assets/javascripts/polaris.js
+- app/assets/javascripts/polaris_view_components.js
 - app/assets/stylesheets/polaris_view_components.css
 - app/components/polaris/action.rb
 - app/components/polaris/application_component.rb
@@ -503,6 +503,8 @@ files:
 - app/components/polaris/form_layout_component.html.erb
 - app/components/polaris/form_layout_component.rb
 - app/components/polaris/heading_component.rb
+- app/components/polaris/headless_button.html.erb
+- app/components/polaris/headless_button.rb
 - app/components/polaris/icon_component.html.erb
 - app/components/polaris/icon_component.rb
 - app/components/polaris/inline_error_component.html.erb
@@ -530,15 +532,22 @@ files:
 - app/components/polaris/progress_bar_component.rb
 - app/components/polaris/radio_button_component.html.erb
 - app/components/polaris/radio_button_component.rb
+- app/components/polaris/resource_item_component.html.erb
+- app/components/polaris/resource_item_component.rb
+- app/components/polaris/resource_list_component.rb
 - app/components/polaris/select_component.html.erb
 - app/components/polaris/select_component.rb
 - app/components/polaris/shopify_navigation_component.html.erb
 - app/components/polaris/shopify_navigation_component.rb
+- app/components/polaris/skeleton_body_text_component.html.erb
+- app/components/polaris/skeleton_body_text_component.rb
 - app/components/polaris/spinner_component.html.erb
 - app/components/polaris/spinner_component.rb
 - app/components/polaris/stack_component.html.erb
 - app/components/polaris/stack_component.rb
 - app/components/polaris/subheading_component.rb
+- app/components/polaris/tag_component.html.erb
+- app/components/polaris/tag_component.rb
 - app/components/polaris/text_container_component.rb
 - app/components/polaris/text_field_component.html.erb
 - app/components/polaris/text_field_component.rb
@@ -552,11 +561,17 @@ files:
 - app/helpers/polaris/fetch_or_fallback_helper.rb
 - app/helpers/polaris/form_builder.rb
 - app/helpers/polaris/option_helper.rb
+- app/helpers/polaris/url_helper.rb
 - app/helpers/polaris/view_helper.rb
-- app/javascript/polaris/index.js
-- app/javascript/polaris/select_controller.js
-- app/javascript/polaris/text_field_controller.js
+- app/javascript/polaris_view_components/index.js
+- app/javascript/polaris_view_components/resource_item_controller.js
+- app/javascript/polaris_view_components/select_controller.js
+- app/javascript/polaris_view_components/text_field_controller.js
 - app/validators/type_validator.rb
+- lib/generators/polaris_view_components/USAGE
+- lib/generators/polaris_view_components/install_generator.rb
+- lib/generators/polaris_view_components/templates/README
+- lib/generators/polaris_view_components/templates/stimulus_index.js
 - lib/polaris/view_components.rb
 - lib/polaris/view_components/engine.rb
 - lib/polaris/view_components/version.rb