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

polaris_view_components 0.6.0 → 0.7.0

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