refactor: unified cn utils (#29916)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>

web/app/components/datasets/create/step-two/index.tsx

@@ -28,7 +28,7 @@ import escape from './escape'
 import { OptionCard } from './option-card'
 import LanguageSelect from './language-select'
 import { DelimiterInput, MaxLengthInput, OverlapInput } from './inputs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlOptions, CrawlResultItem, CreateDocumentReq, CustomFile, DocumentItem, FullDocumentDetail, ParentMode, PreProcessingRule, ProcessRule, Rules, createDocumentResponse } from '@/models/datasets'
 import { ChunkingMode, DataSourceType, ProcessMode } from '@/models/datasets'
 

web/app/components/datasets/create/step-two/language-select/index.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Popover from '@/app/components/base/popover'
 import { languages } from '@/i18n-config/language'
 

web/app/components/datasets/create/step-two/option-card.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
 import Image from 'next/image'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
@@ -20,11 +20,9 @@ type OptionCardHeaderProps = {
 
 export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props
-  return <div className={classNames(
-    'relative flex h-full overflow-hidden rounded-t-xl',
+  return <div className={cn('relative flex h-full overflow-hidden rounded-t-xl',
     isActive && activeClassName,
-    !disabled && 'cursor-pointer',
-  )}>
+    !disabled && 'cursor-pointer')}>
     <div className='relative flex size-14 items-center justify-center overflow-hidden'>
       {isActive && effectImg && <Image src={effectImg} className='absolute left-0 top-0 h-full w-full' alt='' width={56} height={56} />}
       <div className='p-1'>
@@ -34,7 +32,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
       </div>
     </div>
     <TriangleArrow
-      className={classNames('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
+      className={cn('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
     />
     <div className='flex-1 space-y-0.5 py-3 pr-4'>
       <div className='system-md-semibold text-text-secondary'>{title}</div>
@@ -66,14 +64,12 @@ export const OptionCard: FC<OptionCardProps> = (
   const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, noHighlight, disabled, ...rest } = props
   return (
     <div
-      className={classNames(
-        'rounded-xl bg-components-option-card-option-bg shadow-xs',
+      className={cn('rounded-xl bg-components-option-card-option-bg shadow-xs',
         (isActive && !noHighlight)
           ? 'border-[1.5px] border-components-option-card-option-selected-border'
           : 'border border-components-option-card-option-border',
         disabled && 'pointer-events-none opacity-50',
-        className,
-      )}
+        className)}
       style={{
         ...style,
       }}