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

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",

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[]

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';

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>

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',
-  };
-});

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',

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';
 

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']()}

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';

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';

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';

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';
 

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>

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',

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}
             >

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',

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

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';
 

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';

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,

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';

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',

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 {

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';

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) {

apps/storybook/src/stories/app-sidebar.stories.tsx

@@ -1,4 +1,3 @@
-import { IconButton } from '@affine/component';
 import {
   AppSidebar,
   AppSidebarFallback,
@@ -19,6 +18,7 @@ import {
   SidebarIcon,
 } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
+import { IconButton } from '@toeverything/components/button';
 import { useAtom } from 'jotai';
 import { type PropsWithChildren, useState } from 'react';
 import { MemoryRouter } from 'react-router-dom';

apps/storybook/src/stories/button.stories.tsx

@@ -1,138 +0,0 @@
-/* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import type { ButtonProps } from '@affine/component';
-import { Button } from '@affine/component';
-import { DropdownButton } from '@affine/component';
-import { RadioButton, RadioButtonGroup } from '@affine/component';
-import { Menu } from '@affine/component';
-import { toast } from '@affine/component';
-import { InformationIcon } from '@blocksuite/icons';
-import type { Meta, StoryFn } from '@storybook/react';
-import { useState } from 'react';
-export default {
-  title: 'AFFiNE/Button',
-  component: Button,
-  argTypes: {
-    hoverBackground: { control: 'color' },
-    hoverColor: { control: 'color' },
-  },
-} as Meta<ButtonProps>;
-
-const Template: StoryFn<ButtonProps> = args => <Button {...args} />;
-
-export const Primary = Template.bind(undefined);
-Primary.args = {
-  type: 'primary',
-  children: 'Content',
-  onClick: () => toast('Click button'),
-  icon: <InformationIcon />,
-};
-
-export const Default = Template.bind(undefined);
-Default.args = {
-  type: 'default',
-  children: 'This is a default button',
-  onClick: () => toast('Click button'),
-};
-
-export const Light = Template.bind(undefined);
-Light.args = {
-  type: 'error',
-  children: 'This is a light button',
-  onClick: () => toast('Click button'),
-};
-
-export const Warning = Template.bind(undefined);
-Warning.args = {
-  type: 'warning',
-  children: 'This is a warning button',
-  onClick: () => toast('Click button'),
-};
-
-export const Danger = Template.bind(undefined);
-Danger.args = {
-  type: 'success',
-  children: 'This is a danger button',
-  onClick: () => toast('Click button'),
-};
-
-export const Dropdown: StoryFn = ({ onClickDropDown, ...props }) => {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <DropdownButton onClickDropDown={onClickDropDown} {...props}>
-        Dropdown Button
-      </DropdownButton>
-
-      <Menu
-        visible={open}
-        placement="bottom-end"
-        trigger={['click']}
-        width={235}
-        disablePortal={true}
-        onClickAway={() => {
-          setOpen(false);
-        }}
-        content={<>Dropdown Menu</>}
-      >
-        <DropdownButton
-          onClick={() => {
-            toast('Click button');
-            setOpen(false);
-          }}
-          onClickDropDown={() => setOpen(!open)}
-        >
-          Dropdown with Menu
-        </DropdownButton>
-      </Menu>
-    </>
-  );
-};
-Dropdown.args = {
-  onClick: () => toast('Click button'),
-  onClickDropDown: () => toast('Click dropdown'),
-};
-
-export const RadioGroup: StoryFn = ({ ...props }) => {
-  return (
-    <>
-      <RadioButtonGroup {...props}>
-        <RadioButton value="all">All</RadioButton>
-        <RadioButton value="page">Page</RadioButton>
-        <RadioButton value="edgeless">Edgeless</RadioButton>
-      </RadioButtonGroup>
-      <RadioButtonGroup {...props}>
-        <RadioButton value="all">Long long text and some more</RadioButton>
-        <RadioButton value="page">Lorem ipsum dolor sit amet</RadioButton>
-        <RadioButton value="edgeless">Long long text</RadioButton>
-      </RadioButtonGroup>
-    </>
-  );
-};
-RadioGroup.args = {
-  defaultValue: 'all',
-  onValueChange: (value: string) => toast(`Radio value: ${value}`),
-};
-
-export const Test: StoryFn<ButtonProps> = () => {
-  const [input, setInput] = useState('');
-  return (
-    <>
-      <input
-        type="text"
-        data-testid="test-input"
-        value={input}
-        onChange={e => setInput(e.target.value)}
-      />
-      <Button
-        onClick={() => {
-          setInput('');
-        }}
-        data-testid="clear-button"
-      >
-        clear
-      </Button>
-    </>
-  );
-};
-
-Test.storyName = 'Click Test';

apps/storybook/src/stories/icon-button.stories.tsx

@@ -1,25 +0,0 @@
-/* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import { IconButton, type IconButtonProps } from '@affine/component';
-import { toast } from '@affine/component';
-import { InformationIcon } from '@blocksuite/icons';
-import type { Meta, StoryFn } from '@storybook/react';
-export default {
-  title: 'AFFiNE/IconButton',
-  component: IconButton,
-} as Meta<IconButtonProps>;
-
-const IconButtonTemplate: StoryFn<IconButtonProps> = args => {
-  return (
-    <>
-      <h1>This is icon button</h1>
-      <IconButton {...args} />
-    </>
-  );
-};
-
-export const Icon = IconButtonTemplate.bind(undefined);
-Icon.args = {
-  children: <InformationIcon />,
-  onClick: () => toast('Click button'),
-  withoutPadding: true,
-};

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;

plugins/copilot/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
+    "@toeverything/components": "^0.0.8",
     "idb": "^7.1.1",
     "langchain": "^0.0.118",
     "marked": "^5.1.1",

plugins/copilot/src/UI/debug-content.tsx

@@ -1,4 +1,5 @@
-import { Button, FlexWrapper, Input } from '@affine/component';
+import { FlexWrapper, Input } from '@affine/component';
+import { Button } from '@toeverything/components/button';
 import { useAtom } from 'jotai';
 import { type ReactElement, useCallback } from 'react';
 

plugins/copilot/src/UI/detail-content.tsx

@@ -1,5 +1,5 @@
-import { IconButton } from '@affine/component';
 import { SendIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import { useAtomValue, useSetAtom } from 'jotai';
 import type { ReactElement } from 'react';
 import { Suspense, useCallback, useState } from 'react';

plugins/copilot/src/UI/header-item.tsx

@@ -1,6 +1,7 @@
-import { IconButton, Tooltip } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import { deleteLayoutAtom, pushLayoutAtom } from '@affine/sdk/entry';
 import { AiIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import { useSetAtom } from 'jotai';
 import type { ComponentType, PropsWithChildren, ReactElement } from 'react';
 import { useCallback, useState } from 'react';

plugins/copilot/src/core/components/conversation/index.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@affine/component';
 import { PlusIcon, ResetIcon } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
 import { clsx } from 'clsx';
 import type { MessageType } from 'langchain/schema';
 import { marked } from 'marked';

plugins/hello-world/package.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
-    "@blocksuite/icons": "^2.1.29"
+    "@blocksuite/icons": "^2.1.29",
+    "@toeverything/components": "^0.0.8"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*"

plugins/hello-world/src/app.tsx

@@ -1,5 +1,6 @@
-import { IconButton, Tooltip } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import { Logo1Icon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
 import { useCallback } from 'react';
 
 export const HeaderItem = () => {

plugins/image-preview/package.json

@@ -17,6 +17,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "^2.1.29",
+    "@toeverything/components": "^0.0.8",
     "@toeverything/theme": "^0.7.9",
     "clsx": "^2.0.0",
     "foxact": "^0.2.17",

plugins/image-preview/src/component/index.tsx

@@ -1,4 +1,4 @@
-import { Button, IconButton, Tooltip } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import type { ImageBlockModel } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import {
@@ -12,6 +12,7 @@ import {
   ViewBarIcon,
 } from '@blocksuite/icons';
 import type { Workspace } from '@blocksuite/store';
+import { Button, IconButton } from '@toeverything/components/button';
 import clsx from 'clsx';
 import { useErrorBoundary } from 'foxact/use-error-boundary';
 import { useAtom } from 'jotai';

yarn.lock

@@ -186,6 +186,7 @@ __metadata:
     "@affine/component": "workspace:*"
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
+    "@toeverything/components": ^0.0.8
     "@types/marked": ^5.0.1
     idb: ^7.1.1
     jotai: ^2.2.2
@@ -235,7 +236,7 @@ __metadata:
     "@sentry/webpack-plugin": ^2.5.0
     "@svgr/webpack": ^8.0.1
     "@swc/core": ^1.3.74
-    "@toeverything/components": ^0.0.6
+    "@toeverything/components": ^0.0.8
     "@types/webpack-env": ^1.18.1
     async-call-rpc: ^6.3.1
     cmdk: ^0.2.0
@@ -403,6 +404,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": ^2.1.29
+    "@toeverything/components": ^0.0.8
   languageName: unknown
   linkType: soft
 
@@ -428,6 +430,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": ^2.1.29
+    "@toeverything/components": ^0.0.8
     "@toeverything/theme": ^0.7.9
     clsx: ^2.0.0
     foxact: ^0.2.17
@@ -11246,9 +11249,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/components@npm:^0.0.6":
-  version: 0.0.6
-  resolution: "@toeverything/components@npm:0.0.6"
+"@toeverything/components@npm:^0.0.8":
+  version: 0.0.8
+  resolution: "@toeverything/components@npm:0.0.8"
   dependencies:
     "@blocksuite/icons": ^2.1.26
   peerDependencies:
@@ -11256,7 +11259,7 @@ __metadata:
     clsx: ^2
     react: ^18
     react-dom: ^18
-  checksum: 838bcbecda4eea29c949aa241c99f5512b7d248163156979af93cc70aff396f5ea1087c5e0ea7bee09a964e2960cd9977b065a306bf61cc04894560af6bc166a
+  checksum: 9c955d3c46729397e92031cc6a5ba0f15eb8a67893862b4c6c017c87fff2ab8e9ee8505695b0da571f2af35ad6545f643fc34f657f1c9d1913648796971540d9
   languageName: node
   linkType: hard