391: Use importmaps and hotwire (#395)

391: Implement hotwire and importmaps

.gitignore

@@ -38,3 +38,5 @@ coverage/
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+public/assets/

.prettierignore

@@ -0,0 +1 @@
+*.scss

Gemfile

@@ -7,11 +7,11 @@ gem 'pg', '~> 1.1'
 gem 'sass-rails'
 gem 'uglifier', '>= 1.3.0'
 
-gem 'jquery-rails'
-gem 'jquery-ui-rails'
+gem 'hotwire-rails'
+gem 'importmap-rails'
 gem 'jbuilder', '~> 2.0'
-gem 'sdoc', '~> 0.4.0', group: :doc
-gem 'devise'
+gem 'sdoc', '~> 2.6.1', group: :doc
+gem 'devise', '~> 4.9.3'
 gem 'figaro'
 gem 'friendly_id'
 gem 'httparty'
@@ -22,6 +22,8 @@ gem 'stamp'
 gem 'sentry-ruby'
 gem 'sentry-rails'
 gem 'sprockets-rails'
+gem 'stimulus-rails'
+gem 'turbo-rails'
 
 # Use ActiveStorage variant
 # gem 'mini_magick', '~> 4.8'
@@ -53,3 +55,6 @@ group :test do
     gem 'vcr'
     gem 'webmock'
 end
+
+# Use Redis for Action Cable
+gem "redis", "~> 4.0"

Gemfile.lock

@@ -141,25 +141,26 @@ GEM
     globalid (1.2.1)
       activesupport (>= 6.1)
     hashdiff (1.0.1)
+    hotwire-rails (0.1.3)
+      rails (>= 6.0.0)
+      stimulus-rails
+      turbo-rails
     httparty (0.21.0)
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
+    importmap-rails (1.2.3)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
     io-console (0.6.0)
     irb (1.10.1)
       rdoc
       reline (>= 0.3.8)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
-    jquery-rails (4.6.0)
-      rails-dom-testing (>= 1, < 3)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
-    jquery-ui-rails (6.0.1)
-      railties (>= 3.2.16)
-    json (1.8.6)
     launchy (2.5.2)
       addressable (~> 2.8)
     letter_opener (1.8.1)
@@ -193,6 +194,8 @@ GEM
     nokogiri (1.15.5)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
+    nokogiri (1.15.5-aarch64-linux)
+      racc (~> 1.4)
     nokogiri (1.15.5-arm64-darwin)
       racc (~> 1.4)
     nokogiri (1.15.5-x86_64-darwin)
@@ -208,6 +211,8 @@ GEM
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
+    psych (5.1.1.1)
+      stringio
     public_suffix (5.0.3)
     puma (6.4.0)
       nio4r (~> 2.0)
@@ -267,7 +272,9 @@ GEM
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.1.0)
-    rdoc (4.3.0)
+    rdoc (6.6.1)
+      psych (>= 4.0.0)
+    redis (4.8.1)
     regexp_parser (2.8.2)
     reline (0.4.1)
       io-console (~> 0.5)
@@ -321,9 +328,8 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
-    sdoc (0.4.2)
-      json (~> 1.7, >= 1.7.7)
-      rdoc (~> 4.0)
+    sdoc (2.6.1)
+      rdoc (>= 5.0)
     selenium-webdriver (4.9.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -343,9 +349,16 @@ GEM
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     stamp (0.6.0)
+    stimulus-rails (1.3.0)
+      railties (>= 6.0.0)
+    stringio (3.1.0)
     thor (1.3.0)
     tilt (2.3.0)
     timeout (0.4.1)
+    turbo-rails (1.5.0)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uglifier (4.2.0)
@@ -373,6 +386,7 @@ GEM
     zeitwerk (2.6.12)
 
 PLATFORMS
+  aarch64-linux
   arm64-darwin-21
   ruby
   x86_64-darwin-21
@@ -385,15 +399,15 @@ DEPENDENCIES
   capybara
   capybara-email
   database_cleaner
-  devise
+  devise (~> 4.9.3)
   factory_bot_rails
   ffaker
   figaro
   friendly_id
+  hotwire-rails
   httparty
+  importmap-rails
   jbuilder (~> 2.0)
-  jquery-rails
-  jquery-ui-rails
   launchy
   letter_opener
   pg (~> 1.1)
@@ -404,15 +418,18 @@ DEPENDENCIES
   rails-controller-testing
   rails-erd
   rails_12factor
+  redis (~> 4.0)
   rspec-rails (~> 6.1.0)
   rubocop-rspec
   sass-rails
-  sdoc (~> 0.4.0)
+  sdoc (~> 2.6.1)
   sentry-rails
   sentry-ruby
   shoulda-matchers
   sprockets-rails
   stamp
+  stimulus-rails
+  turbo-rails
   uglifier (>= 1.3.0)
   vcr
   webdrivers

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
 //= link_tree ../images
-//= link_directory ../javascripts .js
 //= link_directory ../stylesheets .css
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js

app/assets/stylesheets/application.css

@@ -12,7 +12,6 @@
  *
  *= require_tree .
  *= require_self
- *= require jquery-ui
  *= buttons
  *= forms
  *= layouts

app/assets/stylesheets/buttons.scss

@@ -116,7 +116,7 @@ button.close {
 
 /* MOVIE SHOW PAGE SIDEBAR */
 .sidebar-button {
-  a {
+  a, button {
     width: 100%;
     display: block;
     color: $light-gray;
@@ -136,4 +136,17 @@ button.close {
       text-decoration: none;
     }
   } /* a */
+}
+
+.sidebar-button button {
+  background: none;
+}
+
+div.sidebar-button {
+  margin: 10px 0;
 } /* .sidebar-button */
+
+input[type='submit']:disabled {
+  background: grey;
+  cursor: not-allowed;
+}

app/assets/stylesheets/forms.scss

@@ -120,6 +120,21 @@ input[type="submit"] {
   width: auto;
 } /* .pages-form-submit */
 
+// SMALL X TO DELETE TAGS OR LISTS THAT NEED TO BE BUTTON_TO
+form.small-x {
+  display: inline-block;
+  & button {
+    background: none;
+    border: none;
+    color: $light-blue;
+    padding: 0;
+  }
+}
+
+form#tag-form-modal,
+form#new_listing {
+  margin-top: 10px;
+}
 
 @media screen and (max-width: 600px) {
 
@@ -129,5 +144,3 @@ input[type="submit"] {
   } /* .search-form */
 
 } /* 600px */
-
-

app/assets/stylesheets/layouts.scss

@@ -16,3 +16,20 @@
   width: 250px;
   margin-left: 40px;
 }
+
+// SIGN OUT LINK NEEDS TO BE A BUTTON_TO. STYLES MATCH BOOTSTRAP
+.navbar #sign_out_nav_link {
+  background: none;
+  border: none;
+  padding: 3px 20px;
+}
+
+@media (max-width: 767px) {
+  .navbar #sign_out_nav_link {
+    color: #999;
+    padding: 5px 15px 5px 25px;
+  }
+  .navbar #sign_out_nav_link:hover {
+    color: white;
+  }
+}

app/assets/stylesheets/movies.scss

@@ -65,6 +65,15 @@ article.tile-cover-pic {
    background-color: $primary-background-color;
 } /* .modal-dialog */
 
+#modal-trigger {
+  margin: 0;
+}
+
+button.modal-linker {
+  padding: 0;
+  border: 0;
+}
+
 .modal {
   img {
     border: 1px solid #000;