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

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

web/app/components/base/with-input-validation/index.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
+import { noop } from 'lodash-es'
 import { z } from 'zod'
 import withValidation from '.'
-import { noop } from 'lodash-es'
 
 describe('withValidation HOC', () => {
   // schema for validation
@@ -11,7 +11,13 @@ describe('withValidation HOC', () => {
   }
 
   const TestComponent = ({ name, age }: Props) => (
-    <div>{name} - {age}</div>
+    <div>
+      {name}
+      {' '}
+      -
+      {' '}
+      {age}
+    </div>
   )
   const WrappedComponent = withValidation(TestComponent, schema)
 
@@ -24,12 +30,12 @@ describe('withValidation HOC', () => {
   })
 
   it('renders the component when validation passes', () => {
-    render(<WrappedComponent name='Valid Name' age={30} />)
+    render(<WrappedComponent name="Valid Name" age={30} />)
     expect(screen.getByText('Valid Name - 30')).toBeInTheDocument()
   })
 
   it('renders the component when props is invalid but not in schema ', () => {
-    render(<WrappedComponent name='Valid Name' age={'aaa' as any} />)
+    render(<WrappedComponent name="Valid Name" age={'aaa' as any} />)
     expect(screen.getByText('Valid Name - aaa')).toBeInTheDocument()
   })
 

web/app/components/base/with-input-validation/index.stories.tsx

@@ -15,9 +15,20 @@ const UserCard = ({ name, email, age, role }: UserCardProps) => {
     <div className="rounded-lg border border-gray-200 bg-white p-4">
       <h3 className="mb-2 text-lg font-semibold">{name}</h3>
       <div className="space-y-1 text-sm text-gray-600">
-        <div>Email: {email}</div>
-        <div>Age: {age}</div>
-        {role && <div>Role: {role}</div>}
+        <div>
+          Email:
+          {email}
+        </div>
+        <div>
+          Age:
+          {age}
+        </div>
+        {role && (
+          <div>
+            Role:
+            {role}
+          </div>
+        )}
       </div>
     </div>
   )
@@ -35,8 +46,14 @@ const ProductCard = ({ name, price, category, inStock }: ProductCardProps) => {
     <div className="rounded-lg border border-gray-200 bg-white p-4">
       <h3 className="mb-2 text-lg font-semibold">{name}</h3>
       <div className="space-y-1 text-sm">
-        <div className="text-xl font-bold text-green-600">${price}</div>
-        <div className="text-gray-600">Category: {category}</div>
+        <div className="text-xl font-bold text-green-600">
+          $
+          {price}
+        </div>
+        <div className="text-gray-600">
+          Category:
+          {category}
+        </div>
         <div className={inStock ? 'text-green-600' : 'text-red-600'}>
           {inStock ? '✓ In Stock' : '✗ Out of Stock'}
         </div>
@@ -299,11 +316,15 @@ export const APIResponseValidation: Story = {
           {mockAPIResponses.map((product, index) => (
             <div key={index}>
               <ValidatedProductCard {...product} />
-              {!product.name || product.price <= 0 ? (
-                <div className="mt-2 text-xs text-red-600">
-                  ⚠️ Validation failed for product {index + 1}
-                </div>
-              ) : null}
+              {!product.name || product.price <= 0
+                ? (
+                    <div className="mt-2 text-xs text-red-600">
+                      ⚠️ Validation failed for product
+                      {' '}
+                      {index + 1}
+                    </div>
+                  )
+                : null}
             </div>
           ))}
         </div>
@@ -332,7 +353,10 @@ export const ConfigurationValidation: Story = {
           </div>
           <div className="flex justify-between">
             <span className="text-gray-600">Timeout:</span>
-            <span>{timeout}ms</span>
+            <span>
+              {timeout}
+              ms
+            </span>
           </div>
           <div className="flex justify-between">
             <span className="text-gray-600">Retries:</span>

web/app/components/base/with-input-validation/index.tsx

@@ -1,6 +1,6 @@
 'use client'
-import React from 'react'
 import type { ZodSchema } from 'zod'
+import React from 'react'
 
 function withValidation<T extends Record<string, unknown>, K extends keyof T>(
   WrappedComponent: React.ComponentType<T>,