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/providers/app-state-provider/context.ts

@@ -0,0 +1,67 @@
+import { createContext, MutableRefObject, useContext } from 'react';
+import type { Workspace } from '@affine/data-services';
+import { AccessTokenMessage } from '@affine/data-services';
+import type {
+  Page as StorePage,
+  Workspace as StoreWorkspace,
+} from '@blocksuite/store';
+import type { EditorContainer } from '@blocksuite/editor';
+export type LoadWorkspaceHandler = (
+  workspaceId: string,
+  websocket?: boolean,
+  user?: AccessTokenMessage | null
+) => Promise<StoreWorkspace | null> | null;
+export type CreateEditorHandler = (page: StorePage) => EditorContainer | null;
+
+export interface AppStateValue {
+  user: AccessTokenMessage | null;
+  workspacesMeta: Workspace[];
+
+  currentWorkspaceId: string;
+  currentWorkspace: StoreWorkspace | null;
+
+  currentPage: StorePage | null;
+
+  workspaces: Record<string, StoreWorkspace | null>;
+
+  editor: EditorContainer | null;
+  synced: boolean;
+  refreshWorkspacesMeta: () => void;
+}
+
+export interface AppStateContext extends AppStateValue {
+  setState: (state: AppStateValue) => void;
+  createEditor?: MutableRefObject<
+    ((page: StorePage) => EditorContainer | null) | undefined
+  >;
+  setEditor?: MutableRefObject<((page: EditorContainer) => void) | undefined>;
+  loadWorkspace: (workspaceId: string) => Promise<StoreWorkspace | null>;
+  loadPage: (pageId: string) => Promise<StorePage | null>;
+}
+
+export const AppState = createContext<AppStateContext>({
+  user: null,
+  workspacesMeta: [],
+
+  currentWorkspaceId: '',
+  currentWorkspace: null,
+
+  currentPage: null,
+
+  editor: null,
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setState: () => {},
+  createEditor: undefined,
+  setEditor: undefined,
+  loadWorkspace: () => Promise.resolve(null),
+  loadPage: () => Promise.resolve(null),
+  synced: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  refreshWorkspacesMeta: () => {},
+  workspaces: {},
+});
+
+export const useAppState = () => {
+  return useContext(AppState);
+};

packages/app/src/providers/app-state-provider/dynamic-blocksuite.tsx

@@ -0,0 +1,99 @@
+import { useEffect } from 'react';
+import type { Page } from '@blocksuite/store';
+import {
+  IndexedDBDocProvider,
+  Workspace as StoreWorkspace,
+} from '@blocksuite/store';
+import '@blocksuite/blocks';
+import { EditorContainer } from '@blocksuite/editor';
+import { BlockSchema } from '@blocksuite/blocks/models';
+import type { LoadWorkspaceHandler, CreateEditorHandler } from './context';
+
+interface Props {
+  setLoadWorkspaceHandler: (handler: LoadWorkspaceHandler) => void;
+  setCreateEditorHandler: (handler: CreateEditorHandler) => void;
+}
+
+const DynamicBlocksuite = ({
+  setLoadWorkspaceHandler,
+  setCreateEditorHandler,
+}: Props) => {
+  useEffect(() => {
+    const openWorkspace: LoadWorkspaceHandler = (
+      workspaceId: string,
+      websocket = false,
+      user
+    ) =>
+      // eslint-disable-next-line no-async-promise-executor
+      new Promise(async resolve => {
+        const workspace = new StoreWorkspace({
+          room: workspaceId,
+          providers: [IndexedDBDocProvider],
+        }).register(BlockSchema);
+        console.log('websocket', websocket);
+        console.log('user', user);
+
+        // if (websocket && token.refresh) {
+        //   // FIXME: if add websocket provider, the first page will be blank
+        //   const ws = new WebsocketProvider(
+        //     `ws${window.location.protocol === 'https:' ? 's' : ''}://${
+        //       window.location.host
+        //     }/api/sync/`,
+        //     workspaceId,
+        //     workspace.doc,
+        //     {
+        //       params: {
+        //         token: token.refresh,
+        //       },
+        //       awareness: workspace.meta.awareness.awareness,
+        //     }
+        //   );
+        //
+        //   ws.shouldConnect = false;
+        //
+        //   // FIXME: there needs some method to destroy websocket.
+        //   // Or we need a manager to manage websocket.
+        //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //   // @ts-expect-error
+        //   workspace.__ws__ = ws;
+        // }
+
+        const indexDBProvider = workspace.providers.find(
+          p => p instanceof IndexedDBDocProvider
+        );
+        // if (user) {
+        //   const updates = await downloadWorkspace({ workspaceId });
+        //   updates &&
+        //     StoreWorkspace.Y.applyUpdate(
+        //       workspace.doc,
+        //       new Uint8Array(updates)
+        //     );
+        //   // if after update, the space:meta is empty, then we need to get map with doc
+        //   workspace.doc.getMap('space:meta');
+        // }
+        if (indexDBProvider) {
+          (indexDBProvider as IndexedDBDocProvider).whenSynced.then(() => {
+            resolve(workspace);
+          });
+        } else {
+          resolve(workspace);
+        }
+      });
+
+    setLoadWorkspaceHandler(openWorkspace);
+  }, [setLoadWorkspaceHandler]);
+
+  useEffect(() => {
+    const createEditorHandler: CreateEditorHandler = (page: Page) => {
+      const editor = new EditorContainer();
+      editor.page = page;
+      return editor;
+    };
+
+    setCreateEditorHandler(createEditorHandler);
+  }, [setCreateEditorHandler]);
+
+  return <></>;
+};
+
+export default DynamicBlocksuite;

