refactor: split storybook (#2706)

.github/workflows/build.yml

@@ -56,7 +56,7 @@ jobs:
         uses: actions/upload-artifact@v3
         with:
           name: storybook
-          path: ./packages/component/storybook-static
+          path: ./packages/storybook/storybook-static
           if-no-files-found: error
 
   build:
@@ -195,19 +195,11 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: storybook
-          path: ./packages/component/storybook-static
+          path: ./packages/storybook/storybook-static
       - name: Run storybook tests
-        working-directory: ./packages/component
+        working-directory: ./packages/storybook
         run: |
-          yarn exec concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn exec serve ./storybook-static -l 6006" "yarn exec wait-on tcp:6006 && yarn test-storybook --coverage"
-      - name: Upload storybook test coverage results
-        uses: codecov/codecov-action@v3
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./packages/component/coverage/storybook/coverage-storybook.json
-          flags: storybook-test
-          name: affine
-          fail_ci_if_error: true
+          yarn exec concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn exec serve ./storybook-static -l 6006" "yarn exec wait-on tcp:6006 && yarn test-storybook"
 
   e2e-test:
     name: E2E Test
@@ -244,7 +236,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: storybook
-          path: ./packages/component/storybook-static
+          path: ./packages/storybook/storybook-static
 
       - name: Wait for Octobase Ready
         run: |

docs/contributing/tutorial.md

@@ -70,10 +70,10 @@ yarn dev
 
 See [building desktop client app](../building-desktop-client-app.md).
 
-### `@affine/component` Storybook
+### `@affine/storybook`
 
 ```shell
-yarn workspace @affine/component storybook
+yarn workspace @affine/storybook storybook
 ```
 
 ## What's next?

package.json

@@ -18,13 +18,13 @@
     "dev:electron": "yarn workspace @affine/electron dev:app",
     "dev:plugins": "./apps/electron/scripts/plugins/dev-plugins.mjs",
     "build": "yarn workspace @affine/web build",
-    "build:storybook": "yarn workspace @affine/component build-storybook",
+    "build:storybook": "yarn workspace @affine/storybook build-storybook",
     "build:plugins": "./apps/electron/scripts/plugins/build-plugins.mjs",
     "bump:nightly": "./scripts/bump-blocksuite.sh",
     "circular": "madge --circular --ts-config ./tsconfig.json ./apps/web/src/pages/**/*.tsx",
     "export": "yarn workspace @affine/web export",
     "start": "yarn workspace @affine/web start",
-    "start:storybook": "yarn exec serve packages/component/storybook-static -l 6006",
+    "start:storybook": "yarn exec serve packages/storybook/storybook-static -l 6006",
     "serve:test-static": "yarn exec serve tests/fixtures --cors -p 8081",
     "start:e2e": "yar dlx run-p start start:storybook",
     "lint": "eslint . --ext .js,mjs,.ts,.tsx --cache",

packages/component/package.json

@@ -2,11 +2,6 @@
   "name": "@affine/component",
   "private": true,
   "main": "./src/index.ts",
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "NODE_OPTIONS=--max_old_space_size=4096 storybook build",
-    "test-storybook": "test-storybook"
-  },
   "exports": {
     ".": "./src/index.ts",
     "./theme/*": "./src/theme/*",
@@ -60,32 +55,12 @@
     "@blocksuite/icons": "^2.1.19",
     "@blocksuite/lit": "0.0.0-20230601122821-16196c35-nightly",
     "@blocksuite/store": "0.0.0-20230601122821-16196c35-nightly",
-    "@storybook/addon-actions": "^7.0.18",
-    "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/addon-storysource": "^7.0.18",
-    "@storybook/blocks": "^7.0.18",
-    "@storybook/builder-vite": "^7.0.18",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-vite": "^7.0.18",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
     "@types/react": "^18.2.6",
     "@types/react-dnd": "^3.0.2",
     "@types/react-dom": "18.2.4",
     "@vanilla-extract/css": "^1.11.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "concurrently": "^8.1.0",
-    "jest-mock": "^29.5.0",
-    "serve": "^14.2.0",
-    "storybook": "^7.0.18",
-    "storybook-dark-mode": "^3.0.0",
     "typescript": "^5.0.4",
     "vite": "^4.3.9",
-    "wait-on": "^7.0.1",
     "yjs": "^13.6.1"
   },
   "version": "0.7.0-canary.8"

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

