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

polaris_view_components 0.3.3 → 0.7.0

Files changed (163) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '03953b29a4439bfe7f6a8421b5db5a6627b50eea36bc62a4e07bf5aba1495811'
-  data.tar.gz: 11e7d05ca4462d30c986e5f9e5134c82a6d7ca99ab9a1dba8626507b1a62173e
+  metadata.gz: b9e5671bf20a8c0aec20920be9fcea01ba39b902057eec479f30b9d621bdbf50
+  data.tar.gz: 21bb979fd293cd8379e0e012e9ef2ee9ae06cf62bfdd226fc1ae90ff3b65e9c3
 SHA512:
-  metadata.gz: 61da6868d6d615a55c6edb7e8d3d55da80292bb9f91efb8a8dfb73287b6d1f6e67be05df1e0a06a3ea7656bf7120b1acca56a42ef22696f84ac463f721a90528
-  data.tar.gz: ec345be1a960e3b9cbab5172dbcf9af8bb4baf533574833ff186fbb4a060e89ebe5e652081db51f568b67ebf8fed219c72d99c7984a45a201f6231604f6a8456
+  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`:
@@ -85,7 +95,7 @@ In addition to the dependencies declared in the `gemspec`, Polaris ViewComponent
 To get started:
 1. Run: `bundle install`
-2. Run: `foreman start`
+2. Run: `bin/dev`
 It will open demo app with component previews on `localhost:4000`. You can change components and they will be updated on page reload. Component previews located in `demo/test/components/previews`.

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 ADDED Viewed

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  disable(event) {
+    if (this.button.disabled) {
+      event.preventDefault()
+    } else {
+      this.button.disabled = true
+      this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading")
+      this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML)
+    }
+  }
+  enable() {
+    if (this.button.disabled) {
+      this.button.disabled = false
+      this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading")
+      if (this.spinner) this.spinner.remove()
+    }
+  }
+  // Private
+  get button() {
+    return this.element
+  }
+  get buttonContent() {
+    return this.button.querySelector(".Polaris-Button__Content")
+  }
+  get spinner() {
+    return this.button.querySelector(".Polaris-Button__Spinner")
+  }
+  get spinnerHTML() {
+    return `
+      <span class="Polaris-Button__Spinner">
+        <span class="Polaris-Spinner Polaris-Spinner--sizeSmall">
+          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"></path>
+          </svg>
+        </span>
+      </span>
+    `
+  }
+}

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,11 +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 { ResourceItem, 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/modal_controller.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  static classes = ["hidden", "backdrop"]
+  static values = {
+    open: Boolean
+  }
+  connect() {
+    if (this.openValue) {
+      this.open()
+    }
+  }
+  open() {
+    this.element.classList.remove(this.hiddenClass)
+    this.element.insertAdjacentHTML('afterend', `<div class="${this.backdropClass}"></div>`)
+    this.backdrop = this.element.nextElementSibling
+  }
+  close() {
+    this.element.classList.add(this.hiddenClass)
+    this.backdrop.remove()
+  }
+}

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 ADDED Viewed

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  openModal() {
+    this.findElement("modal").open()
+  }
+  disableButton() {
+    this.findElement("button").disable()
+  }
+  enableButton() {
+    this.findElement("button").enable()
+  }
+  showToast() {
+    this.findElement("toast").show()
+  }
+  // Private
+  findElement(type) {
+    const targetId = this.element.dataset.target.replace("#", "")
+    const target = document.getElementById(targetId)
+    const controllerName = `polaris-${type}`
+    return this.application.getControllerForElementAndIdentifier(target, controllerName)
+  }
+}

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

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+import { createPopper } from "@popperjs/core/dist/esm"
+export default class extends Controller {
+  static targets = ["activator", "popover"]
+  static classes = ["open", "closed"]
+  static values = {
+    placement: String,
+    active: Boolean
+  }
+  connect() {
+    createPopper(this.activatorTarget, this.popoverTarget, {
+      placement: this.placementValue,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 5],
+          },
+        },
+      ]
+    })
+    if (this.activeValue) {
+      this.show()
+    }
+  }
+  toggle() {
+    this.popoverTarget.classList.toggle(this.closedClass)
+    this.popoverTarget.classList.toggle(this.openClass)
+  }
+  show() {
+    this.popoverTarget.classList.remove(this.closedClass)
+    this.popoverTarget.classList.add(this.openClass)
+  }
+  hide(event) {
+    if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
+      this.forceHide()
+    }
+  }
+  forceHide() {
+    this.popoverTarget.classList.remove(this.openClass)
+    this.popoverTarget.classList.add(this.closedClass)
+  }
+}

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

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  static targets = ["topEdge", "bottomEdge"]
+  static classes = ["topShadow", "bottomShadow"]
+  static values = {
+    shadow: Boolean,
+  }
+  initialize() {
+    this.topEdgeReached = false
+    this.bottomEdgeReached = true
+  }
+  connect() {
+    if (this.shadowValue) {
+      this.observer = new IntersectionObserver(this.handleIntersection)
+      this.observer.observe(this.topEdgeTarget)
+      this.observer.observe(this.bottomEdgeTarget)
+    }
+  }
+  disconnect() {
+    if (this.shadowValue) {
+      this.observer.disconnect()
+    }
+  }
+  // Private
+  handleIntersection = (entries) => {
+    entries.forEach(entry => {
+      const target = entry.target.dataset.polarisScrollableTarget
+      switch (target) {
+        case "topEdge":
+          this.topEdgeReached = entry.isIntersecting
+          break
+        case "bottomEdge":
+          this.bottomEdgeReached = entry.isIntersecting
+          break
+      }
+    })
+    this.updateShadows()
+  }
+  updateShadows() {
+    if (!this.topEdgeReached && !this.bottomEdgeReached) {
+      this.element.classList.add(this.topShadowClass, this.bottomShadowClass)
+    } else if (this.topEdgeReached && this.bottomEdgeReached) {
+      this.element.classList.remove(this.topShadowClass, this.bottomShadowClass)
+    } else if (this.topEdgeReached) {
+      this.element.classList.remove(this.topShadowClass)
+      this.element.classList.add(this.bottomShadowClass)
+    } else if (this.bottomEdgeReached) {
+      this.element.classList.add(this.topShadowClass)
+      this.element.classList.remove(this.bottomShadowClass)
+    }
+  }
+}

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

@@ -1,12 +1,14 @@
 import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
-  static targets = ['selectedOption']
+  static targets = ["select", "selectedOption"]
-  update(event) {
-    const select = event.currentTarget
-    const option = select.options[select.selectedIndex]
+  connect() {
+    this.update()
+  }
+  update() {
+    const option = this.selectTarget.options[this.selectTarget.selectedIndex]
     this.selectedOptionTarget.innerText = option.text
   }
 }

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