feat(eslint): eslint v9 and shared configs [KHCP-11627] (#318)

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

* fix: lint

* chore(deps): bump package

.stylelintrc.cjs

@@ -2,13 +2,13 @@ module.exports = {
   extends: [
     'stylelint-config-html',
     'stylelint-config-recommended-scss',
-    'stylelint-config-recommended-vue/scss'
+    'stylelint-config-recommended-vue/scss',
   ],
   overrides: [
     {
       files: [
         '**/*.vue',
-        '**/*.scss'
+        '**/*.scss',
       ],
       rules: {
         'unit-disallowed-list': [
@@ -17,9 +17,9 @@ module.exports = {
         // Disable the following rules
         'custom-property-no-missing-var-function': null,
         'no-descending-specificity': null,
-      }
-    }
+      },
+    },
   ],
-  plugins: [ 'stylelint-order' ],
-  rules: { 'order/properties-alphabetical-order': true }
+  plugins: ['stylelint-order'],
+  rules: { 'order/properties-alphabetical-order': true },
 }

eslint.config.mjs

@@ -0,0 +1,5 @@
+import eslintKongUiConfig from '@kong/eslint-config-kong-ui'
+
+export default [
+  ...eslintKongUiConfig,
+]

package.json

@@ -36,8 +36,8 @@
     "test": "cross-env FORCE_COLOR=1 vitest run",
     "test:open": "vitest --ui",
     "typecheck": "vue-tsc -p './tsconfig.build.json' --noEmit",
-    "lint": "eslint '**/*.{js,ts,vue}'",
-    "lint:fix": "eslint '**/*.{js,ts,vue}' --fix",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "lint:fix:generated": "eslint './src/components/**/*.{ts,vue}' './src/component-list.ts' './src/temp-generated-component-list.ts' --fix",
     "stylelint": "stylelint './src/**/*.{css,scss,vue}'",
     "stylelint:fix": "stylelint './src/**/*.{css,scss,vue}' --fix",
@@ -53,13 +53,12 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.6.12",
     "@kong/design-tokens": "^1.12.12",
+    "@kong/eslint-config-kong-ui": "^1.0.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.12.12",
     "@types/node-emoji": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/ui": "^1.6.0",
     "@vue/test-utils": "^2.4.6",
@@ -70,12 +69,7 @@
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.7.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint": "^9.4.0",
     "jsdom": "^24.1.0",
     "node-emoji": "^2.1.3",
     "picocolors": "^1.0.1",

sandbox/index.ts

@@ -5,7 +5,7 @@ import router from './router'
 const app = createApp(App)
 
 router.beforeEach((to, from, next) => {
-  // @ts-ignore
+  // @ts-ignore: property title exists
   document.title = to.meta.title
   next()
 })

src/__template__/ComponentTemplate.vue

@@ -112,7 +112,9 @@ const rootElementStyles = computed((): Record<string, string> => ({
       <title
         v-if="title"
         data-testid="kui-icon-svg-title"
-      >{{ title }}</title>
+      >
+        {{ title }}
+      </title>
       {%%ICON_SVG_INNER_HTML%%}
     </svg>
   </component>

vitest.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
 import viteConfig from './vite.config'
 
-// @ts-ignore
 export default mergeConfig(viteConfig, defineConfig({
   test: {
     globals: true,