chore(assets): modernise frontend lint tooling (ESLint 10 flat config, Prettier 3, Stylelint 17)

.babelrc

@@ -6,19 +6,5 @@
         "modules": false
       }
     ]
-  ],
-  "env": {
-    "test": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "targets": {
-              "node": "current"
-            }
-          }
-        ]
-      ]
-    }
-  }
+  ]
 }

.prettierrc

@@ -1,8 +1,8 @@
 {
+  "arrowParens": "avoid",
   "bracketSpacing": true,
+  "printWidth": 120,
   "singleQuote": true,
-  "jsxBracketSameLine": true,
-  "trailingComma": "all",
-  "printWidth": 80,
-  "semi": true
-}
+  "semi": true,
+  "trailingComma": "all"
+}

.stylelintrc

@@ -3,9 +3,43 @@
     "stylelint-config-standard",
     "stylelint-config-recommended-scss"
   ],
-  "syntax": "scss",
+  "customSyntax": "postcss-scss",
   "plugins": ["stylelint-scss"],
+  "ignoreFiles": [
+    "assets/scss/vendor/**/*.scss"
+  ],
   "rules": {
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+
+    "selector-class-pattern": [
+      "^[a-z][a-z0-9]*(?:-[a-z0-9]+)*(?:__[a-z][a-z0-9]*(?:-[a-z0-9]+)*)?(?:--[a-z][a-z0-9]*(?:-[a-z0-9]+)*)*$",
+      {
+        "message": "Expected class selector to be kebab-case BEM (block__element--modifier)"
+      }
+    ],
+
+    "import-notation": null,
+    "no-invalid-position-at-import-rule": null,
+    "scss/load-no-partial-leading-underscore": null,
+    "scss/load-partial-extension": null,
+
+    "alpha-value-notation": null,
+    "color-function-alias-notation": null,
+    "color-function-notation": null,
+    "custom-property-pattern": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "number-max-precision": null,
+    "property-no-deprecated": null,
+    "property-no-vendor-prefix": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/comment-no-empty": null,
+    "scss/no-global-function-names": null,
+    "scss/operator-no-unspaced": null,
+    "selector-attribute-quotes": null,
+    "selector-id-pattern": null,
+    "selector-not-notation": null,
+    "shorthand-property-no-redundant-values": null,
+    "value-keyword-case": null,
+    "function-url-quotes": null
   }
 }

assets/js/app/ajax-save.js

@@ -14,10 +14,10 @@ record_id = JSON.stringify(record_id);
 /**
  * Start of Ajaxy solution for saving
  */
