diff --git a/apps/core/package.json b/apps/core/package.json index bedec6c25..8669d9928 100644 --- 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", diff --git a/apps/core/src/bootstrap/plugins/setup.ts b/apps/core/src/bootstrap/plugins/setup.ts index ddd35abf1..0043b7af4 100644 --- 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[] diff --git a/apps/core/src/components/affine/create-workspace-modal/index.tsx b/apps/core/src/components/affine/create-workspace-modal/index.tsx index e9eb1803a..a39f51e35 100644 --- 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'; diff --git a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx b/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx index 5a6c230dd..73a7af6a1 100644 --- 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 = ({ {t['Enable AFFiNE Cloud']()}? {t['Enable AFFiNE Cloud Description']()} {/* {t('Retain cached cloud data')} */} -
- + +
+ + diff --git a/apps/core/src/components/affine/enable-affine-cloud-modal/style.ts b/apps/core/src/components/affine/enable-affine-cloud-modal/style.ts index d49dd1a77..e47d99858 100644 --- 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', - }; -}); diff --git a/apps/core/src/components/affine/language-menu/index.tsx b/apps/core/src/components/affine/language-menu/index.tsx index 54af4fcd3..24eeffb4f 100644 --- 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', diff --git 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 index c7b9e738f..e7fac4174 100644 --- 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'; diff --git 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 index e66da821d..56bf2b23a 100644 --- 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) => { - - ); -}; - -Test.storyName = 'Click Test'; diff --git a/apps/storybook/src/stories/icon-button.stories.tsx b/apps/storybook/src/stories/icon-button.stories.tsx deleted file mode 100644 index d9610377b..000000000 --- a/apps/storybook/src/stories/icon-button.stories.tsx +++ /dev/null @@ -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; - -const IconButtonTemplate: StoryFn = args => { - return ( - <> -

This is icon button

