shadcn_view_component 0.3.3

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

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+import { uniqueId } from "shadcn/id"
+import { FloatingLayer } from "shadcn/floating"
+import { trapFocus, focusFirst } from "shadcn/focus"
+
+// Radix's Popover: a `role="dialog"` layer anchored to its trigger.
+export default class extends Controller {
+  static targets = [ "trigger", "content", "anchor" ]
+  static values = {
+    open: Boolean,
+    side: { type: String, default: "bottom" },
+    align: { type: String, default: "center" },
+    sideOffset: { type: Number, default: 4 },
+    alignOffset: { type: Number, default: 0 },
+    modal: Boolean
+  }
+
+  connect() {
+    if (!this.hasContentTarget || !this.hasTriggerTarget) return
+
+    this.contentTarget.hidden = true
+    this.contentTarget.id ||= uniqueId("shadcn-popover")
+
+    // The id is generated here, so the server has nothing to point this at.
+    this.triggerTarget.setAttribute("aria-controls", this.contentTarget.id)
+    this.triggerTarget.dataset.state = "closed"
+
+    this.layer = new FloatingLayer({
+      trigger: this.hasAnchorTarget ? this.anchorTarget : this.triggerTarget,
+      content: this.contentTarget,
+      prefix: "popover",
+      side: this.sideValue,
+      align: this.alignValue,
+      sideOffset: this.sideOffsetValue,
+      alignOffset: this.alignOffsetValue,
+      onOpen: () => {
+        this.triggerTarget.setAttribute("aria-expanded", "true")
+        this.releaseFocus = trapFocus(this.contentTarget, this.triggerTarget)
+        focusFirst(this.contentTarget)
+      },
+      onClose: () => {
+        this.triggerTarget.setAttribute("aria-expanded", "false")
+        if (this.releaseFocus) this.releaseFocus()
+        this.releaseFocus = null
+      }
+    })
+
+    if (this.openValue) this.layer.show()
+  }
+
+  disconnect() {
+    if (this.layer) this.layer.destroy()
+  }
+
+  toggle() {
+    this.layer.toggle()
+  }
+
+  open() {
+    this.layer.show()
+  }
+
+  close() {
+    this.layer.hide()
+  }
+}

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

