stimulus-components 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a8c412b605bdc72f29a30d0d09516727ba0089c2dbf17aa0b530ed86499f0fd8
+  data.tar.gz: eb6ddc8d35cb27654bc6a2f8bb4308334f0e5a05aa3d659e3b2005da8e5159be
+SHA512:
+  metadata.gz: 22160175d85e4a96474202ec29ddb5e640197299d102d18ca5ecc6e98bf6ce23380aae4f1f3377cea7e01829cd148ba73bb86076786d27d1fc31f78a1f6003ce
+  data.tar.gz: 6aa949ac5cf13530a7adb45faa95e1b3679f85936849fd32303be410a463218ddc1b9fb6f8ce51a9d762d4d01e752746a3148dcfc444cabca52fda000a69e326

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Stimulus Components
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,133 @@
+# Stimulus Components
+
+A Ruby gem that packages the [stimulus-components](https://github.com/stimulus-components/stimulus-components) collection of 34+ Stimulus controllers for easy integration with Rails applications.
+
+## Requirements
+
+- Rails 7.1+
+- Ruby 3.1+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "stimulus-components"
+```
+
+Then run:
+
+```bash
+bundle install
+```
+
+## Usage
+
+### Importmap (Recommended for Rails 7.1+)
+
+Add to your `config/importmap.rb`:
+
+```ruby
+pin "stimulus-components", to: "stimulus-components.js"
+pin "@hotwired/stimulus", to: "https://cdn.jsdelivr.net/gh/hotwired/stimulus@3.2.2/dist/stimulus.umd.js"
+pin "@hotwired/stimulus-loading", to: "https://cdn.jsdelivr.net/gh/hotwired/stimulus-loading@1.0.5/dist/stimulus-loading.umd.js"
+pin "stimulus-use", to: "https://cdn.jsdelivr.net/npm/stimulus-use@1.0.0/dist/index.js"
+```
+
+### Sprockets
+
+Add to your `app/assets/javascripts/application.js`:
+
+```javascript
+//= require stimulus-components
+```
+
+### Application Controller
+
+In your JavaScript entry point (e.g., `app/javascript/controllers/index.js`):
+
+```javascript
+import { application } from "stimulus-components"
+
+window.Stimulus = application
+```
+
+Or import individual controllers:
+
+```javascript
+import ClipboardController from "stimulus-components/clipboard"
+import PasswordVisibilityController from "stimulus-components/password-visibility"
+```
+
+## Available Controllers
+
+| Controller | Description |
+|------------|-------------|
+| `animated-number` | Animates numbers on scroll |
+| `auto-submit` | Auto-submits forms with debounce |
+| `carousel` | Swiper-based carousel |
+| `character-counter` | Counts characters in inputs |
+| `chartjs` | Chart.js integration |
+| `checkbox-select-all` | Select all checkbox functionality |
+| `clipboard` | Copy to clipboard |
+| `color-picker` | Color picker with Pickr |
+| `confirmation` | Form confirmation checks |
+| `content-loader` | Load remote content |
+| `dialog` | Native dialog element |
+| `dropdown` | Dropdown with transitions |
+| `glow` | Hover glow effect |
+| `hotkey` | Keyboard shortcuts |
+| `lightbox` | Image lightbox gallery |
+| `notification` | Toast notifications |
+| `password-visibility` | Toggle password visibility |
+| `places-autocomplete` | Google Places autocomplete |
+| `popover` | Popover content display |
+| `prefetch` | Link prefetching |
+| `rails-nested-form` | Nested form management |
+| `read-more` | Expandable content |
+| `remote-rails` | Remote response handling |
+| `reveal` | Toggle element visibility |
+| `scroll-progress` | Scroll progress bar |
+| `scroll-reveal` | Scroll-based animations |
+| `scroll-to` | Smooth scroll to element |
+| `sortable` | Sortable lists |
+| `sound` | Audio playback |
+| `speech-recognition` | Voice input |
+| `textarea-autogrow` | Auto-growing textarea |
+| `timeago` | Relative timestamps |
+
+## External Dependencies
+
+Some controllers require external libraries. Add these to your `package.json` or via CDN:
+
+```json
+{
+  "dependencies": {
+    "@hotwired/stimulus": "^3.2",
+    "@rails/request.js": "^0.0.8",
+    "chart.js": "^4.0",
+    "lightgallery": "^2.0",
+    "sortablejs": "^1.15",
+    "stimulus-use": "^1.0",
+    "swiper": "^11.0",
+    "@simonwep/pickr": "^1.9",
+    "date-fns": "^3.0"
+  }
+}
+```
+
+## Documentation
+
+For detailed usage instructions, see the [official documentation](https://www.stimulus-components.com/).
+
+## License
+
+MIT License - see LICENSE.txt
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch
+3. Commit your changes
+4. Push to the branch
+5. Create a new Pull Request

data/app/javascript/animated-number.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class AnimatedNumber extends Controller<HTMLElement> {
+  declare lazyThresholdValue: number
+  declare lazyRootMarginValue: string
+  declare startValue: number
+  declare endValue: number
+  declare durationValue: number
+  declare lazyValue: number
+
+  static values = {
+    start: Number,
+    end: Number,
+    duration: Number,
+    lazyThreshold: Number,
+    lazyRootMargin: {
+      type: String,
+      default: "0px",
+    },
+    lazy: Boolean,
+  }
+
+  connect(): void {
+    this.lazyValue ? this.lazyAnimate() : this.animate()
+  }
+
+  animate(): void {
+    let startTimestamp: number = null
+
+    const step = (timestamp: number) => {
+      if (!startTimestamp) startTimestamp = timestamp
+
+      const elapsed: number = timestamp - startTimestamp
+      const progress: number = Math.min(elapsed / this.durationValue, 1)
+
+      this.element.innerHTML = Math.floor(progress * (this.endValue - this.startValue) + this.startValue).toString()
+
+      if (progress < 1) {
+        window.requestAnimationFrame(step)
+      }
+    }
+
+    window.requestAnimationFrame(step)
+  }
+
+  lazyAnimate(): void {
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry: IntersectionObserverEntry) => {
+        if (entry.isIntersecting) {
+          this.animate()
+
+          observer.unobserve(entry.target)
+        }
+      })
+    }, this.lazyAnimateOptions)
+
+    observer.observe(this.element)
+  }
+
+  get lazyAnimateOptions(): IntersectionObserverInit {
+    return {
+      threshold: this.lazyThresholdValue,
+      rootMargin: this.lazyRootMarginValue,
+    }
+  }
+}

data/app/javascript/auto-submit.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+import { debounce } from "stimulus-use"
+
+export default class AutoSubmit extends Controller<HTMLFormElement> {
+  declare delayValue: number
+
+  static values = {
+    delay: {
+      type: Number,
+      default: 150,
+    },
+  }
+
+  initialize(): void {
+    this.submit = this.submit.bind(this)
+  }
+
+  connect(): void {
+    if (this.delayValue > 0) {
+      this.submit = debounce(this.submit, this.delayValue)
+    }
+  }
+
+  submit(): void {
+    this.element.requestSubmit()
+  }
+}

data/app/javascript/carousel.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+import SwiperOptions from "swiper"
+import Swiper from "swiper/bundle"
+
+export default class Carousel extends Controller {
+  declare swiper: Swiper
+  declare optionsValue: SwiperOptions
+
+  static values = {
+    options: Object,
+  }
+
+  connect(): void {
+    this.swiper = new Swiper(this.element, {
+      ...this.defaultOptions,
+      ...this.optionsValue,
+    })
+  }
+
+  disconnect(): void {
+    this.swiper.destroy()
+    this.swiper = undefined
+  }
+
+  get defaultOptions(): SwiperOptions {
+    return {}
+  }
+}

data/app/javascript/character-counter.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class CharacterCounter extends Controller {
+  declare readonly counterTarget: HTMLElement
+  declare readonly inputTarget: HTMLInputElement
+  declare readonly hasCountdownValue: boolean
+
+  static targets = ["input", "counter"]
+  static values = { countdown: Boolean }
+
+  initialize(): void {
+    this.update = this.update.bind(this)
+  }
+
+  connect(): void {
+    this.update()
+    this.inputTarget.addEventListener("input", this.update)
+  }
+
+  disconnect(): void {
+    this.inputTarget.removeEventListener("input", this.update)
+  }
+
+  update(): void {
+    this.counterTarget.innerHTML = this.count.toLocaleString()
+  }
+
+  get count(): number {
+    let value: number = this.inputTarget.value.length
+
+    if (this.hasCountdownValue) {
+      if (this.maxLength < 0) {
+        console.error(
+          `[stimulus-character-counter] You need to add a maxlength attribute on the input to use countdown mode.`
+        )
+      }
+
+      value = Math.max(this.maxLength - value, 0)
+    }
+
+    return value
+  }
+
+  get maxLength(): number {
+    return this.inputTarget.maxLength
+  }
+}

data/app/javascript/chartjs.js

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus"
+import { Chart, registerables, ChartType, ChartOptions, ChartData } from "chart.js"
+
+Chart.register(...registerables)
+
+export default class Chartjs extends Controller<HTMLCanvasElement> {
+  declare canvasTarget: HTMLCanvasElement
+  declare chart: Chart
+  declare typeValue: ChartType
+  declare optionsValue: ChartOptions
+  declare dataValue: ChartData
+  declare hasDataValue: boolean
+  declare hasCanvasTarget: boolean
+
+  static targets = ["canvas"]
+  static values = {
+    type: {
+      type: String,
+      default: "line",
+    },
+    data: Object,
+    options: Object,
+  }
+
+  connect(): void {
+    const element = this.hasCanvasTarget ? this.canvasTarget : this.element
+
+    this.chart = new Chart(element.getContext("2d"), {
+      type: this.typeValue,
+      data: this.chartData,
+      options: this.chartOptions,
+    })
+  }
+
+  disconnect(): void {
+    this.chart.destroy()
+    this.chart = undefined
+  }
+
+  get chartData(): ChartData {
+    if (!this.hasDataValue) {
+      console.warn("[@stimulus-components/chartjs] You need to pass data as JSON to see the chart.")
+    }
+
+    return this.dataValue
+  }
+
+  get chartOptions(): ChartOptions {
+    return {
+      ...this.defaultOptions,
+      ...this.optionsValue,
+    }
+  }
+
+  get defaultOptions(): ChartOptions {
+    return {}
+  }
+}

data/app/javascript/checkbox-select-all.js

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class CheckboxSelectAll extends Controller {
+  declare readonly hasCheckboxAllTarget: boolean
+  declare readonly checkboxTargets: HTMLInputElement[]
+  declare readonly checkboxAllTarget: HTMLInputElement
+  declare readonly disableIndeterminateValue: boolean
+
+  static targets = ["checkboxAll", "checkbox"]
+
+  static values = {
+    disableIndeterminate: {
+      type: Boolean,
+      default: false,
+    },
+  }
+
+  initialize() {
+    this.toggle = this.toggle.bind(this)
+    this.refresh = this.refresh.bind(this)
+  }
+
+  checkboxAllTargetConnected(checkbox: HTMLInputElement): void {
+    checkbox.addEventListener("change", this.toggle)
+    this.refresh()
+  }
+
+  checkboxTargetConnected(checkbox: HTMLInputElement): void {
+    checkbox.addEventListener("change", this.refresh)
+    this.refresh()
+  }
+
+  checkboxAllTargetDisconnected(checkbox: HTMLInputElement): void {
+    checkbox.removeEventListener("change", this.toggle)
+    this.refresh()
+  }
+
+  checkboxTargetDisconnected(checkbox: HTMLInputElement): void {
+    checkbox.removeEventListener("change", this.refresh)
+    this.refresh()
+  }
+
+  toggle(e: Event): void {
+    e.preventDefault()
+
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.checked = e.target.checked
+      this.triggerInputEvent(checkbox)
+    })
+  }
+
+  refresh(): void {
+    const checkboxesCount = this.checkboxTargets.length
+    const checkboxesCheckedCount = this.checked.length
+
+    if (this.disableIndeterminateValue) {
+      this.checkboxAllTarget.checked = checkboxesCheckedCount === checkboxesCount
+    } else {
+      this.checkboxAllTarget.checked = checkboxesCheckedCount > 0
+      this.checkboxAllTarget.indeterminate = checkboxesCheckedCount > 0 && checkboxesCheckedCount < checkboxesCount
+    }
+  }
+
+  triggerInputEvent(checkbox: HTMLInputElement): void {
+    const event = new Event("input", { bubbles: false, cancelable: true })
+    checkbox.dispatchEvent(event)
+  }
+
+  get checked(): HTMLInputElement[] {
+    return this.checkboxTargets.filter((checkbox) => checkbox.checked)
+  }
+
+  get unchecked(): HTMLInputElement[] {
+    return this.checkboxTargets.filter((checkbox) => !checkbox.checked)
+  }
+}

data/app/javascript/clipboard.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Clipboard extends Controller {
+  declare readonly hasButtonTarget: boolean
+  declare originalContent: string
+  declare successDurationValue: number
+  declare successContentValue: string
+  declare timeout: number
+  declare readonly buttonTarget: HTMLElement
+  declare readonly sourceTarget: HTMLInputElement
+
+  static targets = ["button", "source"]
+  static values = {
+    successContent: String,
+    successDuration: {
+      type: Number,
+      default: 2000,
+    },
+  }
+
+  connect(): void {
+    if (!this.hasButtonTarget) return
+
+    this.originalContent = this.buttonTarget.innerHTML
+  }
+
+  copy(event: Event): void {
+    event.preventDefault()
+
+    const text = this.sourceTarget.innerHTML || this.sourceTarget.value
+
+    navigator.clipboard.writeText(text).then(() => this.copied())
+  }
+
+  copied(): void {
+    if (!this.hasButtonTarget) return
+
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    this.buttonTarget.innerHTML = this.successContentValue
+
+    this.timeout = setTimeout(() => {
+      this.buttonTarget.innerHTML = this.originalContent
+    }, this.successDurationValue)
+  }
+}

data/app/javascript/color-picker.js

@@ -0,0 +1,75 @@
+import { Controller } from "@hotwired/stimulus"
+import Pickr from "@simonwep/pickr"
+
+export default class ColorPicker extends Controller<HTMLElement> {
+  declare inputTarget: HTMLInputElement
+  declare buttonTarget: HTMLButtonElement
+  declare themeValue: Pickr.Theme
+  declare picker: Pickr
+
+  static targets = ["button", "input"]
+
+  static values = {
+    theme: {
+      type: String,
+      default: "classic",
+    },
+  }
+
+  initialize() {
+    this.onSave = this.onSave.bind(this)
+  }
+
+  connect() {
+    this.picker = Pickr.create({
+      el: this.buttonTarget,
+      theme: this.themeValue,
+      default: this.inputTarget.value,
+      swatches: this.swatches,
+      components: this.componentOptions,
+    })
+
+    this.picker.on("save", this.onSave)
+  }
+
+  disconnect() {
+    this.picker.destroy()
+  }
+
+  onSave(color: Pickr.HSVaColor) {
+    this.inputTarget.value = null
+
+    if (color) {
+      this.inputTarget.value = color.toHEXA().toString()
+    }
+
+    this.picker.hide()
+  }
+
+  get componentOptions(): object {
+    return {
+      preview: true,
+      hue: true,
+      interaction: {
+        input: true,
+        clear: true,
+        save: true,
+      },
+    }
+  }
+
+  get swatches(): string[] {
+    return [
+      "#A0AEC0",
+      "#F56565",
+      "#ED8936",
+      "#ECC94B",
+      "#48BB78",
+      "#38B2AC",
+      "#4299E1",
+      "#667EEA",
+      "#9F7AEA",
+      "#ED64A6",
+    ]
+  }
+}

data/app/javascript/confirmation.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Confirmation extends Controller<HTMLFormElement> {
+  declare inputTargets: HTMLInputElement[]
+  declare itemTargets: HTMLInputElement[] | HTMLButtonElement[]
+
+  static targets = ["input", "item"]
+
+  check(): void {
+    const disabled = this.inputTargets.some((input) => {
+      if (input.type === "checkbox") {
+        return input.checked === false
+      }
+
+      return input.dataset.confirmationContent !== input.value
+    })
+
+    this.itemTargets.forEach((target) => {
+      target.disabled = disabled
+    })
+  }
+
+  inputTargetConnected(): void {
+    this.check()
+  }
+
+  inputTargetDisconnected(): void {
+    this.check()
+  }
+}