hotwirebits 0.1.0

data/app/javascript/controllers/hotwirebits/rb_nav_menu_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_newsletter_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_notification_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_otp_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input"]
+
+  connect() {
+    if (this.inputTargets.length) this.inputTargets[0].focus()
+  }
+
+  onInput(event) {
+    const input = event.target
+    const index = this.inputTargets.indexOf(input)
+    if (input.value.length === 1 && index < this.inputTargets.length - 1) {
+      this.inputTargets[index + 1].focus()
+    }
+    this.dispatch("input", { detail: { value: this.value } })
+  }
+
+  onKeydown(event) {
+    const input = event.target
+    const index = this.inputTargets.indexOf(input)
+    if (event.key === "Backspace" && !input.value && index > 0) {
+      event.preventDefault()
+      this.inputTargets[index - 1].focus()
+      this.inputTargets[index - 1].value = ""
+    }
+    if (event.key === "ArrowLeft" && index > 0) {
+      event.preventDefault()
+      this.inputTargets[index - 1].focus()
+    }
+    if (event.key === "ArrowRight" && index < this.inputTargets.length - 1) {
+      event.preventDefault()
+      this.inputTargets[index + 1].focus()
+    }
+  }
+
+  onPaste(event) {
+    event.preventDefault()
+    const text = (event.clipboardData || window.clipboardData).getData("text")
+    const chars = text.replace(/\D/g, "").slice(0, this.inputTargets.length).split("")
+    chars.forEach((char, i) => {
+      this.inputTargets[i].value = char
+    })
+    const lastIndex = Math.min(chars.length - 1, this.inputTargets.length - 1)
+    this.inputTargets[lastIndex].focus()
+    if (chars.length === this.inputTargets.length) {
+      this.dispatch("complete", { detail: { value: this.value } })
+    }
+  }
+
+  get value() {
+    return this.inputTargets.map((i) => i.value).join("")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_paginator_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  changePerPage(event) {
+    this.dispatch("change", { detail: { perPage: event.target.value } })
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_panel_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content", "chevron"]
+  static values = { collapsed: { type: Boolean, default: false } }
+
+  toggle() {
+    this.collapsedValue = !this.collapsedValue
+    if (this.hasContentTarget) this.contentTarget.classList.toggle("hidden", this.collapsedValue)
+    if (this.hasChevronTarget) this.chevronTarget.classList.toggle("rotate-90", !this.collapsedValue)
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_password_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "toggle", "meter", "label"]
+  static values = { visible: { type: Boolean, default: false } }
+
+  toggle() {
+    this.visibleValue = !this.visibleValue
+    this.inputTarget.type = this.visibleValue ? "text" : "password"
+    if (this.hasToggleTarget) {
+      this.toggleTarget.setAttribute("aria-pressed", this.visibleValue.toString())
+    }
+  }
+
+  checkStrength() {
+    const value = this.inputTarget.value
+    let score = 0
+    if (value.length >= 8) score++
+    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score++
+    if (/\d/.test(value)) score++
+    if (/[^a-zA-Z0-9]/.test(value)) score++
+
+    const levels = ["weak", "fair", "good", "strong"]
+    const level = levels[Math.min(score, levels.length) - 1] || "none"
+
+    if (this.hasMeterTarget) {
+      this.meterTarget.className = `strength-meter strength-${level}`
+      this.meterTarget.setAttribute("aria-valuenow", score.toString())
+    }
+    if (this.hasLabelTarget) {
+      this.labelTarget.textContent = level
+    }
+
+    this.dispatch("strength", { detail: { level, score } })
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_password_strength_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_password_toggle_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_popover_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content", "trigger"]
+  static values = { placement: { type: String, default: "bottom" }, open: { type: Boolean, default: false } }
+
+  connect() {
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleOutsideClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  toggle() {
+    this.openValue ? this.close() : this.open()
+  }
+
+  open() {
+    this.openValue = true
+    this.contentTarget.classList.remove("hidden")
+    this.positionContent()
+    this.triggerTarget.setAttribute("aria-expanded", "true")
+  }
+
+  close() {
+    this.openValue = false
+    this.contentTarget.classList.add("hidden")
+    this.triggerTarget.setAttribute("aria-expanded", "false")
+  }
+
+  positionContent() {
+    const triggerRect = this.triggerTarget.getBoundingClientRect()
+    const content = this.contentTarget
+    const placements = {
+      top: { top: triggerRect.top - content.offsetHeight - 8, left: triggerRect.left },
+      bottom: { top: triggerRect.bottom + 8, left: triggerRect.left },
+      left: { top: triggerRect.top, left: triggerRect.left - content.offsetWidth - 8 },
+      right: { top: triggerRect.top, left: triggerRect.right + 8 }
+    }
+    const pos = placements[this.placementValue] || placements.bottom
+    Object.assign(content.style, {
+      position: "fixed",
+      top: `${Math.max(0, pos.top)}px`,
+      left: `${Math.max(0, pos.left)}px`
+    })
+  }
+
+  handleOutsideClick(event) {
+    if (!this.openValue) return
+    if (!this.element.contains(event.target)) this.close()
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape" && this.openValue) this.close()
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_portal_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_quickview_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_range_slider_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_rating_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["star"]
+  static values = { rating: { type: Number, default: 0 }, readonly: { type: Boolean, default: false } }
+
+  connect() {
+    this.render()
+  }
+
+  select(event) {
+    if (this.readonlyValue) return
+    const value = parseInt(event.currentTarget.dataset.value, 10)
+    this.ratingValue = value
+    this.render()
+    this.dispatch("change", { detail: { rating: value } })
+  }
+
+  hover(event) {
+    if (this.readonlyValue) return
+    const value = parseInt(event.currentTarget.dataset.value, 10)
+    this.starTargets.forEach((star, i) => {
+      star.classList.toggle("star-filled", i < value)
+      star.classList.toggle("star-empty", i >= value)
+    })
+  }
+
+  unhover() {
+    if (this.readonlyValue) return
+    this.render()
+  }
+
+  render() {
+    this.starTargets.forEach((star, i) => {
+      star.classList.toggle("star-filled", i < this.ratingValue)
+      star.classList.toggle("star-empty", i >= this.ratingValue)
+      star.setAttribute("aria-checked", (i === this.ratingValue - 1).toString())
+    })
+    this.element.setAttribute("aria-valuenow", this.ratingValue.toString())
+  }
+
+  handleKeydown(event) {
+    if (this.readonlyValue) return
+    if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+      event.preventDefault()
+      this.ratingValue = Math.min(this.ratingValue + 1, this.starTargets.length)
+      this.render()
+    }
+    if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+      event.preventDefault()
+      this.ratingValue = Math.max(this.ratingValue - 1, 0)
+      this.render()
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_resizable_controller.js

@@ -0,0 +1,82 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["handle", "panel"]
+  static values = {
+    minSize: { type: Number, default: 100 },
+    maxSize: { type: Number, default: 800 },
+    direction: { type: String, default: "horizontal" }
+  }
+
+  connect() {
+    this.isResizing = false
+    this.startPos = 0
+    this.startSize = 0
+    this._onMove = this.onMove.bind(this)
+    this._onEnd = this.onEnd.bind(this)
+
+    this.handleTarget.addEventListener("mousedown", this.onStart.bind(this))
+    this.handleTarget.addEventListener("touchstart", this.onStart.bind(this), { passive: false })
+  }
+
+  disconnect() {
+    this.cleanupListeners()
+  }
+
+  onStart(event) {
+    event.preventDefault()
+    this.isResizing = true
+    this.startPos = this.directionValue === "horizontal"
+      ? (event.touches ? event.touches[0].clientX : event.clientX)
+      : (event.touches ? event.touches[0].clientY : event.clientY)
+    this.startSize = this.directionValue === "horizontal"
+      ? this.panelTarget.offsetWidth
+      : this.panelTarget.offsetHeight
+
+    document.addEventListener("mousemove", this._onMove)
+    document.addEventListener("mouseup", this._onEnd)
+    document.addEventListener("touchmove", this._onMove, { passive: false })
+    document.addEventListener("touchend", this._onEnd)
+    document.body.style.cursor = this.directionValue === "horizontal" ? "col-resize" : "row-resize"
+    document.body.style.userSelect = "none"
+  }
+
+  onMove(event) {
+    if (!this.isResizing) return
+    event.preventDefault()
+    const pos = this.directionValue === "horizontal"
+      ? (event.touches ? event.touches[0].clientX : event.clientX)
+      : (event.touches ? event.touches[0].clientY : event.clientY)
+    const delta = pos - this.startPos
+    const newSize = Math.max(this.minSizeValue, Math.min(this.maxSizeValue, this.startSize + delta))
+
+    if (this.directionValue === "horizontal") {
+      this.panelTarget.style.width = `${newSize}px`
+    } else {
+      this.panelTarget.style.height = `${newSize}px`
+    }
+
+    this.dispatch("resize", { detail: { size: newSize } })
+  }
+
+  onEnd() {
+    this.isResizing = false
+    this.cleanupListeners()
+    this.dispatch("resize-end", {
+      detail: {
+        size: this.directionValue === "horizontal"
+          ? this.panelTarget.offsetWidth
+          : this.panelTarget.offsetHeight
+      }
+    })
+  }
+
+  cleanupListeners() {
+    document.removeEventListener("mousemove", this._onMove)
+    document.removeEventListener("mouseup", this._onEnd)
+    document.removeEventListener("touchmove", this._onMove)
+    document.removeEventListener("touchend", this._onEnd)
+    document.body.style.cursor = ""
+    document.body.style.userSelect = ""
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_rich_text_editor_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_search_controller.js

@@ -0,0 +1,70 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "results", "suggestion"]
+  static values = { url: { type: String, default: "" }, delay: { type: Number, default: 300 } }
+
+  connect() {
+    this.timeout = null
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+  }
+
+  disconnect() {
+    clearTimeout(this.timeout)
+    document.removeEventListener("click", this.handleOutsideClick)
+  }
+
+  search() {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => this.performSearch(), this.delayValue)
+  }
+
+  async performSearch() {
+    const query = this.inputTarget.value.trim()
+    if (!query) {
+      this.hideResults()
+      return
+    }
+
+    if (this.urlValue) {
+      try {
+        const params = new URLSearchParams({ q: query })
+        const response = await fetch(`${this.urlValue}?${params}`)
+        const html = await response.text()
+        this.resultsTarget.innerHTML = html
+        this.showResults()
+      } catch (e) {
+        this.dispatch("error", { detail: { error: e } })
+      }
+    } else {
+      this.dispatch("search", { detail: { query } })
+    }
+  }
+
+  selectSuggestion(event) {
+    const value = event.currentTarget.dataset.value || event.currentTarget.textContent.trim()
+    this.inputTarget.value = value
+    this.hideResults()
+    this.dispatch("select", { detail: { value } })
+  }
+
+  showResults() {
+    this.resultsTarget.classList.remove("hidden")
+  }
+
+  hideResults() {
+    this.resultsTarget.classList.add("hidden")
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.hideResults()
+      this.inputTarget.focus()
+    }
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) this.hideResults()
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_sheet_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["sheet"]
+  static values = { side: { type: String, default: "right" }, open: { type: Boolean, default: false } }
+
+  connect() {
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  open() {
+    this.openValue = true
+    this.sheetTarget.classList.remove("translate-x-full", "-translate-x-full")
+    this.sheetTarget.classList.add("translate-x-0")
+  }
+
+  close() {
+    this.openValue = false
+    this.sheetTarget.classList.remove("translate-x-0")
+    if (this.sideValue === "right") {
+      this.sheetTarget.classList.add("translate-x-full")
+    } else {
+      this.sheetTarget.classList.add("-translate-x-full")
+    }
+  }
+
+  toggle() {
+    this.openValue ? this.close() : this.open()
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape" && this.openValue) this.close()
+  }
+
+  closeOnOverlay(event) {
+    if (event.target === this.element) this.close()
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_sidebar_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["sidebar", "overlay", "main"]
+  static values = { open: { type: Boolean, default: false }, breakpoint: { type: Number, default: 768 } }
+
+  connect() {
+    this._beforeCache = () => { if (this.hasOverlayTarget) this.overlayTarget.classList.add("hidden") }
+    document.addEventListener("turbo:before-cache", this._beforeCache)
+    this.handleResize = this.handleResize.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+    window.addEventListener("resize", this.handleResize)
+    document.addEventListener("keydown", this.handleKeydown)
+    this.handleResize()
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-cache", this._beforeCache)
+    window.removeEventListener("resize", this.handleResize)
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  toggle() {
+    this.openValue = !this.openValue
+    this.update()
+  }
+
+  open() {
+    this.openValue = true
+    this.update()
+  }
+
+  close() {
+    this.openValue = false
+    this.update()
+  }
+
+  update() {
+    this.sidebarTarget.classList.toggle("sidebar-open", this.openValue)
+    this.sidebarTarget.classList.toggle("sidebar-closed", !this.openValue)
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.toggle("hidden", !this.openValue || this.isDesktop)
+    }
+    if (this.hasMainTarget) {
+      this.mainTarget.classList.toggle("sidebar-expanded", this.openValue && this.isDesktop)
+    }
+  }
+
+  handleResize() {
+    this.update()
+  }
+
+  get isDesktop() {
+    return window.innerWidth >= this.breakpointValue
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape" && this.openValue && !this.isDesktop) {
+      this.close()
+    }
+  }
+
+  closeOnOverlay(event) {
+    if (!this.isDesktop) this.close()
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_signature_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_speed_dial_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["actions", "action", "trigger"]
+  static values = { open: { type: Boolean, default: false } }
+
+  connect() {
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleOutsideClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  toggle() {
+    this.openValue = !this.openValue
+    this.render()
+  }
+
+  open() {
+    this.openValue = true
+    this.render()
+  }
+
+  close() {
+    this.openValue = false
+    this.render()
+  }
+
+  render() {
+    this.actionsTarget.classList.toggle("hidden", !this.openValue)
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", this.openValue.toString())
+    }
+    if (this.openValue && this.actionTargets.length) {
+      this.actionTargets[0].focus()
+    }
+  }
+
+  handleOutsideClick(event) {
+    if (!this.openValue) return
+    if (!this.element.contains(event.target)) this.close()
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape" && this.openValue) this.close()
+    if (event.key === "ArrowDown" && this.openValue) {
+      event.preventDefault()
+      const items = this.actionTargets
+      const index = items.indexOf(document.activeElement)
+      if (index < items.length - 1) items[index + 1].focus()
+    }
+    if (event.key === "ArrowUp" && this.openValue) {
+      event.preventDefault()
+      const items = this.actionTargets
+      const index = items.indexOf(document.activeElement)
+      if (index > 0) items[index - 1].focus()
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_splitter_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["handle", "panel"]
+  static values = { minSize: { type: Number, default: 100 }, maxSize: { type: Number, default: 800 } }
+
+  startResize(event) {
+    event.preventDefault()
+    if (!this.hasPanelTarget) return
+    this._startPos = event.clientX
+    this._startSize = this.panelTarget.offsetWidth
+    this._onMove = (e) => {
+      const size = Math.max(this.minSizeValue, Math.min(this.maxSizeValue, this._startSize + (e.clientX - this._startPos)))
+      this.panelTarget.style.width = `${size}px`
+    }
+    this._onEnd = () => {
+      document.removeEventListener("pointermove", this._onMove)
+      document.removeEventListener("pointerup", this._onEnd)
+      document.body.style.cursor = ""
+      document.body.style.userSelect = ""
+    }
+    document.addEventListener("pointermove", this._onMove)
+    document.addEventListener("pointerup", this._onEnd)
+    document.body.style.cursor = "col-resize"
+    document.body.style.userSelect = "none"
+  }
+}