Dependencies | Migrate to jsbundling and cssbundling (#601)

* WIP - Successful build

* WIP - Successful build and app runs, without Tailwind

* Upgrade node

* Load jquery and fix double loading ujs

* Remove esbuild loader

* Fix multiple files linked

* WIP - use cssbundling-rails, successful but partial build

* Update procfiles

* Add application tailwind stylesheet

* layout reference to tailwind output file

* Load missing styles

* Update node in CI and docker

* Load administrate styles and js

* Simplify setup

* Fix sass syntax error

* Compile tailwind.application

* Remove unnecessary imports

* Solve module not found error

* Small style fixes

* Move plugin to dependencies

* Push .keep for deployment tasks

* Fix tagify display, migrate sass syntax

* Fix organization form

* Fix buttons in org index

* Fix administrate search bar

* Fix style in radio buttons and checkboxes

.dockerdev/compose.yml

@@ -4,7 +4,7 @@ x-app: &app
     args:
       RUBY_VERSION: '3.1.0'
       PG_MAJOR: '15'
-      NODE_MAJOR: '16'
+      NODE_MAJOR: '20'
   image: giving_connection-dev:1.0.0
   environment: &env
     NODE_ENV: ${NODE_ENV:-development}

.github/workflows/ruby-ci.yml

@@ -83,7 +83,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 20.17.0
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:

.gitignore

@@ -47,3 +47,6 @@ database_consistency*
 
 # Ignore asdf version files
 /.tool-versions
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -12,9 +12,9 @@ gem "pg", "~> 1.1"
 # Use Puma as the app server
 gem "puma", "~> 5.6"
 # Use SCSS for stylesheets
-gem "sass-rails", ">= 6"
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem "webpacker", "~> 5.0"
+# Bundle and transpile JS in Rails. Read more: https://github.com/rails/jsbundling-rails/tree/main
+gem "jsbundling-rails"
+gem "cssbundling-rails"
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem "jbuilder", "~> 2.7"
@@ -72,6 +72,7 @@ gem "image_processing"
 gem "bootsnap", require: false
 gem "city-state"
 gem "timezone", "~> 1.0" #  Timezone lookup based on geolocation
+gem "momentjs-rails"
 
 # Geolocation
 gem "activerecord-postgis-adapter"

Gemfile.lock

@@ -164,6 +164,8 @@ GEM
     concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
     crass (1.0.6)
+    cssbundling-rails (1.4.0)
+      railties (>= 6.0.0)
     cuprite (0.15)
       capybara (~> 3.0)
       ferrum (~> 0.14.0)
@@ -257,6 +259,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jsbundling-rails (1.3.0)
+      railties (>= 6.0.0)
     json (2.6.2)
     kaminari (1.2.1)
       activesupport (>= 4.1.0)
@@ -303,6 +307,8 @@ GEM
     mobility (1.1.3)
       i18n (>= 0.6.10, < 2)
       request_store (~> 1.0)
+    momentjs-rails (2.20.1)
+      railties (>= 3.1)
     msgpack (1.4.2)
     multipart-post (2.1.1)
     name_of_person (1.1.3)
@@ -354,8 +360,6 @@ GEM
       rack (>= 1.0, < 4)
     rack-mini-profiler (2.3.4)
       rack (>= 1.2.0)
-    rack-proxy (0.7.7)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (6.1.7.8)
@@ -479,8 +483,6 @@ GEM
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -496,7 +498,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     shellany (0.0.1)
     shoulda-matchers (4.5.1)
       activesupport (>= 4.2.0)
@@ -574,11 +575,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0, < 4.11)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.10)
     websocket-driver (0.7.6)
@@ -618,6 +614,7 @@ DEPENDENCIES
   city-state
   clockwork
   cocoon
+  cssbundling-rails
   cuprite
   database_consistency
   devise