packages/app/src/providers/app-state-provider/hooks.ts

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { useAppState } from './context';
+import { usePageHelper } from '@/hooks/use-page-helper';
+export const useLoadWorkspace = () => {
+  const router = useRouter();
+  const { loadWorkspace, currentWorkspace, currentWorkspaceId } = useAppState();
+
+  const workspaceId = router.query.workspaceId as string;
+
+  useEffect(() => {
+    loadWorkspace?.(workspaceId);
+  }, [workspaceId, loadWorkspace]);
+
+  return currentWorkspaceId === workspaceId ? currentWorkspace : null;
+};
+
+export const useLoadPage = () => {
+  const router = useRouter();
+  const { loadPage, currentPage, currentWorkspaceId } = useAppState();
+  const { createPage } = usePageHelper();
+  const workspace = useLoadWorkspace();
+
+  const pageId = router.query.pageId as string;
+
+  useEffect(() => {
+    if (!workspace) {
+      return;
+    }
+    const page = pageId ? workspace?.getPage(pageId) : null;
+    if (page) {
+      loadPage?.(pageId);
+      return;
+    }
+
+    const savedPageId = workspace.meta.pageMetas[0]?.id;
+    if (savedPageId) {
+      router.push(`/workspace/${currentWorkspaceId}/${savedPageId}`);
+      return;
+    }
+
+    createPage().then(async pageId => {
+      if (!pageId) {
+        return;
+      }
+      router.push(`/workspace/${currentWorkspaceId}/${pageId}`);
+    });
+  }, [workspace, pageId, loadPage, createPage, router, currentWorkspaceId]);
+
+  return currentPage?.id === pageId ? currentPage : null;
+};

packages/app/src/providers/app-state-provider/hooks/use-sync-data.ts

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import {
+  AccessTokenMessage,
+  getWorkspaces,
+  token,
+} from '@affine/data-services';
+import { LoadWorkspaceHandler } from '../context';
+
+export const useSyncData = ({
+  loadWorkspaceHandler,
+}: {
+  loadWorkspaceHandler: LoadWorkspaceHandler;
+}) => {
+  useEffect(() => {
+    if (!loadWorkspaceHandler) {
+      return;
+    }
+    const start = async () => {
+      const isLogin = await token.refreshToken().catch(() => false);
+      return isLogin;
+    };
+    start();
+
+    const callback = async (user: AccessTokenMessage | null) => {
+      const workspacesMeta = user
+        ? await getWorkspaces().catch(() => {
+            return [];
+          })
+        : [];
+      // setState(state => ({
+      //   ...state,
+      //   user: user,
+      //   workspacesMeta,
+      //   synced: true,
+      // }));
+      return workspacesMeta;
+    };
+
+    token.onChange(callback);
+    token.refreshToken().catch(err => {
+      // FIXME: should resolve invalid refresh token
+      console.log(err);
+    });
+    return () => {
+      token.offChange(callback);
+    };
+  }, [loadWorkspaceHandler]);
+};

