remove buster list row component

web/src/components/ui/list/BusterList/BusterList.stories.tsx

@@ -49,12 +49,12 @@ const sampleColumns = [
   {
     dataIndex: 'address',
     title: 'Address',
-    width: 300
+    width: 200
   },
   {
     dataIndex: 'email',
     title: 'Email',
-    width: 200
+    width: 100
   },
   {
     dataIndex: 'actions',
@@ -79,6 +79,17 @@ const generateSampleRows = (count: number): BusterListRow[] => {
         email: faker.internet.email()
       }
     });
+
+    if (i === 3) {
+      rows.push({
+        id: 'section1',
+        data: null,
+        rowSection: {
+          title: faker.company.name(),
+          secondaryTitle: faker.company.catchPhrase()
+        }
+      });
+    }
   }
 
   // Add a section row in the middle

web/src/components/ui/list/BusterList/BusterListRowComponent.tsx

@@ -4,8 +4,8 @@ import React, { useMemo } from 'react';
 import { BusterListRow, BusterListColumn, BusterListRowItem, BusterListProps } from './interfaces';
 import Link from 'next/link';
 import { CheckboxColumn } from './CheckboxColumn';
-import { createStyles } from 'antd-style';
 import { HEIGHT_OF_ROW } from './config';
+import { cn } from '@/lib/classMerge';
 
 export const BusterListRowComponent = React.memo(
   React.forwardRef<
@@ -38,7 +38,6 @@ export const BusterListRowComponent = React.memo(
       },
       ref
     ) => {
-      const { styles, cx } = useStyles();
       const link = row.link;
 
       const onContextMenu = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => {
@@ -56,20 +55,28 @@ export const BusterListRowComponent = React.memo(
         row.onClick?.();
       });
 
+      const rowStyles = {
+        height: `${HEIGHT_OF_ROW}px`,
+        minHeight: `${HEIGHT_OF_ROW}px`,
+        ...style
+      };
+
       return (
         <LinkWrapper href={link}>
           <div
             onClick={onContainerClick}
-            style={style}
+            style={rowStyles}
             onContextMenu={onContextMenu}
-            className={cx(
+            className={cn(
-              styles.row,
+              'border-border flex items-center border-b pr-6',
-              rowClassName,
+              checked ? 'bg-primary-background hover:bg-primary-background-hover' : '',
-              'group flex items-center pr-6',
+              isLastChild && hideLastRowBorder ? '!border-b-0' : '',
-              checked ? 'checked' : '',
-              isLastChild && hideLastRowBorder ? 'border-b-0!' : '',
               !onSelectChange ? 'pl-3.5' : '',
-              { clickable: !!(link || row.onClick || (onSelectChange && useRowClickSelectChange)) }
+              link || row.onClick || (onSelectChange && useRowClickSelectChange)
+                ? 'hover:bg-item-hover cursor-pointer'
+                : '',
+              rowClassName,
+              'group'
             )}
             ref={ref}>
             {!!onSelectChange ? (
@@ -106,8 +113,6 @@ const BusterListCellComponent: React.FC<{
   onSelectChange?: (v: boolean, id: string) => void;
   render?: (data: string | number | React.ReactNode, row: BusterListRowItem) => React.ReactNode;
 }> = React.memo(({ data, width, row, render, isFirstCell, isLastCell, onSelectChange }) => {
-  const { styles, cx } = useStyles();
-
   const memoizedStyle = useMemo(() => {
     return {
       width: width || '100%',
@@ -117,9 +122,10 @@ const BusterListCellComponent: React.FC<{
 
   return (
     <div
-      className={cx(styles.cell, 'row-cell flex items-center overflow-hidden', {
+      className={cn(
-        secondary: !isFirstCell
+        'row-cell flex h-full items-center overflow-hidden px-1',
-      })}
+        isFirstCell ? 'text-text-default text-base' : 'text-text-tertiary text-sm'
+      )}
       style={memoizedStyle}>
       <div className="w-full truncate">{render ? render(data, row?.data) : data}</div>
     </div>
@@ -138,43 +144,3 @@ const LinkWrapper: React.FC<{
     </Link>
   );
 };
-
-export const useStyles = createStyles(({ css, token }) => ({
-  row: css`
-    height: ${HEIGHT_OF_ROW}px;
-    min-height: ${HEIGHT_OF_ROW}px;
-    border-bottom: 0.5px solid ${token.colorBorder};
-
-    &.clickable {
-      cursor: pointer;
-
-      &:hover {
-        background-color: ${token.controlItemBgHover};
-      }
-    }
-
-    .row-cell {
-      padding: 0 4px;
-      display: flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    &.checked {
-      background-color: ${token.colorPrimaryBg};
-      &:hover {
-        background-color: ${token.colorPrimaryBgHover};
-      }
-    }
-  `,
-  cell: css`
-    color: ${token.colorText};
-    font-size: 13px;
-    @apply text-base;
-
-    &.secondary {
-      color: ${token.colorTextTertiary};
-      @apply text-xs;
-    }
-  `
-}));