shadcn_view_component 0.3.3

data/app/javascript/shadcn/controllers/carousel_controller.js

@@ -0,0 +1,139 @@
+import { Controller } from "@hotwired/stimulus"
+import { directionAwareKey, readDirection } from "shadcn/direction"
+
+// The six things `carousel.tsx` asks embla for — `scrollPrev`, `scrollNext`,
+// `canScrollPrev`, `canScrollNext`, and the `select`/`reInit` events — asked of
+// a scroll container instead. The viewport snaps, so the browser owns the
+// dragging, the momentum and where a release lands; this reads one number to
+// answer the two questions and writes one to move.
+//
+// What that leaves out is real and is in features/carousel.md: no `loop`, no
+// `align`, no `slidesToScroll`, no plugins, and no mouse-drag — a finger drags
+// a scroller, a cursor does not, and embla implements that itself.
+export default class extends Controller {
+  static targets = [ "viewport", "previous", "next" ]
+  static values = { orientation: { type: String, default: "horizontal" } }
+
+  connect() {
+    this.update = this.update.bind(this)
+    this.viewportTarget.addEventListener("scroll", this.update, { passive: true })
+
+    this.alignSnapPoints()
+
+    // A slide is as wide as the viewport until a caller says otherwise, so both
+    // answers change when the box does.
+    this.resizes = new ResizeObserver(this.update)
+    this.resizes.observe(this.viewportTarget)
+
+    this.update()
+  }
+
+  disconnect() {
+    this.viewportTarget.removeEventListener("scroll", this.update)
+    this.resizes.disconnect()
+  }
+
+  get vertical() {
+    return this.orientationValue === "vertical"
+  }
+
+  get position() {
+    return this.vertical ? this.viewportTarget.scrollTop : this.viewportTarget.scrollLeft
+  }
+
+  get extent() {
+    const el = this.viewportTarget
+
+    return this.vertical ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth
+  }
+
+  get items() {
+    return [ ...this.viewportTarget.querySelectorAll("[data-slot=carousel-item]") ]
+  }
+
+  // A slide begins where its *content* begins, and `scroll-snap-align: start`
+  // aligns a box. The track carries a negative margin against each item's
+  // padding — upstream's gutter, `-ml-4` against `pl-4` — so an item's box
+  // starts a gutter before what it holds, and snapping the box to the window
+  // pushes a gutter of the card past the far edge. One border's worth, which is
+  // how this was reported twice.
+  //
+  // A negative `scroll-margin` moves each item's snap area onto its content.
+  // Read from the item rather than fixed at `1rem`, because the gutter is the
+  // caller's: upstream's "Spacing" example halves it.
+  alignSnapPoints() {
+    for (const item of this.items) {
+      const style = getComputedStyle(item)
+      const gutter = parseFloat(this.vertical ? style.paddingTop : style.paddingLeft) || 0
+
+      item.style[this.vertical ? "scrollMarginTop" : "scrollMarginLeft"] = `${-gutter}px`
+    }
+  }
+
+  // Which slide is at the window's start. Asked of the page rather than worked
+  // out: every version of this that did arithmetic got it wrong — once by a
+  // gutter, once by landing between the browser's own snap points — and the
+  // page always knows.
+  get leadingIndex() {
+    const box = this.viewportTarget.getBoundingClientRect()
+    const start = this.vertical ? box.top : box.left
+    const distances = this.items.map((item) => {
+      const rect = item.getBoundingClientRect()
+
+      return Math.abs((this.vertical ? rect.top : rect.left) - start)
+    })
+
+    return distances.indexOf(Math.min(...distances))
+  }
+
+  previous() {
+    this.go(-1)
+  }
+
+  next() {
+    this.go(1)
+  }
+
+  keydown(event) {
+    const key = directionAwareKey(event.key, readDirection(this.element))
+
+    if (key === "ArrowLeft") {
+      event.preventDefault()
+      this.previous()
+    } else if (key === "ArrowRight") {
+      event.preventDefault()
+      this.next()
+    }
+  }
+
+  // The slide next to the one in front, placed by the browser rather than by a
+  // number of this controller's own. `scrollIntoView` uses the same alignment a
+  // released drag settles on, so a finger and a button cannot disagree.
+  //
+  // `nearest` on the other axis so the page does not move under a horizontal
+  // carousel. No `behavior`: `scroll-behavior` is declared in CSS under a
+  // reduced-motion guard, and a context that has decided not to animate can
+  // leave a `behavior: "smooth"` scroll unstarted rather than instant.
+  go(direction) {
+    const item = this.items[this.leadingIndex + direction]
+    if (!item) return
+
+    item.scrollIntoView(this.vertical
+      ? { block: "start", inline: "nearest" }
+      : { inline: "start", block: "nearest" })
+  }
+
+  // A pixel of slack at each end: a smooth scroll settles on a fractional
+  // position often enough that an exact comparison leaves the button that just
+  // worked looking broken.
+  update() {
+    const at = this.position
+
+    this.toggle(this.hasPreviousTarget && this.previousTarget, at > 1)
+    this.toggle(this.hasNextTarget && this.nextTarget, at < this.extent - 1)
+  }
+
+  toggle(button, enabled) {
+    if (button) button.disabled = !enabled
+  }
+}

