Browse Source

Migrate Webpacker to Esbuild

pull/203/head
baarkerlounger 4 years ago
parent
commit
b136fc1162
  1. 1
      .browserslistrc
  2. 3
      .gitignore
  3. 8
      Gemfile
  4. 25
      Gemfile.lock
  5. 3
      Procfile.dev
  6. 15
      README.md
  7. 0
      app/assets/builds/.keep
  8. 2
      app/assets/config/manifest.js
  9. 0
      app/assets/images/.keep
  10. 6
      app/assets/stylesheets/_accessible-autocomplete.scss
  11. 18
      app/assets/stylesheets/_button.scss
  12. 4
      app/assets/stylesheets/_figure.scss
  13. 0
      app/assets/stylesheets/_input.scss
  14. 0
      app/assets/stylesheets/_panel.scss
  15. 16
      app/assets/stylesheets/_related-navigation.scss
  16. 9
      app/assets/stylesheets/_section-skip-link.scss
  17. 30
      app/assets/stylesheets/_tab-navigation.scss
  18. 14
      app/assets/stylesheets/_table-group.scss
  19. 18
      app/assets/stylesheets/_task-list.scss
  20. 2
      app/assets/stylesheets/_template.scss
  21. 4
      app/assets/stylesheets/active_admin.scss
  22. 17
      app/assets/stylesheets/application.scss
  23. 3
      app/javascript/active_admin.js
  24. 6
      app/javascript/application.js
  25. 0
      app/javascript/controllers/accessible_autocomplete_controller.js
  26. 1
      app/javascript/controllers/application.js
  27. 0
      app/javascript/controllers/conditional_question_controller.js
  28. 0
      app/javascript/controllers/govukfrontend_controller.js
  29. 23
      app/javascript/controllers/index.js
  30. 0
      app/javascript/controllers/numeric_question_controller.js
  31. 28
      app/javascript/controllers/soft_validations_controller.js
  32. 0
      app/javascript/controllers/tasklist_controller.js
  33. 18
      app/views/layouts/application.html.erb
  34. 6
      app/webpacker/channels/consumer.js
  35. 5
      app/webpacker/channels/index.js
  36. 9
      app/webpacker/controllers/index.js
  37. 7
      app/webpacker/packs/active_admin.js
  38. 15
      app/webpacker/packs/application.js
  39. 9
      app/webpacker/styles/_section-skip-link.scss
  40. 70
      babel.config.js
  41. 9
      bin/dev
  42. 18
      bin/webpack
  43. 18
      bin/webpack-dev-server
  44. 9
      config/initializers/active_admin.rb
  45. 5
      config/webpack/development.js
  46. 5
      config/webpack/environment.js
  47. 7
      config/webpack/plugins/jquery.js
  48. 5
      config/webpack/production.js
  49. 5
      config/webpack/staging.js
  50. 5
      config/webpack/test.js
  51. 102
      config/webpacker.yml
  52. 21
      package.json
  53. 12
      postcss.config.js
  54. 7622
      yarn.lock

1
.browserslistrc

@ -1 +0,0 @@
defaults

3
.gitignore vendored

