stimulus-components 1.0.0

data/app/javascript/reveal-controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Reveal extends Controller {
+  declare hasHiddenClass: boolean
+  declare hiddenClass: string
+  declare itemTargets: HTMLElement[]
+  declare class: string
+
+  static targets = ["item"]
+  static classes = ["hidden"]
+
+  connect(): void {
+    this.class = this.hasHiddenClass ? this.hiddenClass : "hidden"
+  }
+
+  toggle(): void {
+    this.itemTargets.forEach((item) => {
+      item.classList.toggle(this.class)
+    })
+  }
+
+  show(): void {
+    this.itemTargets.forEach((item) => {
+      item.classList.remove(this.class)
+    })
+  }
+
+  hide(): void {
+    this.itemTargets.forEach((item) => {
+      item.classList.add(this.class)
+    })
+  }
+}

data/app/javascript/scroll-progress.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ScrollProgress extends Controller<HTMLElement> {
+  declare readonly throttleDelayValue: number
+
+  static values = {
+    throttleDelay: {
+      type: Number,
+      default: 15,
+    },
+  }
+
+  initialize(): void {
+    this.scroll = this.scroll.bind(this)
+  }
+
+  connect(): void {
+    window.addEventListener("scroll", this.scroll, { passive: true })
+    this.scroll()
+  }
+
+  disconnect(): void {
+    window.removeEventListener("scroll", this.scroll)
+  }
+
+  scroll(): void {
+    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight
+    const width = (window.scrollY / height) * 100
+
+    this.element.style.width = `${width}%`
+  }
+}

data/app/javascript/scroll-reveal.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ScrollReveal extends Controller {
+  declare classValue: string
+  declare thresholdValue: number
+  declare rootMarginValue: string
+  declare class: string
+  declare threshold: number
+  declare rootMargin: string
+  declare observer: IntersectionObserver
+  declare readonly itemTargets: HTMLElement[]
+
+  static targets = ["item"]
+  static values = {
+    class: String,
+    threshold: Number,
+    rootMargin: String,
+  }
+
+  initialize(): void {
+    this.intersectionObserverCallback = this.intersectionObserverCallback.bind(this)
+  }
+
+  connect(): void {
+    this.class = this.classValue || this.defaultOptions.class || "in"
+    this.threshold = this.thresholdValue || this.defaultOptions.threshold || 0.1
+    this.rootMargin = this.rootMarginValue || this.defaultOptions.rootMargin || "0px"
+
+    this.observer = new IntersectionObserver(this.intersectionObserverCallback, this.intersectionObserverOptions)
+    this.itemTargets.forEach((item) => this.observer.observe(item))
+  }
+
+  disconnect(): void {
+    this.itemTargets.forEach((item) => this.observer.unobserve(item))
+  }
+
+  intersectionObserverCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {
+    entries.forEach((entry) => {
+      if (entry.intersectionRatio > this.threshold) {
+        const target = entry.target as HTMLElement
+        target.classList.add(...this.class.split(" "))
+
+        if (target.dataset.delay) {
+          target.style.transitionDelay = target.dataset.delay
+        }
+
+        observer.unobserve(target)
+      }
+    })
+  }
+
+  get intersectionObserverOptions(): IntersectionObserverInit {
+    return {
+      threshold: this.threshold,
+      rootMargin: this.rootMargin,
+    }
+  }
+
+  get defaultOptions(): { class?: string; threshold?: number; rootMargin?: string } {
+    return {}
+  }
+}

data/app/javascript/scroll-to.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ScrollTo extends Controller<HTMLAnchorElement> {
+  declare offsetValue: number
+  declare behaviorValue: ScrollBehavior
+  declare hasOffsetValue: boolean
+
+  static values = {
+    offset: Number,
+    behavior: String,
+  }
+
+  initialize(): void {
+    this.scroll = this.scroll.bind(this)
+  }
+
+  connect(): void {
+    this.element.addEventListener("click", this.scroll)
+  }
+
+  disconnect(): void {
+    this.element.removeEventListener("click", this.scroll)
+  }
+
+  scroll(event: Event): void {
+    event.preventDefault()
+
+    const id = this.element.hash.replace(/^#/, "")
+    const target = document.getElementById(id)
+
+    if (!target) {
+      console.warn(`[@stimulus-components/scroll-to] The element with the id: "${id}" does not exist on the page.`)
+      return
+    }
+
+    const elementPosition = target.getBoundingClientRect().top + window.pageYOffset
+    const offsetPosition = elementPosition - this.offset
+
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: this.behavior,
+    })
+  }
+
+  get offset(): number {
+    if (this.hasOffsetValue) {
+      return this.offsetValue
+    }
+
+    return 10
+  }
+
+  get behavior(): ScrollBehavior {
+    return this.behaviorValue || "smooth"
+  }
+}

