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

packages/component/src/components/app-sidebar/sidebar-header/index.tsx

@@ -1,7 +1,7 @@
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import { useAtomValue } from 'jotai';
 
-import { IconButton } from '../../..';
 import type { History } from '..';
 import { navHeaderStyle } from '../index.css';
 import { appSidebarOpenAtom } from '../index.jotai';

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -1,8 +1,9 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SidebarIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import { useAtom } from 'jotai';
 
-import { IconButton, Tooltip } from '../../../';
+import { Tooltip } from '../../../';
 import { appSidebarOpenAtom } from '../index.jotai';
 
 export const SidebarSwitch = () => {

packages/component/src/components/card/workspace-card/styles.ts

@@ -1,5 +1,6 @@
+import { IconButton } from '@toeverything/components/button';
+
 import { displayFlex, styled, textEllipsis } from '../../../styles';
-import { IconButton } from '../../../ui/button/icon-button';
 
 export const StyleWorkspaceInfo = styled('div')(() => {
   return {

packages/component/src/components/notification-center/index.tsx

@@ -4,6 +4,7 @@
 
 import { CloseIcon, InformationIcon } from '@blocksuite/icons';
 import * as Toast from '@radix-ui/react-toast';
+import { IconButton } from '@toeverything/components/button';
 import clsx from 'clsx';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { ReactElement } from 'react';
@@ -16,7 +17,6 @@ import {
   useState,
 } from 'react';
 
-import { IconButton } from '../../ui/button';
 import * as styles from './index.css';
 import type { Notification } from './index.jotai';
 import {

packages/component/src/components/page-list/components/favorite-tag.tsx

@@ -1,9 +1,12 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons';
+import {
+  IconButton,
+  type IconButtonProps,
+} from '@toeverything/components/button';
 import { forwardRef } from 'react';
 
-import type { IconButtonProps } from '../../..';
-import { IconButton, Tooltip } from '../../..';
+import { Tooltip } from '../../..';
 
 export const FavoriteTag = forwardRef<
   HTMLButtonElement,

packages/component/src/components/page-list/filter/filter-list.tsx

@@ -1,8 +1,10 @@
 import type { Filter } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import { CloseIcon, PlusIcon } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
+import { IconButton } from '@toeverything/components/button';
 
-import { Button, IconButton, Menu } from '../../..';
+import { Menu } from '../../..';
 import { Condition } from './condition';
 import * as styles from './index.css';
 import { CreateFilterMenu } from './vars';

packages/component/src/components/page-list/operation-cell.tsx

@@ -8,16 +8,10 @@ import {
   OpenInNewIcon,
   ResetIcon,
 } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import { useState } from 'react';
 
-import {
-  Confirm,
-  FlexWrapper,
-  IconButton,
-  Menu,
-  MenuItem,
-  Tooltip,
-} from '../../..';
+import { Confirm, FlexWrapper, Menu, MenuItem, Tooltip } from '../../..';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
 
 export interface OperationCellProps {

packages/component/src/components/page-list/view/collection-bar.tsx

@@ -11,11 +11,11 @@ import {
   UnpinIcon,
   ViewLayersIcon,
 } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
-import { Button } from '../../../ui/button/button';
 import { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-bar.css';
 

packages/component/src/components/page-list/view/collection-list.tsx

@@ -11,12 +11,13 @@ import {
   PinIcon,
   ViewLayersIcon,
 } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
 import clsx from 'clsx';
 import { useAtom } from 'jotai';
 import type { MouseEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
-import { Button, MenuItem, Tooltip } from '../../..';
+import { MenuItem, Tooltip } from '../../..';
 import Menu from '../../../ui/menu/menu';
 import { appSidebarOpenAtom } from '../../app-sidebar';
 import { CreateFilterMenu } from '../filter/vars';

packages/component/src/components/page-list/view/create-collection.tsx

@@ -9,10 +9,10 @@ import {
   SaveIcon,
 } from '@blocksuite/icons';
 import { uuidv4 } from '@blocksuite/store';
+import { Button } from '@toeverything/components/button';
 import { useCallback, useMemo, useState } from 'react';
 
 import {
-  Button,
   Input,
   Modal,
   ModalCloseButton,

packages/component/src/components/share-menu/disable-public-link/index.tsx

@@ -1,7 +1,7 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
 
 import { Modal, ModalCloseButton } from '../../..';
-import { Button } from '../../../ui/button';
 import {
   StyledButtonContent,
   StyledModalHeader,

packages/component/src/components/share-menu/share-menu.tsx

@@ -4,11 +4,11 @@ import type {
 } from '@affine/env/workspace';
 import { ExportIcon, PublishIcon, ShareIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
+import { Button } from '@toeverything/components/button';
 import { useBlockSuiteWorkspacePageIsPublic } from '@toeverything/hooks/use-block-suite-workspace-page-is-public';
 import { type ReactElement, useRef } from 'react';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../ui/button';
 import { Menu } from '../../ui/menu/menu';
 import { Export } from './export';
 import { containerStyle, indicatorContainerStyle, tabStyle } from './index.css';

packages/component/src/components/share-menu/share-page.tsx

@@ -2,11 +2,12 @@ import type { LocalWorkspace } from '@affine/env/workspace';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
 import { useBlockSuiteWorkspacePageIsPublic } from '@toeverything/hooks/use-block-suite-workspace-page-is-public';
 import { useState } from 'react';
 import { useCallback, useMemo } from 'react';
 
-import { Button, toast } from '../..';
+import { toast } from '../../ui/toast';
 import { PublicLinkDisableModal } from './disable-public-link';
 import {
   descriptionStyle,

packages/component/src/components/share-menu/share-workspace.tsx

@@ -4,8 +4,8 @@ import type {
 } from '@affine/env/workspace';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
 
-import { Button } from '../../ui/button';
 import { descriptionStyle, menuItemStyle } from './index.css';
 import type { ShareMenuProps } from './share-menu';
 

packages/component/src/components/share-menu/styles.ts

@@ -1,4 +1,6 @@
-import { Button, displayFlex, styled } from '../..';
+import { Button } from '@toeverything/components/button';
+
+import { displayFlex, styled } from '../..';
 
 export const TabItem = styled('li')<{ isActive?: boolean }>(({ isActive }) => {
   {
@@ -21,7 +23,7 @@ export const TabItem = styled('li')<{ isActive?: boolean }>(({ isActive }) => {
         background: 'var(--affine-hover-color)',
         opacity: 1,
         color: isActive
-          ? 'var(--affine-text-primary-color)'
+          ? 'var(--affine-t/ext-primary-color)'
           : 'var(--affine-text-secondary-color)',
         svg: {
           fill: isActive

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;