keystone_ui 0.6.0

data/app/assets/javascripts/keystone_ui/clipboard_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    successMessage: { type: String, default: "Copied!" },
+    errorMessage: { type: String, default: "Failed!" }
+  }
+
+  async copy() {
+    const text = this.element.dataset.clipboardText
+    try {
+      await navigator.clipboard.writeText(text)
+      this.flash(this.successMessageValue)
+    } catch {
+      this.flash(this.errorMessageValue)
+    }
+  }
+
+  flash(message) {
+    const label = this.element.querySelector("span") || this.element.lastChild
+    const original = label.textContent
+    label.textContent = message
+    setTimeout(() => { label.textContent = original }, 1500)
+  }
+}

data/app/assets/javascripts/keystone_ui/color_picker_controller.js

@@ -0,0 +1,158 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["swatch", "hexLabel", "input", "panel", "svArea", "svGradient", "svCursor", "hueSlider"]
+  static values = { value: String }
+
+  connect() {
+    this.hue = 0
+    this.sat = 1
+    this.val = 1
+    this.dragging = false
+
+    if (this.valueValue) {
+      this.setFromHex(this.valueValue)
+    }
+
+    this.boundPointerMove = this.svMove.bind(this)
+    this.boundPointerUp = this.svUp.bind(this)
+    this.boundClickOutside = this.clickOutside.bind(this)
+  }
+
+  disconnect() {
+    document.removeEventListener("pointermove", this.boundPointerMove)
+    document.removeEventListener("pointerup", this.boundPointerUp)
+    document.removeEventListener("click", this.boundClickOutside)
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    const panel = this.panelTarget
+    const isHidden = panel.classList.contains("hidden")
+
+    if (isHidden) {
+      panel.classList.remove("hidden")
+      document.addEventListener("click", this.boundClickOutside)
+    } else {
+      this.close()
+    }
+  }
+
+  close() {
+    this.panelTarget.classList.add("hidden")
+    document.removeEventListener("click", this.boundClickOutside)
+  }
+
+  clickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  hueChanged() {
+    this.hue = parseInt(this.hueSliderTarget.value)
+    this.updateSvGradient()
+    this.updateColor()
+  }
+
+  svDown(event) {
+    event.preventDefault()
+    this.dragging = true
+    document.addEventListener("pointermove", this.boundPointerMove)
+    document.addEventListener("pointerup", this.boundPointerUp)
+    this.updateSvFromPointer(event)
+  }
+
+  svMove(event) {
+    if (!this.dragging) return
+    event.preventDefault()
+    this.updateSvFromPointer(event)
+  }
+
+  svUp() {
+    this.dragging = false
+    document.removeEventListener("pointermove", this.boundPointerMove)
+    document.removeEventListener("pointerup", this.boundPointerUp)
+  }
+
+  updateSvFromPointer(event) {
+    const rect = this.svAreaTarget.getBoundingClientRect()
+    const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+    const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height))
+
+    this.sat = x / rect.width
+    this.val = 1 - y / rect.height
+
+    this.svCursorTarget.style.left = `${(this.sat * 100)}%`
+    this.svCursorTarget.style.top = `${((1 - this.val) * 100)}%`
+
+    this.updateColor()
+  }
+
+  updateColor() {
+    const hex = this.hsvToHex(this.hue, this.sat, this.val)
+    this.swatchTarget.style.backgroundColor = hex
+    this.hexLabelTarget.textContent = hex
+    this.inputTarget.value = hex
+
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
+  updateSvGradient() {
+    const hueColor = `hsl(${this.hue}, 100%, 50%)`
+    this.svGradientTarget.style.background = `linear-gradient(to right, #fff, ${hueColor})`
+  }
+
+  setFromHex(hex) {
+    const { h, s, v } = this.hexToHsv(hex)
+    this.hue = h
+    this.sat = s
+    this.val = v
+
+    if (this.hasHueSliderTarget) this.hueSliderTarget.value = h
+    this.updateSvGradient()
+
+    if (this.hasSvCursorTarget) {
+      this.svCursorTarget.style.left = `${(s * 100)}%`
+      this.svCursorTarget.style.top = `${((1 - v) * 100)}%`
+    }
+  }
+
+  hsvToHex(h, s, v) {
+    const c = v * s
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+    const m = v - c
+    let r, g, b
+
+    if (h < 60) { r = c; g = x; b = 0 }
+    else if (h < 120) { r = x; g = c; b = 0 }
+    else if (h < 180) { r = 0; g = c; b = x }
+    else if (h < 240) { r = 0; g = x; b = c }
+    else if (h < 300) { r = x; g = 0; b = c }
+    else { r = c; g = 0; b = x }
+
+    const toHex = (n) => Math.round((n + m) * 255).toString(16).padStart(2, "0")
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+  }
+
+  hexToHsv(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255
+    const g = parseInt(hex.slice(3, 5), 16) / 255
+    const b = parseInt(hex.slice(5, 7), 16) / 255
+
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    const d = max - min
+
+    let h = 0
+    if (d !== 0) {
+      if (max === r) h = 60 * (((g - b) / d) % 6)
+      else if (max === g) h = 60 * ((b - r) / d + 2)
+      else h = 60 * ((r - g) / d + 4)
+    }
+    if (h < 0) h += 360
+
+    const s = max === 0 ? 0 : d / max
+    return { h: Math.round(h), s, v: max }
+  }
+}

