Merge pull request #44 from NJUPT-SAST/dev-refactor

refactor style

packages/ui-react/lib/Accordion/Accordion.module.scss

@@ -15,7 +15,8 @@ $animation-duration: $duration-300;
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
-    padding: 16px 20px;
+    padding: 0px 20px;
+    min-height: 2.5rem;
     font-weight: bolder;
     transition: all $animation-duration $cubic-bezier;
     &:hover:not(.disabled) {
@@ -37,6 +38,9 @@ $animation-duration: $duration-300;
     width: 100%;
     min-height: 0px;
     display: flex;
+    height: fit-content;
+    // align-items: center;
+    // justify-content: center;
     .inner {
       padding: 10px 20px;
       opacity: 0;

packages/ui-react/lib/Accordion/Accordion.stories.tsx

@@ -19,8 +19,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultProps: AccordionProps = {
-  accordionTrigger: <span>hello</span>,
-  accordionContent: <span>hi</span>,
+  accordionTrigger: <span>你好 👋</span>,
+  accordionContent: <span>世界 🌍</span>,
   disabled: false,
   width: 300,
 };

packages/ui-react/lib/Accordion/Accordion.tsx

@@ -3,7 +3,7 @@ import styles from './Accordion.module.scss';
 import classnames from 'classnames';
 import { ChevronDown } from 'lucide-react';
 
-export interface AccordionProps {
+export interface AccordionProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
   /**
    * the width of the Accordion
    */
@@ -20,17 +20,24 @@ export interface AccordionProps {
    * the accordionContent of the Accordion
    */
   accordionContent: React.ReactNode;
+  /**
+   * className
+   */
+  className?: string;
 }
 
 export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-  ({ disabled = false, accordionTrigger, accordionContent, width = 280, ...rest }, ref) => {
+  (
+    { disabled = false, accordionTrigger, accordionContent, className, width = 280, ...rest },
+    ref,
+  ) => {
     const accordionClass = classnames(styles['base']);
     const [visible, setVisible] = useState<boolean>(false);
     return (
       <div
         style={{ width: width }}
         ref={ref}
-        className={`${accordionClass}  ${visible ? styles['show'] : ''}`}
+        className={`${accordionClass}  ${visible ? styles['show'] : ''} ${className}`}
         {...rest}
       >
         <button

packages/ui-react/lib/Badge/Badge.module.scss

@@ -1,44 +1,67 @@
 @use '../variables' as *;
+
 @mixin color-badge($color-name) {
   background-color: $color-name;
-  color: $white-color;
-  font-weight: bold;
 }
 
-.base {
-  border-radius: $radius-5;
-  display: inline-flex;
-  @include shadow;
-  transition: all $duration-100 $cubic-bezier;
-  &:hover {
-    opacity: 0.8;
-  }
+@mixin badge-color {
   &.info {
-    @include color-badge($primary-color);
+    @include color-badge($info-color);
   }
+
   &.success {
     @include color-badge($success-color);
   }
+
   &.warning {
     @include color-badge($warning-color);
   }
+
   &.error {
     @include color-badge($danger-color);
   }
+
   &.ghost {
     @include color-badge($pale-white-color);
     color: $black-color;
   }
+}
+
+@mixin badge-size {
   &.medium {
-    font-size: 14px;
-    padding: 2px 11px;
+    font-size: 1rem;
+    padding: 0px 12px;
+    height: 28px;
+    border-radius: 14px;
   }
+
   &.large {
-    font-size: 18px;
-    padding: 3px 14px;
+    font-size: 1.2rem;
+    padding: 0px 16px;
+    height: 32px;
+    border-radius: 16px;
   }
+
   &.small {
-    font-size: 10px;
-    padding: 2px 8px;
+    padding: 0px 8px;
+    height: 24px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+  }
+}
+
+.base {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: solid 1px $default-color;
+  cursor: pointer;
+
+  @include shadow;
+  @include badge-color;
+  @include badge-size;
+
+  span {
+    display: inline;
   }
 }

packages/ui-react/lib/Badge/Badge.stories.tsx

@@ -29,7 +29,7 @@ type Story = StoryObj<typeof meta>;
 const defaultProps: BadgeProps = {
   size: 'medium',
   type: 'info',
-  content: 'hello',
+  content: '你好 世界👋',
   clickCopy: false,
 };
 

packages/ui-react/lib/Badge/Badge.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type MouseEventHandler } from 'react';
 import styles from './Badge.module.scss';
 import classNames from 'classnames';
 
-export interface BadgeProps {
+export interface BadgeProps extends Omit<React.HtmlHTMLAttributes<HTMLDivElement>, 'onClick'> {
   /**
    * the type of the Badge
    */
@@ -27,17 +27,22 @@ export interface BadgeProps {
    * classname , the classname of the badge
    */
   className?: string;
+  /**
+   * onClick
+   */
+  onClick?: MouseEventHandler<HTMLDivElement>;
 }
 
 export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
   (
     {
       type = 'info',
       size = 'medium',
-      content = 'hello',
+      content,
       clickCopy = false,
       shadow = 'none',
       className,
+      onClick,
       ...rest
     },
     ref,
@@ -50,16 +55,17 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
       className,
     );
 
-    const handleBadge = () => {
+    const handleClickBadge: MouseEventHandler<HTMLDivElement> = (event) => {
       navigator.clipboard.writeText(content);
+      onClick && onClick(event);
     };
 
     return (
       <div
         ref={ref}
         className={badgeClass}
+        onClick={clickCopy ? handleClickBadge : undefined}
         {...rest}
-        onClick={clickCopy ? handleBadge : undefined}
       >
         <span>{content}</span>
       </div>

packages/ui-react/lib/Button/Button.module.scss

@@ -1,85 +1,42 @@
 @use '../variables' as *;
 
 .base {
-  background-color: $primary-color;
-  color: $white-color;
-  padding: 10px;
-  border-radius: 5px;
+  display: block;
+  border-radius: 4px;
   border: none;
   cursor: pointer;
-  font-size: 16px;
   font-weight: 400;
-  transition: all 0.15s ease-in-out;
-  @include shadow;
-
-  &:hover {
-    backdrop-filter: brightness(0.85);
-  }
+  transition: box-shadow $animation-time-regular $cubic-bezier;
 
   &:active {
     transform: scale(0.98);
+    filter: blur(0.1px);
   }
 
-  &.primary {
-    background-color: $primary-color;
-  }
-
-  &.secondary {
-    background-color: $white-color;
-    color: $primary-color;
-    border: 1px solid $primary-color;
+  &.small {
+    padding: 6px 12px;
+    font-size: 0.8rem;
   }
 
-  &.border {
-    border: solid 1px $border-white-color;
-    background-color: $white-color;
-    color: $black-color;
-    font-weight: 500;
+  &.medium {
+    font-size: 1rem;
+    padding: 8px 16px;
   }
 
-  &.ghost {
-    background-color: transparent;
-    color: $primary-color;
-    font-weight: 600;
-
-    &:hover:not(.disabled) {
-      filter: brightness(1);
-      backdrop-filter: brightness(0.97);
-    }
+  &.large {
+    padding: 10px 20px;
+    font-size: 1.2rem;
   }
 
-  &.danger {
-    background-color: $danger-color;
-  }
+  @include color;
 
   &.disabled {
-    cursor: not-allowed;
-
-    &:hover {
-      backdrop-filter: none;
-    }
-
-    &:active {
-      transform: none;
-    }
-  }
-
-  &.disabledShadow {
-    filter: grayscale(1);
-  }
-
-  &.small {
-    padding: 6px 7px;
-    font-size: 12px;
+    // all: unset;
+    @include disabled;
+    // background-color: $white-color;
   }
 
-  &.medium {
-    padding: 8px 10px;
-    font-size: 16px;
-  }
-
-  &.large {
-    padding: 15px 18px;
-    font-size: 20px;
+  &:hover {
+    @include shadow;
   }
 }

packages/ui-react/lib/Button/Button.stories.ts

@@ -33,28 +33,27 @@ type Story = StoryObj<typeof meta>;
 const defaultProps: ButtonProps = {
   color: 'primary',
   size: 'medium',
-  disabledShadow: true,
+  children: '点击 我🙋!',
 };
 
 export const DefaultButton: Story = {
   args: {
     ...defaultProps,
-    children: 'Click Me!',
   },
 };
 
 export const DisabledButton: Story = {
   args: {
     ...defaultProps,
-    children: 'Click Me!',
+    // children: 'Click Me!',
     disabled: true,
   },
 };
 
 export const ShowToastButton: Story = {
   args: {
     ...defaultProps,
-    children: 'Click Me!',
+    // children: 'Click Me!',
     onClick: () => showToast({ type: 'error' }),
   },
 };

packages/ui-react/lib/Button/Button.tsx

@@ -23,21 +23,16 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
    * className of the button
    */
   className?: string;
-  /**
-   * disabledShadow, when the button is disabled ,the shadow is or not
-   */
-  disabledShadow?: boolean;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       color = 'primary',
-      shadow = 'none',
+      shadow = 'regular',
       size = 'medium',
       disabled = false,
       className,
-      disabledShadow = true,
       ...rest
     },
     ref,
@@ -47,15 +42,14 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       styles[color],
       styles[size],
       styles[disabled ? 'disabled' : ''],
-      styles[disabledShadow && disabled ? 'disabledShadow' : ''],
       styles[`shadow-${shadow}`],
     );
     return (
       <button
         ref={ref}
         className={`${btnClass} ${className}`}
-        {...rest}
         disabled={disabled}
+        {...rest}
       />
     );
   },