feat(eslint): eslint v9 and shared flat config [KHCP-11627] (#301)

* feat(eslint): eslint v9 and shared flat config [KHCP-11627]

* chore: remove comments

Author: adamdehaven

.eslintignore

@@ -33,9 +33,6 @@ jspm_packages
 # Optional npm cache directory
 .npm
 
-# yarn
-yarn.lock
-
 # Optional REPL history
 .node_repl_history
 

.gitignore

@@ -0,0 +1,26 @@
+import eslintKongUiConfig from '@kong/eslint-config-kong-ui'
+import eslintKongUiConfigJson from '@kong/eslint-config-kong-ui/json'
+
+export default [
+  ...eslintKongUiConfig,
+  // Only apply the shared JSON config to files that match the given pattern
+  ...eslintKongUiConfigJson.map(config => ({
+    ...config,
+    files: ['tokens/**/*.json'],
+  })),
+  {
+    files: [
+      '**/*.{js,cjs,jsx}',
+    ],
+    rules: {
+      '@typescript-eslint/no-var-requires': 'off',
+    },
+  },
+  // Ignore the sort order for the breakpoint tokens so they can be ordered from smallest to largest
+  {
+    files: ['tokens/source/breakpoint/**/*.json'],
+    rules: {
+      'jsonc/sort-keys': 'off',
+    },
+  },
+]

eslint.config.mjs

@@ -7,8 +7,8 @@
     "build:clean": "rimraf ./dist",
     "copy:tokens-doc": "shx cp -f './dist/tokens/README.md' './TOKENS.md'",
     "copy:stylelint-plugin": "shx cp -R './stylelint-plugin' './dist/stylelint-plugin/'",
-    "lint": "eslint '**/*.{js,ts,vue,json}'",
-    "lint:fix": "eslint '**/*.{js,ts,vue,json}' --fix",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "sandbox": "run-p sandbox:open watch:tokens",
     "sandbox:open": "vite sandbox -c ./sandbox/vite.config.ts",
     "watch:tokens": "yarn build && chokidar \"tokens/**/*.json\" -c \"yarn build\"",
@@ -56,22 +56,14 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.6.12",
+    "@kong/eslint-config-kong-ui": "^1.0.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "chokidar-cli": "^3.0.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsonc": "^2.16.0",
-    "eslint-plugin-n": "^17.7.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint": "^9.4.0",
     "npm-run-all2": "^6.2.0",
     "rimraf": "^5.0.7",
     "sass": "^1.77.2",

package.json

@@ -24,7 +24,7 @@ const props = defineProps({
 
 const sanitizedToken = computed((): string => props.token.replace(/^--/, ''))
 const swatchStyles = computed((): Record<string, string> => ({
-  // @ts-ignore
+  // @ts-ignore: props.token is a valid string
   backgroundColor: tokens[props.token],
 }))
 </script>

sandbox/components/ColorBlock.vue

@@ -1,4 +1,5 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 import HomeView from './pages/HomeView.vue'
 
 const routes: RouteRecordRaw[] = [