init: the first public commit for AFFiNE

libs/components/ui/src/popover/Popover.tsx

@@ -0,0 +1,52 @@
+import type { MuiPopperPlacementType as PopperPlacementType } from '../mui';
+import React, { forwardRef, type PropsWithChildren } from 'react';
+import { type PopperHandler, Popper } from '../popper';
+import { PopoverContainer } from './container';
+import type { PopoverProps, PopoverDirection } from './interface';
+
+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',
+};
+
+export const Popover = forwardRef<
+    PopperHandler,
+    PropsWithChildren<PopoverProps>
+>((props, ref) => {
+    const { popoverDirection, placement, content, children, style } = props;
+    return (
+        <Popper
+            {...props}
+            ref={ref}
+            content={
+                <PopoverContainer
+                    style={style}
+                    direction={
+                        popoverDirection ||
+                        placementToContainerDirection[placement]
+                    }
+                >
+                    {content}
+                </PopoverContainer>
+            }
+        >
+            {children}
+        </Popper>
+    );
+});

libs/components/ui/src/popover/container.tsx

@@ -0,0 +1,27 @@
+import { styled } from '../styled';
+import { PopoverContainerProps } from './interface';
+
+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 }) => {
+    const shadow = theme.affine.shadows.shadowSxDownLg;
+    const white = theme.affine.palette.white;
+
+    const border_radius =
+        border_radius_map[direction] || border_radius_map['left-top'];
+    return {
+        boxShadow: shadow,
+        borderRadius: border_radius,
+        padding: '8px 4px',
+        backgroundColor: white,
+        ...style,
+    };
+});

libs/components/ui/src/popover/index.tsx

@@ -0,0 +1,3 @@
+export * from './Popover';
+export * from './interface';
+export { PopoverContainer } from './container';

libs/components/ui/src/popover/interface.ts

@@ -0,0 +1,23 @@
+import type { ReactNode, CSSProperties } from 'react';
+import { PopperProps } from '../popper';
+
+export type PopoverDirection =
+    | 'none'
+    | 'left-top'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right-bottom';
+
+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;
+}
+export type PopoverProps = {
+    // Popover border-radius style will auto set by placement, popoverDirection can custom set it
+    popoverDirection?: PopoverDirection;
+    style?: CSSProperties;
+} & PopperProps;