Update the application with a big frontend refacto

.github/workflows/ci.yml

@@ -25,6 +25,9 @@ jobs:
       - name: Install Dependencies
         run: docker-compose run --rm --user=app frontend composer install
 
+      - name: Install Front Dependencies
+        run: docker-compose run --rm --user=app frontend bin/console importmap:install
+
       - name: Create Database
         run: docker-compose run --rm --user=app frontend bin/db --env=test
 

.gitignore

@@ -26,4 +26,5 @@
 
 ###> symfony/asset-mapper ###
 /public/assets/
+/assets/vendor/
 ###< symfony/asset-mapper ###

.php-cs-fixer.php

@@ -16,6 +16,7 @@
         '@PhpCsFixer' => true,
         '@Symfony' => true,
         '@Symfony:risky' => true,
+        'single_line_empty_body' => false,
         'php_unit_internal_class' => false, // From @PhpCsFixer but we don't want it
         'php_unit_test_class_requires_covers' => false, // From @PhpCsFixer but we don't want it
         'phpdoc_add_missing_param_annotation' => false, // From @PhpCsFixer but we don't want it

assets/app.js

@@ -1 +1,7 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import 'swiper/swiper-bundle.min.css';
+import './styles/app.css';
+
 import './bootstrap.js';
+import './transitions.js';

assets/bootstrap.js

@@ -2,12 +2,4 @@ import { startStimulusApp } from '@symfony/stimulus-bundle';
 import Carousel from 'stimulus-carousel';
 
 const app = startStimulusApp();
-
 app.register('carousel', Carousel);
-
-document.addEventListener("turbo:frame-missing", (event) => {
-    if (event.target.dataset.deleteIfMissing) {
-        event.target.remove();
-        event.preventDefault();
-    }
-});

assets/controllers/loading-controller.js

@@ -2,11 +2,7 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
     connect() {
-        document.addEventListener("turbo:before-fetch-request", () => {
-            this.element.classList.remove('d-none');
-        });
-        document.addEventListener("turbo:before-fetch-response", () => {
-            this.element.classList.add('d-none');
-        });
+        document.addEventListener("turbo:before-fetch-request", () => this.element.classList.remove('d-none'));
+        document.addEventListener("turbo:before-fetch-response", () => this.element.classList.add('d-none'));
     }
 }

assets/controllers/modal-controller.js

@@ -2,17 +2,51 @@ import { Controller } from '@hotwired/stimulus';
 import { Modal } from 'bootstrap';
 
 export default class extends Controller {
-    static values = {
-        options: Object,
-    }
+    static targets = ['bsModal', 'frame', 'loadingTemplate'];
+
+    modal = null;
 
     connect() {
-        this.modal = new Modal(this.element, this.optionsValue);
-        this.modal.show();
+        this.element.addEventListener('turbo:before-fetch-request', (e) => {
+            // If the current modal disable loader, we don't show the loader
+            // This is useful for modals that are used to display a form
+            if (this.modal && this.hasBsModalTarget && this.bsModalTarget.hasAttribute('disable-loader')) {
+                return;
+            }
+
+            this.frameTarget.innerHTML = this.loadingTemplateTarget.innerHTML;
+        });
     }
 
     disconnect() {
+        this.close();
+    }
+
+    bsModalTargetDisconnected() {
+        this.close();
+    }
+    bsModalTargetConnected() {
+        this.open();
+    }
+
+    /** internal stuff */
+
+    open() {
+        if (this.modal) {
+            return;
+        }
+        this.modal = new Modal(this.bsModalTarget);
+        this.modal.show();
+        this.bsModalTarget.addEventListener('hide.bs.modal', () => {
+            this.modal = null;
+        });
+    }
+
+    close() {
+        if (!this.modal) {
+            return;
+        }
         this.modal.hide();
-        this.element.remove();
+        this.modal = null;
     }
 }

assets/styles/app.css

