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/components/header/header.tsx

@@ -0,0 +1,71 @@
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
+import {
+  StyledHeader,
+  StyledHeaderRightSide,
+  StyledHeaderContainer,
+  StyledBrowserWarning,
+  StyledCloseButton,
+} from './styles';
+import CloseIcon from '@mui/icons-material/Close';
+import { getWarningMessage, shouldShowWarning } from './utils';
+import EditorOptionMenu from './header-right-items/editor-option-menu';
+import TrashButtonGroup from './header-right-items/trash-button-group';
+import ThemeModeSwitch from './header-right-items/theme-mode-switch';
+// import SyncUser from './header-right-items/sync-user';
+
+const BrowserWarning = ({
+  show,
+  onClose,
+}: {
+  show: boolean;
+  onClose: () => void;
+}) => {
+  return (
+    <StyledBrowserWarning show={show}>
+      {getWarningMessage()}
+      <StyledCloseButton onClick={onClose}>
+        <CloseIcon />
+      </StyledCloseButton>
+    </StyledBrowserWarning>
+  );
+};
+
+type HeaderRightItemNames =
+  | 'editorOptionMenu'
+  | 'trashButtonGroup'
+  | 'themeModeSwitch'
+  | 'syncUser';
+
+const HeaderRightItems: Record<HeaderRightItemNames, ReactNode> = {
+  editorOptionMenu: <EditorOptionMenu key="editorOptionMenu" />,
+  trashButtonGroup: <TrashButtonGroup key="trashButtonGroup" />,
+  themeModeSwitch: <ThemeModeSwitch key="themeModeSwitch" />,
+  syncUser: null,
+};
+
+export const Header = ({
+  rightItems = ['syncUser'],
+  children,
+}: PropsWithChildren<{ rightItems?: HeaderRightItemNames[] }>) => {
+  const [showWarning, setShowWarning] = useState(shouldShowWarning());
+  return (
+    <StyledHeaderContainer hasWarning={showWarning}>
+      <BrowserWarning
+        show={showWarning}
+        onClose={() => {
+          setShowWarning(false);
+        }}
+      />
+      <StyledHeader hasWarning={showWarning} data-testid="editor-header-items">
+        {children}
+        <StyledHeaderRightSide>
+          {rightItems.map(itemName => {
+            return HeaderRightItems[itemName];
+          })}
+        </StyledHeaderRightSide>
+      </StyledHeader>
+    </StyledHeaderContainer>
+  );
+};
+
+export default Header;