data/app/javascript/shadcn/controllers/chart_controller.js

@@ -0,0 +1,110 @@
+import { Controller } from "@hotwired/stimulus"
+
+// The chart is drawn by the server — every mark is already in the document,
+// with its label and the value it should show. This is the half a static SVG
+// cannot do: move the tooltip, for a pointer and for the arrow keys.
+//
+// Nothing here computes anything about the data. It reads what the mark
+// carries and moves a panel, which is why a chart of a hundred marks costs the
+// same as a chart of three.
+export default class extends Controller {
+  static targets = [ "mark", "tooltip", "label", "name", "value", "indicator" ]
+
+  // Far enough that the tooltip does not sit under the pointer that summoned
+  // it, which is what makes it flicker.
+  static OFFSET = 12
+
+  static STEPS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }
+
+  show(event) {
+    this.fill(event.currentTarget)
+    this.tooltipTarget.hidden = false
+    this.place(event)
+  }
+
+  move(event) {
+    if (!this.tooltipTarget.hidden) this.place(event)
+  }
+
+  hide() {
+    this.tooltipTarget.hidden = true
+    this.cursor = null
+  }
+
+  // The other way to the tooltip, for someone who sees the chart and has no
+  // pointer. The graphic carries `role="application"`, which is what keeps a
+  // screen reader from taking the arrow keys before they arrive here; the
+  // numbers themselves are in the table beside it, so nothing is announced
+  // from this — it moves a panel, and that is all it claims to do.
+  navigate(event) {
+    if (event.key === "Escape") return this.hide()
+
+    const marks = this.markTargets
+    const step = this.constructor.STEPS[event.key]
+    if (!marks.length) return
+    if (step === undefined && !["Home", "End"].includes(event.key)) return
+
+    event.preventDefault()
+    this.cursor = this.next(event.key, step, marks.length)
+
+    const mark = marks[this.cursor]
+    this.fill(mark)
+    this.tooltipTarget.hidden = false
+    this.placeOn(mark)
+  }
+
+  // Clamped rather than wrapped: an edge you can feel is how you know the
+  // series ended, where wrapping reads as a chart that starts over.
+  next(key, step, count) {
+    if (key === "Home") return 0
+    if (key === "End") return count - 1
+    if (this.cursor == null) return step > 0 ? 0 : count - 1
+
+    return Math.min(Math.max(this.cursor + step, 0), count - 1)
+  }
+
+  // A pie's label and its series name are the same word, so the pie sends one
+  // and both cells take it. A bar's are not: the label is the category it
+  // stands in and the name is the series it belongs to.
+  fill(mark) {
+    const { label, name = label, display, key } = mark.dataset
+
+    if (this.hasLabelTarget) this.labelTarget.textContent = label
+    if (this.hasNameTarget) this.nameTarget.textContent = name
+    if (this.hasValueTarget) this.valueTarget.textContent = display
+    // The swatch takes the mark's own fill rather than a colour repeated in
+    // JavaScript: `--color-<key>` is published on the container, so the two can
+    // never disagree.
+    if (this.hasIndicatorTarget) {
+      this.indicatorTarget.style.setProperty("--color-bg", `var(--color-${key})`)
+      this.indicatorTarget.style.setProperty("--color-border", `var(--color-${key})`)
+    }
+  }
+
+  place(event) {
+    this.moveTo(event.clientX, event.clientY)
+  }
+
+  // A keyboard has no pointer to follow, so the mark itself is the anchor —
+  // the top of the bar, the top of the slice's box.
+  placeOn(mark) {
+    const box = mark.getBoundingClientRect()
+
+    this.moveTo(box.left + box.width / 2, box.top)
+  }
+
+  // Positioned against the container, so a scrolled page or a chart inside a
+  // card needs no measuring of its own — and kept inside it, because a tooltip
+  // that hangs off the edge is what a caller's `overflow-hidden` clips.
+  moveTo(clientX, clientY) {
+    const box = this.element.getBoundingClientRect()
+    const tooltip = this.tooltipTarget.getBoundingClientRect()
+    const offset = this.constructor.OFFSET
+
+    const x = clientX - box.left + offset
+    const y = clientY - box.top + offset
+
+    this.tooltipTarget.style.left = `${Math.min(Math.max(0, x), Math.max(0, box.width - tooltip.width))}px`
+    this.tooltipTarget.style.top = `${Math.min(Math.max(0, y), Math.max(0, box.height - tooltip.height))}px`
+  }
+}

