refactor(component): virtual rendering page list (#4775)

Co-authored-by: Joooye_34 <Joooye1991@gmail.com>

packages/frontend/component/src/ui/checkbox/checkbox.tsx

@@ -57,6 +57,7 @@ export const Checkbox = ({
   return (
     <div
       className={clsx(styles.root, disabled && styles.disabled)}
+      role="checkbox"
       {...otherProps}
     >
       {icon}

packages/frontend/component/src/ui/scrollbar/index.css.ts

@@ -30,8 +30,7 @@ export const scrollableViewport = style({
 });
 
 globalStyle(`${scrollableViewport} > div`, {
-  maxWidth: '100%',
-  display: 'block !important',
+  display: 'contents !important',
 });
 
 export const scrollableContainer = style({
@@ -44,7 +43,6 @@ export const scrollbar = style({
   flexDirection: 'column',
   userSelect: 'none',
   touchAction: 'none',
-  marginRight: '4px',
   width: 'var(--scrollbar-width)',
   height: '100%',
   opacity: 1,

packages/frontend/component/src/ui/scrollbar/index.ts

@@ -1 +1,2 @@
+export * from './scrollable';
 export * from './scrollbar';

packages/frontend/component/src/ui/scrollbar/scrollable.tsx

@@ -0,0 +1,64 @@
+import * as ScrollArea from '@radix-ui/react-scroll-area';
+import clsx from 'clsx';
+import { forwardRef, type RefAttributes } from 'react';
+
+import * as styles from './index.css';
+
+export const ScrollableRoot = forwardRef<
+  HTMLDivElement,
+  ScrollArea.ScrollAreaProps & RefAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <ScrollArea.Root
+      {...props}
+      ref={ref}
+      className={clsx(className, styles.scrollableContainerRoot)}
+    >
+      {children}
+    </ScrollArea.Root>
+  );
+});
+
+ScrollableRoot.displayName = 'ScrollableRoot';
+
+export const ScrollableViewport = forwardRef<
+  HTMLDivElement,
+  ScrollArea.ScrollAreaViewportProps & RefAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <ScrollArea.Viewport
+      {...props}
+      ref={ref}
+      className={clsx(className, styles.scrollableViewport)}
+    >
+      {children}
+    </ScrollArea.Viewport>
+  );
+});
+
+ScrollableViewport.displayName = 'ScrollableViewport';
+
+export const ScrollableScrollbar = forwardRef<
+  HTMLDivElement,
+  ScrollArea.ScrollAreaScrollbarProps & RefAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <ScrollArea.Scrollbar
+      orientation="vertical"
+      {...props}
+      ref={ref}
+      className={clsx(className, styles.scrollbar)}
+    >
+      <ScrollArea.Thumb className={styles.scrollbarThumb} />
+      {children}
+    </ScrollArea.Scrollbar>
+  );
+});
+
+ScrollableScrollbar.displayName = 'ScrollableScrollbar';
+
+export const Scrollable = {
+  Root: ScrollableRoot,
+  Viewport: ScrollableViewport,
+  Scrollbar: ScrollableScrollbar,
+};