Bootstrap v5

# frozen_string_literal: true
def yarn(lib)
  run("yarn add #{lib}")
end

run("yarn install")
generate(:controller, 'bootstrap', 'index')

yarn 'bootstrap@next'
yarn '@popperjs/core'

inject_into_file 'app/views/layouts/application.html.erb', after: "<%= csp_meta_tag %>\n" do <<-EOF
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  EOF
end

file 'app/javascript/stylesheets/application.scss' do <<~EOF
@import "bootstrap"
  EOF
end

append_to_file 'app/javascript/packs/application.js' do <<~EOF
import * as bootstrap from 'bootstrap'
import "../stylesheets/application"
  EOF
end

inject_into_file 'app/views/bootstrap/index.html.erb', after: "<p>Find me in app/views/bootstrap/index.html.erb</p>\n" do <<~EOF
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
EOF
end

say "all done. start your server and navigate to http://localhost:3000/bootstrap/index to test that it's working"