@@ -10,3 +10,8 @@ a {
 .card img {
     max-width: 100%;
 }
+
+turbo-frame [aria-busy="true"] {
+    opacity: 0.75;
+    pointer-events:none;
+}

assets/transitions.js

@@ -0,0 +1,37 @@
+import { shouldPerformTransition, performTransition } from "turbo-view-transitions";
+
+let skipNextRenderTransition = false;
+
+document.addEventListener("turbo:before-render", (event) => {
+    if (shouldPerformTransition() && !skipNextRenderTransition) {
+        event.preventDefault();
+
+        performTransition(document.body, event.detail.newBody, async () => {
+            await event.detail.resume();
+        });
+    }
+});
+
+document.addEventListener('turbo:before-frame-render', (event) => {
+    if (shouldPerformTransition()) {
+        event.preventDefault();
+
+        // workaround for data-turbo-action="advance", which triggers
+        // turbo:before-render (and we want THAT to not try to transition)
+        skipNextRenderTransition = true;
+        setTimeout(() => {
+            skipNextRenderTransition = false;
+        }, 100);
+
+        performTransition(event.target, event.detail.newFrame, async () => {
+            await event.detail.resume();
+        });
+    }
+});
+
+document.addEventListener("turbo:load", () => {
+    // View Transitions don't play nicely with Turbo cache
+    if (shouldPerformTransition()) {
+        Turbo.cache.exemptPageFromCache();
+    }
+});

composer.json

@@ -4,62 +4,64 @@
     "license": "MIT",
     "prefer-stable": true,
     "require": {
-        "php": ">=8.1",
+        "php": ">=8.2",
         "ext-ctype": "*",
         "ext-iconv": "*",
         "ext-uuid": "*",
-        "doctrine/doctrine-bundle": "^2.9.1",
-        "doctrine/doctrine-migrations-bundle": "^3.2.2",
-        "doctrine/orm": "^2.15.1",
-        "knplabs/knp-paginator-bundle": "^6.2",
-        "knpuniversity/oauth2-client-bundle": "^2.15",
-        "league/commonmark": "^2.4",
+        "doctrine/doctrine-bundle": "^2.11.1",
+        "doctrine/doctrine-migrations-bundle": "^3.3.0",
+        "doctrine/orm": "^2.17.2",
+        "knplabs/knp-paginator-bundle": "^6.3",
+        "knpuniversity/oauth2-client-bundle": "^2.18",
+        "league/commonmark": "^2.4.1",
         "league/oauth2-google": "^4.0.1",
-        "nyholm/psr7": "^1.8",
+        "nyholm/psr7": "^1.8.1",
         "phpdocumentor/reflection-docblock": "^5.3",
-        "phpstan/phpdoc-parser": "^1.21.3",
-        "symfony/asset": "6.3.*",
-        "symfony/asset-mapper": "6.3.*",
-        "symfony/console": "6.3.*",
-        "symfony/dotenv": "6.3.*",
-        "symfony/expression-language": "6.3.*",
-        "symfony/flex": "^2.3.1",
-        "symfony/framework-bundle": "6.3.*",
-        "symfony/http-client": "6.3.*",
-        "symfony/intl": "6.3.*",
-        "symfony/mime": "6.3.*",
-        "symfony/monolog-bundle": "^3.8",
-        "symfony/process": "6.3.*",
-        "symfony/property-access": "6.3.*",
-        "symfony/property-info": "6.3.*",
-        "symfony/proxy-manager-bridge": "6.3.*",
-        "symfony/runtime": "6.3.*",
-        "symfony/security-bundle": "6.3.*",
-        "symfony/string": "6.3.*",
-        "symfony/twig-bundle": "6.3.*",
+        "phpstan/phpdoc-parser": "^1.24.5",
+        "symfony/asset": "7.0.*",
+        "symfony/asset-mapper": "7.0.*",
+        "symfony/console": "7.0.*",
+        "symfony/dotenv": "7.0.*",
+        "symfony/expression-language": "7.0.*",
+        "symfony/flex": "^2.4.2",
+        "symfony/form": "7.0.*",
+        "symfony/framework-bundle": "7.0.*",
+        "symfony/http-client": "7.0.*",
+        "symfony/intl": "7.0.*",
+        "symfony/mime": "7.0.*",
+        "symfony/monolog-bundle": "^3.10",
+        "symfony/process": "7.0.*",
+        "symfony/property-access": "7.0.*",
+        "symfony/property-info": "7.0.*",
+        "symfony/runtime": "7.0.*",
+        "symfony/security-bundle": "7.0.*",
+        "symfony/serializer": "7.0.*",
+        "symfony/string": "7.0.*",
+        "symfony/twig-bundle": "7.0.*",
         "symfony/ux-chartjs": "*",
-        "symfony/ux-live-component": "^2.9.0",
-        "symfony/ux-turbo": "^2.9.0",
-        "symfony/ux-twig-component": "^2.9.0",
-        "symfony/web-link": "6.3.*",
-        "symfony/yaml": "6.3.*",
-        "twig/cache-extra": "^3.6",
-        "twig/extra-bundle": "^3.6",
-        "twig/html-extra": "^3.6",
-        "twig/intl-extra": "^3.6",
-        "twig/markdown-extra": "^3.6",
-        "twig/twig": "^3.6"
+        "symfony/ux-live-component": "^2.x-dev@dev",
+        "symfony/ux-turbo": "^2.13.2",
+        "symfony/ux-twig-component": "^2.x-dev@dev",
+        "symfony/validator": "7.0.*",
+        "symfony/web-link": "7.0.*",
+        "symfony/yaml": "7.0.*",
+        "twig/cache-extra": "^3.8",
+        "twig/extra-bundle": "^3.8",
+        "twig/html-extra": "^3.8",
+        "twig/intl-extra": "^3.8",
+        "twig/markdown-extra": "^3.8",
+        "twig/twig": "^3.8"
     },
     "require-dev": {
-        "doctrine/doctrine-fixtures-bundle": "^3.4.4",
-        "fakerphp/faker": "^1.22",
-        "symfony/browser-kit": "6.3.*",
-        "symfony/css-selector": "6.3.*",
-        "symfony/debug-bundle": "6.3.*",
-        "symfony/maker-bundle": "^1.48",
-        "symfony/phpunit-bridge": "^6.2.10",
-        "symfony/stopwatch": "6.3.*",
-        "symfony/web-profiler-bundle": "6.3.*"
+        "doctrine/doctrine-fixtures-bundle": "^3.5.1",
+        "fakerphp/faker": "^1.23",
+        "symfony/browser-kit": "7.0.*",
+        "symfony/css-selector": "7.0.*",
+        "symfony/debug-bundle": "7.0.*",
+        "symfony/maker-bundle": "^1.52",
+        "symfony/phpunit-bridge": "^7",
+        "symfony/stopwatch": "7.0.*",
+        "symfony/web-profiler-bundle": "7.0.*"
     },
     "replace": {
         "symfony/polyfill-ctype": "*",
@@ -108,7 +110,7 @@
     "extra": {
         "symfony": {
             "allow-contrib": false,
-            "require": "6.3.*"
+            "require": "7.0.*"
         }
     }
 }