chore: Use recommended tailwind eslint plugin config and fix warnings (…

…#3063)
codecov · Jul 26, 2024 · a8ba0d2 · a8ba0d2
1 parent 2b744fe
commit a8ba0d2
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 48 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,7 +7,8 @@
     "plugin:react/recommended",
     "plugin:import/recommended",
     "prettier",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "plugin:tailwindcss/recommended"
   ],
   "rules": {
     "react/react-in-jsx-scope": "off",
@@ -128,18 +129,6 @@
         },
         "newlines-between": "always"
       }
-    ],
-    "tailwindcss/no-custom-classname": [
-      "warn",
-      {
-        "callees": ["classnames", "clsx", "ctl"],
-        "config": "tailwind.config.js",
-        "cssFiles": ["src/**/*.css"],
-        "cssFilesRefreshRate": 5000,
-        "skipClassAttribute": false,
-        "tags": [],
-        "whitelist": []
-      }
     ]
   },
   "overrides": [
@@ -292,6 +281,14 @@
         ],
         "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"]
       }
+    },
+    "tailwindcss": {
+      "callees": ["classnames", "clsx", "ctl", "cn"],
+      "config": "tailwind.config.js",
+      "cssFiles": ["src/**/*.css"],
+      "cssFilesRefreshRate": 5000,
+      "removeDuplicates": true,
+      "skipClassAttribute": false
     }
   }
 }
