diff --git a/packages/component/.storybook/main.ts b/packages/component/.storybook/main.ts
index 165cf878b1..d2193e8451 100644
--- a/packages/component/.storybook/main.ts
+++ b/packages/component/.storybook/main.ts
@@ -1,19 +1,33 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import { fileURLToPath } from 'node:url';
+import { mergeConfig } from 'vite';
 
 export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../../../apps/web/public'],
   addons: [
     '@storybook/addon-links',
-    'storybook-dark-mode-v7',
+    'storybook-dark-mode',
     '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook/react-vite',
-    options: {
-      builder: {
-        viteConfigPath: '.storybook/vite.config.ts',
+  },
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      define: {
+        'process.env': {},
       },
-    },
+      resolve: {
+        alias: {
+          'next/config': fileURLToPath(
+            new URL(
+              '../../../scripts/vitest/next-config-mock.ts',
+              import.meta.url
+            )
+          ),
+        },
+      },
+    });
   },
 } as StorybookConfig;
diff --git a/packages/component/.storybook/preview.tsx b/packages/component/.storybook/preview.tsx
index a4faddf284..a82ef0ab71 100644
--- a/packages/component/.storybook/preview.tsx
+++ b/packages/component/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import '@blocksuite/editor/themes/affine.css';
 
 import { getDarkTheme, getLightTheme, ThemeProvider } from '@affine/component';
-import { useDarkMode } from 'storybook-dark-mode-v7';
+import { useDarkMode } from 'storybook-dark-mode';
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
diff --git a/packages/component/.storybook/vite.config.ts b/packages/component/.storybook/vite.config.ts
deleted file mode 100644
index beeb26b380..0000000000
--- a/packages/component/.storybook/vite.config.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-import { mergeConfig } from 'vite';
-import { resolve } from 'node:path';
-import { fileURLToPath } from 'url';
-import istanbul from 'vite-plugin-istanbul';
-
-const config: Pick<StorybookConfig, 'viteFinal'> = {
-  async viteFinal(config, { configType }) {
-    return mergeConfig(config, {
-      plugins: [
-        istanbul({
-          include: ['src/*'],
-          exclude: ['node_modules', 'test', 'stories'],
-          extension: ['.ts', '.tsx'],
-          forceBuildInstrument: process.env.COVERAGE === 'true',
-        }),
-      ],
-      resolve: {
-        alias: {
-          '@': resolve(fileURLToPath(new URL('../src', import.meta.url))),
-          '@affine/component': resolve(
-            fileURLToPath(new URL('../src/index.ts', import.meta.url))
-          ),
-          '@affine/i18n': resolve(
-            fileURLToPath(new URL('../../i18n/src', import.meta.url))
-          ),
-        },
-      },
-    });
-  },
-};
-
-export default config;
diff --git a/packages/component/package.json b/packages/component/package.json
index 5619fcf6be..896445a95c 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -52,7 +52,7 @@
     "@vitejs/plugin-react": "^3.1.0",
     "jest-mock": "^29.5.0",
     "storybook": "7.0.0",
-    "storybook-dark-mode-v7": "3.0.0-alpha.0",
+    "storybook-dark-mode": "^3.0.0",
     "typescript": "^5.0.3",
     "vite": "^4.2.1",
     "yjs": "^13.5.51"
diff --git a/yarn.lock b/yarn.lock
index bac34476b0..50bb9a3cd3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -104,7 +104,7 @@ __metadata:
     react-dom: ^18.2.0
     react-is: ^18.2.0
     storybook: 7.0.0
-    storybook-dark-mode-v7: 3.0.0-alpha.0
+    storybook-dark-mode: ^3.0.0
     typescript: ^5.0.3
     vite: ^4.2.1
     yjs: ^13.5.51
@@ -5091,17 +5091,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addons@npm:^7.0.0-beta.60":
-  version: 7.0.0
-  resolution: "@storybook/addons@npm:7.0.0"
+"@storybook/addons@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "@storybook/addons@npm:7.0.2"
   dependencies:
