shadcn_view_components 0.2.0

data/app/assets/javascripts/shadcn/controllers/tabs_controller.js

@@ -0,0 +1,146 @@
+import { Controller } from "@hotwired/stimulus"
+
+import {
+  ensureId,
+  ensureRootId,
+  ownedElements,
+  setDefaultAttribute,
+} from "@supermomonga/shadcn-view-components/aria_relationships"
+
+const IDENTIFIER = "shadcn--tabs"
+
+// ARIA tabs パターン(05-stimulus-hotwire §4)。
+// - クリック / Enter / Space で選択
+// - 左右(縦布局は上下)矢印で roving tabindex による移動
+// - 選択状態は data-active(属性の存在)、パネル表示は hidden 属性で表現する
+/** @extends {Controller<HTMLElement>} */
+export default class TabsController extends Controller {
+  connect() {
+    this.ensureRelationships()
+    const triggers = this.triggers
+    if (triggers.length === 0) return
+    // サーバ側で active 指定があればそれを、無ければ先頭を採用してパネル表示を同期する
+    const active = triggers.find((trigger) => trigger.hasAttribute("data-active")) || triggers[0]
+    this.activate(active)
+  }
+
+  /** @param {Event} event */
+  select(event) {
+    const selected = /** @type {HTMLElement} */ (event.currentTarget)
+    if (this.triggers.includes(selected)) this.activate(selected)
+  }
+
+  /** @param {KeyboardEvent} event */
+  navigate(event) {
+    const keys = this.vertical ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"]
+    if (![...keys, "Home", "End"].includes(event.key)) return
+    event.preventDefault()
+
+    const triggers = this.triggers
+    const current = triggers.indexOf(/** @type {HTMLElement} */ (event.currentTarget))
+    if (current < 0) return
+
+    let next
+    if (event.key === "Home") {
+      next = triggers[0]
+    } else if (event.key === "End") {
+      next = triggers[triggers.length - 1]
+    } else {
+      const offset = event.key === keys[1] ? 1 : -1
+      next = triggers[(current + offset + triggers.length) % triggers.length]
+    }
+    next.focus()
+    this.activate(next)
+  }
+
+  /** @param {HTMLElement} selected */
+  activate(selected) {
+    if (!this.triggers.includes(selected)) return
+
+    for (const trigger of this.allTriggers) {
+      const active = trigger === selected
+      trigger.toggleAttribute("data-active", active)
+      trigger.setAttribute("aria-selected", String(active))
+      trigger.tabIndex = active ? 0 : -1
+    }
+
+    const value = selected.dataset.value
+    for (const panel of this.panels) {
+      panel.hidden = panel.dataset.value !== value
+    }
+  }
+
+  ensureRelationships() {
+    const rootId = ensureRootId(this.root, "tabs")
+    this.validateRelationships()
+
+    for (const [index, trigger] of this.allTriggers.entries()) {
+      const panel = this.panels.find((candidate) => candidate.dataset.value === trigger.dataset.value)
+      if (!panel) continue
+
+      const triggerId = ensureId(trigger, `${rootId}-trigger-${index + 1}`)
+      const panelId = ensureId(panel, `${rootId}-panel-${index + 1}`)
+      setDefaultAttribute(trigger, "aria-controls", panelId)
+      setDefaultAttribute(panel, "aria-labelledby", triggerId)
+      setDefaultAttribute(panel, "tabindex", "0")
+    }
+
+    for (const list of this.lists) {
+      setDefaultAttribute(list, "aria-orientation", this.vertical ? "vertical" : "horizontal")
+    }
+  }
+
+  validateRelationships() {
+    const triggerCounts = this.valueCounts(this.allTriggers)
+    const panelCounts = this.valueCounts(this.panels)
+    const values = new Set([...triggerCounts.keys(), ...panelCounts.keys()])
+
+    for (const value of values) {
+      if (value === "" || triggerCounts.get(value) !== 1 || panelCounts.get(value) !== 1) {
+        throw new Error(`Tabs value ${JSON.stringify(value)} must identify exactly one trigger and one panel`)
+      }
+    }
+  }
+
+  /** @param {HTMLElement[]} elements @returns {Map<string, number>} */
+  valueCounts(elements) {
+    const counts = new Map()
+    for (const element of elements) {
+      const value = element.dataset.value || ""
+      counts.set(value, (counts.get(value) || 0) + 1)
+    }
+    return counts
+  }
+
+  /** @returns {HTMLElement[]} */
+  get triggers() {
+    return this.allTriggers.filter(
+      (trigger) => !trigger.hasAttribute("disabled") && trigger.getAttribute("aria-disabled") !== "true",
+    )
+  }
+
+  /** @returns {HTMLElement[]} */
+  get allTriggers() {
+    return ownedElements(this.root, "[data-slot='tabs-trigger'][role='tab']", IDENTIFIER)
+  }
+
+  /** @returns {HTMLElement[]} */
+  get panels() {
+    return ownedElements(this.root, "[data-slot='tabs-content'][role='tabpanel']", IDENTIFIER)
+  }
+
+  /** @returns {HTMLElement[]} */
+  get lists() {
+    return ownedElements(this.root, "[data-slot='tabs-list'][role='tablist']", IDENTIFIER)
+  }
+
+  /** @returns {boolean} */
+  get vertical() {
+    return this.element.dataset.orientation === "vertical"
+  }
+
+  /** @returns {HTMLElement} */
+  get root() {
+    return /** @type {HTMLElement} */ (this.element)
+  }
+}

