Setting up Rails 8, Propshaft, ESBuild, Stimulus, and Tom-Select

README.md

Tools

• ruby 3.x
• rails 8.x
• propshaft
• esbuild
• bootstrap 5.x
• tom-select.js
• simple_form

Objective

Use the Rails asset pipeline, configured with propshaft, esbuild, and stimulus to utilize a drop-down select input with the TomSelect library

Notes

• You don't have to use the simple_form library to create your form. The "raw erb" version of a tom-select input is referenced in the _form_other.html.erb file.

Credits

• GitHub Copilot helped a bit

_form.html.erb

# app/views/users/_form.html.erb

<%= simple_form_for(instance, local: true) do |f| %>
  <% unless instance.new_record? %>
    <%= f.input :id, readonly: true, wrapper: :floating_label_form %>
  <% end %>
  <%= f.input :name
  <%= f.input :color,
      as: :tom_select,
      collection: ['red', 'white', 'blue'],
      label: 'Favorite Color',
      prompt: 'Select...',
      autocomplete: 'off',
      multiple: false,
      wrapper: :tom_select_label_outset %>
  <%= f.input :notes, as: :text %>
  <%= f.input :numbers,
      as: :tom_select,
      collection: [1, 2, 3, 4],
      label: 'Favorite Numbers',
      prompt: 'Select roles...',
      autocomplete: 'off',
      multiple: true,
      wrapper: :tom_select_label_inset %>
  <%= f.input :submit %>
<% end %>

_form_other.html.erb

# app/views/users/_form.html.erb
# This approach skips the simple_form gem

<%= form_with(url: user_path, @instance), method: :put do |f| %>
  <div class="form-floating">
    <input type="text" class="form-control" id="name" name="name" value="<%= @instance.name %>">
    <label for="name" class="form-label">Name</label>
  </div>
  <% # label outset version %>
  <div class="form-group" data-controller="tom-select">
    <label for="language_id" class="form-label">Language</label>
    <%= select_tag(:language_id, options_for_select(Language.options_for_select, @instance.language_id), { multiple: false, prompt: "Select a language...", autocomplete: "off", class: "tom-select", data: { tom_select_target: 'tomselect' }) %>
  </div>
  <% # label inset version %>
  <div class="input-group mb-3" data-controller="tom-select">
    <span class="input-group-text" id="basic-addon3">Colors</span>
    <%= select_tag("colors", options_for_select(['red', 'white', 'blue'], @instance.color_ids), { multiple: true, prompt: "Select colors...", autocomplete: "off", class: "tom-select", data: { tom_select_target: 'tomselect' }) %>
  </div>
  <%= f.input :submit %>
<% end %>

app_javascript_controllers_index.js

// app/javascript/controllers/index.js

import { application } from "../../controllers/application"

import TomSelectController from "./tom_select_controller"

// Register the controller with the application instance
application.register("tom-select", TomSelectController)

app_javascript_index.js

// app/javascript/index.js

import "@hotwired/turbo-rails"
import { Application } from "@hotwired/stimulus"

// Initialize Stimulus for admin
const application = Application.start()

// Enable debug mode in development
application.debug = true

window.Stimulus = application

// Import Bootstrap JS
import "bootstrap"

// Import admin-specific controllers
import "./controllers"

application.css

// this assumes you have tom-select referenced in package.json

@use "bootstrap/scss/bootstrap";
@use "bootstrap-icons/font/bootstrap-icons";
@use "tom-select/dist/css/tom-select.bootstrap5";

$bootstrap-icons-font-src: url("bootstrap-icons.woff2") format("woff2"), url("fonts/bootstrap-icons.woff") format("woff") !default;

edit.html.erb

# app/views/users/edit.html.erb

<h1>Edit Page</h1>

<%= render partial: "form", locals: { instance: @instance } %>

package.json

{
  "dependencies": {
    "@hotwired/stimulus": "3.2.2",
    "@hotwired/turbo-rails": "8.0.12",
    "@popperjs/core": "2.11.8",
    "bootstrap": "5.3.3",
    "bootstrap-icons": "1.11.3",
    "esbuild": "0.24.0",
    "sass": "1.83.0",
    "tom-select": "2.4.1"
  },
  "name": "example_app",
  "repository": "[email protected]:wrburgess/example_app.git",
  "scripts": {
    "build": "node esbuild.config.js",
    "build:css": "node node_modules/sass/sass.js ./app/assets/stylesheets/admin.scss:./app/assets/builds/admin.css ./app/assets/stylesheets/public.scss:./app/assets/builds/public.css --no-source-map --load-path=node_modules --style=compressed",
    "watch": "node esbuild.config.js --watch",
    "watch:css": "sass --watch ./app/assets/stylesheets/admin.scss:./app/assets/builds/admin.css ./app/assets/stylesheets/public.scss:./app/assets/builds/public.css --no-source-map --load-path=node_modules"
  },
  "version": "1.0.0",
  "packageManager": "[email protected]"
}

tom_select_controller.js

// app/javascript/controllers/tom_select_controller.js

import { Controller } from '@hotwired/stimulus'
import TomSelect from 'tom-select'

const selectSettings = {
  allowEmptyOption: true,
  plugins: ['remove_button', 'input_autogrow', 'clear_button']
}

export default class extends Controller {
  static targets = ['tomselect']

  connect() {
    this.tomselectTargets.forEach((element) => {
      new TomSelect(element, selectSettings)
    })
  }
}

tom_select_input.rb

# app/inputs/tom_select_input.rb
#
# I have no idea if this is a good location for this file but it works!

class TomSelectInput < SimpleForm::Inputs::Base
  def input(wrapper_options = nil)
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
    autocomplete = options[:autocomplete] || 'off'
    multiple = options[:multiple] || false
    prompt = options[:prompt] || 'Select...'

    @builder.select(
      attribute_name,
      options[:collection],
      { prompt: },
      {
        multiple:,
        autocomplete:,
        class: 'tom-select',
        data: { tom_select_target: 'tomselect' }
      }.merge(merged_input_options)
    )
  end
end