feat: replace button from @toeverything/components (#3608)

packages/component/src/ui/button/button.tsx

@@ -1,134 +0,0 @@
-import clsx from 'clsx';
-import {
-  forwardRef,
-  type HTMLAttributes,
-  type PropsWithChildren,
-  type ReactElement,
-  useMemo,
-} from 'react';
-
-import { Loading } from '../loading';
-import { button, buttonIcon } from './style.css';
-
-export type ButtonType =
-  | 'default'
-  | 'primary'
-  | 'plain'
-  | 'error'
-  | 'warning'
-  | 'success'
-  | 'processing';
-
-export type ButtonSize = 'default' | 'large' | 'extraLarge';
-
-export interface ButtonProps
-  extends Omit<HTMLAttributes<HTMLButtonElement>, 'type'> {
-  type?: ButtonType;
-  disabled?: boolean;
-  icon?: ReactElement;
-  iconPosition?: 'start' | 'end';
-  shape?: 'default' | 'round' | 'circle';
-  block?: boolean;
-  size?: ButtonSize;
-  loading?: boolean;
-}
-
-const defaultProps = {
-  type: 'default',
-  disabled: false,
-  shape: 'default',
-  size: 'default',
-  iconPosition: 'start',
-  loading: false,
-};
-
-const ButtonIcon = (props: PropsWithChildren<ButtonProps>) => {
-  const {
-    size,
-    icon,
-    iconPosition = 'start',
-    children,
-    type,
-  } = {
-    ...defaultProps,
-    ...props,
-  };
-  const onlyIcon = icon && !children;
-  return (
-    <div
-      className={clsx(buttonIcon, {
-        'color-white': type !== 'default' && type !== 'plain',
-        large: size === 'large',
-        extraLarge: size === 'extraLarge',
-        end: iconPosition === 'end' && !onlyIcon,
-        start: iconPosition === 'start' && !onlyIcon,
-      })}
-    >
-      {icon}
-    </div>
-  );
-};
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const {
-      children,
-      type,
-      disabled,
-      shape,
-      size,
-      icon: propsIcon,
-      iconPosition,
-      block,
-      loading,
-      className,
-      ...otherProps
-    } = {
-      ...defaultProps,
-      ...props,
-    };
-
-    const icon = useMemo(() => {
-      if (loading) {
-        return <Loading />;
-      }
-      return propsIcon;
-    }, [propsIcon, loading]);
-
-    return (
-      <button
-        ref={ref}
-        className={clsx(
-          button,
-          {
-            primary: type === 'primary',
-            plain: type === 'plain',
-            error: type === 'error',
-            warning: type === 'warning',
-            success: type === 'success',
-            processing: type === 'processing',
-            large: size === 'large',
-            extraLarge: size === 'extraLarge',
-            disabled,
-            circle: shape === 'circle',
-            round: shape === 'round',
-            block,
-            loading,
-          },
-          className
-        )}
-        disabled={disabled}
-        data-disabled={disabled}
-        {...otherProps}
-      >
-        {icon && iconPosition === 'start' ? (
-          <ButtonIcon {...props} icon={icon} />
-        ) : null}
-        <span>{children}</span>
-        {icon && iconPosition === 'end' ? <ButtonIcon {...props} /> : null}
-      </button>
-    );
-  }
-);
-Button.displayName = 'Button';
-export default Button;

packages/component/src/ui/button/icon-button.tsx

@@ -1,83 +0,0 @@
-import clsx from 'clsx';
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-import { forwardRef, type ReactElement } from 'react';
-
-import { Loading } from '../loading';
-import type { ButtonType } from './button';
-import { iconButton } from './style.css';
-
-export type IconButtonSize = 'default' | 'large' | 'small' | 'extraSmall';
-export type IconButtonProps = PropsWithChildren &
-  Omit<HTMLAttributes<HTMLButtonElement>, 'type'> & {
-    type?: ButtonType;
-    disabled?: boolean;
-    size?: IconButtonSize;
-    loading?: boolean;
-    withoutPadding?: boolean;
-    active?: boolean;
-    icon?: ReactElement;
-  };
-const defaultProps = {
-  type: 'plain',
-  disabled: false,
-  size: 'default',
-  loading: false,
-  withoutPadding: false,
-  active: false,
-};
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props, ref) => {
-    const {
-      type,
-      size,
-      withoutPadding,
-      children,
-      disabled,
-      loading,
-      active,
-      icon: propsIcon,
-      className,
-      ...otherProps
-    } = {
-      ...defaultProps,
-      ...props,
-    };
-
-    return (
-      <button
-        ref={ref}
-        className={clsx(
-          iconButton,
-          {
-            'without-padding': withoutPadding,
-
-            primary: type === 'primary',
-            plain: type === 'plain',
-            error: type === 'error',
-            warning: type === 'warning',
-            success: type === 'success',
-            processing: type === 'processing',
-
-            large: size === 'large',
-            small: size === 'small',
-            'extra-small': size === 'extraSmall',
-
-            disabled,
-            loading,
-            active,
-          },
-          className
-        )}
-        disabled={disabled}
-        data-disabled={disabled}
-        {...otherProps}
-      >
-        {loading ? <Loading /> : children || propsIcon}
-      </button>
-    );
-  }
-);
-
-IconButton.displayName = 'IconButton';
-export default IconButton;

packages/component/src/ui/button/index.ts

@@ -1,4 +1,2 @@
-export * from './button';
 export * from './dropdown';
-export * from './icon-button';
 export * from './radio';

packages/component/src/ui/confirm/confirm.tsx

@@ -1,6 +1,6 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
 
-import { Button } from '../button';
 import type { ModalProps } from '../modal';
 import { Modal, ModalCloseButton } from '../modal';
 import {

packages/component/src/ui/menu/menu-trigger.tsx

@@ -1,8 +1,7 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
+import { Button, type ButtonProps } from '@toeverything/components/button';
 import { forwardRef } from 'react';
 
-import { Button, type ButtonProps } from '../button';
-
 export const MenuTrigger = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, ...props }, ref) => {
     return (

packages/component/src/ui/menu/styles.ts

@@ -1,7 +1,6 @@
 import type { CSSProperties } from 'react';
 
 import { displayFlex, styled, textEllipsis } from '../../styles';
-import { Button } from '../button';
 import StyledPopperContainer from '../shared/container';
 
 export const StyledMenuWrapper = styled(StyledPopperContainer, {
@@ -99,15 +98,3 @@ export const StyledMenuItem = styled('button')<{
       : {}),
   };
 });
-
-export const StyledButton = styled(Button)(() => {
-  return {
-    width: '100%',
-    // height: '32px',
-    borderRadius: '8px',
-    backgroundColor: 'transparent',
-    ...displayFlex('space-between', 'center'),
-    border: `1px solid var(--affine-border-color)`,
-    padding: '0 10px',
-  };
-});

packages/component/src/ui/modal/modal-close-button.tsx

@@ -1,8 +1,10 @@
 import { CloseIcon } from '@blocksuite/icons';
+import {
+  IconButton,
+  type IconButtonProps,
+} from '@toeverything/components/button';
 import type { HTMLAttributes } from 'react';
 
-import type { IconButtonProps } from '../button/icon-button';
-import { IconButton } from '../button/icon-button';
 export type ModalCloseButtonProps = {
   top?: number;
   right?: number;