data/app/assets/javascripts/shadcn/controllers/toast_controller.js

@@ -0,0 +1,81 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * @typedef {object} ToastDetail
+ * @property {string=} title
+ * @property {string=} description
+ * @property {number=} duration
+ */
+
+// 通知領域(sonner相当)。shadcn:toast CustomEvent でトーストを追加する:
+//   dispatchEvent(new CustomEvent("shadcn:toast", { detail: { title, description } }))
+export default class ToastController extends Controller {
+  /** @type {Map<HTMLElement, ReturnType<typeof setTimeout>>} */
+  timers = new Map()
+
+  /** @type {Set<HTMLElement>} */
+  toasts = new Set()
+
+  /** @type {(event: Event) => void} */
+  onToast = (event) => {
+    if (!("detail" in event)) return
+    const customEvent = /** @type {CustomEvent<ToastDetail>} */ (event)
+    this.push(customEvent.detail ?? {})
+  }
+
+  connect() {
+    window.addEventListener("shadcn:toast", this.onToast)
+  }
+
+  disconnect() {
+    window.removeEventListener("shadcn:toast", this.onToast)
+    for (const toast of [...this.toasts]) this.removeToast(toast)
+  }
+
+  /** @param {ToastDetail} detail */
+  push({ title, description, duration = 4000 }) {
+    const toast = document.createElement("article")
+    toast.className = "rounded-md border bg-background px-4 py-3 text-sm shadow-lg"
+    toast.setAttribute("role", "status")
+    if (title) {
+      const heading = document.createElement("div")
+      heading.className = "font-medium"
+      heading.textContent = title
+      toast.appendChild(heading)
+    }
+    if (description) {
+      const body = document.createElement("div")
+      body.className = "text-muted-foreground"
+      body.textContent = description
+      toast.appendChild(body)
+    }
+    this.root.appendChild(toast)
+    this.toasts.add(toast)
+    if (duration > 0) {
+      const timer = setTimeout(() => this.removeToast(toast), duration)
+      this.timers.set(toast, timer)
+    }
+  }
+
+  /** @param {Event} event */
+  dismiss(event) {
+    if (!(event.currentTarget instanceof Element)) return
+
+    const toast = event.currentTarget.closest("article")
+    if (toast) this.removeToast(/** @type {HTMLElement} */ (toast))
+  }
+
+  /** @param {HTMLElement} toast */
+  removeToast(toast) {
+    const timer = this.timers.get(toast)
+    if (timer !== undefined) clearTimeout(timer)
+    this.timers.delete(toast)
+    this.toasts.delete(toast)
+    toast.remove()
+  }
+
+  /** @returns {HTMLElement} */
+  get root() {
+    return /** @type {HTMLElement} */ (this.element)
+  }
+}

data/app/assets/javascripts/shadcn/controllers/toggle_controller.js

@@ -0,0 +1,21 @@
+// shadcn--toggle: toggle の開閉状態(on/off)を data-state / aria-pressed で管理する。
+// 状態はDOM自身に持たせ、destroy時の後始末は不要(05-stimulus-hotwire §2.3)。
+// Stimulus本体はホストのものをimportmap等で解決する(本gemはバンドルしない)
+import { Controller } from "@hotwired/stimulus"
+
+/** @extends {Controller<HTMLElement>} */
+export default class ToggleController extends Controller {
+  connect() {
+    this.element.setAttribute("aria-pressed", this.isOn ? "true" : "false")
+  }
+
+  toggle() {
+    this.element.dataset.state = this.isOn ? "off" : "on"
+    this.element.setAttribute("aria-pressed", String(this.isOn))
+  }
+
+  /** @returns {boolean} */
+  get isOn() {
+    return this.element.dataset.state === "on"
+  }
+}

data/app/assets/javascripts/shadcn/controllers/toggle_group_controller.js

