diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json index cfb44444e..c7c907fb7 100644 --- a/packages/frontend/component/package.json +++ b/packages/frontend/component/package.json @@ -27,9 +27,6 @@ "@emotion/react": "^11.11.1", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@mui/base": "5.0.0-beta.19", - "@mui/icons-material": "^5.14.14", - "@mui/material": "^5.14.14", "@popperjs/core": "^2.11.8", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", diff --git a/packages/frontend/component/src/components/app-sidebar/index.tsx b/packages/frontend/component/src/components/app-sidebar/index.tsx index 2bfd9a0fe..8b2dc5955 100644 --- a/packages/frontend/component/src/components/app-sidebar/index.tsx +++ b/packages/frontend/component/src/components/app-sidebar/index.tsx @@ -1,4 +1,3 @@ -import { Skeleton } from '@mui/material'; import { assignInlineVars } from '@vanilla-extract/dynamic'; import clsx from 'clsx'; import { useAtom, useAtomValue } from 'jotai'; @@ -6,6 +5,7 @@ import { debounce } from 'lodash-es'; import type { PropsWithChildren, ReactElement } from 'react'; import { useEffect, useRef, useState } from 'react'; +import { Skeleton } from '../../ui/skeleton'; import { fallbackHeaderStyle, fallbackStyle } from './fallback.css'; import { floatingMaxWidth, diff --git a/packages/frontend/component/src/components/block-suite-editor/index.tsx b/packages/frontend/component/src/components/block-suite-editor/index.tsx index 3d2062458..5a97dddbd 100644 --- a/packages/frontend/component/src/components/block-suite-editor/index.tsx +++ b/packages/frontend/component/src/components/block-suite-editor/index.tsx @@ -1,7 +1,6 @@ import { EditorContainer } from '@blocksuite/editor'; import { assertExists } from '@blocksuite/global/utils'; import type { Page } from '@blocksuite/store'; -import { Skeleton } from '@mui/material'; import clsx from 'clsx'; import { use } from 'foxact/use'; import type { CSSProperties, ReactElement } from 'react'; @@ -17,6 +16,7 @@ import { import type { FallbackProps } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary'; +import { Skeleton } from '../../ui/skeleton'; import { blockSuiteEditorHeaderStyle, blockSuiteEditorStyle, diff --git a/packages/frontend/component/src/components/card/workspace-card/index.tsx b/packages/frontend/component/src/components/card/workspace-card/index.tsx index 88949055e..3df908a3f 100644 --- a/packages/frontend/component/src/components/card/workspace-card/index.tsx +++ b/packages/frontend/component/src/components/card/workspace-card/index.tsx @@ -2,7 +2,6 @@ import { WorkspaceFlavour } from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import type { RootWorkspaceMetadata } from '@affine/workspace/atom'; import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons'; -import { Skeleton } from '@mui/material'; import { Avatar } from '@toeverything/components/avatar'; import { Divider } from '@toeverything/components/divider'; import { Tooltip } from '@toeverything/components/tooltip'; @@ -12,6 +11,7 @@ import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/wor import { useAtomValue } from 'jotai/react'; import { useCallback } from 'react'; +import { Skeleton } from '../../../ui/skeleton'; import { StyledCard, StyledIconContainer, diff --git a/packages/frontend/component/src/components/list-skeleton.tsx b/packages/frontend/component/src/components/list-skeleton.tsx deleted file mode 100644 index 9d24d8b5a..000000000 --- a/packages/frontend/component/src/components/list-skeleton.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Skeleton } from '@mui/material'; -import { memo } from 'react'; - -export const ListSkeleton = memo(function ListItemSkeleton() { - return ( - <> - - - - - - ); -}); diff --git a/packages/frontend/component/src/components/page-list/utils.tsx b/packages/frontend/component/src/components/page-list/utils.tsx index b98e2fea9..8acf0002e 100644 --- a/packages/frontend/component/src/components/page-list/utils.tsx +++ b/packages/frontend/component/src/components/page-list/utils.tsx @@ -1,4 +1,3 @@ -import { useMediaQuery, useTheme } from '@mui/material'; import clsx from 'clsx'; import { type BaseSyntheticEvent, @@ -8,12 +7,6 @@ import { import * as styles from './page-list.css'; -export const useIsSmallDevices = () => { - const theme = useTheme(); - const isSmallDevices = useMediaQuery(theme.breakpoints.down(900)); - return isSmallDevices; -}; - export function isToday(date: Date): boolean { const today = new Date(); return ( diff --git a/packages/frontend/component/src/components/setting-components/workspace-detail-skeleton.tsx b/packages/frontend/component/src/components/setting-components/workspace-detail-skeleton.tsx index 0b9ee8555..6755c200d 100644 --- a/packages/frontend/component/src/components/setting-components/workspace-detail-skeleton.tsx +++ b/packages/frontend/component/src/components/setting-components/workspace-detail-skeleton.tsx @@ -1,5 +1,4 @@ -import { Skeleton } from '@mui/material'; - +import { Skeleton } from '../../ui/skeleton'; import { SettingHeader } from './setting-header'; import { SettingRow } from './setting-row'; import { SettingWrapper } from './wrapper'; diff --git a/packages/frontend/component/src/components/setting-components/workspace-list-skeleton.tsx b/packages/frontend/component/src/components/setting-components/workspace-list-skeleton.tsx index 047f4119e..170798d4a 100644 --- a/packages/frontend/component/src/components/setting-components/workspace-list-skeleton.tsx +++ b/packages/frontend/component/src/components/setting-components/workspace-list-skeleton.tsx @@ -1,12 +1,11 @@ -import { Skeleton } from '@mui/material'; - import { FlexWrapper } from '../../ui/layout'; +import { Skeleton } from '../../ui/skeleton'; export const WorkspaceListItemSkeleton = () => { return ( { height={14} style={{ marginRight: 10 }} /> - + ); }; diff --git a/packages/frontend/component/src/components/workspace/index.css.ts b/packages/frontend/component/src/components/workspace/index.css.ts index 622036a39..02a86963a 100644 --- a/packages/frontend/component/src/components/workspace/index.css.ts +++ b/packages/frontend/component/src/components/workspace/index.css.ts @@ -2,8 +2,6 @@ import { lightCssVariables } from '@toeverything/theme'; import type { ComplexStyleRule } from '@vanilla-extract/css'; import { globalStyle, style } from '@vanilla-extract/css'; -import { breakpoints } from '../../styles/mui-theme'; - export const appStyle = style({ width: '100%', position: 'relative', @@ -134,10 +132,10 @@ export const toolStyle = style({ flexDirection: 'column', gap: '12px', '@media': { - [breakpoints.down('md', true)]: { + 'screen and (max-width: 960px)': { right: 'calc((100vw - 640px) * 3 / 19 + 14px)', }, - [breakpoints.down('sm', true)]: { + 'screen and (max-width: 640px)': { right: '5px', bottom: '5px', }, @@ -149,10 +147,10 @@ export const toolStyle = style({ '&[data-in-trash-page="true"]': { bottom: '70px', '@media': { - [breakpoints.down('md', true)]: { + 'screen and (max-width: 960px)': { bottom: '80px', }, - [breakpoints.down('sm', true)]: { + 'screen and (max-width: 640px)': { bottom: '85px', }, print: { diff --git a/packages/frontend/component/src/index.ts b/packages/frontend/component/src/index.ts index 3ce35948f..25218e5bc 100644 --- a/packages/frontend/component/src/index.ts +++ b/packages/frontend/component/src/index.ts @@ -1,6 +1,4 @@ -export * from './components/list-skeleton'; export * from './styles'; -export * from './ui/breadcrumbs'; export * from './ui/button'; export * from './ui/checkbox'; export * from './ui/empty'; @@ -8,12 +6,8 @@ export * from './ui/input'; export * from './ui/layout'; export * from './ui/lottie/collections-icon'; export * from './ui/lottie/delete-icon'; -export * from './ui/menu'; -export * from './ui/mui'; -export * from './ui/popper'; export * from './ui/scrollbar'; -export * from './ui/shared/container'; +export * from './ui/skeleton'; export * from './ui/switch'; export * from './ui/table'; export * from './ui/toast'; -export * from './ui/tree-view'; diff --git a/packages/frontend/component/src/styles/index.ts b/packages/frontend/component/src/styles/index.ts index 575d48515..e28c833f7 100644 --- a/packages/frontend/component/src/styles/index.ts +++ b/packages/frontend/component/src/styles/index.ts @@ -1,3 +1,2 @@ export * from './helper'; -export * from './mui-theme'; -export * from './mui-theme-provider'; +export * from './styled'; diff --git a/packages/frontend/component/src/styles/mui-theme-provider.tsx b/packages/frontend/component/src/styles/mui-theme-provider.tsx deleted file mode 100644 index 7d1e11ef4..000000000 --- a/packages/frontend/component/src/styles/mui-theme-provider.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { alpha, css, keyframes, styled } from '@mui/material/styles'; - -export { alpha, css, keyframes, styled }; diff --git a/packages/frontend/component/src/styles/mui-theme.ts b/packages/frontend/component/src/styles/mui-theme.ts deleted file mode 100644 index 35da7f787..000000000 --- a/packages/frontend/component/src/styles/mui-theme.ts +++ /dev/null @@ -1,86 +0,0 @@ -import type { - Breakpoint, - BreakpointsOptions, - ThemeOptions, -} from '@mui/material'; - -export const muiThemes = { - breakpoints: { - values: { - xs: 0, - sm: 640, - md: 960, - lg: 1280, - xl: 1920, - }, - }, -} satisfies ThemeOptions; - -// Ported from mui -// See https://github.com/mui/material-ui/blob/eba90da5359ff9c58b02800dfe468dc6c0b95bd2/packages/mui-system/src/createTheme/createBreakpoints.js -// License under MIT -function createBreakpoints(breakpoints: BreakpointsOptions): Readonly< - Omit & { - up: (key: Breakpoint | number, pure?: boolean) => string; - down: (key: Breakpoint | number, pure?: boolean) => string; - } -> { - const { - // The breakpoint **start** at this value. - // For instance with the first breakpoint xs: [xs, sm). - values = { - xs: 0, // phone - sm: 600, // tablet - md: 900, // small laptop - lg: 1200, // desktop - xl: 1536, // large screen - }, - unit = 'px', - step = 5, - ...other - } = breakpoints; - - const keys = Object.keys(values) as ['xs', 'sm', 'md', 'lg', 'xl']; - - function up(key: Breakpoint | number, pure = false) { - const value = typeof key === 'number' ? key : values[key]; - const original = `(min-width:${value}${unit})`; - if (pure) { - return original; - } - return `@media ${original}`; - } - - function down(key: Breakpoint | number, pure = false) { - const value = typeof key === 'number' ? key : values[key]; - const original = `(max-width:${value - step / 100}${unit})`; - if (pure) { - return original; - } - return `@media ${original}`; - } - - return { - keys, - values, - up, - down, - unit, - // between, - // only, - // not, - ...other, - }; -} - -/** - * @example - * ```ts - * export const iconButtonStyle = style({ - * [breakpoints.up('sm')]: { - * padding: '6px' - * }, - * }); - * ``` - */ -export const breakpoints = createBreakpoints(muiThemes.breakpoints); diff --git a/packages/frontend/component/src/styles/styled.tsx b/packages/frontend/component/src/styles/styled.tsx new file mode 100644 index 000000000..f357a2d9e --- /dev/null +++ b/packages/frontend/component/src/styles/styled.tsx @@ -0,0 +1,3 @@ +import styled from '@emotion/styled'; + +export { styled }; diff --git a/packages/frontend/component/src/ui/breadcrumbs/index.ts b/packages/frontend/component/src/ui/breadcrumbs/index.ts deleted file mode 100644 index 9a87e958a..000000000 --- a/packages/frontend/component/src/ui/breadcrumbs/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { BreadcrumbsProps } from '@mui/material/Breadcrumbs'; -import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; -import type { ComponentType } from 'react'; - -import { styled } from '../../styles'; - -const StyledMuiBreadcrumbs = styled(MuiBreadcrumbs)(() => { - return { - color: 'var(--affine-text-primary-color)', - }; -}); - -export const Breadcrumbs: ComponentType = - StyledMuiBreadcrumbs; diff --git a/packages/frontend/component/src/ui/button/loading.tsx b/packages/frontend/component/src/ui/button/loading.tsx deleted file mode 100644 index 60d123424..000000000 --- a/packages/frontend/component/src/ui/button/loading.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { styled } from '../../styles'; -import type { ButtonProps } from './interface'; -import { getButtonColors } from './utils'; -export const LoadingContainer = styled('div')>(({ - theme, - type = 'default', -}) => { - const { color } = getButtonColors(theme, type, false); - return ` - margin: 0px auto; - width: 38px; - text-align: center; - .load { - width: 8px; - height: 8px; - background-color: ${color}; - - border-radius: 100%; - display: inline-block; - -webkit-animation: bouncedelay 1.4s infinite ease-in-out; - animation: bouncedelay 1.4s infinite ease-in-out; - /* Prevent first frame from flickering when animation starts */ - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - } - .load1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; - } - .load2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; - } - - @-webkit-keyframes bouncedelay { - 0%, 80%, 100% { -webkit-transform: scale(0) } - 40% { -webkit-transform: scale(1.0) } - } - - @keyframes bouncedelay { - 0%, 80%, 100% { - transform: scale(0); - -webkit-transform: scale(0); - } 40% { - transform: scale(1.0); - -webkit-transform: scale(1.0); - } - } - `; -}); - -export const Loading = ({ type }: Pick) => { - return ( - -
-
-
- - ); -}; diff --git a/packages/frontend/component/src/ui/button/utils.ts b/packages/frontend/component/src/ui/button/utils.ts index 725694b87..09a3a6a0c 100644 --- a/packages/frontend/component/src/ui/button/utils.ts +++ b/packages/frontend/component/src/ui/button/utils.ts @@ -1,9 +1,6 @@ -import type { Theme } from '@mui/material'; - import type { ButtonProps } from './interface'; export const getButtonColors = ( - _theme: Theme, type: ButtonProps['type'], disabled: boolean, extend?: { diff --git a/packages/frontend/component/src/ui/menu/index.ts b/packages/frontend/component/src/ui/menu/index.ts deleted file mode 100644 index 35b4870cb..000000000 --- a/packages/frontend/component/src/ui/menu/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * @deprecated - * Use @toeverything/components/menu instead, this component only used in bookmark plugin, since it support set anchor as Range - */ -export * from './menu-item'; -export * from './pure-menu'; diff --git a/packages/frontend/component/src/ui/menu/menu-item.tsx b/packages/frontend/component/src/ui/menu/menu-item.tsx deleted file mode 100644 index 08e83447d..000000000 --- a/packages/frontend/component/src/ui/menu/menu-item.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react'; -import { forwardRef } from 'react'; - -import { - StyledContent, - StyledEndIconWrapper, - StyledMenuItem, - StyledStartIconWrapper, -} from './styles'; - -export type IconMenuProps = PropsWithChildren<{ - icon?: ReactElement; - endIcon?: ReactElement; - iconSize?: number; - disabled?: boolean; - active?: boolean; - disableHover?: boolean; - userFocused?: boolean; - gap?: string; - fontSize?: string; -}> & - HTMLAttributes; - -export const MenuItem = forwardRef( - ({ endIcon, icon, children, gap, fontSize, iconSize, ...props }, ref) => { - return ( - - {icon && ( - - {icon} - - )} - {children} - {endIcon && ( - - {endIcon} - - )} - - ); - } -); -MenuItem.displayName = 'MenuItem'; -export default MenuItem; diff --git a/packages/frontend/component/src/ui/menu/pure-menu.tsx b/packages/frontend/component/src/ui/menu/pure-menu.tsx deleted file mode 100644 index 779d80115..000000000 --- a/packages/frontend/component/src/ui/menu/pure-menu.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { CSSProperties } from 'react'; - -import type { PurePopperProps } from '../popper'; -import { PurePopper } from '../popper'; -import { StyledMenuWrapper } from './styles'; - -export type PureMenuProps = PurePopperProps & { - width?: CSSProperties['width']; - height?: CSSProperties['height']; -}; -export const PureMenu = ({ - children, - placement, - width, - ...otherProps -}: PureMenuProps) => { - return ( - - - {children} - - - ); -}; diff --git a/packages/frontend/component/src/ui/menu/styles.ts b/packages/frontend/component/src/ui/menu/styles.ts deleted file mode 100644 index d11258bd5..000000000 --- a/packages/frontend/component/src/ui/menu/styles.ts +++ /dev/null @@ -1,115 +0,0 @@ -import type { CSSProperties } from 'react'; - -import { displayFlex, styled, textEllipsis } from '../../styles'; -import StyledPopperContainer from '../shared/container'; - -export const StyledMenuWrapper = styled(StyledPopperContainer, { - shouldForwardProp: propName => - !['width', 'height'].includes(propName as string), -})<{ - width?: CSSProperties['width']; - height?: CSSProperties['height']; -}>(({ width, height }) => { - return { - width, - height, - minWidth: '200px', - background: 'var(--affine-white)', - padding: '8px 4px', - fontSize: '14px', - backgroundColor: 'var(--affine-white)', - boxShadow: 'var(--affine-menu-shadow)', - userSelect: 'none', - }; -}); - -export const StyledStartIconWrapper = styled('div')<{ - gap?: CSSProperties['gap']; - iconSize?: CSSProperties['fontSize']; -}>(({ gap, iconSize }) => { - return { - display: 'flex', - marginRight: gap ? gap : '12px', - fontSize: iconSize ? iconSize : '20px', - color: 'var(--affine-icon-color)', - }; -}); -export const StyledEndIconWrapper = styled('div')<{ - gap?: CSSProperties['gap']; - iconSize?: CSSProperties['fontSize']; -}>(({ gap, iconSize }) => { - return { - display: 'flex', - marginLeft: gap ? gap : '12px', - fontSize: iconSize ? iconSize : '20px', - color: 'var(--affine-icon-color)', - }; -}); - -export const StyledContent = styled('div')<{ - fontSize?: CSSProperties['fontSize']; -}>(({ fontSize }) => { - return { - textAlign: 'left', - flexGrow: 1, - fontSize: fontSize ? fontSize : 'var(--affine-font-base)', - ...textEllipsis(1), - }; -}); - -export const StyledMenuItem = styled('button')<{ - isDir?: boolean; - disabled?: boolean; - active?: boolean; - disableHover?: boolean; - userFocused?: boolean; -}>(({ - isDir = false, - disabled = false, - active = false, - disableHover = false, - userFocused = false, -}) => { - return { - width: '100%', - borderRadius: '5px', - padding: '0 14px', - fontSize: 'var(--affine-font-sm)', - height: '32px', - ...displayFlex('flex-start', 'center'), - cursor: isDir ? 'pointer' : '', - position: 'relative', - backgroundColor: 'transparent', - color: disabled - ? 'var(--affine-text-disable-color)' - : 'var(--affine-text-primary-color)', - svg: { - color: disabled - ? 'var(--affine-text-disable-color)' - : 'var(--affine-icon-color)', - }, - ...(disabled - ? { - cursor: 'not-allowed', - pointerEvents: 'none', - } - : {}), - - ':hover': - disabled || disableHover - ? {} - : { - backgroundColor: 'var(--affine-hover-color)', - }, - ...(userFocused && !disabled - ? { - backgroundColor: 'var(--affine-hover-color)', - } - : {}), - ...(active && !disabled - ? { - backgroundColor: 'var(--affine-hover-color)', - } - : {}), - }; -}); diff --git a/packages/frontend/component/src/ui/mui.ts b/packages/frontend/component/src/ui/mui.ts deleted file mode 100644 index 88975fdbb..000000000 --- a/packages/frontend/component/src/ui/mui.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ClickAwayListener as MuiClickAwayListener } from '@mui/base/ClickAwayListener'; -import MuiAvatar from '@mui/material/Avatar'; -import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; -import MuiCollapse from '@mui/material/Collapse'; -import MuiFade from '@mui/material/Fade'; -import MuiGrow from '@mui/material/Grow'; -import MuiSkeleton from '@mui/material/Skeleton'; -import MuiSlide from '@mui/material/Slide'; - -export { - MuiAvatar, - MuiBreadcrumbs, - MuiClickAwayListener, - MuiCollapse, - MuiFade, - MuiGrow, - MuiSkeleton, - MuiSlide, -}; diff --git a/packages/frontend/component/src/ui/popper/index.ts b/packages/frontend/component/src/ui/popper/index.ts deleted file mode 100644 index 997f45f46..000000000 --- a/packages/frontend/component/src/ui/popper/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './interface'; -export * from './popper'; -export * from './pure-popper'; diff --git a/packages/frontend/component/src/ui/popper/interface.ts b/packages/frontend/component/src/ui/popper/interface.ts deleted file mode 100644 index 47b5a6942..000000000 --- a/packages/frontend/component/src/ui/popper/interface.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { - type PopperPlacementType, - type PopperProps as PopperUnstyledProps, -} from '@mui/base/Popper'; -import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react'; -export type VirtualElement = { - getBoundingClientRect: () => ClientRect | DOMRect; - contextElement?: Element; -}; - -export type PopperHandler = { - setVisible: (visible: boolean) => void; -}; - -export type PopperArrowProps = { - placement?: PopperPlacementType; -}; - -export type PopperProps = { - // Popover content - content?: ReactNode; - - // Popover trigger - children: ReactElement; - - // Whether the default is implicit - defaultVisible?: boolean; - - // Used to manually control the visibility of the Popover - visible?: boolean; - - // TODO: support focus - trigger?: 'hover' | 'click' | 'focus' | ('click' | 'hover' | 'focus')[]; - - // How long does it take for the mouse to display the Popover, in milliseconds - pointerEnterDelay?: number; - - // How long does it take to hide the Popover after the mouse moves out, in milliseconds - pointerLeaveDelay?: number; - - // Callback fired when the component closed or open - onVisibleChange?: (visible: boolean) => void; - - // Popover container style - popoverStyle?: CSSProperties; - - // Popover container class name - popoverClassName?: string; - - // Anchor class name - anchorClassName?: string; - - // Popover z-index - zIndex?: number; - - offset?: [number, number]; - - showArrow?: boolean; - - popperHandlerRef?: Ref; - - onClickAway?: () => void; - triggerContainerStyle?: CSSProperties; -} & Omit; diff --git a/packages/frontend/component/src/ui/popper/popover-arrow.tsx b/packages/frontend/component/src/ui/popper/popover-arrow.tsx deleted file mode 100644 index aae788a4b..000000000 --- a/packages/frontend/component/src/ui/popper/popover-arrow.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import type { CSSProperties } from 'react'; -import { forwardRef } from 'react'; - -import { styled } from '../../styles'; -import type { PopperArrowProps } from './interface'; - -export const PopperArrow = forwardRef( - function PopperArrow({ placement }, ref) { - return ; - } -); - -const getArrowStyle = ( - placement: PopperArrowProps['placement'] = 'bottom', - backgroundColor: CSSProperties['backgroundColor'] -) => { - if (placement.indexOf('bottom') === 0) { - return { - top: 0, - left: 0, - marginTop: '-0.9em', - width: '3em', - height: '1em', - '&::before': { - borderWidth: '0 1em 1em 1em', - borderColor: `transparent transparent ${backgroundColor} transparent`, - }, - }; - } - - if (placement.indexOf('top') === 0) { - return { - bottom: 0, - left: 0, - marginBottom: '-0.9em', - width: '3em', - height: '1em', - '&::before': { - borderWidth: '1em 1em 0 1em', - borderColor: `${backgroundColor} transparent transparent transparent`, - }, - }; - } - if (placement.indexOf('left') === 0) { - return { - right: 0, - marginRight: '-0.9em', - height: '3em', - width: '1em', - '&::before': { - borderWidth: '1em 0 1em 1em', - borderColor: `transparent transparent transparent ${backgroundColor}`, - }, - }; - } - if (placement.indexOf('right') === 0) { - return { - left: 0, - marginLeft: '-0.9em', - height: '3em', - width: '1em', - '&::before': { - borderWidth: '1em 1em 1em 0', - borderColor: `transparent ${backgroundColor} transparent transparent`, - }, - }; - } - - return { - display: 'none', - }; -}; - -const StyledArrow = styled('span')<{ - placement?: PopperArrowProps['placement']; -}>(({ placement }) => { - return { - position: 'absolute', - fontSize: '7px', - width: '3em', - '::before': { - content: '""', - margin: 'auto', - display: 'block', - width: 0, - height: 0, - borderStyle: 'solid', - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - }, - - ...getArrowStyle(placement, 'var(--affine-tooltip)'), - }; -}); diff --git a/packages/frontend/component/src/ui/popper/popper.tsx b/packages/frontend/component/src/ui/popper/popper.tsx deleted file mode 100644 index f54f1aae7..000000000 --- a/packages/frontend/component/src/ui/popper/popper.tsx +++ /dev/null @@ -1,300 +0,0 @@ -import { ClickAwayListener } from '@mui/base/ClickAwayListener'; -import { Popper as PopperUnstyled } from '@mui/base/Popper'; -import Grow from '@mui/material/Grow'; -import type { CSSProperties, PointerEvent } from 'react'; -import { - cloneElement, - useEffect, - useImperativeHandle, - useMemo, - useRef, - useState, -} from 'react'; - -import { styled } from '../../styles'; -import type { PopperProps, VirtualElement } from './interface'; -export const Popper = ({ - children, - content, - anchorEl: propsAnchorEl, - placement = 'top-start', - defaultVisible = false, - visible: propsVisible, - trigger = 'hover', - pointerEnterDelay = 500, - pointerLeaveDelay = 100, - onVisibleChange, - popoverStyle, - popoverClassName, - anchorClassName, - zIndex, - offset = [0, 5], - showArrow = false, - popperHandlerRef, - onClick, - onClickAway, - onPointerEnter, - onPointerLeave, - triggerContainerStyle = {}, - ...popperProps -}: PopperProps) => { - const [anchorEl, setAnchorEl] = useState(); - const [visible, setVisible] = useState(defaultVisible); - //const [arrowRef, setArrowRef] = useState(); - const arrowRef = null; - const pointerLeaveTimer = useRef(); - const pointerEnterTimer = useRef(); - - const visibleControlledByParent = typeof propsVisible !== 'undefined'; - const isAnchorCustom = typeof propsAnchorEl !== 'undefined'; - - const hasHoverTrigger = useMemo(() => { - return ( - trigger === 'hover' || - (Array.isArray(trigger) && trigger.includes('hover')) - ); - }, [trigger]); - - const hasClickTrigger = useMemo(() => { - return ( - trigger === 'click' || - (Array.isArray(trigger) && trigger.includes('click')) - ); - }, [trigger]); - - const onPointerEnterHandler = (e: PointerEvent) => { - onPointerEnter?.(e); - if (!hasHoverTrigger || visibleControlledByParent) { - return; - } - window.clearTimeout(pointerLeaveTimer.current); - - pointerEnterTimer.current = window.window.setTimeout(() => { - setVisible(true); - }, pointerEnterDelay); - }; - - const onPointerLeaveHandler = (e: PointerEvent) => { - onPointerLeave?.(e); - - if (!hasHoverTrigger || visibleControlledByParent) { - return; - } - window.clearTimeout(pointerEnterTimer.current); - pointerLeaveTimer.current = window.window.setTimeout(() => { - setVisible(false); - }, pointerLeaveDelay); - }; - - useEffect(() => { - onVisibleChange?.(visible); - }, [visible, onVisibleChange]); - - useImperativeHandle(popperHandlerRef, () => { - return { - setVisible: (visible: boolean) => { - !visibleControlledByParent && setVisible(visible); - }, - }; - }); - - const mergedClass = [anchorClassName, children.props.className] - .filter(Boolean) - .join(' '); - - return ( - { - if (visibleControlledByParent) { - onClickAway?.(); - } else { - setVisible(false); - } - }} - > - - {cloneElement(children, { - ref: (dom: HTMLDivElement) => setAnchorEl(dom), - onClick: (e: MouseEvent) => { - children.props.onClick?.(e); - if (!hasClickTrigger || visibleControlledByParent) { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - onClick?.(e); - return; - } - setVisible(!visible); - }, - onPointerEnter: onPointerEnterHandler, - onPointerLeave: onPointerLeaveHandler, - ...(mergedClass - ? { - className: mergedClass, - } - : {}), - })} - {content && ( - - {({ TransitionProps }) => ( - -
{ - if (hasClickTrigger && !visibleControlledByParent) { - setVisible(false); - } - }} - > - {showArrow ? ( - placement.indexOf('bottom') === 0 ? ( -
- - - - {content} -
- ) : placement.indexOf('top') === 0 ? ( -
- {content} - - - -
- ) : placement.indexOf('left') === 0 ? ( - <> - {content} - - - - - ) : placement.indexOf('right') === 0 ? ( - <> - - - - {content} - - ) : ( -
- {content} - - - -
- ) - ) : ( - content - )} -
- - )} - - )} - - - ); -}; - -// The children of ClickAwayListener must be a DOM Node to judge whether the click is outside, use node.contains -const Container = styled('div')({ - display: 'contents', -}); - -export const BasicStyledPopper = styled(PopperUnstyled, { - shouldForwardProp: (propName: string) => - !['zIndex'].some(name => name === propName), -})<{ - zIndex?: CSSProperties['zIndex']; -}>(({ zIndex }) => { - return { - zIndex: zIndex ?? 'var(--affine-z-index-popover)', - }; -}); diff --git a/packages/frontend/component/src/ui/popper/pure-popper.tsx b/packages/frontend/component/src/ui/popper/pure-popper.tsx deleted file mode 100644 index c0e856c3c..000000000 --- a/packages/frontend/component/src/ui/popper/pure-popper.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import type { PopperProps as PopperUnstyledProps } from '@mui/base/Popper'; -import Grow from '@mui/material/Grow'; -import type { CSSProperties, PropsWithChildren } from 'react'; -import { useState } from 'react'; - -import { PopperArrow } from './popover-arrow'; -import { BasicStyledPopper } from './popper'; -import { PopperWrapper } from './styles'; - -export type PurePopperProps = { - zIndex?: CSSProperties['zIndex']; - - offset?: [number, number]; - - showArrow?: boolean; -} & PopperUnstyledProps & - PropsWithChildren; - -export const PurePopper = (props: PurePopperProps) => { - const { - children, - zIndex, - offset, - showArrow = false, - modifiers = [], - placement, - ...otherProps - } = props; - const [arrowRef, setArrowRef] = useState(); - - return ( - - {({ TransitionProps }) => ( - - - {showArrow && ( - - )} - {children} - - - )} - - ); -}; diff --git a/packages/frontend/component/src/ui/popper/styles.ts b/packages/frontend/component/src/ui/popper/styles.ts deleted file mode 100644 index 58fd4c01f..000000000 --- a/packages/frontend/component/src/ui/popper/styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { styled } from '../../styles'; - -export const PopperWrapper = styled('div')(() => { - return { - position: 'relative', - }; -}); diff --git a/packages/frontend/component/src/ui/shared/container.tsx b/packages/frontend/component/src/ui/shared/container.tsx deleted file mode 100644 index c110c847d..000000000 --- a/packages/frontend/component/src/ui/shared/container.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import type { PopperPlacementType } from '@mui/material'; - -import { styled } from '../../styles'; - -export type PopperDirection = - | 'none' - | 'left-top' - | 'left-bottom' - | 'right-top' - | 'right-bottom'; - -const getBorderRadius = (direction: PopperDirection, radius = '0') => { - const map: Record = { - none: `${radius}`, - 'left-top': `0 ${radius} ${radius} ${radius}`, - 'left-bottom': `${radius} ${radius} ${radius} 0`, - 'right-top': `${radius} 0 ${radius} ${radius}`, - 'right-bottom': `${radius} ${radius} 0 ${radius}`, - }; - return map[direction]; -}; - -export const placementToContainerDirection: Record< - PopperPlacementType, - PopperDirection -> = { - top: 'none', - 'top-start': 'left-bottom', - 'top-end': 'right-bottom', - right: 'none', - 'right-start': 'left-top', - 'right-end': 'left-bottom', - bottom: 'none', - 'bottom-start': 'none', - 'bottom-end': 'none', - left: 'none', - 'left-start': 'right-top', - 'left-end': 'right-bottom', - auto: 'none', - 'auto-start': 'none', - 'auto-end': 'none', -}; - -export const StyledPopperContainer = styled('div')<{ - placement?: PopperPlacementType; -}>(({ placement = 'top' }) => { - const direction = placementToContainerDirection[placement]; - const borderRadius = getBorderRadius( - direction, - 'var(--affine-popover-radius)' - ); - return { - borderRadius, - }; -}); - -export default StyledPopperContainer; diff --git a/packages/frontend/component/src/ui/skeleton/index.css.ts b/packages/frontend/component/src/ui/skeleton/index.css.ts new file mode 100644 index 000000000..6115cce47 --- /dev/null +++ b/packages/frontend/component/src/ui/skeleton/index.css.ts @@ -0,0 +1,94 @@ +import { keyframes, style } from '@vanilla-extract/css'; + +import type { PickStringFromUnion, SkeletonProps } from './types'; + +// variables +const bg = 'var(--affine-placeholder-color)'; +const highlight = 'rgba(255, 255, 255, 0.4)'; +const defaultHeight = '32px'; + +const pulseKeyframes = keyframes({ + '0%': { opacity: 1 }, + '50%': { opacity: 0.5 }, + '100%': { opacity: 1 }, +}); + +const waveKeyframes = keyframes({ + '0%': { transform: 'translateX(-100%)' }, + '50%': { transform: 'translateX(100%)' }, + '100%': { transform: 'translateX(100%)' }, +}); + +export const root = style({ + display: 'block', + width: '100%', + height: defaultHeight, + flexShrink: 0, + + /** + * paint background in ::before, + * so that we can use opacity to control the color + **/ + position: 'relative', + '::before': { + content: '', + position: 'absolute', + borderRadius: 'inherit', + inset: 0, + opacity: 0.3, + backgroundColor: bg, + }, +}); + +export const variant: Record = { + circular: style({ + width: defaultHeight, + borderRadius: '50%', + }), + rectangular: style({ + borderRadius: '0px', + }), + rounded: style({ + borderRadius: '8px', + }), + text: style({ + borderRadius: '4px', + height: '1.2em', + marginTop: '0.2em', + marginBottom: '0.2em', + }), +}; + +export const animation: Record< + PickStringFromUnion, + string +> = { + pulse: style({ + animation: `${pulseKeyframes} 2s ease-in-out 0.5s infinite`, + }), + wave: style({ + position: 'relative', + overflow: 'hidden', + + /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */ + WebkitMaskImage: '-webkit-radial-gradient(white, black)', + + '::after': { + animation: `${waveKeyframes} 2s linear 0.5s infinite`, + background: `linear-gradient( + 90deg, + transparent, + ${highlight}, + transparent + )`, + content: '', + position: 'absolute', + transform: + 'translateX(-100%)' /* Avoid flash during server-side hydration */, + bottom: 0, + left: 0, + right: 0, + top: 0, + }, + }), +}; diff --git a/packages/frontend/component/src/ui/skeleton/index.ts b/packages/frontend/component/src/ui/skeleton/index.ts new file mode 100644 index 000000000..19b31c918 --- /dev/null +++ b/packages/frontend/component/src/ui/skeleton/index.ts @@ -0,0 +1,2 @@ +export * from './skeleton'; +export * from './types'; diff --git a/packages/frontend/component/src/ui/skeleton/skeleton.tsx b/packages/frontend/component/src/ui/skeleton/skeleton.tsx new file mode 100644 index 000000000..fef328590 --- /dev/null +++ b/packages/frontend/component/src/ui/skeleton/skeleton.tsx @@ -0,0 +1,49 @@ +import clsx from 'clsx'; + +import * as styles from './index.css'; +import type { SkeletonProps } from './types'; + +function getSize(size: number | string) { + return typeof size === 'number' || /^\d+$/.test(size) ? `${size}px` : size; +} + +/** + * + * @returns + */ +export const Skeleton = ({ + animation = 'pulse', + variant = 'text', + children, + + width: _width, + height: _height, + style: _style, + className: _className, + + ...props +}: SkeletonProps) => { + const width = _width !== undefined ? getSize(_width) : undefined; + const height = _height !== undefined ? getSize(_height) : undefined; + + const style = { + width, + height, + ...(_style || {}), + }; + + return ( +
+ {children} +
+ ); +}; diff --git a/packages/frontend/component/src/ui/skeleton/types.ts b/packages/frontend/component/src/ui/skeleton/types.ts new file mode 100644 index 000000000..e0ad3eaae --- /dev/null +++ b/packages/frontend/component/src/ui/skeleton/types.ts @@ -0,0 +1,33 @@ +import type { HTMLAttributes, PropsWithChildren } from 'react'; + +export interface SkeletonProps + extends PropsWithChildren, + HTMLAttributes { + /** + * The animation. If `false` the animation effect is disabled. + */ + animation?: 'pulse' | 'wave' | false; + + /** + * The type of content that will be rendered. + * @default `'text'` + */ + variant?: 'circular' | 'rectangular' | 'rounded' | 'text' | string; + + /** + * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. + */ + width?: number | string; + + /** + * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. + */ + height?: number | string; + + /** + * Wrapper component. If not provided, the default element is a div. + */ + wrapper?: string; +} + +export type PickStringFromUnion = T extends string ? T : never; diff --git a/packages/frontend/component/src/ui/table/index.ts b/packages/frontend/component/src/ui/table/index.ts index c919389f2..95352ed1f 100644 --- a/packages/frontend/component/src/ui/table/index.ts +++ b/packages/frontend/component/src/ui/table/index.ts @@ -1,10 +1,3 @@ -// import Table from '@mui/material/Table'; -// import TableBody from '@mui/material/TableBody'; -// import TableCell from '@mui/material/TableCell'; -// import TableHead from '@mui/material/TableHead'; -// import TableRow from '@mui/material/TableRow'; -// - export * from './interface'; export * from './table'; export * from './table-body'; diff --git a/packages/frontend/component/src/ui/tree-view/hooks/use-collapsed.ts b/packages/frontend/component/src/ui/tree-view/hooks/use-collapsed.ts deleted file mode 100644 index 50ef9d96b..000000000 --- a/packages/frontend/component/src/ui/tree-view/hooks/use-collapsed.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { useState } from 'react'; - -import type { TreeNodeProps } from '../types'; -export const useCollapsed = ({ - initialCollapsedIds = [], - disableCollapse = false, -}: { - disableCollapse?: boolean; - initialCollapsedIds?: string[]; -}) => { - // TODO: should record collapsedIds in localStorage - const [collapsedIds, setCollapsedIds] = - useState(initialCollapsedIds); - - const setCollapsed: TreeNodeProps['setCollapsed'] = (id, collapsed) => { - if (disableCollapse) { - return; - } - if (collapsed) { - setCollapsedIds(ids => [...ids, id]); - } else { - setCollapsedIds(ids => ids.filter(i => i !== id)); - } - }; - - return { - collapsedIds, - setCollapsed, - }; -}; - -export default useCollapsed; diff --git a/packages/frontend/component/src/ui/tree-view/hooks/use-select-with-keyboard.ts b/packages/frontend/component/src/ui/tree-view/hooks/use-select-with-keyboard.ts deleted file mode 100644 index 79eb78260..000000000 --- a/packages/frontend/component/src/ui/tree-view/hooks/use-select-with-keyboard.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { useEffect, useState } from 'react'; - -import type { TreeViewProps } from '../types'; -import { flattenIds } from '../utils'; -export const useSelectWithKeyboard = ({ - data, - enableKeyboardSelection, - onSelect, -}: Pick< - TreeViewProps, - 'data' | 'enableKeyboardSelection' | 'onSelect' ->) => { - const [selectedId, setSelectedId] = useState(); - // TODO: should record collapsedIds in localStorage - - useEffect(() => { - if (!enableKeyboardSelection) { - return; - } - - const flattenedIds = flattenIds(data); - - const handleDirectionKeyDown = (e: KeyboardEvent) => { - if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') { - return; - } - if (selectedId === undefined) { - setSelectedId(flattenedIds[0]); - return; - } - let selectedIndex = flattenedIds.indexOf(selectedId); - if (e.key === 'ArrowDown') { - selectedIndex < flattenedIds.length - 1 && selectedIndex++; - } - if (e.key === 'ArrowUp') { - selectedIndex > 0 && selectedIndex--; - } - - setSelectedId(flattenedIds[selectedIndex]); - }; - - const handleEnterKeyDown = (e: KeyboardEvent) => { - if (e.key !== 'Enter') { - return; - } - selectedId && onSelect?.(selectedId); - }; - - document.addEventListener('keydown', handleDirectionKeyDown); - document.addEventListener('keydown', handleEnterKeyDown); - - return () => { - document.removeEventListener('keydown', handleDirectionKeyDown); - document.removeEventListener('keydown', handleEnterKeyDown); - }; - }, [data, enableKeyboardSelection, onSelect, selectedId]); - - return { - selectedId, - }; -}; - -export default useSelectWithKeyboard; diff --git a/packages/frontend/component/src/ui/tree-view/index.ts b/packages/frontend/component/src/ui/tree-view/index.ts deleted file mode 100644 index caad1c7ef..000000000 --- a/packages/frontend/component/src/ui/tree-view/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './tree-node'; -export * from './tree-view'; -export * from './types'; diff --git a/packages/frontend/component/src/ui/tree-view/styles.ts b/packages/frontend/component/src/ui/tree-view/styles.ts deleted file mode 100644 index 59e703993..000000000 --- a/packages/frontend/component/src/ui/tree-view/styles.ts +++ /dev/null @@ -1,44 +0,0 @@ -import MuiCollapse from '@mui/material/Collapse'; -import { lightTheme } from '@toeverything/theme'; -import type { CSSProperties } from 'react'; - -import { alpha, styled } from '../../styles'; - -export const StyledCollapse = styled(MuiCollapse)<{ - indent?: CSSProperties['paddingLeft']; -}>(({ indent = 12 }) => { - return { - paddingLeft: indent, - }; -}); -export const StyledTreeNodeWrapper = styled('div')(() => { - return { - position: 'relative', - }; -}); -export const StyledTreeNodeContainer = styled('div')<{ isDragging?: boolean }>( - ({ isDragging = false }) => { - return { - background: isDragging ? 'var(--affine-hover-color)' : '', - }; - } -); - -export const StyledNodeLine = styled('div')<{ - isOver: boolean; - isTop?: boolean; -}>(({ isOver, isTop = false }) => { - return { - position: 'absolute', - left: '0', - ...(isTop ? { top: '-1px' } : { bottom: '-1px' }), - width: '100%', - paddingTop: '2x', - borderTop: '2px solid', - borderColor: isOver ? 'var(--affine-primary-color)' : 'transparent', - boxShadow: isOver - ? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}` - : 'none', - zIndex: 1, - }; -}); diff --git a/packages/frontend/component/src/ui/tree-view/tree-node-inner.tsx b/packages/frontend/component/src/ui/tree-view/tree-node-inner.tsx deleted file mode 100644 index ef2433008..000000000 --- a/packages/frontend/component/src/ui/tree-view/tree-node-inner.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { useDroppable } from '@dnd-kit/core'; - -import { StyledNodeLine } from './styles'; -import type { NodeLIneProps, TreeNodeItemProps } from './types'; - -export const NodeLine = ({ - node, - allowDrop = true, - isTop = false, -}: NodeLIneProps) => { - const { isOver, setNodeRef } = useDroppable({ - id: `${node.id}-${isTop ? 'top' : 'bottom'}-line`, - disabled: !allowDrop, - data: { - node, - position: { - topLine: isTop, - bottomLine: !isTop, - internal: false, - }, - }, - }); - - return ( - - ); -}; -export const TreeNodeItemWithDnd = ({ - node, - allowDrop, - setCollapsed, - ...otherProps -}: TreeNodeItemProps) => { - const { onAdd, onDelete } = otherProps; - - const { isOver, setNodeRef } = useDroppable({ - id: node.id, - disabled: !allowDrop, - data: { - node, - position: { - topLine: false, - bottomLine: false, - internal: true, - }, - }, - }); - - return ( -
- -
- ); -}; - -export const TreeNodeItem = ({ - node, - collapsed, - setCollapsed, - selectedId, - isOver = false, - onAdd, - onDelete, - disableCollapse, - allowDrop = true, -}: TreeNodeItemProps) => { - return node.render?.(node, { - isOver: isOver && allowDrop, - onAdd: () => onAdd?.(node.id), - onDelete: () => onDelete?.(node.id), - collapsed, - setCollapsed, - isSelected: selectedId === node.id, - disableCollapse, - }); -}; diff --git a/packages/frontend/component/src/ui/tree-view/tree-node.tsx b/packages/frontend/component/src/ui/tree-view/tree-node.tsx deleted file mode 100644 index 80d972747..000000000 --- a/packages/frontend/component/src/ui/tree-view/tree-node.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { useDraggable } from '@dnd-kit/core'; -import { useMemo } from 'react'; - -import { - StyledCollapse, - StyledTreeNodeContainer, - StyledTreeNodeWrapper, -} from './styles'; -import { NodeLine, TreeNodeItem, TreeNodeItemWithDnd } from './tree-node-inner'; -import type { TreeNodeProps } from './types'; -export const TreeNodeWithDnd = ( - props: TreeNodeProps -) => { - const { draggingId, node, allowDrop } = props; - const { attributes, listeners, setNodeRef } = useDraggable({ - id: props.node.id, - }); - const isDragging = useMemo( - () => draggingId === node.id, - [draggingId, node.id] - ); - return ( - - - - ); -}; - -export const TreeNode = ({ - node, - index, - allowDrop = true, - ...otherProps -}: TreeNodeProps) => { - const { indent, enableDnd, collapsedIds } = otherProps; - const collapsed = collapsedIds.includes(node.id); - const { renderTopLine = true, renderBottomLine = true } = node; - - return ( - <> - - {enableDnd && renderTopLine && index === 0 && ( - - )} - {enableDnd ? ( - - ) : ( - - )} - - {enableDnd && - renderBottomLine && - (!node.children?.length || collapsed) && ( - - )} - - - {node.children && - node.children.map((childNode, index) => - enableDnd ? ( - - ) : ( - - ) - )} - - - ); -}; diff --git a/packages/frontend/component/src/ui/tree-view/tree-view.tsx b/packages/frontend/component/src/ui/tree-view/tree-view.tsx deleted file mode 100644 index 67ca39388..000000000 --- a/packages/frontend/component/src/ui/tree-view/tree-view.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import type { DragEndEvent } from '@dnd-kit/core'; -import { - closestCenter, - DndContext, - DragOverlay, - PointerSensor, - useSensor, - useSensors, -} from '@dnd-kit/core'; -import { useCallback, useState } from 'react'; - -import useCollapsed from './hooks/use-collapsed'; -import useSelectWithKeyboard from './hooks/use-select-with-keyboard'; -import { TreeNode, TreeNodeWithDnd } from './tree-node'; -import type { Node, TreeViewProps } from './types'; -import { findNode } from './utils'; -export const TreeView = ({ - data, - enableKeyboardSelection, - onSelect, - enableDnd = true, - disableCollapse, - onDrop, - ...otherProps -}: TreeViewProps) => { - const sensors = useSensors( - useSensor(PointerSensor, { - activationConstraint: { - distance: 8, - }, - }) - ); - const { selectedId } = useSelectWithKeyboard({ - data, - onSelect, - enableKeyboardSelection, - }); - - const { collapsedIds, setCollapsed } = useCollapsed({ disableCollapse }); - - const [draggingId, setDraggingId] = useState(); - - const onDragEnd = useCallback( - (e: DragEndEvent) => { - const { active, over } = e; - const position = over?.data.current?.position; - const dropId = over?.data.current?.node.id; - setDraggingId(undefined); - if (!over || !active || !position) { - return; - } - - onDrop?.(active.id as string, dropId, position); - }, - [onDrop] - ); - const onDragMove = useCallback((e: DragEndEvent) => { - setDraggingId(e.active.id as string); - }, []); - if (enableDnd) { - const treeNodes = data.map((node, index) => ( - - )); - const draggingNode = (function () { - let draggingNode: Node | undefined; - if (draggingId) { - draggingNode = findNode(draggingId, data); - } - if (draggingNode) { - return ( - {}} - {...otherProps} - /> - ); - } - return null; - })(); - return ( - - {treeNodes} - {draggingNode} - - ); - } - - return ( - <> - {data.map((node, index) => ( - - ))} - - ); -}; - -export default TreeView; diff --git a/packages/frontend/component/src/ui/tree-view/types.ts b/packages/frontend/component/src/ui/tree-view/types.ts deleted file mode 100644 index 99276adf3..000000000 --- a/packages/frontend/component/src/ui/tree-view/types.ts +++ /dev/null @@ -1,72 +0,0 @@ -import type { CSSProperties, ReactNode } from 'react'; - -export type DropPosition = { - topLine: boolean; - bottomLine: boolean; - internal: boolean; -}; -export type OnDrop = ( - dragId: string, - dropId: string, - position: DropPosition -) => void; - -export type Node = { - id: string; - children?: Node[]; - render: ( - node: Node, - eventsAndStatus: { - isOver: boolean; - onAdd: () => void; - onDelete: () => void; - collapsed: boolean; - setCollapsed: (id: string, collapsed: boolean) => void; - isSelected: boolean; - disableCollapse?: ReactNode; - }, - renderProps?: RenderProps - ) => ReactNode; - renderTopLine?: boolean; - renderBottomLine?: boolean; -}; - -type CommonProps = { - enableDnd?: boolean; - enableKeyboardSelection?: boolean; - indent?: CSSProperties['paddingLeft']; - onAdd?: (parentId: string) => void; - onDelete?: (deleteId: string) => void; - onDrop?: OnDrop; - // Only trigger when the enableKeyboardSelection is true - onSelect?: (id: string) => void; - disableCollapse?: ReactNode; -}; - -export type TreeNodeProps = { - node: Node; - index: number; - collapsedIds: string[]; - setCollapsed: (id: string, collapsed: boolean) => void; - allowDrop?: boolean; - selectedId?: string; - draggingId?: string; -} & CommonProps; - -export type TreeNodeItemProps = { - collapsed: boolean; - setCollapsed: (id: string, collapsed: boolean) => void; - - isOver?: boolean; -} & TreeNodeProps; - -export type TreeViewProps = { - data: Node[]; - initialCollapsedIds?: string[]; - disableCollapse?: boolean; -} & CommonProps; - -export type NodeLIneProps = { - allowDrop: boolean; - isTop?: boolean; -} & Pick, 'node'>; diff --git a/packages/frontend/component/src/ui/tree-view/utils.ts b/packages/frontend/component/src/ui/tree-view/utils.ts deleted file mode 100644 index 66c01726b..000000000 --- a/packages/frontend/component/src/ui/tree-view/utils.ts +++ /dev/null @@ -1,37 +0,0 @@ -import type { Node } from './types'; - -export function flattenIds(arr: Node[]): string[] { - const result: string[] = []; - - function flatten(arr: Node[]) { - for (let i = 0, len = arr.length; i < len; i++) { - const item = arr[i]; - result.push(item.id); - if (Array.isArray(item.children)) { - flatten(item.children); - } - } - } - - flatten(arr); - return result; -} - -export function findNode( - id: string, - nodes: Node[] -): Node | undefined { - for (let i = 0, len = nodes.length; i < len; i++) { - const node = nodes[i]; - if (node.id === id) { - return node; - } - if (node.children) { - const result = findNode(id, node.children); - if (result) { - return result; - } - } - } - return undefined; -} diff --git a/packages/frontend/core/.webpack/cache-group.ts b/packages/frontend/core/.webpack/cache-group.ts index 9e710c2c0..bdbffd942 100644 --- a/packages/frontend/core/.webpack/cache-group.ts +++ b/packages/frontend/core/.webpack/cache-group.ts @@ -20,12 +20,6 @@ export const productionCacheGroups = { priority: Number.MAX_SAFE_INTEGER, chunks: 'async' as const, }, - mui: { - name: `npm-mui`, - test: testPackageName(/[\\/]node_modules[\\/](mui|@mui)[\\/]/), - priority: 200, - enforce: true, - }, blocksuite: { name: `npm-blocksuite`, test: testPackageName(/[\\/]node_modules[\\/](@blocksuite)[\\/]/), diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json index 525a3eff4..d44b83ba4 100644 --- a/packages/frontend/core/package.json +++ b/packages/frontend/core/package.json @@ -40,7 +40,6 @@ "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", "@marsidev/react-turnstile": "^0.3.1", - "@mui/material": "^5.14.14", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-scroll-area": "^1.0.5", diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx index 8fd6785c8..854c436ad 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx @@ -1,3 +1,4 @@ +import { Skeleton } from '@affine/component'; import { Pagination } from '@affine/component/member-components'; import { SettingHeader, @@ -19,7 +20,6 @@ import { Trans } from '@affine/i18n'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { useMutation, useQuery } from '@affine/workspace/affine/gql'; import { ArrowRightSmallIcon } from '@blocksuite/icons'; -import { Skeleton } from '@mui/material'; import { Button, IconButton } from '@toeverything/components/button'; import { Loading } from '@toeverything/components/loading'; import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks'; diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.tsx index 1ae9a390b..6d437a594 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/skeleton.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from '@mui/material'; +import { Skeleton } from '@affine/component'; import { PlanLayout } from './layout'; import * as styles from './skeleton.css'; diff --git a/packages/frontend/core/src/components/bookmark.tsx b/packages/frontend/core/src/components/bookmark.tsx index 6836eecd5..0792a71ae 100644 --- a/packages/frontend/core/src/components/bookmark.tsx +++ b/packages/frontend/core/src/components/bookmark.tsx @@ -1,10 +1,10 @@ -import { MenuItem, PureMenu } from '@affine/component'; -import { MuiClickAwayListener } from '@affine/component'; import type { SerializedBlock } from '@blocksuite/blocks'; import type { BaseBlockModel } from '@blocksuite/store'; import type { Page } from '@blocksuite/store'; import type { VEditor } from '@blocksuite/virgo'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { Menu, MenuItem } from '@toeverything/components/menu'; +import { useEffect, useState } from 'react'; +import { createPortal } from 'react-dom'; type ShortcutMap = { [key: string]: (e: KeyboardEvent, page: Page) => void; @@ -121,60 +121,6 @@ export type BookmarkProps = { export const Bookmark = ({ page }: BookmarkProps) => { const [anchor, setAnchor] = useState(null); - const [selectedOption, setSelectedOption] = useState( - menuOptions[0].id - ); - const shortcutMap = useMemo( - () => ({ - ArrowUp: () => { - const curIndex = menuOptions.findIndex( - ({ id }) => id === selectedOption - ); - if (menuOptions[curIndex - 1]) { - setSelectedOption(menuOptions[curIndex - 1].id); - } else if (curIndex === -1) { - setSelectedOption(menuOptions[0].id); - } else { - setSelectedOption(menuOptions[menuOptions.length - 1].id); - } - }, - ArrowDown: () => { - const curIndex = menuOptions.findIndex( - ({ id }) => id === selectedOption - ); - if (curIndex !== -1 && menuOptions[curIndex + 1]) { - setSelectedOption(menuOptions[curIndex + 1].id); - } else { - setSelectedOption(menuOptions[0].id); - } - }, - Enter: () => - handleEnter({ - page, - selectedOption, - callback: () => { - setAnchor(null); - }, - }), - Escape: () => { - setAnchor(null); - }, - }), - [page, selectedOption] - ); - const onKeydown = useCallback( - (e: KeyboardEvent) => { - const shortcut = shortcutMap[e.key]; - if (shortcut) { - e.stopPropagation(); - e.preventDefault(); - shortcut(e, page); - } else { - setAnchor(null); - } - }, - [page, shortcutMap] - ); useEffect(() => { const disposer = page.slots.pasted.on(pastedBlocks => { @@ -189,56 +135,35 @@ export const Bookmark = ({ page }: BookmarkProps) => { return () => { disposer.dispose(); }; - }, [onKeydown, page, shortcutMap]); + }, [page]); - useEffect(() => { - if (anchor) { - document.addEventListener('keydown', onKeydown, { capture: true }); - } else { - // reset status and remove event - setSelectedOption(menuOptions[0].id); - document.removeEventListener('keydown', onKeydown, { capture: true }); - } + const portalContainer = anchor?.startContainer.parentElement; - return () => { - document.removeEventListener('keydown', onKeydown, { capture: true }); - }; - }, [anchor, onKeydown]); - - return anchor ? ( - { - setAnchor(null); - setSelectedOption(''); - }} - > -
- - {menuOptions.map(({ id, label }) => { - return ( - { - handleEnter({ - page, - selectedOption: id, - callback: () => { - setAnchor(null); - }, - }); - }} - disableHover={true} - onMouseEnter={() => { - setSelectedOption(id); - }} - > - {label} - - ); - })} - -
- - ) : null; + return anchor && portalContainer + ? createPortal( + !e && setAnchor(null), + }} + items={menuOptions.map(({ id, label }) => ( + + handleEnter({ + page, + selectedOption: id, + callback: () => setAnchor(null), + }) + } + > + {label} + + ))} + > + + , + portalContainer + ) + : null; }; diff --git a/packages/frontend/core/src/components/pure/help-island/index.tsx b/packages/frontend/core/src/components/pure/help-island/index.tsx index 236888184..714ce1514 100644 --- a/packages/frontend/core/src/components/pure/help-island/index.tsx +++ b/packages/frontend/core/src/components/pure/help-island/index.tsx @@ -1,4 +1,3 @@ -import { MuiFade } from '@affine/component'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons'; import { Tooltip } from '@toeverything/components/tooltip'; @@ -8,7 +7,7 @@ import { useCallback, useState } from 'react'; import { openOnboardingModalAtom, openSettingModalAtom } from '../../../atoms'; import { currentModeAtom } from '../../../atoms/mode'; -import { ShortcutsModal } from '../shortcuts-modal'; +import type { SettingProps } from '../../affine/setting-modal'; import { ContactIcon, HelpIcon, KeyboardIcon } from './icons'; import { StyledAnimateWrapper, @@ -36,113 +35,106 @@ export const HelpIsland = ({ const [spread, setShowSpread] = useState(false); const t = useAFFiNEI18N(); - const [openShortCut, setOpenShortCut] = useState(false); + const openSettingModal = useCallback( + (tab: SettingProps['activeTab']) => { + setShowSpread(false); - const openAbout = useCallback(() => { - setShowSpread(false); - - setOpenSettingModalAtom({ - open: true, - activeTab: 'about', - workspaceId: null, - }); - }, [setOpenSettingModalAtom]); + setOpenSettingModalAtom({ + open: true, + activeTab: tab, + workspaceId: null, + }); + }, + [setOpenSettingModalAtom] + ); + const openAbout = useCallback( + () => openSettingModal('about'), + [openSettingModal] + ); + const openShortcuts = useCallback( + () => openSettingModal('shortcuts'), + [openSettingModal] + ); return ( - <> - { - setShowSpread(!spread); - }} - inEdgelessPage={mode === 'edgeless'} + { + setShowSpread(!spread); + }} + inEdgelessPage={mode === 'edgeless'} + > + - - {showList.includes('whatNew') && ( - + { + window.open(runtimeConfig.changelogUrl, '_blank'); + }} > - { - window.open(runtimeConfig.changelogUrl, '_blank'); - }} - > - - - - )} - {showList.includes('contact') && ( - + + + )} + {showList.includes('contact') && ( + + - - - - - )} - {showList.includes('shortcuts') && ( - + + + )} + {showList.includes('shortcuts') && ( + + - { - setShowSpread(false); - setOpenShortCut(true); - }} - > - - - - )} - {showList.includes('guide') && ( - + + + )} + {showList.includes('guide') && ( + + { + setShowSpread(false); + setOpenOnboarding(true); + }} > - { - setShowSpread(false); - setOpenOnboarding(true); - }} - > - - - - )} - + + + + )} + + {spread ? ( + + + + ) : ( - - - - - - - - - + + - - - setOpenShortCut(false)} - /> - + + )} + ); }; diff --git a/packages/frontend/core/src/components/pure/help-island/style.ts b/packages/frontend/core/src/components/pure/help-island/style.ts index f7dab69a5..ff7125e51 100644 --- a/packages/frontend/core/src/components/pure/help-island/style.ts +++ b/packages/frontend/core/src/components/pure/help-island/style.ts @@ -19,8 +19,8 @@ export const StyledIsland = styled('div')<{ ? 'var(--affine-background-overlay-panel-color)' : 'var(--affine-background-primary-color)', ':hover': { - background: spread ? null : 'var(--affine-white)', - boxShadow: spread ? null : 'var(--affine-menu-shadow)', + background: spread ? undefined : 'var(--affine-white)', + boxShadow: spread ? undefined : 'var(--affine-menu-shadow)', }, '::after': { content: '""', @@ -73,7 +73,7 @@ export const StyledTriggerWrapper = styled('div')<{ ...displayFlex('center', 'center'), ...positionAbsolute({ left: '4px', bottom: '4px' }), ':hover': { - backgroundColor: spread ? 'var(--affine-hover-color)' : null, + backgroundColor: spread ? 'var(--affine-hover-color)' : undefined, }, }; }); diff --git a/packages/frontend/core/src/components/pure/shortcuts-modal/icons.tsx b/packages/frontend/core/src/components/pure/shortcuts-modal/icons.tsx deleted file mode 100644 index 13eb2d3ce..000000000 --- a/packages/frontend/core/src/components/pure/shortcuts-modal/icons.tsx +++ /dev/null @@ -1,27 +0,0 @@ -export const CloseIcon = () => { - return ( - - - - ); -}; - -export const KeyboardIcon = () => { - return ( - - - - ); -}; diff --git a/packages/frontend/core/src/components/pure/shortcuts-modal/index.tsx b/packages/frontend/core/src/components/pure/shortcuts-modal/index.tsx deleted file mode 100644 index 4cb03d831..000000000 --- a/packages/frontend/core/src/components/pure/shortcuts-modal/index.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { MuiClickAwayListener, MuiSlide } from '@affine/component'; -import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { CloseIcon } from '@blocksuite/icons'; -import { IconButton } from '@toeverything/components/button'; - -import { - type ShortcutsInfo, - useEdgelessShortcuts, - useGeneralShortcuts, - useMarkdownShortcuts, - usePageShortcuts, -} from '../../../hooks/affine/use-shortcuts'; -import { KeyboardIcon } from './icons'; -import * as styles from './style.css'; - -type ModalProps = { - open: boolean; - onClose: () => void; -}; - -const ShortcutsPanel = ({ - shortcutsInfo, -}: { - shortcutsInfo: ShortcutsInfo; -}) => { - return ( - <> -
{shortcutsInfo.title}
- - {Object.entries(shortcutsInfo.shortcuts).map(([title, shortcuts]) => { - return ( -
- {title} -
- {shortcuts.map(key => { - return ( - - {key} - - ); - })} -
-
- ); - })} - - ); -}; - -export const ShortcutsModal = ({ open, onClose }: ModalProps) => { - const t = useAFFiNEI18N(); - - const markdownShortcutsInfo = useMarkdownShortcuts(); - const pageShortcutsInfo = usePageShortcuts(); - const edgelessShortcutsInfo = useEdgelessShortcuts(); - const generalShortcutsInfo = useGeneralShortcuts(); - - return ( - -
- { - onClose(); - }} - > -
-
-
- - {t['Shortcuts']()} -
- - { - onClose(); - }} - icon={} - /> -
- - - - -
- -
- - ); -}; diff --git a/packages/frontend/core/src/components/pure/shortcuts-modal/style.css.ts b/packages/frontend/core/src/components/pure/shortcuts-modal/style.css.ts deleted file mode 100644 index 1f3b633c6..000000000 --- a/packages/frontend/core/src/components/pure/shortcuts-modal/style.css.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { globalStyle, style } from '@vanilla-extract/css'; - -export const shortcutsModal = style({ - width: '288px', - height: '74vh', - paddingBottom: '28px', - backgroundColor: 'var(--affine-white)', - boxShadow: 'var(--affine-popover-shadow)', - borderRadius: `var(--affine-popover-radius)`, - overflow: 'auto', - position: 'fixed', - right: '12px', - top: '0', - bottom: '0', - margin: 'auto', - zIndex: 'var(--affine-z-index-modal)', -}); -// export const shortcutsModal = style({ -// color: 'var(--affine-text-primary-color)', -// fontWeight: '500', -// fontSize: 'var(--affine-font-sm)', -// height: '44px', -// display: 'flex', -// justifyContent: 'center', -// alignItems: 'center', -// svg: { -// width: '20px', -// marginRight: '14px', -// color: 'var(--affine-primary-color)', -// }, -// }); -export const title = style({ - color: 'var(--affine-text-primary-color)', - fontWeight: '500', - fontSize: 'var(--affine-font-sm)', - height: '44px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', -}); - -globalStyle(`${title} svg`, { - width: '20px', - marginRight: '14px', - color: 'var(--affine-primary-color)', -}); - -export const subtitle = style({ - fontWeight: '500', - fontSize: 'var(--affine-font-sm)', - height: '34px', - lineHeight: '36px', - marginTop: '28px', - padding: '0 16px', -}); -export const modalHeader = style({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - paddingTop: '8px 4px 0 4px', - width: '100%', - padding: '8px 16px 0 16px', - position: 'sticky', - left: '0', - top: '0', - background: 'var(--affine-white)', - transition: 'background-color 0.5s', -}); - -export const listItem = style({ - height: '34px', - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - fontSize: 'var(--affine-font-sm)', - padding: '0 16px', -}); -export const keyContainer = style({ - display: 'flex', -}); - -export const key = style({ - selectors: { - '&:not(:last-child)::after': { - content: '+', - margin: '0 4px', - }, - }, -}); diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/shared-styles.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/shared-styles.ts deleted file mode 100644 index 7b7f6c6f3..000000000 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/shared-styles.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { alpha, displayFlex, styled, textEllipsis } from '@affine/component'; - -export const StyledListItem = styled('div')<{ - active?: boolean; - disabled?: boolean; -}>(({ active, disabled }) => { - return { - height: '32px', - color: active - ? 'var(--affine-primary-color)' - : 'var(--affine-text-primary-color)', - paddingLeft: '2px', - paddingRight: '2px', - borderRadius: '8px', - cursor: 'pointer', - marginBottom: '4px', - position: 'relative', - flexShrink: 0, - userSelect: 'none', - ...displayFlex('flex-start', 'stretch'), - ...(disabled - ? { - cursor: 'not-allowed', - color: 'var(--affine-border-color)', - } - : {}), - - 'a > svg, div > svg': { - fontSize: '20px', - marginLeft: '14px', - marginRight: '12px', - color: active - ? 'var(--affine-primary-color)' - : 'var(--affine-icon-color)', - }, - ':hover:not([disabled])': { - backgroundColor: 'var(--affine-hover-color)', - }, - }; -}); - -export const StyledCollapseButton = styled('button')<{ - collapse: boolean; - show?: boolean; -}>(({ collapse, show = true }) => { - return { - width: '16px', - height: '100%', - ...displayFlex('center', 'center'), - fontSize: '16px', - position: 'absolute', - left: '0', - top: '0', - bottom: '0', - margin: 'auto', - color: 'var(--affine-icon-color)', - opacity: '.6', - transition: 'opacity .15s ease-in-out', - display: show ? 'flex' : 'none', - svg: { - transform: `rotate(${collapse ? '0' : '-90'}deg)`, - }, - ':hover': { - opacity: '1', - }, - ':focus-visible': { - outline: '-webkit-focus-ring-color auto 1px', - }, - }; -}); - -export const StyledCollapseItem = styled('div')<{ - disable?: boolean; - active?: boolean; - isOver?: boolean; - textWrap?: boolean; -}>(({ disable = false, active = false, isOver, textWrap = false }) => { - return { - width: '100%', - lineHeight: '1.5', - minHeight: '32px', - borderRadius: '8px', - ...displayFlex('flex-start', 'center'), - paddingRight: '2px', - position: 'relative', - color: disable - ? 'var(--affine-text-disable-color)' - : active - ? 'var(--affine-primary-color)' - : 'var(--affine-text-primary-color)', - cursor: disable ? 'not-allowed' : 'pointer', - background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '', - userSelect: 'none', - ...(textWrap - ? { - wordBreak: 'break-word', - whiteSpace: 'pre-wrap', - } - : {}), - span: { - flexGrow: '1', - textAlign: 'left', - ...textEllipsis(1), - }, - '> svg': { - fontSize: '20px', - marginRight: '8px', - flexShrink: '0', - color: active - ? 'var(--affine-primary-color)' - : 'var(--affine-icon-color)', - }, - - ':hover': disable - ? {} - : { - backgroundColor: 'var(--affine-hover-color)', - '.operation-button': { - visibility: 'visible', - }, - }, - }; -}); - -export const StyledRouteNavigationWrapper = styled('div')({ - height: '32px', - width: '80px', - marginRight: '16px', - ...displayFlex('space-between', 'center'), -}); diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/style.ts b/packages/frontend/core/src/components/pure/workspace-slider-bar/style.ts deleted file mode 100644 index 6b95478b5..000000000 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/style.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { displayFlex, styled, textEllipsis } from '@affine/component'; -import { Link } from '@mui/material'; -import { baseTheme } from '@toeverything/theme'; - -export const StyledSliderBarInnerWrapper = styled('div')(() => { - return { - flexGrow: 1, - margin: '0 2px', - position: 'relative', - height: 'calc(100% - 52px * 2)', - display: 'flex', - flexDirection: 'column', - }; -}); - -export const StyledLink = styled(Link)(() => { - return { - flexGrow: 1, - textAlign: 'left', - color: 'inherit', - ...displayFlex('flex-start', 'center'), - ':visited': { - color: 'inherit', - }, - overflow: 'hidden', - div: { - wordBreak: 'break-all', - wordWrap: 'break-word', - whiteSpace: 'nowrap', - ...textEllipsis(1), - }, - userDrag: 'none', - userSelect: 'none', - appRegion: 'no-drag', - WebkitUserSelect: 'none', - WebkitUserDrag: 'none', - WebkitAppRegion: 'no-drag', - }; -}); -export const StyledNewPageButton = styled('button')(() => { - return { - width: '100%', - height: '52px', - ...displayFlex('flex-start', 'center'), - padding: '0 16px', - svg: { - fontSize: '20px', - color: 'var(--affine-icon-color)', - marginRight: '12px', - }, - ':hover': { - color: 'var(--affine-primary-color)', - svg: { - color: 'var(--affine-primary-color)', - }, - }, - }; -}); -export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(({ - active, -}) => { - return { - transition: 'opacity .15s', - pointerEvents: active ? 'auto' : 'none', - opacity: active ? 1 : 0, - position: 'fixed', - top: 0, - left: 0, - right: active ? 0 : '100%', - bottom: 0, - zIndex: parseInt(baseTheme.zIndexModal) - 1, - background: 'var(--affine-background-modal-color)', - }; -}); - -export const StyledScrollWrapper = styled('div')<{ - showTopBorder: boolean; -}>(({ showTopBorder }) => { - return { - maxHeight: '50%', - overflowY: 'auto', - borderTop: '1px solid', - borderColor: showTopBorder ? 'var(--affine-border-color)' : 'transparent', - }; -}); diff --git a/tests/affine-local/e2e/shortcuts.spec.ts b/tests/affine-local/e2e/shortcuts.spec.ts index 83642deac..808cf7cac 100644 --- a/tests/affine-local/e2e/shortcuts.spec.ts +++ b/tests/affine-local/e2e/shortcuts.spec.ts @@ -14,6 +14,10 @@ test('Open shortcuts modal', async ({ page }) => { await shortcutsIcon.click(); await page.waitForTimeout(1000); - const shortcutsModal = page.locator('[data-testid=shortcuts-modal]'); - await expect(shortcutsModal).toContainText('Page'); + + const settingModal = page.getByTestId('setting-modal'); + await expect(settingModal).toBeVisible(); + + const title = page.getByTestId('keyboard-shortcuts-title'); + await expect(title).toBeVisible(); }); diff --git a/tests/storybook/package.json b/tests/storybook/package.json index 9806c4e26..8bf37bb0f 100644 --- a/tests/storybook/package.json +++ b/tests/storybook/package.json @@ -9,7 +9,6 @@ "dependencies": { "@affine/component": "workspace:*", "@affine/i18n": "workspace:*", - "@mui/material": "^5.14.14", "@storybook/addon-actions": "^7.4.6", "@storybook/addon-essentials": "^7.4.6", "@storybook/addon-interactions": "^7.4.6", diff --git a/tests/storybook/src/stories/breadcrumbs.stories.tsx b/tests/storybook/src/stories/breadcrumbs.stories.tsx deleted file mode 100644 index 6136b5e7d..000000000 --- a/tests/storybook/src/stories/breadcrumbs.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* deepscan-disable USELESS_ARROW_FUNC_BIND */ -import { Breadcrumbs } from '@affine/component'; -import { Link, Typography } from '@mui/material'; -import { expect } from '@storybook/jest'; -import type { Meta, StoryFn } from '@storybook/react'; -import { within } from '@storybook/testing-library'; -export default { - title: 'AFFiNE/Breadcrumbs', - component: Breadcrumbs, - parameters: { - chromatic: { disableSnapshot: true }, - }, -} as Meta; - -const Template: StoryFn = args => ; - -export const Primary = Template.bind(undefined); -Primary.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - const text = canvas.getByText('AFFiNE'); - expect(text.getAttribute('data-testid')).toBe('affine'); -}; -Primary.args = { - children: [ - - AFFiNE - , - - Docs - , - - Introduction - , - ], -}; diff --git a/yarn.lock b/yarn.lock index 85d2cc265..44aa38cd0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -225,9 +225,6 @@ __metadata: "@emotion/react": "npm:^11.11.1" "@emotion/server": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" - "@mui/base": "npm:5.0.0-beta.19" - "@mui/icons-material": "npm:^5.14.14" - "@mui/material": "npm:^5.14.14" "@popperjs/core": "npm:^2.11.8" "@radix-ui/react-avatar": "npm:^1.0.4" "@radix-ui/react-collapsible": "npm:^1.0.3" @@ -344,7 +341,6 @@ __metadata: "@emotion/server": "npm:^11.11.0" "@emotion/styled": "npm:^11.11.0" "@marsidev/react-turnstile": "npm:^0.3.1" - "@mui/material": "npm:^5.14.14" "@perfsee/webpack": "npm:^1.8.4" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@radix-ui/react-collapsible": "npm:^1.0.3" @@ -821,7 +817,6 @@ __metadata: "@blocksuite/lit": "npm:0.0.0-20231116023037-31273bb7-nightly" "@blocksuite/store": "npm:0.0.0-20231116023037-31273bb7-nightly" "@dnd-kit/sortable": "npm:^7.0.2" - "@mui/material": "npm:^5.14.14" "@storybook/addon-actions": "npm:^7.4.6" "@storybook/addon-essentials": "npm:^7.4.6" "@storybook/addon-interactions": "npm:^7.4.6" @@ -3455,7 +3450,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.1, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.23.2 resolution: "@babel/runtime@npm:7.23.2" dependencies: @@ -5346,7 +5341,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.2": +"@floating-ui/react-dom@npm:^2.0.0": version: 2.0.2 resolution: "@floating-ui/react-dom@npm:2.0.2" dependencies: @@ -6799,202 +6794,6 @@ __metadata: languageName: node linkType: hard -"@mui/base@npm:5.0.0-beta.19": - version: 5.0.0-beta.19 - resolution: "@mui/base@npm:5.0.0-beta.19" - dependencies: - "@babel/runtime": "npm:^7.23.1" - "@floating-ui/react-dom": "npm:^2.0.2" - "@mui/types": "npm:^7.2.6" - "@mui/utils": "npm:^5.14.13" - "@popperjs/core": "npm:^2.11.8" - clsx: "npm:^2.0.0" - prop-types: "npm:^15.8.1" - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 4ed42c07aa2da31449c337da8535ab38068e1613e85fc69d4b8d60a1d3a270431c32cf0a9e753ae5d11cf4ea197221acda9fd7ad1f93992edc22c7c170a334f4 - languageName: node - linkType: hard - -"@mui/base@npm:5.0.0-beta.20": - version: 5.0.0-beta.20 - resolution: "@mui/base@npm:5.0.0-beta.20" - dependencies: - "@babel/runtime": "npm:^7.23.1" - "@floating-ui/react-dom": "npm:^2.0.2" - "@mui/types": "npm:^7.2.6" - "@mui/utils": "npm:^5.14.13" - "@popperjs/core": "npm:^2.11.8" - clsx: "npm:^2.0.0" - prop-types: "npm:^15.8.1" - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 5926ae342f2a95a73a8ec3cf5fd9d4d8920b3c8f1faaa396349bd1d16f95e2f6639f049a7838a536d02a1d7a6f805378c0a6c384ad18c33c6eb3c00f50011905 - languageName: node - linkType: hard - -"@mui/core-downloads-tracker@npm:^5.14.14": - version: 5.14.14 - resolution: "@mui/core-downloads-tracker@npm:5.14.14" - checksum: 93a1f16141e3ef4ef63985079dabf6b6196b8f7581f2d71338fca5c00e5834bcecb65ee0ad6a20fc61bbdce33a55b3f02d18c37e1c9937106d65d67b6fa25acd - languageName: node - linkType: hard - -"@mui/icons-material@npm:^5.14.14": - version: 5.14.14 - resolution: "@mui/icons-material@npm:5.14.14" - dependencies: - "@babel/runtime": "npm:^7.23.1" - peerDependencies: - "@mui/material": ^5.0.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: a5ea6d8942f25f1389ac8921e9f960fd38e793b9851e8d5bf535a8b342be4c9f081f62390891636570495a0d6f4bd69fc6fea80a0b76efee7ee4b29627af16a4 - languageName: node - linkType: hard - -"@mui/material@npm:^5.14.14": - version: 5.14.14 - resolution: "@mui/material@npm:5.14.14" - dependencies: - "@babel/runtime": "npm:^7.23.1" - "@mui/base": "npm:5.0.0-beta.20" - "@mui/core-downloads-tracker": "npm:^5.14.14" - "@mui/system": "npm:^5.14.14" - "@mui/types": "npm:^7.2.6" - "@mui/utils": "npm:^5.14.13" - "@types/react-transition-group": "npm:^4.4.7" - clsx: "npm:^2.0.0" - csstype: "npm:^3.1.2" - prop-types: "npm:^15.8.1" - react-is: "npm:^18.2.0" - react-transition-group: "npm:^4.4.5" - peerDependencies: - "@emotion/react": ^11.5.0 - "@emotion/styled": ^11.3.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@emotion/react": - optional: true - "@emotion/styled": - optional: true - "@types/react": - optional: true - checksum: 637ad369efb4b5173ca6dc267fb865fe267b9d90c09721ac3084ce5a4b61d1f9ae658b5352b877faff335299f2a7cdbe70155c2870fd50f37209b3a0b0482550 - languageName: node - linkType: hard - -"@mui/private-theming@npm:^5.14.14": - version: 5.14.14 - resolution: "@mui/private-theming@npm:5.14.14" - dependencies: - "@babel/runtime": "npm:^7.23.1" - "@mui/utils": "npm:^5.14.13" - prop-types: "npm:^15.8.1" - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 23fc5a901ea655d60fab30b5c85ea5f8e62e6813f3d89f648f94c8da9437787554adc1a997bf0dc81890a4b706062d43652f9bdbbaddab0c23ef35d6ee07d4e9 - languageName: node - linkType: hard - -"@mui/styled-engine@npm:^5.14.13": - version: 5.14.13 - resolution: "@mui/styled-engine@npm:5.14.13" - dependencies: - "@babel/runtime": "npm:^7.23.1" - "@emotion/cache": "npm:^11.11.0" - csstype: "npm:^3.1.2" - prop-types: "npm:^15.8.1" - peerDependencies: - "@emotion/react": ^11.4.1 - "@emotion/styled": ^11.3.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@emotion/react": - optional: true - "@emotion/styled": - optional: true - checksum: 0ac6efb025d2e2d3d288c83e55dd152c9d42bb3521dc9c225dc78be37228f023853c19558141d650b4104b2099ba31a5680df0fc32ca9b24463c3ab4e4a83ada - languageName: node - linkType: hard - -"@mui/system@npm:^5.14.14": - version: 5.14.14 - resolution: "@mui/system@npm:5.14.14" - dependencies: - "@babel/runtime": "npm:^7.23.1" - "@mui/private-theming": "npm:^5.14.14" - "@mui/styled-engine": "npm:^5.14.13" - "@mui/types": "npm:^7.2.6" - "@mui/utils": "npm:^5.14.13" - clsx: "npm:^2.0.0" - csstype: "npm:^3.1.2" - prop-types: "npm:^15.8.1" - peerDependencies: - "@emotion/react": ^11.5.0 - "@emotion/styled": ^11.3.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@emotion/react": - optional: true - "@emotion/styled": - optional: true - "@types/react": - optional: true - checksum: f748caa2572e86f97950ddd182907c1d434440c17b64aefdde935eeed7cb59dc77b42a1a8ca17e554b74cb6b87422efb2e16101bf4cdac78404c9ba5a2971cbf - languageName: node - linkType: hard - -"@mui/types@npm:^7.2.6": - version: 7.2.6 - resolution: "@mui/types@npm:7.2.6" - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 3701cac48e14150a4dfbf6ebdcd59bf93f3b8c9b7b35aeb81737e6802cb98a41daa374596ba09a66756fc78d838fc5b4f4b748e6d0d35ebdcf86f14da952ef68 - languageName: node - linkType: hard - -"@mui/utils@npm:^5.14.13": - version: 5.14.13 - resolution: "@mui/utils@npm:5.14.13" - dependencies: - "@babel/runtime": "npm:^7.23.1" - "@types/prop-types": "npm:^15.7.7" - prop-types: "npm:^15.8.1" - react-is: "npm:^18.2.0" - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 461dd7f9a3bf9c469aca32ca95b1806cc26cd6a00c90539ebede4555e80a14209f47c7026ddc46712f135ea9139abdf1b5c91d980a463b15f3ac10a1fef85339 - languageName: node - linkType: hard - "@napi-rs/cli@npm:^2.16.3": version: 2.16.3 resolution: "@napi-rs/cli@npm:2.16.3" @@ -13608,7 +13407,7 @@ __metadata: languageName: node linkType: hard -"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.7": +"@types/prop-types@npm:*": version: 15.7.8 resolution: "@types/prop-types@npm:15.7.8" checksum: 61dfad79da8b1081c450bab83b77935df487ae1cdd4660ec7df6be8e74725c15fa45cf486ce057addc956ca4ae78300b97091e2a25061133d1b9a1440bc896ae @@ -13659,15 +13458,6 @@ __metadata: languageName: node linkType: hard -"@types/react-transition-group@npm:^4.4.7": - version: 4.4.7 - resolution: "@types/react-transition-group@npm:4.4.7" - dependencies: - "@types/react": "npm:*" - checksum: 7bbd52516c79d5a0b621366115c161a625293c179c1c44f02301634f3f6aab32c0c484e8f109d0d1e20d158ed471aaaf3140b26c21dc52398c335fc0981027a0 - languageName: node - linkType: hard - "@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.2.28": version: 18.2.28 resolution: "@types/react@npm:18.2.28" @@ -18107,7 +17897,7 @@ __metadata: languageName: node linkType: hard -"csstype@npm:^3.0.10, csstype@npm:^3.0.2, csstype@npm:^3.0.7, csstype@npm:^3.1.1, csstype@npm:^3.1.2": +"csstype@npm:^3.0.10, csstype@npm:^3.0.2, csstype@npm:^3.0.7, csstype@npm:^3.1.1": version: 3.1.2 resolution: "csstype@npm:3.1.2" checksum: 1f39c541e9acd9562996d88bc9fb62d1cb234786ef11ed275567d4b2bd82e1ceacde25debc8de3d3b4871ae02c2933fa02614004c97190711caebad6347debc2 @@ -18893,16 +18683,6 @@ __metadata: languageName: node linkType: hard -"dom-helpers@npm:^5.0.1": - version: 5.2.1 - resolution: "dom-helpers@npm:5.2.1" - dependencies: - "@babel/runtime": "npm:^7.8.7" - csstype: "npm:^3.0.2" - checksum: bed2341adf8864bf932b3289c24f35fdd99930af77df46688abf2d753ff291df49a15850c874d686d9be6ec4e1c6835673906e64dbd8b2839d227f117a11fd41 - languageName: node - linkType: hard - "dom-serializer@npm:0": version: 0.2.2 resolution: "dom-serializer@npm:0.2.2" @@ -29997,7 +29777,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": +"prop-types@npm:^15, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -30712,21 +30492,6 @@ __metadata: languageName: node linkType: hard -"react-transition-group@npm:^4.4.5": - version: 4.4.5 - resolution: "react-transition-group@npm:4.4.5" - dependencies: - "@babel/runtime": "npm:^7.5.5" - dom-helpers: "npm:^5.0.1" - loose-envify: "npm:^1.4.0" - prop-types: "npm:^15.6.2" - peerDependencies: - react: ">=16.6.0" - react-dom: ">=16.6.0" - checksum: ca32d3fd2168c976c5d90a317f25d5f5cd723608b415fb3b9006f9d793c8965c619562d0884503a3e44e4b06efbca4fdd1520f30e58ca3e00a0890e637d55419 - languageName: node - linkType: hard - "react-virtuoso@npm:^4.6.2": version: 4.6.2 resolution: "react-virtuoso@npm:4.6.2"