refactor(core): remove all MUI related components and utilities (#4941)

packages/frontend/component/src/ui/menu/index.ts

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

packages/frontend/component/src/ui/menu/menu-item.tsx

@@ -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<HTMLButtonElement>;
-
-export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
-  ({ endIcon, icon, children, gap, fontSize, iconSize, ...props }, ref) => {
-    return (
-      <StyledMenuItem ref={ref} {...props}>
-        {icon && (
-          <StyledStartIconWrapper iconSize={iconSize} gap={gap}>
-            {icon}
-          </StyledStartIconWrapper>
-        )}
-        <StyledContent fontSize={fontSize}>{children}</StyledContent>
-        {endIcon && (
-          <StyledEndIconWrapper iconSize={iconSize} gap={gap}>
-            {endIcon}
-          </StyledEndIconWrapper>
-        )}
-      </StyledMenuItem>
-    );
-  }
-);
-MenuItem.displayName = 'MenuItem';
-export default MenuItem;

packages/frontend/component/src/ui/menu/pure-menu.tsx

@@ -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 (
-    <PurePopper placement={placement} {...otherProps}>
-      <StyledMenuWrapper width={width} placement={placement}>
-        {children}
-      </StyledMenuWrapper>
-    </PurePopper>
-  );
-};

packages/frontend/component/src/ui/menu/styles.ts

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