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

Author: adamdehaven

.eslintignore

@@ -10,7 +10,6 @@ lerna-debug.log*
 node_modules
 .DS_Store
 dist
-demo/dist-copy
 dist-ssr
 coverage
 *.local

.eslintrc.cjs

@@ -2,38 +2,38 @@ 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': [
           ['rem', 'em'],
         ],
         // Only allow @kong/design-tokens CSS custom properties
         'custom-property-pattern': [
-          "^(kui).+$",
+          '^(kui).+$',
           {
             message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'",
-          }
+          },
         ],
         'custom-property-no-missing-var-function': true,
         // Disable the following rules
         'no-descending-specificity': null,
-        'scss/at-import-no-partial-leading-underscore': null
-      }
-    }
+        'scss/at-import-no-partial-leading-underscore': null,
+      },
+    },
   ],
   plugins: [
     'stylelint-order',
-    '@kong/design-tokens/stylelint-plugin'
+    '@kong/design-tokens/stylelint-plugin',
   ],
   rules: {
     'order/properties-alphabetical-order': true,
-    '@kong/design-tokens/use-proper-token': [true, {disableFix: true}]
-  }
+    '@kong/design-tokens/use-proper-token': [true, { disableFix: true }],
+  },
 }

.gitignore

@@ -0,0 +1,14 @@
+import eslintKongUiConfig from '@kong/eslint-config-kong-ui'
+import eslintKongUiConfigCypress from '@kong/eslint-config-kong-ui/cypress'
+
+export default [
+  ...eslintKongUiConfig,
+  // Only apply the shared Cypress config to files that match the given pattern
+  ...eslintKongUiConfigCypress.map(config => ({
+    ...config,
+    files: [
+      '**/*.spec.ts',
+      '**/cypress/**',
+    ],
+  })),
+]

.stylelintrc.cjs

@@ -17,8 +17,8 @@
     "dev:components": "cross-env SANDBOX=components vite",
     "dev:elements": "cross-env SANDBOX=elements vite",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint '**/*.{js,ts,vue}'",
-    "lint:fix": "yarn lint --fix",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "stylelint": "stylelint './src/**/*.{css,scss,sass,vue}'",
     "stylelint:fix": "yarn stylelint --fix",
     "test": "cypress run --component -b chrome",
@@ -51,28 +51,18 @@
     "@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",
     "@kong/kongponents": "9.0.0-alpha.159",
-    "@rushstack/eslint-patch": "^1.10.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/node": "^18.19.33",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.9.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-cypress": "^3.2.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint": "^9.4.0",
     "postcss-custom-properties": "^13.3.10",
     "postcss-html": "^1.7.0",
     "rollup-plugin-visualizer": "^5.12.0",

eslint.config.mjs

@@ -1,6 +1,9 @@
 <template>
   <SharedLayout type="components">
-    <div v-if="route.name === 'login'" class="element-wrapper">
+    <div
+      v-if="route.name === 'login'"
+      class="element-wrapper"
+    >
       <h4>
         <code>KongAuthLogin.vue</code>
       </h4>
@@ -17,7 +20,10 @@
       />
     </div>
 
-    <div v-if="route.name === 'forgot-password'" class="element-wrapper">
+    <div
+      v-if="route.name === 'forgot-password'"
+      class="element-wrapper"
+    >
       <h4>
         <code>KongAuthForgotPassword.vue</code>
       </h4>
@@ -29,7 +35,10 @@
       />
     </div>
 
-    <div v-if="route.name === 'reset-password'" class="element-wrapper">
+    <div
+      v-if="route.name === 'reset-password'"
+      class="element-wrapper"
+    >
       <h4>
         <code>KongAuthResetPassword.vue</code>
       </h4>
@@ -40,7 +49,10 @@
       />
     </div>
 
-    <div v-if="route.name === 'change-password'" class="element-wrapper">
+    <div
+      v-if="route.name === 'change-password'"
+      class="element-wrapper"
+    >
       <h4>
         <code>KongAuthChangePassword.vue</code>
       </h4>
@@ -52,25 +64,33 @@
       />
     </div>
 
