From c4c4ec6a677287703faa7bd5014e472094e56cab Mon Sep 17 00:00:00 2001 From: Himself65 Date: Wed, 7 Jun 2023 16:55:06 +0800 Subject: [PATCH] refactor: split storybook (#2706) --- .github/workflows/build.yml | 18 +--- docs/contributing/tutorial.md | 4 +- package.json | 4 +- packages/component/package.json | 25 ----- .../src/components/app-sidebar/index.tsx | 2 + .../components/notification-center/index.tsx | 7 +- packages/component/src/ui/button/button.tsx | 3 + packages/component/src/ui/button/index.ts | 1 + packages/component/tsconfig.json | 3 - .../.storybook/main.ts | 1 - .../.storybook/preview-head.html | 0 .../.storybook/preview.tsx | 0 packages/storybook/package.json | 50 ++++++++++ .../src/stories/affine-banner.stories.tsx | 3 +- .../src/stories/affine-loading.stories.tsx | 3 +- .../src/stories/app-sidebar.stories.tsx} | 30 +++--- .../stories/block-suite-editor.stories.tsx} | 5 +- .../src/stories/breadcrumbs.stories.tsx | 4 +- .../src/stories/button.stories.tsx | 13 ++- .../src/stories/card.stories.tsx | 7 +- .../src/stories/change-log.stories.tsx | 3 +- .../src/stories/contact-modal.stories.tsx | 7 +- .../stories/image-preview-modal.stories.tsx} | 5 +- .../src/stories/introduction.stories.mdx | 0 .../stories/notification-center.stories.tsx} | 8 +- .../src/stories/onboarding-modal.stories.tsx | 3 +- .../stories/page-detail-skeleton.stories.tsx} | 3 +- .../src/stories/page-list.stories.tsx | 17 ++-- .../src/stories/share-menu.stories.tsx | 9 +- .../src/stories/switch.stories.tsx | 3 +- .../src/stories/workspace-avatar.stories.tsx | 5 +- .../src/stories/workspace-list.stories.tsx} | 5 +- packages/storybook/tsconfig.json | 18 ++++ .../tsconfig.node.json | 0 yarn.lock | 91 +++++++++---------- 35 files changed, 195 insertions(+), 165 deletions(-) rename packages/{component => storybook}/.storybook/main.ts (98%) rename packages/{component => storybook}/.storybook/preview-head.html (100%) rename packages/{component => storybook}/.storybook/preview.tsx (100%) create mode 100644 packages/storybook/package.json rename packages/{component => storybook}/src/stories/affine-banner.stories.tsx (89%) rename packages/{component => storybook}/src/stories/affine-loading.stories.tsx (87%) rename packages/{component/src/components/app-sidebar/index.stories.tsx => storybook/src/stories/app-sidebar.stories.tsx} (86%) rename packages/{component/src/components/block-suite-editor/index.stories.tsx => storybook/src/stories/block-suite-editor.stories.tsx} (95%) rename packages/{component => storybook}/src/stories/breadcrumbs.stories.tsx (95%) rename packages/{component => storybook}/src/stories/button.stories.tsx (91%) rename packages/{component => storybook}/src/stories/card.stories.tsx (88%) rename packages/{component => storybook}/src/stories/change-log.stories.tsx (94%) rename packages/{component => storybook}/src/stories/contact-modal.stories.tsx (76%) rename packages/{component/src/components/image-preview-modal/index.stories.tsx => storybook/src/stories/image-preview-modal.stories.tsx} (90%) rename packages/{component => storybook}/src/stories/introduction.stories.mdx (100%) rename packages/{component/src/components/notification-center/index.stories.tsx => storybook/src/stories/notification-center.stories.tsx} (97%) rename packages/{component => storybook}/src/stories/onboarding-modal.stories.tsx (84%) rename packages/{component/src/components/page-detail-skeleton/index.stories.tsx => storybook/src/stories/page-detail-skeleton.stories.tsx} (76%) rename packages/{component => storybook}/src/stories/page-list.stories.tsx (91%) rename packages/{component => storybook}/src/stories/share-menu.stories.tsx (92%) rename packages/{component => storybook}/src/stories/switch.stories.tsx (83%) rename packages/{component => storybook}/src/stories/workspace-avatar.stories.tsx (92%) rename packages/{component/src/components/workspace-list/index.stories.tsx => storybook/src/stories/workspace-list.stories.tsx} (92%) create mode 100644 packages/storybook/tsconfig.json rename packages/{component => storybook}/tsconfig.node.json (100%) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index ae18d81784..825e2bd97a 100644 --- a/.github/workflows/build.yml +++ b/.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: | diff --git a/docs/contributing/tutorial.md b/docs/contributing/tutorial.md index f8b4a7cdbb..148ac0f911 100644 --- a/docs/contributing/tutorial.md +++ b/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? diff --git a/package.json b/package.json index 68c29cd96c..418306b2c9 100644 --- a/package.json +++ b/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", diff --git a/packages/component/package.json b/packages/component/package.json index b3cfc40774..9f61529e4f 100644 --- a/packages/component/package.json +++ b/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" diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx index 487063ed8c..52ad754f6c 100644 --- a/packages/component/src/components/app-sidebar/index.tsx +++ b/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 }; diff --git a/packages/component/src/components/notification-center/index.tsx b/packages/component/src/components/notification-center/index.tsx index 1cbc16bfde..319c7a5dfc 100644 --- a/packages/component/src/components/notification-center/index.tsx +++ b/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; diff --git a/packages/component/src/ui/button/button.tsx b/packages/component/src/ui/button/button.tsx index 509323a9a9..51ccfdf264 100644 --- a/packages/component/src/ui/button/button.tsx +++ b/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( ( { diff --git a/packages/component/src/ui/button/index.ts b/packages/component/src/ui/button/index.ts index 4873f7b9b2..1086dcb470 100644 --- a/packages/component/src/ui/button/index.ts +++ b/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'; diff --git a/packages/component/tsconfig.json b/packages/component/tsconfig.json index 6fee3173a6..031655f24c 100644 --- a/packages/component/tsconfig.json +++ b/packages/component/tsconfig.json @@ -30,9 +30,6 @@ { "path": "../../apps/electron" }, - { - "path": "./tsconfig.node.json" - }, { "path": "./tsconfig.workspace.json" }, { "path": "../../tests/fixtures" } ] diff --git a/packages/component/.storybook/main.ts b/packages/storybook/.storybook/main.ts similarity index 98% rename from packages/component/.storybook/main.ts rename to packages/storybook/.storybook/main.ts index 0e41f632bd..250e26e2a7 100644 --- a/packages/component/.storybook/main.ts +++ b/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: { diff --git a/packages/component/.storybook/preview-head.html b/packages/storybook/.storybook/preview-head.html similarity index 100% rename from packages/component/.storybook/preview-head.html rename to packages/storybook/.storybook/preview-head.html diff --git a/packages/component/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx similarity index 100% rename from packages/component/.storybook/preview.tsx rename to packages/storybook/.storybook/preview.tsx diff --git a/packages/storybook/package.json b/packages/storybook/package.json new file mode 100644 index 0000000000..57a5e5198c --- /dev/null +++ b/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": "*" + } +} diff --git a/packages/component/src/stories/affine-banner.stories.tsx b/packages/storybook/src/stories/affine-banner.stories.tsx similarity index 89% rename from packages/component/src/stories/affine-banner.stories.tsx rename to packages/storybook/src/stories/affine-banner.stories.tsx index 8a7577d707..618a7752cc 100644 --- a/packages/component/src/stories/affine-banner.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/affine-loading.stories.tsx b/packages/storybook/src/stories/affine-loading.stories.tsx similarity index 87% rename from packages/component/src/stories/affine-loading.stories.tsx rename to packages/storybook/src/stories/affine-loading.stories.tsx index 7f89f101fa..9b4e9186fd 100644 --- a/packages/component/src/stories/affine-loading.stories.tsx +++ b/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, diff --git a/packages/component/src/components/app-sidebar/index.stories.tsx b/packages/storybook/src/stories/app-sidebar.stories.tsx similarity index 86% rename from packages/component/src/components/app-sidebar/index.stories.tsx rename to packages/storybook/src/stories/app-sidebar.stories.tsx index 4246306a26..55a2761933 100644 --- a/packages/component/src/components/app-sidebar/index.stories.tsx +++ b/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, diff --git a/packages/component/src/components/block-suite-editor/index.stories.tsx b/packages/storybook/src/stories/block-suite-editor.stories.tsx similarity index 95% rename from packages/component/src/components/block-suite-editor/index.stories.tsx rename to packages/storybook/src/stories/block-suite-editor.stories.tsx index 5ab942aebd..34bd17f682 100644 --- a/packages/component/src/components/block-suite-editor/index.stories.tsx +++ b/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], diff --git a/packages/component/src/stories/breadcrumbs.stories.tsx b/packages/storybook/src/stories/breadcrumbs.stories.tsx similarity index 95% rename from packages/component/src/stories/breadcrumbs.stories.tsx rename to packages/storybook/src/stories/breadcrumbs.stories.tsx index 3989951660..e9b2e25b65 100644 --- a/packages/component/src/stories/breadcrumbs.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/button.stories.tsx b/packages/storybook/src/stories/button.stories.tsx similarity index 91% rename from packages/component/src/stories/button.stories.tsx rename to packages/storybook/src/stories/button.stories.tsx index c19310dbca..5c1dee2bf4 100644 --- a/packages/component/src/stories/button.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/card.stories.tsx b/packages/storybook/src/stories/card.stories.tsx similarity index 88% rename from packages/component/src/stories/card.stories.tsx rename to packages/storybook/src/stories/card.stories.tsx index a5943a3a4f..6c9f0da710 100644 --- a/packages/component/src/stories/card.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/change-log.stories.tsx b/packages/storybook/src/stories/change-log.stories.tsx similarity index 94% rename from packages/component/src/stories/change-log.stories.tsx rename to packages/storybook/src/stories/change-log.stories.tsx index 5117bd0e62..a534112549 100644 --- a/packages/component/src/stories/change-log.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/contact-modal.stories.tsx b/packages/storybook/src/stories/contact-modal.stories.tsx similarity index 76% rename from packages/component/src/stories/contact-modal.stories.tsx rename to packages/storybook/src/stories/contact-modal.stories.tsx index 54df0255c1..471d06fc8e 100644 --- a/packages/component/src/stories/contact-modal.stories.tsx +++ b/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, diff --git a/packages/component/src/components/image-preview-modal/index.stories.tsx b/packages/storybook/src/stories/image-preview-modal.stories.tsx similarity index 90% rename from packages/component/src/components/image-preview-modal/index.stories.tsx rename to packages/storybook/src/stories/image-preview-modal.stories.tsx index bcf817a91e..fccaeb3c7a 100644 --- a/packages/component/src/components/image-preview-modal/index.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/introduction.stories.mdx b/packages/storybook/src/stories/introduction.stories.mdx similarity index 100% rename from packages/component/src/stories/introduction.stories.mdx rename to packages/storybook/src/stories/introduction.stories.mdx diff --git a/packages/component/src/components/notification-center/index.stories.tsx b/packages/storybook/src/stories/notification-center.stories.tsx similarity index 97% rename from packages/component/src/components/notification-center/index.stories.tsx rename to packages/storybook/src/stories/notification-center.stories.tsx index 3a61ec3d4c..52c4af537d 100644 --- a/packages/component/src/components/notification-center/index.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/onboarding-modal.stories.tsx b/packages/storybook/src/stories/onboarding-modal.stories.tsx similarity index 84% rename from packages/component/src/stories/onboarding-modal.stories.tsx rename to packages/storybook/src/stories/onboarding-modal.stories.tsx index e3d158b428..976747e06c 100644 --- a/packages/component/src/stories/onboarding-modal.stories.tsx +++ b/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, diff --git a/packages/component/src/components/page-detail-skeleton/index.stories.tsx b/packages/storybook/src/stories/page-detail-skeleton.stories.tsx similarity index 76% rename from packages/component/src/components/page-detail-skeleton/index.stories.tsx rename to packages/storybook/src/stories/page-detail-skeleton.stories.tsx index 79f9da9943..dae18b57b5 100644 --- a/packages/component/src/components/page-detail-skeleton/index.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/page-list.stories.tsx b/packages/storybook/src/stories/page-list.stories.tsx similarity index 91% rename from packages/component/src/stories/page-list.stories.tsx rename to packages/storybook/src/stories/page-list.stories.tsx index 35897c067a..87c57af42f 100644 --- a/packages/component/src/stories/page-list.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/share-menu.stories.tsx b/packages/storybook/src/stories/share-menu.stories.tsx similarity index 92% rename from packages/component/src/stories/share-menu.stories.tsx rename to packages/storybook/src/stories/share-menu.stories.tsx index f557703afd..7b3031a3b7 100644 --- a/packages/component/src/stories/share-menu.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/switch.stories.tsx b/packages/storybook/src/stories/switch.stories.tsx similarity index 83% rename from packages/component/src/stories/switch.stories.tsx rename to packages/storybook/src/stories/switch.stories.tsx index da4ab05496..fe0a4e5c0e 100644 --- a/packages/component/src/stories/switch.stories.tsx +++ b/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, diff --git a/packages/component/src/stories/workspace-avatar.stories.tsx b/packages/storybook/src/stories/workspace-avatar.stories.tsx similarity index 92% rename from packages/component/src/stories/workspace-avatar.stories.tsx rename to packages/storybook/src/stories/workspace-avatar.stories.tsx index 6b29fd3489..b7e70f37b5 100644 --- a/packages/component/src/stories/workspace-avatar.stories.tsx +++ b/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, diff --git a/packages/component/src/components/workspace-list/index.stories.tsx b/packages/storybook/src/stories/workspace-list.stories.tsx similarity index 92% rename from packages/component/src/components/workspace-list/index.stories.tsx rename to packages/storybook/src/stories/workspace-list.stories.tsx index 578e812f30..c3ae79386a 100644 --- a/packages/component/src/components/workspace-list/index.stories.tsx +++ b/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, diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json new file mode 100644 index 0000000000..6f8a61c146 --- /dev/null +++ b/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" + } + ] +} diff --git a/packages/component/tsconfig.node.json b/packages/storybook/tsconfig.node.json similarity index 100% rename from packages/component/tsconfig.node.json rename to packages/storybook/tsconfig.node.json diff --git a/yarn.lock b/yarn.lock index e1f8f0d6d4..bdf7661bda 100644 --- a/yarn.lock +++ b/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"