feat: add tooltip & popover

packages/app/src/components/popper/PopoverArrow.tsx

@@ -0,0 +1,93 @@
+import { forwardRef } from 'react';
+import { styled } from '@/styles';
+import { PopperArrowProps } from './interface';
+
+// eslint-disable-next-line react/display-name
+export const PopperArrow = forwardRef<HTMLElement, PopperArrowProps>(
+  ({ placement }, ref) => {
+    return <StyledArrow placement={placement} ref={ref} />;
+  }
+);
+
+const getArrowStyle = (placement: PopperArrowProps['placement']) => {
+  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 #98ACBD 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: `#98ACBD 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 #98ACBD`,
+      },
+    };
+  }
+  if (placement.indexOf('right') === 0) {
+    return {
+      left: 0,
+      marginLeft: '-0.9em',
+      height: '3em',
+      width: '1em',
+      '&::before': {
+        borderWidth: '1em 1em 1em 0',
+        borderColor: `transparent #98ACBD 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),
+  };
+});

packages/app/src/components/popper/Popper.tsx

@@ -0,0 +1,190 @@
+import {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import PopperUnstyled from '@mui/base/PopperUnstyled';
+import ClickAwayListener from '@mui/base/ClickAwayListener';
+import Grow from '@mui/material/Grow';
+
+import { styled } from '@/styles';
+
+import { PopperProps, VirtualElement } from './interface';
+import { PopperArrow } from './PopoverArrow';
+export const Popper = ({
+  children,
+  content,
+  anchorEl: propsAnchorEl,
+  placement = 'top-start',
+  defaultVisible = false,
+  visible: propsVisible,
+  trigger = 'hover',
+  pointerEnterDelay = 100,
+  pointerLeaveDelay = 100,
+  onVisibleChange,
+  popoverStyle,
+  popoverClassName,
+  anchorStyle,
+  anchorClassName,
+  zIndex,
+  offset = [0, 5],
+  showArrow = false,
+  popperHandlerRef,
+  onClick,
+  onClickAway,
+  ...popperProps
+}: PopperProps) => {
+  // @ts-ignore
+  const [anchorEl, setAnchorEl] = useState<VirtualElement>(null);
+  const [visible, setVisible] = useState(defaultVisible);
+  // @ts-ignore
+  const [arrowRef, setArrowRef] = useState<HTMLElement>(null);
+  const popperRef = useRef();
+  const pointerLeaveTimer = useRef<number>();
+  const pointerEnterTimer = useRef<number>();
+
+  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 = () => {
+    if (!hasHoverTrigger || visibleControlledByParent) {
+      return;
+    }
+    window.clearTimeout(pointerLeaveTimer.current);
+
+    pointerEnterTimer.current = window.setTimeout(() => {
+      setVisible(true);
+    }, pointerEnterDelay);
+  };
+
+  const onPointerLeaveHandler = () => {
+    if (!hasHoverTrigger || visibleControlledByParent) {
+      return;
+    }
+    window.clearTimeout(pointerEnterTimer.current);
+    pointerLeaveTimer.current = window.setTimeout(() => {
+      setVisible(false);
+    }, pointerLeaveDelay);
+  };
+
+  useEffect(() => {
+    onVisibleChange?.(visible);
+  }, [visible, onVisibleChange]);
+
+  useImperativeHandle(popperHandlerRef, () => {
+    return {
+      setVisible: (visible: boolean) => {
+        !visibleControlledByParent && setVisible(visible);
+      },
+    };
+  });
+
+  // @ts-ignore
+  // @ts-ignore
+  return (
+    <ClickAwayListener
+      onClickAway={() => {
+        if (visibleControlledByParent) {
+          onClickAway?.();
+        } else {
+          setVisible(false);
+        }
+      }}
+    >
+      <Container>
+        {isAnchorCustom ? null : (
+          <div
+            ref={(dom: HTMLDivElement) => setAnchorEl(dom)}
+            onClick={e => {
+              if (!hasClickTrigger || visibleControlledByParent) {
+                onClick?.(e);
+                return;
+              }
+              setVisible(!visible);
+            }}
+            onPointerEnter={onPointerEnterHandler}
+            onPointerLeave={onPointerLeaveHandler}
+            style={anchorStyle}
+            className={anchorClassName}
+          >
+            {children}
+          </div>
+        )}
+        <BasicStyledPopper
+          // @ts-ignore
+          popperRef={popperRef}
+          open={visibleControlledByParent ? propsVisible : visible}
+          zIndex={zIndex}
+          anchorEl={isAnchorCustom ? propsAnchorEl : anchorEl}
+          placement={placement}
+          transition
+          modifiers={[
+            {
+              name: 'offset',
+              options: {
+                offset,
+              },
+            },
+            {
+              name: 'arrow',
+              enabled: showArrow,
+              options: {
+                element: arrowRef,
+              },
+            },
+          ]}
+          {...popperProps}
+        >
+          {({ TransitionProps }) => (
+            <Grow {...TransitionProps}>
+              <div
+                onPointerEnter={onPointerEnterHandler}
+                onPointerLeave={onPointerLeaveHandler}
+                style={popoverStyle}
+                className={popoverClassName}
+              >
+                {showArrow && (
+                  // @ts-ignore
+                  <PopperArrow placement={placement} ref={setArrowRef} />
+                )}
+                {content}
+              </div>
+            </Grow>
+          )}
+        </BasicStyledPopper>
+      </Container>
+    </ClickAwayListener>
+  );
+};
+
+// 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',
+});
+
+const BasicStyledPopper = styled(PopperUnstyled, {
+  shouldForwardProp: (propName: string) =>
+    !['zIndex'].some(name => name === propName),
+})<{
+  zIndex?: number;
+}>(({ zIndex, theme }) => {
+  return {
+    zIndex: zIndex,
+  };
+});

packages/app/src/components/popper/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export * from './Popper';

packages/app/src/components/popper/interface.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+import {
+  type PopperPlacementType,
+  type PopperUnstyledProps,
+} from '@mui/base/PopperUnstyled';
+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?: ReactNode;
+
+  // 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 style
+  anchorStyle?: CSSProperties;
+
+  // Anchor class name
+  anchorClassName?: string;
+
+  // Popover z-index
+  zIndex?: number;
+
+  offset?: [number, number];
+
+  showArrow?: boolean;
+
+  popperHandlerRef?: Ref<PopperHandler>;
+
+  onClickAway?: () => void;
+} & Omit<PopperUnstyledProps, 'open' | 'ref'>;

packages/app/src/components/tooltip/Container.tsx

@@ -0,0 +1,36 @@
+import { styled } from '@/styles';
+import type { ReactNode, CSSProperties } from 'react';
+import type { PopoverDirection } from './interface';
+export interface PopoverContainerProps {
+  children?: ReactNode;
+  /**
+   * The pop-up window points to. The pop-up window has three rounded corners, one is a right angle, and the right angle is the direction of the pop-up window.
+   */
+  direction: PopoverDirection;
+  style?: CSSProperties;
+}
+const border_radius_map: Record<PopoverContainerProps['direction'], string> = {
+  none: '10px',
+  'left-top': '0 10px 10px 10px',
+  'left-bottom': '10px 10px 10px 0',
+  'right-top': '10px 0 10px 10px',
+  'right-bottom': '10px 10px 0 10px',
+};
+
+export const PopoverContainer = styled('div')<
+  Pick<PopoverContainerProps, 'direction'>
+>(({ theme, direction, style }) => {
+  return '';
+  // const shadow = theme.affine.shadows.shadow1;
+  // const white = theme.affine.palette.white;
+  //
+  // const borderRadius =
+  //   border_radius_map[direction] || border_radius_map['left-top'];
+  // return {
+  //   boxShadow: shadow,
+  //   borderRadius: borderRadius,
+  //   padding: '8px 4px',
+  //   backgroundColor: white,
+  //   ...style,
+  // };
+});

packages/app/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,62 @@
+import { type CSSProperties, type PropsWithChildren } from 'react';
+import { PopoverContainer } from './Container';
+import { Popper, type PopperProps } from '../popper';
+import { useTheme } from '@/styles';
+import type { PopperPlacementType, TooltipProps } from '@mui/material';
+import type { PopoverDirection } from './interface';
+export const placementToContainerDirection: Record<
+  PopperPlacementType,
+  PopoverDirection
+> = {
+  top: 'none',
+  'top-start': 'left-bottom',
+  'top-end': 'right-bottom',
+  right: 'none',
+  'right-start': 'left-top',
+  'right-end': 'left-bottom',
+  bottom: 'none',
+  'bottom-start': 'left-top',
+  'bottom-end': 'right-top',
+  left: 'none',
+  'left-start': 'right-top',
+  'left-end': 'right-bottom',
+  auto: 'none',
+  'auto-start': 'none',
+  'auto-end': 'none',
+};
+
+const useTooltipStyle = (): CSSProperties => {
+  const theme = useTheme();
+  return {};
+  // return {
+  //     backgroundColor: theme.affine.palette.icons,
+  //     color: theme.affine.palette.white,
+  //     ...theme.affine.typography.tooltip,
+  //     padding: '4px 8px',
+  // };
+};
+
+export const Tooltip = (
+  props: PropsWithChildren<PopperProps & Omit<TooltipProps, 'title'>>
+) => {
+  const { content, placement = 'top-start' } = props;
+  const style = useTooltipStyle();
+  // If there is no content, hide forever
+  const visibleProp = content ? {} : { visible: false };
+  return (
+    <Popper
+      {...visibleProp}
+      placement="top"
+      {...props}
+      showArrow={false}
+      content={
+        <PopoverContainer
+          style={style}
+          direction={placementToContainerDirection[placement]}
+        >
+          {content}
+        </PopoverContainer>
+      }
+    />
+  );
+};

packages/app/src/components/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from './Tooltip';

packages/app/src/components/tooltip/interface.ts

@@ -0,0 +1,9 @@
+export type TooltipProps = {
+  showArrow?: boolean;
+};
+export type PopoverDirection =
+  | 'none'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-bottom';