-    <div v-if="route.name === 'register'" class="element-wrapper">
+    <div
+      v-if="route.name === 'register'"
+      class="element-wrapper"
+    >
       <h4>
         <code>KongAuthRegister.vue</code>
       </h4>
       <KongAuthRegister
         access-code-required
         recaptcha
         wrapper-id="kong-auth-register-wrapper"
-        @register-success="showAlert('Register success!')" />
+        @register-success="showAlert('Register success!')"
+      />
     </div>
 
-    <div v-if="route.name === 'accept-invitation'" class="element-wrapper">
+    <div
+      v-if="route.name === 'accept-invitation'"
+      class="element-wrapper"
+    >
       <h4>
         <code>KongAuthAcceptInvitation.vue</code>
       </h4>
       <KongAuthAcceptInvitation
         subheader-text="This is custom text"
         wrapper-id="kong-auth-accept-invitation-wrapper"
-        @accept-invitation-success="showAlert('Accept invitation success!')" />
+        @accept-invitation-success="showAlert('Accept invitation success!')"
+      />
     </div>
   </SharedLayout>
 </template>

package.json

@@ -1,6 +1,9 @@
 <template>
   <SharedLayout type="elements">
-    <div v-if="route.name === 'login'" class="element-wrapper">
+    <div
+      v-if="route.name === 'login'"
+      class="element-wrapper"
+    >
       <h4>
         <code>kong-auth-login</code>
       </h4>
@@ -21,7 +24,10 @@
       </div>
     </div>
 
-    <div v-if="route.name === 'forgot-password'" class="element-wrapper">
+    <div
+      v-if="route.name === 'forgot-password'"
+      class="element-wrapper"
+    >
       <h4>
         <code>kong-auth-forgot-password</code>
       </h4>
@@ -36,7 +42,10 @@
       </div>
     </div>
 
-    <div v-if="route.name === 'reset-password'" class="element-wrapper">
+    <div
+      v-if="route.name === 'reset-password'"
+      class="element-wrapper"
+    >
       <h4>
         <code>kong-auth-reset-password</code>
       </h4>
@@ -49,7 +58,10 @@
       </div>
     </div>
 
-    <div v-if="route.name === 'change-password'" class="element-wrapper">
+    <div
+      v-if="route.name === 'change-password'"
+      class="element-wrapper"
+    >
       <h4>
         <code>kong-auth-change-password</code>
       </h4>
@@ -63,26 +75,34 @@
       </div>
     </div>
 
-    <div v-if="route.name === 'register'" class="element-wrapper">
+    <div
+      v-if="route.name === 'register'"
+      class="element-wrapper"
+    >
       <h4>
         <code>KongAuthRegister.vue</code>
       </h4>
       <div id="kong-auth-register-wrapper">
         <kong-auth-register
           access-code-required
           wrapper-id="kong-auth-register-wrapper"
-          @register-success="showAlert('Register success!')" />
+          @register-success="showAlert('Register success!')"
+        />
       </div>
     </div>
 
-    <div v-if="route.name === 'accept-invitation'" class="element-wrapper">
+    <div
+      v-if="route.name === 'accept-invitation'"
+      class="element-wrapper"
+    >
       <h4>
         <code>KongAuthAcceptInvitation.vue</code>
       </h4>
       <div id="kong-auth-accept-invitation-wrapper">
         <kong-auth-accept-invitation
           wrapper-id="kong-auth-accept-invitation-wrapper"
-          @accept-invitation-success="showAlert('Accept invitation success!')" />
+          @accept-invitation-success="showAlert('Accept invitation success!')"
+        />
       </div>
     </div>
   </SharedLayout>

sandbox/components/ComponentsApp.vue

@@ -1,7 +1,10 @@
 <template>
   <nav class="app-nav">
     <ul>
-      <li v-for="routeName in routes" :key="routeName">
+      <li
+        v-for="routeName in routes"
+        :key="routeName"
+      >
         <router-link :to="{ name: routeName }">
           <span>{{ routeName }}</span>
           <span v-if="route.name === routeName">&rsaquo;</span>