@@ -131,7 +131,9 @@ export const AppSidebarFallback = (): ReactElement | null => {
 export * from './add-page-button';
 export * from './app-updater-button';
 export * from './category-divider';
+export * from './index.css';
 export * from './menu-item';
 export * from './quick-search-input';
 export * from './sidebar-containers';
+export * from './sidebar-header';
 export { appSidebarFloatingAtom, appSidebarOpenAtom, appSidebarResizingAtom };

packages/component/src/components/notification-center/index.tsx

@@ -26,8 +26,11 @@ import {
   removeNotificationAtom,
 } from './index.jotai';
 
-// only expose necessary function atom to avoid misuse
-export { pushNotificationAtom, removeNotificationAtom };
+export {
+  expandNotificationCenterAtom,
+  pushNotificationAtom,
+  removeNotificationAtom,
+};
 type Height = {
   height: number;
   notificationKey: number | string;

packages/component/src/ui/button/button.tsx

@@ -4,6 +4,9 @@ import type { ButtonProps } from './interface';
 import { Loading } from './loading';
 import { StyledButton } from './styles';
 import { getSize } from './utils';
+
+export type { ButtonProps };
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {

packages/component/src/ui/button/index.ts

@@ -1,4 +1,5 @@
 export * from './button';
+export * from './dropdown';
 export * from './icon-button';
 export * from './radio';
 export * from './text-button';

packages/component/tsconfig.json

@@ -30,9 +30,6 @@
     {
       "path": "../../apps/electron"
     },
-    {
-      "path": "./tsconfig.node.json"
-    },
     { "path": "./tsconfig.workspace.json" },
     { "path": "../../tests/fixtures" }
   ]

packages/storybook/.storybook/main.ts

@@ -26,7 +26,6 @@ export default {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
-    '@storybook/addon-coverage',
     'storybook-dark-mode',
   ],
   framework: {

packages/storybook/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@affine/storybook",
+  "private": true,
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "NODE_OPTIONS=--max_old_space_size=4096 storybook build",
+    "test-storybook": "test-storybook"
+  },
+  "dependencies": {
+    "@affine/component": "workspace:*",
+    "@affine/i18n": "workspace:*",
+    "@storybook/addon-actions": "^7.0.18",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-storysource": "^7.0.18",
+    "@storybook/blocks": "^7.0.18",
+    "@storybook/builder-vite": "^7.0.18",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-vite": "^7.0.18",
+    "@storybook/test-runner": "^0.10.0",
+    "@storybook/testing-library": "^0.1.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "concurrently": "^8.1.0",
+    "jest-mock": "^29.5.0",
+    "serve": "^14.2.0",
+    "storybook": "^7.0.18",
+    "storybook-dark-mode": "^3.0.0",
+    "wait-on": "^7.0.1"
+  },
+  "devDependencies": {
+    "@blocksuite/blocks": "0.0.0-20230601122821-16196c35-nightly",
+    "@blocksuite/editor": "0.0.0-20230601122821-16196c35-nightly",
+    "@blocksuite/global": "0.0.0-20230601122821-16196c35-nightly",
+    "@blocksuite/icons": "^2.1.19",
+    "@blocksuite/lit": "0.0.0-20230601122821-16196c35-nightly",
+    "@blocksuite/store": "0.0.0-20230601122821-16196c35-nightly",
+    "react": "18.3.0-canary-16d053d59-20230506",
+    "react-dom": "18.3.0-canary-16d053d59-20230506"
+  },
+  "peerDependencies": {
+    "@blocksuite/blocks": "*",
+    "@blocksuite/editor": "*",
+    "@blocksuite/global": "*",
+    "@blocksuite/icons": "*",
+    "@blocksuite/lit": "*",
+    "@blocksuite/store": "*"
+  }
+}

packages/storybook/src/stories/affine-banner.stories.tsx

@@ -1,8 +1,7 @@
+import { BrowserWarning, DownloadTips } from '@affine/component/affine-banner';
 import type { StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
-import { BrowserWarning, DownloadTips } from '../components/affine-banner';
-
 export default {
   title: 'AFFiNE/Banner',
   component: BrowserWarning,

packages/storybook/src/stories/affine-loading.stories.tsx

@@ -1,7 +1,6 @@
+import { AffineLoading } from '@affine/component/affine-loading';
 import type { StoryFn } from '@storybook/react';
 
-import { AffineLoading } from '../components/affine-loading';
-
 export default {
   title: 'AFFiNE/Loading',
   component: AffineLoading,

packages/storybook/src/stories/app-sidebar.stories.tsx

@@ -1,3 +1,21 @@
+import { IconButton } from '@affine/component';
+import {
+  AppSidebar,
+  AppSidebarFallback,
+  appSidebarOpenAtom,
+} from '@affine/component/app-sidebar';
+import { AddPageButton } from '@affine/component/app-sidebar';
+import { CategoryDivider } from '@affine/component/app-sidebar';
+import {
+  navHeaderStyle,
+  sidebarButtonStyle,
+} from '@affine/component/app-sidebar';
+import { MenuLinkItem } from '@affine/component/app-sidebar';
+import { QuickSearchInput } from '@affine/component/app-sidebar';
+import {
+  SidebarContainer,
+  SidebarScrollableContainer,
+} from '@affine/component/app-sidebar';
 import {
   DeleteTemporarilyIcon,
   SettingsIcon,
@@ -7,18 +25,6 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { useAtom } from 'jotai';
 import { type PropsWithChildren, useState } from 'react';
 
-import { IconButton } from '../..';
-import { AppSidebar, AppSidebarFallback, appSidebarOpenAtom } from '.';
-import { AddPageButton } from './add-page-button';
-import { CategoryDivider } from './category-divider';
-import { navHeaderStyle, sidebarButtonStyle } from './index.css';
-import { MenuLinkItem } from './menu-item';
-import { QuickSearchInput } from './quick-search-input';
-import {
-  SidebarContainer,
-  SidebarScrollableContainer,
-} from './sidebar-containers';
-
 export default {
   title: 'Components/AppSidebar',
   component: AppSidebar,

packages/storybook/src/stories/block-suite-editor.stories.tsx

@@ -1,4 +1,6 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import type { EditorProps } from '@affine/component/block-suite-editor';
+import { BlockSuiteEditor } from '@affine/component/block-suite-editor';
 import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
@@ -7,9 +9,6 @@ import { expect } from '@storybook/jest';
 import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
-import type { EditorProps } from '.';
-import { BlockSuiteEditor } from '.';
-
 const blockSuiteWorkspace = new Workspace({
   id: 'test',
   blobStorages: [createMemoryStorage],

packages/storybook/src/stories/breadcrumbs.stories.tsx

@@ -1,11 +1,9 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import { Breadcrumbs } from '@affine/component';
 import { Link, Typography } from '@mui/material';
 import { expect } from '@storybook/jest';
 import type { Meta, StoryFn } from '@storybook/react';
 import { within } from '@storybook/testing-library';
-
-import { Breadcrumbs } from '..';
-
 export default {
   title: 'AFFiNE/Breadcrumbs',
   component: Breadcrumbs,

packages/storybook/src/stories/button.stories.tsx

@@ -1,14 +1,13 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import type { ButtonProps } from '@affine/component';
+import { Button } from '@affine/component';
+import { DropdownButton } from '@affine/component';
+import { RadioButton, RadioButtonGroup } from '@affine/component';
+import { Menu } from '@affine/component';
+import { toast } from '@affine/component';
 import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
-import { Button } from '../ui/button/button';
-import { DropdownButton } from '../ui/button/dropdown';
-import type { ButtonProps } from '../ui/button/interface';
-import { RadioButton, RadioButtonGroup } from '../ui/button/radio';
-import { Menu } from '../ui/menu/menu';
-import { toast } from '../ui/toast/toast';
-
 export default {
   title: 'AFFiNE/Button',
   component: Button,

packages/storybook/src/stories/card.stories.tsx

@@ -1,11 +1,10 @@
+import { toast } from '@affine/component';
+import { BlockCard } from '@affine/component/card/block-card';
+import { WorkspaceCard } from '@affine/component/card/workspace-card';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { Workspace } from '@blocksuite/store';
 
-import { BlockCard } from '../components/card/block-card';
-import { WorkspaceCard } from '../components/card/workspace-card';
-import { toast } from '../ui/toast';
-
 export default {
   title: 'AFFiNE/Card',
   component: WorkspaceCard,

packages/storybook/src/stories/change-log.stories.tsx

@@ -1,9 +1,8 @@
+import { ChangeLog } from '@affine/component/changeLog';
 import type { StoryFn } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 import { useState } from 'react';
 
-import { ChangeLog } from '../components/changeLog';
-
 export default {
   title: 'AFFiNE/ChangeLog',
   component: ChangeLog,

packages/storybook/src/stories/contact-modal.stories.tsx

@@ -1,10 +1,9 @@
+import { Button } from '@affine/component';
+import type { ContactModalProps } from '@affine/component/contact-modal';
+import { ContactModal } from '@affine/component/contact-modal';
 import type { StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
-import type { ContactModalProps } from '../components/contact-modal';
-import { ContactModal } from '../components/contact-modal';
-import { Button } from '../ui/button';
-
 export default {
   title: 'AFFiNE/ContactModal',
   component: ContactModal,

packages/storybook/src/stories/image-preview-modal.stories.tsx

@@ -1,11 +1,10 @@
+import { BlockSuiteEditor } from '@affine/component/block-suite-editor';
+import { ImagePreviewModal } from '@affine/component/image-preview-modal';
 import { initPage } from '@affine/env/blocksuite';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import type { Meta } from '@storybook/react';
 
-import { BlockSuiteEditor } from '../block-suite-editor';
-import { ImagePreviewModal } from '.';
-
 export default {
   title: 'Component/ImagePreviewModal',
   component: ImagePreviewModal,

packages/storybook/src/stories/notification-center.stories.tsx

@@ -1,9 +1,11 @@
+import {
+  expandNotificationCenterAtom,
+  NotificationCenter,
+  pushNotificationAtom,
+} from '@affine/component/notification-center';
 import type { Meta } from '@storybook/react';
 import { useAtomValue, useSetAtom } from 'jotai';
 
-import { NotificationCenter, pushNotificationAtom } from '.';
-import { expandNotificationCenterAtom } from './index.jotai';
-
 export default {
   title: 'AFFiNE/NotificationCenter',
   component: NotificationCenter,

packages/storybook/src/stories/onboarding-modal.stories.tsx

@@ -1,8 +1,7 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import { TourModal } from '@affine/component/tour-modal';
 import type { StoryFn } from '@storybook/react';
 
-import { TourModal } from '../components/tour-modal';
-
 export default {
   title: 'AFFiNE/TourModal',
   component: TourModal,

packages/storybook/src/stories/page-detail-skeleton.stories.tsx

@@ -1,7 +1,6 @@
+import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import type { Meta } from '@storybook/react';
 
-import { PageDetailSkeleton } from '.';
-
 export default {
   title: 'AFFiNE/PageDetailSkeleton',
   component: PageDetailSkeleton,

packages/storybook/src/stories/page-list.stories.tsx

@@ -1,17 +1,16 @@
+import { Empty } from '@affine/component';
+import { toast } from '@affine/component';
+import { AffineLoading } from '@affine/component/affine-loading';
+import { PageListTrashView } from '@affine/component/page-list/all-page';
+import { PageList } from '@affine/component/page-list/all-page';
+import { NewPageButton } from '@affine/component/page-list/components/new-page-buttton';
+import type { OperationCellProps } from '@affine/component/page-list/operation-cell';
+import { OperationCell } from '@affine/component/page-list/operation-cell';
 import { PageIcon } from '@blocksuite/icons';
 import { expect } from '@storybook/jest';
 import type { StoryFn } from '@storybook/react';
 import { userEvent } from '@storybook/testing-library';
 
-import { AffineLoading } from '../components/affine-loading';
-import { PageListTrashView } from '../components/page-list/all-page';
-import { PageList } from '../components/page-list/all-page';
-import { NewPageButton } from '../components/page-list/components/new-page-buttton';
-import type { OperationCellProps } from '../components/page-list/operation-cell';
-import { OperationCell } from '../components/page-list/operation-cell';
-import Empty from '../ui/empty/empty';
-import { toast } from '../ui/toast';
-
 export default {
   title: 'AFFiNE/PageList',
   component: AffineLoading,

packages/storybook/src/stories/share-menu.stories.tsx

@@ -1,3 +1,7 @@
+import { toast } from '@affine/component';
+import { PublicLinkDisableModal } from '@affine/component/share-menu/disable-public-link';
+import { ShareMenu } from '@affine/component/share-menu/share-menu';
+import { StyledDisableButton } from '@affine/component/share-menu/styles';
 import { PermissionType, WorkspaceType } from '@affine/workspace/affine/api';
 import type {
   AffineLegacyCloudWorkspace,
@@ -10,11 +14,6 @@ import { expect } from '@storybook/jest';
 import type { StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
-import { PublicLinkDisableModal } from '../components/share-menu/disable-public-link';
-import { ShareMenu } from '../components/share-menu/share-menu';
-import { StyledDisableButton } from '../components/share-menu/styles';
-import toast from '../ui/toast/toast';
-
 export default {
   title: 'AFFiNE/ShareMenu',
   component: ShareMenu,

packages/storybook/src/stories/switch.stories.tsx

@@ -1,8 +1,7 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
+import { Switch } from '@affine/component';
 import type { StoryFn } from '@storybook/react';
 
-import { Switch } from '..';
-
 export default {
   title: 'AFFiNE/Switch',
   component: Switch,

packages/storybook/src/stories/workspace-avatar.stories.tsx

@@ -1,10 +1,9 @@
+import type { WorkspaceAvatarProps } from '@affine/component/workspace-avatar';
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { Workspace } from '@blocksuite/store';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import type { WorkspaceAvatarProps } from '../components/workspace-avatar';
-import { WorkspaceAvatar } from '../components/workspace-avatar';
-
 export default {
   title: 'AFFiNE/WorkspaceAvatar',
   component: WorkspaceAvatar,

packages/storybook/src/stories/workspace-list.stories.tsx

@@ -1,12 +1,11 @@
+import type { WorkspaceListProps } from '@affine/component/workspace-list';
+import { WorkspaceList } from '@affine/component/workspace-list';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import { arrayMove } from '@dnd-kit/sortable';
 import type { Meta } from '@storybook/react';
 import { useState } from 'react';
 
-import type { WorkspaceListProps } from './index';
-import { WorkspaceList } from './index';
-
 export default {
   title: 'AFFiNE/WorkspaceList',
   component: WorkspaceList,

packages/storybook/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["lib"],
+  "include": ["src"],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": false,
+    "outDir": "lib"
+  },
+  "references": [
+    {
+      "path": "../component"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

yarn.lock

@@ -84,19 +84,6 @@ __metadata:
     "@radix-ui/react-collapsible": ^1.0.3
     "@radix-ui/react-radio-group": ^1.1.3
     "@radix-ui/react-toast": ^1.1.4
-    "@storybook/addon-actions": ^7.0.18
-    "@storybook/addon-coverage": ^0.0.8
-    "@storybook/addon-essentials": ^7.0.18
-    "@storybook/addon-interactions": ^7.0.18
-    "@storybook/addon-links": ^7.0.18
-    "@storybook/addon-storysource": ^7.0.18
-    "@storybook/blocks": ^7.0.18
-    "@storybook/builder-vite": ^7.0.18
-    "@storybook/jest": ^0.1.0
-    "@storybook/react": ^7.0.18
-    "@storybook/react-vite": ^7.0.18
-    "@storybook/test-runner": ^0.10.0
-    "@storybook/testing-library": ^0.1.0
     "@toeverything/hooks": "workspace:*"
     "@toeverything/theme": ^0.6.1
     "@types/react": ^18.2.6
@@ -104,11 +91,8 @@ __metadata:
     "@types/react-dom": 18.2.4
     "@vanilla-extract/css": ^1.11.0
     "@vanilla-extract/dynamic": ^2.0.3
-    "@vitejs/plugin-react": ^4.0.0
     clsx: ^1.2.1
-    concurrently: ^8.1.0
     dayjs: ^1.11.8
-    jest-mock: ^29.5.0
     jotai: ^2.1.1
     lit: ^2.7.5
     lottie-web: ^5.12.0
@@ -117,12 +101,8 @@ __metadata:
     react-error-boundary: ^4.0.9
     react-is: ^18.2.0
     rxjs: ^7.8.1
-    serve: ^14.2.0
-    storybook: ^7.0.18
-    storybook-dark-mode: ^3.0.0
     typescript: ^5.0.4
     vite: ^4.3.9
-    wait-on: ^7.0.1
     yjs: ^13.6.1
   peerDependencies:
     "@blocksuite/blocks": "*"
@@ -325,6 +305,49 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@affine/storybook@workspace:packages/storybook":
+  version: 0.0.0-use.local
+  resolution: "@affine/storybook@workspace:packages/storybook"
+  dependencies:
+    "@affine/component": "workspace:*"
+    "@affine/i18n": "workspace:*"
+    "@blocksuite/blocks": 0.0.0-20230601122821-16196c35-nightly
+    "@blocksuite/editor": 0.0.0-20230601122821-16196c35-nightly
+    "@blocksuite/global": 0.0.0-20230601122821-16196c35-nightly
+    "@blocksuite/icons": ^2.1.19
+    "@blocksuite/lit": 0.0.0-20230601122821-16196c35-nightly
+    "@blocksuite/store": 0.0.0-20230601122821-16196c35-nightly
+    "@storybook/addon-actions": ^7.0.18
+    "@storybook/addon-essentials": ^7.0.18
+    "@storybook/addon-interactions": ^7.0.18
+    "@storybook/addon-links": ^7.0.18
+    "@storybook/addon-storysource": ^7.0.18
+    "@storybook/blocks": ^7.0.18
+    "@storybook/builder-vite": ^7.0.18
+    "@storybook/jest": ^0.1.0
+    "@storybook/react": ^7.0.18
+    "@storybook/react-vite": ^7.0.18
+    "@storybook/test-runner": ^0.10.0
+    "@storybook/testing-library": ^0.1.0
+    "@vitejs/plugin-react": ^4.0.0
+    concurrently: ^8.1.0
+    jest-mock: ^29.5.0
+    react: 18.3.0-canary-16d053d59-20230506
+    react-dom: 18.3.0-canary-16d053d59-20230506
+    serve: ^14.2.0
+    storybook: ^7.0.18
+    storybook-dark-mode: ^3.0.0
+    wait-on: ^7.0.1
+  peerDependencies:
+    "@blocksuite/blocks": "*"
+    "@blocksuite/editor": "*"
+    "@blocksuite/global": "*"
+    "@blocksuite/icons": "*"
+    "@blocksuite/lit": "*"
+    "@blocksuite/store": "*"
+  languageName: unknown
+  linkType: soft
+
 "@affine/templates@workspace:*, @affine/templates@workspace:packages/templates":
   version: 0.0.0-use.local
   resolution: "@affine/templates@workspace:packages/templates"
@@ -7926,18 +7949,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-coverage@npm:^0.0.8":
-  version: 0.0.8
-  resolution: "@storybook/addon-coverage@npm:0.0.8"
-  dependencies:
-    "@types/babel__core": ^7.1.19
-    "@types/istanbul-lib-coverage": ^2.0.4
-    babel-plugin-istanbul: ^6.1.1
-    vite-plugin-istanbul: ^3.0.1
-  checksum: 8cf18a291699df1b630f77698abfd4d370dabfba55ae186e522b76b9bc76ce6a866cdd5d0e8c044dda135dd2873651d3ab9d2ddc93903222bdabf236ef64645e
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-docs@npm:7.0.18":
   version: 7.0.18
   resolution: "@storybook/addon-docs@npm:7.0.18"
@@ -9182,7 +9193,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.19":
+"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14":
   version: 7.20.1
   resolution: "@types/babel__core@npm:7.20.1"
   dependencies:
@@ -9464,7 +9475,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1, @types/istanbul-lib-coverage@npm:^2.0.4":
+"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
   checksum: a25d7589ee65c94d31464c16b72a9dc81dfa0bea9d3e105ae03882d616e2a0712a9c101a599ec482d297c3591e16336962878cb3eb1a0a62d5b76d277a890ce7
@@ -27018,18 +27029,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-istanbul@npm:^3.0.1":
-  version: 3.0.4
-  resolution: "vite-plugin-istanbul@npm:3.0.4"
-  dependencies:
-    "@istanbuljs/load-nyc-config": ^1.1.0
-    istanbul-lib-instrument: ^5.1.0
-    picocolors: ^1.0.0
-    test-exclude: ^6.0.0
-  checksum: 74fa99e2e2bded28ff6ba47bddf3cdd2eae04d37f2b6d257dcf5571c75f3433c6495fe94bba1f12acd0fc6046a6e83ea618b0547726ba68190bf292c7cb34695
-  languageName: node
-  linkType: hard
-
 "vite-plugin-istanbul@npm:^4.1.0":
   version: 4.1.0
   resolution: "vite-plugin-istanbul@npm:4.1.0"