shadcn_view_components 0.2.0

data/app/assets/javascripts/shadcn/aria_relationships.js

@@ -0,0 +1,88 @@
+const GENERATED_ID_ATTRIBUTE = "data-shadcn-generated-id"
+const GENERATED_ROOT_ID_ATTRIBUTE = "data-shadcn-generated-root-id"
+
+/** @param {string} id @param {Element} element */
+function idBelongsToAnotherElement(id, element) {
+  return [...document.querySelectorAll("[id]")].some((candidate) => candidate !== element && candidate.id === id)
+}
+
+/** @param {string} base @param {Element} element */
+function uniqueId(base, element) {
+  let candidate = base
+  let suffix = 2
+  while (idBelongsToAnotherElement(candidate, element)) candidate = `${base}-${suffix++}`
+  return candidate
+}
+
+function randomSuffix() {
+  if (typeof window.crypto?.randomUUID === "function") return window.crypto.randomUUID()
+
+  const values = new Uint32Array(4)
+  window.crypto.getRandomValues(values)
+  return [...values].map((value) => value.toString(16).padStart(8, "0")).join("")
+}
+
+/**
+ * SSRで生成したroot IDを返す。fragment cache由来の同一IDがdocument内で
+ * 重複した場合だけ、自動生成IDを現在のroot専用に差し替える。
+ * 利用者指定IDは重複していても変更しない。
+ *
+ * @param {HTMLElement} root
+ * @param {string} prefix
+ */
+export function ensureRootId(root, prefix) {
+  const generated = root.getAttribute(GENERATED_ROOT_ID_ATTRIBUTE) === "true"
+  if (!root.id || (generated && idBelongsToAnotherElement(root.id, root))) {
+    root.id = uniqueId(`shadcn-${prefix}-${randomSuffix()}`, root)
+    root.setAttribute(GENERATED_ROOT_ID_ATTRIBUTE, "true")
+  }
+  return root.id
+}
+
+/**
+ * 利用者指定IDを保ち、IDが無い要素だけroot由来の候補で補う。
+ * 自動生成済みの要素はroot再採番時に追従させる。
+ *
+ * @param {HTMLElement} element
+ * @param {string} candidate
+ */
+export function ensureId(element, candidate) {
+  const generated = element.getAttribute(GENERATED_ID_ATTRIBUTE) === "true"
+  if (element.id && !generated) return element.id
+
+  element.id = uniqueId(candidate, element)
+  element.setAttribute(GENERATED_ID_ATTRIBUTE, "true")
+  return element.id
+}
+
+/**
+ * 同名Stimulus controllerの入れ子を親controllerの探索結果から除外する。
+ *
+ * @param {HTMLElement} root
+ * @param {string} selector
+ * @param {string} identifier
+ * @returns {HTMLElement[]}
+ */
+export function ownedElements(root, selector, identifier) {
+  return /** @type {HTMLElement[]} */ (
+    [...root.querySelectorAll(selector)].filter(
+      (element) => element.closest(`[data-controller~='${identifier}']`) === root,
+    )
+  )
+}
+
+/**
+ * 利用者指定属性を保ち、未指定または以前このhelperが補った属性だけを更新する。
+ * root IDがキャッシュ重複対策で変わった場合も、生成した参照だけが追従する。
+ *
+ * @param {Element} element
+ * @param {string} name
+ * @param {string} value
+ */
+export function setDefaultAttribute(element, name, value) {
+  const marker = `data-shadcn-generated-${name}`
+  if (element.hasAttribute(name) && element.getAttribute(marker) !== "true") return
+
+  element.setAttribute(name, value)
+  element.setAttribute(marker, "true")
+}

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

