feat: n to 1 retrieval legacy (#6554)

web/app/components/base/badge.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react'
+import cn from '@/utils/classnames'
+
+type BadgeProps = {
+  className?: string
+  text: string
+}
+
+const Badge = ({
+  className,
+  text,
+}: BadgeProps) => {
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep system-2xs-medium-uppercase leading-3 text-text-tertiary',
+        className,
+      )}
+    >
+      {text}
+    </div>
+  )
+}
+
+export default memo(Badge)

web/app/components/base/button/index.css

@@ -2,46 +2,185 @@
 
 @layer components {
   .btn {
-    @apply inline-flex justify-center items-center border-[0.5px] font-medium cursor-pointer whitespace-nowrap shadow;
+    @apply inline-flex justify-center items-center cursor-pointer whitespace-nowrap;
   }
 
   .btn-disabled {
-    @apply opacity-60 cursor-not-allowed;
+    @apply cursor-not-allowed;
   }
 
   .btn-small {
-    @apply px-2 h-6 rounded-md text-xs
+    @apply px-2 h-6 rounded-md text-xs font-medium;
   }
 
   .btn-medium {
-    @apply px-3.5 h-8 rounded-lg text-[13px]
+    @apply px-3.5 h-8 rounded-lg text-[13px] leading-4 font-medium;
   }
 
   .btn-large {
-    @apply px-4 h-9 rounded-[10px] text-sm font-semibold
-  }
-
-  .btn-secondary {
-    @apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-gray-700;
-  }
-
-  .btn-secondary-accent {
-    @apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-primary-600;
+    @apply px-4 h-9 rounded-[10px] text-sm font-semibold;
   }
 
   .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-700 text-white;
+    @apply 
+    shadow
+    bg-components-button-primary-bg
+    border-components-button-primary-border
+    hover:bg-components-button-primary-bg-hover
+    hover:border-components-button-primary-border-hover
+    text-components-button-primary-text;
+  }
+
+  .btn-primary.btn-destructive {
+    @apply 
+    bg-components-button-destructive-primary-bg
+    border-components-button-destructive-primary-border
+    hover:bg-components-button-destructive-primary-bg-hover
+    hover:border-components-button-destructive-primary-border-hover
+    text-components-button-destructive-primary-text;
+  }
+
+  .btn-primary.btn-disabled {
+    @apply 
+    shadow-none
+    bg-components-button-primary-bg-disabled
+    border-components-button-primary-border-disabled
+    text-components-button-primary-text-disabled;
+  }
+
+  .btn-primary.btn-destructive.btn-disabled {
+    @apply 
+    shadow-none
+    bg-components-button-destructive-primary-bg-disabled
+    border-components-button-destructive-primary-border-disabled
+    text-components-button-destructive-primary-text-disabled;
+  }
+
+  .btn-secondary {
+    @apply 
+    border-[0.5px]
+    shadow-xs
+    bg-components-button-secondary-bg 
+    border-components-button-secondary-border 
+    hover:bg-components-button-secondary-bg-hover 
+    hover:border-components-button-secondary-border-hover 
+    text-components-button-secondary-text;
+  }
+
+  .btn-secondary.btn-disabled {
+    @apply 
+    bg-components-button-secondary-bg-disabled 
+    border-components-button-secondary-border-disabled 
+    text-components-button-secondary-text-disabled;
+  }
+
+  .btn-secondary.btn-destructive {
+    @apply 
+    bg-components-button-destructive-secondary-bg 
+    border-components-button-destructive-secondary-border 
+    hover:bg-components-button-destructive-secondary-bg-hover 
+    hover:border-components-button-destructive-secondary-border-hover 
+    text-components-button-destructive-secondary-text;
+  }
+
+  .btn-secondary.btn-destructive.btn-disabled {
+    @apply 
+    bg-components-button-destructive-secondary-bg-disabled 
+    border-components-button-destructive-secondary-border-disabled 
+    text-components-button-destructive-secondary-text-disabled;
+  }
+
+  
+  .btn-secondary-accent {
+    @apply 
+    border-[0.5px]
+    shadow-xs
+    bg-components-button-secondary-bg 
+    border-components-button-secondary-border 
+    hover:bg-components-button-secondary-bg-hover 
+    hover:border-components-button-secondary-border-hover 
+    text-components-button-secondary-accent-text;
+  }
+
+  .btn-secondary-accent.btn-disabled {
+    @apply 
+    bg-components-button-secondary-bg-disabled 
+    border-components-button-secondary-border-disabled 
+    text-components-button-secondary-accent-text-disabled;
   }
 
   .btn-warning {
-    @apply bg-red-600 hover:bg-red-700 text-white;
+    @apply 
+    bg-components-button-destructive-primary-bg 
+    border-components-button-destructive-primary-border 
+    hover:bg-components-button-destructive-primary-bg-hover 
+    hover:border-components-button-destructive-primary-border-hover 
+    text-components-button-destructive-primary-text;
   }
 