- - - ); -}; - -export const Icon = IconButtonTemplate.bind(undefined); -Icon.args = { - children: , - onClick: () => toast('Click button'), - withoutPadding: true, -}; diff --git a/packages/component/src/components/app-sidebar/sidebar-header/index.tsx b/packages/component/src/components/app-sidebar/sidebar-header/index.tsx index 219d02e37..c28bce2e1 100644 --- a/packages/component/src/components/app-sidebar/sidebar-header/index.tsx +++ b/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'; diff --git a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx index 28c76898b..15b7f4791 100644 --- a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx +++ b/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 = () => { diff --git a/packages/component/src/components/card/workspace-card/styles.ts b/packages/component/src/components/card/workspace-card/styles.ts index 7b32c78b5..ad11e0339 100644 --- a/packages/component/src/components/card/workspace-card/styles.ts +++ b/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 { diff --git a/packages/component/src/components/notification-center/index.tsx b/packages/component/src/components/notification-center/index.tsx index 8c21e8a19..e1e973cf6 100644 --- a/packages/component/src/components/notification-center/index.tsx +++ b/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 { diff --git a/packages/component/src/components/page-list/components/favorite-tag.tsx b/packages/component/src/components/page-list/components/favorite-tag.tsx index 25c76098e..bf0515678 100644 --- a/packages/component/src/components/page-list/components/favorite-tag.tsx +++ b/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, diff --git a/packages/component/src/components/page-list/filter/filter-list.tsx b/packages/component/src/components/page-list/filter/filter-list.tsx index 52e75fdd2..61e69467a 100644 --- a/packages/component/src/components/page-list/filter/filter-list.tsx +++ b/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'; diff --git a/packages/component/src/components/page-list/operation-cell.tsx b/packages/component/src/components/page-list/operation-cell.tsx index cffdaeefb..a12dd9d5d 100644 --- a/packages/component/src/components/page-list/operation-cell.tsx +++ b/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 { diff --git a/packages/component/src/components/page-list/view/collection-bar.tsx b/packages/component/src/components/page-list/view/collection-bar.tsx index c5635118c..cffd440c7 100644 --- a/packages/component/src/components/page-list/view/collection-bar.tsx +++ b/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'; diff --git a/packages/component/src/components/page-list/view/collection-list.tsx b/packages/component/src/components/page-list/view/collection-list.tsx index d64740ac6..d8a66f74b 100644 --- a/packages/component/src/components/page-list/view/collection-list.tsx +++ b/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'; diff --git a/packages/component/src/components/page-list/view/create-collection.tsx b/packages/component/src/components/page-list/view/create-collection.tsx index 7aff8d2c3..19b2077d9 100644 --- a/packages/component/src/components/page-list/view/create-collection.tsx +++ b/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, diff --git a/packages/component/src/components/share-menu/disable-public-link/index.tsx b/packages/component/src/components/share-menu/disable-public-link/index.tsx index f3022a3b6..d03da801a 100644 --- a/packages/component/src/components/share-menu/disable-public-link/index.tsx +++ b/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, diff --git a/packages/component/src/components/share-menu/share-menu.tsx b/packages/component/src/components/share-menu/share-menu.tsx index 1d0e51331..9eb5fec39 100644 --- a/packages/component/src/components/share-menu/share-menu.tsx +++ b/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'; diff --git a/packages/component/src/components/share-menu/share-page.tsx b/packages/component/src/components/share-menu/share-page.tsx index d5c9450b2..4f396daeb 100644 --- a/packages/component/src/components/share-menu/share-page.tsx +++ b/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, diff --git a/packages/component/src/components/share-menu/share-workspace.tsx b/packages/component/src/components/share-menu/share-workspace.tsx index db9b982da..69e54270f 100644 --- a/packages/component/src/components/share-menu/share-workspace.tsx +++ b/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'; diff --git a/packages/component/src/components/share-menu/styles.ts b/packages/component/src/components/share-menu/styles.ts index b8ca29b47..86e2e18c8 100644 --- a/packages/component/src/components/share-menu/styles.ts +++ b/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 diff --git a/packages/component/src/ui/button/button.tsx b/packages/component/src/ui/button/button.tsx deleted file mode 100644 index 50c34e232..000000000 --- a/packages/component/src/ui/button/button.tsx +++ /dev/null @@ -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, '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) => { - const { - size, - icon, - iconPosition = 'start', - children, - type, - } = { - ...defaultProps, - ...props, - }; - const onlyIcon = icon && !children; - return ( -
- {icon} -
- ); -}; - -export const Button = forwardRef( - (props, ref) => { - const { - children, - type, - disabled, - shape, - size, - icon: propsIcon, - iconPosition, - block, - loading, - className, - ...otherProps - } = { - ...defaultProps, - ...props, - }; - - const icon = useMemo(() => { - if (loading) { - return ; - } - return propsIcon; - }, [propsIcon, loading]); - - return ( - - ); - } -); -Button.displayName = 'Button'; -export default Button; diff --git a/packages/component/src/ui/button/icon-button.tsx b/packages/component/src/ui/button/icon-button.tsx deleted file mode 100644 index 229f7488c..000000000 --- a/packages/component/src/ui/button/icon-button.tsx +++ /dev/null @@ -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, '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( - (props, ref) => { - const { - type, - size, - withoutPadding, - children, - disabled, - loading, - active, - icon: propsIcon, - className, - ...otherProps - } = { - ...defaultProps, - ...props, - }; - - return ( - - ); - } -); - -IconButton.displayName = 'IconButton'; -export default IconButton; diff --git a/packages/component/src/ui/button/index.ts b/packages/component/src/ui/button/index.ts index 21499a0da..28a71be2b 100644 --- a/packages/component/src/ui/button/index.ts +++ b/packages/component/src/ui/button/index.ts @@ -1,4 +1,2 @@ -export * from './button'; export * from './dropdown'; -export * from './icon-button'; export * from './radio'; diff --git a/packages/component/src/ui/confirm/confirm.tsx b/packages/component/src/ui/confirm/confirm.tsx index 77645894d..5b6342d82 100644 --- a/packages/component/src/ui/confirm/confirm.tsx +++ b/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 { diff --git a/packages/component/src/ui/menu/menu-trigger.tsx b/packages/component/src/ui/menu/menu-trigger.tsx index f126486ff..fb538b1ce 100644 --- a/packages/component/src/ui/menu/menu-trigger.tsx +++ b/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( ({ children, ...props }, ref) => { return ( diff --git a/packages/component/src/ui/menu/styles.ts b/packages/component/src/ui/menu/styles.ts index 91d57fc74..5154df2ff 100644 --- a/packages/component/src/ui/menu/styles.ts +++ b/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', - }; -}); diff --git a/packages/component/src/ui/modal/modal-close-button.tsx b/packages/component/src/ui/modal/modal-close-button.tsx index 8200c0f25..5cdc71534 100644 --- a/packages/component/src/ui/modal/modal-close-button.tsx +++ b/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; diff --git a/plugins/copilot/package.json b/plugins/copilot/package.json index 5dc46cf37..75901ba1e 100644 --- a/plugins/copilot/package.json +++ b/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", diff --git a/plugins/copilot/src/UI/debug-content.tsx b/plugins/copilot/src/UI/debug-content.tsx index 8a01282c2..24b2c080a 100644 --- a/plugins/copilot/src/UI/debug-content.tsx +++ b/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'; diff --git a/plugins/copilot/src/UI/detail-content.tsx b/plugins/copilot/src/UI/detail-content.tsx index 4e66e6f6d..5a39732fa 100644 --- a/plugins/copilot/src/UI/detail-content.tsx +++ b/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'; diff --git a/plugins/copilot/src/UI/header-item.tsx b/plugins/copilot/src/UI/header-item.tsx index 7429edb5b..1e6f954fa 100644 --- a/plugins/copilot/src/UI/header-item.tsx +++ b/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'; diff --git a/plugins/copilot/src/core/components/conversation/index.tsx b/plugins/copilot/src/core/components/conversation/index.tsx index 09ac68801..f4bbf19ca 100644 --- a/plugins/copilot/src/core/components/conversation/index.tsx +++ b/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'; diff --git a/plugins/hello-world/package.json b/plugins/hello-world/package.json index d9550ee58..3d1cce580 100644 --- a/plugins/hello-world/package.json +++ b/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:*" diff --git a/plugins/hello-world/src/app.tsx b/plugins/hello-world/src/app.tsx index 149e29d78..f1e36ce5f 100644 --- a/plugins/hello-world/src/app.tsx +++ b/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 = () => { diff --git a/plugins/image-preview/package.json b/plugins/image-preview/package.json index 095200591..e3960133d 100644 --- a/plugins/image-preview/package.json +++ b/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", diff --git a/plugins/image-preview/src/component/index.tsx b/plugins/image-preview/src/component/index.tsx index 6ae7fb465..33dc34cf3 100644 --- a/plugins/image-preview/src/component/index.tsx +++ b/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'; diff --git a/yarn.lock b/yarn.lock index d38264a46..672c79aa8 100644 --- a/yarn.lock +++ b/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