chore(*): use @kong/eslint-config-kong-ui

eslint.config.mjs

@@ -0,0 +1,48 @@
+import eslintKongUiConfig from '@kong/eslint-config-kong-ui'
+import pluginVueA11y from 'eslint-plugin-vuejs-accessibility'
+import playwright from 'eslint-plugin-playwright'
+import kongponentsUtilityClasses from './kongponent-utility-classes.js'
+
+export default [
+  ...eslintKongUiConfig,
+  ...pluginVueA11y.configs['flat/recommended'],
+
+  {
+    files: ['**/*.js', '**/*.vue', '**/*.ts'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '_',
+        },
+      ],
+
+      // Vue
+      'vue/attributes-order': 'off',
+      'vue/no-restricted-class': ['error', '/^k-/', ...kongponentsUtilityClasses],
+
+      // a11y
+      'vuejs-accessibility/label-has-for': 'off',
+      'vuejs-accessibility/no-autofocus': 'off',
+      'vuejs-accessibility/form-control-has-label': 'off',
+      'vuejs-accessibility/click-events-have-key-events': 'off',
+      'vuejs-accessibility/mouse-events-have-key-events': 'off',
+      'vuejs-accessibility/no-static-element-interactions': 'off',
+    },
+  },
+
+  // e2e tests
+  {
+    ...playwright.configs['flat/recommended'],
+    files: ['tests/playwright/**'],
+    rules: {
+      'playwright/missing-playwright-await': 'error',
+      'playwright/no-page-pause': 'error',
+      'playwright/prefer-to-have-length': 'error',
+      'playwright/valid-expect': 'error',
+      'playwright/no-skipped-test': 'off',
+      'playwright/no-force-option': 'off',
+      'playwright/no-wait-for-timeout': 'off',
+    },
+  },
+]

kongponent-utility-classes.cjs → kongponent-utility-classes.js

@@ -1,6 +1,6 @@
 // List of disallowed utility classes that are exported from Kongponents
 // These classes **must not** be used in this repository
