Add webpacker and stimulus

* specify .rubocop.yml

.gitignore

@@ -33,3 +33,10 @@
 .DS_Store
 
 /coverage/
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

.rubocop.yml

@@ -0,0 +1,7 @@
+AllCops:
+  NewCops: enable
+  Exclude:
+    - 'lib/generators/**/*'
+    - 'db/seeds.rb'
+
+require: rubocop-rails

Gemfile

@@ -24,12 +24,6 @@ gem "turbo-rails"
 # Hotwire"s modest JavaScript framework [https://stimulus.hotwired.dev]
 gem "stimulus-rails"
 
-# Build JSON APIs with ease [https://github.com/rails/jbuilder]
-gem "jbuilder"
-
-# Use Redis adapter to run Action Cable in production
-gem "redis", "~> 4.6"
-
 # Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
 # gem "kredis"
 
@@ -59,6 +53,7 @@ gem 'caracal', '>= 1.4.1'
 gem 'carrierwave', '>= 2.2.1'
 gem 'devise', '>= 4.8.0'
 gem 'fog-aws', '>= 3.12.0'
+gem "jbuilder" # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem 'jquery-rails', '>= 4.4.0'
 gem 'jquery-ui-rails', '>= 6.0.1'
 gem 'kaminari', '>= 1.2.2'
@@ -69,15 +64,14 @@ gem 'newrelic_rpm'
 gem 'omniauth-github'
 gem 'omniauth_login_dot_gov', git: 'https://github.com/18F/omniauth_login_dot_gov.git', branch: 'main'
 gem 'rack-cors', '>= 1.1.1', require: 'rack/cors'
+# Use Redis to cache Touchpoints in all envs
+gem "redis", "~> 4.6"
+gem 'redis-namespace'
 gem 'sass-rails', '>= 6.0.0'
 gem 'sidekiq'
 gem 'json-jwt'
-# Use Redis to cache Touchpoints in all envs
-gem 'redis-namespace'
-# Use ActiveModel has_secure_password
-# gem 'bcrypt', '~> 3.1.7'
 gem 'aasm', '~> 5.2.0'
-# gem 'webpacker', '~> 5.0'
+gem 'webpacker', '~> 6.0.0.rc.6'
 gem 'whenever', require: false
 gem 'logstop'
 gem 'paper_trail'

Gemfile.lock

@@ -96,7 +96,7 @@ GEM
     aes_key_wrap (1.1.0)
     ast (2.4.2)
     aws-eventstream (1.2.0)
-    aws-partitions (1.572.0)
+    aws-partitions (1.575.0)
     aws-record (2.7.0)
       aws-sdk-dynamodb (~> 1.18)
     aws-sdk-core (3.130.0)
@@ -130,7 +130,7 @@ GEM
     bindex (0.8.1)
     bootsnap (1.11.1)
       msgpack (~> 1.2)
-    brakeman (5.2.1)
+    brakeman (5.2.2)
     builder (3.2.4)
     bundler-audit (0.9.0.1)
       bundler (>= 1.2.0, < 3)
@@ -255,7 +255,7 @@ GEM
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
     logstop (0.2.8)
-    loofah (2.15.0)
+    loofah (2.16.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -288,9 +288,9 @@ GEM
       digest
       net-protocol
       timeout
-    newrelic_rpm (8.5.0)
+    newrelic_rpm (8.6.0)
     nio4r (2.5.8)
-    nokogiri (1.13.3-x86_64-darwin)
+    nokogiri (1.13.4-x86_64-darwin)
       racc (~> 1.4)
     oauth2 (1.4.9)
       faraday (>= 0.17.3, < 3.0)
@@ -328,6 +328,8 @@ GEM
       rack (>= 2.0.0)
     rack-protection (2.2.0)
       rack
+    rack-proxy (0.7.2)
+      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (7.0.2.3)
@@ -368,7 +370,7 @@ GEM
     redis (4.6.0)
     redis-namespace (1.8.2)
       redis (>= 3.0.4)
-    regexp_parser (2.2.1)
+    regexp_parser (2.3.0)
     request_store (1.5.1)
       rack (>= 1.4)
     responders (3.0.1)
@@ -395,7 +397,7 @@ GEM
     rspec-support (3.11.0)
     rspec_junit_formatter (0.5.1)
       rspec-core (>= 2, < 4, != 2.12.0)
-    rubocop (1.26.1)
+    rubocop (1.27.0)
       parallel (~> 1.10)
       parser (>= 3.1.0.0)
       rainbow (>= 2.2.2, < 4.0)
@@ -404,7 +406,7 @@ GEM
       rubocop-ast (>= 1.16.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.16.0)
+    rubocop-ast (1.17.0)
       parser (>= 3.1.1.0)
     rubocop-rails (2.14.2)
       activesupport (>= 4.2.0)
@@ -430,6 +432,7 @@ GEM
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2)
+    semantic_range (3.0.0)
     sidekiq (6.4.1)
       connection_pool (>= 2.2.2)
       rack (~> 2.0)