@@ -0,0 +1,69 @@
+import { Controller } from "@hotwired/stimulus"
+import { directionAwareKey, readDirection } from "shadcn/direction"
+
+// Radix's RadioGroup: `role="radiogroup"` with roving tabindex over its items
+// and arrow-key navigation that also selects, per the ARIA radio pattern.
+export default class extends Controller {
+  static targets = [ "item", "input" ]
+  static values = { value: String, disabled: Boolean }
+
+  connect() {
+    this.render()
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (item.disabled || this.disabledValue) return
+
+    this.valueValue = item.dataset.value || ""
+    this.render()
+    item.focus({ preventScroll: true })
+    this.dispatch("change", { detail: { value: this.valueValue } })
+
+    if (this.hasInputTarget) {
+      this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+  }
+
+  keydown(event) {
+    const keys = {
+      ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1
+    }
+    const step = keys[directionAwareKey(event.key, readDirection(this.element))]
+    if (!step) return
+
+    event.preventDefault()
+
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    const current = items.indexOf(event.currentTarget)
+    const next = items[(current + step + items.length) % items.length]
+    next.click()
+  }
+
+  get enabledItems() {
+    return this.itemTargets.filter((item) => !item.disabled)
+  }
+
+  render() {
+    const items = this.itemTargets
+    const selected = items.find((item) => item.dataset.value === this.valueValue)
+
+    items.forEach((item) => {
+      const checked = item === selected
+      item.dataset.state = checked ? "checked" : "unchecked"
+      item.setAttribute("aria-checked", String(checked))
+      // Roving tabindex: only the selected item (or the first one) is tabbable.
+      const tabbable = selected ? checked : item === this.enabledItems[0]
+      item.setAttribute("tabindex", tabbable ? "0" : "-1")
+
+      const indicator = item.querySelector("[data-slot='radio-group-indicator']")
+      if (!indicator) return
+      indicator.hidden = !checked
+      indicator.dataset.state = checked ? "checked" : "unchecked"
+    })
+
+    if (this.hasInputTarget) this.inputTarget.value = this.valueValue
+  }
+}

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

@@ -0,0 +1,167 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Panels are shares of a flex container, so the layout is the browser's: this
+// only moves two numbers when a handle is dragged, and the browser lays the
+// group out again.
+//
+// The reference is `react-resizable-panels`, 2,252 lines — most of which is
+// state, persistence and conditional panels. The arithmetic underneath is a
+// delta in pixels turned into a percentage of the group.
+export default class extends Controller {
+  static targets = [ "panel", "handle" ]
+  static values = { orientation: { type: String, default: "horizontal" } }
+
+  // The package's own step for the arrow keys, and its own answer for Home and
+  // End: push the separator all the way (`react-resizable-panels.js`, the
+  // keydown switch).
+  static STEP = 5
+  static ALL = 100
+
+  connect() {
+    this.publish()
+  }
+
+  press(event) {
+    const handle = event.currentTarget
+    if (handle.getAttribute("aria-disabled") === "true") return
+
+    event.preventDefault()
+    handle.setPointerCapture(event.pointerId)
+    handle.dataset.separator = "active"
+
+    this.drag = {
+      handle,
+      from: this.positionOf(event),
+      sizes: this.neighbours(handle).map((panel) => this.shareOf(panel))
+    }
+
+    this.onMove = (moved) => this.move(moved)
+    this.onUp = () => this.release()
+    handle.addEventListener("pointermove", this.onMove)
+    handle.addEventListener("pointerup", this.onUp)
+    handle.addEventListener("pointercancel", this.onUp)
+  }
+
+  move(event) {
+    if (!this.drag) return
+
+    // In percent, because that is what a share is. The group's own size is the
+    // whole, so a drag of 40px in a 400px group is ten points.
+    const travelled = (this.positionOf(event) - this.drag.from) / this.extent * 100
+
+    this.resize(this.drag.handle, travelled, this.drag.sizes)
+  }
+
+  release() {
+    if (!this.drag) return
+
+    const { handle } = this.drag
+    handle.removeEventListener("pointermove", this.onMove)
+    handle.removeEventListener("pointerup", this.onUp)
+    handle.removeEventListener("pointercancel", this.onUp)
+    handle.dataset.separator = "inactive"
+    this.drag = null
+  }
+
+  // The separator pattern: the arrows that lie along the group's own axis move
+  // it, and the ones across it do nothing — which is why the orientation is a
+  // value rather than something read from the class.
+  keydown(event) {
+    const handle = event.currentTarget
+    if (handle.getAttribute("aria-disabled") === "true") return
+
+    const horizontal = this.orientationValue === "horizontal"
+    const steps = {
+      ArrowLeft: horizontal ? -this.constructor.STEP : 0,
+      ArrowRight: horizontal ? this.constructor.STEP : 0,
+      ArrowUp: horizontal ? 0 : -this.constructor.STEP,
+      ArrowDown: horizontal ? 0 : this.constructor.STEP,
+      Home: -this.constructor.ALL,
+      End: this.constructor.ALL
+    }
+    const step = steps[event.key]
+    if (!step) return
+
+    event.preventDefault()
+    this.resize(handle, step, this.neighbours(handle).map((panel) => this.shareOf(panel)))
+  }
+
+  // Two panels and one number: what one gives the other takes, so the group
+  // always adds up to what it added up to before.
+  resize(handle, delta, [ before, after ]) {
+    const [ first, second ] = this.neighbours(handle)
+    if (!first || !second) return
+
+    const total = before + after
+    const wanted = before + delta
+    const size = Math.min(
+      Math.max(wanted, this.limits(first).min, total - this.limits(second).max),
+      this.limits(first).max,
+      total - this.limits(second).min
+    )
+
+    first.style.flexGrow = String(this.round(size))
+    second.style.flexGrow = String(this.round(total - size))
+    this.publish()
+    this.dispatch("resize", { detail: { sizes: this.panelTargets.map((panel) => this.shareOf(panel)) } })
+  }
+
+  // `aria-valuenow` is the share of the panel a separator controls, and it is
+  // written from here rather than rendered: the server would have to know how
+  // many panels the caller put in the block, and it does not.
+  publish() {
+    for (const handle of this.handleTargets) {
+      const [ first ] = this.neighbours(handle)
+      if (!first) continue
+
+      handle.setAttribute("aria-controls", first.id)
+      handle.setAttribute("aria-valuenow", String(Math.round(this.shareOf(first))))
+      handle.setAttribute("aria-valuemin", String(this.limits(first).min))
+      handle.setAttribute("aria-valuemax", String(this.limits(first).max))
+    }
+  }
+
+  // The panels either side of a handle, in DOM order — which is what "either
+  // side" means in a flex row that may also be a column.
+  neighbours(handle) {
+    const parts = [ ...this.element.children ]
+    const at = parts.indexOf(handle)
+
+    return [ parts[at - 1], parts[at + 1] ].map((part) => (part?.matches("[data-shadcn--resizable-target=panel]") ? part : null))
+  }
+
+  limits(panel) {
+    return {
+      min: Number(panel.dataset.minSize ?? 0),
+      max: Number(panel.dataset.maxSize ?? 100)
+    }
+  }
+
+  // A share read from the layout rather than from the style, so a group whose
+  // panels were never given sizes still has numbers to move: `flex-grow: 1`
+  // each renders as equal shares, and this is what they are.
+  shareOf(panel) {
+    const sizes = this.panelTargets.map((each) => this.lengthOf(each))
+    const total = sizes.reduce((sum, size) => sum + size, 0)
+
+    return total ? this.lengthOf(panel) / total * 100 : 0
+  }
+
+  lengthOf(element) {
+    const box = element.getBoundingClientRect()
+
+    return this.orientationValue === "horizontal" ? box.width : box.height
+  }
+
+  get extent() {
+    return this.lengthOf(this.element) || 1
+  }
+
+  positionOf(event) {
+    return this.orientationValue === "horizontal" ? event.clientX : event.clientY
+  }
+
+  round(value) {
+    return Math.round(value * 100) / 100
+  }
+}

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

@@ -0,0 +1,253 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Radix's ScrollArea (vendor/radix/ui/scroll-area.tsx): native scrollbars
+// hidden, a drawn one in their place.
+//
+// The layout is CSS. This computes two numbers per axis — how long the thumb is
+// and how far along it sits — and publishes the first as the custom property
+// the thumb's width or height reads. That split is Radix's, measured on the
+// live demo, and it is why 1,189 lines of TSX come down to this: the scrollbar
+// is positioned by a stylesheet, not by script.
+//
+// Two of Radix's four `type` strategies are here: `hover`, its default, and
+// `always`. `scroll` and `auto` are not — see features/scroll-area.md.
+
+// Radix's own, and the comment is Radix's too: "minimum of 18 matches macOS
+// minimum" (scroll-area.tsx:1065).
+const MIN_THUMB = 18
+
+export default class extends Controller {
+  static targets = [ "viewport", "content", "scrollbar", "corner" ]
+  static values = {
+    type: { type: String, default: "hover" },
+    hideDelay: { type: Number, default: 600 }
+  }
+
+  connect() {
+    if (!this.hasViewportTarget) return
+
+    this.dragging = null
+    this.hideTimer = null
+
+    this.onScroll = () => this.render()
+    this.viewportTarget.addEventListener("scroll", this.onScroll, { passive: true })
+
+    // Content and viewport both change the numbers, and neither change is an
+    // event: a row growing is not a scroll.
+    this.resizes = new ResizeObserver(() => this.render())
+    this.resizes.observe(this.viewportTarget)
+    if (this.hasContentTarget) this.resizes.observe(this.contentTarget)
+
+    this.render()
+    if (this.typeValue === "always") this.show()
+  }
+
+  disconnect() {
+    this.viewportTarget?.removeEventListener("scroll", this.onScroll)
+    this.resizes?.disconnect()
+    if (this.hideTimer) clearTimeout(this.hideTimer)
+    this.endDrag()
+  }
+
+  // ------------------------------------------------------------ visibility
+
+  pointerEnter() {
+    if (this.typeValue !== "hover") return
+
+    if (this.hideTimer) clearTimeout(this.hideTimer)
+    this.show()
+  }
+
+  pointerLeave() {
+    if (this.typeValue !== "hover" || this.dragging) return
+
+    this.hideTimer = setTimeout(() => this.hide(), this.hideDelayValue)
+  }
+
+  show() {
+    for (const bar of this.scrollbarTargets) {
+      // A bar for an axis with nothing to scroll stays hidden however the
+      // pointer moves — showing it would draw a full-length thumb that cannot
+      // go anywhere.
+      bar.dataset.state = this.overflows(this.axisOf(bar)) ? "visible" : "hidden"
+    }
+  }
+
+  hide() {
+    for (const bar of this.scrollbarTargets) bar.dataset.state = "hidden"
+  }
+
+  // --------------------------------------------------------------- geometry
+
+  render() {
+    for (const bar of this.scrollbarTargets) this.renderBar(bar)
+
+    if (this.typeValue === "always") this.show()
+    else if (this.scrollbarTargets.some((bar) => bar.dataset.state === "visible")) this.show()
+
+    this.renderCorner()
+  }
+
+  renderBar(bar) {
+    const axis = this.axisOf(bar)
+    const sizes = this.sizes(axis, bar)
+    const thumb = bar.querySelector("[data-slot=scroll-area-thumb]")
+
+    if (!thumb) return
+
+    const thumbSize = this.thumbSize(sizes)
+    const offset = this.thumbOffset(sizes, thumbSize)
+
+    if (axis === "horizontal") {
+      bar.style.setProperty("--radix-scroll-area-thumb-width", `${thumbSize}px`)
+      thumb.style.width = "var(--radix-scroll-area-thumb-width)"
+      thumb.style.transform = `translate3d(${offset}px, 0, 0)`
+    } else {
+      bar.style.setProperty("--radix-scroll-area-thumb-height", `${thumbSize}px`)
+      thumb.style.height = "var(--radix-scroll-area-thumb-height)"
+      thumb.style.transform = `translate3d(0, ${offset}px, 0)`
+    }
+  }
+
+  // Radix's `getThumbSize` (scroll-area.tsx:1061): the track's length times the
+  // fraction of the content on screen, never below 18px — past that the thumb
+  // stops being a proportion and starts being a handle.
+  thumbSize({ viewport, content, track }) {
+    const ratio = content > 0 ? viewport / content : 0
+
+    return Math.max(track * ratio, MIN_THUMB)
+  }
+
+  // `getThumbOffsetFromScroll` (:1087), which is a linear scale from how far
+  // the content has scrolled to how far the thumb can travel.
+  thumbOffset({ viewport, content, track, scroll }, thumbSize) {
+    const maxScroll = content - viewport
+    const maxThumb = track - thumbSize
+
+    if (maxScroll <= 0 || maxThumb <= 0) return 0
+
+    return this.clamp(scroll, 0, maxScroll) * (maxThumb / maxScroll)
+  }
+
+  sizes(axis, bar) {
+    const viewport = this.viewportTarget
+    const horizontal = axis === "horizontal"
+
+    return {
+      viewport: horizontal ? viewport.clientWidth : viewport.clientHeight,
+      content: horizontal ? viewport.scrollWidth : viewport.scrollHeight,
+      scroll: horizontal ? viewport.scrollLeft : viewport.scrollTop,
+      // The track is the bar minus its own padding, which is where the 1px of
+      // `p-px` goes.
+      track: this.trackSize(bar, horizontal)
+    }
+  }
+
+  trackSize(bar, horizontal) {
+    const style = window.getComputedStyle(bar)
+    const padding = horizontal
+      ? parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)
+      : parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
+
+    return (horizontal ? bar.clientWidth : bar.clientHeight) - (padding || 0)
+  }
+
+  overflows(axis) {
+    const { viewport, content } = this.sizes(axis, this.scrollbarFor(axis) || this.element)
+
+    return content - viewport > 1
+  }
+
+  // The two bars stop short of each other by exactly the other's thickness, and
+  // the corner fills what is left. Published as custom properties because that
+  // is where the bars' inline `bottom` and `right` already look.
+  renderCorner() {
+    if (!this.hasCornerTarget) return
+
+    const horizontal = this.scrollbarFor("horizontal")
+    const vertical = this.scrollbarFor("vertical")
+
+    this.element.style.setProperty(
+      "--radix-scroll-area-corner-width", `${vertical ? vertical.offsetWidth : 0}px`
+    )
+    this.element.style.setProperty(
+      "--radix-scroll-area-corner-height", `${horizontal ? horizontal.offsetHeight : 0}px`
+    )
+  }
+
+  // ------------------------------------------------------------------ drag
+
+  // On the bar rather than the thumb, so a press on the track jumps there —
+  // which is what a native scrollbar does and what Radix's
+  // `getScrollPositionFromPointer` computes (:1069).
+  startDrag(event) {
+    if (event.button !== 0) return
+
+    const bar = event.currentTarget
+    const axis = this.axisOf(bar)
+    const thumb = bar.querySelector("[data-slot=scroll-area-thumb]")
+
+    event.preventDefault()
+    bar.setPointerCapture(event.pointerId)
+
+    const thumbRect = thumb.getBoundingClientRect()
+    const pointer = axis === "horizontal" ? event.clientX : event.clientY
+    const thumbStart = axis === "horizontal" ? thumbRect.left : thumbRect.top
+    const thumbLength = axis === "horizontal" ? thumbRect.width : thumbRect.height
+    const inside = pointer >= thumbStart && pointer <= thumbStart + thumbLength
+
+    // Grabbing the thumb keeps the point you took hold of under the pointer;
+    // pressing the track centres it on the press instead.
+    this.dragging = { bar, axis, grip: inside ? pointer - thumbStart : thumbLength / 2 }
+
+    this.onMove = (moveEvent) => this.drag(moveEvent)
+    this.onUp = () => this.endDrag()
+    bar.addEventListener("pointermove", this.onMove)
+    bar.addEventListener("pointerup", this.onUp)
+
+    this.drag(event)
+  }
+
+  drag(event) {
+    if (!this.dragging) return
+
+    const { bar, axis, grip } = this.dragging
+    const horizontal = axis === "horizontal"
+    const sizes = this.sizes(axis, bar)
+    const thumbSize = this.thumbSize(sizes)
+    const rect = bar.getBoundingClientRect()
+    const pointer = (horizontal ? event.clientX - rect.left : event.clientY - rect.top) - grip
+    const maxThumb = sizes.track - thumbSize
+    const maxScroll = sizes.content - sizes.viewport
+
+    if (maxThumb <= 0 || maxScroll <= 0) return
+
+    const scroll = this.clamp(pointer, 0, maxThumb) * (maxScroll / maxThumb)
+
+    if (horizontal) this.viewportTarget.scrollLeft = scroll
+    else this.viewportTarget.scrollTop = scroll
+  }
+
+  endDrag() {
+    if (!this.dragging) return
+
+    const { bar } = this.dragging
+    bar.removeEventListener("pointermove", this.onMove)
+    bar.removeEventListener("pointerup", this.onUp)
+    this.dragging = null
+  }
+
+  // ----------------------------------------------------------------- helpers
+
+  axisOf(bar) {
+    return bar.dataset.orientation === "horizontal" ? "horizontal" : "vertical"
+  }
+
+  scrollbarFor(axis) {
+    return this.scrollbarTargets.find((bar) => this.axisOf(bar) === axis)
+  }
+
+  clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max)
+  }
+}