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

* feat(eslint): eslint v9 and shared configs [KHCP-11627] * fix: do not lint json
Kong · Jun 6, 2024 · d0a973f · d0a973f
1 parent cdf52e3
commit d0a973f
Show file tree

Hide file tree

Showing 133 changed files with 683 additions and 1,238 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,24 @@
+import eslintKongUiConfig from '@kong/eslint-config-kong-ui'
+import eslintKongUiConfigCypress from '@kong/eslint-config-kong-ui/cypress'
+
+export default [
+  ...eslintKongUiConfig,
+  ...eslintKongUiConfigCypress.map(config => ({
+    ...config,
+    files: [
+      '**/cypress/**',
+      '**/*.cy.{js,ts,jsx,tsx}',
+    ],
+  })),
+  {
+    ignores: ['**/__template__/**'],
+  },
+  {
+    files: [
+      'packages/portal/document-viewer/src/components/**/*.vue',
+    ],
+    rules: {
+      'vue/multi-word-component-names': ['off'],
+    },
+  },
+]
diff --git a/package.json b/package.json
@@ -25,33 +25,24 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.6.10",
     "@kong/design-tokens": "1.12.12",
+    "@kong/eslint-config-kong-ui": "^1.0.3",
     "@kong/kongponents": "9.0.0-alpha.162",
-    "@rushstack/eslint-patch": "^1.7.2",
     "@types/flat": "^5.0.5",
     "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^18.19.31",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vitest/ui": "^1.3.1",
-    "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
     "c8": "^9.1.0",
     "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.6.6",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-cypress": "^2.15.2",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.22.0",
+    "eslint": "^9.4.0",
     "js-yaml": "^4.1.0",
     "jsdom": "^24.0.0",
     "lerna": "^8.1.2",

diff --git a/packages/analytics/analytics-chart/package.json b/packages/analytics/analytics-chart/package.json
@@ -46,8 +46,8 @@
     "build:types": "vue-tsc -p './tsconfig.build.json' --emitDeclarationOnly",
     "build:sandbox": "cross-env USE_SANDBOX=true vite build -m production",
     "preview": "cross-env USE_SANDBOX=true vite preview",
-    "lint": "eslint '**/*.{js,jsx,ts,tsx,vue}' --ignore-path '../../../.eslintignore'",
-    "lint:fix": "eslint '**/*.{js,jsx,ts,tsx,vue}' --ignore-path '../../../.eslintignore' --fix",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "stylelint": "stylelint --allow-empty-input './src/**/*.{css,scss,sass,less,styl,vue}'",
     "stylelint:fix": "stylelint --allow-empty-input './src/**/*.{css,scss,sass,less,styl,vue}' --fix",
     "typecheck": "vue-tsc -p './tsconfig.build.json' --noEmit",