@@ -471,6 +474,11 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0)
+    webpacker (6.0.0.rc.6)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -540,6 +548,7 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 4.1.0)
   webdrivers (>= 5.0.0)
+  webpacker (~> 6.0.0.rc.6)
   whenever
 
 RUBY VERSION

app/controllers/site_controller.rb

@@ -19,4 +19,8 @@ def status
       }
     }
   end
+
+  def hello_stimulus
+    render :layout => "stimulus_application"
+  end
 end

app/javascript/controllers/hello_controller.js

@@ -0,0 +1,8 @@
+// src/controllers/hello_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  greet() {
+    console.log("Hello, Stimulus!", this.element)
+  }
+}

app/javascript/controllers/index.js

@@ -0,0 +1,9 @@
+// Load all the controllers within this directory and all subdirectories. 
+// Controller files must be named *_controller.js.
+
+import { Application } from "stimulus"
+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("controllers", true, /_controller\.js$/)
+application.load(definitionsFromContext(context))

app/javascript/packs/application.js

@@ -0,0 +1,20 @@
+/* eslint no-console:0 */
+// 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.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
+console.log('Hello World from Webpacker')
+
+import "controllers"

app/views/layouts/stimulus_application.html.erb

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="<%= locale %>">
+  <head>
+    <title>
+      Touchpoints
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Making customer feedback easier for federal agencies" />
+    <meta name="keywords" content="customer experience, CX, feedback, government, technology, civic-tech" />
+    <meta property="og:title" content="Touchpoints" />
+    <meta property="og:site_name" content="Touchpoints">
+    <meta property="og:description" content="Making customer feedback easier for federal agencies">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://touchpoints.app.cloud.gov/" />
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= favicon_link_tag asset_path('favicon.ico') %>
+    <%= stylesheet_link_tag 'application', media: 'all', integrity: true %>
+    <%= javascript_pack_tag 'application' %>
+    <%= render 'components/analytics/script_header' %>
+  </head>
+  <body>
+    <%= render 'components/analytics/script_body' %>
+    <%= render 'components/header' %>
+    <% unless content_for?(:full_layout) %>
+    <main id="main-content">
+      <div class="grid-container-widescreen">
+        <%= render('components/flash', flash: flash) unless suppress_main_layout_flash? %>
+        <%= yield %>
+      </div>
+    </main>
+    <% else %>
+      <%= render('components/flash', flash: flash) unless suppress_main_layout_flash? %>
+      <%= yield :full_layout %>
+    <% end %>
+    <%= render "components/footer" %>
+    <%= javascript_include_tag 'uswds', integrity: true %>
+  </body>
+</html>

app/views/site/hello_stimulus.html.erb

@@ -0,0 +1,6 @@
+<body>
+  <div data-controller="hello">
+    <input data-hello-target="name" type="text">
+    <button data-action="click->hello#greet">Greet</button>
+  </div>
+</body>

babel.config.js

@@ -53,6 +53,18 @@ module.exports = function(api) {
           useBuiltIns: true
         }
       ],
+      [
+        '@babel/plugin-proposal-private-methods',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-private-property-in-object',
+        {
+          loose: true
+        }
+      ],
       [
         '@babel/plugin-transform-runtime',
         {

config/routes.rb

@@ -7,6 +7,10 @@
     mount Sidekiq::Web => '/admin/sidekiq'
   end
 
+  if Rails.env.development?
+    get "hello_stimulus", to: "site#hello_stimulus", as: :hello_stimulus
+  end
+
   unless Rails.env.development?
     match "/404", :to => "errors#not_found", :via => :all
     match "/500", :to => "errors#internal_server_error", :via => :all