@ -46,3 +46,6 @@ yarn-debug.log*
.DS_Store .DS_Store
.generators .generators
.rakeTasks .rakeTasks
/app/assets/builds/*
!/app/assets/builds/.keep

8
Gemfile

@ -11,8 +11,12 @@ gem "rails", "~> 7.0.2"
gem "pg", "~> 1.1" gem "pg", "~> 1.1"
# Use Puma as the app server # Use Puma as the app server
gem "puma", "~> 5.0" gem "puma", "~> 5.0"
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "webpacker", "~> 5.0" gem "sprockets-rails"
# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"
# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"
# Reduces boot times through caching; required in config/boot.rb # Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", ">= 1.4.4", require: false gem "bootsnap", ">= 1.4.4", require: false
# GOV UK frontend components # GOV UK frontend components

25
Gemfile.lock

@ -106,7 +106,7 @@ GEM
ast (2.4.2) ast (2.4.2)
aws-eventstream (1.2.0) aws-eventstream (1.2.0)
aws-partitions (1.566.0) aws-partitions (1.566.0)
aws-sdk-core (3.129.1) aws-sdk-core (3.130.0)
aws-eventstream (~> 1, >= 1.0.2) aws-eventstream (~> 1, >= 1.0.2)
aws-partitions (~> 1, >= 1.525.0) aws-partitions (~> 1, >= 1.525.0)
aws-sigv4 (~> 1.1) aws-sigv4 (~> 1.1)
@ -150,6 +150,8 @@ GEM
crack (0.4.5) crack (0.4.5)
rexml rexml
crass (1.0.6) crass (1.0.6)
cssbundling-rails (1.1.0)
railties (>= 6.0.0)
deep_merge (1.2.2) deep_merge (1.2.2)
diff-lcs (1.5.0) diff-lcs (1.5.0)
digest (3.1.0) digest (3.1.0)
@ -203,6 +205,8 @@ GEM
rails-dom-testing (>= 1, < 3) rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0) railties (>= 4.2.0)
thor (>= 0.14, < 2.0) thor (>= 0.14, < 2.0)
jsbundling-rails (1.0.2)
railties (>= 6.0.0)
json-schema (2.8.1) json-schema (2.8.1)
addressable (>= 2.4) addressable (>= 2.4)
jwt (2.3.0) jwt (2.3.0)
@ -288,8 +292,6 @@ GEM
rack (>= 1.0, < 3) rack (>= 1.0, < 3)
rack-mini-profiler (2.3.4) rack-mini-profiler (2.3.4)
rack (>= 1.2.0) rack (>= 1.2.0)
rack-proxy (0.7.2)
rack
rack-test (1.1.0) rack-test (1.1.0)
rack (>= 1.0, < 3) rack (>= 1.0, < 3)
rails (7.0.2.3) rails (7.0.2.3)
@ -401,7 +403,6 @@ GEM
childprocess (>= 0.5, < 5.0) childprocess (>= 0.5, < 5.0)
rexml (~> 3.2, >= 3.2.5) rexml (~> 3.2, >= 3.2.5)
rubyzip (>= 1.2.2) rubyzip (>= 1.2.2)
semantic_range (3.0.0)
sentry-rails (5.2.0) sentry-rails (5.2.0)
railties (>= 5.0) railties (>= 5.0)
sentry-ruby-core (~> 5.2.0) sentry-ruby-core (~> 5.2.0)
@ -416,6 +417,13 @@ GEM
simplecov_json_formatter (~> 0.1) simplecov_json_formatter (~> 0.1)
simplecov-html (0.12.3) simplecov-html (0.12.3)
simplecov_json_formatter (0.1.4) simplecov_json_formatter (0.1.4)
sprockets (4.0.3)
concurrent-ruby (~> 1.0)
rack (> 1, < 3)
sprockets-rails (3.4.2)
actionpack (>= 5.2)
activesupport (>= 5.2)
sprockets (>= 3.0.0)
stimulus-rails (1.0.4) stimulus-rails (1.0.4)
railties (>= 6.0.0) railties (>= 6.0.0)
strscan (3.0.1) strscan (3.0.1)
@ -443,11 +451,6 @@ GEM
addressable (>= 2.8.0) addressable (>= 2.8.0)
crack (>= 0.3.2) crack (>= 0.3.2)
hashdiff (>= 0.4.0, < 2.0.0) hashdiff (>= 0.4.0, < 2.0.0)
webpacker (5.4.3)
activesupport (>= 5.2)
rack-proxy (>= 0.6.1)
railties (>= 5.2)
semantic_range (>= 2.3.0)
websocket-driver (0.7.5) websocket-driver (0.7.5)
websocket-extensions (>= 0.1.0) websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5) websocket-extensions (0.1.5)
@ -471,12 +474,14 @@ DEPENDENCIES
capybara capybara
capybara-lockstep capybara-lockstep
chartkick chartkick
cssbundling-rails
devise! devise!
dotenv-rails dotenv-rails
factory_bot_rails factory_bot_rails
govuk-components govuk-components
govuk_design_system_formbuilder govuk_design_system_formbuilder
hotwire-rails hotwire-rails
jsbundling-rails
json-schema json-schema
listen (~> 3.3) listen (~> 3.3)
notifications-ruby-client notifications-ruby-client
@ -501,6 +506,7 @@ DEPENDENCIES
sentry-rails sentry-rails
sentry-ruby sentry-ruby
simplecov simplecov
sprockets-rails
timecop (~> 0.9.4) timecop (~> 0.9.4)
two_factor_authentication! two_factor_authentication!
tzinfo-data tzinfo-data
@ -508,7 +514,6 @@ DEPENDENCIES
view_component view_component
web-console (>= 4.1.0) web-console (>= 4.1.0)
webmock webmock
webpacker (~> 5.0)
RUBY VERSION RUBY VERSION
ruby 3.1.1p18 ruby 3.1.1p18

3
Procfile.dev

@ -0,0 +1,3 @@
web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch

15
README.md

@ -37,11 +37,24 @@ Pre-requisites:
6. Install the frontend depenencies:\ 6. Install the frontend depenencies:\
`yarn install` `yarn install`
7. Start the Rails server:\ 7. Start dev servers using foreman:\
`./bin/dev`
Or start the server individually:\
a. Rails:\
`bundle exec rails s` `bundle exec rails s`
b. JS (for hot reloading):\
`yarn build --watch`
c. CSS (for hot reloading):\
`yarn build:css --watch`
The Rails server will start on <http://localhost:3000>. The Rails server will start on <http://localhost:3000>.
Front end assets are bundled with esbuild and the asset pipeline. Images and fonts are loaded from the GOVUK frontend NPM package by running `cp -rT node_modules/govuk-frontend/govuk/assets/fonts app/assets/builds/fonts && cp -rT node_modules/govuk-frontend/govuk/assets/images app/assets/builds/images` which is done automatically as a post yarn install task.
### Using Docker ### Using Docker
1. Build the image:\ 1. Build the image:\

0
app/assets/builds/.keep

2
app/assets/config/manifest.js

@ -0,0 +1,2 @@
//= link_tree ../builds/images
//= link_tree ../builds

0
app/assets/images/.keep

6
app/webpacker/styles/_accessible-autocomplete.scss → app/assets/stylesheets/_accessible-autocomplete.scss

@ -1,16 +1,16 @@
.autocomplete__wrapper, .autocomplete__wrapper,
.autocomplete__input, .autocomplete__input,
.autocomplete__hint { .autocomplete__hint {
font-family: $govuk-font-family; font-family: all.$govuk-font-family;
} }
.govuk-form-group--error { .govuk-form-group--error {
.autocomplete__input { .autocomplete__input {
border-color: $govuk-error-colour; border-color: all.$govuk-error-colour;
} }
.autocomplete__input--focused { .autocomplete__input--focused {
border-color: $govuk-input-border-colour; border-color: all.$govuk-input-border-colour;
} }
} }

18
app/webpacker/styles/_button.scss → app/assets/stylesheets/_button.scss

@ -1,8 +1,8 @@
$app-button-shadow-size: $govuk-border-width-form-element; $app-button-shadow-size: all.$govuk-border-width-form-element;
$app-button-inverse-background-colour: govuk-colour("white"); $app-button-inverse-background-colour: all.govuk-colour("white");
$app-button-inverse-foreground-colour: $govuk-brand-colour; $app-button-inverse-foreground-colour: all.$govuk-brand-colour;
$app-button-inverse-shadow-colour: govuk-shade($app-button-inverse-foreground-colour, 30%); $app-button-inverse-shadow-colour: all.govuk-shade($app-button-inverse-foreground-colour, 30%);
$app-button-inverse-hover-background-colour: govuk-tint($app-button-inverse-foreground-colour, 90%); $app-button-inverse-hover-background-colour: all.govuk-tint($app-button-inverse-foreground-colour, 90%);
.app-button--inverse, .app-button--inverse,
.app-button--inverse:link, .app-button--inverse:link,
@ -18,14 +18,14 @@ $app-button-inverse-hover-background-colour: govuk-tint($app-button-inverse-fore
} }
.app-button--inverse:focus:not(:hover) { .app-button--inverse:focus:not(:hover) {
color: $govuk-focus-text-colour; color: all.$govuk-focus-text-colour;
background-color: $govuk-focus-colour; background-color: all.$govuk-focus-colour;
} }
.app-button--inverse:active, .app-button--inverse:active,
.app-button--inverse:focus { .app-button--inverse:focus {
border-color: $govuk-focus-colour; border-color: all.$govuk-focus-colour;
color: $app-button-inverse-foreground-colour; color: $app-button-inverse-foreground-colour;
background-color: $app-button-inverse-hover-background-colour; background-color: $app-button-inverse-hover-background-colour;
box-shadow: inset 0 0 0 2px $govuk-focus-colour; box-shadow: inset 0 0 0 2px all.$govuk-focus-colour;
} }

4
app/webpacker/styles/_figure.scss → app/assets/stylesheets/_figure.scss

@ -3,8 +3,8 @@
} }
.app-figure__caption { .app-figure__caption {
@include govuk-font($size: 19); @include all.govuk-font($size: 19);
border-top: 1px solid $govuk-border-colour; border-top: 1px solid all.$govuk-border-colour;
margin-bottom: govuk-spacing(6); margin-bottom: govuk-spacing(6);
padding-top: govuk-spacing(4); padding-top: govuk-spacing(4);
} }

0
app/webpacker/styles/_input.scss → app/assets/stylesheets/_input.scss

0
app/webpacker/styles/_panel.scss → app/assets/stylesheets/_panel.scss

16
app/webpacker/styles/_related-navigation.scss → app/assets/stylesheets/_related-navigation.scss

@ -1,23 +1,23 @@
.app-related-navigation { .app-related-navigation {
@include govuk-text-colour; @include all.govuk-text-colour;
border-top: 2px solid govuk-colour("blue"); border-top: 2px solid all.govuk-colour("blue");
} }
.app-related-navigation__main-heading { .app-related-navigation__main-heading {
@include govuk-font(19, $weight: bold); @include all.govuk-font(19, $weight: bold);
margin-top: govuk-spacing(3); margin-top: govuk-spacing(3);
margin-bottom: govuk-spacing(2); margin-bottom: govuk-spacing(2);
} }
.app-related-navigation__sub-heading { .app-related-navigation__sub-heading {
@include govuk-font(16); @include all.govuk-font(16);
border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2"); border-top: 1px solid all.govuk-colour("mid-grey", $legacy: "grey-2");
margin: 0; margin: 0;
padding-top: govuk-spacing(3); padding-top: govuk-spacing(3);
} }
.app-related-navigation__sub-heading--footer { .app-related-navigation__sub-heading--footer {
@include govuk-font(19, $weight: bold); @include all.govuk-font(19, $weight: bold);
border-top: 0; border-top: 0;
padding-top: 0; padding-top: 0;
margin-top: govuk-spacing(3); margin-top: govuk-spacing(3);
@ -41,11 +41,11 @@
} }
.app-related-navigation__link { .app-related-navigation__link {
@include govuk-font($size: 16, $weight: regular, $line-height: 1.45); @include all.govuk-font($size: 16, $weight: regular, $line-height: 1.45);
list-style-type: none; list-style-type: none;
margin-top: govuk-spacing(3); margin-top: govuk-spacing(3);
@include govuk-media-query($from: tablet) { @include all.govuk-media-query($from: tablet) {
line-height: 1.28; line-height: 1.28;
} }
} }

9
app/assets/stylesheets/_section-skip-link.scss

@ -0,0 +1,9 @@
.app-section-skip-link {
@include all.govuk-visually-hidden-focusable;
@include all.govuk-typography-common;
@include all.govuk-link-decoration;
@include all.govuk-link-style-text;
display: inline-block;
padding: govuk-spacing(2) govuk-spacing(3);
}

30
app/webpacker/styles/_tab-navigation.scss → app/assets/stylesheets/_tab-navigation.scss

@ -1,10 +1,10 @@
.app-tab-navigation { .app-tab-navigation {
@include govuk-font(19, $weight: bold); @include all.govuk-font(19, $weight: bold);
@include govuk-responsive-margin(6, "bottom"); @include all.govuk-responsive-margin(6, "bottom");
} }
.app-tab-navigation__list { .app-tab-navigation__list {
@include govuk-clearfix; @include all.govuk-clearfix;
left: govuk-spacing(-3); left: govuk-spacing(-3);
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -13,8 +13,8 @@
right: govuk-spacing(-3); right: govuk-spacing(-3);
width: calc(100% + #{govuk-spacing(6)}); width: calc(100% + #{govuk-spacing(6)});
@include govuk-media-query($from: tablet) { @include all.govuk-media-query($from: tablet) {
box-shadow: inset 0 -1px 0 $govuk-border-colour; box-shadow: inset 0 -1px 0 all.$govuk-border-colour;
} }
} }
@ -25,7 +25,7 @@
height: 40px; height: 40px;
padding: 0 govuk-spacing(3); padding: 0 govuk-spacing(3);
@include govuk-media-query($from: tablet) { @include all.govuk-media-query($from: tablet) {
box-shadow: none; box-shadow: none;
display: block; display: block;
float: left; float: left;
@ -37,25 +37,25 @@
} }
.app-tab-navigation__item--current { .app-tab-navigation__item--current {
@include govuk-media-query($until: tablet) { @include all.govuk-media-query($until: tablet) {
border-left: 4px solid $govuk-link-colour; border-left: 4px solid all.$govuk-link-colour;
padding-left: 11px; padding-left: 11px;
} }
@include govuk-media-query($from: tablet) { @include all.govuk-media-query($from: tablet) {
border-bottom: 4px solid $govuk-link-colour; border-bottom: 4px solid all.$govuk-link-colour;
padding-left: govuk-spacing(3); padding-left: govuk-spacing(3);
} }
} }
.app-tab-navigation__link { .app-tab-navigation__link {
@include govuk-link-common; @include all.govuk-link-common;
@include govuk-link-style-no-visited-state; @include all.govuk-link-style-no-visited-state;
@include govuk-link-style-no-underline; @include all.govuk-link-style-no-underline;
@include govuk-typography-weight-bold; @include all.govuk-typography-weight-bold;
&:not(:focus):hover { &:not(:focus):hover {
color: $govuk-link-colour; color: all.$govuk-link-colour;
} }
// Extend the touch area of the link to the list // Extend the touch area of the link to the list

14
app/webpacker/styles/_table-group.scss → app/assets/stylesheets/_table-group.scss

@ -3,7 +3,7 @@
overflow-y: hidden; overflow-y: hidden;
margin: govuk-spacing(-3) govuk-spacing(-3) govuk-spacing(3); margin: govuk-spacing(-3) govuk-spacing(-3) govuk-spacing(3);
padding: 0 govuk-spacing(3); padding: 0 govuk-spacing(3);
scrollbar-color: $govuk-text-colour govuk-colour("light-grey"); scrollbar-color: all.$govuk-text-colour all.govuk-colour("light-grey");
.govuk-table { .govuk-table {
margin-bottom: -1px; margin-bottom: -1px;
@ -20,17 +20,17 @@
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: $govuk-text-colour; background: all.$govuk-text-colour;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: govuk-colour("light-grey"); background: all.govuk-colour("light-grey");
} }
} }
.app-table-group:focus { .app-table-group:focus {
box-shadow: 0 0 0 #{$govuk-focus-width * 2} $govuk-focus-colour; box-shadow: 0 0 0 #{all.$govuk-focus-width * 2} all.$govuk-focus-colour;
outline: $govuk-focus-width solid govuk-colour("black"); outline: all.$govuk-focus-width solid all.govuk-colour("black");
} }
.app-table-group:focus:not(:focus-visible) { .app-table-group:focus:not(:focus-visible) {
@ -39,6 +39,6 @@
} }
.app-table-group:focus-visible { .app-table-group:focus-visible {
box-shadow: 0 0 0 #{$govuk-focus-width * 2} $govuk-focus-colour; box-shadow: 0 0 0 #{all.$govuk-focus-width * 2} all.$govuk-focus-colour;
outline: $govuk-focus-width solid govuk-colour("black"); outline: all.$govuk-focus-width solid all.govuk-colour("black");
} }

18
app/webpacker/styles/_task-list.scss → app/assets/stylesheets/_task-list.scss

@ -4,40 +4,40 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@include govuk-media-query($from: tablet) { @include all.govuk-media-query($from: tablet) {
min-width: 400px; min-width: 400px;
} }
} }
.app-task-list__section-heading { .app-task-list__section-heading {
@include govuk-font($size:24, $weight: bold); @include all.govuk-font($size:24, $weight: bold);
display: table; display: table;
margin-top: govuk-spacing(0); margin-top: govuk-spacing(0);
margin-bottom: govuk-spacing(4); margin-bottom: govuk-spacing(4);
} }
.app-task-list__items { .app-task-list__items {
@include govuk-font($size: 19); @include all.govuk-font($size: 19);
@include govuk-responsive-margin(9, "bottom"); @include all.govuk-responsive-margin(9, "bottom");
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
.app-task-list__item { .app-task-list__item {
@include govuk-clearfix; @include all.govuk-clearfix;
border-bottom: 1px solid $govuk-border-colour; border-bottom: 1px solid all.$govuk-border-colour;
padding-top: govuk-spacing(2); padding-top: govuk-spacing(2);
padding-bottom: govuk-spacing(2); padding-bottom: govuk-spacing(2);
} }
.app-task-list__item:first-child { .app-task-list__item:first-child {
border-top: 1px solid $govuk-border-colour; border-top: 1px solid all.$govuk-border-colour;
} }
.app-task-list__task-name { .app-task-list__task-name {
display: block; display: block;
@include govuk-media-query($from: 450px) { @include all.govuk-media-query($from: 450px) {
float: left; float: left;
} }
} }
@ -46,7 +46,7 @@
margin-top: govuk-spacing(2); margin-top: govuk-spacing(2);
margin-bottom: govuk-spacing(1); margin-bottom: govuk-spacing(1);
@include govuk-media-query($from: 450px) { @include all.govuk-media-query($from: 450px) {
float: right; float: right;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;

2
app/webpacker/styles/_template.scss → app/assets/stylesheets/_template.scss

@ -1,5 +1,5 @@
.app-template--wide { .app-template--wide {
.govuk-width-container { .govuk-width-container {
@include govuk-width-container(1100px); @include all.govuk-width-container(1100px);
} }
} }

4
app/webpacker/styles/active_admin.scss → app/assets/stylesheets/active_admin.scss

@ -8,8 +8,8 @@
// $sidebar-width: 242px; // $sidebar-width: 242px;
// Active Admin's got SASS! // Active Admin's got SASS!
@import "~@activeadmin/activeadmin/src/scss/mixins"; @import "@activeadmin/activeadmin/src/scss/_mixins";
@import "~@activeadmin/activeadmin/src/scss/base"; @import "@activeadmin/activeadmin/src/scss/_base";
// Overriding any non-variable Sass must be done after the fact. // Overriding any non-variable Sass must be done after the fact.
// For example, to change the default status-tag color: // For example, to change the default status-tag color:

17
app/webpacker/styles/application.scss → app/assets/stylesheets/application.scss

@ -1,3 +1,6 @@
// Entry point for your Sass build
@use "govuk-frontend/govuk/all";
@function frontend-font-url($filename) { @function frontend-font-url($filename) {
@return url("~assets/fonts/" + $filename); @return url("~assets/fonts/" + $filename);
} }
@ -6,11 +9,9 @@
@return url("~assets/images/" + $filename); @return url("~assets/images/" + $filename);
} }
$govuk-font-url-function: frontend-font-url; all.$govuk-font-url-function: frontend-font-url;
$govuk-image-url-function: frontend-image-url; all.$govuk-image-url-function: frontend-image-url;
$govuk-global-styles: true; all.$govuk-global-styles: true;
@import "~govuk-frontend/govuk/all";
@import "accessible-autocomplete"; @import "accessible-autocomplete";
@import "button"; @import "button";
@ -27,16 +28,16 @@ $govuk-global-styles: true;
// Turbo // Turbo
.turbo-progress-bar { .turbo-progress-bar {
height: govuk-spacing(1); height: govuk-spacing(1);
background-color: $govuk-brand-colour; background-color: all.$govuk-brand-colour;
} }
// App utilities // App utilities
.app-\!-colour-muted { .app-\!-colour-muted {
color: $govuk-secondary-text-colour !important; color: all.$govuk-secondary-text-colour !important;
} }
.app-\!-font-tabular { .app-\!-font-tabular {
@include govuk-font($size: false, $tabular: true); @include all.govuk-font($size: false, $tabular: true);
} }
// Overrides // Overrides

3
app/javascript/active_admin.js

@ -0,0 +1,3 @@
//= require active_admin/base
import "chartkick/chart.js"

6
app/javascript/application.js

@ -0,0 +1,6 @@
import "@hotwired/turbo-rails"
import "./controllers"
import { initAll } from 'govuk-frontend'
Rails.start()
initAll()

0
app/webpacker/controllers/accessible_autocomplete_controller.js → app/javascript/controllers/accessible_autocomplete_controller.js

1
app/webpacker/controllers/application.js → app/javascript/controllers/application.js

@ -3,7 +3,6 @@ import { Application } from "@hotwired/stimulus"
const application = Application.start() const application = Application.start()
// Configure Stimulus development experience // Configure Stimulus development experience
application.warnings = true
application.debug = false application.debug = false
window.Stimulus = application window.Stimulus = application

0
app/webpacker/controllers/conditional_question_controller.js → app/javascript/controllers/conditional_question_controller.js

0
app/webpacker/controllers/govukfrontend_controller.js → app/javascript/controllers/govukfrontend_controller.js

23
app/javascript/controllers/index.js

@ -0,0 +1,23 @@
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName
import { application } from "./application"
import AccessibleAutocompleteController from "./accessible_autocomplete_controller.js"
application.register("accessible-autocomplete", AccessibleAutocompleteController)
import ConditionalQuestionController from "./conditional_question_controller.js"
application.register("conditional-question", ConditionalQuestionController)
import NumericQuestionController from "./numeric_question_controller.js"
application.register("numeric-question", NumericQuestionController)
import SoftValidationsController from "./soft_validations_controller.js"
application.register("soft-validations", SoftValidationsController)
import TasklistController from "./tasklist_controller.js"
application.register("tasklist", TasklistController)
import GovukfrontendController from "./govukfrontend_controller.js"
application.register("govukfrontend", GovukfrontendController)

0
app/webpacker/controllers/numeric_question_controller.js → app/javascript/controllers/numeric_question_controller.js

28
app/javascript/controllers/soft_validations_controller.js

@ -0,0 +1,28 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "override" ]
initialize() {
let url = window.location.href + "/soft-validations"
let div = this.overrideTarget
fetch(url, { headers: { accept: "application/json" } })
.then(response => response.json())
.then((response) => {
if(response["show"]){
div.style.display = "block"
let innerHTML = div.innerHTML
innerHTML = innerHTML.replace("soft-validations-placeholder-message", response["label"])
innerHTML = innerHTML.replace("soft-validations-placeholder-hint-text", response["hint"])
div.innerHTML = innerHTML
} else {
div.style.display = "none"
let buttons = document.getElementsByName(`case_log[override_net_income_validation][]`)
Object.entries(buttons).map(([idx, button]) => {
button.checked = false
})
}
}
)
}
}

0
app/webpacker/controllers/tasklist_controller.js → app/javascript/controllers/tasklist_controller.js

18
app/views/layouts/application.html.erb

@ -5,16 +5,16 @@
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<%= csp_meta_tag %> <%= csp_meta_tag %>
<%= tag :meta, name: 'viewport', content: 'width=device-width, initial-scale=1' %> <%= tag :meta, name: 'viewport', content: 'width=device-width, initial-scale=1' %>
<%= tag :meta, property: 'og:image', content: asset_pack_path('media/images/govuk-opengraph-image.png') %> <%= tag :meta, property: 'og:image', content: asset_path('images/govuk-opengraph-image.png') %>
<%= tag :meta, name: 'theme-color', content: '#0b0c0c' %> <%= tag :meta, name: 'theme-color', content: '#0b0c0c' %>
<%= favicon_link_tag asset_pack_path('media/images/favicon.ico') %> <%= favicon_link_tag asset_path('images/favicon.ico') %>
<%= favicon_link_tag asset_pack_path('media/images/govuk-mask-icon.svg'), rel: 'mask-icon', type: 'image/svg', color: "#0b0c0c" %> <%= favicon_link_tag asset_path('images/govuk-mask-icon.svg'), rel: 'mask-icon', type: 'image/svg', color: "#0b0c0c" %>
<%= favicon_link_tag asset_pack_path('media/images/govuk-apple-touch-icon.png'), rel: 'apple-touch-icon', type: 'image/png' %> <%= favicon_link_tag asset_path('images/govuk-apple-touch-icon.png'), rel: 'apple-touch-icon', type: 'image/png' %>
<%= favicon_link_tag asset_pack_path('media/images/govuk-apple-touch-icon-152x152.png'), rel: 'apple-touch-icon', type: 'image/png', size: '152x152' %> <%= favicon_link_tag asset_path('images/govuk-apple-touch-icon-152x152.png'), rel: 'apple-touch-icon', type: 'image/png', size: '152x152' %>
<%= favicon_link_tag asset_pack_path('media/images/govuk-apple-touch-icon-167x167.png'), rel: 'apple-touch-icon', type: 'image/png', size: '167x167' %> <%= favicon_link_tag asset_path('images/govuk-apple-touch-icon-167x167.png'), rel: 'apple-touch-icon', type: 'image/png', size: '167x167' %>
<%= favicon_link_tag asset_pack_path('media/images/govuk-apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', type: 'image/png', size: '180x180' %> <%= favicon_link_tag asset_path('images/govuk-apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', type: 'image/png', size: '180x180' %>
<%= stylesheet_pack_tag 'application', media: 'all' %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_pack_tag 'application', defer: true %> <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
<% if content_for?(:head) %> <% if content_for?(:head) %>
<%= yield(:head) %> <%= yield(:head) %>

6
app/webpacker/channels/consumer.js

@ -1,6 +0,0 @@
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
import { createConsumer } from "@rails/actioncable"
export default createConsumer()

5
app/webpacker/channels/index.js

@ -1,5 +0,0 @@
// Load all the channels within this directory and all subdirectories.
// Channel files must be named *_channel.js.
const channels = require.context('.', true, /_channel\.js$/)
channels.keys().forEach(channels)

9
app/webpacker/controllers/index.js

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

7
app/webpacker/packs/active_admin.js

@ -1,7 +0,0 @@
// Load Active Admin's styles into Webpacker,
// see `active_admin.scss` for customization.
import "../styles/active_admin";
import "@activeadmin/activeadmin";
import "chartkick/chart.js"

15
app/webpacker/packs/application.js

@ -1,15 +0,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.
require.context('govuk-frontend/govuk/assets')
import '../styles/application.scss'
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "controllers"
import "@hotwired/turbo-rails"
import { initAll } from 'govuk-frontend'
ActiveStorage.start()
initAll()

9
app/webpacker/styles/_section-skip-link.scss

@ -1,9 +0,0 @@
.app-section-skip-link {
@include govuk-visually-hidden-focusable;
@include govuk-typography-common;
@include govuk-link-decoration;
@include govuk-link-style-text;
display: inline-block;
padding: govuk-spacing(2) govuk-spacing(3);
}

70
babel.config.js

@ -1,70 +0,0 @@
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'@babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'@babel/plugin-transform-destructuring',
[
'@babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'@babel/plugin-transform-runtime',
{
helpers: false
}
],
[
'@babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}

9
bin/dev

@ -0,0 +1,9 @@
#!/usr/bin/env bash
if ! command -v foreman &> /dev/null
then
echo "Installing foreman..."
gem install foreman
fi
foreman start -f Procfile.dev

18
bin/webpack

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

18
bin/webpack-dev-server

@ -1,18 +0,0 @@
#!/usr/bin/env ruby
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"
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

9
config/initializers/active_admin.rb

@ -331,14 +331,7 @@ ActiveAdmin.setup do |config|
# By default, Active Admin uses Sprocket's asset pipeline. # By default, Active Admin uses Sprocket's asset pipeline.
# You can switch to using Webpacker here. # You can switch to using Webpacker here.
# #
config.use_webpacker = true # config.use_webpacker = true
end
# Print stylesheet is no longer a separate stylesheet in upstream so we can
# delete this when the next version bump is released but for now it prevents
# webpacker issues.
Rails.application.config.after_initialize do
ActiveAdmin.application.stylesheets.delete("active_admin/print.css")
end end
Rails.application.config.after_initialize do Rails.application.config.after_initialize do

5
config/webpack/development.js

@ -1,5 +0,0 @@
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

5
config/webpack/environment.js

@ -1,5 +0,0 @@
const { environment } = require('@rails/webpacker')
const jquery = require('./plugins/jquery')
environment.plugins.prepend('jquery', jquery)
module.exports = environment

7
config/webpack/plugins/jquery.js vendored

@ -1,7 +0,0 @@
const webpack = require('webpack')
module.exports = new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
"window.jQuery":"jquery"
});

5
config/webpack/production.js

@ -1,5 +0,0 @@
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

5
config/webpack/staging.js

@ -1,5 +0,0 @@
process.env.NODE_ENV = process.env.NODE_ENV || 'staging'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

5
config/webpack/test.js

@ -1,5 +0,0 @@
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

102
config/webpacker.yml

@ -1,102 +0,0 @@
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/webpacker
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths: ['node_modules/govuk-frontend/govuk']
# Cache manifest.json for performance
cache_manifest: true
# Extract and emit a css file
extract_css: true
# Production depends on precompilation of packs prior to booting for performance.
compile: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: false
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
# Compile test packs to a separate directory
public_output_path: packs-test
staging:
<<: *default
production:
<<: *default

21
package.json

@ -6,27 +6,24 @@
}, },
"dependencies": { "dependencies": {
"@activeadmin/activeadmin": "^2.9.0", "@activeadmin/activeadmin": "^2.9.0",
"@hotwired/stimulus": "^3.0.0", "@hotwired/stimulus": "^3.0.1",
"@hotwired/stimulus-webpack-helpers": "^1.0.1",
"@hotwired/turbo": "^7.1.0", "@hotwired/turbo": "^7.1.0",
"@hotwired/turbo-rails": "^7.1.0", "@hotwired/turbo-rails": "^7.1.0",
"@rails/actioncable": "^6.0.0", "@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0", "@rails/activestorage": "^6.0.0",
"@rails/webpacker": "5.4.3",
"accessible-autocomplete": "^2.0.3", "accessible-autocomplete": "^2.0.3",
"chart.js": "^3.6.0", "chart.js": "^3.6.0",
"chartkick": "^4.1.0", "chartkick": "^4.1.0",
"esbuild": "^0.14.11",
"govuk-frontend": "^4.0.1", "govuk-frontend": "^4.0.1",
"stimulus": "^3.0.0", "sass": "^1.47.0",
"webpack": "^4.46.0", "stimulus": "^3.0.0"
"webpack-cli": "^4.9.2"
}, },
"version": "0.1.0", "version": "0.1.0",
"devDependencies": { "devDependencies": {},
"webpack-dev-server": "^4.7.4" "scripts": {
}, "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds",
"resolutions": { "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules && sass ./app/assets/stylesheets/active_admin.scss ./app/assets/builds/active_admin.css --no-source-map --load-path=node_modules",
"glob-parent": "^6.0.2", "postinstall": "cp -rT node_modules/govuk-frontend/govuk/assets/fonts app/assets/builds/fonts && cp -rT node_modules/govuk-frontend/govuk/assets/images app/assets/builds/images"
"nth-check": "^2.0.1"
} }
} }

12
postcss.config.js

@ -1,12 +0,0 @@
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}

7622
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save