shadcn_view_component 0.3.3

data/app/javascript/shadcn/command_score.js

@@ -0,0 +1,110 @@
+// A port of `cmdk`'s own scorer, vendored at `vendor/cmdk/command-score.ts`
+// (MIT, Paco Coursey) — which in turn is a fork of `command-score` by Fabrice
+// Weinberg.
+//
+// It is here rather than replaced with a substring test because the ranking
+// *is* the component: a palette that lists "Group Policy" above "Groups" for
+// "gp" feels like a palette, and one that filters by `includes` does not. The
+// gem's searchable select does filter by substring, and that is the right
+// answer there — it filters a list a caller already ordered, and shows it in
+// that order.
+//
+// The weights are upstream's, with its own comments kept: they are the file.
+const SCORE_CONTINUE_MATCH = 1
+// A new match at the start of a word scores better than a new match elsewhere.
+const SCORE_SPACE_WORD_JUMP = 0.9
+const SCORE_NON_SPACE_WORD_JUMP = 0.8
+// Any other match isn't ideal, but we include it for completeness.
+const SCORE_CHARACTER_JUMP = 0.17
+// If the user transposed two letters, it should be significantly penalized.
+const SCORE_TRANSPOSITION = 0.1
+// The goodness of a match should decay slightly with each missing character.
+const PENALTY_SKIPPED = 0.999
+// An exact-case match is worth slightly more than a case-insensitive one.
+const PENALTY_CASE_MISMATCH = 0.9999
+// Match higher for letters closer to the beginning of the word.
+const PENALTY_NOT_COMPLETE = 0.99
+
+const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/
+const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g
+const IS_SPACE_REGEXP = /[\s-]/
+const COUNT_SPACE_REGEXP = /[\s-]/g
+
+function commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, stringIndex, abbreviationIndex, memoisedResults) {
+  if (abbreviationIndex === abbreviation.length) {
+    return stringIndex === string.length ? SCORE_CONTINUE_MATCH : PENALTY_NOT_COMPLETE
+  }
+
+  const memoiseKey = `${stringIndex},${abbreviationIndex}`
+  if (memoisedResults[memoiseKey] !== undefined) return memoisedResults[memoiseKey]
+
+  const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex)
+  let index = lowerString.indexOf(abbreviationChar, stringIndex)
+  let highScore = 0
+  let score, transposedScore, wordBreaks, spaceBreaks
+
+  while (index >= 0) {
+    score = commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 1, memoisedResults)
+
+    if (score > highScore) {
+      if (index === stringIndex) {
+        score *= SCORE_CONTINUE_MATCH
+      } else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+        score *= SCORE_NON_SPACE_WORD_JUMP
+        wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP)
+        if (wordBreaks && stringIndex > 0) score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length)
+      } else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+        score *= SCORE_SPACE_WORD_JUMP
+        spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP)
+        if (spaceBreaks && stringIndex > 0) score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length)
+      } else {
+        score *= SCORE_CHARACTER_JUMP
+        if (stringIndex > 0) score *= Math.pow(PENALTY_SKIPPED, index - stringIndex)
+      }
+
+      if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) score *= PENALTY_CASE_MISMATCH
+    }
+
+    if (
+      (score < SCORE_TRANSPOSITION &&
+        lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+      (lowerAbbreviation.charAt(abbreviationIndex + 1) === lowerAbbreviation.charAt(abbreviationIndex) &&
+        lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))
+    ) {
+      transposedScore = commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 2, memoisedResults)
+
+      if (transposedScore * SCORE_TRANSPOSITION > score) {
+        score = transposedScore * SCORE_TRANSPOSITION
+      }
+    }
+
+    if (score > highScore) highScore = score
+
+    index = lowerString.indexOf(abbreviationChar, index + 1)
+  }
+
+  memoisedResults[memoiseKey] = highScore
+
+  return highScore
+}
+
+function formatInput(string) {
+  // Convert all valid space characters to space so they match each other.
+  return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ")
+}
+
+// `keywords` are searched and never shown, which is how "Preferences" is found
+// by typing "settings".
+export function commandScore(string, abbreviation, aliases) {
+  const searchable = aliases && aliases.length ? `${string} ${aliases.join(" ")}` : string
+
+  return commandScoreInner(
+    searchable,
+    abbreviation,
+    formatInput(searchable),
+    formatInput(abbreviation),
+    0,
+    0,
+    {}
+  )
+}

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