data/app/assets/javascripts/keystone_ui/column_picker_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu"]
+  static values = { saveUrl: String }
+
+  connect() {
+    this._close = this.close.bind(this)
+    document.addEventListener("click", this._close)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._close)
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    this.menuTarget.classList.toggle("hidden")
+  }
+
+  close(event) {
+    if (!this.element.contains(event.target)) {
+      this.menuTarget.classList.add("hidden")
+    }
+  }
+
+  save() {
+    const allCheckboxes = this.element.querySelectorAll("input[type=checkbox]")
+    const hiddenColumns = Array.from(allCheckboxes)
+      .filter(cb => !cb.checked)
+      .map(cb => cb.value)
+
+    if (this.hasSaveUrlValue) {
+      const token = document.querySelector('meta[name="csrf-token"]')?.content
+      fetch(this.saveUrlValue, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": token
+        },
+        body: JSON.stringify({ hidden_columns: hiddenColumns })
+      }).then(() => {
+        Turbo.visit(window.location.href, { action: "replace" })
+      })
+    }
+  }
+}

data/app/assets/javascripts/keystone_ui/dismiss_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  close() {
+    this.element.remove()
+  }
+}

data/app/assets/javascripts/keystone_ui/dropdown_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu"]
+
+  toggle(event) {
+    event.stopPropagation()
+    this.menuTarget.classList.toggle("hidden")
+  }
+
+  hide(event) {
+    if (!this.element.contains(event.target)) {
+      this.menuTarget.classList.add("hidden")
+    }
+  }
+}