packages/app/src/providers/app-state-provider/index.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './interface';

packages/app/src/providers/app-state-provider/interface.ts

@@ -0,0 +1,17 @@
+import { PageMeta as OriginalPageMeta } from '@blocksuite/store/dist/workspace/workspace';
+
+// export type PageMeta = {
+//   favorite: boolean;
+//   trash: boolean;
+//   trashDate: number | void;
+//   updatedDate: number | void;
+//   mode: EditorContainer['mode'];
+// } & OriginalPageMeta;
+
+export interface PageMeta extends OriginalPageMeta {
+  favorite: boolean;
+  trash: boolean;
+  trashDate: number;
+  updatedDate: number;
+  mode: 'edgeless' | 'page';
+}

packages/app/src/providers/app-state-provider/provider.tsx

@@ -0,0 +1,181 @@
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import type { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+import { getWorkspaces } from '@affine/data-services';
+import { AppState, AppStateContext } from './context';
+import type {
+  AppStateValue,
+  CreateEditorHandler,
+  LoadWorkspaceHandler,
+} from './context';
+import { Page, Workspace as StoreWorkspace } from '@blocksuite/store';
+import { EditorContainer } from '@blocksuite/editor';
+const DynamicBlocksuite = dynamic(() => import('./dynamic-blocksuite'), {
+  ssr: false,
+});
+
+export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
+  const refreshWorkspacesMeta = async () => {
+    const workspacesMeta = await getWorkspaces().catch(() => {
+      return [];
+    });
+    setState(state => ({ ...state, workspacesMeta }));
+  };
+
+  const [state, setState] = useState<AppStateValue>({
+    user: null,
+    workspacesMeta: [],
+    currentWorkspaceId: '',
+    currentWorkspace: null,
+    currentPage: null,
+    editor: null,
+    // Synced is used to ensure that the provider has synced with the server,
+    // So after Synced set to true, the other state is sure to be set.
+    synced: false,
+    refreshWorkspacesMeta,
+    workspaces: {},
+  });
+
+  useEffect(() => {
+    (async () => {
+      const workspacesList = await Promise.all(
+        state.workspacesMeta.map(async ({ id }) => {
+          const workspace =
+            (await loadWorkspaceHandler?.(id, false, state.user)) || null;
+          return { id, workspace };
+        })
+      );
+      const workspaces: Record<string, StoreWorkspace | null> = {};
+      workspacesList.forEach(({ id, workspace }) => {
+        workspaces[id] = workspace;
+      });
+      setState(state => ({
+        ...state,
+        workspaces,
+      }));
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.workspacesMeta]);
+
+  const [loadWorkspaceHandler, _setLoadWorkspaceHandler] =
+    useState<LoadWorkspaceHandler>();
+  const setLoadWorkspaceHandler = useCallback(
+    (handler: LoadWorkspaceHandler) => {
+      _setLoadWorkspaceHandler(() => handler);
+    },
+    [_setLoadWorkspaceHandler]
+  );
+
+  const [createEditorHandler, _setCreateEditorHandler] =
+    useState<CreateEditorHandler>();
+
+  const setCreateEditorHandler = useCallback(
+    (handler: CreateEditorHandler) => {
+      _setCreateEditorHandler(() => handler);
+    },
+    [_setCreateEditorHandler]
+  );
+
+  const loadWorkspace = useRef<AppStateContext['loadWorkspace']>(() =>
+    Promise.resolve(null)
+  );
+  loadWorkspace.current = async (workspaceId: string) => {
+    if (state.currentWorkspaceId === workspaceId) {
+      return state.currentWorkspace;
+    }
+    const workspace =
+      (await loadWorkspaceHandler?.(workspaceId, true, state.user)) || null;
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    window.workspace = workspace;
+    // FIXME: there needs some method to destroy websocket.
+    // Or we need a manager to manage websocket.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    state.currentWorkspace?.__ws__?.destroy();
+
+    setState(state => ({
+      ...state,
+      currentWorkspace: workspace,
+      currentWorkspaceId: workspaceId,
+    }));
+    return workspace;
+  };
+  const loadPage = useRef<AppStateContext['loadPage']>(() =>
+    Promise.resolve(null)
+  );
+  loadPage.current = async (pageId: string) => {
+    const { currentWorkspace, currentPage } = state;
+    if (pageId === currentPage?.id) {
+      return currentPage;
+    }
+    const page = (pageId ? currentWorkspace?.getPage(pageId) : null) || null;
+    setState(state => ({ ...state, currentPage: page }));
+    return page;
+  };
+
+  const createEditor = useRef<
+    ((page: Page) => EditorContainer | null) | undefined
+  >();
+  createEditor.current = () => {
+    const { currentPage, currentWorkspace } = state;
+    if (!currentPage || !currentWorkspace) {
+      return null;
+    }
+    const editor = createEditorHandler?.(currentPage) || null;
+
+    if (editor) {
+      const pageMeta = currentWorkspace.meta.pageMetas.find(
+        p => p.id === currentPage.id
+      );
+      if (pageMeta?.mode) {
+        editor.mode = pageMeta.mode as 'page' | 'edgeless' | undefined;
+      }
+      if (pageMeta?.trash) {
+        editor.readonly = true;
+      }
+    }
+
+    return editor;
+  };
+
+  const setEditor = useRef<(editor: AppStateValue['editor']) => void>();
+
+  setEditor.current = (editor: AppStateValue['editor']) => {
+    setState(state => ({ ...state, editor }));
+  };
+
+  useEffect(() => {
+    if (!loadWorkspaceHandler) {
+      return;
+    }
+    setState(state => ({
+      ...state,
+      workspacesMeta: [],
+      synced: true,
+    }));
+  }, [loadWorkspaceHandler]);
+
+  const context = useMemo(
+    () => ({
+      ...state,
+      setState,
+      createEditor,
+      setEditor,
+      loadWorkspace: loadWorkspace.current,
+      loadPage: loadPage.current,
+    }),
+    [state, setState, loadPage, loadWorkspace]
+  );
+
+  return (
+    <AppState.Provider value={context}>
+      <DynamicBlocksuite
+        setLoadWorkspaceHandler={setLoadWorkspaceHandler}
+        setCreateEditorHandler={setCreateEditorHandler}
+      />
+      {children}
+    </AppState.Provider>
+  );
+};

packages/app/src/providers/confirm-provider.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, useState, ReactNode } from 'react';
+import type { PropsWithChildren } from 'react';
+import { Confirm, ConfirmProps } from '@/ui/confirm';
+
+type ConfirmContextValue = {
+  confirm: (props: ConfirmProps) => Promise<boolean>;
+};
+type ConfirmContextProps = PropsWithChildren<Record<string, unknown>>;
+
+export const ConfirmContext = createContext<ConfirmContextValue>({
+  confirm: () => Promise.resolve(false),
+});
+
+export const useConfirm = () => useContext(ConfirmContext);
+
+export const ConfirmProvider = ({
+  children,
+}: PropsWithChildren<ConfirmContextProps>) => {
+  const [confirmRecord, setConfirmRecord] = useState<Record<string, ReactNode>>(
+    {}
+  );
+  return (
+    <ConfirmContext.Provider
+      value={{
+        confirm: ({ onCancel, onConfirm, ...props }: ConfirmProps) => {
+          return new Promise(resolve => {
+            const confirmId = String(Date.now());
+            const closeHandler = () => {
+              delete confirmRecord[confirmId];
+              setConfirmRecord({ ...confirmRecord });
+            };
+            setConfirmRecord(oldConfirmRecord => {
+              return {
+                ...oldConfirmRecord,
+                [confirmId]: (
+                  <Confirm
+                    {...props}
+                    onCancel={() => {
+                      closeHandler();
+                      onCancel?.();
+                      resolve(false);
+                    }}
+                    onConfirm={() => {
+                      closeHandler();
+                      onConfirm?.();
+                      resolve(true);
+                    }}
+                  />
+                ),
+              };
+            });
+          });
+        },
+      }}
+    >
+      {children}
+      {Object.entries(confirmRecord).map(([confirmId, confirmNode]) => {
+        return <div key={confirmId}>{confirmNode}</div>;
+      })}
+    </ConfirmContext.Provider>
+  );
+};
+
+export default ConfirmProvider;

packages/app/src/providers/global-modal-provider.tsx

@@ -0,0 +1,123 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import type { PropsWithChildren } from 'react';
+import ShortcutsModal from '@/components/shortcuts-modal';
+import ContactModal from '@/components/contact-modal';
+import QuickSearch from '@/components/quick-search';
+import { ImportModal } from '@/components/import';
+import { LoginModal } from '@/components/login-modal';
+
+type ModalContextValue = {
+  triggerShortcutsModal: () => void;
+  triggerContactModal: () => void;
+  triggerQuickSearchModal: (visible?: boolean) => void;
+  triggerImportModal: () => void;
+  triggerLoginModal: () => void;
+};
+type ModalContextProps = PropsWithChildren<Record<string, unknown>>;
+type ModalMap = {
+  contact: boolean;
+  shortcuts: boolean;
+  quickSearch: boolean;
+  import: boolean;
+  login: boolean;
+};
+
+export const ModalContext = createContext<ModalContextValue>({
+  triggerShortcutsModal: () => {},
+  triggerContactModal: () => {},
+  triggerQuickSearchModal: () => {},
+  triggerImportModal: () => {},
+  triggerLoginModal: () => {},
+});
+
+export const useModal = () => useContext(ModalContext);
+
+export const ModalProvider = ({
+  children,
+}: PropsWithChildren<ModalContextProps>) => {
+  const [modalMap, setModalMap] = useState<ModalMap>({
+    contact: false,
+    shortcuts: false,
+    quickSearch: false,
+    import: false,
+    login: false,
+  });
+
+  const triggerHandler = useCallback(
+    (key: keyof ModalMap, visible?: boolean) => {
+      setModalMap({
+        ...modalMap,
+        [key]: visible ?? !modalMap[key],
+      });
+    },
+    [modalMap]
+  );
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.triggerHandler = () => triggerHandler('login');
+  }, [triggerHandler]);
+
+  return (
+    <ModalContext.Provider
+      value={{
+        triggerShortcutsModal: () => {
+          triggerHandler('shortcuts');
+        },
+        triggerContactModal: () => {
+          triggerHandler('contact');
+        },
+        triggerQuickSearchModal: (visible?) => {
+          triggerHandler('quickSearch', visible);
+        },
+        triggerImportModal: () => {
+          triggerHandler('import');
+        },
+        triggerLoginModal: () => {
+          triggerHandler('login');
+        },
+      }}
+    >
+      <ContactModal
+        open={modalMap.contact}
+        onClose={() => {
+          triggerHandler('contact', false);
+        }}
+      ></ContactModal>
+      <ShortcutsModal
+        open={modalMap.shortcuts}
+        onClose={() => {
+          triggerHandler('shortcuts', false);
+        }}
+      ></ShortcutsModal>
+      <QuickSearch
+        open={modalMap.quickSearch}
+        onClose={() => {
+          triggerHandler('quickSearch', false);
+        }}
+      ></QuickSearch>
+      <ImportModal
+        open={modalMap.import}
+        onClose={() => {
+          triggerHandler('import', false);
+        }}
+      ></ImportModal>
+      <LoginModal
+        open={modalMap.login}
+        onClose={() => {
+          triggerHandler('login', false);
+        }}
+      />
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+export default ModalProvider;

packages/app/src/providers/themeProvider.tsx

@@ -0,0 +1,117 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import {
+  ThemeProvider as EmotionThemeProvider,
+  Global,
+  css,
+} from '@emotion/react';
+import {
+  ThemeProvider as MuiThemeProvider,
+  createTheme as MuiCreateTheme,
+} from '@mui/material/styles';
+import type { PropsWithChildren } from 'react';
+import {
+  Theme,
+  ThemeMode,
+  ThemeProviderProps,
+  ThemeProviderValue,
+} from '@/styles/types';
+import {
+  getLightTheme,
+  getDarkTheme,
+  globalThemeVariables,
+} from '@/styles/theme';
+import { SystemThemeHelper, localStorageThemeHelper } from '@/styles/utils';
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
+
+export const ThemeContext = createContext<ThemeProviderValue>({
+  mode: 'light',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  changeMode: () => {},
+  theme: getLightTheme('page'),
+});
+
+export const useTheme = () => useContext(ThemeContext);
+const muiTheme = MuiCreateTheme();
+
+export const ThemeProvider = ({
+  defaultTheme = 'light',
+  children,
+}: PropsWithChildren<ThemeProviderProps>) => {
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
+  const [mode, setMode] = useState<ThemeMode>('auto');
+  const { mode: editorMode = 'page' } = useCurrentPageMeta() || {};
+  const themeStyle =
+    theme === 'light' ? getLightTheme(editorMode) : getDarkTheme(editorMode);
+  const changeMode = (themeMode: ThemeMode) => {
+    themeMode !== mode && setMode(themeMode);
+    // Remember the theme mode which user selected for next time
+    localStorageThemeHelper.set(themeMode);
+  };
+
+  // ===================== A temporary solution, just use system theme and not remember the user selected ====================
+  useEffect(() => {
+    const systemThemeHelper = new SystemThemeHelper();
+    const systemTheme = systemThemeHelper.get();
+    setMode(systemTheme);
+
+    systemThemeHelper.onChange(() => {
+      setMode(systemThemeHelper.get());
+    });
+  }, []);
+
+  useEffect(() => {
+    setTheme(mode === 'auto' ? theme : mode);
+  }, [mode, setTheme, theme]);
+  // =====================  ====================
+
+  // useEffect(() => {
+  //   setMode(localStorageThemeHelper.get() || 'auto');
+  // }, []);
+  //
+  // useEffect(() => {
+  //   const systemThemeHelper = new SystemThemeHelper();
+  //   const selectedThemeMode = localStorageThemeHelper.get();
+  //
+  //   const themeMode = selectedThemeMode || mode;
+  //   if (themeMode === 'auto') {
+  //     setTheme(systemThemeHelper.get());
+  //   } else {
+  //     setTheme(themeMode);
+  //   }
+  //
+  //   // When system theme changed, change the theme mode
+  //   systemThemeHelper.onChange(() => {
+  //     // TODO: There may be should be provided a way to let user choose whether to
+  //     if (mode === 'auto') {
+  //       setTheme(systemThemeHelper.get());
+  //     }
+  //   });
+  //
+  //   return () => {
+  //     systemThemeHelper.dispose();
+  //   };
+  // }, [mode]);
+
+  return (
+    // Use MuiThemeProvider is just because some Transitions in Mui components need it
+    <MuiThemeProvider theme={muiTheme}>
+      <ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}>
+        <Global
+          styles={css`
+            :root {
+              ${
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                globalThemeVariables(mode, themeStyle) as any
+              }
+            }
+          `}
+        />
+        <EmotionThemeProvider theme={themeStyle}>
+          {children}
+        </EmotionThemeProvider>
+      </ThemeContext.Provider>
+    </MuiThemeProvider>
+  );
+};
+
+export default ThemeProvider;