@@ -629,10 +626,12 @@ DEPENDENCIES
   inline_svg
   invisible_captcha
   jbuilder (~> 2.7)
+  jsbundling-rails
   koala
   letter_opener
   listen (~> 3.3)
   mobility (~> 1.1.3)
+  momentjs-rails
   name_of_person
   net-imap
   net-pop
@@ -656,7 +655,6 @@ DEPENDENCIES
   rspec-sidekiq
   rubocop-rails (~> 2)!
   rubocop-rspec (~> 2)!
-  sass-rails (>= 6)
   scout_apm
   shoulda-matchers (~> 4.0)
   sidekiq (< 7)
@@ -674,7 +672,6 @@ DEPENDENCIES
   view_component
   web-console (>= 4.1.0)
   webdrivers (~> 5.2)
-  webpacker (~> 5.0)
 
 RUBY VERSION
    ruby 3.1.0p0

Procfile

@@ -1,4 +1,4 @@
-web:       bundle exec puma -C config/puma.rb
-worker:    bundle exec sidekiq
-webpacker: ./bin/webpack-dev-server
-clock:   bundle exec clockwork config/clock.rb
+web:    bundle exec puma -C config/puma.rb
+assets: yarn build && yarn build:css
+worker: bundle exec sidekiq
+clock:  bundle exec clockwork config/clock.rb

Procfile.dev

@@ -0,0 +1,4 @@
+web:    bundle exec puma -C config/puma.rb
+js:     yarn dev
+css:    yarn build:css --watch
+worker: bundle exec sidekiq

app/assets/config/manifest.js

@@ -1,2 +1,4 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_tree ../builds
+//= link application.css
+//= link application.tailwind.css

app/assets/stylesheets/administrate/application.scss

@@ -34,6 +34,3 @@
     width: 80%;
   }
 }
-
-@import "flatpickr/dist/flatpickr.min";
-

app/assets/stylesheets/administrate/base/_forms.scss

