hotwirebits 0.1.0

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

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content", "trigger"]
+  static values = { open: { type: Boolean, default: false }, duration: { type: Number, default: 300 } }
+
+  connect() {
+    if (!this.openValue) this.contentTarget.classList.add("hidden")
+  }
+
+  toggle() {
+    this.openValue = !this.openValue
+    if (this.openValue) {
+      this.show()
+    } else {
+      this.hide()
+    }
+  }
+
+  show() {
+    const el = this.contentTarget
+    el.classList.remove("hidden")
+    el.style.height = "0px"
+    el.style.overflow = "hidden"
+    el.style.transition = `height ${this.durationValue}ms ease`
+    requestAnimationFrame(() => {
+      el.style.height = `${el.scrollHeight}px`
+    })
+    setTimeout(() => {
+      el.style.height = ""
+      el.style.overflow = ""
+    }, this.durationValue)
+    this.triggerTarget.setAttribute("aria-expanded", "true")
+  }
+
+  hide() {
+    const el = this.contentTarget
+    el.style.height = `${el.scrollHeight}px`
+    el.style.overflow = "hidden"
+    el.style.transition = `height ${this.durationValue}ms ease`
+    requestAnimationFrame(() => {
+      el.style.height = "0px"
+    })
+    setTimeout(() => {
+      el.classList.add("hidden")
+      el.style.height = ""
+      el.style.overflow = ""
+    }, this.durationValue)
+    this.triggerTarget.setAttribute("aria-expanded", "false")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_color_input_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_color_picker_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_combobox_controller.js

@@ -0,0 +1,91 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "list", "option", "hidden"]
+  static values = { open: { type: Boolean, default: false } }
+
+  connect() {
+    this._beforeCache = () => this.close()
+    document.addEventListener("turbo:before-cache", this._beforeCache)
+    this.activeIndex = -1
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-cache", this._beforeCache)
+    document.removeEventListener("click", this.handleOutsideClick)
+  }
+
+  filter() {
+    const query = this.inputTarget.value.toLowerCase()
+    this.open()
+    this.optionTargets.forEach((opt) => {
+      const text = opt.textContent.toLowerCase()
+      opt.classList.toggle("hidden", !text.includes(query))
+    })
+    this.activeIndex = -1
+  }
+
+  open() {
+    this.openValue = true
+    this.listTarget.classList.remove("hidden")
+  }
+
+  close() {
+    this.openValue = false
+    this.listTarget.classList.add("hidden")
+    this.activeIndex = -1
+  }
+
+  select(event) {
+    const value = event.currentTarget.dataset.value
+    const label = event.currentTarget.textContent.trim()
+    this.inputTarget.value = label
+    if (this.hasHiddenTarget) this.hiddenTarget.value = value
+    this.close()
+    this.dispatch("select", { detail: { value, label } })
+  }
+
+  handleKeydown(event) {
+    const visible = this.visibleOptions
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.activeIndex = Math.min(this.activeIndex + 1, visible.length - 1)
+        this.highlightActive(visible)
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.activeIndex = Math.max(this.activeIndex - 1, 0)
+        this.highlightActive(visible)
+        break
+      case "Enter":
+        event.preventDefault()
+        if (this.activeIndex >= 0 && visible[this.activeIndex]) {
+          visible[this.activeIndex].click()
+        }
+        break
+      case "Escape":
+        this.close()
+        this.inputTarget.focus()
+        break
+    }
+  }
+
+  get visibleOptions() {
+    return this.optionTargets.filter((el) => !el.classList.contains("hidden"))
+  }
+
+  highlightActive(visible) {
+    this.optionTargets.forEach((el) => el.classList.remove("active"))
+    if (visible[this.activeIndex]) {
+      visible[this.activeIndex].classList.add("active")
+      visible[this.activeIndex].scrollIntoView({ block: "nearest" })
+    }
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) this.close()
+  }
+}

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

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "list", "overlay"]
+  static values = { open: { type: Boolean, default: false } }
+
+  connect() {
+    this._onKeydown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); this.openValue = !this.openValue }
+      if (e.key === "Escape") this.openValue = false
+    }
+    document.addEventListener("keydown", this._onKeydown)
+  }
+
+  disconnect() { document.removeEventListener("keydown", this._onKeydown) }
+
+  openValueChanged() {
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.toggle("hidden", !this.openValue)
+    }
+    this.element.classList.toggle("open", this.openValue)
+    if (this.openValue && this.hasInputTarget) {
+      this.inputTarget.focus()
+      this.inputTarget.value = ""
+    }
+    this.dispatch(this.openValue ? "open" : "close")
+  }
+
+  search() { this.dispatch("search", { detail: { query: this.inputTarget?.value || "" } }) }
+  select(event) { this.openValue = false; this.dispatch("select", { detail: event.currentTarget.dataset }) }
+  close() { this.openValue = false }
+}

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

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["before", "after", "slider"]
+  static values = { position: { type: Number, default: 50 } }
+
+  drag(event) {
+    const rect = this.element.getBoundingClientRect()
+    const x = (event.touches ? event.touches[0].clientX : event.clientX) - rect.left
+    this.positionValue = Math.max(0, Math.min(100, (x / rect.width) * 100))
+    this.render()
+  }
+
+  render() {
+    if (this.hasSliderTarget) this.sliderTarget.style.left = `${this.positionValue}%`
+    if (this.hasBeforeTarget) this.beforeTarget.style.clipPath = `inset(0 ${100 - this.positionValue}% 0 0)`
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dialog"]
+  static values = { open: { type: Boolean, default: false } }
+
+  open() { this.openValue = true; if (this.hasDialogTarget) this.dialogTarget.classList.remove("hidden") }
+  close() { this.openValue = false; if (this.hasDialogTarget) this.dialogTarget.classList.add("hidden") }
+  confirm() { this.dispatch("confirm"); this.close() }
+  cancel() { this.dispatch("cancel"); this.close() }
+}

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

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["popup"]
+  static values = { open: { type: Boolean, default: false } }
+
+  open() { this.openValue = true; if (this.hasPopupTarget) this.popupTarget.classList.remove("hidden") }
+  close() { this.openValue = false; if (this.hasPopupTarget) this.popupTarget.classList.add("hidden") }
+  confirm() { this.dispatch("confirm"); this.close() }
+}

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu"]
+
+  connect() {
+    this._onContext = (e) => {
+      e.preventDefault()
+      if (this.hasMenuTarget) {
+        this.menuTarget.classList.remove("hidden")
+        const rect = this.element.getBoundingClientRect()
+        this.menuTarget.style.left = `${e.clientX - rect.left}px`
+        this.menuTarget.style.top = `${e.clientY - rect.top}px`
+      }
+    }
+    this._onClick = () => { if (this.hasMenuTarget) this.menuTarget.classList.add("hidden") }
+    this.element.addEventListener("contextmenu", this._onContext)
+    document.addEventListener("click", this._onClick)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("contextmenu", this._onContext)
+    document.removeEventListener("click", this._onClick)
+  }
+
+  select(event) { this.dispatch("select", { detail: event.currentTarget.dataset }); if (this.hasMenuTarget) this.menuTarget.classList.add("hidden") }
+}

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

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["banner", "modal", "settings"]
+  static values = {
+    accepted: { type: Boolean, default: false },
+    key: { type: String, default: "hw-cookie-consent" },
+    categories: { type: Array, default: ["essential"] }
+  }
+
+  connect() {
+    const stored = localStorage.getItem(this.keyValue)
+    if (stored) {
+      this.acceptedValue = true
+      this.bannerTarget?.classList.add("hidden")
+    }
+  }
+
+  accept() {
+    this.savePreferences(this.categoriesValue)
+    this.bannerTarget?.classList.add("hidden")
+  }
+
+  acceptAll() {
+    this.savePreferences([...this.categoriesValue, "analytics", "marketing"])
+    this.bannerTarget?.classList.add("hidden")
+  }
+
+  reject() {
+    this.savePreferences(["essential"])
+    this.bannerTarget?.classList.add("hidden")
+  }
+
+  openSettings() {
+    this.modalTarget?.classList.remove("hidden")
+  }
+
+  closeSettings() {
+    this.modalTarget?.classList.add("hidden")
+  }
+
+  savePreferences(categories) {
+    const prefs = { categories, timestamp: Date.now() }
+    localStorage.setItem(this.keyValue, JSON.stringify(prefs))
+    this.acceptedValue = true
+    this.dispatch("accept", { detail: prefs })
+  }
+
+  get preferences() {
+    const stored = localStorage.getItem(this.keyValue)
+    return stored ? JSON.parse(stored) : null
+  }
+
+  revoke() {
+    localStorage.removeItem(this.keyValue)
+    this.acceptedValue = false
+    this.bannerTarget?.classList.remove("hidden")
+    this.dispatch("revoke")
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal"]
+
+  open() { if (this.hasModalTarget) this.modalTarget.classList.remove("hidden") }
+  close() { if (this.hasModalTarget) this.modalTarget.classList.add("hidden") }
+  save() { this.dispatch("save"); this.close() }
+}

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

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["days", "hours", "minutes", "seconds", "bar"]
+  static values = {
+    end: { type: String, required: true },
+    autoStart: { type: Boolean, default: true }
+  }
+
+  connect() {
+    this.endDate = new Date(this.endValue).getTime()
+    this.startDate = Date.now()
+    this.rafId = null
+    this.started = false
+    if (this.autoStartValue) this.start()
+  }
+
+  disconnect() {
+    this.stop()
+  }
+
+  start() {
+    if (this.started) return
+    this.started = true
+    this.tick()
+  }
+
+  stop() {
+    this.started = false
+    if (this.rafId) cancelAnimationFrame(this.rafId)
+  }
+
+  tick() {
+    if (!this.started) return
+    const now = Date.now()
+    const remaining = Math.max(0, this.endDate - now)
+    const total = this.endDate - this.startDate
+
+    const days = Math.floor(remaining / 86400000)
+    const hours = Math.floor((remaining % 86400000) / 3600000)
+    const minutes = Math.floor((remaining % 3600000) / 60000)
+    const seconds = Math.floor((remaining % 60000) / 1000)
+
+    if (this.hasDaysTarget) this.daysTarget.textContent = String(days).padStart(2, "0")
+    if (this.hasHoursTarget) this.hoursTarget.textContent = String(hours).padStart(2, "0")
+    if (this.hasMinutesTarget) this.minutesTarget.textContent = String(minutes).padStart(2, "0")
+    if (this.hasSecondsTarget) this.secondsTarget.textContent = String(seconds).padStart(2, "0")
+    if (this.hasBarTarget) {
+      const progress = remaining / total
+      this.barTarget.style.transform = `scaleX(${progress})`
+    }
+
+    if (remaining > 0) {
+      this.rafId = requestAnimationFrame(() => this.tick())
+    } else {
+      this.started = false
+      this.dispatch("complete")
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { view: { type: String, default: "grid" } }
+
+  switch(event) {
+    this.viewValue = event.currentTarget.dataset.view
+    this.dispatch("switch", { detail: { view: this.viewValue } })
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["start", "end"]
+  static values = { startDate: { type: String, default: "" }, endDate: { type: String, default: "" } }
+
+  selectStart(event) { this.startDateValue = event.currentTarget.dataset.date; this.dispatch("change", { detail: { start: this.startDateValue, end: this.endDateValue } }) }
+  selectEnd(event) { this.endDateValue = event.currentTarget.dataset.date; this.dispatch("change", { detail: { start: this.startDateValue, end: this.endDateValue } }) }
+}

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

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "calendar", "grid", "month", "year", "hidden"]
+  static values = { date: { type: String, default: "" }, open: { type: Boolean, default: false }, month: Number, year: Number }
+
+  connect() {
+    const now = new Date()
+    this.monthValue = this.monthValue ?? now.getMonth()
+    this.yearValue = this.yearValue ?? now.getFullYear()
+    this.selectedDate = this.dateValue ? new Date(this.dateValue) : null
+
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+
+    if (this.selectedDate && this.hasInputTarget) {
+      this.inputTarget.value = this.formatDate(this.selectedDate)
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleOutsideClick)
+  }
+
+  open() {
+    this.openValue = true
+    this.calendarTarget.classList.remove("hidden")
+    this.render()
+  }
+
+  close() {
+    this.openValue = false
+    this.calendarTarget.classList.add("hidden")
+  }
+
+  toggle() {
+    this.openValue ? this.close() : this.open()
+  }
+
+  prevMonth() {
+    this.monthValue--
+    if (this.monthValue < 0) { this.monthValue = 11; this.yearValue-- }
+    this.render()
+  }
+
+  nextMonth() {
+    this.monthValue++
+    if (this.monthValue > 11) { this.monthValue = 0; this.yearValue++ }
+    this.render()
+  }
+
+  selectDate(event) {
+    const day = parseInt(event.currentTarget.dataset.day, 10)
+    this.selectedDate = new Date(this.yearValue, this.monthValue, day)
+    this.inputTarget.value = this.formatDate(this.selectedDate)
+    if (this.hasHiddenTarget) this.hiddenTarget.value = this.selectedDate.toISOString().split("T")[0]
+    this.close()
+    this.dispatch("select", { detail: { date: this.selectedDate } })
+  }
+
+  render() {
+    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+    if (this.hasMonthTarget) this.monthTarget.textContent = months[this.monthValue]
+    if (this.hasYearTarget) this.yearTarget.textContent = this.yearValue
+    if (!this.hasGridTarget) return
+
+    this.gridTarget.innerHTML = ""
+    const firstDay = new Date(this.yearValue, this.monthValue, 1).getDay()
+    const daysInMonth = new Date(this.yearValue, this.monthValue + 1, 0).getDate()
+    const today = new Date()
+
+    for (let i = 0; i < firstDay; i++) {
+      const empty = document.createElement("div")
+      empty.className = "datepicker-day empty"
+      this.gridTarget.appendChild(empty)
+    }
+
+    for (let d = 1; d <= daysInMonth; d++) {
+      const cell = document.createElement("button")
+      cell.type = "button"
+      cell.className = "datepicker-day"
+      cell.dataset.day = d
+      cell.textContent = d
+
+      const isToday = today.getDate() === d && today.getMonth() === this.monthValue && today.getFullYear() === this.yearValue
+      const isSelected = this.selectedDate && this.selectedDate.getDate() === d && this.selectedDate.getMonth() === this.monthValue && this.selectedDate.getFullYear() === this.yearValue
+
+      cell.classList.toggle("is-today", isToday)
+      cell.classList.toggle("is-selected", isSelected)
+      cell.setAttribute("data-action", "click->hw-datepicker#selectDate")
+      this.gridTarget.appendChild(cell)
+    }
+  }
+
+  formatDate(date) {
+    return date.toISOString().split("T")[0]
+  }
+
+  handleOutsideClick(event) {
+    if (!this.openValue) return
+    if (!this.element.contains(event.target)) this.close()
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") this.close()
+  }
+}

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