@@ -0,0 +1,241 @@
+import { Controller } from "@hotwired/stimulus"
+
+import {
+  ensureId,
+  ensureRootId,
+  setDefaultAttribute,
+} from "@supermomonga/shadcn-view-components/aria_relationships"
+import { hideAfterExit } from "@supermomonga/shadcn-view-components/hide_after_exit"
+
+const IDENTIFIER = "shadcn--accordion"
+const ITEM_SELECTOR = "details[data-slot='accordion-item']"
+const TRIGGER_SELECTOR = ":scope > summary[data-slot='accordion-trigger']"
+const CONTENT_SELECTOR = ":scope > [data-slot='accordion-content']"
+
+// ネイティブ <details> の開閉を契約クラスのアニメーションと同期する。
+// 契約の accordion-content は data-[state=open]:animate-accordion-down /
+// data-[state=closed]:animate-accordion-up(tw-animate-css がキーフレームを提供、
+// 高さは --radix-accordion-content-height を参照)を持つため:
+//
+// - summary クリックは既定の即時開閉を preventDefault で止める
+// - 開く: 高さ変数を設定してから details を開き data-state=open を同期する
+//   (アニメーションが高さ0 → 測定高さで走る)
+// - 閉じる: data-state=closed を先に切り替え、accordion-up の終了を待ってから
+//   details を閉じる(即時閉じるとコンテンツが一瞬で消えるため)
+// - 排他(name 属性グループ)は開く際に他の開いている Item を閉じる
+// - reduced-motion 設定時とJS無効時はアニメーション無しの即時開閉になる
+/** @extends {Controller<HTMLElement>} */
+export default class AccordionController extends Controller {
+  /** @type {boolean} */
+  active = false
+
+  /** @type {Map<HTMLDetailsElement, () => void>} */
+  pendingCloses = new Map()
+
+  /** @type {(event: MouseEvent) => void} */
+  onClick = (event) => this.handleClick(event)
+
+  /** @type {(event: Event) => void} */
+  onToggle = (event) => this.handleToggle(event)
+
+  connect() {
+    // Item にもcontrollerを付与するが、Accordion ルート内では親の一元管理に委ねる。
+    // これによりイベントの二重処理を避けつつ、standalone Itemも同じ振る舞いを持つ。
+    this.active = !this.root.matches(ITEM_SELECTOR) || this.managerRootFor(this.root) === null
+    if (!this.active) return
+
+    ensureRootId(this.root, "accordion")
+    this.element.addEventListener("click", this.onClick, true)
+    // toggle はrootのcapture listenerで受ける。非bubbling eventでもcapture phaseは
+    // ancestorを通るため、接続後に追加されたitemのプログラマティックな開閉にも追従できる。
+    this.element.addEventListener("toggle", this.onToggle, true)
+    for (const [index, item] of this.items().entries()) {
+      this.ensureRelationships(item, index)
+      this.syncState(item, item.open ? "open" : "closed")
+    }
+  }
+
+  disconnect() {
+    if (!this.active) return
+
+    this.element.removeEventListener("click", this.onClick, true)
+    this.element.removeEventListener("toggle", this.onToggle, true)
+    // Turbo cache等で退出アニメーション中に切断されても、listener/timerを残さず
+    // ユーザーが確定させた閉状態をDOMへ反映してから破棄する。
+    for (const [item, cancel] of this.pendingCloses) {
+      cancel()
+      item.open = false
+      item.style.removeProperty("--radix-accordion-content-height")
+      this.syncState(item, "closed")
+    }
+    this.pendingCloses.clear()
+    this.active = false
+  }
+
+  // キャプチャフェーズで一元処理する(data-action との二重発火防止 — 他コントローラと同じ)
+  /** @param {MouseEvent} event */
+  handleClick(event) {
+    const summary = event.target instanceof Element ? event.target.closest("summary[data-slot='accordion-trigger']") : null
+    if (!summary || !this.element.contains(summary)) return
+
+    const item = /** @type {HTMLDetailsElement | null} */ (
+      summary.closest("details[data-slot='accordion-item']")
+    )
+    if (!item || !this.items().includes(item)) return
+
+    event.preventDefault()
+    this.ensureRelationships(item, this.items().indexOf(item))
+    if (item.open) {
+      this.close(item)
+    } else {
+      for (const other of this.items()) {
+        if (other !== item && other.open && this.sameGroup(other, item)) this.close(other)
+      }
+      this.open(item)
+    }
+  }
+
+  /** @param {Event} event */
+  handleToggle(event) {
+    if (!(event.target instanceof Element)) return
+    if (!event.target.matches(ITEM_SELECTOR) || !this.element.contains(event.target)) return
+
+    const item = /** @type {HTMLDetailsElement} */ (event.target)
+    const index = this.items().indexOf(item)
+    if (index < 0) return
+
+    this.ensureRelationships(item, index)
+    if (item.open) this.cancelClose(item)
+    this.syncState(item, item.open ? "open" : "closed")
+  }
+
+  /** @param {HTMLDetailsElement} item */
+  open(item) {
+    this.cancelClose(item)
+    const content = this.contentOf(item)
+    if (content && !this.reducedMotion) {
+      item.style.setProperty("--radix-accordion-content-height", `${content.scrollHeight}px`)
+    }
+    item.open = true
+    this.syncState(item, "open")
+  }
+
+  /** @param {HTMLDetailsElement} item */
+  close(item) {
+    this.cancelClose(item)
+    const content = this.contentOf(item)
+    if (!content || this.reducedMotion) {
+      item.open = false
+      item.style.removeProperty("--radix-accordion-content-height")
+      this.syncState(item, "closed")
+      return
+    }
+
+    this.syncState(item, "closed")
+    const cancel = hideAfterExit(content, () => {
+      this.pendingCloses.delete(item)
+      item.open = false
+      item.style.removeProperty("--radix-accordion-content-height")
+    }, "accordion-up")
+    this.pendingCloses.set(item, cancel)
+  }
+
+  /** @param {HTMLDetailsElement} item */
+  cancelClose(item) {
+    const cancel = this.pendingCloses.get(item)
+    if (!cancel) return
+    cancel()
+    this.pendingCloses.delete(item)
+  }
+
+  // base-nova の契約クラスは data-open / data-closed(属性の存在)を参照する
+  // (data-open:animate-accordion-down 等)。Trigger には aria-expanded も同期する
+  // (アイコン切替は group-aria-expanded で行う)
+  /**
+   * @param {HTMLDetailsElement} item
+   * @param {"open" | "closed"} state
+   */
+  syncState(item, state) {
+    item.toggleAttribute("data-open", state === "open")
+    item.toggleAttribute("data-closed", state !== "open")
+    const trigger = item.querySelector(TRIGGER_SELECTOR)
+    if (trigger) trigger.setAttribute("aria-expanded", String(state === "open"))
+    const content = this.contentOf(item)
+    if (content) {
+      content.toggleAttribute("data-open", state === "open")
+      content.toggleAttribute("data-closed", state !== "open")
+    }
+  }
+
+  /** @returns {HTMLDetailsElement[]} */
+  items() {
+    if (this.root.matches(ITEM_SELECTOR)) return [/** @type {HTMLDetailsElement} */ (this.root)]
+
+    return /** @type {HTMLDetailsElement[]} */ (
+      Array.from(this.element.querySelectorAll(ITEM_SELECTOR))
+        .filter((item) => this.managerRootFor(item) === this.root)
+    )
+  }
+
+  /**
+   * @param {HTMLDetailsElement} item
+   * @returns {HTMLElement | null}
+   */
+  contentOf(item) {
+    return /** @type {HTMLElement | null} */ (
+      item.querySelector(CONTENT_SELECTOR)
+    )
+  }
+
+  /**
+   * @param {HTMLDetailsElement} item
+   * @param {number} index
+   */
+  ensureRelationships(item, index) {
+    ensureRootId(this.root, "accordion")
+    const itemId = ensureRootId(item, `accordion-item-${index + 1}`)
+    const trigger = /** @type {HTMLElement | null} */ (item.querySelector(TRIGGER_SELECTOR))
+    const content = this.contentOf(item)
+    if (!trigger || !content) return
+
+    const triggerId = ensureId(trigger, `${itemId}-trigger`)
+    const contentId = ensureId(content, `${itemId}-content`)
+    setDefaultAttribute(trigger, "aria-controls", contentId)
+    if (!content.hasAttribute("aria-label")) setDefaultAttribute(content, "aria-labelledby", triggerId)
+    setDefaultAttribute(content, "role", "region")
+  }
+
+  /**
+   * Itemを管理する最も近いAccordionルートを返す。Item自身のcontrollerは飛ばす。
+   * @param {Element} item
+   * @returns {HTMLElement | null}
+   */
+  managerRootFor(item) {
+    let candidate = /** @type {HTMLElement | null} */ (
+      item.parentElement?.closest(`[data-controller~='${IDENTIFIER}']`) || null
+    )
+    while (candidate?.matches(ITEM_SELECTOR)) {
+      candidate = /** @type {HTMLElement | null} */ (
+        candidate.parentElement?.closest(`[data-controller~='${IDENTIFIER}']`) || null
+      )
+    }
+    return candidate
+  }
+
+  /**
+   * @param {HTMLDetailsElement} a
+   * @param {HTMLDetailsElement} b
+   */
+  sameGroup(a, b) {
+    return a.getAttribute("name") !== null && a.getAttribute("name") === b.getAttribute("name")
+  }
+
+  get reducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  }
+
+  /** @returns {HTMLElement} */
+  get root() {
+    return /** @type {HTMLElement} */ (this.element)
+  }
+}

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

