polaris_view_components 0.7.0 → 0.8.0

data/app/components/polaris/text_field_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class TextFieldComponent < Polaris::NewComponent
+  class TextFieldComponent < Polaris::Component
     TYPE_DEFAULT = :text
     TYPE_OPTIONS = %i[
       text number email password search tel url date
@@ -180,7 +180,7 @@ module Polaris
       @type == :number && !@disabled
     end
 
-    class Affix < Polaris::NewComponent
+    class Affix < Polaris::Component
       def initialize(icon: nil)
         @icon = icon
       end

data/app/components/polaris/text_style_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class TextStyleComponent < Polaris::NewComponent
+  class TextStyleComponent < Polaris::Component
     VARIATION_DEFAULT = :default
     VARIATION_MAPPINGS = {
       VARIATION_DEFAULT => "",

data/app/components/polaris/thumbnail_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ThumbnailComponent < Polaris::NewComponent
+  class ThumbnailComponent < Polaris::Component
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
       small: "Polaris-Thumbnail--sizeSmall",

data/app/components/polaris/toast_component.rb

@@ -1,4 +1,4 @@
-class Polaris::ToastComponent < Polaris::NewComponent
+class Polaris::ToastComponent < Polaris::Component
   renders_one :action, ->(**system_arguments) do
     Polaris::ButtonComponent.new(plain: true, monochrome: true, **system_arguments)
   end

data/app/components/polaris/top_bar/user_menu_component.rb

@@ -1,4 +1,4 @@
-class Polaris::TopBar::UserMenuComponent < Polaris::NewComponent
+class Polaris::TopBar::UserMenuComponent < Polaris::Component
   renders_one :avatar, Polaris::AvatarComponent
 
   def initialize(name:, detail:, **system_arguments)

data/app/components/polaris/visually_hidden_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class VisuallyHiddenComponent < Polaris::NewComponent
+  class VisuallyHiddenComponent < Polaris::Component
     def initialize
     end
 

data/app/helpers/polaris/form_builder.rb

@@ -10,12 +10,13 @@ module Polaris
       return if object.blank?
       return unless object.errors.any?
 
-      model_name = object.class.model_name.human.downcase
+      title = I18n.t(
+        "polaris.form_builder.errors_summary",
+        count: object.errors.count,
+        model: 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::BannerComponent.new(title: title, status: :critical) do
         render(Polaris::ListComponent.new) do |list|
           object.errors.full_messages.each do |error|
             list.item { error.html_safe }
@@ -75,5 +76,13 @@ module Polaris
       end
       render Polaris::RadioButtonComponent.new(form: self, attribute: method, **options, &block)
     end
+
+    def polaris_dropzone(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      render Polaris::DropzoneComponent.new(form: self, attribute: method, **options, &block)
+    end
   end
 end

data/app/helpers/polaris/view_helper.rb

@@ -22,7 +22,7 @@ module Polaris
       data_table:               "Polaris::DataTableComponent",
       description_list:         "Polaris::DescriptionListComponent",
       display_text:             "Polaris::DisplayTextComponent",
-      dropzone:                 "Polaris::Dropzone::Component",
+      dropzone:                 "Polaris::DropzoneComponent",
       empty_state:              "Polaris::EmptyStateComponent",
       exception_list:           "Polaris::ExceptionListComponent",
       footer_help:              "Polaris::FooterHelpComponent",
@@ -51,6 +51,7 @@ module Polaris
       setting_toggle:           "Polaris::SettingToggleComponent",
       shopify_navigation:       "Polaris::ShopifyNavigationComponent",
       stack:                    "Polaris::StackComponent",
+      stack_item:               "Polaris::Stack::ItemComponent",
       subheading:               "Polaris::SubheadingComponent",
       scrollable:               "Polaris::ScrollableComponent",
       spinner:                  "Polaris::SpinnerComponent",

data/lib/polaris/view_components/engine.rb

@@ -15,6 +15,11 @@ module Polaris
         #{root}/app/helpers
       ]
 
+      # Remove default wrapping .field_with_errors for proper Shopify form validations
+      config.to_prepare do
+        ActionView::Base.field_error_proc = ->(html_tag, _instance) { html_tag.html_safe }
+      end
+
       initializer "polaris_view_components.assets" do |app|
         if app.config.respond_to?(:assets)
           app.config.assets.precompile += %w[
@@ -33,7 +38,6 @@ module Polaris
         ActiveSupport.on_load(:action_controller_base) do
           helper Polaris::ViewHelper
           helper Polaris::UrlHelper
-          helper Polaris::ConditionalHelper
         end
       end
     end

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.7.0"
+    VERSION = "0.8.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-12-20 00:00:00.000000000 Z
+date: 2022-01-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -450,6 +450,7 @@ files:
 - app/assets/javascripts/polaris_view_components.js
 - app/assets/javascripts/polaris_view_components/autocomplete_controller.js
 - app/assets/javascripts/polaris_view_components/button_controller.js
+- app/assets/javascripts/polaris_view_components/dropzone_controller.js
 - app/assets/javascripts/polaris_view_components/frame_controller.js
 - app/assets/javascripts/polaris_view_components/index.js
 - app/assets/javascripts/polaris_view_components/modal_controller.js
@@ -461,6 +462,7 @@ files:
 - app/assets/javascripts/polaris_view_components/select_controller.js
 - app/assets/javascripts/polaris_view_components/text_field_controller.js
 - app/assets/javascripts/polaris_view_components/toast_controller.js
+- app/assets/javascripts/polaris_view_components/utils.js
 - app/assets/stylesheets/polaris_view_components.css
 - app/assets/stylesheets/polaris_view_components.postcss.css
 - app/assets/stylesheets/polaris_view_components/custom.css
@@ -473,7 +475,6 @@ files:
 - app/components/polaris/action_list/section_component.rb
 - app/components/polaris/action_list_component.html.erb
 - app/components/polaris/action_list_component.rb
-- app/components/polaris/application_component.rb
 - app/components/polaris/autocomplete/action_component.rb
 - app/components/polaris/autocomplete/option_component.rb
 - app/components/polaris/autocomplete/section_component.html.erb
@@ -519,10 +520,8 @@ files:
 - app/components/polaris/description_list_component.html.erb
 - app/components/polaris/description_list_component.rb
 - app/components/polaris/display_text_component.rb
-- app/components/polaris/dropzone/component.html.erb
-- app/components/polaris/dropzone/component.rb
-- app/components/polaris/dropzone/controller.js
-- app/components/polaris/dropzone/utils.js
+- app/components/polaris/dropzone_component.html.erb
+- app/components/polaris/dropzone_component.rb
 - app/components/polaris/empty_state_component.html.erb
 - app/components/polaris/empty_state_component.rb
 - app/components/polaris/exception_list/item_component.html.erb
@@ -577,7 +576,6 @@ files:
 - app/components/polaris/navigation/section_component.rb
 - app/components/polaris/navigation_component.html.erb
 - app/components/polaris/navigation_component.rb
-- app/components/polaris/new_component.rb
 - app/components/polaris/option_list/checkbox_component.html.erb
 - app/components/polaris/option_list/checkbox_component.rb
 - app/components/polaris/option_list/option_component.rb
@@ -618,6 +616,7 @@ files:
 - app/components/polaris/spacer_component.rb
 - app/components/polaris/spinner_component.html.erb
 - app/components/polaris/spinner_component.rb
+- app/components/polaris/stack/item_component.rb
 - app/components/polaris/stack_component.html.erb
 - app/components/polaris/stack_component.rb
 - app/components/polaris/subheading_component.rb
@@ -639,7 +638,6 @@ files:
 - app/components/polaris/top_bar/user_menu_component.rb
 - app/components/polaris/visually_hidden_component.rb
 - app/helpers/polaris/class_name_helper.rb
-- app/helpers/polaris/conditional_helper.rb
 - app/helpers/polaris/fetch_or_fallback_helper.rb
 - app/helpers/polaris/form_builder.rb
 - app/helpers/polaris/option_helper.rb

data/app/components/polaris/application_component.rb

@@ -1,35 +0,0 @@
-class Polaris::ApplicationComponent < ViewComponent::Base
-  include ActiveModel::Validations
-
-  def initialize(data: {}, aria: {}, html_options: {}, **args)
-    @data = data
-    @aria = aria
-    @html_options = html_options
-  end
-
-  private
-
-  def classes
-    []
-  end
-
-  def additional_data
-    {}
-  end
-
-  def additional_aria
-    {}
-  end
-
-  def content_tag_options
-    {
-      class: classes.compact,
-      data: @data.merge(additional_data),
-      aria: @aria.merge(additional_aria)
-    }.merge(@html_options)
-  end
-
-  def before_render
-    validate!
-  end
-end

data/app/components/polaris/dropzone/component.html.erb

@@ -1,72 +0,0 @@
-<%= render Polaris::Labelled::Component.new(**labelled_attrs) do %>
-  <%= content_tag('div', content_tag_options) do %>
-    <div
-      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
-      data-polaris--dropzone-target="overlay"
-    >
-      <%= polaris_stack(vertical: true, spacing: :tight) do |stack| %>
-        <% stack.item do %>
-          <%= polaris_icon(color: :primary) do %>
-            <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
-              <path d="M2 2h1V0H1.5A1.5 1.5 0 000 1.5V3h2V2zM5 2h3V0H5v2zM13 2h-3V0h3v2zM0 5v3h2V5H0zM0 10v3h2v-3H0zM18 5h-2v3h2V5zM5 18h3v-2H5v2zM0 17a1 1 0 001 1h2v-2H2v-1H0v2zM16 3V2h-1V0h1.5A1.5 1.5 0 0118 1.5V3h-2z" />
-
-              <path d="M10.814 14H5.5A1.5 1.5 0 014 12.5v-7A1.5 1.5 0 015.5 4h7A1.5 1.5 0 0114 5.5v5.314l5.512 2.506a.832.832 0 01.028 1.501l-2.898 1.45a.832.832 0 00-.372.371l-1.449 2.898a.832.832 0 01-1.501-.028L10.814 14zm-.909-2l-.828-1.821c-.318-.7.402-1.42 1.102-1.102L12 9.905V6H6v6h3.905z" />
-            </svg>
-          <% end %>
-        <% end %>
-
-        <% stack.item do %>
-          <%= polaris_display_text(size: :small) do %>
-            <%= @overlay_text %>
-          <% end %>
-        <% end %>
-      <% end %>
-    </div>
-
-    <div class="Polaris-DropZone__Container" data-polaris--dropzone-target="container">
-      <div class="Polaris-DropZone-FileUpload" data-polaris--dropzone-target="fileUpload">
-        <%= polaris_stack(vertical: true) do |stack| %>
-          <% stack.item do %>
-            <img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt="">
-          <% end %>
-
-          <% stack.item do %>
-            <div class="Polaris-DropZone-FileUpload__Button">Add file</div>
-          <% end %>
-
-          <% stack.item do %>
-            <%= polaris_text_style(variation: :subdued) do %>
-              or drop files to upload
-            <% end %>
-          <% end %>
-        <% end %>
-      </div>
-    </div>
-
-    <%= polaris_visually_hidden do %>
-      <%= @form.file_field(@attribute, input_attrs) %>
-    <% end %>
-
-    <template data-polaris--dropzone-target="itemsTemplate">
-      <%= polaris_stack(vertical: true, data: { rendered: '' }) do %>
-        <span class="target"></span>
-      <% end %>
-    </template>
-
-    <template data-polaris--dropzone-target="itemTemplate">
-      <div class="Polaris-Stack__Item">
-        <%= polaris_stack(alignment: :center) do |stack| %>
-          <% stack.item do %>
-            <%# polaris_thumnail(source: "TODO", size: :small) %>
-          <% end %>
-
-          <% stack.item do %>
-            <div class="content">
-              <%= polaris_caption_component { "TODO" } %>
-            </div>
-          <% end %>
-        <% end %>
-      </div>
-    </template>
-  <% end %>
-<% end %>

data/app/components/polaris/dropzone/component.rb

@@ -1,128 +0,0 @@
-# frozen_string_literal: true
-
-module Polaris
-  module Dropzone
-    class Component < Polaris::Component
-      ALLOWED_TYPES = %w[file image]
-
-      validates :type, inclusion: {in: ALLOWED_TYPES, message: "%{value} is not a valid type"}
-      validates :label_action, type: Action, allow_nil: true
-
-      # TODO
-      # Options missing:
-      # - open_file_dialog
-      # - overlay
-      # - overlay_text
-      # - Size CSS Class
-      # - Doesn't take into account an initial load with files
-
-      attr_reader :label_action, :type
-
-      def initialize(
-        form:,
-        attribute:,
-        accept: "",
-        active: false,
-        allow_multiple: true,
-        disabled: false,
-        drop_on_page: false,
-        error: false,
-        error_overlay_text: "",
-        id: "",
-        label: "",
-        label_action: nil,
-        label_hidden: false,
-        overlay_text: "Drop file to upload",
-        outline: true,
-        type: "file",
-        **args
-      )
-        super
-
-        @form = form
-        @attribute = attribute
-        @accept = accept
-        @active = active
-        @allow_multiple = allow_multiple
-        @disabled = disabled
-        @drop_on_page = drop_on_page
-        @error = error
-        @error_overlay_text = error_overlay_text
-        @id = id
-        @label = label
-        @label_action = label_action
-        @label_hidden = label_hidden
-        @overlay_text = overlay_text
-        @outline = outline
-        @type = type
-      end
-
-      def labelled_attrs
-        {
-          form: @form,
-          attribute: @attribute,
-          error: @error,
-          label: @label,
-          label_hidden: @label_hidden,
-          index: @index,
-          action: @label_action
-        }
-      end
-
-      def input_attrs
-        {
-          accept: @accept,
-          disabled: @disabled,
-          type: "file",
-          multiple: @allow_multiple,
-          data: {
-            action: "focus->polaris--dropzone#onFocus blur->polaris--dropzone#onBlur change->polaris--dropzone#onChange",
-            'polaris--dropzone-target': "input"
-          }
-        }
-      end
-
-      private
-
-      def additional_aria
-        {
-          disabled: @disabled.to_s
-        }
-      end
-
-      def additional_data
-        {
-          controller: "polaris--dropzone",
-          action: "click->polaris--dropzone#onClick #{drop_actions}",
-          'polaris--dropzone-accept-value': @accept,
-          'polaris--dropzone-allowMultiple-value': @allow_multiple.to_s,
-          'polaris--dropzone-disabled-value': @disabled.to_s,
-          'polaris--dropzone-focused-value': "false",
-          'polaris--dropzone-drop-on-page-value': "false"
-        }
-      end
-
-      def drop_actions
-        event_scope = @drop_on_page ? "@document" : ""
-
-        [
-          "drop#{event_scope}->polaris--dropzone#onDrop",
-          "dragover#{event_scope}->polaris--dropzone#onDragOver",
-          "dragenter#{event_scope}->polaris--dropzone#onDragEnter",
-          "dragleave#{event_scope}->polaris--dropzone#onDragLeave"
-        ].join(" ")
-      end
-
-      def classes
-        classes = %w[Polaris-DropZone Polaris-DropZone--sizeExtraLarge]
-
-        classes << "Polaris-DropZone--isDisabled" if @disabled
-        classes << "Polaris-DropZone--isDisabled" if @disabled
-        classes << "Polaris-DropZone--hasError" if @error.present?
-        classes << "Polaris-DropZone--hasOutline" if @outline
-
-        classes
-      end
-    end
-  end
-end

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

@@ -1,226 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-import { fileAccepted, getDataTransferFiles } from './utils'
-
-// eslint-disable-next-line import/no-default-export
-export default class extends Controller {
-  static targets = ['container', 'fileUpload', 'input', 'itemTemplate', 'itemsTemplate', 'overlay']
-  static values = {
-    accept: String,
-    allowMultiple: Boolean,
-    disabled: Boolean,
-    dropOnPage: Boolean,
-    focused: Boolean,
-  }
-
-  _files = []
-  _acceptedFiles = []
-  _rejectedFiles = []
-  _dragging = false
-  dragTargets = []
-  filesRendered = false
-
-  onBlur () {
-    this.focusedValue = false
-  }
-
-  onChange (e) {
-    this.stopEvent(e)
-    if (this.disabled) return
-
-    this.clearFiles()
-
-    const fileList = getDataTransferFiles(e)
-    const { files, acceptedFiles, rejectedFiles } = this.getValidatedFiles(fileList)
-    this.dragTargets = []
-
-    this.files = files
-    this.acceptedFiles = acceptedFiles
-    this.rejectedFiles = rejectedFiles
-  }
-
-  onDragOver (e) {
-    this.stopEvent(e)
-    if (this.disabled) return
-  }
-
-  onDragEnter (e) {
-    this.stopEvent(e)
-    if (this.disabled) return
-
-    if (e.target && !this.dragTargets.includes(e.target)) {
-      this.dragTargets.push(e.target)
-    }
-
-    if (this.dragging) return
-
-    this.dragging = true
-  }
-
-  onDragLeave (e) {
-    this.stopEvent(e)
-    if (this.disabled) return
-
-    this.dragTargets = this.dragTargets.filter(el => {
-      const compareNode = this.element
-
-      return el !== e.target && compareNode && compareNode.contains(el)
-    })
-
-    if (this.dragTargets.length > 0) return
-
-    this.dragging = false
-  }
-
-  onDrop (e) {
-    this.stopEvent(e)
-    if (this.disabled) return
-
-    this.dragging = false
-
-    this.onChange(e)
-  }
-
-  onFocus () {
-    this.focusedValue = true
-  }
-
-  onClick () {
-    if (this.disabledValue) return
-
-    this.open()
-  }
-
-  open () {
-    this.inputTarget.click()
-  }
-
-  focusedValueChanged () {
-    this.element.classList.toggle('Polaris-DropZone--focused', this.focusedValue)
-  }
-
-  stopEvent (e) {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
-  getValidatedFiles (files) {
-    const acceptedFiles = []
-    const rejectedFiles = []
-
-    Array.from(files).forEach(file => {
-      if (!fileAccepted(file, this.acceptValue)) {
-        return rejectedFiles.push(file)
-      }
-
-      acceptedFiles.push(file)
-    })
-
-    if (!this.allowMultipleValue) {
-      acceptedFiles.splice(1, acceptedFiles.length)
-      rejectedFiles.push(...acceptedFiles.slice(1))
-    }
-
-    return { files, acceptedFiles, rejectedFiles }
-  }
-
-  renderUploadedFiles () {
-    if (this.files.length === 0) return
-
-    const clone = this.itemsTemplateTarget.content.cloneNode(true)
-    const filesTarget = clone.querySelector('.target')
-
-    this.files
-      .map(file => this.renderFile(file))
-      .forEach(fragment => filesTarget.parentNode.appendChild(fragment))
-    filesTarget.remove()
-
-    this.containerTarget.prepend(clone)
-
-    this.filesRendered = true
-  }
-
-  renderFile (file) {
-    const clone = this.itemTemplateTarget.content.cloneNode(true)
-    const [image, content, caption] = [
-      clone.querySelector('img'),
-      clone.querySelector('.content'),
-      clone.querySelector('.Polaris-Caption'),
-    ]
-    image.alt = file.name
-    image.src = window.URL.createObjectURL(file)
-    content.insertAdjacentText('afterbegin', file.name)
-    caption.textContent = `${file.size} bytes`
-
-    return clone
-  }
-
-  clearFiles () {
-    if (!this.filesRendered) return
-
-    this.acceptedFiles = []
-    this.files = []
-    this.rejectedFiles = []
-
-    const rendered = this.element.querySelector('[data-rendered]')
-    if (!rendered) return
-
-    rendered.remove()
-    this.filesRendered = false
-  }
-
-  get dropNode () {
-    return this.dropOnPageValue ? document : this.element
-  }
-
-  get disabled () {
-    return this.disabledValue
-  }
-
-  set disabled (val) {
-    this.disabledValue = val
-  }
-
-  get dragging () {
-    return this._dragging
-  }
-
-  set dragging (val) {
-    this._dragging = val
-
-    this.element.classList.toggle('Polaris-DropZone--isDragging', val)
-    this.overlayTarget.classList.toggle('Polaris-VisuallyHidden', !val)
-  }
-
-  get files () {
-    return this._files
-  }
-
-  set files (val) {
-    this._files = val
-
-    const hasFiles = val.length > 0
-
-    this.fileUploadTarget.classList.toggle('Polaris-VisuallyHidden', hasFiles)
-
-    if (hasFiles && !this.filesRendered) {
-      this.renderUploadedFiles()
-    }
-  }
-
-  get acceptedFiles () {
-    return this._acceptedFiles
-  }
-
-  set acceptedFiles (val) {
-    this._acceptedFiles = val
-  }
-
-  get rejectedFiles () {
-    return this._rejectedFiles
-  }
-
-  set rejectedFiles (val) {
-    this._rejectedFiles = val
-  }
-}