feat: migrate theme switcher to Stimulus controller

Author: camilleislasse

…AdminUi/assets/scripts/theme-switcher.js …controllers/theme-switcher-controller.jssrc/BootstrapAdminUi/assets/scripts/theme-switcher.js renamed to src/BootstrapAdminUi/assets/controllers/theme-switcher-controller.js src/BootstrapAdminUi/assets/scripts/theme-switcher.js renamed to src/BootstrapAdminUi/assets/controllers/theme-switcher-controller.js

@@ -1,10 +1,10 @@
-const toggleButton = document.querySelector('[data-theme-toggle]');
+import { Controller } from '@hotwired/stimulus';
 
-if (toggleButton) {
-    toggleButton.addEventListener('click', () => {
+export default class extends Controller {
+    toggle() {
         const current = document.documentElement.getAttribute('data-bs-theme') || 'light';
         const next = current === 'dark' ? 'light' : 'dark';
         localStorage.setItem('sylius-theme', next);
         document.documentElement.setAttribute('data-bs-theme', next);
-    });
+    }
 }

src/BootstrapAdminUi/assets/entrypoint.js

@@ -14,4 +14,3 @@ import './scripts/check-all';
 import './scripts/menu-search';
 
 import './scripts/bootstrap';
-import './scripts/theme-switcher';

src/BootstrapAdminUi/composer.json

@@ -14,6 +14,7 @@
         "symfony/http-kernel": "^6.4 || ^7.4 || ^8.0",
         "symfony/http-client": "^6.4 || ^7.4 || ^8.0",
         "symfony/security-bundle": "^6.4 || ^7.4 || ^8.0",
+        "symfony/stimulus-bundle": "^2.17",
         "symfony/ux-autocomplete": "^2.17",
         "symfony/ux-icons": "^2.20",
         "symfony/ux-live-component": "^2.17"

src/BootstrapAdminUi/templates/shared/crud/common/navbar/items/theme_switcher.html.twig

@@ -1,5 +1,5 @@
-<div class="nav-item">
-    <button class="btn btn-icon btn-ghost-secondary" data-theme-toggle aria-label="Toggle theme">
+<div class="nav-item" {{ stimulus_controller('theme-switcher') }}>
+    <button class="btn btn-icon btn-ghost-secondary" {{ stimulus_action('theme-switcher', 'toggle') }} aria-label="Toggle theme">
         {{ ux_icon('tabler:sun', {'class': 'icon', 'data-theme-switch': 'light'}) }}
         {{ ux_icon('tabler:moon', {'class': 'icon', 'data-theme-switch': 'dark'}) }}
     </button>

src/BootstrapAdminUi/tests/Functional/.application/config/bundles.php

@@ -26,4 +26,5 @@
     BabDev\PagerfantaBundle\BabDevPagerfantaBundle::class => ['all' => true],
     Sylius\AdminUi\Symfony\SyliusAdminUiBundle::class => ['all' => true],
     Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
+    Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
 ];