-    "@storybook/manager-api": 7.0.0
-    "@storybook/preview-api": 7.0.0
-    "@storybook/types": 7.0.0
+    "@storybook/manager-api": 7.0.2
+    "@storybook/preview-api": 7.0.2
+    "@storybook/types": 7.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 1fbaaf06bfbdae211fe7c6636948b0740459d21980e950ff08ba2264e4cb01b253a8c0bf7a7e29a6683ff88cdd8a85fad0eb8b76399e9120f0cbd0317d61f68e
+  checksum: be19393df88a2f5754ed19cc2b2eaa7274a2249d0e68cfdf08a71c1628be0a86d9d9c1e0871c0dec9c6b7a11a06aef6464e17218c7d9d310a423280046723bc4
   languageName: node
   linkType: hard
 
@@ -5133,12 +5133,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/api@npm:^7.0.0-beta.60":
-  version: 7.0.0
-  resolution: "@storybook/api@npm:7.0.0"
+"@storybook/api@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "@storybook/api@npm:7.0.2"
   dependencies:
-    "@storybook/client-logger": 7.0.0
-    "@storybook/manager-api": 7.0.0
+    "@storybook/client-logger": 7.0.2
+    "@storybook/manager-api": 7.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5147,7 +5147,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: edfa3b3d2c68601c647e36eadca829f38658194c02a1532d9d51715d97037b958588ada18852d6432a97fcf4797bff19fa7638fb5fe980e8d6398f92e8915650
+  checksum: 32b64d88bb9b69e91c3dfb317dbd4d8e25acebec2a7fea3ff22967be3f070ff8b6832b5471a813410ea315f4844930ca9649dc7b75ffeba4d93a1ef4a0e75908
   languageName: node
   linkType: hard
 
@@ -5265,6 +5265,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channel-postmessage@npm:7.0.2":
+  version: 7.0.2
+  resolution: "@storybook/channel-postmessage@npm:7.0.2"
+  dependencies:
+    "@storybook/channels": 7.0.2
+    "@storybook/client-logger": 7.0.2
+    "@storybook/core-events": 7.0.2
+    "@storybook/global": ^5.0.0
+    qs: ^6.10.0
+    telejson: ^7.0.3
+  checksum: ef175027b4b5794af263c6ec40f6caab02deb3c189598493f5612cd5745d9cada1427914dbf39aef01dbf3e71f4299d35cfcaaaad727c06da47850b56044032c
+  languageName: node
+  linkType: hard
+
 "@storybook/channel-websocket@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/channel-websocket@npm:7.0.0"
@@ -5295,6 +5309,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channels@npm:7.0.2":
+  version: 7.0.2
+  resolution: "@storybook/channels@npm:7.0.2"
+  checksum: 34ff0481a7f8bf613a9b1c9ffc3db4e48e8c80fea29d66b68a9c3b74d52040d87a5ed002d0e3e287813f33ad607440d46078e5e96367bf98713c72efb587d4a3
+  languageName: node
+  linkType: hard
+
 "@storybook/cli@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/cli@npm:7.0.0"
@@ -5363,6 +5384,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:7.0.2":
+  version: 7.0.2
+  resolution: "@storybook/client-logger@npm:7.0.2"
+  dependencies:
+    "@storybook/global": ^5.0.0
+  checksum: 3deb50e8cde7777025753938e21318ee34c10237e29664cfb2dfd08f70d84b073961e1b546629e536ef53f26a91a9aed2c83223d7cfe1680787ecee7e39ce8a8
+  languageName: node
+  linkType: hard
+
 "@storybook/codemod@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/codemod@npm:7.0.0"
@@ -5384,7 +5414,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:7.0.0, @storybook/components@npm:^7.0.0-beta.60":
+"@storybook/components@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/components@npm:7.0.0"
   dependencies:
@@ -5403,6 +5433,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/components@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "@storybook/components@npm:7.0.2"
+  dependencies:
+    "@storybook/client-logger": 7.0.2
+    "@storybook/csf": ^0.1.0
+    "@storybook/global": ^5.0.0
+    "@storybook/theming": 7.0.2
+    "@storybook/types": 7.0.2
+    memoizerific: ^1.11.3
+    use-resize-observer: ^9.1.0
+    util-deprecate: ^1.0.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: e4a787737171bef3561214875d1287c227f77e1b84c2bab364308a1da17265b79081a28585ce419903005bb27ef16a8ed3781cbaa5e735c246c0171e9a28cb64
+  languageName: node
+  linkType: hard
+
 "@storybook/core-client@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/core-client@npm:7.0.0"
@@ -5449,13 +5498,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:7.0.0, @storybook/core-events@npm:^7.0.0-beta.60":
+"@storybook/core-events@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/core-events@npm:7.0.0"
   checksum: fac4dd2aa410696ed3dd4b24a739cb5adc230aa7615b8c3bae7f1ed6b2deb365dcc1c19d54df7eb2f69e467bb7a339c7d0c350e2746afde627dd885e41ca702f
   languageName: node
   linkType: hard
 
+"@storybook/core-events@npm:7.0.2, @storybook/core-events@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "@storybook/core-events@npm:7.0.2"
+  checksum: 5bca4db82f582b939ba1aaba26aee3e8f9aa0a2d36728934b4d26dbe858b6f455a46ddcf4e8e6c7b3f5fa5b517716c503626febca08e53712d516f2ca105bf11
+  languageName: node
+  linkType: hard
+
 "@storybook/core-server@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/core-server@npm:7.0.0"
@@ -5542,6 +5598,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@storybook/csf@npm:0.1.0"
+  dependencies:
+    type-fest: ^2.19.0
+  checksum: f1784f2aff27d5c27ab897878b08e3b04a64e7f62da1ea95fd11bfe9f558300e55f0d483d58282e8254a4b4e8935201178e70c264ccc96104c67403215d651f0
+  languageName: node
+  linkType: hard
+
 "@storybook/csf@npm:next":
   version: 0.0.2-next.11
   resolution: "@storybook/csf@npm:0.0.2-next.11"
@@ -5653,6 +5718,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/manager-api@npm:7.0.2":
+  version: 7.0.2
+  resolution: "@storybook/manager-api@npm:7.0.2"
+  dependencies:
+    "@storybook/channels": 7.0.2
+    "@storybook/client-logger": 7.0.2
+    "@storybook/core-events": 7.0.2
+    "@storybook/csf": ^0.1.0
+    "@storybook/global": ^5.0.0
+    "@storybook/router": 7.0.2
+    "@storybook/theming": 7.0.2
+    "@storybook/types": 7.0.2
+    dequal: ^2.0.2
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    semver: ^7.3.7
+    store2: ^2.14.2
+    telejson: ^7.0.3
+    ts-dedent: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 41a47d74ebd311bd30936b5b94999ee0bab9b3cb52e18ffe990c58801ff960a23bdd285f7dff4a4c712f7c25c35b39ccce34463d7eb176ce136866ec2163aad3
+  languageName: node
+  linkType: hard
+
 "@storybook/manager@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/manager@npm:7.0.0"
@@ -5709,6 +5800,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/preview-api@npm:7.0.2":
+  version: 7.0.2
+  resolution: "@storybook/preview-api@npm:7.0.2"
+  dependencies:
+    "@storybook/channel-postmessage": 7.0.2
+    "@storybook/channels": 7.0.2
+    "@storybook/client-logger": 7.0.2
+    "@storybook/core-events": 7.0.2
+    "@storybook/csf": ^0.1.0
+    "@storybook/global": ^5.0.0
+    "@storybook/types": 7.0.2
+    "@types/qs": ^6.9.5
+    dequal: ^2.0.2
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    qs: ^6.10.0
+    synchronous-promise: ^2.0.15
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  checksum: 350811420c996c9616b59615fe2fe7785ec6590301ed3a6a54b07ca4b2bb45614f47b4cacf037c72ed1d7dd04a8647d0e99a4e2e0f23f91a0dc5d1e8f3486ee2
+  languageName: node
+  linkType: hard
+
 "@storybook/preview@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/preview@npm:7.0.0"