data/app/javascript/shadcn/controllers/checkbox_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Radix's Checkbox: a `role="checkbox"` button plus a hidden native input that
+// carries the value into the form. The indicator is mounted only while checked,
+// so it is detached rather than hidden.
+export default class extends Controller {
+  static targets = [ "indicator" ]
+  static values = { checked: Boolean, indeterminate: Boolean, disabled: Boolean, inputId: String }
+
+  connect() {
+    this.indicator = this.hasIndicatorTarget ? this.indicatorTarget : null
+    // Radix renders the hidden input as a *sibling* of the button, so it lives
+    // outside this controller's scope and is looked up by id instead.
+    this.input = this.inputIdValue ? document.getElementById(this.inputIdValue) : null
+    this.render()
+  }
+
+  toggle(event) {
+    if (this.disabledValue) return
+    event?.preventDefault()
+
+    this.indeterminateValue = false
+    this.checkedValue = !this.checkedValue
+    this.render()
+    this.dispatch("change", { detail: { checked: this.checkedValue } })
+
+    if (this.input) this.input.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
+  keydown(event) {
+    // Enter must not submit the surrounding form, matching Radix.
+    if (event.key === "Enter") event.preventDefault()
+  }
+
+  get state() {
+    if (this.indeterminateValue) return "indeterminate"
+    return this.checkedValue ? "checked" : "unchecked"
+  }
+
+  render() {
+    const state = this.state
+
+    this.element.dataset.state = state
+    this.element.setAttribute(
+      "aria-checked",
+      state === "indeterminate" ? "mixed" : String(this.checkedValue)
+    )
+
+    if (this.input) this.input.checked = this.checkedValue
+
+    if (!this.indicator) return
+
+    if (state === "unchecked") {
+      this.indicator.remove()
+    } else {
+      this.indicator.dataset.state = state
+      this.indicator.hidden = false
+      if (!this.indicator.isConnected) this.element.appendChild(this.indicator)
+    }
+  }
+}

data/app/javascript/shadcn/controllers/collapsible_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+import { uniqueId } from "shadcn/id"
+
+// Radix's Collapsible. `--radix-collapsible-content-height` is published so
+// height transitions have something to animate towards.
+export default class extends Controller {
+  static targets = [ "trigger", "content" ]
+  static values = { open: Boolean, disabled: Boolean }
+
+  connect() {
+    this.render()
+  }
+
+  toggle() {
+    if (this.disabledValue) return
+
+    this.openValue = !this.openValue
+    this.render()
+    this.dispatch("toggle", { detail: { open: this.openValue } })
+  }
+
+  render() {
+    const state = this.openValue ? "open" : "closed"
+
+    this.element.dataset.state = state
+    if (this.disabledValue) this.element.dataset.disabled = ""
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.dataset.state = state
+      this.triggerTarget.setAttribute("aria-expanded", String(this.openValue))
+      if (this.hasContentTarget) {
+        this.triggerTarget.setAttribute("aria-controls", this.contentId)
+      }
+    }
+
+    if (!this.hasContentTarget) return
+
+    const content = this.contentTarget
+    content.id = this.contentId
+    content.dataset.state = state
+    content.hidden = !this.openValue
+
+    if (this.openValue) {
+      content.style.setProperty(
+        "--radix-collapsible-content-height",
+        `${content.scrollHeight}px`
+      )
+    }
+  }
+
+  get contentId() {
+    this._contentId ||= this.contentTarget.id || uniqueId("shadcn-collapsible")
+    return this._contentId
+  }
+}