@@ -0,0 +1,98 @@
+import { Controller } from "@hotwired/stimulus"
+
+import {
+  ensureId,
+  ensureRootId,
+  ownedElements,
+} from "@supermomonga/shadcn-view-components/aria_relationships"
+
+const CONTROLLER = "shadcn--calendar"
+const DAY_SELECTOR = "[data-slot='calendar-day-button']"
+
+// サーバ描画済みの同一月grid内でroving tabindexを管理する。
+// 月をまたぐ移動はURL/I18n/選択APIと一体で設計する必要があるため、このcontrollerは
+// 現在表示されている42日分の範囲を越えてフォーカスを移動しない。
+/** @extends {Controller<HTMLElement>} */
+export default class CalendarController extends Controller {
+  connect() {
+    this.ensureRelationships()
+    this.normalizeTabStop()
+  }
+
+  /** @param {KeyboardEvent} event */
+  navigate(event) {
+    const target = event.target instanceof Element ? event.target.closest(DAY_SELECTOR) : null
+    if (!(target instanceof HTMLElement) || !this.days.includes(target)) return
+
+    const keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]
+    if (!keys.includes(event.key)) return
+    event.preventDefault()
+
+    let destination
+    if (event.key === "Home" || event.key === "End") {
+      const row = target.closest("tr")
+      const rowDays = row ? this.days.filter((day) => row.contains(day)) : []
+      destination = event.key === "Home" ? rowDays[0] : rowDays.at(-1)
+    } else {
+      let offset = 0
+      if (event.key === "ArrowLeft") offset = -1
+      else if (event.key === "ArrowRight") offset = 1
+      else if (event.key === "ArrowUp") offset = -7
+      else if (event.key === "ArrowDown") offset = 7
+      const index = this.days.indexOf(target) + offset
+      destination = this.days[index]
+    }
+
+    if (destination) this.focusDay(destination)
+  }
+
+  ensureRelationships() {
+    const rootId = ensureRootId(this.element, "calendar")
+    const caption = this.caption
+    const grid = this.grid
+    if (!caption || !grid) return
+
+    const previousCaptionId = caption.id
+    ensureId(caption, `${rootId}-caption`)
+    ensureId(grid, `${rootId}-grid`)
+    if (!grid.hasAttribute("aria-labelledby") || grid.getAttribute("aria-labelledby") === previousCaptionId) {
+      grid.setAttribute("aria-labelledby", caption.id)
+    }
+  }
+
+  normalizeTabStop() {
+    const days = this.days
+    if (days.length === 0) return
+
+    const current = days.filter((day) => day.tabIndex === 0)
+    const selected = days.find((day) => day.closest("[role='gridcell']")?.getAttribute("aria-selected") === "true")
+    const today = days.find((day) => day.getAttribute("aria-current") === "date")
+    this.setTabStop(current.length === 1 ? current[0] : selected || today || days[0])
+  }
+
+  /** @param {HTMLElement} day */
+  focusDay(day) {
+    this.setTabStop(day)
+    day.focus()
+  }
+
+  /** @param {HTMLElement} active */
+  setTabStop(active) {
+    for (const day of this.days) day.tabIndex = day === active ? 0 : -1
+  }
+
+  /** @returns {HTMLElement[]} */
+  get days() {
+    return ownedElements(this.element, DAY_SELECTOR, CONTROLLER)
+  }
+
+  /** @returns {HTMLElement | null} */
+  get caption() {
+    return ownedElements(this.element, "[data-slot='calendar-caption']", CONTROLLER)[0] ?? null
+  }
+
+  /** @returns {HTMLElement | null} */
+  get grid() {
+    return ownedElements(this.element, "[data-slot='calendar-grid']", CONTROLLER)[0] ?? null
+  }
+}