data/app/assets/javascripts/keystone_ui/file_upload_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "dropZone", "fileName"]
+
+  connect() {
+    this._onDragOver = this.dragOver.bind(this)
+    this._onDragLeave = this.dragLeave.bind(this)
+    this._onDrop = this.drop.bind(this)
+
+    this.dropZoneTarget.addEventListener("dragover", this._onDragOver)
+    this.dropZoneTarget.addEventListener("dragleave", this._onDragLeave)
+    this.dropZoneTarget.addEventListener("drop", this._onDrop)
+  }
+
+  disconnect() {
+    this.dropZoneTarget.removeEventListener("dragover", this._onDragOver)
+    this.dropZoneTarget.removeEventListener("dragleave", this._onDragLeave)
+    this.dropZoneTarget.removeEventListener("drop", this._onDrop)
+  }
+
+  dragOver(event) {
+    event.preventDefault()
+    this.dropZoneTarget.classList.add("border-accent-500", "bg-accent-50", "dark:bg-accent-900/10")
+    this.dropZoneTarget.classList.remove("border-gray-300", "dark:border-zinc-600")
+  }
+
+  dragLeave(event) {
+    event.preventDefault()
+    this.dropZoneTarget.classList.remove("border-accent-500", "bg-accent-50", "dark:bg-accent-900/10")
+    this.dropZoneTarget.classList.add("border-gray-300", "dark:border-zinc-600")
+  }
+
+  drop(event) {
+    event.preventDefault()
+    this.dragLeave(event)
+
+    const files = event.dataTransfer.files
+    if (files.length > 0) {
+      this.inputTarget.files = files
+      this.updateFileName()
+    }
+  }
+
+  select() {
+    this.updateFileName()
+  }
+
+  updateFileName() {
+    if (!this.hasFileNameTarget) return
+
+    const files = this.inputTarget.files
+    if (files.length === 0) {
+      this.fileNameTarget.textContent = ""
+    } else if (files.length === 1) {
+      this.fileNameTarget.textContent = files[0].name
+    } else {
+      this.fileNameTarget.textContent = `${files.length} files selected`
+    }
+  }
+}

data/app/assets/javascripts/keystone_ui/index.js

@@ -0,0 +1,33 @@
+import ColorPickerController from "keystone_ui/color_picker_controller"
+import MultiSelectController from "keystone_ui/multi_select_controller"
+import SwipeDeckController from "keystone_ui/swipe_deck_controller"
+import ColumnPickerController from "keystone_ui/column_picker_controller"
+import FileUploadController from "keystone_ui/file_upload_controller"
+import DropdownController from "keystone_ui/dropdown_controller"
+import DismissController from "keystone_ui/dismiss_controller"
+import ModalController from "keystone_ui/modal_controller"
+import ClipboardController from "keystone_ui/clipboard_controller"
+import TabSwitcherController from "keystone_ui/tab_switcher_controller"
+import AccordionController from "keystone_ui/accordion_controller"
+import StatCardInfoController from "keystone_ui/stat_card_info_controller"
+import AutoSubmitController from "keystone_ui/auto_submit_controller"
+import LineChartController from "keystone_ui/line_chart_controller"
+
+export function registerControllers(application) {
+  application.register("color-picker", ColorPickerController)
+  application.register("multi-select", MultiSelectController)
+  application.register("swipe-deck", SwipeDeckController)
+  application.register("column-picker", ColumnPickerController)
+  application.register("file-upload", FileUploadController)
+  application.register("dropdown", DropdownController)
+  application.register("dismiss", DismissController)
+  application.register("modal", ModalController)
+  application.register("clipboard", ClipboardController)
+  application.register("tab-switcher", TabSwitcherController)
+  application.register("accordion", AccordionController)
+  application.register("stat-card-info", StatCardInfoController)
+  application.register("auto-submit", AutoSubmitController)
+  application.register("line-chart", LineChartController)
+}
+
+export { ColorPickerController, MultiSelectController, SwipeDeckController, ColumnPickerController, FileUploadController, DropdownController, DismissController, ModalController, ClipboardController, TabSwitcherController, AccordionController, StatCardInfoController, AutoSubmitController, LineChartController }

data/app/assets/javascripts/keystone_ui/line_chart_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+import { Chart, registerables } from "chart.js"
+
+Chart.register(...registerables)
+
+export default class extends Controller {
+  static targets = ["canvas"]
+  static values = { data: Object }
+
+  connect() {
+    this.chart = new Chart(this.canvasTarget, {
+      type: "line",
+      data: this.resolveColors(this.dataValue),
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: { mode: "index", intersect: false }
+      }
+    })
+  }
+
+  disconnect() {
+    this.chart?.destroy()
+  }
+
+  resolveColors(data) {
+    const styles = getComputedStyle(this.element)
+    const resolve = (color) => {
+      const match = typeof color === "string" && color.match(/^var\((--[^)]+)\)$/)
+      return match ? styles.getPropertyValue(match[1]).trim() || color : color
+    }
+
+    data.datasets.forEach((dataset) => {
+      if (dataset.borderColor) dataset.borderColor = resolve(dataset.borderColor)
+    })
+    return data
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["backdrop"]
+
+  open() {
+    this.backdropTarget.classList.remove("hidden")
+  }
+
+  close() {
+    this.backdropTarget.classList.add("hidden")
+  }
+
+  closeOnBackdrop(event) {
+    if (event.target === this.backdropTarget) {
+      this.close()
+    }
+  }
+}

