chore(web): new lint setup (#30020)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

web/app/components/base/checkbox/assets/indeterminate-icon.tsx

@@ -1,8 +1,8 @@
 const IndeterminateIcon = () => {
   return (
-    <div data-testid='indeterminate-icon'>
+    <div data-testid="indeterminate-icon">
       <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-        <path d="M2.5 6H9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+        <path d="M2.5 6H9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
       </svg>
     </div>
   )

web/app/components/base/checkbox/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Checkbox from '.'
 
 // Helper function for toggling items in an array
-const createToggleItem = <T extends { id: string; checked: boolean }>(
+const createToggleItem = <T extends { id: string, checked: boolean }>(
   items: T[],
   setItems: (items: T[]) => void,
 ) => (id: string) => {
@@ -349,7 +349,12 @@ const TaskListExampleDemo = () => {
       <div className="mb-4 flex items-center justify-between">
         <h3 className="text-sm font-semibold text-gray-700">Today's Tasks</h3>
         <span className="text-xs text-gray-500">
-          {completedCount} of {tasks.length} completed
+          {completedCount}
+          {' '}
+          of
+          {tasks.length}
+          {' '}
+          completed
         </span>
       </div>
       <div className="flex flex-col gap-2">

web/app/components/base/checkbox/index.tsx

@@ -43,7 +43,7 @@ const Checkbox = ({
       data-testid={`checkbox-${id}`}
     >
       {!checked && indeterminate && <IndeterminateIcon />}
-      {checked && <RiCheckLine className='h-3 w-3' data-testid={`check-icon-${id}`} />}
+      {checked && <RiCheckLine className="h-3 w-3" data-testid={`check-icon-${id}`} />}
     </div>
   )
 }