@@ -0,0 +1,127 @@
+import { Controller } from "@hotwired/stimulus"
+import { uniqueId } from "shadcn/id"
+import { ExitQueue } from "shadcn/animation"
+
+// Radix's Accordion in `single` and `multiple` modes.
+//
+// `--radix-accordion-content-height` is what the `animate-accordion-down` /
+// `animate-accordion-up` keyframes interpolate to, so it has to be published
+// before the state flips.
+export default class extends Controller {
+  static targets = [ "item", "trigger", "content" ]
+  static values = {
+    type: { type: String, default: "single" },
+    collapsible: Boolean,
+    value: String,
+    disabled: Boolean
+  }
+
+  connect() {
+    this.exits = new ExitQueue()
+    this.render()
+  }
+
+  disconnect() {
+    // Turbo may be detaching the element; a continuation would then be
+    // operating on a subtree that has left the document.
+    this.exits.flushAll()
+  }
+
+  get multiple() {
+    return this.typeValue === "multiple"
+  }
+
+  get openValues() {
+    return this.valueValue ? this.valueValue.split(",").filter(Boolean) : []
+  }
+
+  set openValues(values) {
+    this.valueValue = values.join(",")
+  }
+
+  toggle(event) {
+    const trigger = event.currentTarget
+    const item = trigger.closest("[data-slot='accordion-item']")
+    if (!item || item.dataset.disabled !== undefined || this.disabledValue) return
+
+    const value = item.dataset.value || ""
+    const open = this.openValues
+
+    if (this.multiple) {
+      this.openValues = open.includes(value)
+        ? open.filter((v) => v !== value)
+        : open.concat(value)
+    } else if (open.includes(value)) {
+      this.openValues = this.collapsibleValue ? [] : open
+    } else {
+      this.openValues = [ value ]
+    }
+
+    this.render()
+    this.dispatch("change", { detail: { value: this.valueValue } })
+  }
+
+  keydown(event) {
+    const triggers = this.triggerTargets.filter((t) => !t.disabled)
+    const index = triggers.indexOf(event.currentTarget)
+    if (index === -1) return
+
+    let next = null
+    switch (event.key) {
+      case "ArrowDown": next = triggers[(index + 1) % triggers.length]; break
+      case "ArrowUp": next = triggers[(index - 1 + triggers.length) % triggers.length]; break
+      case "Home": next = triggers[0]; break
+      case "End": next = triggers[triggers.length - 1]; break
+      default: return
+    }
+
+    event.preventDefault()
+    next.focus({ preventScroll: true })
+  }
+
+  render() {
+    const open = this.openValues
+
+    this.itemTargets.forEach((item) => {
+      const isOpen = open.includes(item.dataset.value || "")
+      const state = isOpen ? "open" : "closed"
+      const trigger = item.querySelector("[data-slot='accordion-trigger']")
+      const content = item.querySelector("[data-slot='accordion-content']")
+
+      item.dataset.state = state
+
+      // Radix links trigger and panel by id; do the same once on first render.
+      if (trigger && !trigger.id) trigger.id = uniqueId("shadcn-accordion-trigger")
+      if (content && !content.id) content.id = uniqueId("shadcn-accordion-content")
+
+      if (trigger) {
+        trigger.dataset.state = state
+        trigger.setAttribute("aria-expanded", String(isOpen))
+        if (content) trigger.setAttribute("aria-controls", content.id)
+        const header = trigger.parentElement
+        if (header) header.dataset.state = state
+      }
+
+      if (!content) return
+
+      if (trigger) content.setAttribute("aria-labelledby", trigger.id)
+      content.dataset.state = state
+
+      if (isOpen) {
+        this.exits.cancel(content)
+        content.hidden = false
+        content.style.setProperty(
+          "--radix-accordion-content-height",
+          `${content.scrollHeight}px`
+        )
+      } else if (!content.hidden) {
+        // The height stays published until the collapse lands — it is what
+        // `animate-accordion-up` interpolates towards.
+        this.exits.defer(content, () => {
+          content.hidden = true
+          content.style.removeProperty("--radix-accordion-content-height")
+        })
+      }
+    })
+  }
+}

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

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Radix's Avatar renders the image only once it has loaded and the fallback
+// only until then. Mirrors that with the already-rendered elements.
+export default class extends Controller {
+  static targets = [ "image", "fallback" ]
+
+  connect() {
+    if (!this.hasImageTarget) return
+
+    const image = this.imageTarget
+    if (!image.getAttribute("src")) return this.showFallback()
+
+    if (image.complete) {
+      image.naturalWidth > 0 ? this.showImage() : this.showFallback()
+    } else {
+      this.showFallback()
+      image.addEventListener("load", () => this.showImage(), { once: true })
+      image.addEventListener("error", () => this.showFallback(), { once: true })
+    }
+  }
+
+  showImage() {
+    this.imageTarget.hidden = false
+    if (this.hasFallbackTarget) this.fallbackTarget.hidden = true
+  }
+
+  showFallback() {
+    if (this.hasImageTarget) this.imageTarget.hidden = true
+    if (this.hasFallbackTarget) this.fallbackTarget.hidden = false
+  }
+}