data/app/javascript/sortable.js

@@ -0,0 +1,74 @@
+import { Controller } from "@hotwired/stimulus"
+import Sortable from "sortablejs"
+import { FetchRequest, type ResponseKind } from "@rails/request.js"
+
+export default class Sortable extends Controller<HTMLElement> {
+  declare animationValue: number
+  declare resourceNameValue: string
+  declare paramNameValue: string
+  declare responseKindValue: ResponseKind
+  declare sortable: Sortable
+  declare handleValue: string
+  declare methodValue: string
+
+  static values = {
+    resourceName: String,
+    paramName: {
+      type: String,
+      default: "position",
+    },
+    responseKind: {
+      type: String,
+      default: "html",
+    },
+    animation: Number,
+    handle: String,
+    method: {
+      type: String,
+      default: "patch",
+    },
+  }
+
+  initialize() {
+    this.onUpdate = this.onUpdate.bind(this)
+  }
+
+  connect() {
+    this.sortable = new Sortable(this.element, {
+      ...this.defaultOptions,
+      ...this.options,
+    })
+  }
+
+  disconnect() {
+    this.sortable.destroy()
+    this.sortable = undefined
+  }
+
+  async onUpdate({ item, newIndex }) {
+    if (!item.dataset.sortableUpdateUrl) return
+
+    const param = this.resourceNameValue ? `${this.resourceNameValue}[${this.paramNameValue}]` : this.paramNameValue
+
+    const data = new FormData()
+    data.append(param, newIndex + 1)
+
+    const request = new FetchRequest(this.methodValue, item.dataset.sortableUpdateUrl, {
+      body: data,
+      responseKind: this.responseKindValue,
+    })
+    return await request.perform()
+  }
+
+  get options(): Sortable.Options {
+    return {
+      animation: this.animationValue || this.defaultOptions.animation || 150,
+      handle: this.handleValue || this.defaultOptions.handle || undefined,
+      onUpdate: this.onUpdate,
+    }
+  }
+
+  get defaultOptions(): Sortable.Options {
+    return {}
+  }
+}

data/app/javascript/sound.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Sound extends Controller {
+  declare readonly urlValue: string
+  declare sound: HTMLAudioElement
+
+  static values = {
+    url: String,
+  }
+
+  connect() {
+    this.sound = new Audio(this.urlValue)
+  }
+
+  play() {
+    this.sound.play()
+  }
+
+  pause() {
+    this.sound.pause()
+  }
+
+  reset() {
+    this.sound.pause()
+    this.sound.load()
+  }
+
+  volume({ params }) {
+    this.sound.volume = params.volume
+  }
+
+  muted({ params }) {
+    this.sound.muted = params.muted
+  }
+
+  loop({ params }) {
+    this.sound.loop = params.loop
+  }
+}

data/app/javascript/speech-recognition.js

@@ -0,0 +1,92 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class SpeechRecognitionController extends Controller {
+  declare readonly startButtonTarget: HTMLButtonElement
+  declare readonly stopButtonTarget: HTMLButtonElement
+  declare readonly inputTarget: HTMLTextAreaElement | HTMLInputElement
+  declare readonly indicatorTarget: HTMLElement
+  declare readonly hasIndicatorTarget: boolean
+  declare readonly hiddenClass: string
+  declare readonly hasHiddenClass: boolean
+
+  static targets = ["startButton", "stopButton", "indicator", "input"]
+  static classes = ["hidden"]
+
+  private recognition: SpeechRecognition | null = null
+  private isListening = false
+  private hiddenClassName!: string
+
+  connect(): void {
+    this.hiddenClassName = this.hasHiddenClass ? this.hiddenClass : "hidden"
+
+    if (!this.isSupported) {
+      this.startButtonTarget.classList.add(this.hiddenClassName)
+      this.stopButtonTarget.classList.add(this.hiddenClassName)
+      if (this.hasIndicatorTarget) this.indicatorTarget.classList.add(this.hiddenClassName)
+      return
+    }
+
+    this.setupRecognition()
+    this.updateUI()
+  }
+
+  disconnect(): void {
+    this.recognition?.abort()
+    this.recognition = null
+  }
+
+  start(): void {
+    if (!this.recognition || this.isListening) return
+
+    this.recognition.start()
+    this.isListening = true
+    this.updateUI()
+  }
+
+  stop(): void {
+    if (!this.recognition || !this.isListening) return
+
+    this.recognition.stop()
+    this.isListening = false
+    this.updateUI()
+  }
+
+  private get isSupported(): boolean {
+    return "SpeechRecognition" in window || "webkitSpeechRecognition" in window
+  }
+
+  private setupRecognition(): void {
+    const SpeechRecognitionAPI = window.SpeechRecognition ?? window.webkitSpeechRecognition
+    this.recognition = new SpeechRecognitionAPI()
+    this.recognition.continuous = true
+    this.recognition.interimResults = true
+
+    this.recognition.onresult = (event): void => {
+      this.inputTarget.value = Array.from(event.results)
+        .map((result) => result[0].transcript)
+        .join("")
+    }
+
+    this.recognition.onend = (): void => {
+      if (this.isListening) {
+        this.isListening = false
+        this.updateUI()
+      }
+    }
+
+    this.recognition.onerror = (event): void => {
+      console.error("Speech recognition error:", event.error)
+      this.isListening = false
+      this.updateUI()
+    }
+  }
+
+  private updateUI(): void {
+    this.startButtonTarget.classList.toggle(this.hiddenClassName, this.isListening)
+    this.stopButtonTarget.classList.toggle(this.hiddenClassName, !this.isListening)
+
+    if (this.hasIndicatorTarget) {
+      this.indicatorTarget.classList.toggle(this.hiddenClassName, !this.isListening)
+    }
+  }
+}

