refactor: move component into a single package (#898)

packages/component/src/ui/modal/Modal.tsx

@@ -0,0 +1,52 @@
+import Fade from '@mui/material/Fade';
+import { StyledModal, StyledBackdrop } from './styles';
+import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
+
+const Backdrop = ({
+  open,
+  ...other
+}: {
+  open?: boolean;
+  className: string;
+}) => {
+  return (
+    <Fade in={open}>
+      <StyledBackdrop {...other} />
+    </Fade>
+  );
+};
+
+export type ModalProps = {
+  wrapperPosition?: ['top' | 'bottom' | 'center', 'left' | 'right' | 'center'];
+} & ModalUnstyledOwnProps;
+
+const transformConfig = {
+  top: 'flex-start',
+  bottom: 'flex-end',
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end',
+};
+
+export const Modal = (props: ModalProps) => {
+  const {
+    wrapperPosition = ['center', 'center'],
+    open,
+    children,
+    ...otherProps
+  } = props;
+  const [vertical, horizontal] = wrapperPosition;
+  return (
+    <StyledModal
+      {...otherProps}
+      open={open}
+      components={{ Backdrop }}
+      alignItems={transformConfig[vertical]}
+      justifyContent={transformConfig[horizontal]}
+    >
+      <Fade in={open}>{children}</Fade>
+    </StyledModal>
+  );
+};
+
+export default Modal;

packages/component/src/ui/modal/ModalCloseButton.tsx

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+import { CloseIcon } from '@blocksuite/icons';
+import { IconButton, IconButtonProps } from '../button/IconButton';
+import { styled } from '../../styles';
+export type ModalCloseButtonProps = {
+  top?: number;
+  right?: number;
+  absolute?: boolean;
+} & Omit<IconButtonProps, 'children'> &
+  HTMLAttributes<HTMLButtonElement>;
+
+const StyledIconButton = styled(IconButton)<
+  Pick<ModalCloseButtonProps, 'top' | 'right'>
+>(({ top, right }) => {
+  return {
+    position: 'absolute',
+    top: top ?? 24,
+    right: right ?? 40,
+  };
+});
+
+export const ModalCloseButton = ({
+  absolute = true,
+  ...props
+}: ModalCloseButtonProps) => {
+  return absolute ? (
+    <StyledIconButton {...props}>
+      <CloseIcon />
+    </StyledIconButton>
+  ) : (
+    <IconButton {...props}>
+      <CloseIcon />
+    </IconButton>
+  );
+};
+
+export default ModalCloseButton;

packages/component/src/ui/modal/ModalWrapper.tsx

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { styled } from '../../styles';
+
+export const ModalWrapper = styled.div<{
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+  minHeight?: CSSProperties['minHeight'];
+}>(({ theme, width, height, minHeight }) => {
+  return {
+    width,
+    height,
+    minHeight,
+    backgroundColor: theme.colors.popoverBackground,
+    borderRadius: '24px',
+    position: 'relative',
+  };
+});
+
+export default ModalWrapper;

packages/component/src/ui/modal/index.tsx

@@ -0,0 +1,7 @@
+import Modal from './Modal';
+
+export * from './ModalCloseButton';
+export * from './ModalWrapper';
+export * from './Modal';
+
+export default Modal;

packages/component/src/ui/modal/styles.ts

@@ -0,0 +1,47 @@
+import { styled } from '../../styles';
+import ModalUnstyled from '@mui/base/ModalUnstyled';
+import { Wrapper } from '../layout';
+import { CSSProperties } from 'react';
+
+export const StyledBackdrop = styled.div({
+  zIndex: '-1',
+  position: 'fixed',
+  right: '0',
+  bottom: '0',
+  top: '0',
+  left: '0',
+  backgroundColor: 'rgba(58, 76, 92, 0.2)',
+});
+
+export const StyledModal = styled(ModalUnstyled, {
+  shouldForwardProp: prop => {
+    return !['justifyContent', 'alignItems'].includes(prop);
+  },
+})<{
+  alignItems: CSSProperties['alignItems'];
+  justifyContent: CSSProperties['justifyContent'];
+}>(({ theme, alignItems, justifyContent }) => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    display: 'flex',
+    alignItems,
+    justifyContent,
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    zIndex: theme.zIndex.modal,
+    '*': {
+      WebkitTapHighlightColor: 'transparent',
+      outline: 'none',
+    },
+  };
+});
+
+export const StyledWrapper = styled(Wrapper)(() => {
+  return {
+    width: '100vw',
+    height: '100vh',
+    overflow: 'hidden',
+  };
+});