-$(document).ready(function() {
+$(document).ready(function () {
     let unsaved = false;
 
-    $(form).change(function() {
+    $(form).change(function () {
         //triggers change in all input fields including text type
         unsaved = true;
     });
@@ -48,13 +48,13 @@ $(document).ready(function() {
         $('#toastType').append(toastType);
         $('#toastBody').append(toastMessage);
 
-        $(document).ready(function() {
+        $(document).ready(function () {
             let toastElList = [].slice.call(document.querySelectorAll('.toast'));
-            let toastList = toastElList.map(function(toastEl) {
+            let toastList = toastElList.map(function (toastEl) {
                 return new Toast(toastEl, []);
             });
 
-            toastList.forEach(function(toast) {
+            toastList.forEach(function (toast) {
                 toast.show();
             });
         });
@@ -67,25 +67,25 @@ $(document).ready(function() {
 
     // For classic POST: disable only after native HTML5 validation has passed (submit event)
     if (elementSubmit.length) {
-        $(form).on('submit', function() {
+        $(form).on('submit', function () {
             elementSubmit.prop('disabled', true);
         });
     }
 
-    elementButton.on('click', function() {
+    elementButton.on('click', function () {
         elementButton.prop('disabled', true);
         $.ajax({
             type: 'POST',
             link: url,
             data: $(form).serialize(),
-            beforeSend: function() {
+            beforeSend: function () {
                 patience_virtue(elementButton);
             },
-            complete: function() {
+            complete: function () {
                 renable();
                 elementButton.prop('disabled', false);
             },
-            success: function(data, textStatus) {
+            success: function (data, textStatus) {
                 if (!record_id) {
                     window.location.replace(data.url);
                 } else if (window.location.pathname === '/bolt/duplicate/' + duplicate_id) {
@@ -98,7 +98,7 @@ $(document).ready(function() {
                     showToast();
                 }
             },
-            error: function(jq, status, err) {
+            error: function (jq, status, err) {
                 // eslint-disable-next-line no-console
                 console.log(status, err);
                 showToast();

assets/js/app/common.js

@@ -8,7 +8,7 @@ import ClipboardJS from 'clipboard';
 import { version } from '../version';
 window.assetsVersion = version;
 
-$(document).ready(function() {
+$(document).ready(function () {
     // add a js class to indicate we have JS enabled. Might need a change to either modernizr or somethng comparable
     $('html').addClass('js');
 
@@ -20,7 +20,7 @@ $(document).ready(function() {
      */
     $('.admin__sidebar').addClass('admin__sidebar--is-collapsed');
 
-    $('.admin-sidebar-toggler').on('click', function() {
+    $('.admin-sidebar-toggler').on('click', function () {
         if ($('.admin__sidebar').hasClass('admin__sidebar--is-collapsed')) {
             $('.admin__sidebar')
                 .addClass('admin__sidebar--is-expanded')
@@ -52,7 +52,7 @@ $(document).ready(function() {
         }, 50);
     }
 
-    $('a[data-bs-toggle="tab"]').on('click', function() {
+    $('a[data-bs-toggle="tab"]').on('click', function () {
         let newUrl;
         const hash = $(this).attr('href');
         newUrl = url.split('#')[0] + hash;
@@ -62,23 +62,23 @@ $(document).ready(function() {
     /*
      ** Convert all ISO dates with class .datetime-relative to relative time
      */
-    $('.datetime-relative').each(function() {
+    $('.datetime-relative').each(function () {
         $(this).text(DateTime.fromISO($(this).text()).toRelative());
     });
 
     /*
      ** Initialise all popover elements
      */
     let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
-    popoverTriggerList.map(function(popoverTriggerEl) {
+    popoverTriggerList.map(function (popoverTriggerEl) {
         return new Popover(popoverTriggerEl);
     });
 
     /*
      ** When a field from another group is invalid, show it.
      */
-    $('#editor button[type="submit"]').click(function() {
-        $('#editor input:invalid').each(function() {
+    $('#editor button[type="submit"]').click(function () {
+        $('#editor input:invalid').each(function () {
             // Find the tab-pane that this element is inside, and get the id
             let $closest = $(this).closest('.tab-pane');
             let id = $closest.attr('id');
@@ -97,20 +97,15 @@ $(document).ready(function() {
      ** Simulates disabled behavior for elements with data-readonly attribute.
      * This is needed, because a disabled input cannot be required.
      */
-    $('[data-readonly]').on('keydown paste', function(e) {
+    $('[data-readonly]').on('keydown paste', function (e) {
         e.preventDefault();
     });
     /* Part of the code above, however make sure flatpickr is not readonly
      * and that its validation works.
      */
-    $('.editor--date')
-        .siblings()
-        .prop('readonly', false)
-        .attr('data-readonly', 'readonly');
+    $('.editor--date').siblings().prop('readonly', false).attr('data-readonly', 'readonly');
     $('.editor--date').on('change', e => {
-        const target = $(e.target)
-            .parent()
-            .find('input[data-readonly="readonly"]');
+        const target = $(e.target).parent().find('input[data-readonly="readonly"]');
         if (target.val()) {
             target[0].setCustomValidity('');
         } else {
@@ -136,15 +131,12 @@ $(document).ready(function() {
     $('[data-errormessage]').on('input', handleInput);
 
     /* Set the errormessage on the correct editor--date field */
-    $('.editor--date').each(function() {
+    $('.editor--date').each(function () {
         let siblings = $(this).siblings();
         const errormessage = $(this).attr('data-errormessage');
 
-        siblings.each(function() {
-            $(this)
-                .attr('data-errormessage', errormessage)
-                .on('invalid', handleInvalid)
-                .on('input', handleInput);
+        siblings.each(function () {
+            $(this).attr('data-errormessage', errormessage).on('invalid', handleInvalid).on('input', handleInput);
         });
     });
     /* End of custom error message */
@@ -161,7 +153,7 @@ $(document).ready(function() {
 
     // Reset the content of a modal to it's default
 
-    window.$(document).on('click', '[data-bs-toggle="modal"]', function(event) {
+    window.$(document).on('click', '[data-bs-toggle="modal"]', function (event) {
         let resourcesModal = document.getElementById('resourcesModal');
 
         let saveButton = document.getElementById('modalButtonAccept');