@@ -0,0 +1,68 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel", "overlay"]
+  static values = { open: { type: Boolean, default: false } }
+
+  connect() {
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.beforeCache = this.resetForCache.bind(this)
+    this.element.addEventListener("keydown", this.handleKeydown)
+    document.addEventListener("turbo:before-cache", this.beforeCache)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("keydown", this.handleKeydown)
+    document.removeEventListener("turbo:before-cache", this.beforeCache)
+  }
+
+  // Turbo: reset state before page cache
+  resetForCache() {
+    this.openValue = false
+    if (this.hasPanelTarget && this.panelTarget.open) this.panelTarget.close()
+  }
+
+  open() {
+    this.openValue = true
+    this.panelTarget.showModal()
+    this.trapFocus()
+  }
+
+  close() {
+    this.openValue = false
+    this.panelTarget.close()
+    this.releaseFocus()
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape" && this.openValue) {
+      event.preventDefault()
+      this.close()
+    }
+  }
+
+  trapFocus() {
+    const focusable = this.panelTarget.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+    if (focusable.length) focusable[0].focus()
+    this.firstFocusable = focusable[0]
+    this.lastFocusable = focusable[focusable.length - 1]
+  }
+
+  releaseFocus() {
+    const trigger = document.querySelector(`[data-action~="hw-dialog#open"]`)
+    if (trigger) trigger.focus()
+  }
+
+  trap(event) {
+    if (event.key !== "Tab") return
+    if (event.shiftKey && document.activeElement === this.firstFocusable) {
+      event.preventDefault()
+      this.lastFocusable.focus()
+    } else if (!event.shiftKey && document.activeElement === this.lastFocusable) {
+      event.preventDefault()
+      this.firstFocusable.focus()
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["zone"]
+
+  connect() {
+    if (this.hasZoneTarget) {
+      this._onDragOver = (e) => e.preventDefault()
+      this._onDrop = (e) => { e.preventDefault(); this.dispatch("drop", { detail: { files: e.dataTransfer?.files } }) }
+      this.zoneTarget.addEventListener("dragover", this._onDragOver)
+      this.zoneTarget.addEventListener("drop", this._onDrop)
+    }
+  }
+
+  disconnect() {
+    if (this.hasZoneTarget) {
+      this.zoneTarget.removeEventListener("dragover", this._onDragOver)
+      this.zoneTarget.removeEventListener("drop", this._onDrop)
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["drawer"]
+  static values = {
+    snapPoints: { type: Array, default: [100] },
+    open: { type: Boolean, default: false },
+    currentSnap: { type: Number, default: 0 }
+  }
+
+  connect() {
+    this.startY = 0
+    this.currentY = 0
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  open() {
+    this.openValue = true
+    this.snapTo(0)
+  }
+
+  close() {
+    this.openValue = false
+    this.currentSnapValue = this.snapPointsValue.length - 1
+    this.drawerTarget.style.transform = `translateY(100%)`
+  }
+
+  toggle() {
+    this.openValue ? this.close() : this.open()
+  }
+
+  snapTo(index) {
+    this.currentSnapValue = index
+    const point = this.snapPointsValue[index]
+    this.drawerTarget.style.transform = `translateY(${100 - point}%)`
+  }
+
+  startDrag(event) {
+    this.startY = event.touches ? event.touches[0].clientY : event.clientY
+  }
+
+  onDrag(event) {
+    if (!this.openValue) return
+    const y = event.touches ? event.touches[0].clientY : event.clientY
+    this.currentY = y - this.startY
+    if (this.currentY > 0) {
+      this.drawerTarget.style.transform = `translateY(${this.currentY}px)`
+    }
+  }
+
+  endDrag() {
+    const threshold = 50
+    if (this.currentY > threshold) {
+      this.close()
+    } else {
+      this.snapTo(this.currentSnapValue)
+    }
+    this.currentY = 0
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape" && this.openValue) this.close()
+  }
+}