config: Improve ESLint config + add job in CI (#9)

.editorconfig

@@ -0,0 +1,20 @@
+root = true
+
+[*]
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,ts}]
+indent_style = space
+indent_size = 2
+
+[*.{css,scss}]
+indent_style = space
+indent_size = 2
+
+[*.json]
+indent_style = space
+indent_size = 2

.github/workflows/ci.yaml

@@ -127,4 +127,19 @@ jobs:
 
             -   name: Test PHPUnit
                 run: |
-                    vendor/bin/phpunit
+                    vendor/bin/phpunit
+    eslint:
+      runs-on: ubuntu-latest
+
+      steps:
+        - uses: actions/checkout@v4
+
+        - name: Setup Node
+          uses: actions/setup-node@v4
+          with:
+            node-version: 20
+            cache: 'yarn'
+        - name: Install dependencies
+          run: yarn install --frozen-lockfile
+        - name: Lint code
+          run: yarn lint --max-warnings 0

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "printWidth": 120
+}

assets/dist/controller.js

@@ -66,17 +66,18 @@ class default_1 extends Controller {
         window.addEventListener('modal:close', () => this.closeModal());
     }
     changeDisplayMode(event) {
-        document.querySelectorAll('.fm-c-toggle-buttons__action').forEach((button) => {
+        document.querySelectorAll('.fm-c-toggle-buttons__action').forEach(button => {
             button.classList.remove('fm-c-toggle-buttons__action--active');
         });
         event.currentTarget.classList.add('fm-c-toggle-buttons__action--active');
         const mode = event.params.mode;
-        this.cardTargets.forEach((card) => {
+        this.cardTargets.forEach(card => {
             card.classList.toggle('display-grid', mode === 'grid');
         });
         this.listTarget.classList.toggle('fm-c-content__cards--grid', mode === 'grid');
     }
-    openModal({ params }) {
+    openModal(event) {
+        const { params } = event;
         if (params.value) {
             this.modalOldValueTarget.value = params.value;
             this.modalOldValueTarget.dispatchEvent(new Event('change', { bubbles: true }));
@@ -137,6 +138,16 @@ class default_1 extends Controller {
         this.collapseMap.delete(element);
     }
 }
-default_1.targets = ['list', 'card', 'dialog', 'modalAction', 'modalOldValue', 'select', 'dropdown', 'submenu', 'collapse'];
+default_1.targets = [
+    'list',
+    'card',
+    'dialog',
+    'modalAction',
+    'modalOldValue',
+    'select',
+    'dropdown',
+    'submenu',
+    'collapse',
+];
 
 export { default_1 as default };

assets/src/controller.ts

@@ -1,117 +1,129 @@
 import './styles.scss';
 
-import {ActionEvent, Controller} from "@hotwired/stimulus";
-import {Toggle} from "./scripts/toggle";
-import {Collapse} from "./scripts/collapse";
+import { type ActionEvent, Controller } from '@hotwired/stimulus';
+import { Toggle } from './scripts/toggle';
+import { Collapse } from './scripts/collapse';
 
 export default class extends Controller {
-    static targets = [ 'list', 'card', 'dialog', 'modalAction', 'modalOldValue', 'select', 'dropdown', 'submenu', 'collapse' ];
-
-    declare listTarget: HTMLElement;
-    declare cardTargets: HTMLElement[];
-    declare dialogTarget: HTMLDialogElement;
-    declare modalActionTarget: HTMLInputElement;
-    declare modalOldValueTarget: HTMLInputElement;
-
-    private toggleMap: Map<HTMLElement, Toggle> = new Map();
-    private collapseMap: Map<HTMLElement, Collapse> = new Map();
-
-    initialize() {
-        window.addEventListener('modal:close', () => this.closeModal());
+  static targets = [
+    'list',
+    'card',
+    'dialog',
+    'modalAction',
+    'modalOldValue',
+    'select',
+    'dropdown',
+    'submenu',
+    'collapse',
+  ];
+
+  declare listTarget: HTMLElement;
+  declare cardTargets: HTMLElement[];
+  declare dialogTarget: HTMLDialogElement;
+  declare modalActionTarget: HTMLInputElement;
+  declare modalOldValueTarget: HTMLInputElement;
+
+  private toggleMap: Map<HTMLElement, Toggle> = new Map();
+  private collapseMap: Map<HTMLElement, Collapse> = new Map();
+
+  initialize() {
+    window.addEventListener('modal:close', () => this.closeModal());
+  }
+
+  changeDisplayMode(event: ActionEvent) {
+    document.querySelectorAll('.fm-c-toggle-buttons__action').forEach(button => {
+      button.classList.remove('fm-c-toggle-buttons__action--active');
+    });
+    (event.currentTarget as HTMLButtonElement).classList.add('fm-c-toggle-buttons__action--active');
+
+    const mode = event.params.mode;
+
+    this.cardTargets.forEach(card => {
+      card.classList.toggle('display-grid', mode === 'grid');
+    });
+    this.listTarget.classList.toggle('fm-c-content__cards--grid', mode === 'grid');
+  }
+
+  openModal(event: ActionEvent) {
+    const { params } = event;
+
+    if (params.value) {
+      this.modalOldValueTarget.value = params.value;
+      this.modalOldValueTarget.dispatchEvent(new Event('change', { bubbles: true }));
     }
 
-    changeDisplayMode(event: ActionEvent) {
-        document.querySelectorAll('.fm-c-toggle-buttons__action').forEach((button) => {
-            button.classList.remove('fm-c-toggle-buttons__action--active')
-        });
-        (event.currentTarget as HTMLButtonElement).classList.add('fm-c-toggle-buttons__action--active');
+    this.modalActionTarget.value = params.action;
+    this.modalActionTarget.dispatchEvent(new Event('change', { bubbles: true }));
 
-        const mode = event.params.mode;
-
-        this.cardTargets.forEach((card) => {
-            card.classList.toggle('display-grid', mode === 'grid')
-        });
-        this.listTarget.classList.toggle('fm-c-content__cards--grid', mode === 'grid');
-    }
-
-    openModal({params}: {params: any}) {
-        if (params.value) {
-            this.modalOldValueTarget.value = params.value;
-            this.modalOldValueTarget.dispatchEvent(new Event('change', { bubbles: true }));
-        }
-
-        this.modalActionTarget.value = params.action;
-        this.modalActionTarget.dispatchEvent(new Event('change', { bubbles: true }));
-
-        this.dialogTarget.showModal();
-        this.dialogTarget.classList.add('fm-c-modal--open');
-        document.body.classList.add('fm-u-overflow-hidden');
-    }
+    this.dialogTarget.showModal();
+    this.dialogTarget.classList.add('fm-c-modal--open');
+    document.body.classList.add('fm-u-overflow-hidden');
+  }
 
-    closeModal() {
-        this.modalOldValueTarget.value = '';
-        this.modalOldValueTarget.dispatchEvent(new Event('change', { bubbles: true }));
-        this.modalActionTarget.value = '';
-        this.modalActionTarget.dispatchEvent(new Event('change', { bubbles: true }));
+  closeModal() {
+    this.modalOldValueTarget.value = '';
+    this.modalOldValueTarget.dispatchEvent(new Event('change', { bubbles: true }));
+    this.modalActionTarget.value = '';
+    this.modalActionTarget.dispatchEvent(new Event('change', { bubbles: true }));
 
-        this.dialogTarget.classList.remove('fm-c-modal--open');
-        this.dialogTarget.close();
-        document.body.classList.remove('fm-u-overflow-hidden');
-    }
+    this.dialogTarget.classList.remove('fm-c-modal--open');
+    this.dialogTarget.close();
+    document.body.classList.remove('fm-u-overflow-hidden');
+  }
 
-    selectTargetConnected(element: HTMLElement) {
-        const toggle = new Toggle(element, '.fm-c-custom-select__input-wrapper', '.fm-c-custom-select__list-wrapper');
-        toggle.connect();
+  selectTargetConnected(element: HTMLElement) {
+    const toggle = new Toggle(element, '.fm-c-custom-select__input-wrapper', '.fm-c-custom-select__list-wrapper');
+    toggle.connect();
 
-        this.toggleMap.set(element, toggle);
-    }
+    this.toggleMap.set(element, toggle);
+  }
 
-    selectTargetDisconnected(element: HTMLElement) {
-        const toggle = this.toggleMap.get(element) as Toggle;
-        toggle.disconnect()
+  selectTargetDisconnected(element: HTMLElement) {
+    const toggle = this.toggleMap.get(element) as Toggle;
+    toggle.disconnect();
 
-        this.toggleMap.delete(element);
-    }
+    this.toggleMap.delete(element);
+  }
 
-    dropdownTargetConnected(element: HTMLElement) {
-        const toggle = new Toggle(element, '.fm-c-card-actions__action', '.fm-c-card-actions__content');
-        toggle.connect();
+  dropdownTargetConnected(element: HTMLElement) {
+    const toggle = new Toggle(element, '.fm-c-card-actions__action', '.fm-c-card-actions__content');
+    toggle.connect();
 
-        this.toggleMap.set(element, toggle);
-    }
+    this.toggleMap.set(element, toggle);
+  }
 
-    dropdownTargetDisconnected(element: HTMLElement) {
-        const toggle = this.toggleMap.get(element) as Toggle;
-        toggle.disconnect()
+  dropdownTargetDisconnected(element: HTMLElement) {
+    const toggle = this.toggleMap.get(element) as Toggle;
+    toggle.disconnect();
 
-        this.toggleMap.delete(element);
-    }
+    this.toggleMap.delete(element);
+  }
 
-    submenuTargetConnected(element: HTMLElement) {
-        const toggle = new Toggle(element, '.fm-c-content__sticky-button', '.fm-c-submenu', '.fm-c-submenu__content');
-        toggle.connect();
+  submenuTargetConnected(element: HTMLElement) {
+    const toggle = new Toggle(element, '.fm-c-content__sticky-button', '.fm-c-submenu', '.fm-c-submenu__content');
+    toggle.connect();
 
-        this.toggleMap.set(element, toggle);
-    }
+    this.toggleMap.set(element, toggle);
+  }
 
-    submenuTargetDisconnected(element: HTMLElement) {
-        const toggle = this.toggleMap.get(element) as Toggle;
-        toggle.disconnect()
+  submenuTargetDisconnected(element: HTMLElement) {
+    const toggle = this.toggleMap.get(element) as Toggle;
+    toggle.disconnect();
 
-        this.toggleMap.delete(element);
-    }
+    this.toggleMap.delete(element);
+  }
 
-    collapseTargetConnected(element: HTMLElement) {
-        const collapse = new Collapse(element);
-        collapse.connect();
+  collapseTargetConnected(element: HTMLElement) {
+    const collapse = new Collapse(element);
+    collapse.connect();
 
-        this.collapseMap.set(element, collapse);
-    }
+    this.collapseMap.set(element, collapse);
+  }
 
-    collapseTargetDisconnected(element: HTMLElement) {
-        const collapse = this.collapseMap.get(element) as Collapse;
-        collapse.disconnect()
+  collapseTargetDisconnected(element: HTMLElement) {
+    const collapse = this.collapseMap.get(element) as Collapse;
+    collapse.disconnect();
 
-        this.collapseMap.delete(element);
-    }
-}
+    this.collapseMap.delete(element);
+  }
+}

assets/src/scripts/collapse.ts

@@ -1,33 +1,33 @@
 export class Collapse {
-    element: HTMLElement;
-    trigger: HTMLElement;
-    wrapper?: HTMLElement;
-    content?: HTMLElement;
-    visible: boolean = false;
+  element: HTMLElement;
+  trigger: HTMLElement;
+  wrapper?: HTMLElement;
+  content?: HTMLElement;
+  visible: boolean = false;
 
-    constructor(element: HTMLElement) {
-        this.element = element;
-        this.trigger = element.querySelector('.fm-c-collapse__arrow') as HTMLElement;
-        this.wrapper = element.querySelector('.fm-c-collapse__wrapper') as HTMLElement;
-        this.content = element.querySelector('.fm-c-collapse__content') as HTMLElement;
-        this.visible = 'true' === element.dataset.visible;
-    }
+  constructor(element: HTMLElement) {
+    this.element = element;
+    this.trigger = element.querySelector('.fm-c-collapse__arrow') as HTMLElement;
+    this.wrapper = element.querySelector('.fm-c-collapse__wrapper') as HTMLElement;
+    this.content = element.querySelector('.fm-c-collapse__content') as HTMLElement;
+    this.visible = 'true' === element.dataset.visible;
+  }
 
-    connect() {
-        this.trigger.addEventListener('click', this.collapse.bind(this), true);
-    }
+  connect() {
+    this.trigger.addEventListener('click', this.collapse.bind(this), true);
+  }
 
-    disconnect() {
-        this.trigger.removeEventListener('click', this.collapse.bind(this), true);
-    }
+  disconnect() {
+    this.trigger.removeEventListener('click', this.collapse.bind(this), true);
+  }
 
-    collapse() {
-        if (null === this.wrapper || null === this.content) return;
+  collapse() {
+    if (null === this.wrapper || null === this.content) return;
 
-        this.visible = !this.visible;
+    this.visible = !this.visible;
 
-        this.element.classList.toggle('fm-c-collapse--visible', this.visible);
-        this.element.classList.toggle('fm-c-collapse--hidden', !this.visible);
-        this.element.dataset.visible = this.visible ? 'true' : 'false';
-    }
-}
+    this.element.classList.toggle('fm-c-collapse--visible', this.visible);
+    this.element.classList.toggle('fm-c-collapse--hidden', !this.visible);
+    this.element.dataset.visible = this.visible ? 'true' : 'false';
+  }
+}