chore: lint config package (#3382)

The main goal of this change is to add linting for the `config` package.
While doing this I wanted to take the chance and add a few more things:

1. Root `Makefile` for root operations `install` and `clean` for easy
cleaning and reinstallation of dependencies
2. Add rule `import/no-extraneous-dependencies` to error in case we make
use of a module without installing it beforehand. This caused some
issues already and a first fix was added with #3381. But also here I
have to install `glob` as it wasn't listed in the config's dependency
list, but is imported in
[packages/config/scripts/ci.cjs#L1](https://github.com/kumahq/kuma-gui/blob/36911e6e113bdf823e98233d2eac4543acb588b4/packages/config/scripts/ci.cjs#L1).
3. Linting of staged files in `packages/config`
4. Auto-fixing some linting issues that got revealed after adding the
linter here
5. A typo I found

---------

Signed-off-by: schogges <[email protected]>

.github/workflows/main.yml

@@ -55,9 +55,9 @@ jobs:
   lint-tests:
     needs: [install-dependencies]
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./packages/kuma-gui
+    strategy:
+      matrix:
+        package: ['kuma-gui', 'config']
     steps:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
@@ -70,7 +70,7 @@ jobs:
             /home/runner/.cache/Cypress
           key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }}
       - run: |
-          make lint
+          make -C ./packages/${{ matrix.package }} lint
 
   cli-tests:
     needs: [install-dependencies]

Makefile

@@ -0,0 +1,11 @@
+SHELL := /usr/bin/env bash
+MK := ./packages/kuma-gui/mk
+
+include $(MK)/install.mk
+include $(MK)/check.mk
+
+.PHONY: clean
+clean: .clean ## Dev: Remove all `node_modules` recursively
+
+.PHONY: install
+install: .install ## Dev: Install all dependencies

packages/config/.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "*.{cjs,js,ts}": "make lint"
+}

packages/config/Makefile

@@ -0,0 +1,6 @@
+MK := ../kuma-gui/mk
+
+include $(MK)/check.mk
+
+.PHONY: lint
+lint: .lint/script ## Dev: Run all lint script checks (js,ts)

packages/config/eslint.config.cjs

@@ -0,0 +1,9 @@
+/** @typedef {import('eslint').Linter.Config[]} Config */
+
+const { eslint } = require('./src/index.cjs')
+
+const config = [
+  ...eslint({}),
+]
+
+module.exports = config

packages/config/package.json

@@ -27,6 +27,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-json-schema-validator": "^5.3.1",
     "eslint-plugin-vue": "^9.32.0",
+    "glob": "^11.0.1",
     "globals": "^15.14.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended-scss": "^14.1.0",

packages/config/scripts/ci.cjs

@@ -32,5 +32,5 @@ function shuffleArray(array) {
 }
 
 module.exports = {
-  getPartitionedTestFiles
+  getPartitionedTestFiles,
 }

packages/config/src/eslint.cjs

@@ -61,19 +61,19 @@ function createEslintConfig(
   {
     tsConfigPath = 'tsconfig.json',
     componentIgnorePatterns = [],
-    versionIgnorePatterns = {}
+    versionIgnorePatterns = {},
   } = {
     tsConfigPath: 'tsconfig.json',
     componentIgnorePatterns: [],
-    versionIgnorePatterns: {}
-  }
+    versionIgnorePatterns: {},
+  },
 ) {
 
   ((properties) => {
     ['dependencies', 'devDependencies', 'peerDependencies'].forEach((item) => {
       properties[item].patternProperties = {
         ...properties[item].patternProperties,
-        ...versionIgnorePatterns[item] ?? {}
+        ...versionIgnorePatterns[item] ?? {},
       }
     })
   })(packageSchema.properties)
@@ -84,31 +84,36 @@ function createEslintConfig(
   )
 
   const importConfig = [
-    importPlugin.flatConfigs.recommended
+    importPlugin.flatConfigs.recommended,
+    {
+      rules: {
+        'import/no-extraneous-dependencies': 'error',
+      },
+    },
   ]
 
   const jsonSchemaValidatorConfig = [
     ...jsonSchemaValidatorPlugin.configs['flat/recommended'],
     {
-    rules: {
-      'json-schema-validator/no-invalid': ['error', {
-        useSchemastoreCatalog: false,
-        mergeSchemas: true,
-        schemas: [
-          {
-            fileMatch: ['package.json'],
-            // our schema allows for ignoring individual dependencies if required
-            // see ./package.schema.json patternProperties examples
-            schema: packageSchema
-          }
-        ]
-      }]}
-    }
+      rules: {
+        'json-schema-validator/no-invalid': ['error', {
+          useSchemastoreCatalog: false,
+          mergeSchemas: true,
+          schemas: [
+            {
+              fileMatch: ['package.json'],
+              // our schema allows for ignoring individual dependencies if required
+              // see ./package.schema.json patternProperties examples
+              schema: packageSchema,
+            },
+          ],
+        }]},
+    },
   ]
 
   const stylisticConfig = {
     plugins: {
-      '@stylistic': stylistic
+      '@stylistic': stylistic,
     },
     rules: {
       // Turns off some non-TypeScript rules in favor of their specific TypeScript rules to avoid false negatives:
@@ -138,7 +143,7 @@ function createEslintConfig(
       '@stylistic/comma-dangle': ['error', 'always-multiline'],
       '@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
       '@stylistic/semi': ['error', 'never'],
-    }
+    },
   }
 
   return [
@@ -153,13 +158,13 @@ function createEslintConfig(
         sourceType: 'module',
         globals: {
           ...globals.browser,
-        }
+        },
       },
       files: [
         '**/*.js',
         '**/*.ts',
         '**/*.vue',
-        '**/*.json'
+        '**/*.json',
       ],
       ignores: [
         'dist/*',
@@ -301,25 +306,25 @@ function createEslintConfig(
         '@typescript-eslint/no-empty-object-type': 'off',
         '@typescript-eslint/no-unused-expressions': ['error', {
           allowTernary: true,
-          allowShortCircuit: true
+          allowShortCircuit: true,
         }],
-      }
+      },
     },
     {
       // temporarily keep supporting commonjs modules (e.g. this file)
       files: ['**/*.cjs'],
       languageOptions: {
         globals: {
           ...globals.commonjs,
-        }
+        },
       },
       rules: {
-        '@typescript-eslint/no-require-imports': 'off'
-      }
-    }
+        '@typescript-eslint/no-require-imports': 'off',
+      },
+    },
   ]
 }
 
 module.exports = {
-  createEslintConfig
+  createEslintConfig,
 }

packages/config/src/stylelint.cjs

@@ -23,4 +23,4 @@ function createStylelintConfig() {
 
 module.exports = {
   createStylelintConfig,
-};
+}

packages/kuma-gui/mk/check.mk

@@ -11,7 +11,7 @@ check/node:
 .lint: lint/js lint/ts lint/css lint/lock lint/gherkin
 
 .PHONY: .lint/script
-.lint/script: lint/js lint/ts  ## Dev: Run lint checs on both JS/TS
+.lint/script: lint/js lint/ts  ## Dev: Run lint checks on both JS/TS
 
 .PHONY: lint/js
 lint/js:

packages/kuma-gui/mk/install.mk

@@ -8,5 +8,6 @@
 
 .PHONY: .clean
 .clean:
-	find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +
+	@echo "Recursively removing all node_modules/ directories in `pwd`..."; \
+		find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +