Update storybook

.circleci/config.yml

@@ -7,7 +7,7 @@ defaults: &defaults
     CIRCLE_ARTIFACTS: /tmp/circleci-artifacts
     CIRCLE_TEST_REPORTS: /tmp/circleci-test-results
   docker:
-    - image: circleci/ruby:2.6.6-stretch-node-browsers
+    - image: cimg/ruby:3.1.4-browsers
       environment:
         PGHOST: 127.0.0.1
         PGUSER: circleci
@@ -52,9 +52,9 @@ jobs:
           - v1-dep-main-
           - v1-dep-
       - run:
-          name: Update to Node v14.8.0
+          name: Update to Node v16.14.2
           command: |
-            curl -sSL "https://nodejs.org/dist/v14.8.0/node-v14.8.0-linux-x64.tar.xz" | sudo tar --strip-components=2 -xJ -C /usr/local/bin/ node-v14.8.0-linux-x64/bin/node
+            curl -sSL "https://nodejs.org/dist/v16.14.2/node-v16.14.2-linux-x64.tar.xz" | sudo tar --strip-components=2 -xJ -C /usr/local/bin/ node-v16.14.2-linux-x64/bin/node
             curl https://www.npmjs.com/install.sh | sudo bash
       - run: gem install bundler
       - run: bundle install --path=vendor/bundle --jobs=4 --retry=3
@@ -141,9 +141,9 @@ jobs:
           - v1-dep-main-
           - v1-dep-
       - run:
-          name: Update to Node v14.8.0
+          name: Update to Node v16.14.2
           command: |
-            curl -sSL "https://nodejs.org/dist/v14.8.0/node-v14.8.0-linux-x64.tar.xz" | sudo tar --strip-components=2 -xJ -C /usr/local/bin/ node-v14.8.0-linux-x64/bin/node
+            curl -sSL "https://nodejs.org/dist/v16.14.2/node-v16.14.2-linux-x64.tar.xz" | sudo tar --strip-components=2 -xJ -C /usr/local/bin/ node-v16.14.2-linux-x64/bin/node
             curl https://www.npmjs.com/install.sh | sudo bash
       - run: gem install bundler
       - run: bundle install --path=vendor/bundle --jobs=4 --retry=3

.gitignore

@@ -50,3 +50,10 @@ node_modules
 
 # Ignore gems installed locally
 /vendor
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

.nvmrc

@@ -1 +1 @@
-14.8.0
+16.14.2

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-  "javascript.validate.enable": false
+  "javascript.validate.enable": false,
+  "cSpell.words": [
+    "browserslist",
+    "webpacker"
+  ]
 }

Gemfile

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 source 'https://rubygems.org'
-ruby '~> 2.6.6'
+ruby '~> 3.1.4'
 
 gem 'puma'
 gem 'rack-rewrite'
@@ -47,7 +47,7 @@ gem 'inline_svg'
 
 gem 'groupdate', '4.1.2'
 
-gem 'react_on_rails', '12.0.1'
+gem 'react_on_rails', '12.4.0'
 gem 'webpacker', '5.1.1'
 
 gem 'selenium-webdriver', '~> 3.142.7'
@@ -110,3 +110,5 @@ group :production do
   gem 'rails_12factor', '0.0.3'
   gem 'sentry-raven'
 end
+
+gem "shakapacker", "= 6.2"

Gemfile.lock

@@ -346,7 +346,7 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rdoc (6.3.1)
-    react_on_rails (12.0.1)
+    react_on_rails (12.4.0)
       addressable
       connection_pool
       execjs (~> 2.5)
@@ -459,6 +459,11 @@ GEM
     semantic_range (2.3.0)
     sentry-raven (2.13.0)
       faraday (>= 0.7.6, < 1.0)
+    shakapacker (6.2.0)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     shoulda-matchers (4.4.1)
       activesupport (>= 4.2.0)
     sidekiq (6.4.0)
