polaris_view_components 0.3.2 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf2cc17a4b9d919cd1855c419b2543cdd2ce8461deccf6077dfa42e1319cb775
-  data.tar.gz: d0e85ab7f44695d32ceff2bf8b73843dbf887844ce4b0e2370151f79622c919f
+  metadata.gz: 3ba771806fadd6b419c7ab4ca160d21199a4634e34c1c6382aeeac8d1908d728
+  data.tar.gz: 65a6782283ea638ed596e0f75e6125feb2efff9dbdd0169428bbcdb522797ebf
 SHA512:
-  metadata.gz: d20d75ce88498c2c49bf978768aa8dd17c761924d59f5e68d6a80257b2de1e0675b03c443e11d48f37fada7999ec8d6129395d33cf29620ef9cac741b99ce200
-  data.tar.gz: e5d313afc34de67c9d61b207a45c6138925ca5f33303d750b021fc880c7de4c9b2d418d606a4f105d05848ff72490076de8cc5affd28476dbec61c3c1f119d72
+  metadata.gz: d77337905ac8bfc591a5957546de20b5ff89478d2dca37be41eeddfc1e8053e9623ba452d96c6b8198e0ab185d58b416553319db14d44ad74f30532664c5c4d2
+  data.tar.gz: 7c69e38fc42ebf27c6f121c9a741b21414c026210e27187aa55cfecc11a7f9cdd60ce511a954e4e2fd94a34b71519104de80c217cff952fe0ce5f802bbf1dfc0

data/README.md

@@ -85,7 +85,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/button_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  disable(event) {
+    if (this.button.dataset.disabled) {
+      event.preventDefault()
+    } else {
+      this.button.dataset.disabled = true
+      this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading")
+      this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML)
+    }
+  }
+
+  enable() {
+    if (this.button.dataset.disabled) {
+      this.button.disabled = false
+      delete this.button.dataset.disabled
+      this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading")
+      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/index.js

@@ -1,11 +1,21 @@
+import Button from './button_controller'
+import Modal from './modal_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'
 
-export { ResourceItem, Select, TextField }
+export { Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField }
 
 export function registerPolarisControllers(application) {
+  application.register('polaris-button', Button)
+  application.register('polaris-modal', Modal)
+  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)
 }

data/app/assets/javascripts/polaris_view_components/modal_controller.js

@@ -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/polaris_controller.js

@@ -0,0 +1,24 @@
+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()
+  }
+
+  // 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

@@ -0,0 +1,45 @@
+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.popoverTarget.classList.remove(this.openClass)
+      this.popoverTarget.classList.add(this.closedClass)
+    }
+  }
+}

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

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

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