leastbad

import { Controller } from "stimulus"
import SlimSelect from "slim-select"
import "slim-select/dist/slimselect.min.css"
import "../style/slimselect-customized.css"

export default class extends Controller {
  connect() {
    const limit = this.data.get("limit")
    const placeholder = this.data.get("placeholder")
    const searchText = this.data.get("no-results")

leastbad

<div class="card">
  <div class="card-header">
    <h3 class="card-title">
      <%= notification.to_notification.in_app_subject %>
    </h3>
  </div>
  <div class="card-body">
    <%= notification.to_notification.in_app_body %>
  </div>
</div>

leastbad

class UsersReflex < ApplicationReflex
  def search(name)
    users = User.where("name LIKE :prefix", prefix: "#{name}%")
    result = users.map { |user| { text: user.name, value: user.id }}
    cable_ready.dispatch_event(name: "data", detail: {options: result}).broadcast
    morph :nothing
  end
end

leastbad

# frozen_string_literal: true

class Users::RegistrationsController < Devise::RegistrationsController
  include Optimism

  before_action :configure_permitted_parameters

  def create
    build_resource(sign_up_params)
    resource.save

leastbad

<div class="col-12 mb-4" data-controller="rows">
  <%# these would usually be created by rendering a collection of partials: %>
  <div id="row_1">
    <form> <%# note that form is just a container %>
      <input type="text" name="rows[first]" /> <%# note that I used the Rails models[attribute] form %>
      <input type="text" name="rows[last]" />
      <button data-reflex="click->Rows#update" data-id="1">Update</button> <%# click event For The Win %>
      <button data-reflex="click->Rows#delete" data-id="1">Delete</button>
    </form>
  </div>

leastbad

import { Controller } from 'stimulus'
import Cleave from 'cleave.js'
import 'cleave.js/dist/addons/cleave-phone.us'

export default class extends Controller {
  static values = { options: Object, digits: Number }

  connect () {
    this.cleave = new Cleave(this.element, this.optionsValue)
    if (this.hasDigitsValue) {

leastbad

class ApplicationController < ActionController::Base
  include CableReady::Broadcaster
  include Toastable
end

leastbad

Using Stimulus v2, FontAwesome 5, Bootstrap 5, and Mapbox

You can grab a copy of marker.svg here - put it in your /public folder.

leastbad

My goal with this was to wrap the terrible YouTube Embed API in a Stimulus controller that would allow me to access the underlying API while providing some convenience methods. One key outcome is that the controller emits youtube events which contain the current position in the video. This means that other code can now respond to the position you are at in the video.

<div data-controller="youtube" data-youtube-code-value="Lo_1pyQ7xvc">
  <button data-action="youtube#play">Play</button>
  <button data-action="youtube#pause">Pause</button>
  <button data-action="youtube#stop">Stop</button>
  <br>
  <div data-youtube-target="frame"></div>

leastbad

import CableReady from 'cable_ready'
import { dispatch } from 'cable_ready/javascript/utils'

CableReady.DOMOperations.removeSubelement = operation => {
    const { element, subElement } = operation
    dispatch(element, 'cable-ready:before-remove-subelement', operation)
    element.contentDocument.querySelector(subElement).remove()
    dispatch(element, 'cable-ready:after-remove-subelement', operation)
}