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/confirm/Confirm.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { Modal, ModalCloseButton, ModalProps } from '../modal';
+import {
+  StyledButtonWrapper,
+  StyledConfirmContent,
+  StyledConfirmTitle,
+  StyledModalWrapper,
+} from '@/ui/confirm/styles';
+import { Button } from '@/ui/button';
+export type ConfirmProps = {
+  title?: string;
+  content?: string;
+  confirmText?: string;
+  // TODO: Confirm button's color should depend on confirm type
+  confirmType?: 'primary' | 'warning' | 'danger';
+  onConfirm?: () => void;
+  onCancel?: () => void;
+} & Omit<ModalProps, 'open' | 'children'>;
+
+export const Confirm = ({
+  title,
+  content,
+  confirmText,
+  confirmType,
+  onConfirm,
+  onCancel,
+}: ConfirmProps) => {
+  const [open, setOpen] = useState(true);
+  return (
+    <Modal open={open}>
+      <StyledModalWrapper>
+        <ModalCloseButton
+          onClick={() => {
+            setOpen(false);
+            onCancel?.();
+          }}
+        />
+        <StyledConfirmTitle>{title}</StyledConfirmTitle>
+        <StyledConfirmContent>{content}</StyledConfirmContent>
+
+        <StyledButtonWrapper>
+          <Button
+            shape="round"
+            bold={true}
+            onClick={() => {
+              setOpen(false);
+              onCancel?.();
+            }}
+            style={{ marginRight: '24px' }}
+          >
+            Cancel
+          </Button>
+          <Button
+            type={confirmType}
+            shape="round"
+            bold={true}
+            onClick={() => {
+              setOpen(false);
+              onConfirm?.();
+            }}
+          >
+            {confirmText}
+          </Button>
+        </StyledButtonWrapper>
+      </StyledModalWrapper>
+    </Modal>
+  );
+};
+
+export default Confirm;

packages/app/src/ui/confirm/index.ts

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

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

@@ -0,0 +1,34 @@
+import { displayFlex, styled } from '@/styles';
+import { ModalWrapper } from '@/ui/modal';
+
+export const StyledModalWrapper = styled(ModalWrapper)(() => {
+  return {
+    width: '460px',
+    padding: '46px 60px 32px',
+  };
+});
+
+export const StyledConfirmTitle = styled.div(({ theme }) => {
+  return {
+    fontSize: theme.font.h6,
+    fontWeight: 600,
+    textAlign: 'center',
+    color: theme.colors.popoverColor,
+  };
+});
+
+export const StyledConfirmContent = styled.div(({ theme }) => {
+  return {
+    fontSize: theme.font.base,
+    textAlign: 'center',
+    marginTop: '12px',
+    color: theme.colors.textColor,
+  };
+});
+
+export const StyledButtonWrapper = styled.div(() => {
+  return {
+    ...displayFlex('center', 'center'),
+    marginTop: '32px',
+  };
+});