add bs-stepper to rails

_stepper_form.html.erb

<div class="mb-5 p-4 bg-white shadow-sm">
  <h3>Non linear stepper</h3>
  <div id="stepper" class="bs-stepper">
    <div class="bs-stepper-header" role="tablist">
      <div class="step" data-target="#test-nl-1">
        <button type="button" class="step-trigger" role="tab" id="steppertrigger1" aria-controls="test-nl-1">
          <span class="bs-stepper-circle">
            <span class="fas fa-user" aria-hidden="true"></span>
          </span>
          <span class="bs-stepper-label">Name</span>
        </button>
      </div>
      <div class="bs-stepper-line"></div>
      <div class="step" data-target="#test-nl-2">
        <button type="button" class="step-trigger" role="tab" id="steppertrigger2" aria-controls="test-nl-2">
          <span class="bs-stepper-circle">
            <span class="fas fa-map-marked" aria-hidden="true"></span>
          </span>
          <span class="bs-stepper-label">Address</span>
        </button>
      </div>
      <div class="bs-stepper-line"></div>
      <div class="step" data-target="#test-nl-3">
        <button type="button" class="step-trigger" role="tab" id="steppertrigger3" aria-controls="test-nl-3">
          <span class="bs-stepper-circle">
            <span class="fas fa-save" aria-hidden="true"></span>
          </span>
          <span class="bs-stepper-label">Submit</span>
        </button>
      </div>
    </div>
    <div class="bs-stepper-content">
      <form onSubmit="return false">
        <div id="test-nl-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="steppertrigger1">
          <div class="form-group">
            <label for="exampleInputName1">Name</label>
            <input type="email" class="form-control" id="exampleInputName1" placeholder="Enter your name">
          </div>
          <button class="btn btn-primary" onclick="window.stepper.next()">Next</button>
        </div>
        <div id="test-nl-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="steppertrigger2">
          <div class="form-group">
            <label for="exampleInpuAddress1">Address</label>
            <input type="email" class="form-control" id="exampleInpuAddress1" placeholder="Enter your address">
          </div>
          <button class="btn btn-primary" onclick="window.stepper.next()">Next</button>
        </div>
        <div id="test-nl-3" role="tabpanel" class="bs-stepper-pane text-center" aria-labelledby="steppertrigger3">
          <button type="submit" class="btn btn-primary mt-5">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import "../stylesheets/application"
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "bootstrap"
import "admin-lte"
import "@fortawesome/fontawesome-free/js/all"


$(document).on('turbolinks:load', function () {
  $('[data-toggle="tooltip"]').tooltip()
  if (document.querySelector(".bs-stepper") != null) {
    window.stepper = new Stepper(document.querySelector('.bs-stepper')
  }
})

Rails.start()
Turbolinks.start()
ActiveStorage.start()

environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'],
    Stepper: "bs-stepper",
  })
)

module.exports = environment