data/app/javascript/stimulus-components.js

@@ -0,0 +1,71 @@
+import { Application } from "@hotwired/stimulus"
+
+import AnimatedNumberController from "./stimulus-components/animated-number"
+import AutoSubmitController from "./stimulus-components/auto-submit"
+import CarouselController from "./stimulus-components/carousel"
+import CharacterCounterController from "./stimulus-components/character-counter"
+import ChartjsController from "./stimulus-components/chartjs"
+import CheckboxSelectAllController from "./stimulus-components/checkbox-select-all"
+import ClipboardController from "./stimulus-components/clipboard"
+import ColorPickerController from "./stimulus-components/color-picker"
+import ConfirmationController from "./stimulus-components/confirmation"
+import ContentLoaderController from "./stimulus-components/content-loader"
+import DialogController from "./stimulus-components/dialog"
+import DropdownController from "./stimulus-components/dropdown"
+import GlowController from "./stimulus-components/glow"
+import HotkeyController from "./stimulus-components/hotkey"
+import LightboxController from "./stimulus-components/lightbox"
+import NotificationController from "./stimulus-components/notification"
+import PasswordVisibilityController from "./stimulus-components/password-visibility"
+import PlacesAutocompleteController from "./stimulus-components/places-autocomplete"
+import PopoverController from "./stimulus-components/popover"
+import PrefetchController from "./stimulus-components/prefetch"
+import RailsNestedFormController from "./stimulus-components/rails-nested-form"
+import ReadMoreController from "./stimulus-components/read-more"
+import RemoteRailsController from "./stimulus-components/remote-rails"
+import RevealController from "./stimulus-components/reveal-controller"
+import ScrollProgressController from "./stimulus-components/scroll-progress"
+import ScrollRevealController from "./stimulus-components/scroll-reveal"
+import ScrollToController from "./stimulus-components/scroll-to"
+import SortableController from "./stimulus-components/sortable"
+import SoundController from "./stimulus-components/sound"
+import SpeechRecognitionController from "./stimulus-components/speech-recognition"
+import TextareaAutogrowController from "./stimulus-components/textarea-autogrow"
+import TimeagoController from "./stimulus-components/timeago"
+
+const application = Application.start()
+
+application.register("animated-number", AnimatedNumberController)
+application.register("auto-submit", AutoSubmitController)
+application.register("carousel", CarouselController)
+application.register("character-counter", CharacterCounterController)
+application.register("chartjs", ChartjsController)
+application.register("checkbox-select-all", CheckboxSelectAllController)
+application.register("clipboard", ClipboardController)
+application.register("color-picker", ColorPickerController)
+application.register("confirmation", ConfirmationController)
+application.register("content-loader", ContentLoaderController)
+application.register("dialog", DialogController)
+application.register("dropdown", DropdownController)
+application.register("glow", GlowController)
+application.register("hotkey", HotkeyController)
+application.register("lightbox", LightboxController)
+application.register("notification", NotificationController)
+application.register("password-visibility", PasswordVisibilityController)
+application.register("places-autocomplete", PlacesAutocompleteController)
+application.register("popover", PopoverController)
+application.register("prefetch", PrefetchController)
+application.register("rails-nested-form", RailsNestedFormController)
+application.register("read-more", ReadMoreController)
+application.register("remote-rails", RemoteRailsController)
+application.register("reveal", RevealController)
+application.register("scroll-progress", ScrollProgressController)
+application.register("scroll-reveal", ScrollRevealController)
+application.register("scroll-to", ScrollToController)
+application.register("sortable", SortableController)
+application.register("sound", SoundController)
+application.register("speech-recognition", SpeechRecognitionController)
+application.register("textarea-autogrow", TextareaAutogrowController)
+application.register("timeago", TimeagoController)
+
+export { application }