diff --git a/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue b/packages/analytics/analytics-chart/src/components/AnalyticsChart.vue
@@ -203,7 +203,9 @@ const computedChartData = computed(() => {
 })
 
 const timeRangeMs = computed<number | undefined>(() => {
-  if (!props.chartData?.meta) { return 0 }
+  if (!props.chartData?.meta) {
+    return 0
+  }
 
   return ('start_ms' in props.chartData.meta)
     ? props.chartData.meta.end_ms - props.chartData.meta.start_ms
@@ -251,7 +253,7 @@ const metricAxesTitle = computed<string | undefined>(() => {
 })
 
 const dimensionAxesTitle = computed<string | undefined>(() => {
-  const dimension = isTimeSeriesChart.value ? 'Time' : Object.keys(props.chartData.meta.display || props.chartData.meta.metric_names as Object)[0]
+  const dimension = isTimeSeriesChart.value ? 'Time' : Object.keys(props.chartData.meta.display || props.chartData.meta.metric_names as Record<string, any>)[0]
   // @ts-ignore - dynamic i18n key
   return props.chartOptions.dimensionAxesTitle || (i18n.te(`chartLabels.${dimension}`) &&
     // @ts-ignore - dynamic i18n key

diff --git a/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
@@ -425,7 +425,7 @@ const chartInstance = composables.useChartJSCommon(
 
 const maxOverflow = computed(() => {
   // Need this reactive dependency to re-compute the max overflow when the chart updates.
-  // eslint-disable-next-line no-unused-expressions
+
   dependsOnChartUpdate.value
 
   // ChartJS says that labels are optional, but we always provide them.
@@ -522,7 +522,7 @@ const onScrolling = (event: Event) => {
   axesTooltip.value.offset = target.scrollLeft
 }
 
-const tooltipDimensions = ({ width, height }: { width: number, height: number}) => {
+const tooltipDimensions = ({ width, height }: { width: number, height: number }) => {
   tooltipData.width = width
   tooltipData.height = height
 }

diff --git a/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue
@@ -144,7 +144,7 @@ const props = defineProps({
 })
 
 const { translateUnit } = composables.useTranslatedUnits()
-const chartInstance = ref<{chart: Chart}>()
+const chartInstance = ref<{ chart: Chart }>()
 const legendID = ref(uuidv4())
 const chartID = ref(uuidv4())
 const legendItems = ref<LegendItem[]>([])
@@ -208,7 +208,7 @@ const chartFlexClass = (position: `${ChartLegendPosition}`) => {
   }[position]
 }
 
-// @ts-ignore
+// @ts-ignore: allow untyped param
 const tooltipDimensions = ({ width, height }) => {
   tooltipData.width = width
   tooltipData.height = height

diff --git a/packages/analytics/analytics-chart/src/components/vue-json-csv/VueJsonCsv.cy.ts b/packages/analytics/analytics-chart/src/components/vue-json-csv/VueJsonCsv.cy.ts
@@ -25,7 +25,7 @@ describe('<VueJsonCsv />', () => {
 
     // eslint-disable-next-line cypress/unsafe-to-chain-command
     cy.getTestId('export-csv').click().then(() => {
-      // eslint-disable-next-line cypress/unsafe-to-chain-command
+
       cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'export-started').then((evt) => {
         const incomingData = evt[0][0]
         const firstRow = incomingData[0]
@@ -36,7 +36,7 @@ describe('<VueJsonCsv />', () => {
         cy.wrap(incomingData).should('have.length', CSV_DATA.length)
       })
 
-      // eslint-disable-next-line cypress/unsafe-to-chain-command
+
       cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'export-finished').then((evt) => {
         const exportedFilename = evt[0][0]
 
@@ -59,7 +59,7 @@ describe('<VueJsonCsv />', () => {
 
     // eslint-disable-next-line cypress/unsafe-to-chain-command
     cy.getTestId('export-csv').click().then(() => {
-      // eslint-disable-next-line cypress/unsafe-to-chain-command
+
       cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'export-finished').then((evt) => {
         const exportedFilename = evt[0][0]
 

diff --git a/packages/analytics/analytics-chart/src/components/vue-json-csv/VueJsonCsv.vue b/packages/analytics/analytics-chart/src/components/vue-json-csv/VueJsonCsv.vue
@@ -89,6 +89,7 @@ const exportableData: ComputedRef<CsvData|null> = computed(() => {
 })
 
 // Replaces the keys in the key/value pairs with more human-readable ones (if provided)
+// eslint-disable-next-line @typescript-eslint/ban-types
 const labelsFunctionGenerator = (): Function => {
   const labels: any = props.labels
 
@@ -97,18 +98,20 @@ const labelsFunctionGenerator = (): Function => {
   }
 
   if (typeof labels as ValidType === ValidType.Object) {
+    // eslint-disable-next-line @typescript-eslint/ban-types
     return (item: Function) => {
       return mapKeys(item, (item, key) => {
         return labels[key] || key
       })
     }
   }
 
-  // @ts-ignore
+  // @ts-ignore: valid return
   return item => item
 }
 
 // Trims each data row based, keeping only the columns (fields) passed in
+// eslint-disable-next-line @typescript-eslint/ban-types
 const fieldsFunctionGenerator = (): Function => {
   const fields: any = props.fields
   if (typeof props.fields as ValidType !== ValidType.Object && !Array.isArray(fields)) {
@@ -117,12 +120,13 @@ const fieldsFunctionGenerator = (): Function => {
 
   if (Array.isArray(fields)) {
     // Keep only requested object properties
+    // eslint-disable-next-line @typescript-eslint/ban-types
     return (item: Function) => {
       return pick(item, fields)
     }
   }
 
-  // @ts-ignore
+  // @ts-ignore: valid return type
   return item => item
 }
 

diff --git a/packages/analytics/analytics-chart/src/composables/useChartSelectedRange.ts b/packages/analytics/analytics-chart/src/composables/useChartSelectedRange.ts
@@ -5,7 +5,9 @@ import { formatTime } from '../utils'
 
 export default function useChartSelectedRange(chartData: Ref<ExploreResultV4>): Ref<string> {
   const formattedTimeRange = computed(() => {
-    if (!chartData.value?.meta) { return '' }
+    if (!chartData.value?.meta) {
+      return ''
+    }
 
     const start = chartData.value.meta.start_ms
     const end = chartData.value.meta.end_ms

diff --git a/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts b/packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts
@@ -97,9 +97,9 @@ export default function useExploreResultToTimeDataset(
 
         const timedEvents = !records?.length
           ? {}
-          : records.reduce((acc: {[label: string]: any}, druidRow) => {
+          : records.reduce((acc: { [label: string]: any }, druidRow) => {
             const timestamp: number = new Date(druidRow.timestamp).valueOf()
-            const event = druidRow.event as {[label: string]: string | number}
+            const event = druidRow.event as { [label: string]: string | number }
 
             for (const metric of metricNames) {
               dimensionPositions.add(metric)
@@ -137,7 +137,7 @@ export default function useExploreResultToTimeDataset(
           })
           : datasetLabels.map(label => [label.name, label.name])
 
-        const colorMap: {[label: string]: string} = {}
+        const colorMap: { [label: string]: string } = {}
 
         const datasets: Dataset[] = [...dimensionsCrossMetrics].map(([metric, dimension], i) => {
           const filled = zeroFilledTimeSeries.map(ts => {
@@ -148,6 +148,7 @@ export default function useExploreResultToTimeDataset(
             return { x: ts, y: 0 }
           })
 
+          // eslint-disable-next-line prefer-const
           let { colorPalette, fill } = deps
 
           if (isNullOrUndef(colorPalette)) {

diff --git a/packages/analytics/analytics-chart/src/enums/chart-legend-position.enum.ts b/packages/analytics/analytics-chart/src/enums/chart-legend-position.enum.ts
@@ -1,4 +1,4 @@
-/* eslint-disable no-unused-vars */
+
 export enum ChartLegendPosition {
   Hidden = 'hidden',
   Right = 'right',

diff --git a/packages/analytics/analytics-chart/src/enums/chart-metric-display.enum.ts b/packages/analytics/analytics-chart/src/enums/chart-metric-display.enum.ts
@@ -1,4 +1,4 @@
-/* eslint-disable no-unused-vars */
+
 export enum ChartMetricDisplay {
   Hidden = 'hidden',
   SingleMetric = 'single',

diff --git a/packages/analytics/analytics-chart/src/enums/chart-types-simple.enum.ts b/packages/analytics/analytics-chart/src/enums/chart-types-simple.enum.ts
@@ -1,5 +1,5 @@
-/* eslint-disable no-unused-vars */
+
 export enum ChartTypesSimple {
   GAUGE = 'Gauge',
-  TOPN = 'TopN'
+  TOPN = 'TopN',
 }
diff --git a/packages/analytics/analytics-chart/src/enums/chart-types.enum.ts b/packages/analytics/analytics-chart/src/enums/chart-types.enum.ts
@@ -1,8 +1,8 @@
-/* eslint-disable no-unused-vars */
+
 export enum ChartTypes {
   DOUGHNUT = 'Doughnut',
   HORIZONTAL_BAR = 'HorizontalBar',
   VERTICAL_BAR = 'VerticalBar',
   TIMESERIES_LINE = 'Line',
-  TIMESERIES_BAR = 'TimeSeriesBar'
+  TIMESERIES_BAR = 'TimeSeriesBar',
 }
diff --git a/packages/analytics/analytics-chart/src/utils/commonOptions.ts b/packages/analytics/analytics-chart/src/utils/commonOptions.ts
@@ -130,6 +130,7 @@ export const verticalTooltipPositioning = (position: Point, tooltipHeight: numbe
   return y
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-types
 export function debounce(fn: Function, delay: number) {
   let timeoutId: number
   return (...args: any) => {