3dealer/resources/js/stimulus/star-rating-controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
    static targets = ['star', 'input']
    static values  = { rating: { type: Number, default: 0 } }

    hover(event) {
        this.#fill(parseInt(event.currentTarget.dataset.value))
    }

    leave() {
        this.#fill(this.ratingValue)
    }

    select(event) {
        const val = parseInt(event.currentTarget.dataset.value)
        this.ratingValue = val
        this.inputTarget.value = val

        this.starTargets.forEach(star => {
            star.setAttribute('aria-pressed', String(parseInt(star.dataset.value) === val))
        })
    }

    #fill(upTo) {
        this.starTargets.forEach(star => {
            const filled = parseInt(star.dataset.value) <= upTo
            star.querySelector('svg').setAttribute('fill', filled ? 'currentColor' : 'none')
        })
    }
}