polaris_view_components 0.1.0

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

@@ -0,0 +1,226 @@
+import { Controller } from '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
+  }
+}

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

@@ -0,0 +1,57 @@
+const dragEvents = ['dragover', 'dragenter', 'drop']
+
+export function fileAccepted (file, accept) {
+  return file.type === 'application/x-moz-file' || accepts(file, accept)
+}
+
+export function getDataTransferFiles (event) {
+  if (isDragEvent(event) && event.dataTransfer) {
+    const dt = event.dataTransfer
+
+    if (dt.files && dt.files.length) {
+      return Array.from(dt.files)
+    } else if (dt.items && dt.items.length) {
+      // Chrome is the only browser that allows to read the file list on drag
+      // events and uses `items` instead of `files` in this case.
+      return Array.from(dt.items)
+    }
+  } else if (isChangeEvent(event) && event.target.files) {
+    // Return files from even when a file was selected from an upload dialog
+    return Array.from(event.target.files)
+  }
+
+  return []
+}
+
+function accepts (file, acceptedFiles = ['']) {
+  if (file && acceptedFiles) {
+    const fileName = file.name || ''
+    const mimeType = file.type || ''
+    const baseMimeType = mimeType.replace(/\/.*$/, '')
+    const acceptedFilesArray = Array.isArray(acceptedFiles)
+      ? acceptedFiles
+      : acceptedFiles.split(',')
+
+    return acceptedFilesArray.some((type) => {
+      const validType = type.trim()
+      if (validType.startsWith('.')) {
+        return fileName.toLowerCase().endsWith(validType.toLowerCase())
+      } else if (validType.endsWith('/*')) {
+        // This is something like a image/* mime type
+        return baseMimeType === validType.replace(/\/.*$/, '')
+      }
+
+      return mimeType === validType
+    })
+  }
+
+  return true
+}
+
+function isDragEvent (event) {
+  return dragEvents.indexOf(event.type) > 0
+}
+
+function isChangeEvent (event) {
+  return event.type === 'change'
+}

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

@@ -0,0 +1,47 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <div class="Polaris-EmptyState__Section">
+    <div class="Polaris-EmptyState__DetailsContainer">
+      <div class="Polaris-EmptyState__Details">
+        <% if @heading.present? || content.present? %>
+          <div class="Polaris-TextContainer">
+            <% if @heading.present? %>
+              <p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">
+                <%= @heading %>
+              </p>
+            <% end %>
+            <% if content.present? %>
+              <div class="Polaris-EmptyState__Content">
+                <%= content %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+        <div class="Polaris-EmptyState__Actions">
+          <%= polaris_stack(spacing: :tight, distribution: :center, alignment: :center) do |stack| %>
+            <% if primary_action.present? %>
+              <% stack.item do %>
+                <%= primary_action %>
+              <% end %>
+            <% end %>
+            <% if secondary_action.present? %>
+              <% stack.item do %>
+                <%= secondary_action %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+        <% if footer.present? %>
+          <div class="Polaris-EmptyState__FooterContent">
+            <div class="Polaris-TextContainer">
+              <%= footer %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="Polaris-EmptyState__ImageContainer">
+      <img src="<%= @image %>" role="presentation" alt="" class="Polaris-EmptyState__Image">
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/empty_state_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Polaris
+  class EmptyStateComponent < Polaris::NewComponent
+    WITHIN_DEFAULT = :page
+    WITHIN_MAPPINGS = {
+      WITHIN_DEFAULT => "",
+      container: "Polaris-EmptyState--withinContentContainer",
+    }
+    WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
+
+    renders_one :primary_action, -> (primary: true, **system_arguments) do
+      Polaris::ButtonComponent.new(primary: primary, **system_arguments)
+    end
+    renders_one :secondary_action, Polaris::ButtonComponent
+    renders_one :footer
+
+    def initialize(
+      image:,
+      heading: nil,
+      full_width: false,
+      within: WITHIN_DEFAULT,
+      **system_arguments
+    )
+      @image = image
+      @heading = heading
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-EmptyState",
+        WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
+        "Polaris-EmptyState--fullWidth": full_width,
+      )
+    end
+  end
+end

data/app/components/polaris/exception_list/item_component.html.erb

@@ -0,0 +1,19 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if @icon.present? %>
+    <span class="Polaris-ExceptionList__Icon">
+      <%= polaris_icon(name: @icon) %>
+    </span>
+  <% end %>
+
+  <% if @title.present? %>
+    <span class="Polaris-ExceptionList__Title">
+      <%= @title %>
+    </span>
+  <% end %>
+
+  <% if content.present? %>
+    <span class="Polaris-ExceptionList__Description">
+      <%= content %>
+    </span>
+  <% end %>
+<% end %>

data/app/components/polaris/exception_list/item_component.rb

@@ -0,0 +1,27 @@
+class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
+  STATUS_DEFAULT = :default
+  STATUS_MAPPINGS = {
+    STATUS_DEFAULT => "",
+    :critical => "Polaris-ExceptionList--statusCritical",
+    :warning => "Polaris-ExceptionList--statusWarning",
+  }
+  STATUS_OPTIONS = STATUS_MAPPINGS.keys
+
+  def initialize(
+    icon: nil,
+    title: nil,
+    status: STATUS_DEFAULT,
+    **system_arguments
+  )
+    @icon = icon
+    @title = title
+
+    @system_arguments = system_arguments
+    @system_arguments[:tag] = "li"
+    @system_arguments[:classes] = class_names(
+      @system_arguments[:classes],
+      "Polaris-ExceptionList__Item",
+      STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
+    )
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/polaris/exception_list_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ExceptionListComponent < Polaris::NewComponent
+    renders_many :items, Polaris::ExceptionList::ItemComponent
+
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "ul"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ExceptionList",
+      )
+    end
+
+    def renders?
+      items.any?
+    end
+  end
+end