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

2026-02-12 04:18:54 +00:00 · 2023-08-08 12:38:02 +08:00
parent 7826ecfa58
commit 6efe29f7ef
60 changed files with 112 additions and 500 deletions
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -33,7 +33,7 @@
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.2",
    "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.6",
+    "@toeverything/components": "^0.0.8",
    "async-call-rpc": "^6.3.1",
    "cmdk": "^0.2.0",
    "css-spring": "^4.1.0",
--- a/apps/core/src/bootstrap/plugins/setup.ts
+++ b/apps/core/src/bootstrap/plugins/setup.ts
@@ -133,6 +133,7 @@ const rootImportsMapSetupPromise = setupImportsMap(_rootImportsMap, {
  '@blocksuite/blocks/std': import('@blocksuite/blocks/std'),
  '@blocksuite/global/utils': import('@blocksuite/global/utils'),
  '@toeverything/infra/atom': import('@toeverything/infra/atom'),
+  '@toeverything/components/button': import('@toeverything/components/button'),
 });

 // pluginName -> module -> importName -> updater[]
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/apps/core/src/components/affine/create-workspace-modal/index.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
  Input,
  Modal,
  ModalCloseButton,
@@ -10,6 +9,7 @@ import {
 import { DebugLogger } from '@affine/debug';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { HelpIcon } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
 import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
 import { useEffect } from 'react';
--- a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
+++ b/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
@@ -1,9 +1,10 @@
-import { IconButton, Modal, ModalWrapper } from '@affine/component';
+import { Modal, ModalWrapper, Wrapper } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon } from '@blocksuite/icons';
+import { Button, IconButton } from '@toeverything/components/button';
 import type React from 'react';