@@ -585,7 +590,7 @@ DEPENDENCIES
   rails-erd (~> 1.6)
   rails-i18n (~> 6.0.0)
   rails_12factor (= 0.0.3)
-  react_on_rails (= 12.0.1)
+  react_on_rails (= 12.4.0)
   recaptcha
   resque (= 2.0.0)
   resque-scheduler (= 4.4.0)
@@ -603,6 +608,7 @@ DEPENDENCIES
   sdoc (= 1.0.0)
   selenium-webdriver (~> 3.142.7)
   sentry-raven
+  shakapacker (= 6.2)
   shoulda-matchers
   sidekiq (= 6.4.0)
   sidekiq-cron (~> 1.1)

app/helpers/assets_helper.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+require 'erb'
 
 # Adapted from https://gist.github.com/Dagnan/175168c456629a4ad1acdba8e0cdedb9
 module AssetsHelper
@@ -13,13 +14,13 @@ def inline_css(path)
     content = inline_file(path, true)
     return nil unless content
 
-    "<style>#{content}</style>".html_safe
+    "<style media=\"all\">#{ERB::Util.html_escape(content)}</style>"
   end
 
   private
 
   def inline_file(path, css = false)
-    if css && path == 'webpack_bundle.css'
+    if css && path == 'pack_bundle.css'
       File.read(Rails.root.join('public', webpack_folder, path))
     elsif Rails.application.assets
       get_application_asset(path)
@@ -29,7 +30,7 @@ def inline_file(path, css = false)
   end
 
   def webpack_folder
-    Rails.env.test? ? 'webpack-test' : 'webpack'
+    Rails.env.test? ? 'packs-test' : 'packs'
   end
 
   def get_application_asset(path)

app/javascript/application.js

@@ -0,0 +1,15 @@
+/* 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)

app/views/layouts/application.html.erb

@@ -21,12 +21,8 @@
       only the last one will load correctly in production, as though there is
       a global registry and the last bundle overwrites the entire registry.
     -->
-    <% if Rails.env.production? %>
-      <%= inline_css 'webpack_bundle.css' %>
-    <% else %>
-      <%= stylesheet_pack_tag 'webpack_bundle', media: 'all' %>
-    <% end %>
-    <%= javascript_pack_tag 'webpack_bundle', 'data-turbolinks-track': true, defer: true %>
+    <%= inline_css 'pack_bundle.css' %>
+    <%= inline_js 'application.js' %>
     <!-- Webpack Assets END -->
 
     <link rel="preconnect" href="https://cdn.jsdelivr.net">

bin/webpacker

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+require "pathname"
+require "bundler/setup"
+require "webpacker"
+require "webpacker/webpack_runner"
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

bin/webpacker-dev-server

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end

bin/yarn

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
+    select { |dir| File.expand_path(dir) != __dir__ }.
+    product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
+    map { |dir, file| File.expand_path(file, dir) }.
+    find { |file| File.executable?(file) }
+
+  if yarn
+    exec yarn, *ARGV
+  else
+    $stderr.puts "Yarn executable was not detected in the system."
+    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+    exit 1
+  end
+end

client/.babelrc

@@ -1,10 +1,14 @@
 {
   "presets": [
+    // "./node_modules/shakapacker/package/babel/preset.js",
     [
       "@babel/env", {
-        "useBuiltIns": "usage",
-        "modules": "commonjs",
-        "corejs": "3"
+        // "useBuiltIns": "usage",
+        // "modules": "commonjs",
+        // "corejs": "3"
+        "useBuiltIns": "entry",
+        "corejs": "3.8",
+        "modules": "auto"
       }
     ],
     "@babel/preset-flow",

client/.storybook/main.js

@@ -2,6 +2,9 @@ const path = require('path');
 const custom = require('../webpack.config');
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: ['../app/stories/**/*.stories.@(jsx|mdx)'],
   addons: [
     '@storybook/addon-docs',