data/app/javascript/textarea-autogrow.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+
+function debounce(callback: Function, delay: number) {
+  let timeout: number
+  return (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => callback.apply(this, args), delay)
+  }
+}
+
+export default class TextareaAutogrow extends Controller<HTMLInputElement> {
+  declare onResize: EventListenerOrEventListenerObject
+  declare resizeDebounceDelayValue: number
+
+  static values = {
+    resizeDebounceDelay: {
+      type: Number,
+      default: 100,
+    },
+  }
+
+  initialize(): void {
+    this.autogrow = this.autogrow.bind(this)
+  }
+
+  connect(): void {
+    this.element.style.overflow = "hidden"
+    const delay = this.resizeDebounceDelayValue
+
+    this.onResize = delay > 0 ? debounce(this.autogrow, delay) : this.autogrow
+
+    this.autogrow()
+    this.element.addEventListener("input", this.autogrow)
+    window.addEventListener("resize", this.onResize)
+  }
+
+  disconnect(): void {
+    window.removeEventListener("resize", this.onResize)
+  }
+
+  autogrow(): void {
+    this.element.style.height = "auto"
+    this.element.style.height = `${this.element.scrollHeight}px`
+  }
+}

data/app/javascript/timeago.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+import { formatDistanceToNow } from "date-fns"
+
+export default class Timeago extends Controller<HTMLTimeElement> {
+  declare isValid: boolean
+  declare refreshTimer: number
+  declare hasRefreshIntervalValue: boolean
+  declare datetimeValue: string
+  declare addSuffixValue: boolean
+  declare includeSecondsValue: boolean
+  declare refreshIntervalValue: number
+
+  static values = {
+    datetime: String,
+    refreshInterval: Number,
+    includeSeconds: Boolean,
+    addSuffix: Boolean,
+  }
+
+  initialize(): void {
+    this.isValid = true
+  }
+
+  connect(): void {
+    this.load()
+
+    if (this.hasRefreshIntervalValue && this.isValid) {
+      this.startRefreshing()
+    }
+  }
+
+  disconnect(): void {
+    this.stopRefreshing()
+  }
+
+  load(): void {
+    const datetime = this.datetimeValue
+    const date = Date.parse(datetime)
+    const options = {
+      includeSeconds: this.includeSecondsValue,
+      addSuffix: this.addSuffixValue,
+    }
+
+    if (Number.isNaN(date)) {
+      this.isValid = false
+      console.error(
+        `[@stimulus-components/timeago] Value given in 'data-timeago-datetime' is not a valid date (${datetime}).`
+      )
+    }
+
+    this.element.dateTime = datetime
+    this.element.innerHTML = this.isValid ? formatDistanceToNow(date, options) : datetime
+  }
+
+  startRefreshing(): void {
+    this.refreshTimer = setInterval(() => {
+      this.load()
+    }, this.refreshIntervalValue)
+  }
+
+  stopRefreshing(): void {
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer)
+    }
+  }
+}

data/lib/stimulus-components/engine.rb

@@ -0,0 +1,9 @@
+module StimulusComponents
+  class Engine < ::Rails::Engine
+    isolate_namespace StimulusComponents
+
+    initializer 'stimulus-components.assets' do |app|
+      app.config.assets.paths << root.join('app/javascript')
+    end
+  end
+end

data/lib/stimulus-components/version.rb

@@ -0,0 +1,3 @@
+module StimulusComponents
+  VERSION = '1.0.0'
+end

data/lib/stimulus-components.rb

@@ -0,0 +1,43 @@
+require 'stimulus-components/version'
+require 'stimulus-components/engine'
+
+module StimulusComponents
+  COMPONENTS = %w[
+    animated-number
+    auto-submit
+    carousel
+    character-counter
+    chartjs
+    checkbox-select-all
+    clipboard
+    color-picker
+    confirmation
+    content-loader
+    dialog
+    dropdown
+    glow
+    hotkey
+    lightbox
+    notification
+    password-visibility
+    places-autocomplete
+    popover
+    prefetch
+    rails-nested-form
+    read-more
+    remote-rails
+    reveal-controller
+    scroll-progress
+    scroll-reveal
+    scroll-to
+    sortable
+    sound
+    speech-recognition
+    textarea-autogrow
+    timeago
+  ].freeze
+
+  def self.components
+    COMPONENTS
+  end
+end