-import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+import { Content, ContentTitle, Header, StyleTips } from './style';

 interface EnableAffineCloudModalProps {
  open: boolean;
@@ -30,19 +31,22 @@ export const EnableAffineCloudModal: React.FC<EnableAffineCloudModalProps> = ({
          <ContentTitle>{t['Enable AFFiNE Cloud']()}?</ContentTitle>
          <StyleTips>{t['Enable AFFiNE Cloud Description']()}</StyleTips>
          {/* <StyleTips>{t('Retain cached cloud data')}</StyleTips> */}
-          <div>
-            <StyleButton
+          <Wrapper width={284} margin="auto">
+            <Button
              data-testid="confirm-enable-affine-cloud-button"
-              shape="round"
              type="primary"
+              block
              onClick={onConfirm}
+              style={{
+                marginBottom: '16px',
+              }}
            >
              {t['Sign in and Enable']()}
-            </StyleButton>
-            <StyleButton shape="round" onClick={onClose}>
+            </Button>
+            <Button onClick={onClose} block>
              {t['Not now']()}
-            </StyleButton>
-          </div>
+            </Button>
+          </Wrapper>
        </Content>
      </ModalWrapper>
    </Modal>
--- a/apps/core/src/components/affine/enable-affine-cloud-modal/style.ts
+++ b/apps/core/src/components/affine/enable-affine-cloud-modal/style.ts
@@ -1,4 +1,4 @@
-import { Button, styled } from '@affine/component';
+import { styled } from '@affine/component';

 export const Header = styled('div')({
  height: '44px',
@@ -29,12 +29,3 @@ export const StyleTips = styled('div')(() => {
    marginTop: '12px',
  };
 });
-
-export const StyleButton = styled(Button)(() => {
-  return {
-    width: '284px',
-    display: 'block',
-    margin: 'auto',
-    marginTop: '16px',
-  };
-});
--- a/apps/core/src/components/affine/language-menu/index.tsx
+++ b/apps/core/src/components/affine/language-menu/index.tsx
@@ -1,15 +1,9 @@
-import {
-  type ButtonProps,
-  Menu,
-  MenuItem,
-  MenuTrigger,
-  styled,
-} from '@affine/component';
+import { Menu, MenuItem, MenuTrigger, styled } from '@affine/component';
 import { LOCALES } from '@affine/i18n';
 import { useI18N } from '@affine/i18n';
+import type { ButtonProps } from '@toeverything/components/button';
 import type { FC, ReactElement } from 'react';
 import { useCallback } from 'react';
-
 export const StyledListItem = styled(MenuItem)(() => ({
  width: '132px',
  height: '38px',
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
@@ -1,7 +1,8 @@
-import { Button, Input, Modal, ModalCloseButton } from '@affine/component';
+import { Input, Modal, ModalCloseButton } from '@affine/component';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useCallback, useState } from 'react';

--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/index.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/index.tsx
@@ -1,7 +1,7 @@
 import { Modal } from '@affine/component';
 import { ModalCloseButton } from '@affine/component';
-import { Button } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';

 import {
  StyledButtonContent,
@@ -38,7 +38,6 @@ export const WorkspaceLeave = ({ open, onClose }: WorkspaceDeleteProps) => {
          <Button
            onClick={handleLeave}
            type="error"
-            shape="circle"
            style={{ marginLeft: '24px' }}
          >
            {t['Leave']()}
--- a/apps/core/src/components/affine/new-workspace-setting-detail/export.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/export.tsx
@@ -1,7 +1,8 @@
-import { Button, toast } from '@affine/component';
+import { toast } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { isDesktop } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
 import { type FC, useCallback } from 'react';

 import type { AffineOfficialWorkspace } from '../../../shared';
--- a/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx
@@ -1,7 +1,8 @@
-import { IconButton, Input, toast } from '@affine/component';
+import { Input, toast } from '@affine/component';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DoneIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { type FC, useCallback, useState } from 'react';
--- a/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx
@@ -1,4 +1,4 @@
-import { Button, FlexWrapper, Switch, Tooltip } from '@affine/component';
+import { FlexWrapper, Switch, Tooltip } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { Unreachable } from '@affine/env/constant';
 import type {
@@ -7,6 +7,7 @@ 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 { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import type { FC } from 'react';
 import { useCallback, useEffect, useState } from 'react';
--- a/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx
@@ -1,6 +1,7 @@
-import { Button, FlexWrapper, toast, Tooltip } from '@affine/component';
+import { FlexWrapper, toast, Tooltip } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
 import { useMemo } from 'react';
 import { type FC, useCallback, useEffect, useState } from 'react';

--- a/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
+++ b/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
@@ -1,7 +1,8 @@
-import { Empty, IconButton, Modal, ModalWrapper } from '@affine/component';
+import { Empty, Modal, ModalWrapper } from '@affine/component';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import type React from 'react';

 import {
@@ -66,7 +67,7 @@ export const TmpDisableAffineCloudModal: React.FC<
            />
          </StyleImage>
          <StyleButtonContainer>
-            <StyleButton shape="round" type="primary" onClick={onClose}>
+            <StyleButton type="primary" onClick={onClose}>
              {t['Got it']()}
            </StyleButton>
          </StyleButtonContainer>
--- a/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
+++ b/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
@@ -1,4 +1,5 @@
-import { Button, displayFlex, styled } from '@affine/component';
+import { displayFlex, styled } from '@affine/component';
+import { Button } from '@toeverything/components/button';

 export const Header = styled('div')({
  height: '44px',
--- a/apps/core/src/components/affine/transform-workspace-to-affine-modal/index.tsx
+++ b/apps/core/src/components/affine/transform-workspace-to-affine-modal/index.tsx
@@ -1,6 +1,7 @@
-import { IconButton, Modal, ModalWrapper } from '@affine/component';
+import { Modal, ModalWrapper } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import type React from 'react';

 import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
@@ -35,7 +36,6 @@ export const TransformWorkspaceToAffineModal: React.FC<
          <div>
            <StyleButton
              data-testid="confirm-enable-cloud-button"
-              shape="round"
              type="primary"
              onClick={onConform}
            >
--- a/apps/core/src/components/affine/transform-workspace-to-affine-modal/style.ts
+++ b/apps/core/src/components/affine/transform-workspace-to-affine-modal/style.ts
@@ -1,4 +1,5 @@
-import { Button, styled } from '@affine/component';
+import { styled } from '@affine/component';
+import { Button } from '@toeverything/components/button';

 export const Header = styled('div')({
  height: '44px',
--- a/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx
@@ -1,5 +1,5 @@
 // fixme(himself65): refactor this file
-import { FlexWrapper, IconButton, Menu, MenuItem } from '@affine/component';
+import { FlexWrapper, Menu, MenuItem } from '@affine/component';
 import { Export, MoveToTrash } from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
@@ -10,6 +10,7 @@ import {
  MoreVerticalIcon,
  PageIcon,
 } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import {
  useBlockSuitePageMeta,
  usePageMetaHelper,
@@ -23,8 +24,8 @@ import { pageSettingFamily } from '../../../../atoms';
 import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import { toast } from '../../../../utils';
-import { MenuThemeModeSwitch } from '../header-right-items/theme-mode-switch';
 import { LanguageMenu } from './language-menu';
+import { MenuThemeModeSwitch } from './theme-mode-switch';
 const CommonMenu = () => {
  const content = (
    <div
--- a/apps/core/src/components/blocksuite/workspace-header/header-right-items/language-menu.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/header-right-items/language-menu.tsx
@@ -1,7 +1,8 @@
-import { Button, displayFlex, Menu, MenuItem, styled } from '@affine/component';
+import { displayFlex, Menu, MenuItem, styled } from '@affine/component';
 import { LOCALES } from '@affine/i18n';
 import { useI18N } from '@affine/i18n';
 import { ArrowDownSmallIcon, LanguageIcon } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
 import type { FC, ReactElement } from 'react';
 import { useCallback } from 'react';

--- a/apps/core/src/components/blocksuite/workspace-header/header-right-items/trash-button-group.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/header-right-items/trash-button-group.tsx
@@ -1,7 +1,8 @@
-import { Button, Confirm } from '@affine/component';
+import { Confirm } from '@affine/component';
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
+import { Button } from '@toeverything/components/button';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { currentPageIdAtom } from '@toeverything/infra/atom';
 import { useAtomValue } from 'jotai';
--- a/apps/core/src/components/blocksuite/workspace-header/index.tsx
+++ b/apps/core/src/components/blocksuite/workspace-header/index.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@affine/component';
 import { assertExists } from '@blocksuite/global/utils';
+import { Button } from '@toeverything/components/button';
 import {
  useBlockSuitePageMeta,
  usePageMetaHelper,
--- a/apps/core/src/components/pure/file-upload/index.tsx
+++ b/apps/core/src/components/pure/file-upload/index.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@affine/component';
 import { styled } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
 import type { ChangeEvent } from 'react';
 import type React from 'react';
 import { useRef } from 'react';
--- a/apps/core/src/components/pure/footer/styles.ts
+++ b/apps/core/src/components/pure/footer/styles.ts
@@ -4,17 +4,7 @@ import {
  styled,
  textEllipsis,
 } from '@affine/component';
-import { Button } from '@affine/component';
-
-export const StyledSplitLine = styled('div')(() => {
-  return {
-    width: '1px',
-    height: '20px',
-    background: 'var(--affine-border-color)',
-    marginRight: '24px',
-  };
-});
-
+import { Button } from '@toeverything/components/button';
 export const StyleWorkspaceInfo = styled('div')(() => {
  return {
    marginLeft: '15px',
--- a/apps/core/src/components/pure/quick-search-button/index.tsx
+++ b/apps/core/src/components/pure/quick-search-button/index.tsx
@@ -1,7 +1,9 @@
-import type { IconButtonProps } from '@affine/component';
-import { IconButton } from '@affine/component';
 import { styled } from '@affine/component';
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
+import {
+  IconButton,
+  type IconButtonProps,
+} from '@toeverything/components/button';

 const StyledIconButtonWithAnimate = styled(IconButton)(() => {
  return {
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/add-collection-button.tsx
@@ -1,4 +1,3 @@
-import { IconButton } from '@affine/component';
 import {
  EditCollectionModel,
  useCollectionManager,
@@ -8,6 +7,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { PlusIcon } from '@blocksuite/icons';
 import type { Workspace } from '@blocksuite/store';
 import { uuidv4 } from '@blocksuite/store';
+import { IconButton } from '@toeverything/components/button';
 import { useCallback, useState } from 'react';

 import { useGetPageInfoById } from '../../../../hooks/use-get-page-info';
--- a/apps/core/src/pages/404.tsx
+++ b/apps/core/src/pages/404.tsx
@@ -33,7 +33,6 @@ export const NotfoundPage = () => {

      <p>{t['404 - Page Not Found']()}</p>
      <Button
-        shape="round"
        onClick={() => {
          const id = localStorage.getItem('last_workspace_id');
          if (id) {