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

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

web/app/components/datasets/create/website/base/checkbox-with-label.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -31,9 +31,9 @@ const CheckboxWithLabel: FC<Props> = ({
       {tooltip && (
         <Tooltip
           popupContent={
-            <div className='w-[200px]'>{tooltip}</div>
+            <div className="w-[200px]">{tooltip}</div>
           }
-          triggerClassName='ml-0.5 w-4 h-4'
+          triggerClassName="ml-0.5 w-4 h-4"
         />
       )}
     </label>

web/app/components/datasets/create/website/base/crawled-result-item.tsx

@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
-import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
-import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
+import Checkbox from '@/app/components/base/checkbox'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   payload: CrawlResultItemType
@@ -31,19 +31,19 @@ const CrawledResultItem: FC<Props> = ({
   }, [isChecked, onCheckChange])
   return (
     <div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'cursor-pointer rounded-lg p-2')}>
-      <div className='relative flex'>
-        <div className='flex h-5 items-center'>
-          <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} id={testId} />
+      <div className="relative flex">
+        <div className="flex h-5 items-center">
+          <Checkbox className="mr-2 shrink-0" checked={isChecked} onCheck={handleCheckChange} id={testId} />
         </div>
-        <div className='flex min-w-0 grow flex-col'>
+        <div className="flex min-w-0 grow flex-col">
           <div
-            className='truncate text-sm font-medium text-text-secondary'
+            className="truncate text-sm font-medium text-text-secondary"
             title={payload.title}
           >
             {payload.title}
           </div>
           <div
-            className='mt-0.5 truncate text-xs text-text-tertiary'
+            className="mt-0.5 truncate text-xs text-text-tertiary"
             title={payload.source_url}
           >
             {payload.source_url}