@@ -5811,6 +5925,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/router@npm:7.0.2":
+  version: 7.0.2
+  resolution: "@storybook/router@npm:7.0.2"
+  dependencies:
+    "@storybook/client-logger": 7.0.2
+    memoizerific: ^1.11.3
+    qs: ^6.10.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 7b85aea57258d6642295e7e0e9493ad927bbefb78e483c952172083e595c96fd077d14aaf0cc96e0514955d7d43c3e13b605c03b5b6174ca462ee5a5a975e480
+  languageName: node
+  linkType: hard
+
 "@storybook/semver@npm:^7.3.2":
   version: 7.3.2
   resolution: "@storybook/semver@npm:7.3.2"
@@ -5908,7 +6036,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:7.0.0, @storybook/theming@npm:^7.0.0-beta.60":
+"@storybook/theming@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/theming@npm:7.0.0"
   dependencies:
@@ -5923,6 +6051,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:7.0.2, @storybook/theming@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "@storybook/theming@npm:7.0.2"
+  dependencies:
+    "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
+    "@storybook/client-logger": 7.0.2
+    "@storybook/global": ^5.0.0
+    memoizerific: ^1.11.3
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: bfea46d65ac57ce7cabe77b4b7ab96b41a04a3f8676ac3d70dc7028d1739155e228f48f7845216146ddc017ac609846182a126c2aeea703af8178c931c61888e
+  languageName: node
+  linkType: hard
+
 "@storybook/types@npm:7.0.0":
   version: 7.0.0
   resolution: "@storybook/types@npm:7.0.0"
@@ -5935,6 +6078,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/types@npm:7.0.2":
+  version: 7.0.2
+  resolution: "@storybook/types@npm:7.0.2"
+  dependencies:
+    "@storybook/channels": 7.0.2
+    "@types/babel__core": ^7.0.0
+    "@types/express": ^4.7.0
+    file-system-cache: ^2.0.0
+  checksum: 329e271af5621619a8d17fff222e4170b62ca4b451bcb48b5a899d63bb8df211c5d3d8dafa2266ac3c9801bf64c4ac1aed73950a2f21da82333b19c448ea32e0
+  languageName: node
+  linkType: hard
+
 "@swc-jotai/debug-label@npm:^0.0.9":
   version: 0.0.9
   resolution: "@swc-jotai/debug-label@npm:0.0.9"
@@ -17518,16 +17673,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook-dark-mode-v7@npm:3.0.0-alpha.0":
-  version: 3.0.0-alpha.0
-  resolution: "storybook-dark-mode-v7@npm:3.0.0-alpha.0"
+"storybook-dark-mode@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "storybook-dark-mode@npm:3.0.0"
   dependencies:
-    "@storybook/addons": ^7.0.0-beta.60
-    "@storybook/api": ^7.0.0-beta.60
-    "@storybook/components": ^7.0.0-beta.60
-    "@storybook/core-events": ^7.0.0-beta.60
+    "@storybook/addons": ^7.0.0
+    "@storybook/api": ^7.0.0
+    "@storybook/components": ^7.0.0
+    "@storybook/core-events": ^7.0.0
     "@storybook/global": ^5.0.0
-    "@storybook/theming": ^7.0.0-beta.60
+    "@storybook/theming": ^7.0.0
     fast-deep-equal: ^3.1.3
     memoizerific: ^1.11.3
   peerDependencies:
@@ -17538,7 +17693,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 3ff21eb19f7fd6ad99ddf7fd653c60c699705b728f71ffbccf67a6a68926a4cd923ca3c17dac0d66f22f4448e641180df3a8f25c741a80d5c65b3f4819f85c80
+  checksum: a66b7d52e303cc71ab603e7fb02bab39c56fdffc6428c7977136b53e8da9b47279bee06957f642ac2812a548076ab6a76657cbb3e31a5cee1c782c56810a2e93
   languageName: node
   linkType: hard