-  .btn-ghost {
-    @apply bg-transparent hover:bg-gray-200 border-transparent shadow-none text-gray-700;
+  .btn-warning.btn-disabled {
+    @apply 
+    bg-components-button-destructive-primary-bg-disabled 
+    border-components-button-destructive-primary-border-disabled 
+    text-components-button-destructive-primary-text-disabled;
   }
 
   .btn-tertiary {
-    @apply bg-[#F2F4F7] hover:bg-[#E9EBF0] border-transparent shadow-none text-gray-700;
+    @apply 
+    bg-components-button-tertiary-bg 
+    hover:bg-components-button-tertiary-bg-hover 
+    text-components-button-tertiary-text;
+  }
+
+  .btn-tertiary.btn-disabled {
+    @apply 
+    bg-components-button-tertiary-bg-disabled 
+    text-components-button-tertiary-text-disabled;
+  }
+
+  .btn-tertiary.btn-destructive {
+    @apply 
+    bg-components-button-destructive-tertiary-bg 
+    hover:bg-components-button-destructive-tertiary-bg-hover 
+    text-components-button-destructive-tertiary-text;
+  }
+
+  .btn-tertiary.btn-destructive.btn-disabled {
+    @apply 
+    bg-components-button-destructive-tertiary-bg-disabled 
+    text-components-button-destructive-tertiary-text-disabled;
+  }
+
+  .btn-ghost {
+    @apply 
+    hover:bg-components-button-ghost-bg-hover 
+    text-components-button-ghost-text;
+  }
+
+  .btn-ghost.btn-disabled {
+    @apply 
+    text-components-button-ghost-text-disabled;
+  }
+
+  .btn-ghost.btn-destructive {
+    @apply 
+    hover:bg-components-button-destructive-ghost-bg-hover 
+    text-components-button-destructive-ghost-text;
+  }
+
+  .btn-ghost.btn-destructive.btn-disabled {
+    @apply 
+    text-components-button-destructive-ghost-text-disabled;
+  }
+
+  .btn-ghost-accent {
+    @apply 
+    hover:bg-state-accent-hover
+    text-components-button-secondary-accent-text;
+  }
+
+  .btn-ghost-accent.btn-disabled {
+    @apply 
+    text-components-button-secondary-accent-text-disabled;
   }
 }

web/app/components/base/button/index.tsx

@@ -14,6 +14,7 @@ const buttonVariants = cva(
         'secondary': 'btn-secondary',
         'secondary-accent': 'btn-secondary-accent',
         'ghost': 'btn-ghost',
+        'ghost-accent': 'btn-ghost-accent',
         'tertiary': 'btn-tertiary',
       },
       size: {
@@ -30,16 +31,20 @@ const buttonVariants = cva(
 )
 
 export type ButtonProps = {
+  destructive?: boolean
   loading?: boolean
   styleCss?: CSSProperties
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, loading, styleCss, children, ...props }, ref) => {
+  ({ className, variant, size, destructive, loading, styleCss, children, ...props }, ref) => {
     return (
       <button
         type='button'
-        className={classNames(buttonVariants({ variant, size, className }))}
+        className={classNames(
+          buttonVariants({ variant, size, className }),
+          destructive && 'btn-destructive',
+        )}
         ref={ref}
         style={styleCss}
         {...props}

web/app/components/base/radio-card/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import s from './style.module.css'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -29,7 +28,12 @@ const RadioCard: FC<Props> = ({
   chosenConfigWrapClassName,
 }) => {
   return (
-    <div className={cn(s.item, isChosen && s.active)}>
+    <div
+      className={cn(
+        'border border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl hover:shadow-xs cursor-pointer',
+        isChosen && 'bg-components-option-card-option-selected-bg border-components-panel-border shadow-xs',
+      )}
+    >
       <div className='flex py-3 pl-3 pr-4' onClick={onChosen}>
         <div className={cn(iconBgClassName, 'mr-3 shrink-0 flex w-8 justify-center h-8 items-center rounded-lg')}>
           {icon}
@@ -40,12 +44,15 @@ const RadioCard: FC<Props> = ({
         </div>
         {!noRadio && (
           <div className='shrink-0 flex items-center h-8'>
-            <div className={s.radio}></div>
+            <div className={cn(
+              'w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full',
+              isChosen && 'border-[5px] border-components-radio-border-checked',
+            )}></div>
           </div>
         )}
       </div>
       {((isChosen && chosenConfig) || noRadio) && (
-        <div className={cn(chosenConfigWrapClassName, 'pt-2 px-14 pb-6 border-t border-gray-200')}>
+        <div className={cn(chosenConfigWrapClassName, 'p-3 border-t border-gray-200')}>
           {chosenConfig}
         </div>
       )}

web/app/components/base/radio-card/simple/index.tsx

@@ -6,7 +6,7 @@ import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
-  title: string
+  title: string | JSX.Element | null
   description: string
   isChosen: boolean
   onChosen: () => void

web/app/components/base/radio-card/style.module.css

@@ -1,25 +0,0 @@
-.item {
-  @apply relative rounded-xl border border-gray-100 cursor-pointer;
-  background-color: #fcfcfd;
-}
-
-.item.active {
-  border-width: 1.5px;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}
-
-.item:hover {
-  background-color: #ffffff;
-  border-color: #B2CCFF;
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-}
-
-.radio {
-  @apply w-4 h-4 border-[2px] border-gray-200 rounded-full;
-}
-
-.item.active .radio {
-  border-width: 5px;
-  border-color: #155EEF;
-}

web/app/components/base/slider/index.tsx

@@ -4,6 +4,8 @@ import './style.css'
 
 type ISliderProps = {
   className?: string
+  thumbClassName?: string
+  trackClassName?: string
   value: number
   max?: number
   min?: number
@@ -12,16 +14,26 @@ type ISliderProps = {
   onChange: (value: number) => void
 }
 
-const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disabled, onChange }) => {
+const Slider: React.FC<ISliderProps> = ({
+  className,
+  thumbClassName,
+  trackClassName,
+  max,
+  min,
+  step,
+  value,
+  disabled,
+  onChange,
+}) => {
   return <ReactSlider
     disabled={disabled}
     value={isNaN(value) ? 0 : value}
     min={min || 0}
     max={max || 100}
     step={step || 1}
-    className={cn(className, 'slider')}
-    thumbClassName="slider-thumb"
-    trackClassName="slider-track"
+    className={cn('slider', className)}
+    thumbClassName={cn('slider-thumb', thumbClassName)}
+    trackClassName={cn('slider-track', trackClassName)}
     onChange={onChange}
   />
 }