refactor: split storybook (#2706)

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/*",
@@ -54,38 +49,18 @@
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@blocksuite/blocks": "0.0.0-20230601101714-0d24ba91-nightly",
-    "@blocksuite/editor": "0.0.0-20230601101714-0d24ba91-nightly",
-    "@blocksuite/global": "0.0.0-20230601101714-0d24ba91-nightly",
+    "@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-20230601101714-0d24ba91-nightly",
-    "@blocksuite/store": "0.0.0-20230601101714-0d24ba91-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",
+    "@blocksuite/lit": "0.0.0-20230601122821-16196c35-nightly",
+    "@blocksuite/store": "0.0.0-20230601122821-16196c35-nightly",
     "@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.6.0"

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"
+    }
+  ]
+}