data/app/assets/javascripts/keystone_ui/multi_select_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "label"]
+  static values = { label: String }
+
+  connect() {
+    this._close = this.close.bind(this)
+    document.addEventListener("click", this._close)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._close)
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    this.menuTarget.classList.toggle("hidden")
+  }
+
+  close(event) {
+    if (!this.element.contains(event.target)) {
+      this.menuTarget.classList.add("hidden")
+    }
+  }
+
+  updateLabel() {
+    const checked = this.element.querySelectorAll("input[type=checkbox]:checked")
+    if (checked.length === 0) {
+      this.labelTarget.textContent = `All ${this.labelValue}`
+    } else {
+      this.labelTarget.textContent = `${checked.length} selected`
+    }
+  }
+}

data/app/assets/javascripts/keystone_ui/stat_card_info_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  toggle() {
+    this.panelTarget.classList.toggle("hidden")
+  }
+}

data/app/assets/javascripts/keystone_ui/swipe_deck_controller.js

@@ -0,0 +1,123 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["card", "stack"]
+  static values = { emptyTitle: String, emptySubtitle: String }
+
+  connect() {
+    this.currentIndex = 0
+    this.setupTouch()
+  }
+
+  complete() {
+    const card = this.currentCard
+    if (!card) return
+
+    const itemId = card.dataset.itemId
+    const valueInput = card.querySelector("[data-swipe-deck-value]")
+    const value = valueInput ? valueInput.value : null
+
+    this.dispatch("complete", { detail: { itemId, value, card } })
+    this.animateOut(card, "right", "ring-2 ring-green-400")
+  }
+
+  skip() {
+    const card = this.currentCard
+    if (!card) return
+
+    const itemId = card.dataset.itemId
+    this.dispatch("skip", { detail: { itemId, card } })
+    this.animateOut(card, "left", "ring-2 ring-red-400")
+  }
+
+  get currentCard() {
+    return this.cardTargets[this.currentIndex]
+  }
+
+  animateOut(card, direction, colorClass) {
+    if (colorClass) {
+      colorClass.split(" ").forEach(c => card.classList.add(c))
+    }
+    const translateX = direction === "right" ? "150%" : "-150%"
+    const rotate = direction === "right" ? "15" : "-15"
+    card.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out"
+    card.style.transform = `translateX(${translateX}) rotate(${rotate}deg)`
+    card.style.opacity = "0"
+
+    setTimeout(() => {
+      card.style.display = "none"
+      this.currentIndex++
+      this.updateStack()
+    }, 300)
+  }
+
+  updateStack() {
+    const remaining = this.cardTargets.slice(this.currentIndex)
+    remaining.forEach((card, index) => {
+      card.style.transition = "transform 0.3s ease-out"
+      card.style.transform = `scale(${1 - index * 0.05}) translateY(${index * 8}px)`
+      card.style.zIndex = remaining.length - index
+    })
+
+    if (remaining.length === 0) {
+      const title = this.emptyTitleValue || "All done!"
+      const subtitle = this.emptySubtitleValue
+      let html = `
+        <div class="text-center py-16" data-testid="swipe-empty">
+          <p class="text-2xl font-semibold text-gray-900 dark:text-white">${title}</p>`
+      if (subtitle) {
+        html += `
+          <p class="mt-2 text-gray-500 dark:text-gray-400">${subtitle}</p>`
+      }
+      html += `
+        </div>`
+      this.stackTarget.innerHTML = html
+    }
+  }
+
+  clearSwipeColor(card) {
+    card.classList.remove("ring-2", "ring-green-400", "ring-red-400")
+  }
+
+  setupTouch() {
+    let startX = 0
+    let currentX = 0
+
+    const isInput = (e) => e.target.closest("input, textarea, select")
+
+    this.element.addEventListener("touchstart", (e) => {
+      if (isInput(e)) return
+      startX = e.touches[0].clientX
+    })
+
+    this.element.addEventListener("touchmove", (e) => {
+      if (isInput(e) || !this.currentCard) return
+      currentX = e.touches[0].clientX
+      const diff = currentX - startX
+      this.currentCard.style.transition = "none"
+      this.currentCard.style.transform = `translateX(${diff}px) rotate(${diff * 0.1}deg)`
+      this.clearSwipeColor(this.currentCard)
+      if (Math.abs(diff) > 30) {
+        this.currentCard.classList.add("ring-2", diff > 0 ? "ring-green-400" : "ring-red-400")
+      }
+    })
+
+    this.element.addEventListener("touchend", (e) => {
+      if (isInput(e) || !this.currentCard) return
+      const diff = currentX - startX
+      if (Math.abs(diff) > 100) {
+        if (diff > 0) {
+          this.complete()
+        } else {
+          this.skip()
+        }
+      } else {
+        this.clearSwipeColor(this.currentCard)
+        this.currentCard.style.transition = "transform 0.3s ease-out"
+        this.currentCard.style.transform = ""
+      }
+      startX = 0
+      currentX = 0
+    })
+  }
+}