@@ -85,7 +85,7 @@ textarea {
 [type="checkbox"],
 [type="radio"] {
   display: inline;
-  margin-right: $small-spacing / 2;
+  margin-right: $small-spacing * 0.5;
 }
 
 [type="file"] {

app/assets/stylesheets/administrate/components/_flashes.scss

@@ -3,8 +3,8 @@
     background-color: $color;
     color: mix($black, $color, 60%);
     display: block;
-    margin-bottom: $base-spacing / 2;
-    padding: $base-spacing / 2;
+    margin-bottom: $base-spacing * 0.5;
+    padding: $base-spacing * 0.5;
     text-align: center;
 
     a {

app/assets/stylesheets/administrate/components/_search.scss

@@ -9,9 +9,9 @@ $_search-icon-size: 1rem;
 }
 
 .search__input {
-  border-radius: 100rem;
-  padding-left: $_search-icon-size * 2.5;
-  padding-right: $_search-icon-size * 2.5;
+  border-radius: 100rem !important;
+  padding-left: $_search-icon-size * 2.5 !important;
+  padding-right: $_search-icon-size * 2.5 !important;
 }
 
 .search__eyeglass-icon {

app/assets/stylesheets/administrate/library/_variables.scss

@@ -14,7 +14,7 @@ $heading-line-height: 1.2 !default;
 // Other Sizes
 $base-border-radius: 4px !default;
 $base-spacing: $base-line-height * 1em !default;
-$small-spacing: $base-spacing / 2 !default;
+$small-spacing: $base-spacing * 0.5 !default;
 
 // Colors
 $white: #fff !default;

app/assets/stylesheets/application.scss

@@ -18,3 +18,149 @@
 @import "design_system/component/index";
 @import "helpers/index";
 @import "helpers/logo";
+@import "../../components/accordion/component";
+@import "../../components/navbar/component";
+@import "../../components/causes_list/component";
+@import "../../../node_modules/@yaireo/tagify/dist/tagify";
+
+// Custom styles here
+@layer utilities {
+  .disabled-icon path {
+    fill: #D3DCE6;
+  }
+
+  .positioned-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.scroll-mt-25 {
+  scroll-margin-top: 6.25rem;
+}
+
+
+.tagify__input::before{
+  position:static;
+}
+
+.tagify-look {
+ //@apply bg-blue-medium py-1.5 pl-2 pr-1 min-h-7 inline-flex items-center text-xs text-white flex-shrink-0 rounded-6px;
+  --tag-bg                  : #0782d0;
+  --tag-hover               : #0782d0;
+  --tag-text-color          : #FFF;
+  --tags-border-color       : rgba(229, 231, 235,1);
+  --tag-text-color--edit    : #111;
+  --tag-pad                 : .375rem 0.25rem 0.375rem 0.5rem;
+  --tag-inset-shadow-size   : 1.35em;
+  --tag-remove-bg           : #0782d0;
+  --tag-remove-btn-color    : #FFF;
+  --tag-remove-btn-bg--hover: rgba(255, 255, 255, 0.8);
+  padding-right: 6px;
+
+  .tagify__tag > div {
+    border-radius: 6px;
+  }
+
+  .tagify__tag__removeBtn {
+    @apply text-base;
+  }
+}
+
+.pill:checked + label {
+  border: 1px solid #0782D0;
+  background-color: #E2ECF7;
+}
+
+.button-label:first-of-type {
+  border-left: 1px solid #D3DCE6;
+}
+
+.interactive-btn {
+  .thick-icon path {
+    stroke-width: 0;
+    transition: fill 150ms;
+  }
+
+  .icon path {
+    transition: stroke 150ms;
+  }
+
+  &:hover .icon path,
+  &:hover .saved > path {
+    stroke: white;
+  }
+
+  &:hover .thick-icon path,
+  &:hover .saved > path {
+    fill: white;
+  }
+}
+
+svg.icon path {
+  fill: #3C4858;
+}
+
+button:disabled {
+  color: #C2CEDB;
+  cursor: default;
+
+  & path {
+    fill: #C2CEDB;
+  }
+}
+
+.no-pseudo-elems::after,
+.no-pseudo-elems::before  {
+  display: none;
+}
+
+/* Reset */
+
+input#search-keyword-input {
+  /* IE and Edge */
+  &::-ms-clear,
+  &::-ms-reveal {
+    display: none;
+    width : 0;
+    height: 0;
+  }
+
+  /* Chrome and Safari */
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+}
+
+/* Animations */
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid #e5e9f2;
+  border-top: 4px solid #0068af;
+  border-radius: 50%;
+  animation-duration: 750ms;
+  animation-name: spin;
+  animation-iteration-count: infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Admin panel populations */
+
+input.admin-panel-population:disabled + label {
+  color: #8492A6;
+}

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/components/navbar/component.scss

@@ -13,7 +13,7 @@
 
   &--mobile {
     @media (min-width: 870px) {
-      display: none;
+      display: none !important;
       flex: none;
     }
   }

app/components/search_bar/component.html.erb

@@ -9,7 +9,7 @@
         <%= @form.search_field(
           :keyword,
           value: "#{ params.dig('search', 'keyword') }",
-          class: "rounded-l-md border-none block px-10 h-46px w-full py-3.5 px-4 text-base text-gray-3 focus:outline-none",
+          class: "rounded-l-md border-none block px-10 h-46px w-full py-3.5 text-base text-gray-3 focus:outline-none",
           id: "search-keyword-input",
           placeholder: "Try \"Mental Health Nonprofits\"",
           data: {

app/controllers/admin/application_controller.rb

@@ -8,6 +8,7 @@
 # you're free to overwrite the RESTful controller actions.
 module Admin
   class ApplicationController < Administrate::ApplicationController
+    helper ApplicationHelper
     before_action :authenticate_admin
 
     def authenticate_admin