@@ -0,0 +1,37 @@
+// shadcn--toggle-group: グループ内の item(data-slot="toggle-group-item")の開閉を管理する。
+// type: single では常に1つのみ on(排他)。multiple では独立してトグルする。
+// 状態はDOM自身(data-type / data-state)に持たせる(05-stimulus-hotwire §2.3)
+import { Controller } from "@hotwired/stimulus"
+
+/** @extends {Controller<HTMLElement>} */
+export default class ToggleGroupController extends Controller {
+  /** @param {Event} event */
+  toggleItem(event) {
+    const item = /** @type {HTMLElement} */ (event.currentTarget)
+    const isOn = item.dataset.state === "on"
+
+    if (this.isSingle && !isOn) {
+      this.items.forEach((element) => this.setState(element, false))
+    }
+    this.setState(item, !isOn)
+  }
+
+  /** @returns {boolean} */
+  get isSingle() {
+    return this.element.dataset.type === "single"
+  }
+
+  /** @returns {NodeListOf<HTMLElement>} */
+  get items() {
+    return this.element.querySelectorAll("[data-slot='toggle-group-item']")
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {boolean} on
+   */
+  setState(element, on) {
+    element.dataset.state = on ? "on" : "off"
+    element.setAttribute("aria-pressed", String(on))
+  }
+}

data/app/assets/javascripts/shadcn/controllers/tooltip_controller.js

@@ -0,0 +1,123 @@
+import { Controller } from "@hotwired/stimulus"
+
+import { startFloatingPosition } from "@supermomonga/shadcn-view-components/floating_position"
+import { hideAfterExit } from "@supermomonga/shadcn-view-components/hide_after_exit"
+import { applyStateAttrs } from "@supermomonga/shadcn-view-components/state_attrs"
+
+const noop = () => {}
+
+// ツールチップの遅延制御(既定 delayDuration=0 — upstream と同じ)。
+// aria-describedby で trigger と内容を結合する(05 §4)。
+// 閉じる際は退出アニメーション(data-[state=closed]:animate-out)を待ってから
+// hidden 属性を付ける(即時 hidden にするとアニメーションが見えない)
+export default class TooltipController extends Controller {
+  /** @type {HTMLElement | null} */
+  content = null
+
+  /** @type {HTMLElement | null} */
+  trigger = null
+
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
+  showTimer
+
+  /** @type {() => void} */
+  cancelExit = noop
+
+  /** @type {{ update: () => void, destroy: () => void } | null} */
+  positioning = null
+
+  connect() {
+    this.cancelPendingWork()
+    this.stopPositioning()
+    this.content = this.element.querySelector("[data-slot='tooltip-content']")
+    this.trigger = this.element.querySelector("[data-slot='tooltip-trigger']")
+    if (this.content?.id && this.trigger) this.trigger.setAttribute("aria-describedby", this.content.id)
+  }
+
+  disconnect() {
+    const content = this.content
+    const finishExit = content?.dataset.state === "closed" && !content.hidden
+    this.cancelPendingWork()
+    this.stopPositioning()
+    if (finishExit) content.hidden = true
+    this.content = null
+    this.trigger = null
+  }
+
+  show() {
+    this.cancelPendingExit()
+    if (!this.content || this.content.dataset.state === "open") return
+
+    this.clearShowTimer()
+    const content = this.content
+    this.showTimer = setTimeout(() => {
+      this.showTimer = undefined
+      if (this.content === content) this.setState("open")
+    }, 0)
+  }
+
+  hide() {
+    this.clearShowTimer()
+    const content = this.content
+    if (!content || content.hidden || content.dataset.state === "closed") return
+
+    this.cancelPendingExit()
+    content.dataset.state = "closed"
+    applyStateAttrs(content, "closed")
+    this.cancelExit = hideAfterExit(content, () => {
+      if (this.content !== content || content.dataset.state === "open") return
+      this.stopPositioning()
+      content.hidden = true
+    })
+  }
+
+  /** @param {"open" | "closed"} state */
+  setState(state) {
+    const content = this.content
+    if (!content) return
+    if (state === "open") this.cancelPendingExit()
+
+    content.dataset.state = state
+    applyStateAttrs(content, state)
+    content.hidden = state === "closed"
+    if (state === "open") this.startPositioning()
+    else this.stopPositioning()
+  }
+
+  startPositioning() {
+    const content = this.content
+    const trigger = this.trigger
+    if (!content || !trigger) return
+
+    this.stopPositioning()
+    this.positioning = startFloatingPosition({
+      align: "center",
+      anchor: trigger,
+      collisionPadding: 5,
+      floating: content,
+      side: "top",
+      sideOffset: 4,
+    })
+  }
+
+  stopPositioning() {
+    this.positioning?.destroy()
+    this.positioning = null
+  }
+
+  clearShowTimer() {
+    if (this.showTimer === undefined) return
+    clearTimeout(this.showTimer)
+    this.showTimer = undefined
+  }
+
+  cancelPendingExit() {
+    this.cancelExit()
+    this.cancelExit = noop
+  }
+
+  cancelPendingWork() {
+    this.clearShowTimer()
+    this.cancelPendingExit()
+  }
+}