-module.exports = [
+export default [
   'type-xxxl',
   'type-xxl',
   'type-xl',

package.json

@@ -11,8 +11,8 @@
     "playwright": "yarn --cwd tests/playwright run playwright",
     "preview": "vite build && vite preview",
     "lint": "yarn lint:eslint && yarn lint:vue && yarn lint:playwright && yarn lint:style",
-    "lint:eslint": "eslint --ext .js,.vue,.ts src tests/playwright",
-    "lint:eslint:fix": "eslint --fix --ext .js,.vue,.ts src tests/playwright",
+    "lint:eslint": "eslint src tests/playwright",
+    "lint:eslint:fix": "eslint --fix src tests/playwright",
     "lint:playwright": "tsc --noEmit --project tests/playwright/tsconfig.json --baseUrl tests/playwright",
     "lint:style": "stylelint --allow-empty-input 'src/**/*.{css,scss,sass,less,styl,vue}'",
     "lint:vue": "vue-tsc --noEmit",
@@ -53,25 +53,18 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "^1.13.2",
+    "@kong/eslint-config-kong-ui": "^1.1.0",
     "@playwright/test": "^1.44.1",
     "@types/lodash-es": "^4.17.12",
     "@types/marked": "^5.0.1",
     "@types/node": "^20.3.1",
-    "@typescript-eslint/eslint-plugin": "^6.13.0",
-    "@typescript-eslint/parser": "^6.13.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.14",
     "bmp-js": "^0.1.0",
     "dotenv": "^16.0.1",
-    "eslint": "^8.54.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.3.1",
+    "eslint": "^9.5.0",
     "eslint-plugin-playwright": "^0.18.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.25.0",
     "eslint-plugin-vuejs-accessibility": "^2.3.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
@@ -87,7 +80,6 @@
     "vite": "^5.2.11",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.0.16"
   },
   "browserslist": [

src/App.vue

@@ -105,13 +105,13 @@ const sidebarItems = computed<Array<SidebarPrimaryItem>>(() => [
   ...(
     isHybridMode.value
       ? [
-          // {
-          //   name: 'Data Plane Nodes',
-          //   to: { name: 'data-plane-nodes' },
-          //   key: 'Data Plane Nodes',
-          //   active: route.meta?.entity === 'data-plane-node',
-          // },
-        ]
+        // {
+        //   name: 'Data Plane Nodes',
+        //   to: { name: 'data-plane-nodes' },
+        //   key: 'Data Plane Nodes',
+        //   active: route.meta?.entity === 'data-plane-node',
+        // },
+      ]
       : []
   ),
 ])

src/composables/useI18n.ts

@@ -1,4 +1,4 @@
 import { useI18n as i18n } from '@kong-ui-public/i18n'
-import english from '@/locales/en.json'
+import type english from '@/locales/en.json'
 
 export const useI18n = i18n<typeof english>

src/config.ts

@@ -21,23 +21,23 @@ const getConfig = <T>(key: string, defaultValue: T): T => {
 
 export const config = {
 
-  get ADMIN_GUI_URL () {
+  get ADMIN_GUI_URL() {
     return getConfig<string | null>('ADMIN_GUI_URL', null)
   },
 
-  get ADMIN_GUI_PATH () {
+  get ADMIN_GUI_PATH() {
     return getConfig<string>('ADMIN_GUI_PATH', '/')
   },
 
-  get ADMIN_API_PORT () {
+  get ADMIN_API_PORT() {
     return getConfig<number>('ADMIN_API_PORT', 8001)
   },
 
-  get ADMIN_API_SSL_PORT () {
+  get ADMIN_API_SSL_PORT() {
     return getConfig<number>('ADMIN_API_SSL_PORT', 8444)
   },
 
-  get ADMIN_API_URL () {
+  get ADMIN_API_URL() {
     const ADMIN_API_URL = getConfig<string | null>('ADMIN_API_URL', null)
     if (ADMIN_API_URL) {
       return /^(https?:)?\/\//.test(ADMIN_API_URL)
@@ -52,7 +52,7 @@ export const config = {
     return `${window.location.protocol}//${window.location.hostname}:${port}`
   },
 
-  get ANONYMOUS_REPORTS () {
+  get ANONYMOUS_REPORTS() {
     return getConfig('ANONYMOUS_REPORTS', false)
   },
 }

src/pages/ca-certificates/Form.vue

@@ -33,13 +33,13 @@ const isEditing = computed(() => !!id.value)
 const routeOnCancel = useFormRedirectOnCancel(
   isEditing.value
     ? { name: 'ca-certificate-detail', params: { id: id.value } }
-    : { name: 'ca-certificate-list' }
+    : { name: 'ca-certificate-list' },
 )
 
 const routeOnUpdate = useFormRedirectOnUpdate(
   isEditing.value
     ? { name: 'ca-certificate-detail', params: { id: id.value } }
-    : { name: 'ca-certificate-list' }
+    : { name: 'ca-certificate-list' },
 )
 
 const caCertificateFormConfig = reactive({

src/pages/certificates/Form.vue

@@ -33,13 +33,13 @@ const isEditing = computed(() => !!id.value)
 const routeOnCancel = useFormRedirectOnCancel(
   isEditing.value
     ? { name: 'certificate-detail', params: { id: id.value } }
-    : { name: 'certificate-list' }
+    : { name: 'certificate-list' },
 )
 
 const routeOnUpdate = useFormRedirectOnUpdate(
   isEditing.value
     ? { name: 'certificate-detail', params: { id: id.value } }
-    : { name: 'certificate-list' }
+    : { name: 'certificate-list' },
 )
 
 const certificateFormConfig = reactive({

src/pages/consumers/CredentialForm.vue

@@ -37,7 +37,7 @@ const isEditing = computed(() => !!credentialId.value)
 const title = computed(
   () => isEditing.value
     ? t('entities.consumer-credential.edit.form.title', { type: credentialType.value })
-    : t('entities.consumer-credential.create.form.title', { type: credentialType.value })
+    : t('entities.consumer-credential.create.form.title', { type: credentialType.value }),
 )
 
 const cancelRoute = computed(() => {

src/pages/consumers/Form.vue

@@ -33,13 +33,13 @@ const isEditing = computed(() => !!id.value)
 const routeOnCancel = useFormRedirectOnCancel(
   isEditing.value
     ? { name: 'consumer-detail', params: { id: id.value } }
-    : { name: 'consumer-list' }
+    : { name: 'consumer-list' },
 )
 
 const routeOnUpdate = useFormRedirectOnUpdate(
   isEditing.value
     ? { name: 'consumer-detail', params: { id: id.value } }
-    : { name: 'consumer-list' }
+    : { name: 'consumer-list' },
 )
 
 const consumerFormConfig = reactive({

src/pages/data-plane-nodes/List.vue

@@ -171,7 +171,8 @@ import {
 } from '@kong/design-tokens'
 import { ProgressIcon, InfoIcon, ChevronDownIcon, MoreIcon } from '@kong/icons'
 import type { FetcherParams } from '@kong-ui-public/entities-shared'
-import { ChangeLogLevelModal, LogLevel, composables } from '@kong-ui-public/entities-data-plane-nodes'
+import type { LogLevel } from '@kong-ui-public/entities-data-plane-nodes'
+import { ChangeLogLevelModal, composables } from '@kong-ui-public/entities-data-plane-nodes'
 import { capitalize, formatDate } from '@/utils'
 import { apiService } from '@/services/apiService'
 import { useI18n } from '@/composables/useI18n'
@@ -274,10 +275,10 @@ const fetcher = async (props: FetcherParams) => {
       data: visibleNodes.value,
       ...(data.offset
         ? {
-            pagination: {
-              offset: data.offset,
-            },
-          }
+          pagination: {
+            offset: data.offset,
+          },
+        }
         : null),
     }
   } catch (err) {

src/pages/key-sets/Form.vue

@@ -33,13 +33,13 @@ const isEditing = computed(() => !!id.value)
 const routeOnCancel = useFormRedirectOnCancel(
   isEditing.value
     ? { name: 'key-set-detail', params: { id: id.value } }
-    : { name: 'key-set-list' }
+    : { name: 'key-set-list' },
 )
 
 const routeOnUpdate = useFormRedirectOnUpdate(
   isEditing.value
     ? { name: 'key-set-detail', params: { id: id.value } }
-    : { name: 'key-set-list' }
+    : { name: 'key-set-list' },
 )
 
 const formConfig = reactive({