revert: use stable react (#3228)

packages/component/package.json

@@ -43,9 +43,9 @@
     "jotai": "^2.2.2",
     "lit": "^2.7.5",
     "lottie-web": "^5.12.2",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
     "react-datepicker": "^4.15.0",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630",
+    "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.10",
     "react-is": "^18.2.0",
     "rxjs": "^7.8.1"

packages/component/src/components/app-sidebar/index.tsx

@@ -9,6 +9,7 @@ import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
 import {
   floatingMaxWidth,
   navBodyStyle,
+  navHeaderStyle,
   navStyle,
   navWidthVar,
   navWrapperStyle,
@@ -28,7 +29,6 @@ import { SidebarHeader } from './sidebar-header';
 export type AppSidebarProps = PropsWithChildren<
   SidebarHeaderProps & {
     hasBackground?: boolean;
-    isFallback?: boolean;
   }
 >;
 
@@ -53,7 +53,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
   const [appSidebarFloating, setAppSidebarFloating] = useAtom(
     appSidebarFloatingAtom
   );
-  const initialRender = open === undefined && !props.isFallback;
+  const initialRender = open === undefined;
 
   const isResizing = useAtomValue(appSidebarResizingAtom);
   const navRef = useRef<HTMLDivElement>(null);
@@ -128,15 +128,29 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
 }
 
 export const AppSidebarFallback = (): ReactElement | null => {
+  const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
   return (
-    <AppSidebar isFallback>
-      <div className={fallbackStyle}>
-        <div className={fallbackHeaderStyle}>
-          <Skeleton variant="circular" width={40} height={40} />
-          <Skeleton variant="rectangular" width={150} height={40} />
+    <div
+      style={assignInlineVars({
+        [navWidthVar]: `${appSidebarWidth}px`,
+      })}
+      className={clsx(navWrapperStyle, {
+        'has-border': true,
+      })}
+      data-open="true"
+    >
+      <nav className={navStyle}>
+        <div className={navHeaderStyle} data-open="true" />
+        <div className={navBodyStyle}>
+          <div className={fallbackStyle}>
+            <div className={fallbackHeaderStyle}>
+              <Skeleton variant="circular" width={40} height={40} />
+              <Skeleton variant="rectangular" width={150} height={40} />
+            </div>
+          </div>
         </div>
-      </div>
-    </AppSidebar>
+      </nav>
+    </div>
   );
 };
 

packages/component/src/components/block-suite-editor/index.tsx

@@ -4,17 +4,10 @@ import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
 import { Skeleton } from '@mui/material';
+import { use } from 'foxact/use';
 import { useAtomValue } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
-import {
-  lazy,
-  memo,
-  Suspense,
-  use,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import { lazy, memo, Suspense, useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';

packages/component/src/components/image-preview-modal/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="react/experimental" />
 import '@blocksuite/blocks';
 
 import { Button, Tooltip } from '@affine/component';

packages/component/src/components/workspace/index.tsx

@@ -1,5 +1,10 @@
 import { clsx } from 'clsx';
-import type { FC, PropsWithChildren, ReactElement } from 'react';
+import type {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
 
 import { AppSidebarFallback } from '../app-sidebar';
 import { appStyle, mainContainerStyle, toolStyle } from './index.css';
@@ -35,7 +40,7 @@ export type MainContainerProps = PropsWithChildren<{
   className?: string;
   padding?: boolean;
 }> &
-  React.HTMLAttributes<HTMLDivElement>;
+  HTMLAttributes<HTMLDivElement>;
 
 export const MainContainer = ({
   className,
@@ -47,7 +52,7 @@ export const MainContainer = ({
     <div
       {...props}
       className={clsx(mainContainerStyle, 'main-container', className)}
-      data-is-macos={environment.isBrowser && environment.isMacOs}
+      data-is-macos={environment.isDesktop && environment.isMacOs}
       data-show-padding={padding}
     >
       {children}

packages/env/package.json

@@ -7,8 +7,8 @@
   "devDependencies": {
     "@blocksuite/global": "0.0.0-20230713131127-200a0dc1-nightly",
     "next": "=13.4.2",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "zod": "^3.21.4"
   },
   "exports": {

packages/i18n/package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "i18next": "^23.2.6",
-    "react-i18next": "^13.0.1"
+    "react-i18next": "^13.0.2"
   },
   "devDependencies": {
     "@types/node": "^18.16.19",

packages/workspace/package.json

@@ -25,8 +25,8 @@
     "js-base64": "^3.7.5",
     "ky": "^0.33.3",
     "lib0": "^0.2.78",
-    "react": "18.3.0-canary-1fdacbefd-20230630",
-    "react-dom": "18.3.0-canary-1fdacbefd-20230630",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.6",
     "zod": "^3.21.4"

packages/workspace/src/atom.ts

@@ -71,27 +71,6 @@ const rootWorkspacesMetadataPromiseAtom = atom<
   if (maybeMetadata !== null) {
     return maybeMetadata;
   }
-  const createFirst = (): RootWorkspaceMetadataV2[] => {
-    if (signal.aborted) {
-      return [];
-    }
-
-    const Plugins = Object.values(WorkspaceAdapters).sort(
-      (a, b) => a.loadPriority - b.loadPriority
-    );
-
-    return Plugins.flatMap(Plugin => {
-      return Plugin.Events['app:init']?.().map(
-        id =>
-          ({
-            id,
-            flavour: Plugin.flavour,
-            // new workspace should all support sub-doc feature
-            version: WorkspaceVersion.SubDoc,
-          }) satisfies RootWorkspaceMetadataV2
-      );
-    }).filter((ids): ids is RootWorkspaceMetadataV2 => !!ids);
-  };
 
   if (environment.isServer) {
     // return a promise in SSR to avoid the hydration mismatch
@@ -159,17 +138,6 @@ const rootWorkspacesMetadataPromiseAtom = atom<
         }
       }
     }
-    // step 3: create initial workspaces
-    {
-      if (
-        metadata.length === 0 &&
-        localStorage.getItem('is-first-open') === null
-      ) {
-        metadata.push(...createFirst());
-        console.info('create first workspace', metadata);
-        localStorage.setItem('is-first-open', 'false');
-      }
-    }
     const metadataMap = new Map(metadata.map(x => [x.id, x]));
     // init workspace data
     metadataMap.forEach((meta, id) => {
@@ -194,9 +162,6 @@ export const rootWorkspacesMetadataAtom = atom<
   Promise<RootWorkspaceMetadata[]>
 >(
   async get => {
-    if (environment.isServer) {
-      return Promise.resolve([]);
-    }
     const maybeMetadata = get(rootWorkspacesMetadataPrimitiveAtom);
     if (maybeMetadata !== null) {
       return maybeMetadata;