milestone: publish alpha version (#637)

- document folder
- full-text search
- blob storage
- basic edgeless support

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>
Co-authored-by: DiamondThree <diamond.shx@gmail.com>
Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: Himself65 <himself65@outlook.com>
Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>

packages/app/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/app/src/ui/modal/ModalCloseButton.tsx

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

packages/app/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: '12px',
+    position: 'relative',
+  };
+});
+
+export default ModalWrapper;

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

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

packages/app/src/ui/modal/modal.tsx

@@ -1,32 +0,0 @@
-import Fade from '@mui/material/Fade';
-import { StyledModal, StyledBackdrop } from './style';
-import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
-
-const Backdrop = ({
-  open,
-  ...other
-}: {
-  open?: boolean;
-  className: string;
-}) => {
-  return (
-    <Fade in={open}>
-      <StyledBackdrop open={open} {...other} />
-    </Fade>
-  );
-};
-
-export type ModalProps = ModalUnstyledOwnProps;
-
-export const Modal = (props: ModalProps) => {
-  const { components, open, children, ...otherProps } = props;
-  return (
-    <div>
-      <StyledModal {...otherProps} open={open} components={{ Backdrop }}>
-        <Fade in={open}>{children}</Fade>
-      </StyledModal>
-    </div>
-  );
-};
-
-export default Modal;

packages/app/src/ui/modal/style.ts

@@ -1,30 +0,0 @@
-import { displayFlex, fixedCenter, styled } from '@/styles';
-import ModalUnstyled from '@mui/base/ModalUnstyled';
-
-export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
-  return {
-    zIndex: '-1',
-    position: 'fixed',
-    right: '0',
-    bottom: '0',
-    top: '0',
-    left: '0',
-    backgroundColor: 'rgba(58, 76, 92, 0.2)',
-  };
-});
-
-export const StyledModal = styled(ModalUnstyled)(({ theme }) => {
-  return {
-    width: '100vw',
-    height: '100vh',
-    position: 'fixed',
-    left: '0',
-    top: '0',
-    zIndex: theme.zIndex.modal,
-    ...displayFlex('center', 'center'),
-    '*': {
-      WebkitTapHighlightColor: 'transparent',
-      outline: 'none',
-    },
-  };
-});

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

@@ -0,0 +1,47 @@
+import { styled } from '@/styles';
+import ModalUnstyled from '@mui/base/ModalUnstyled';
+import { Wrapper } from '@/ui/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',
+  };
+});