RubyGems - polaris_view_components - Versions diffs - 0.6.0 → 0.7.0 - Mend

polaris_view_components 0.6.0 → 0.7.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 (62) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ba771806fadd6b419c7ab4ca160d21199a4634e34c1c6382aeeac8d1908d728
-  data.tar.gz: 65a6782283ea638ed596e0f75e6125feb2efff9dbdd0169428bbcdb522797ebf
+  metadata.gz: b9e5671bf20a8c0aec20920be9fcea01ba39b902057eec479f30b9d621bdbf50
+  data.tar.gz: 21bb979fd293cd8379e0e012e9ef2ee9ae06cf62bfdd226fc1ae90ff3b65e9c3
 SHA512:
-  metadata.gz: d77337905ac8bfc591a5957546de20b5ff89478d2dca37be41eeddfc1e8053e9623ba452d96c6b8198e0ab185d58b416553319db14d44ad74f30532664c5c4d2
-  data.tar.gz: 7c69e38fc42ebf27c6f121c9a741b21414c026210e27187aa55cfecc11a7f9cdd60ce511a954e4e2fd94a34b71519104de80c217cff952fe0ce5f802bbf1dfc0
+  metadata.gz: 638f5ef1f9c7be3d41b1f1b9016f3a8f14f13c3fbc65c5df6ab8f02b7e903f7456a01514f1d5297c3ecbc022bf66d4283a014a602a9a49662b9d99a368d1a88a
+  data.tar.gz: f482994119dd2a2334bf633eae54cb8998d39d38821efc9d16bd88af92869f7f9e18f418cc1f71e2fdf7bbb0d6558cd449c24ae61f93dd660950104b192f4427

data/README.md CHANGED Viewed

