upgade eslint to 9 (#441)

* start eslint config from scratch * upgrade turbo * some updates but no beef yet * check eslint progress * add back one linting check * add react without hooks * add react-hooks back with compat * finish the job * finish the job * update deps again * add back eslint-plugin-vue * fix eslint plugin package
cypress-io · Jun 7, 2024 · b6a6b6e · b6a6b6e
1 parent 6811e04
commit b6a6b6e
Show file tree

Hide file tree

Showing 30 changed files with 486 additions and 351 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/components/Alert/vue/Alert.vue b/components/Alert/vue/Alert.vue
@@ -154,8 +154,8 @@ const sizeClasses = computed(() => {
 			-->
       <slot name="icon" v-bind="computedIconProps">
         <component
-          v-if="!props.noIcon && icon"
           :is="icon"
+          v-if="!props.noIcon && icon"
           v-bind="computedIconProps"
         />
       </slot>
@@ -166,8 +166,8 @@ const sizeClasses = computed(() => {
       <button
         v-if="dismissible"
         class="m-[4px] ml-[8px] h-[16px]"
-        @click="dismiss"
         aria-label="Dismiss"
+        @click="dismiss"
       >
         <IconActionDeleteLarge :stroke-color="variantClasses.iconCloseColor" />
       </button>
@@ -178,8 +178,8 @@ const sizeClasses = computed(() => {
     </div>
     <details
       v-if="slots.details"
-      class="p-[16px] border-t border-t-1"
       ref="detailsRef"
+      class="p-[16px] border-t border-t-1"
       :class="[variantClasses.bodyClass, variantClasses.borderClass]"
     >
       <summary

diff --git a/components/Button/vue/Button.vue b/components/Button/vue/Button.vue
@@ -12,11 +12,6 @@ import {
 import type { ButtonProps } from '@cypress-design/constants-button'
 
 export default defineComponent({
-  emits: {
-    click($event: MouseEvent) {
-      return !!$event
-    },
-  },
   props: {
     variant: {
       type: String as PropType<NonNullable<ButtonProps['variant']>>,
@@ -42,6 +37,11 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: {
+    click($event: MouseEvent) {
+      return !!$event
+    },
+  },
   slots: Object as SlotsType<{
     /**
      * The content of the button

diff --git a/components/Checkbox/vue/Checkbox.vue b/components/Checkbox/vue/Checkbox.vue
@@ -98,9 +98,9 @@ const checkboxClasses = computed(() =>
       :class="Classes.hiddenInput"
       :name="name || id"
       type="checkbox"
-      @change="updated"
       :disabled="props.disabled"
       :checked="localChecked"
+      @change="updated"
     />
     <label :class="Classes.labelTag" :for="id">
       <IconCheckmarkSmall

diff --git a/components/DocMenu/react/_DocGroup.tsx b/components/DocMenu/react/_DocGroup.tsx
@@ -1,3 +1,4 @@
+/* global NodeJS */
 import * as React from 'react'
 import { IconChevronDownSmall } from '@cypress-design/react-icon'
 import clsx from 'clsx'

diff --git a/components/DocMenu/vue/DocMenuVue.cy.tsx b/components/DocMenu/vue/DocMenuVue.cy.tsx
@@ -111,7 +111,7 @@ describe('<DocMenu/>', () => {
     ))
   })
 
-  it.only('scrolls the active item into view', { viewportHeight: 200 }, () => {
+  it('scrolls the active item into view', { viewportHeight: 200 }, () => {
     const CustomLinkVue: DefineComponent<{ href: StringConstructor }> =
       defineComponent({
         props: {

diff --git a/components/DocMenu/vue/_DocGroup.vue b/components/DocMenu/vue/_DocGroup.vue
@@ -124,8 +124,8 @@ defineExpose({
     {{ group.label }}
   </component>
   <div
-    class="grid transition-all relative"
     ref="$listWrapper"
+    class="grid transition-all relative"
     :class="{
       'grid-rows-[0fr]': !open && collapsible,
       'grid-rows-[1fr]': open || !collapsible,

diff --git a/components/DocMenu/vue/_DocGroupElements.vue b/components/DocMenu/vue/_DocGroupElements.vue
@@ -88,7 +88,7 @@ defineExpose({
 <template>
   <ul class="list-none p-0">
     <template v-for="(item, index) in items">
-      <li class="relative list-none p-0" v-if="item && 'items' in item">
+      <li v-if="item && 'items' in item" class="relative list-none p-0">
         <DocGroup
           ref="$groups"
           :active-path="activePath"

diff --git a/components/Menu/vue/Menu.vue b/components/Menu/vue/Menu.vue
@@ -21,8 +21,8 @@ defineEmits<{
 
 <template>
   <ul
-    class="bg-gray-1000 text-gray-500"
     v-for="item of items"
+    class="bg-gray-1000 text-gray-500"
     @mousedown="(e) => $emit('mousedown', e)"
   >
     <li :key="item.label">

diff --git a/components/Menu/vue/MenuVue.cy.tsx b/components/Menu/vue/MenuVue.cy.tsx
@@ -66,7 +66,7 @@ describe('<Menu />', () => {
             {
               label: 'Specs',
               icon: (props) => <IconWindowCodeEditor {...props} />,
-              iconActive: ({ animated, ...props }) => (
+              iconActive: ({ animated: _, ...props }) => (
                 <IconWindowCodeEditor {...props} />
               ),
               href: '#specs',

diff --git a/components/Modal/vue/ModalVue.cy.tsx b/components/Modal/vue/ModalVue.cy.tsx
@@ -1,4 +1,4 @@
-import { Component, ref } from 'vue'
+import { ref } from 'vue'
 import { mount } from 'cypress/vue'
 import { ComponentProps } from '../../vue-utils'
 import assertions from '../assertions'

diff --git a/components/Tabs/vue/Tabs.vue b/components/Tabs/vue/Tabs.vue
@@ -175,6 +175,7 @@ const iconProps = computed(() => {
   <div role="tablist" :class="classes.wrapper">
     <div v-if="'subWrapper' in classes" :class="classes.subWrapper" />
     <component
+      :is="href ? 'a' : 'button'"
       v-for="{
         id,
         href,
@@ -185,12 +186,11 @@ const iconProps = computed(() => {
         iconAfter,
         ...rest
       } in tabs"
+      :id="id"
       :key="id"
-      :is="href ? 'a' : 'button'"
-      :href="href"
       ref="$tab"
+      :href="href"
       role="tab"
-      :id="id"
       :tabindex="id === activeId ? undefined : -1"
       :aria-selected="id === activeId ? true : false"
       :class="[
@@ -243,16 +243,16 @@ const iconProps = computed(() => {
         }"
       >
         <component
-          v-if="iconBefore ?? icon"
           :is="iconBefore ?? icon"
+          v-if="iconBefore ?? icon"
           v-bind="iconProps"
           class="mr-[8px]"
         />
         {{ label }}
         <div v-if="tag" :class="classes.tag">{{ tag }}</div>
         <component
-          v-if="iconAfter"
           :is="iconAfter"
+          v-if="iconAfter"
           v-bind="iconProps"
           class="ml-[8px]"
         />

diff --git a/components/TestResult/vue/TestResult.vue b/components/TestResult/vue/TestResult.vue
@@ -38,9 +38,9 @@ const emit = defineEmits<{
           :class="classes.name.container.column"
         >
           <div
+            v-if="names.slice(0, -1).length > 0"
             data-cy="cd-tr-name-container-describes"
             :class="classes.name.container.describes"
-            v-if="names.slice(0, -1).length > 0"
           >
             <template v-for="(name, index) in names.slice(0, -1)" :key="index">
               <div
@@ -59,9 +59,9 @@ const emit = defineEmits<{
                 >
               </div>
               <div
+                v-if="index < names.length - 1"
                 data-cy="cd-tr-chevron"
                 :class="classes.chevron.container"
-                v-if="index < names.length - 1"
               >
                 <IconChevronRightSmall
                   stroke-color="gray-200"
@@ -81,16 +81,16 @@ const emit = defineEmits<{
               {{ names.at(-1) }}
             </span>
             <div
+              v-if="flaky || modified || added"
               data-cy="cd-tr-attributes"
               :class="classes.attribute.container"
-              v-if="flaky || modified || added"
             >
-              <IconStatusFlaky data-cy="cd-tr-flaky" v-if="flaky" />
+              <IconStatusFlaky v-if="flaky" data-cy="cd-tr-flaky" />
               <IconDocumentModifiedSquareDot
-                data-cy="cd-tr-modified"
                 v-if="modified"
+                data-cy="cd-tr-modified"
               />
-              <IconDocumentAddedSquarePlus data-cy="cd-tr-added" v-if="added" />
+              <IconDocumentAddedSquarePlus v-if="added" data-cy="cd-tr-added" />
             </div>
           </div>
         </div>