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

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

web/app/components/base/segmented-control/index.spec.tsx

@@ -21,7 +21,7 @@ describe('SegmentedControl', () => {
   })
 
   it('renders all options correctly', () => {
-    render(<SegmentedControl options={options} value='option1' onChange={onSelectMock} />)
+    render(<SegmentedControl options={options} value="option1" onChange={onSelectMock} />)
 
     options.forEach((option) => {
       expect(screen.getByText(option.text)).toBeInTheDocument()
@@ -35,9 +35,9 @@ describe('SegmentedControl', () => {
     render(
       <SegmentedControl
         options={options}
-        value='option1'
+        value="option1"
         onChange={onSelectMock}
-        activeClassName='custom-active-class'
+        activeClassName="custom-active-class"
       />,
     )
 
@@ -46,28 +46,28 @@ describe('SegmentedControl', () => {
   })
 
   it('highlights the selected option', () => {
-    render(<SegmentedControl options={options} value='option2' onChange={onSelectMock} />)
+    render(<SegmentedControl options={options} value="option2" onChange={onSelectMock} />)
 
     const selectedOption = screen.getByText('Option 2').closest('button')
     expect(selectedOption).toHaveClass('active')
   })
 
   it('calls onChange when an option is clicked', () => {
-    render(<SegmentedControl options={options} value='option1' onChange={onSelectMock} />)
+    render(<SegmentedControl options={options} value="option1" onChange={onSelectMock} />)
 
     fireEvent.click(screen.getByText('Option 3'))
     expect(onSelectMock).toHaveBeenCalledWith('option3')
   })
 
   it('does not call onChange when clicking the already selected option', () => {
-    render(<SegmentedControl options={options} value='option1' onChange={onSelectMock} />)
+    render(<SegmentedControl options={options} value="option1" onChange={onSelectMock} />)
 
     fireEvent.click(screen.getByText('Option 1'))
     expect(onSelectMock).not.toHaveBeenCalled()
   })
 
   it('handles disabled state correctly', () => {
-    render(<SegmentedControl options={optionsWithDisabled} value='option1' onChange={onSelectMock} />)
+    render(<SegmentedControl options={optionsWithDisabled} value="option1" onChange={onSelectMock} />)
 
     fireEvent.click(screen.getByText('Option 2'))
     expect(onSelectMock).not.toHaveBeenCalled()
@@ -85,7 +85,7 @@ describe('SegmentedControl', () => {
     render(
       <SegmentedControl
         options={options}
-        value='option1'
+        value="option1"
         onChange={onSelectMock}
         className={customClass}
       />,

web/app/components/base/segmented-control/index.stories.tsx

@@ -27,7 +27,9 @@ const SegmentedControlDemo = ({
       <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
         <span>Segmented control</span>
         <code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
-          value="{value}"
+          value="
+          {value}
+          "
         </code>
       </div>
       <SegmentedControl

web/app/components/base/segmented-control/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import { cn } from '@/utils/classnames'
 import type { RemixiconComponentType } from '@remixicon/react'
-import Divider from '../divider'
 import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
+import React from 'react'
+import { cn } from '@/utils/classnames'
+import Divider from '../divider'
 import './index.css'
 
 type SegmentedControlOption<T> = {
@@ -102,7 +102,8 @@ export const SegmentedControl = <T extends string | number | symbol>({
     <div className={cn(
       SegmentedControlVariants({ size, padding }),
       className,
-    )}>
+    )}
+    >
       {options.map((option, index) => {
         const { Icon, text, count, disabled } = option
         const isSelected = index === selectedOptionIndex
@@ -110,7 +111,7 @@ export const SegmentedControl = <T extends string | number | symbol>({
         const isLast = index === options.length - 1
         return (
           <button
-            type='button'
+            type="button"
             key={String(option.value)}
             className={cn(
               isSelected ? 'active' : 'default',
@@ -125,20 +126,20 @@ export const SegmentedControl = <T extends string | number | symbol>({
             }}
             disabled={disabled}
           >
-            {Icon && <Icon className='size-4 shrink-0' />}
+            {Icon && <Icon className="size-4 shrink-0" />}
             {text && (
               <div className={cn('inline-flex items-center gap-x-1', ItemTextWrapperVariants({ size }))}>
                 <span>{text}</span>
                 {count && size === 'large' && (
-                  <div className='system-2xs-medium-uppercase inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary'>
+                  <div className="system-2xs-medium-uppercase inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary">
                     {count}
                   </div>
                 )}
               </div>
             )}
             {!isLast && !isSelected && !isNextSelected && (
-              <div data-testid={`segmented-control-divider-${index}`} className='absolute right-[-1px] top-0 flex h-full items-center'>
-                <Divider type='vertical' className='mx-0 h-3.5' />
+              <div data-testid={`segmented-control-divider-${index}`} className="absolute right-[-1px] top-0 flex h-full items-center">
+                <Divider type="vertical" className="mx-0 h-3.5" />
               </div>
             )}
           </button>