feat(showcase): add modern eslint & prettier

Author: aklkv

package.json

@@ -19,7 +19,7 @@
     "@glint/core": "^1.5.2",
     "dotenv": "^16.4.7"
   },
-  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
   "engines": {
     "pnpm": ">= 10.0.0"
   },

pnpm-lock.yaml

@@ -2,19 +2,17 @@
 
 module.exports = {
   plugins: ['prettier-plugin-ember-template-tag'],
-  templateSingleQuote: false,
-  trailingComma: 'es5',
   overrides: [
     {
-      files: '*.{js,ts,gjs,gts}',
+      files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',
       options: {
         singleQuote: true,
+        templateSingleQuote: false,
       },
     },
     {
       files: '*.hbs',
       options: {
-        singleQuote: false,
         printWidth: 120,
       },
     },

showcase/.eslintignore

@@ -471,7 +471,7 @@ const SAMPLE_MODEL = [
 
 const updateModelWithSelectAllState = (
   modelData: HdsAdvancedTableSignature['Args']['model'],
-  selectAllState: boolean
+  selectAllState: boolean,
 ) => {
   modelData.forEach((modelRow) => {
     modelRow['isSelected'] = selectAllState;
@@ -480,10 +480,10 @@ const updateModelWithSelectAllState = (
 
 const updateModelWithSelectableRowsStates = (
   modelData: HdsAdvancedTableSignature['Args']['model'],
-  selectableRowsStates: HdsAdvancedTableOnSelectionChangeSignature['selectableRowsStates']
+  selectableRowsStates: HdsAdvancedTableOnSelectionChangeSignature['selectableRowsStates'],
 ) => {
   const modelDataMap = new Map(
-    modelData.map((modelRow) => [modelRow['id'], modelRow])
+    modelData.map((modelRow) => [modelRow['id'], modelRow]),
   );
   selectableRowsStates.forEach((row) => {
     // safe to assume that there is always a record for the "selectionKey" since it's coming from the model (the selectable "rows" are a subset of the model dataset)
@@ -505,6 +505,7 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
     selectionCheckboxElement,
     selectableRowsStates,
   }: HdsAdvancedTableOnSelectionChangeSignature) {
+    // eslint-disable-next-line prefer-rest-params
     console.log(...arguments);
 
     if (selectionKey === 'all' && this.demoModel) {

showcase/.eslintrc.js

@@ -35,7 +35,7 @@ export default class ShwFrameComponent extends Component<ShwFrameSignature> {
     if (!src.match(/$\//)) {
       assert(
         `@src for "Shw::Frame" must be an absolute path (starting with '/') - Provided: ${src}`,
-        true
+        true,
       );
     }
 
@@ -51,7 +51,7 @@ export default class ShwFrameComponent extends Component<ShwFrameSignature> {
     // we accept only px or percentage
     assert(
       `@width for "Shw::Frame" must be a number or a percentage - Provided: ${width}`,
-      width.match(/^[\d]+%?$/)
+      width.match(/^[\d]+%?$/),
     );
 
     return width.match(/^[\d]+$/) ? `${width}px` : width;
@@ -66,7 +66,7 @@ export default class ShwFrameComponent extends Component<ShwFrameSignature> {
     // we accept only px
     assert(
       `@height for "Shw::Frame" must be a number - Provided: ${height}`,
-      height.match(/^[\d]+?$/)
+      height.match(/^[\d]+?$/),
     );
 
     return `${height}px`;

showcase/.prettierrc.js

@@ -59,9 +59,9 @@ export default class ShwText extends Component<ShwTextSignature> {
     if (tag) {
       assert(
         `@tag for "Shw::Text" must be one of the following: ${AVAILABLE_TAGS.join(
-          ', '
+          ', ',
         )}; received: ${tag}`,
-        AVAILABLE_TAGS.includes(tag)
+        AVAILABLE_TAGS.includes(tag),
       );
     }
 
@@ -82,7 +82,7 @@ export default class ShwText extends Component<ShwTextSignature> {
 
     assert(
       `You need to provide a @variant arguments to "Shw::Text"`,
-      variant !== undefined
+      variant !== undefined,
     );
 
     return variant;
@@ -101,9 +101,9 @@ export default class ShwText extends Component<ShwTextSignature> {
     if (align) {
       assert(
         `@align for "Shw::Text" must be one of the following: ${AVAILABLE_ALIGNS.join(
-          ', '
+          ', ',
         )}; received: ${align}`,
-        AVAILABLE_ALIGNS.includes(align)
+        AVAILABLE_ALIGNS.includes(align),
       );
     }
 

showcase/app/components/mock/app/main/generic-advanced-table.gts

@@ -12,7 +12,7 @@ function replaceMockStates() {
     let targets;
     if (element.attributes['mock-state-selector']) {
       targets = element.querySelectorAll(
-        element.attributes['mock-state-selector'].value
+        element.attributes['mock-state-selector'].value,
       );
     } else {
       targets = [element];

showcase/app/components/shw/frame/index.gts

@@ -25,10 +25,10 @@ const updateModelWithSelectAllState = (modelData, selectAllState) => {
 
 const updateModelWithSelectableRowsStates = (
   modelData,
-  selectableRowsStates
+  selectableRowsStates,
 ) => {
   const modelDataMap = new Map(
-    modelData.map((modelRow) => [modelRow.id, modelRow])
+    modelData.map((modelRow) => [modelRow.id, modelRow]),
   );
   selectableRowsStates.forEach((row) => {
     // safe to assume that there is always a record for the "selectionKey" since it's coming from the model (the selectable "rows" are a subset of the model dataset)
@@ -65,7 +65,7 @@ export default class ComponentsTableController extends Controller {
       return {
         ...record,
         'status-sort-order': customSortingCriteriaArray.indexOf(
-          record['status']
+          record['status'],
         ),
       };
     });
@@ -110,7 +110,7 @@ export default class ComponentsTableController extends Controller {
       });
     } else {
       const recordToUpdate = this.multiSelectSelectableData.find(
-        (modelRow) => modelRow.id === selectionKey
+        (modelRow) => modelRow.id === selectionKey,
       );
 
       if (recordToUpdate) {
@@ -133,7 +133,7 @@ export default class ComponentsTableController extends Controller {
     } else {
       const remainder = this.multiSelectFilterRows__demo1 === 'even' ? 0 : 1;
       return this.multiSelectModelData__demo1.filter(
-        (item) => item.id % 2 === remainder
+        (item) => item.id % 2 === remainder,
       );
     }
   }
@@ -163,12 +163,12 @@ export default class ComponentsTableController extends Controller {
     if (selectionKey === 'all' && this.multiSelectToggleScope__demo1) {
       updateModelWithSelectAllState(
         this.multiSelectModelData__demo1,
-        selectionCheckboxElement.checked
+        selectionCheckboxElement.checked,
       );
     } else {
       updateModelWithSelectableRowsStates(
         this.multiSelectModelData__demo1,
-        selectableRowsStates
+        selectableRowsStates,
       );
     }
   }
@@ -243,12 +243,12 @@ export default class ComponentsTableController extends Controller {
     if (selectionKey === 'all' && this.multiSelectToggleScope__demo2) {
       updateModelWithSelectAllState(
         this.multiSelectModelData__demo2,
-        selectionCheckboxElement.checked
+        selectionCheckboxElement.checked,
       );
     } else {
       updateModelWithSelectableRowsStates(
         this.multiSelectModelData__demo2,
-        selectableRowsStates
+        selectableRowsStates,
       );
     }
   }
@@ -302,12 +302,12 @@ export default class ComponentsTableController extends Controller {
     if (selectionKey === 'all' && this.multiSelectToggleScope__demo3) {
       updateModelWithSelectAllState(
         this.multiSelectModelData__demo3,
-        selectionCheckboxElement.checked
+        selectionCheckboxElement.checked,
       );
     } else {
       selectableRowsStates.forEach((row) => {
         const recordToUpdate = this.multiSelectModelData__demo3.find(
-          (modelRow) => modelRow.id === row.selectionKey
+          (modelRow) => modelRow.id === row.selectionKey,
         );
         if (recordToUpdate) {
           recordToUpdate.isSelected = row.isSelected;
@@ -319,7 +319,7 @@ export default class ComponentsTableController extends Controller {
   @action
   multiSelectDeleteSelectedUsers_demo3() {
     const newData = this.multiSelectModelData__demo3.filter(
-      (user) => !user.isSelected
+      (user) => !user.isSelected,
     );
     this.multiSelectModelData__demo3 = [...newData];
   }