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

polaris_view_components 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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