data/app/assets/javascripts/keystone_ui/tab_switcher_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tab"]
+
+  select(event) {
+    const index = parseInt(event.currentTarget.dataset.index)
+
+    this.tabTargets.forEach((tab) => {
+      if (parseInt(tab.dataset.index) === index) {
+        tab.setAttribute("data-active", "")
+      } else {
+        tab.removeAttribute("data-active")
+      }
+    })
+
+    this.dispatch("change", { detail: { index } })
+  }
+}

data/app/assets/tailwind/keystone_ui_engine/color_picker.css

@@ -0,0 +1,31 @@
+/* Color picker hue slider styling */
+input[type="range"].keystone-hue-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 0.75rem;
+  border-radius: 0.5rem;
+  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+  outline: none;
+}
+
+input[type="range"].keystone-hue-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+input[type="range"].keystone-hue-slider::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}

data/app/assets/tailwind/keystone_ui_engine/engine.css

@@ -0,0 +1,7 @@
+/* Keystone UI components — tells Tailwind to scan for classes in component files */
+@source "../../components/**/*.{erb,rb}";
+
+/* Safelist: grid-cols classes built from static constants in GridComponent.
+   Belt-and-suspenders — ensures these classes survive JIT purging even if
+   the scanner misses the Ruby hash literals. */
+@source inline("grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-5 grid-cols-6 grid-cols-7 grid-cols-8 grid-cols-9 grid-cols-10 grid-cols-11 grid-cols-12 sm:grid-cols-1 sm:grid-cols-2 sm:grid-cols-3 sm:grid-cols-4 sm:grid-cols-5 sm:grid-cols-6 sm:grid-cols-7 sm:grid-cols-8 sm:grid-cols-9 sm:grid-cols-10 sm:grid-cols-11 sm:grid-cols-12 md:grid-cols-1 md:grid-cols-2 md:grid-cols-3 md:grid-cols-4 md:grid-cols-5 md:grid-cols-6 md:grid-cols-7 md:grid-cols-8 md:grid-cols-9 md:grid-cols-10 md:grid-cols-11 md:grid-cols-12 lg:grid-cols-1 lg:grid-cols-2 lg:grid-cols-3 lg:grid-cols-4 lg:grid-cols-5 lg:grid-cols-6 lg:grid-cols-7 lg:grid-cols-8 lg:grid-cols-9 lg:grid-cols-10 lg:grid-cols-11 lg:grid-cols-12");