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/formatted-text/flavours/edit-slice.tsx

@@ -6,7 +6,7 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import lineClamp from 'line-clamp'
 import type { SliceProps } from './type'
 import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './shared'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 
 type EditSliceProps = SliceProps<{
@@ -56,7 +56,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
   return (
     <>
       <SliceContainer {...rest}
-        className={classNames('mr-0 block', className)}
+        className={cn('mr-0 block', className)}
         ref={(ref) => {
           refs.setReference(ref)
           if (ref)
@@ -65,26 +65,20 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
         {...getReferenceProps()}
       >
         <SliceLabel
-          className={classNames(
-            isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
-            labelClassName,
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
+            labelClassName)}
           labelInnerClassName={labelInnerClassName}
         >
           {label}
         </SliceLabel>
         <SliceContent
-          className={classNames(
-            isDestructive && '!bg-state-destructive-hover-alt',
-            contentClassName,
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-hover-alt',
+            contentClassName)}
         >
           {text}
         </SliceContent>
         {showDivider && <SliceDivider
-          className={classNames(
-            isDestructive && '!bg-state-destructive-hover-alt',
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-hover-alt')}
         />}
         {delBtnShow && <FloatingFocusManager
           context={context}

web/app/components/datasets/formatted-text/flavours/shared.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const baseStyle = 'py-[3px]'
 
@@ -12,10 +12,8 @@ export const SliceContainer: FC<SliceContainerProps> = (
   },
 ) => {
   const { className, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    'group mr-1 select-none align-bottom text-sm',
-    className,
-  )} />
+  return <span {...rest} ref={ref} className={cn('group mr-1 select-none align-bottom text-sm',
+    className)} />
 }
 SliceContainer.displayName = 'SliceContainer'
 
@@ -28,12 +26,10 @@ export const SliceLabel: FC<SliceLabelProps> = (
   },
 ) => {
   const { className, children, labelInnerClassName, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'bg-state-base-hover-alt px-1 uppercase text-text-tertiary group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface',
-    className,
-  )}>
-    <span className={classNames('text-nowrap', labelInnerClassName)}>
+    className)}>
+    <span className={cn('text-nowrap', labelInnerClassName)}>
       {children}
     </span>
   </span>
@@ -49,11 +45,9 @@ export const SliceContent: FC<SliceContentProps> = (
   },
 ) => {
   const { className, children, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'whitespace-pre-line break-all bg-state-base-hover px-1 leading-7 group-hover:bg-state-accent-hover-alt group-hover:text-text-primary',
-    className,
-  )}>
+    className)}>
     {children}
   </span>
 }
@@ -68,11 +62,9 @@ export const SliceDivider: FC<SliceDividerProps> = (
   },
 ) => {
   const { className, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'bg-state-base-active px-[1px] text-sm group-hover:bg-state-accent-solid',
-    className,
-  )}>
+    className)}>
     {/* use a zero-width space to make the hover area bigger */}
     &#8203;
   </span>

web/app/components/datasets/formatted-text/formatted.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type FormattedTextProps = ComponentProps<'p'>
 
@@ -7,6 +7,6 @@ export const FormattedText: FC<FormattedTextProps> = (props) => {
   const { className, ...rest } = props
   return <p
     {...rest}
-    className={classNames('leading-7', className)}
+    className={cn('leading-7', className)}
   >{props.children}</p>
 }