@@ -8,7 +8,7 @@ Polaris ViewComponents is an implementation of the Polaris Design System using [
 ## Preview
-https://polaris-view-components.herokuapp.com/lookbook
+https://polarisviewcomponents.org
 ## Usage
@@ -47,6 +47,16 @@ Define Polaris style on your `<body>` tag:
 ### Importmaps
+Install dependencies:
+```
+bin/importmap pin @rails/request.js --download
+```
+If you use sprockets make sure the vendor folder is loaded in `app/assets/config/manifest.js`:
+```js
+//= link_tree ../../../vendor/assets/javascripts .js
+```
 Add to `config/importmap.rb`:
 ```rb
@@ -65,7 +75,7 @@ registerPolarisControllers(Stimulus)
 Install NPM package:
 ```bash
-yarn add polaris-view-components
+yarn add polaris-view-components @rails/request.js
 ```
 Add to `app/javascript/controllers/index.js`:

data/app/assets/javascripts/polaris_view_components/autocomplete_controller.js ADDED Viewed

@@ -0,0 +1,119 @@
+import { Controller } from '@hotwired/stimulus'
+import { get } from '@rails/request.js'
+export default class extends Controller {
+  static targets = ['popover', 'input', 'results', 'option', 'emptyState']
+  static values = { url: String }
+  connect() {
+    this.inputTarget.addEventListener("input", this.onInputChange)
+  }
+  disconnect() {
+    this.inputTarget.removeEventListener("input", this.onInputChange)
+  }
+  // Actions
+  toggle() {
+    if (this.visibleOptions.length > 0) {
+      this.hideEmptyState()
+      this.popoverController.show()
+    } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
+      this.showEmptyState()
+    } else {
+      this.popoverController.forceHide()
+    }
+  }
+  select(event) {
+    const input = event.currentTarget
+    const label = input.closest('li').dataset.label
+    const changeEvent = new CustomEvent('polaris-autocomplete:change', {
+      detail: { value: input.value, label, selected: input.checked }
+    })
+    this.element.dispatchEvent(changeEvent)
+  }
+  onInputChange = debounce(() => {
+    if (this.isRemote) {
+      this.fetchResults()
+    } else {
+      this.filterOptions()
+    }
+  }, 200)
+  // Private
+  get isRemote() {
+    return this.urlValue.length > 0
+  }
+  get popoverController() {
+    return this.application.getControllerForElementAndIdentifier(this.popoverTarget, 'polaris-popover')
+  }
+  get value() {
+    return this.inputTarget.value
+  }
+  get visibleOptions() {
+    return this.optionTargets.filter(option => {
+      return !option.classList.contains('Polaris--hidden')
+    })
+  }
+  filterOptions() {
+    if (this.value === '') {
+      this.optionTargets.forEach(option => {
+        option.classList.remove('Polaris--hidden')
+      })
+    } else {
+      const filterRegex = new RegExp(this.value, 'i')
+      this.optionTargets.forEach(option => {
+        if (option.dataset.label.match(filterRegex)) {
+          option.classList.remove('Polaris--hidden')
+        } else {
+          option.classList.add('Polaris--hidden')
+        }
+      })
+    }
+    this.toggle()
+  }
+  async fetchResults() {
+    const response = await get(this.urlValue, {
+      query: { q: this.value }
+    })
+    if (response.ok) {
+      const results = await response.html
+      this.resultsTarget.innerHTML = results
+      this.toggle()
+    }
+  }
+  showEmptyState() {
+    if (this.hasEmptyStateTarget) {
+      this.resultsTarget.classList.add('Polaris--hidden')
+      this.emptyStateTarget.classList.remove('Polaris--hidden')
+    }
+  }
+  hideEmptyState() {
+    if (this.hasEmptyStateTarget) {
+      this.emptyStateTarget.classList.add('Polaris--hidden')
+      this.resultsTarget.classList.remove('Polaris--hidden')
+    }
+  }
+}
+const debounce = (fn, delay = 10) => {
+  let timeoutId = null
+  return (...args) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(fn, delay)
+  }
+}

data/app/assets/javascripts/polaris_view_components/button_controller.js CHANGED Viewed

@@ -2,21 +2,20 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   disable(event) {
-    if (this.button.dataset.disabled) {
+    if (this.button.disabled) {
       event.preventDefault()
     } else {
-      this.button.dataset.disabled = true
+      this.button.disabled = true
       this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading")
       this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML)
     }
   }
   enable() {
-    if (this.button.dataset.disabled) {
+    if (this.button.disabled) {
       this.button.disabled = false
-      delete this.button.dataset.disabled
       this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading")
-      this.spinner.remove()
+      if (this.spinner) this.spinner.remove()
     }
   }

data/app/assets/javascripts/polaris_view_components/frame_controller.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+import { useTransition } from "stimulus-use"
+export default class extends Controller {
+  static targets = ["navigationOverlay", "navigation", "saveBar"]
+  connect() {
+    if (!this.hasNavigationTarget) { return }
+    useTransition(this, {
+      element: this.navigationTarget,
+      enterFrom: "Polaris-Frame__Navigation--enter",
+      enterTo: "Polaris-Frame__Navigation--visible Polaris-Frame__Navigation--enterActive",
+      leaveActive: "Polaris-Frame__Navigation--exitActive",
+      leaveFrom: "Polaris-Frame__Navigation--exit",
+      leaveTo: "",
+      removeToClasses: false,
+      hiddenClass: false,
+    })
+  }
+  // Actions
+  openMenu() {
+    this.enter()
+    this.navigationOverlayTarget.classList.add("Polaris-Backdrop", "Polaris-Backdrop--belowNavigation")
+  }
+  closeMenu() {
+    this.leave()
+    this.navigationOverlayTarget.classList.remove("Polaris-Backdrop", "Polaris-Backdrop--belowNavigation")
+  }
+  showSaveBar() {
+    this.saveBarTarget.classList.add("Polaris-Frame-CSSAnimation--endFade")
+  }
+  hideSaveBar() {
+    this.saveBarTarget.classList.remove("Polaris-Frame-CSSAnimation--endFade")
+  }
+}

data/app/assets/javascripts/polaris_view_components/index.js CHANGED Viewed

@@ -1,21 +1,29 @@
+import Autocomplete from './autocomplete_controller'
 import Button from './button_controller'
+import Frame from './frame_controller'
 import Modal from './modal_controller'
+import OptionList from './option_list_controller'
 import Polaris from './polaris_controller'
 import Popover from './popover_controller'
 import ResourceItem from './resource_item_controller'
 import Scrollable from './scrollable_controller'
 import Select from './select_controller'
 import TextField from './text_field_controller'
+import Toast from './toast_controller'
-export { Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField }
+export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField }
 export function registerPolarisControllers(application) {
+  application.register('polaris-autocomplete', Autocomplete)
   application.register('polaris-button', Button)
+  application.register('polaris-frame', Frame)
   application.register('polaris-modal', Modal)
+  application.register('polaris-option-list', OptionList)
   application.register('polaris', Polaris)
   application.register('polaris-popover', Popover)
   application.register('polaris-resource-item', ResourceItem)
   application.register('polaris-scrollable', Scrollable)
   application.register('polaris-select', Select)
   application.register('polaris-text-field', TextField)
+  application.register('polaris-toast', Toast)
 }

data/app/assets/javascripts/polaris_view_components/option_list_controller.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  static targets = ["radioButton"]
+  static classes = ["selected"]
+  connect() {
+    this.updateSelected()
+  }
+  // Actions
+  update(event) {
+    const target = event.currentTarget
+    target.classList.add(this.selectedClass)
+    this.deselectAll(target)
+  }
+  // Private
+  updateSelected() {
+    this.radioButtonTargets.forEach(element => {
+      const input = element.querySelector('input[type=radio]')
+      if (input.checked) {
+        element.classList.add(this.selectedClass)
+      } else {
+        element.classList.remove(this.selectedClass)
+      }
+    })
+  }
+  deselectAll(target) {
+    this.radioButtonTargets.forEach(element => {
+      if (!element.isEqualNode(target)) {
+        const input = element.querySelector('input[type=radio]')
+        input.checked = false
+        element.classList.remove(this.selectedClass)
+      }
+    })
+  }
+}

data/app/assets/javascripts/polaris_view_components/polaris_controller.js CHANGED Viewed

@@ -13,6 +13,10 @@ export default class extends Controller {
     this.findElement("button").enable()
   }
+  showToast() {
+    this.findElement("toast").show()
+  }
   // Private
   findElement(type) {

data/app/assets/javascripts/polaris_view_components/popover_controller.js CHANGED Viewed

@@ -38,8 +38,12 @@ export default class extends Controller {
   hide(event) {
     if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
-      this.popoverTarget.classList.remove(this.openClass)
-      this.popoverTarget.classList.add(this.closedClass)
+      this.forceHide()
     }
   }
+  forceHide() {
+    this.popoverTarget.classList.remove(this.openClass)
+    this.popoverTarget.classList.add(this.closedClass)
+  }
 }

data/app/assets/javascripts/polaris_view_components/text_field_controller.js CHANGED Viewed

@@ -101,11 +101,15 @@ export default class extends Controller {
     // step / value has.
     const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue))
+    const oldValue = this.value
     const newValue = Math.min(
       Number(this.maxValue),
       Math.max(numericValue + steps * this.stepValue, Number(this.minValue)),
     )
     this.value = String(newValue.toFixed(decimalPlaces))
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event('change'))
+    }
   }
 }

data/app/assets/javascripts/polaris_view_components/toast_controller.js ADDED Viewed

@@ -0,0 +1,68 @@
+import { Controller } from '@hotwired/stimulus'
+export default class extends Controller {
+  static activeClass = 'Polaris-Frame-ToastManager--toastWrapperEnterDone'
+  static defaultDuration = 5000
+  static defaultDurationWithAction = 10000
+  static values = { hidden: Boolean,  duration: Number, hasAction: Boolean }
+  connect() {
+    if (!this.hiddenValue) {
+      this.show()
+    }
+  }
+  show = () => {
+    this.element.dataset.position = this.position
+    this.element.style.cssText = this.getStyle(this.position)
+    this.element.classList.add(this.constructor.activeClass)
+    setTimeout(this.close, this.timeoutDuration)
+  }
+  close = () => {
+    this.element.classList.remove(this.constructor.activeClass)
+    this.element.addEventListener('transitionend', this.updatePositions, false)
+  }
+  updatePositions = () => {
+    this.visibleToasts
+      .sort((a, b) => parseInt(a.dataset.position) - parseInt(b.dataset.position))
+      .forEach((toast, index) => {
+        const position = index + 1
+        toast.dataset.position = position
+        toast.style.cssText = this.getStyle(position)
+      })
+    this.element.removeEventListener('transitionend', this.updatePositions, false)
+  }
+  getStyle(position) {
+    const translateIn = -80 * position
+    const translateOut = 150 - (80 * position)
+    return `--toast-translate-y-in: ${translateIn}px; --toast-translate-y-out: ${translateOut}px;`
+  }
+  get timeoutDuration() {
+    if (this.durationValue > 0) {
+      return this.durationValue
+    } else if (this.hasActionValue) {
+      return this.constructor.defaultDurationWithAction
+    } else {
+      return this.constructor.defaultDuration
+    }
+  }
+  get toastManager() {
+    return this.element.closest('.Polaris-Frame-ToastManager')
+  }
+  get visibleToasts() {
+    return [
+      ...this.toastManager.querySelectorAll(`.${this.constructor.activeClass}`)
+    ]
+  }
+  get position() {
+    return this.visibleToasts.filter(el => !this.element.isEqualNode(el)).length + 1
+  }
+}