@@ -51,7 +51,7 @@ const CrawledResultItem: FC<Props> = ({
         </div>
         <Button
           onClick={onPreview}
-          className='right-0 top-0 hidden h-6 px-1.5 text-xs font-medium uppercase group-hover:absolute group-hover:block'
+          className="right-0 top-0 hidden h-6 px-1.5 text-xs font-medium uppercase group-hover:absolute group-hover:block"
         >
           {t('datasetCreation.stepOne.website.preview')}
         </Button>

web/app/components/datasets/create/website/base/crawled-result.tsx

@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
+import type { CrawlResultItem } from '@/models/datasets'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
-import { cn } from '@/utils/classnames'
-import type { CrawlResultItem } from '@/models/datasets'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -58,22 +58,22 @@ const CrawledResult: FC<Props> = ({
 
   return (
     <div className={cn(className, 'border-t-[0.5px] border-divider-regular shadow-xs shadow-shadow-shadow-3')}>
-      <div className='flex h-[34px] items-center justify-between px-4'>
+      <div className="flex h-[34px] items-center justify-between px-4">
         <CheckboxWithLabel
           isChecked={isCheckAll}
           onChange={handleCheckedAll}
           label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
-          labelClassName='system-[13px] leading-[16px] font-medium text-text-secondary'
-          testId='select-all'
+          labelClassName="system-[13px] leading-[16px] font-medium text-text-secondary"
+          testId="select-all"
         />
-        <div className='text-xs text-text-tertiary'>
+        <div className="text-xs text-text-tertiary">
           {t(`${I18N_PREFIX}.scrapTimeInfo`, {
             total: list.length,
             time: usedTime.toFixed(1),
           })}
         </div>
       </div>
-      <div className='p-2'>
+      <div className="p-2">
         {list.map((item, index) => (
           <CrawledResultItem
             key={item.source_url}

web/app/components/datasets/create/website/base/crawling.tsx

@@ -19,15 +19,20 @@ const Crawling: FC<Props> = ({
 
   return (
     <div className={className}>
-      <div className='flex h-[34px] items-center border-y-[0.5px] border-divider-regular px-4
-        text-xs text-text-tertiary shadow-xs shadow-shadow-shadow-3'>
-        {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
+      <div className="flex h-[34px] items-center border-y-[0.5px] border-divider-regular px-4
+        text-xs text-text-tertiary shadow-xs shadow-shadow-shadow-3"
+      >
+        {t('datasetCreation.stepOne.website.totalPageScraped')}
+        {' '}
+        {crawledNum}
+        /
+        {totalNum}
       </div>
 
-      <div className='p-2'>
+      <div className="p-2">
         {['', '', '', ''].map((item, index) => (
-          <div className='py-[5px]' key={index}>
-            <RowStruct className='text-text-quaternary' />
+          <div className="py-[5px]" key={index}>
+            <RowStruct className="text-text-quaternary" />
           </div>
         ))}
       </div>

web/app/components/datasets/create/website/base/error-message.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { cn } from '@/utils/classnames'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -17,12 +17,12 @@ const ErrorMessage: FC<Props> = ({
 }) => {
   return (
     <div className={cn(className, 'border-t border-divider-subtle bg-dataset-warning-message-bg px-4 py-2 opacity-40')}>
-      <div className='flex h-5 items-center'>
-        <AlertTriangle className='mr-2 h-4 w-4 text-text-warning-secondary' />
-        <div className='system-md-medium text-text-warning'>{title}</div>
+      <div className="flex h-5 items-center">
+        <AlertTriangle className="mr-2 h-4 w-4 text-text-warning-secondary" />
+        <div className="system-md-medium text-text-warning">{title}</div>
       </div>
       {errorMsg && (
-        <div className='system-xs-regular mt-1 pl-6 text-text-secondary'>{errorMsg}</div>
+        <div className="system-xs-regular mt-1 pl-6 text-text-secondary">{errorMsg}</div>
       )}
     </div>
   )

web/app/components/datasets/create/website/base/field.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import Input from './input'
-import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
+import { cn } from '@/utils/classnames'
+import Input from './input'
 
 type Props = {
   className?: string
@@ -30,15 +30,18 @@ const Field: FC<Props> = ({
 }) => {
   return (
     <div className={cn(className)}>
-      <div className='flex py-[7px]'>
-        <div className={cn(labelClassName, 'flex h-[16px] items-center text-[13px] font-semibold text-text-secondary')}>{label} </div>
-        {isRequired && <span className='ml-0.5 text-xs font-semibold text-text-destructive'>*</span>}
+      <div className="flex py-[7px]">
+        <div className={cn(labelClassName, 'flex h-[16px] items-center text-[13px] font-semibold text-text-secondary')}>
+          {label}
+          {' '}
+        </div>
+        {isRequired && <span className="ml-0.5 text-xs font-semibold text-text-destructive">*</span>}
         {tooltip && (
           <Tooltip
             popupContent={
-              <div className='w-[200px]'>{tooltip}</div>
+              <div className="w-[200px]">{tooltip}</div>
             }
-            triggerClassName='ml-0.5 w-4 h-4'
+            triggerClassName="ml-0.5 w-4 h-4"
           />
         )}
       </div>

web/app/components/datasets/create/website/base/header.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import Divider from '@/app/components/base/divider'
-import Button from '@/app/components/base/button'
-import { cn } from '@/utils/classnames'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
+import React from 'react'
+import Button from '@/app/components/base/button'
+import Divider from '@/app/components/base/divider'
+import { cn } from '@/utils/classnames'
 
 type HeaderProps = {
   isInPipeline?: boolean
@@ -22,37 +22,38 @@ const Header = ({
   docLink,
 }: HeaderProps) => {
   return (
-    <div className='flex items-center gap-x-2'>
-      <div className='flex shrink-0 grow items-center gap-x-1'>
+    <div className="flex items-center gap-x-2">
+      <div className="flex shrink-0 grow items-center gap-x-1">
         <div className={cn(
           'text-text-secondary',
           isInPipeline ? 'system-sm-semibold' : 'system-md-semibold',
-        )}>
+        )}
+        >
           {title}
         </div>
-        <Divider type='vertical' className='mx-1 h-3.5' />
+        <Divider type="vertical" className="mx-1 h-3.5" />
         <Button
-          variant='secondary'
-          size='small'
+          variant="secondary"
+          size="small"
           className={cn(isInPipeline ? 'size-6 px-1' : 'gap-x-0.5 px-1.5')}
           onClick={onClickConfiguration}
         >
-          <RiEqualizer2Line className='size-4' />
+          <RiEqualizer2Line className="size-4" />
           {!isInPipeline && (
-            <span className='system-xs-medium'>
+            <span className="system-xs-medium">
               {buttonText}
             </span>
           )}
         </Button>
       </div>
       <a
-        className='system-xs-medium flex items-center gap-x-1 overflow-hidden text-text-accent'
+        className="system-xs-medium flex items-center gap-x-1 overflow-hidden text-text-accent"
         href={docLink}
-        target='_blank'
-        rel='noopener noreferrer'
+        target="_blank"
+        rel="noopener noreferrer"
       >
-        <RiBookOpenLine className='size-3.5 shrink-0' />
-        <span className='grow truncate' title={docTitle}>{docTitle}</span>
+        <RiBookOpenLine className="size-3.5 shrink-0" />
+        <span className="grow truncate" title={docTitle}>{docTitle}</span>
       </a>
     </div>
   )

web/app/components/datasets/create/website/base/input.tsx

@@ -50,12 +50,12 @@ const Input: FC<Props> = ({
       {...otherOption}
       value={value}
       onChange={handleChange}
-      className='system-xs-regular focus:bg-components-inout-border-active flex h-8 w-full rounded-lg border border-transparent
+      className="system-xs-regular focus:bg-components-inout-border-active flex h-8 w-full rounded-lg border border-transparent
       bg-components-input-bg-normal p-2 text-components-input-text-filled
         caret-[#295eff] placeholder:text-components-input-text-placeholder hover:border
         hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border focus:border-components-input-border-active
         focus:shadow-xs focus:shadow-shadow-shadow-3
-        focus-visible:outline-none'
+        focus-visible:outline-none"
       placeholder={placeholder}
     />
   )

web/app/components/datasets/create/website/base/options-wrap.tsx

@@ -1,11 +1,12 @@
 'use client'
-import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiEqualizer2Line } from '@remixicon/react'
-import { cn } from '@/utils/classnames'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { cn } from '@/utils/classnames'
+
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
 type Props = {
@@ -33,17 +34,17 @@ const OptionsWrap: FC<Props> = ({
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
       <div
-        className='flex h-[26px] cursor-pointer select-none items-center gap-x-1 py-1'
+        className="flex h-[26px] cursor-pointer select-none items-center gap-x-1 py-1"
         onClick={foldToggle}
       >
-        <div className='flex grow items-center'>
-          <RiEqualizer2Line className='mr-1 h-4 w-4 text-text-secondary' />
-          <span className='text-[13px] font-semibold uppercase leading-[16px] text-text-secondary'>{t(`${I18N_PREFIX}.options`)}</span>
+        <div className="flex grow items-center">
+          <RiEqualizer2Line className="mr-1 h-4 w-4 text-text-secondary" />
+          <span className="text-[13px] font-semibold uppercase leading-[16px] text-text-secondary">{t(`${I18N_PREFIX}.options`)}</span>
         </div>
         <ChevronRight className={cn(!fold && 'rotate-90', 'h-4 w-4 shrink-0 text-text-tertiary')} />
       </div>
       {!fold && (
-        <div className='mb-4'>
+        <div className="mb-4">
           {children}
         </div>
       )}

web/app/components/datasets/create/website/base/url-input.tsx

@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Input from './input'
 import Button from '@/app/components/base/button'
 import { useDocLink } from '@/context/i18n'
+import Input from './input'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -30,17 +30,17 @@ const UrlInput: FC<Props> = ({
   }, [isRunning, onRun, url])
 
   return (
-    <div className='flex items-center justify-between gap-x-2'>
+    <div className="flex items-center justify-between gap-x-2">
       <Input
         value={url}
         onChange={handleUrlChange}
         placeholder={docLink()}
       />
       <Button
-        variant='primary'
+        variant="primary"
         onClick={handleOnRun}
         loading={isRunning}
-        spinnerClassName='!ml-0'
+        spinnerClassName="!ml-0"
       >
         {!isRunning ? t(`${I18N_PREFIX}.run`) : ''}
       </Button>