polaris_view_components 0.4.0 → 0.8.0

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
-  }
-}

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

@@ -1,57 +0,0 @@
-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/new_component.rb

@@ -1,10 +0,0 @@
-# frozen_string_literal: true
-
-module Polaris
-  class NewComponent < ViewComponent::Base
-    include ClassNameHelper
-    include FetchOrFallbackHelper
-    include OptionHelper
-    include ViewHelper
-  end
-end

data/app/helpers/polaris/conditional_helper.rb

@@ -1,11 +0,0 @@
-module Polaris
-  module ConditionalHelper
-    def conditional_wrapping_element(tag, options = {}, &block)
-      if options.delete(:show)
-        content_tag(tag, capture(&block), options)
-      else
-        capture(&block)
-      end
-    end
-  end
-end