feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

packages/component/src/ui/modal/confirm-modal.tsx

@@ -0,0 +1,72 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button, type ButtonType } from '@toeverything/components/button';
+import { useCallback } from 'react';
+
+import { Modal, type ModalProps } from './modal';
+import { ModalCloseButton } from './modal-close-button';
+import { ModalWrapper } from './modal-wrapper';
+import {
+  StyledModalContent,
+  StyledModalFooter,
+  StyledModalTitle,
+} from './styles';
+
+export interface BaseModalProps
+  extends Omit<ModalProps, 'onClose' | 'children'> {
+  title?: string;
+  content?: string;
+  confirmText?: string;
+  confirmType?: ButtonType;
+  onClose: () => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const ConfirmModal = ({
+  open,
+  onClose,
+  confirmText,
+  confirmType = 'primary',
+  onCancel,
+  onConfirm,
+  title,
+  content,
+}: BaseModalProps) => {
+  const t = useAFFiNEI18N();
+
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      wrapperPosition={['center', 'center']}
+      data-testid="auth-modal"
+    >
+      <ModalWrapper
+        width={480}
+        minHeight={194}
+        style={{
+          overflow: 'hidden',
+          backgroundColor: 'var(--affine-white)',
+          boxShadow: 'var(--affine-popover-shadow)',
+          padding: '20px 24px 0',
+        }}
+      >
+        <ModalCloseButton top={22} right={20} onClick={handleClose} />
+        <StyledModalTitle>{title}</StyledModalTitle>
+        <StyledModalContent>{content}</StyledModalContent>
+        <StyledModalFooter>
+          <Button onClick={onCancel} style={{ marginRight: 20 }}>
+            {t['Cancel']()}
+          </Button>
+          <Button type={confirmType} onClick={onConfirm}>
+            {confirmText || t['Confirm']()}
+          </Button>
+        </StyledModalFooter>
+      </ModalWrapper>
+    </Modal>
+  );
+};

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

@@ -1,5 +1,6 @@
 import Modal from './modal';
 
+export * from './confirm-modal';
 export * from './modal';
 export * from './modal-close-button';
 export * from './modal-wrapper';

packages/component/src/ui/modal/modal-close-button.tsx

@@ -37,5 +37,3 @@ export const ModalCloseButton = ({
     </IconButton>
   );
 };
-
-export default ModalCloseButton;

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

@@ -2,7 +2,6 @@ import { Modal as ModalUnstyled } from '@mui/base/Modal';
 import type { CSSProperties } from 'react';
 
 import { styled } from '../../styles';
-import { Wrapper } from '../layout';
 
 export const StyledBackdrop = styled('div')(() => {
   return {
@@ -42,10 +41,25 @@ export const StyledModal = styled(ModalUnstyled, {
   };
 });
 
-export const StyledWrapper = styled(Wrapper)(() => {
+export const StyledModalFooter = styled('div')(() => {
   return {
-    width: '100vw',
-    height: '100vh',
-    overflow: 'hidden',
+    marginTop: 40,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  };
+});
+
+export const StyledModalTitle = styled('div')(() => {
+  return {
+    fontWeight: 600,
+    fontSize: 'var(--affine-font-h-6)',
+  };
+});
+export const StyledModalContent = styled('div')(() => {
+  return {
+    fontSize: 'var(--affine-font-base)',
+    lineHeight: '24px',
+    marginTop: '12px',
   };
 });