chore: format Js/css

.prettierignore

@@ -0,0 +1 @@
+assets/vendor/

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "arrowParens": "always",
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "useTabs": false,
+  "tabWidth": 4
+}

Makefile

@@ -10,7 +10,7 @@ COVERAGE_THRESHOLD = 100
 ## —— 🎶 The MicroSymfony Makefile 🎶 ——————————————————————————————————————————
 help: ## Outputs this help screen
 	@grep -E '(^[a-zA-Z0-9_-]+:.*?##.*$$)|(^##)' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}{printf "\033[32m%-30s\033[0m %s\n", $$1, $$2}' | sed -e 's/\[32m##/[33m/'
-.PHONY: help start stop go-prod go-dev purge test test-api test-e2e test-functional test-integration test-unit coverage cov-report stan fix-php lint-php lint-container lint-twig lint-yaml fix lint ci deploy
+.PHONY: help start stop go-prod go-dev purge test test-api test-e2e test-functional test-integration test-unit coverage cov-report stan fix-php fix-js fix-css lint-php lint-container lint-twig lint-yaml fix lint ci deploy
 .PHONY: version-php version-composer version-symfony version-phpunit version-phpstan version-php-cs-fixer check-requirements le-renew
 
 
@@ -88,6 +88,12 @@ var/cache/dev/App_KernelDevDebugContainer.xml:
 fix-php: ## Fix PHP files with php-cs-fixer (ignore PHP version warning)
 	@PHP_CS_FIXER_IGNORE_ENV=1 vendor/bin/php-cs-fixer fix $(PHP_CS_FIXER_ARGS)
 
+fix-js: ## Format JS files with prettier (need npm installed)
+	npx prettier --write "assets/**/*.js"
+
+fix-css: ## Format CSS files with prettier (need npm installed)
+	npx prettier --write "assets/styles/**/*.css"
+
 lint-php: ## Lint PHP files with php-cs-fixer (report only)
 lint-php: PHP_CS_FIXER_ARGS=--dry-run
 lint-php: fix-php
@@ -102,7 +108,7 @@ lint-yaml: ## Lint YAML files
 	@bin/console lint:yaml --parse-tags config/
 
 fix: ## Run all fixers
-fix: fix-php
+fix: fix-php fix-js fix-css
 
 lint: ## Run all linters
 lint: stan lint-php lint-container lint-twig lint-yaml

assets/app.js

@@ -14,6 +14,6 @@ import './styles/app.css';
 
 // "optin" - No turbo forms unless you insist. Use data-turbo="true" to enable turbo on individual forms.
 // @see https://stackoverflow.com/a/76286583/633864
-Turbo.config.forms.mode = 'optin' // "on" | "off" | "optin"
+Turbo.config.forms.mode = 'optin'; // "on" | "off" | "optin"
 
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉')
+console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/controllers/api_controller.js

@@ -1,27 +1,27 @@
-import {Controller} from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-    static targets = ["title", "slug"]
+    static targets = ['title', 'slug'];
     static values = {
-        "url": String
-    }
+        url: String,
+    };
 
     connect() {
-        console.log("Dataset: ", this.element.dataset) // list all data properties of the controller
+        console.log('Dataset: ', this.element.dataset); // list all data properties of the controller
     }
 
     slugify() {
-        let apiUrl = this.urlValue + '?title=' + this.titleTarget.value
-        const slugTarget = this.slugTarget
+        let apiUrl = this.urlValue + '?title=' + this.titleTarget.value;
+        const slugTarget = this.slugTarget;
         fetch(apiUrl)
             .then(function (response) {
-                return response.json()
+                return response.json();
             })
             .then(function (data) {
-                slugTarget.value = data.slug
+                slugTarget.value = data.slug;
             })
             .catch(function (error) {
                 console.log('An error occured. 😞', error);
-            })
+            });
     }
 }

assets/controllers/header_controller.js

@@ -1,4 +1,4 @@
-import {Controller} from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus';
 
 /**
  * Stimulus version of Pico minimal-theme-switcher.js (see link below).
@@ -7,23 +7,23 @@ import {Controller} from '@hotwired/stimulus';
  * @see https://x4qtf8.csb.app/js/minimal-theme-switcher.js
  */
 export default class extends Controller {
-    static targets = ["lightEmoji", "darkEmoji"];
-    scheme = "light";
+    static targets = ['lightEmoji', 'darkEmoji'];
+    scheme = 'light';
     rootAttribute = 'data-theme';
-    localStorageKey = "picoPreferredColorScheme";
+    localStorageKey = 'picoPreferredColorScheme';
 
     connect() {
         this.scheme = this.schemeFromLocalStorage();
         this.applyScheme();
     }
 
     setDarkMode() {
-        this.setScheme( 'dark');
+        this.setScheme('dark');
         this.applyScheme();
     }
 
     setLightMode() {
-        this.setScheme( 'light');
+        this.setScheme('light');
         this.applyScheme();
     }
 
@@ -38,7 +38,7 @@ export default class extends Controller {
 
     // Apply scheme
     applyScheme() {
-        document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+        document.querySelector('html')?.setAttribute(this.rootAttribute, this.scheme);
         this.schemeToUi();
     }
 

assets/controllers/hello_controller.js

@@ -1,24 +1,24 @@
-import {Controller} from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-    static targets = ["name", "greeting", "dialog", "form"]
+    static targets = ['name', 'greeting', 'dialog', 'form'];
 
     connect() {
-        console.log("Hello, Stimulus!", this.element)
+        console.log('Hello, Stimulus!', this.element);
         // this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
     }
 
     greet() {
         if (!this.formTarget.reportValidity()) {
-            return
+            return;
         }
 
-        this.greetingTarget.innerHTML = `Hello, ${this.nameTarget.value}!`
-        this.dialogTarget.showModal()
+        this.greetingTarget.innerHTML = `Hello, ${this.nameTarget.value}!`;
+        this.dialogTarget.showModal();
     }
 
     reset() {
-        this.nameTarget.value = ''
-        this.greetingTarget.innerHTML = ''
+        this.nameTarget.value = '';
+        this.greetingTarget.innerHTML = '';
     }
 }

assets/styles/app.css

@@ -6,7 +6,7 @@
  * @see https://picocss.com/docs/css-variables#all-css-variables
  */
 :root {
-    --pico-font-size: 100%;  /* default size is 131.25% */
+    --pico-font-size: 100%; /* default size is 131.25% */
 }
 
 /* Layout ——————————————————————————————————————————————————————————————————— */
@@ -48,7 +48,7 @@ footer span.versions {
  * @see https://symfony.com/doc/current/forms.html#form-type-options
  */
 label.required:after {
-    content: " *";
+    content: ' *';
     font-weight: bold;
 }
 
@@ -58,4 +58,3 @@ label.required:after {
 form > div > div > ul > li {
     color: red;
 }
-