diff --git a/src/layouts/Header/components/HelpDropdown/HelpDropdown.tsx b/src/layouts/Header/components/HelpDropdown/HelpDropdown.tsx
@@ -109,7 +109,7 @@ function HelpDropdown() {
       </button>
       <ul
         className={cn(
-          'z-50 w-[15.5rem] border border-gray-ds-tertiary overflow-hidden rounded bg-white text-gray-900 border-ds-gray-tertiary absolute right-0 top-8 min-w-fit',
+          'absolute right-0 top-8 z-50 w-[15.5rem] min-w-fit overflow-hidden rounded border border-ds-gray-tertiary bg-white text-gray-900',
           { hidden: !isOpen }
         )}
         aria-label="help menu items"

diff --git a/src/layouts/Header/components/UserDropdown/UserDropdown.tsx b/src/layouts/Header/components/UserDropdown/UserDropdown.tsx
@@ -111,7 +111,7 @@ function UserDropdown() {
       </button>
       <ul
         className={cn(
-          'z-50 w-[15.5rem] border border-gray-ds-tertiary overflow-hidden rounded bg-white text-gray-900 border-ds-gray-tertiary absolute right-0 top-8 min-w-fit',
+          'absolute right-0 top-8 z-50 w-[15.5rem] min-w-fit overflow-hidden rounded border border-ds-gray-tertiary bg-white text-gray-900',
           { hidden: !isOpen }
         )}
         aria-label="user profile menu items"

diff --git a/src/old_ui/Icon/Icon.spec.jsx b/src/old_ui/Icon/Icon.spec.jsx
@@ -1,12 +1,10 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 
 import Icon from './Icon'
 
 describe('Icon', () => {
-  let wrapper
-
   function setup(props) {
-    wrapper = render(<Icon {...props} />)
+    render(<Icon {...props} />)
   }
 
   describe('when rendered with a SVG we have', () => {
@@ -15,61 +13,63 @@ describe('Icon', () => {
     })
 
     it('renders a svg', () => {
-      expect(wrapper.container.querySelector('svg')).not.toBeNull()
+      const icon = screen.queryByText('check.svg')
+      expect(icon).toBeInTheDocument()
     })
   })
 
   describe('when rendered with a SVG we dont have', () => {
     beforeEach(() => {
-      setup({ name: 'icon-we-dont-have ' })
+      setup({ name: 'icon-we-dont-have' })
     })
 
-    it('renders a svg', () => {
-      expect(wrapper.container.querySelector('svg')).toBeNull()
+    it('renders a svg', async () => {
+      const icon = screen.queryByText('icon-we-dont-have.svg')
+      expect(icon).not.toBeInTheDocument()
     })
   })
 
   describe('renders small icon', () => {
     beforeEach(() => {
       setup({ name: 'check', size: 'sm' })
     })
-    it('renders small icon', () => {
-      const svg = wrapper.container.querySelector('svg')
-      expect(svg.classList.contains('w-3')).toBe(true)
-      expect(svg.classList.contains('h-3')).toBe(true)
+    it('renders small icon', async () => {
+      const icon = await screen.findByText('check.svg')
+      expect(icon).toHaveClass('w-3')
+      expect(icon).toHaveClass('h-3')
     })
   })
 
   describe('renders medium icon', () => {
     beforeEach(() => {
       setup({ name: 'check' })
     })
-    it('renders small icon', () => {
-      const svg = wrapper.container.querySelector('svg')
-      expect(svg.classList.contains('w-6')).toBe(true)
-      expect(svg.classList.contains('h-6')).toBe(true)
+    it('renders small icon', async () => {
+      const icon = await screen.findByText('check.svg')
+      expect(icon).toHaveClass('w-6')
+      expect(icon).toHaveClass('h-6')
     })
   })
 
   describe('renders large icon', () => {
     beforeEach(() => {
       setup({ name: 'check', size: 'lg' })
     })
-    it('renders small icon', () => {
-      const svg = wrapper.container.querySelector('svg')
-      expect(svg.classList.contains('w-16')).toBe(true)
-      expect(svg.classList.contains('h-16')).toBe(true)
+    it('renders small icon', async () => {
+      const icon = await screen.findByText('check.svg')
+      expect(icon).toHaveClass('w-16')
+      expect(icon).toHaveClass('h-16')
     })
   })
 
-  describe('renders cusotm size icon', () => {
+  describe('renders custom size icon', () => {
     beforeEach(() => {
       setup({ name: 'check', size: 'lg', iconClass: 'w-1 h-1' })
     })
-    it('renders small icon', () => {
-      const svg = wrapper.container.querySelector('svg')
-      expect(svg.classList.contains('w-1')).toBe(true)
-      expect(svg.classList.contains('h-1')).toBe(true)
+    it('renders small icon', async () => {
+      const icon = await screen.findByText('check.svg')
+      expect(icon).toHaveClass('w-1')
+      expect(icon).toHaveClass('h-1')
     })
   })
 })
diff --git a/src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.tsx b/src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.tsx
@@ -32,7 +32,7 @@ export function FrameworkTabs() {
           <button
             key={framework}
             className={cn(
-              'px-4 py-2 border-b-2 border-transparent',
+              'border-b-2 border-transparent px-4 py-2',
               selectedFramework === framework && 'border-ds-gray-octonary'
             )}
             onClick={() => setSelectedFramework(framework)}

diff --git a/src/pages/RepoPage/SettingsTab/tabs/YamlTab/YAML/YAML.jsx b/src/pages/RepoPage/SettingsTab/tabs/YamlTab/YAML/YAML.jsx
@@ -14,7 +14,6 @@ function YAML({ yaml }) {
         </p>
       </div>
       <hr />
-      {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
       <YamlEditor
         className="useReadOnlyCursor"
         value={yaml}

diff --git a/src/shared/utils/cn.spec.ts b/src/shared/utils/cn.spec.ts
@@ -1,3 +1,4 @@
+/* eslint tailwindcss/no-custom-classname: 0 */
 import { cn } from './cn'
 
 describe('cn utility', () => {
@@ -13,7 +14,7 @@ describe('cn utility', () => {
 
     it('should handle many arguments', () => {
       const className = cn(
-        'text-white text-base',
+        'text-base text-white',
         {
           'bg-ds-primary-base': false,
           'bg-ds-pink-tertiary': true,
@@ -23,7 +24,7 @@ describe('cn utility', () => {
         null
       )
 
-      expect(className).toEqual('text-white text-base bg-ds-pink-tertiary asdf')
+      expect(className).toEqual('text-base text-white bg-ds-pink-tertiary asdf')
     })
 
     it('should flatten arrays', () => {
@@ -37,11 +38,11 @@ describe('cn utility', () => {
   describe('tailwind-merge functionality', () => {
     it('should merge tailwind classes', () => {
       const className = cn(
-        'px-2 py-1 bg-red hover:bg-dark-red',
-        'p-3 bg-[#B91C1C]'
+        'bg-red hover:bg-dark-red px-2 py-1',
+        'bg-[#B91C1C] p-3'
       )
 
-      expect(className).toEqual('hover:bg-dark-red p-3 bg-[#B91C1C]')
+      expect(className).toEqual('hover:bg-dark-red bg-[#B91C1C] p-3')
     })
   })
 })
diff --git a/src/ui/FileViewer/ToggleHeader/Title/Title.tsx b/src/ui/FileViewer/ToggleHeader/Title/Title.tsx
@@ -21,7 +21,7 @@ function Title({ title, children, sticky = false }: TitleProps) {
     <div
       data-testid="title-wrapper-div"
       className={cn(
-        'flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 flex-wrap bg-white px-0 w-full lg:w-auto flex-1 lg:flex-none md:mb-1',
+        'flex w-full flex-1 flex-col flex-wrap items-start justify-between gap-4 bg-white px-0 sm:flex-row sm:items-center md:mb-1 lg:w-auto lg:flex-none',
         { 'z-10 sticky top-[4.5rem]': sticky }
       )}
     >