From cc605251a836260cece8c72b36694427043c443b Mon Sep 17 00:00:00 2001 From: Himself65 Date: Wed, 8 Feb 2023 22:19:11 -0600 Subject: [PATCH] refactor: move component into a single package (#898) --- .gitignore | 1 + packages/app/next.config.js | 1 + packages/app/package.json | 13 +- packages/app/src/components/404/index.tsx | 2 +- packages/app/src/components/404/styles.ts | 2 +- .../src/components/contact-modal/index.tsx | 2 +- .../app/src/components/contact-modal/style.ts | 2 +- .../src/components/create-workspace/index.tsx | 10 +- .../src/components/delete-workspace/index.tsx | 8 +- .../src/components/edgeless-toolbar/index.tsx | 4 +- .../src/components/edgeless-toolbar/style.ts | 2 +- .../components/editor-mode-switch/style.ts | 2 +- packages/app/src/components/editor/index.tsx | 2 +- .../enable-workspace/EnableWorkspaceModal.tsx | 8 +- .../src/components/enable-workspace/index.tsx | 2 +- .../app/src/components/file-upload/index.tsx | 4 +- .../src/components/header/EditorHeader.tsx | 2 +- .../components/header/QuickSearchButton.tsx | 4 +- .../header-right-items/EditorOptionMenu.tsx | 6 +- .../header/header-right-items/SyncUser.tsx | 2 +- .../header-right-items/TrashButtonGroup.tsx | 2 +- .../theme-mode-switch/style.ts | 2 +- packages/app/src/components/header/styles.ts | 2 +- .../app/src/components/help-island/index.tsx | 4 +- .../app/src/components/help-island/style.ts | 2 +- packages/app/src/components/import/index.tsx | 8 +- packages/app/src/components/import/styles.ts | 2 +- .../src/components/loading/PageLoading.tsx | 2 +- packages/app/src/components/loading/styled.ts | 2 +- .../app/src/components/login-modal/index.tsx | 6 +- .../app/src/components/logout-modal/index.tsx | 6 +- .../app/src/components/mobile-modal/index.tsx | 2 +- .../app/src/components/mobile-modal/styles.ts | 2 +- .../app/src/components/page-list/DateCell.tsx | 2 +- .../app/src/components/page-list/Empty.tsx | 2 +- .../components/page-list/OperationCell.tsx | 8 +- .../app/src/components/page-list/index.tsx | 16 +- .../app/src/components/page-list/styles.ts | 4 +- .../app/src/components/quick-search/index.tsx | 2 +- .../app/src/components/quick-search/style.ts | 2 +- .../src/components/shortcuts-modal/index.tsx | 4 +- .../src/components/shortcuts-modal/style.ts | 2 +- .../src/components/workspace-layout/styles.ts | 2 +- .../src/components/workspace-modal/Footer.tsx | 6 +- .../workspace-modal/SelectLanguageMenu.tsx | 6 +- .../workspace-modal/WorkspaceCard.tsx | 2 +- .../src/components/workspace-modal/index.tsx | 6 +- .../src/components/workspace-modal/styles.ts | 9 +- .../workspace-setting/ExportPage.tsx | 4 +- .../workspace-setting/PublishPage.tsx | 8 +- .../components/workspace-setting/SyncPage.tsx | 2 +- .../workspace-setting/general/General.tsx | 50 +- .../general/delete/Delete.tsx | 8 +- .../workspace-setting/general/delete/style.ts | 2 +- .../workspace-setting/general/leave/Leave.tsx | 6 +- .../workspace-setting/general/leave/style.ts | 2 +- .../workspace-setting/general/style.ts | 4 +- .../member/InviteMemberModal.tsx | 10 +- .../workspace-setting/member/MembersPage.tsx | 12 +- .../workspace-setting/member/style.ts | 4 +- .../src/components/workspace-setting/style.ts | 4 +- .../WorkspaceItem/ListItem.tsx | 2 +- .../WorkspaceItem/LoginItem.tsx | 2 +- .../WorkspaceSelector/WorkspaceItem/styles.ts | 4 +- .../WorkspaceSelector/styles.ts | 6 +- .../components/workspace-slider-bar/index.tsx | 6 +- .../components/workspace-slider-bar/style.ts | 2 +- packages/app/src/pages/affine.tsx | 8 +- .../app/src/pages/invite/[invite_code].tsx | 4 +- .../app/src/pages/playground/templates.tsx | 4 +- .../[workspaceId]/[pageId].tsx | 6 +- .../public-workspace/[workspaceId]/index.tsx | 2 +- .../workspace/[workspaceId]/playground.tsx | 4 +- .../app/src/providers/ConfirmProvider.tsx | 2 +- packages/app/src/providers/ThemeProvider.tsx | 17 +- packages/app/src/styles/styled.ts | 3 - packages/app/tsconfig.json | 4 +- packages/component/.storybook/main.js | 44 + packages/component/.storybook/preview.js | 9 + packages/component/package.json | 36 + packages/component/src/index.ts | 16 + .../src/stories/Breadcrumbs.stories.tsx | 19 + .../component/src/stories/Button.stories.tsx | 20 + .../{app => component}/src/styles/helper.ts | 0 .../{app => component}/src/styles/index.ts | 4 +- packages/component/src/styles/styled.tsx | 15 + .../{app => component}/src/styles/theme.ts | 2 +- .../{app => component}/src/styles/types.ts | 0 .../src/styles/utils/index.ts | 0 .../styles/utils/localStorageThemeHelper.ts | 0 .../src/styles/utils/systemThemeHelper.ts | 0 .../src/ui/breadcrumbs/index.ts | 2 +- .../src/ui/button/Button.tsx | 0 .../src/ui/button/IconButton.tsx | 0 .../src/ui/button/Loading.tsx | 2 +- .../src/ui/button/TextButton.tsx | 0 .../{app => component}/src/ui/button/index.ts | 0 .../src/ui/button/interface.ts | 0 .../src/ui/button/styles.ts | 6 +- .../{app => component}/src/ui/button/utils.ts | 2 +- .../src/ui/confirm/Confirm.tsx | 4 +- .../src/ui/confirm/index.ts | 0 .../src/ui/confirm/styles.ts | 4 +- .../src/ui/divider/index.ts | 2 +- .../{app => component}/src/ui/empty/Empty.tsx | 6 +- .../src/ui/empty/EmptySVG.tsx | 0 .../src/ui/empty/emptyPage.svg | 0 .../{app => component}/src/ui/empty/index.ts | 0 .../{app => component}/src/ui/input/Input.tsx | 0 .../{app => component}/src/ui/input/index.ts | 0 .../{app => component}/src/ui/input/style.ts | 2 +- .../src/ui/layout/Content.tsx | 2 +- .../src/ui/layout/Wrapper.tsx | 2 +- .../{app => component}/src/ui/layout/index.ts | 0 .../{app => component}/src/ui/menu/Menu.tsx | 2 +- .../src/ui/menu/MenuItem.tsx | 0 .../{app => component}/src/ui/menu/index.ts | 0 .../{app => component}/src/ui/menu/styles.ts | 2 +- .../{app => component}/src/ui/modal/Modal.tsx | 0 .../src/ui/modal/ModalCloseButton.tsx | 4 +- .../src/ui/modal/ModalWrapper.tsx | 2 +- .../{app => component}/src/ui/modal/index.tsx | 0 .../{app => component}/src/ui/modal/styles.ts | 4 +- packages/{app => component}/src/ui/mui.ts | 0 .../src/ui/popper/PopoverArrow.tsx | 3 +- .../src/ui/popper/Popper.tsx | 2 +- .../{app => component}/src/ui/popper/index.ts | 0 .../src/ui/popper/interface.ts | 0 .../src/ui/shared/Container.tsx | 2 +- .../{app => component}/src/ui/table/Table.tsx | 0 .../src/ui/table/TableBody.tsx | 2 +- .../src/ui/table/TableCell.tsx | 0 .../src/ui/table/TableHead.tsx | 0 .../src/ui/table/TableRow.tsx | 0 .../{app => component}/src/ui/table/index.ts | 0 .../src/ui/table/interface.ts | 0 .../{app => component}/src/ui/table/styles.ts | 2 +- .../{app => component}/src/ui/toast/index.ts | 0 .../{app => component}/src/ui/toast/toast.ts | 0 .../src/ui/tooltip/Tooltip.tsx | 2 +- .../src/ui/tooltip/index.tsx | 0 packages/component/tsconfig.json | 22 + packages/i18n/src/index.ts | 2 +- pnpm-lock.yaml | 9422 ++++++++++++++++- tsconfig.json | 1 + 145 files changed, 9609 insertions(+), 450 deletions(-) delete mode 100644 packages/app/src/styles/styled.ts create mode 100644 packages/component/.storybook/main.js create mode 100644 packages/component/.storybook/preview.js create mode 100644 packages/component/package.json create mode 100644 packages/component/src/index.ts create mode 100644 packages/component/src/stories/Breadcrumbs.stories.tsx create mode 100644 packages/component/src/stories/Button.stories.tsx rename packages/{app => component}/src/styles/helper.ts (100%) rename packages/{app => component}/src/styles/index.ts (50%) create mode 100644 packages/component/src/styles/styled.tsx rename packages/{app => component}/src/styles/theme.ts (99%) rename packages/{app => component}/src/styles/types.ts (100%) rename packages/{app => component}/src/styles/utils/index.ts (100%) rename packages/{app => component}/src/styles/utils/localStorageThemeHelper.ts (100%) rename packages/{app => component}/src/styles/utils/systemThemeHelper.ts (100%) rename packages/{app => component}/src/ui/breadcrumbs/index.ts (82%) rename packages/{app => component}/src/ui/button/Button.tsx (100%) rename packages/{app => component}/src/ui/button/IconButton.tsx (100%) rename packages/{app => component}/src/ui/button/Loading.tsx (97%) rename packages/{app => component}/src/ui/button/TextButton.tsx (100%) rename packages/{app => component}/src/ui/button/index.ts (100%) rename packages/{app => component}/src/ui/button/interface.ts (100%) rename packages/{app => component}/src/ui/button/styles.ts (96%) rename packages/{app => component}/src/ui/button/utils.ts (98%) rename packages/{app => component}/src/ui/confirm/Confirm.tsx (97%) rename packages/{app => component}/src/ui/confirm/index.ts (100%) rename packages/{app => component}/src/ui/confirm/styles.ts (91%) rename packages/{app => component}/src/ui/divider/index.ts (81%) rename packages/{app => component}/src/ui/empty/Empty.tsx (71%) rename packages/{app => component}/src/ui/empty/EmptySVG.tsx (100%) rename packages/{app => component}/src/ui/empty/emptyPage.svg (100%) rename packages/{app => component}/src/ui/empty/index.ts (100%) rename packages/{app => component}/src/ui/input/Input.tsx (100%) rename packages/{app => component}/src/ui/input/index.ts (100%) rename packages/{app => component}/src/ui/input/style.ts (95%) rename packages/{app => component}/src/ui/layout/Content.tsx (95%) rename packages/{app => component}/src/ui/layout/Wrapper.tsx (98%) rename packages/{app => component}/src/ui/layout/index.ts (100%) rename packages/{app => component}/src/ui/menu/Menu.tsx (90%) rename packages/{app => component}/src/ui/menu/MenuItem.tsx (100%) rename packages/{app => component}/src/ui/menu/index.ts (100%) rename packages/{app => component}/src/ui/menu/styles.ts (95%) rename packages/{app => component}/src/ui/modal/Modal.tsx (100%) rename packages/{app => component}/src/ui/modal/ModalCloseButton.tsx (87%) rename packages/{app => component}/src/ui/modal/ModalWrapper.tsx (91%) rename packages/{app => component}/src/ui/modal/index.tsx (100%) rename packages/{app => component}/src/ui/modal/styles.ts (92%) rename packages/{app => component}/src/ui/mui.ts (100%) rename packages/{app => component}/src/ui/popper/PopoverArrow.tsx (96%) rename packages/{app => component}/src/ui/popper/Popper.tsx (99%) rename packages/{app => component}/src/ui/popper/index.ts (100%) rename packages/{app => component}/src/ui/popper/interface.ts (100%) rename packages/{app => component}/src/ui/shared/Container.tsx (97%) rename packages/{app => component}/src/ui/table/Table.tsx (100%) rename packages/{app => component}/src/ui/table/TableBody.tsx (83%) rename packages/{app => component}/src/ui/table/TableCell.tsx (100%) rename packages/{app => component}/src/ui/table/TableHead.tsx (100%) rename packages/{app => component}/src/ui/table/TableRow.tsx (100%) rename packages/{app => component}/src/ui/table/index.ts (100%) rename packages/{app => component}/src/ui/table/interface.ts (100%) rename packages/{app => component}/src/ui/table/styles.ts (96%) rename packages/{app => component}/src/ui/toast/index.ts (100%) rename packages/{app => component}/src/ui/toast/toast.ts (100%) rename packages/{app => component}/src/ui/tooltip/Tooltip.tsx (95%) rename packages/{app => component}/src/ui/tooltip/index.tsx (100%) create mode 100644 packages/component/tsconfig.json diff --git a/.gitignore b/.gitignore index 090865ce93..80b073618c 100644 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,7 @@ Thumbs.db .next out/ +storybook-static module-resolve.js module-resolve.cjs diff --git a/packages/app/next.config.js b/packages/app/next.config.js index 1ef34b267f..14fa2711df 100644 --- a/packages/app/next.config.js +++ b/packages/app/next.config.js @@ -47,6 +47,7 @@ const nextConfig = { COMMIT_HASH: getCommitHash(), EDITOR_VERSION, }, + transpilePackages: ['@affine/component'], webpack: config => { config.experiments = { ...config.experiments, topLevelAwait: true }; config.resolve.alias['yjs'] = require.resolve('yjs'); diff --git a/packages/app/package.json b/packages/app/package.json index 1b47cf1e39..39dcfda30e 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -9,21 +9,22 @@ "lint": "next lint" }, "dependencies": { + "@affine/component": "workspace:*", "@affine/datacenter": "workspace:*", "@affine/i18n": "workspace:*", "@blocksuite/blocks": "0.4.0-alpha.2", "@blocksuite/editor": "0.4.0-alpha.2", "@blocksuite/icons": "^2.0.2", "@blocksuite/store": "0.4.0-alpha.2", - "@emotion/css": "^11.10.0", - "@emotion/react": "^11.10.4", + "@emotion/css": "^11.10.5", + "@emotion/react": "^11.10.5", "@emotion/server": "^11.10.0", - "@emotion/styled": "^11.10.4", + "@emotion/styled": "^11.10.5", "@fontsource/poppins": "^4.5.10", "@fontsource/space-mono": "^4.5.10", - "@mui/base": "^5.0.0-alpha.87", - "@mui/icons-material": "^5.10.9", - "@mui/material": "^5.8.6", + "@mui/base": "=5.0.0-alpha.101", + "@mui/icons-material": "=5.10.9", + "@mui/material": "=5.8.6", "@toeverything/pathfinder-logger": "workspace:@affine/logger@*", "cmdk": "^0.1.20", "css-spring": "^4.1.0", diff --git a/packages/app/src/components/404/index.tsx b/packages/app/src/components/404/index.tsx index ffba2a08d2..55b04dbe70 100644 --- a/packages/app/src/components/404/index.tsx +++ b/packages/app/src/components/404/index.tsx @@ -1,6 +1,6 @@ import { NotFoundTitle, PageContainer } from './styles'; import { useTranslation } from '@affine/i18n'; -import { Button } from '@/ui/button'; +import { Button } from '@affine/component'; import { useRouter } from 'next/router'; export const NotfoundPage = () => { const { t } = useTranslation(); diff --git a/packages/app/src/components/404/styles.ts b/packages/app/src/components/404/styles.ts index 450be72e68..4e0bd9b646 100644 --- a/packages/app/src/components/404/styles.ts +++ b/packages/app/src/components/404/styles.ts @@ -1,4 +1,4 @@ -import { styled } from '@/styles'; +import { styled } from '@affine/component'; export const PageContainer = styled('div')(({ theme }) => { return { diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx index d22b2ea6c4..fdade2b7a8 100644 --- a/packages/app/src/components/contact-modal/index.tsx +++ b/packages/app/src/components/contact-modal/index.tsx @@ -1,4 +1,4 @@ -import { Modal, ModalCloseButton, ModalWrapper } from '@/ui/modal'; +import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component'; import { LogoIcon, DocIcon, diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts index 8ac277370c..1ba3b3b885 100644 --- a/packages/app/src/components/contact-modal/style.ts +++ b/packages/app/src/components/contact-modal/style.ts @@ -1,4 +1,4 @@ -import { absoluteCenter, displayFlex, styled } from '@/styles'; +import { absoluteCenter, displayFlex, styled } from '@affine/component'; export const StyledBigLink = styled('a')(({ theme }) => { return { diff --git a/packages/app/src/components/create-workspace/index.tsx b/packages/app/src/components/create-workspace/index.tsx index 2c374a9900..c3ccca93d6 100644 --- a/packages/app/src/components/create-workspace/index.tsx +++ b/packages/app/src/components/create-workspace/index.tsx @@ -1,13 +1,13 @@ -import { styled } from '@/styles'; -import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Button } from '@/ui/button'; +import { styled } from '@affine/component'; +import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component'; +import { Button } from '@affine/component'; import { useState } from 'react'; -import Input from '@/ui/input'; +import { Input } from '@affine/component'; import { KeyboardEvent } from 'react'; import { useTranslation } from '@affine/i18n'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { useRouter } from 'next/router'; -import { toast } from '@/ui/toast'; +import { toast } from '@affine/component'; interface ModalProps { open: boolean; diff --git a/packages/app/src/components/delete-workspace/index.tsx b/packages/app/src/components/delete-workspace/index.tsx index cead4b135e..51418532af 100644 --- a/packages/app/src/components/delete-workspace/index.tsx +++ b/packages/app/src/components/delete-workspace/index.tsx @@ -1,7 +1,7 @@ -import { styled } from '@/styles'; -import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Button } from '@/ui/button'; -import Input from '@/ui/input'; +import { styled } from '@affine/component'; +import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component'; +import { Button } from '@affine/component'; +import { Input } from '@affine/component'; import { useState } from 'react'; interface LoginModalProps { diff --git a/packages/app/src/components/edgeless-toolbar/index.tsx b/packages/app/src/components/edgeless-toolbar/index.tsx index e261899860..b64b07c063 100644 --- a/packages/app/src/components/edgeless-toolbar/index.tsx +++ b/packages/app/src/components/edgeless-toolbar/index.tsx @@ -14,8 +14,8 @@ import { UndoIcon, RedoIcon, } from './Icons'; -import { MuiSlide } from '@/ui/mui'; -import { Tooltip } from '@/ui/tooltip'; +import { MuiSlide } from '@affine/component'; +import { Tooltip } from '@affine/component'; import useCurrentPageMeta from '@/hooks/use-current-page-meta'; import { useAppState } from '@/providers/app-state-provider'; import useHistoryUpdated from '@/hooks/use-history-update'; diff --git a/packages/app/src/components/edgeless-toolbar/style.ts b/packages/app/src/components/edgeless-toolbar/style.ts index ff925808e7..31d2fbbddf 100644 --- a/packages/app/src/components/edgeless-toolbar/style.ts +++ b/packages/app/src/components/edgeless-toolbar/style.ts @@ -1,4 +1,4 @@ -import { styled, displayFlex } from '@/styles'; +import { styled, displayFlex } from '@affine/component'; export const StyledEdgelessToolbar = styled.div(({ theme }) => ({ height: '320px', diff --git a/packages/app/src/components/editor-mode-switch/style.ts b/packages/app/src/components/editor-mode-switch/style.ts index d17f65bd19..bb9a7d5df0 100644 --- a/packages/app/src/components/editor-mode-switch/style.ts +++ b/packages/app/src/components/editor-mode-switch/style.ts @@ -1,4 +1,4 @@ -import { displayFlex, keyframes, styled } from '@/styles'; +import { displayFlex, keyframes, styled } from '@affine/component'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import spring, { toString } from 'css-spring'; diff --git a/packages/app/src/components/editor/index.tsx b/packages/app/src/components/editor/index.tsx index 6e22f03080..176777f86f 100644 --- a/packages/app/src/components/editor/index.tsx +++ b/packages/app/src/components/editor/index.tsx @@ -3,7 +3,7 @@ import type { Page, Workspace } from '@blocksuite/store'; import '@blocksuite/blocks'; import { EditorContainer } from '@blocksuite/editor'; import exampleMarkdown from '@/templates/Welcome-to-AFFiNE-Alpha-Downhills.md'; -import { styled } from '@/styles'; +import { styled } from '@affine/component'; const StyledEditorContainer = styled('div')(() => { return { diff --git a/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx b/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx index 95da09511e..548f7ae8b1 100644 --- a/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx +++ b/packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx @@ -1,11 +1,11 @@ -import { styled } from '@/styles'; -import { Modal, ModalWrapper } from '@/ui/modal'; -import { Button, IconButton } from '@/ui/button'; +import { styled } from '@affine/component'; +import { Modal, ModalWrapper } from '@affine/component'; +import { Button, IconButton } from '@affine/component'; import { useTranslation } from '@affine/i18n'; import { useAppState } from '@/providers/app-state-provider'; import { useState } from 'react'; import router from 'next/router'; -import { toast } from '@/ui/toast'; +import { toast } from '@affine/component'; import { CloseIcon } from '@blocksuite/icons'; interface EnableWorkspaceModalProps { open: boolean; diff --git a/packages/app/src/components/enable-workspace/index.tsx b/packages/app/src/components/enable-workspace/index.tsx index cd4d558ff8..6edff7f462 100644 --- a/packages/app/src/components/enable-workspace/index.tsx +++ b/packages/app/src/components/enable-workspace/index.tsx @@ -1,4 +1,4 @@ -import { Button } from '@/ui/button'; +import { Button } from '@affine/component'; import { useTranslation } from '@affine/i18n'; import { useState } from 'react'; import { EnableWorkspaceModal } from './EnableWorkspaceModal'; diff --git a/packages/app/src/components/file-upload/index.tsx b/packages/app/src/components/file-upload/index.tsx index 80b089c35f..35db5abc6b 100644 --- a/packages/app/src/components/file-upload/index.tsx +++ b/packages/app/src/components/file-upload/index.tsx @@ -1,6 +1,6 @@ -import { Button } from '@/ui/button'; +import { Button } from '@affine/component'; import { FC, useRef, ChangeEvent, ReactElement } from 'react'; -import { styled } from '@/styles'; +import { styled } from '@affine/component'; import { useTranslation } from '@affine/i18n'; interface Props { uploadType?: string; diff --git a/packages/app/src/components/header/EditorHeader.tsx b/packages/app/src/components/header/EditorHeader.tsx index 76bdb9c88b..0315dafd57 100644 --- a/packages/app/src/components/header/EditorHeader.tsx +++ b/packages/app/src/components/header/EditorHeader.tsx @@ -5,7 +5,7 @@ import { StyledTitle, StyledTitleWrapper, } from './styles'; -import { Content } from '@/ui/layout'; +import { Content } from '@affine/component'; import { useAppState } from '@/providers/app-state-provider'; import EditorModeSwitch from '@/components/editor-mode-switch'; import QuickSearchButton from './QuickSearchButton'; diff --git a/packages/app/src/components/header/QuickSearchButton.tsx b/packages/app/src/components/header/QuickSearchButton.tsx index dfc00eef14..9b73c096f6 100644 --- a/packages/app/src/components/header/QuickSearchButton.tsx +++ b/packages/app/src/components/header/QuickSearchButton.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { IconButton, IconButtonProps } from '@/ui/button'; +import { IconButton, IconButtonProps } from '@affine/component'; import { ArrowDownIcon } from '@blocksuite/icons'; import { useModal } from '@/providers/GlobalModalProvider'; -import { styled } from '@/styles'; +import { styled } from '@affine/component'; const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => { return { diff --git a/packages/app/src/components/header/header-right-items/EditorOptionMenu.tsx b/packages/app/src/components/header/header-right-items/EditorOptionMenu.tsx index b4eef4ebfc..879e6a4117 100644 --- a/packages/app/src/components/header/header-right-items/EditorOptionMenu.tsx +++ b/packages/app/src/components/header/header-right-items/EditorOptionMenu.tsx @@ -1,5 +1,5 @@ -import { Menu, MenuItem } from '@/ui/menu'; -import { IconButton } from '@/ui/button'; +import { Menu, MenuItem } from '@affine/component'; +import { IconButton } from '@affine/component'; import { EdgelessIcon, ExportIcon, @@ -15,7 +15,7 @@ import { useAppState } from '@/providers/app-state-provider'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useConfirm } from '@/providers/ConfirmProvider'; import useCurrentPageMeta from '@/hooks/use-current-page-meta'; -import { toast } from '@/ui/toast'; +import { toast } from '@affine/component'; import { useTranslation } from '@affine/i18n'; const PopoverContent = () => { const { editor } = useAppState(); diff --git a/packages/app/src/components/header/header-right-items/SyncUser.tsx b/packages/app/src/components/header/header-right-items/SyncUser.tsx index 0923de9893..0cedea6fec 100644 --- a/packages/app/src/components/header/header-right-items/SyncUser.tsx +++ b/packages/app/src/components/header/header-right-items/SyncUser.tsx @@ -1,7 +1,7 @@ import { CloudUnsyncedIcon } from '@blocksuite/icons'; import { useModal } from '@/providers/GlobalModalProvider'; import { useAppState } from '@/providers/app-state-provider'; -import { IconButton } from '@/ui/button'; +import { IconButton } from '@affine/component'; // Temporary solution to use this component, since the @blocksuite/icons has not been published yet const DefaultSyncIcon = () => { diff --git a/packages/app/src/components/header/header-right-items/TrashButtonGroup.tsx b/packages/app/src/components/header/header-right-items/TrashButtonGroup.tsx index af0a12a8d4..96156fd917 100644 --- a/packages/app/src/components/header/header-right-items/TrashButtonGroup.tsx +++ b/packages/app/src/components/header/header-right-items/TrashButtonGroup.tsx @@ -1,4 +1,4 @@ -import { Button } from '@/ui/button'; +import { Button } from '@affine/component'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useAppState } from '@/providers/app-state-provider'; import { useConfirm } from '@/providers/ConfirmProvider'; diff --git a/packages/app/src/components/header/header-right-items/theme-mode-switch/style.ts b/packages/app/src/components/header/header-right-items/theme-mode-switch/style.ts index 59d82211e8..279d09b99a 100644 --- a/packages/app/src/components/header/header-right-items/theme-mode-switch/style.ts +++ b/packages/app/src/components/header/header-right-items/theme-mode-switch/style.ts @@ -1,4 +1,4 @@ -import { displayFlex, keyframes, styled } from '@/styles'; +import { displayFlex, keyframes, styled } from '@affine/component'; import { CSSProperties } from 'react'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore diff --git a/packages/app/src/components/header/styles.ts b/packages/app/src/components/header/styles.ts index 9870e390a5..4e88860ee9 100644 --- a/packages/app/src/components/header/styles.ts +++ b/packages/app/src/components/header/styles.ts @@ -1,4 +1,4 @@ -import { displayFlex, styled } from '@/styles'; +import { displayFlex, styled } from '@affine/component'; export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>( ({ hasWarning }) => { diff --git a/packages/app/src/components/help-island/index.tsx b/packages/app/src/components/help-island/index.tsx index 9fb883481d..4f7b126843 100644 --- a/packages/app/src/components/help-island/index.tsx +++ b/packages/app/src/components/help-island/index.tsx @@ -6,8 +6,8 @@ import { StyledTransformIcon, } from './style'; import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons'; -import { MuiGrow } from '@/ui/mui'; -import { Tooltip } from '@/ui/tooltip'; +import { MuiGrow } from '@affine/component'; +import { Tooltip } from '@affine/component'; import { useTranslation } from '@affine/i18n'; import { useModal } from '@/providers/GlobalModalProvider'; import { useTheme } from '@/providers/ThemeProvider'; diff --git a/packages/app/src/components/help-island/style.ts b/packages/app/src/components/help-island/style.ts index 9373a53da6..46b2e271ac 100644 --- a/packages/app/src/components/help-island/style.ts +++ b/packages/app/src/components/help-island/style.ts @@ -1,4 +1,4 @@ -import { displayFlex, styled } from '@/styles'; +import { displayFlex, styled } from '@affine/component'; export const StyledIsland = styled('div')(({ theme }) => { return { diff --git a/packages/app/src/components/import/index.tsx b/packages/app/src/components/import/index.tsx index d8eaa2ffd5..e9d1602941 100644 --- a/packages/app/src/components/import/index.tsx +++ b/packages/app/src/components/import/index.tsx @@ -1,13 +1,13 @@ -import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; +import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component'; import { StyledButtonWrapper, StyledTitle } from './styles'; -import { Button } from '@/ui/button'; -import { Content, FlexWrapper } from '@/ui/layout'; +import { Button } from '@affine/component'; +import { Content, FlexWrapper } from '@affine/component'; import Loading from '@/components/loading'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useAppState } from '@/providers/app-state-provider'; import { useEffect, useState } from 'react'; import { useTranslation } from '@affine/i18n'; -// import { Tooltip } from '@/ui/tooltip'; +// import { Tooltip } from '@affine/component'; type ImportModalProps = { open: boolean; onClose: () => void; diff --git a/packages/app/src/components/import/styles.ts b/packages/app/src/components/import/styles.ts index 580d8a1535..1665d28991 100644 --- a/packages/app/src/components/import/styles.ts +++ b/packages/app/src/components/import/styles.ts @@ -1,4 +1,4 @@ -import { styled } from '@/styles'; +import { styled } from '@affine/component'; export const StyledTitle = styled.div(({ theme }) => { return { diff --git a/packages/app/src/components/loading/PageLoading.tsx b/packages/app/src/components/loading/PageLoading.tsx index ef853c4d61..92e60d7f4b 100644 --- a/packages/app/src/components/loading/PageLoading.tsx +++ b/packages/app/src/components/loading/PageLoading.tsx @@ -1,4 +1,4 @@ -import { styled } from '@/styles'; +import { styled } from '@affine/component'; import Loading from './Loading'; import { useTranslation } from '@affine/i18n'; diff --git a/packages/app/src/components/loading/styled.ts b/packages/app/src/components/loading/styled.ts index 31906e1b7b..b88f0f7c8a 100644 --- a/packages/app/src/components/loading/styled.ts +++ b/packages/app/src/components/loading/styled.ts @@ -1,4 +1,4 @@ -import { styled } from '@/styles'; +import { styled } from '@affine/component'; // Inspired by https://codepen.io/graphilla/pen/rNvBMYY export const StyledLoadingWrapper = styled('div', { diff --git a/packages/app/src/components/login-modal/index.tsx b/packages/app/src/components/login-modal/index.tsx index 880ebe6e38..105334a77a 100644 --- a/packages/app/src/components/login-modal/index.tsx +++ b/packages/app/src/components/login-modal/index.tsx @@ -1,6 +1,6 @@ -import { positionAbsolute, styled } from '@/styles'; -import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Button } from '@/ui/button'; +import { positionAbsolute, styled } from '@affine/component'; +import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component'; +import { Button } from '@affine/component'; import { useAppState } from '@/providers/app-state-provider'; import { useTranslation } from '@affine/i18n'; import { GoogleIcon } from './GoogleIcon'; diff --git a/packages/app/src/components/logout-modal/index.tsx b/packages/app/src/components/logout-modal/index.tsx index d710b2e451..450b8834d3 100644 --- a/packages/app/src/components/logout-modal/index.tsx +++ b/packages/app/src/components/logout-modal/index.tsx @@ -1,6 +1,6 @@ -import { styled } from '@/styles'; -import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Button } from '@/ui/button'; +import { styled } from '@affine/component'; +import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component'; +import { Button } from '@affine/component'; import { Check, UnCheck } from './icon'; import { useState } from 'react'; import { useTranslation } from '@affine/i18n'; diff --git a/packages/app/src/components/mobile-modal/index.tsx b/packages/app/src/components/mobile-modal/index.tsx index b568c2697d..3f7b0d976f 100644 --- a/packages/app/src/components/mobile-modal/index.tsx +++ b/packages/app/src/components/mobile-modal/index.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import Modal, { ModalCloseButton, ModalWrapper } from '@/ui/modal'; +import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component'; import getIsMobile from '@/utils/get-is-mobile'; import { StyledButton, StyledContent, StyledTitle } from './styles'; import bg from './bg.png'; diff --git a/packages/app/src/components/mobile-modal/styles.ts b/packages/app/src/components/mobile-modal/styles.ts index 40a8bcc375..771a6b585c 100644 --- a/packages/app/src/components/mobile-modal/styles.ts +++ b/packages/app/src/components/mobile-modal/styles.ts @@ -1,4 +1,4 @@ -import { displayFlex, styled } from '@/styles'; +import { displayFlex, styled } from '@affine/component'; export const StyledTitle = styled.div(() => { return { diff --git a/packages/app/src/components/page-list/DateCell.tsx b/packages/app/src/components/page-list/DateCell.tsx index 4ffc4e95cd..d014049869 100644 --- a/packages/app/src/components/page-list/DateCell.tsx +++ b/packages/app/src/components/page-list/DateCell.tsx @@ -1,7 +1,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat'; import dayjs from 'dayjs'; import { PageMeta } from '@/providers/app-state-provider'; -import { TableCell } from '@/ui/table'; +import { TableCell } from '@affine/component'; import React from 'react'; dayjs.extend(localizedFormat); diff --git a/packages/app/src/components/page-list/Empty.tsx b/packages/app/src/components/page-list/Empty.tsx index f8dfc6745d..236968bd04 100644 --- a/packages/app/src/components/page-list/Empty.tsx +++ b/packages/app/src/components/page-list/Empty.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Empty } from '@/ui/empty'; +import { Empty } from '@affine/component'; import { useTranslation } from '@affine/i18n'; export const PageListEmpty = (props: { listType?: string }) => { const { listType } = props; diff --git a/packages/app/src/components/page-list/OperationCell.tsx b/packages/app/src/components/page-list/OperationCell.tsx index a9efc634c4..2bbcbeea73 100644 --- a/packages/app/src/components/page-list/OperationCell.tsx +++ b/packages/app/src/components/page-list/OperationCell.tsx @@ -1,8 +1,8 @@ import { useConfirm } from '@/providers/ConfirmProvider'; import { PageMeta } from '@/providers/app-state-provider'; -import { Menu, MenuItem } from '@/ui/menu'; -import { FlexWrapper } from '@/ui/layout'; -import { IconButton } from '@/ui/button'; +import { Menu, MenuItem } from '@affine/component'; +import { FlexWrapper } from '@affine/component'; +import { IconButton } from '@affine/component'; import { MoreVerticalIcon, RestoreIcon, @@ -12,7 +12,7 @@ import { OpenInNewIcon, TrashIcon, } from '@blocksuite/icons'; -import { toast } from '@/ui/toast'; +import { toast } from '@affine/component'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useTranslation } from '@affine/i18n'; export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx index 7623eb4895..714d6ca11b 100644 --- a/packages/app/src/components/page-list/index.tsx +++ b/packages/app/src/components/page-list/index.tsx @@ -11,17 +11,23 @@ import { StyledTitleLink, StyledTitleWrapper, } from './styles'; -import { Table, TableBody, TableCell, TableHead, TableRow } from '@/ui/table'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableRow, +} from '@affine/component'; import { OperationCell, TrashOperationCell } from './OperationCell'; import Empty from './Empty'; -import { Content } from '@/ui/layout'; +import { Content } from '@affine/component'; import React from 'react'; import DateCell from '@/components/page-list/DateCell'; -import { IconButton } from '@/ui/button'; -import { Tooltip } from '@/ui/tooltip'; +import { IconButton } from '@affine/component'; +import { Tooltip } from '@affine/component'; import { useRouter } from 'next/router'; import { useAppState } from '@/providers/app-state-provider'; -import { toast } from '@/ui/toast'; +import { toast } from '@affine/component'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useTheme } from '@/providers/ThemeProvider'; import { useTranslation } from '@affine/i18n'; diff --git a/packages/app/src/components/page-list/styles.ts b/packages/app/src/components/page-list/styles.ts index fcf80e813f..6b03fb7ce8 100644 --- a/packages/app/src/components/page-list/styles.ts +++ b/packages/app/src/components/page-list/styles.ts @@ -1,5 +1,5 @@ -import { displayFlex, styled } from '@/styles'; -import { TableRow } from '@/ui/table'; +import { displayFlex, styled } from '@affine/component'; +import { TableRow } from '@affine/component'; export const StyledTableContainer = styled.div(() => { return { diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index fd14899abb..3ca942444a 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/packages/app/src/components/quick-search/index.tsx @@ -1,4 +1,4 @@ -import { Modal, ModalWrapper } from '@/ui/modal'; +import { Modal, ModalWrapper } from '@affine/component'; import { StyledContent, StyledModalHeader, diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts index 3c949aaaa9..024f5e249b 100644 --- a/packages/app/src/components/quick-search/style.ts +++ b/packages/app/src/components/quick-search/style.ts @@ -1,4 +1,4 @@ -import { displayFlex, styled } from '@/styles'; +import { displayFlex, styled } from '@affine/component'; export const StyledContent = styled('div')(({ theme }) => { return { diff --git a/packages/app/src/components/shortcuts-modal/index.tsx b/packages/app/src/components/shortcuts-modal/index.tsx index 08416e3126..bfe6c75a77 100644 --- a/packages/app/src/components/shortcuts-modal/index.tsx +++ b/packages/app/src/components/shortcuts-modal/index.tsx @@ -13,8 +13,8 @@ import { useWindowsKeyboardShortcuts, useWinMarkdownShortcuts, } from '@/components/shortcuts-modal/config'; -import { MuiSlide } from '@/ui/mui'; -import { ModalCloseButton } from '@/ui/modal'; +import { MuiSlide } from '@affine/component'; +import { ModalCloseButton } from '@affine/component'; import { getUaHelper } from '@/utils'; import { useTranslation } from '@affine/i18n'; type ModalProps = { diff --git a/packages/app/src/components/shortcuts-modal/style.ts b/packages/app/src/components/shortcuts-modal/style.ts index fabe9b3fee..d3696090ce 100644 --- a/packages/app/src/components/shortcuts-modal/style.ts +++ b/packages/app/src/components/shortcuts-modal/style.ts @@ -1,4 +1,4 @@ -import { displayFlex, styled } from '@/styles'; +import { displayFlex, styled } from '@affine/component'; export const StyledShortcutsModal = styled.div(({ theme }) => ({ width: '288px', diff --git a/packages/app/src/components/workspace-layout/styles.ts b/packages/app/src/components/workspace-layout/styles.ts index e935901b3e..4c246db801 100644 --- a/packages/app/src/components/workspace-layout/styles.ts +++ b/packages/app/src/components/workspace-layout/styles.ts @@ -1,4 +1,4 @@ -import { styled } from '@/styles'; +import { styled } from '@affine/component'; export const StyledPage = styled('div')(({ theme }) => { return { diff --git a/packages/app/src/components/workspace-modal/Footer.tsx b/packages/app/src/components/workspace-modal/Footer.tsx index 9a591e197c..45a84998d2 100644 --- a/packages/app/src/components/workspace-modal/Footer.tsx +++ b/packages/app/src/components/workspace-modal/Footer.tsx @@ -1,11 +1,11 @@ import { CloudInsyncIcon, LogOutIcon } from '@blocksuite/icons'; -import { FlexWrapper } from '@/ui/layout'; +import { FlexWrapper } from '@affine/component'; import { WorkspaceAvatar } from '@/components/workspace-avatar'; -import { IconButton } from '@/ui/button'; +import { IconButton } from '@affine/component'; import { useAppState } from '@/providers/app-state-provider'; import { StyledFooter, StyleUserInfo, StyledSignInButton } from './styles'; import { useTranslation } from '@affine/i18n'; -import { Tooltip } from '@/ui/tooltip'; +import { Tooltip } from '@affine/component'; export const Footer = ({ onLogin, onLogout, diff --git a/packages/app/src/components/workspace-modal/SelectLanguageMenu.tsx b/packages/app/src/components/workspace-modal/SelectLanguageMenu.tsx index 47e4ae02a8..c79b3f5c1b 100644 --- a/packages/app/src/components/workspace-modal/SelectLanguageMenu.tsx +++ b/packages/app/src/components/workspace-modal/SelectLanguageMenu.tsx @@ -1,9 +1,9 @@ import { LOCALES } from '@affine/i18n'; -import { styled } from '@/styles'; +import { styled } from '@affine/component'; import { useTranslation } from '@affine/i18n'; import { ArrowDownIcon } from '@blocksuite/icons'; -import { Button } from '@/ui/button'; -import { Menu, MenuItem } from '@/ui/menu'; +import { Button } from '@affine/component'; +import { Menu, MenuItem } from '@affine/component'; const LanguageMenuContent = () => { const { i18n } = useTranslation(); diff --git a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx index e075bddf0d..d90fb9daaf 100644 --- a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx +++ b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx @@ -10,7 +10,7 @@ import { WorkspaceUnit } from '@affine/datacenter'; import { useAppState } from '@/providers/app-state-provider'; import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles'; import { useTranslation } from '@affine/i18n'; -import { FlexWrapper } from '@/ui/layout'; +import { FlexWrapper } from '@affine/component'; const WorkspaceType = ({ workspaceData }: { workspaceData: WorkspaceUnit }) => { const { user } = useAppState(); diff --git a/packages/app/src/components/workspace-modal/index.tsx b/packages/app/src/components/workspace-modal/index.tsx index 4a6e78e90d..2c67459ede 100644 --- a/packages/app/src/components/workspace-modal/index.tsx +++ b/packages/app/src/components/workspace-modal/index.tsx @@ -1,9 +1,9 @@ -import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { FlexWrapper } from '@/ui/layout'; +import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component'; +import { FlexWrapper } from '@affine/component'; import { useState } from 'react'; import { CreateWorkspaceModal } from '../create-workspace'; -import { Tooltip } from '@/ui/tooltip'; +import { Tooltip } from '@affine/component'; import { AddIcon, HelpCenterIcon } from '@blocksuite/icons'; diff --git a/packages/app/src/components/workspace-modal/styles.ts b/packages/app/src/components/workspace-modal/styles.ts index 7c2cc9a378..d022bc8df5 100644 --- a/packages/app/src/components/workspace-modal/styles.ts +++ b/packages/app/src/components/workspace-modal/styles.ts @@ -1,5 +1,10 @@ -import { displayFlex, displayInlineFlex, styled, textEllipsis } from '@/styles'; -import { Button } from '@/ui/button'; +import { + displayFlex, + displayInlineFlex, + styled, + textEllipsis, +} from '@affine/component'; +import { Button } from '@affine/component'; export const StyledSplitLine = styled.div(({ theme }) => { return { diff --git a/packages/app/src/components/workspace-setting/ExportPage.tsx b/packages/app/src/components/workspace-setting/ExportPage.tsx index d2c5988804..1a375ee176 100644 --- a/packages/app/src/components/workspace-setting/ExportPage.tsx +++ b/packages/app/src/components/workspace-setting/ExportPage.tsx @@ -1,7 +1,7 @@ import { WorkspaceUnit } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; -import { Wrapper } from '@/ui/layout'; -import { Button } from '@/ui/button'; +import { Wrapper } from '@affine/component'; +import { Button } from '@affine/component'; export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const { t } = useTranslation(); console.log(workspace); diff --git a/packages/app/src/components/workspace-setting/PublishPage.tsx b/packages/app/src/components/workspace-setting/PublishPage.tsx index c2a1b258a2..fefb96742b 100644 --- a/packages/app/src/components/workspace-setting/PublishPage.tsx +++ b/packages/app/src/components/workspace-setting/PublishPage.tsx @@ -1,12 +1,12 @@ import { useState } from 'react'; -import { Button } from '@/ui/button'; -import Input from '@/ui/input'; -import { toast } from '@/ui/toast'; +import { Button } from '@affine/component'; +import { Input } from '@affine/component'; +import { toast } from '@affine/component'; import { WorkspaceUnit } from '@affine/datacenter'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; import { useTranslation } from '@affine/i18n'; import { EnableWorkspaceButton } from '../enable-workspace'; -import { Wrapper, Content, FlexWrapper } from '@/ui/layout'; +import { Wrapper, Content, FlexWrapper } from '@affine/component'; export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const shareUrl = window.location.host + '/public-workspace/' + workspace.id; const { publishWorkspace } = useWorkspaceHelper(); diff --git a/packages/app/src/components/workspace-setting/SyncPage.tsx b/packages/app/src/components/workspace-setting/SyncPage.tsx index c98b06da46..fa6586c3e6 100644 --- a/packages/app/src/components/workspace-setting/SyncPage.tsx +++ b/packages/app/src/components/workspace-setting/SyncPage.tsx @@ -9,7 +9,7 @@ import { useTranslation, Trans } from '@affine/i18n'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; import { EnableWorkspaceButton } from '../enable-workspace'; import { useAppState } from '@/providers/app-state-provider'; -import { FlexWrapper, Content, Wrapper } from '@/ui/layout'; +import { FlexWrapper, Content, Wrapper } from '@affine/component'; // // FIXME: Temporary solution, since the @blocksuite/icons is broken // const ActiveIcon = () => { diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx index d73c3c87df..dbfdce1fff 100644 --- a/packages/app/src/components/workspace-setting/general/General.tsx +++ b/packages/app/src/components/workspace-setting/general/General.tsx @@ -1,9 +1,9 @@ import { StyledInput, StyledProviderInfo, StyledAvatar } from './style'; import { StyledSettingKey, StyledRow } from '../style'; -import { FlexWrapper, Content } from '@/ui/layout'; +import { FlexWrapper, Content } from '@affine/component'; import { useState } from 'react'; -import { Button } from '@/ui/button'; +import { Button } from '@affine/component'; import { useAppState } from '@/providers/app-state-provider'; import { WorkspaceDelete } from './delete'; import { WorkspaceLeave } from './leave'; @@ -42,29 +42,29 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { {t('Workspace Avatar')} - {isOwner ? ( - - <> -
- -
- - - - ) : ( - - )} + {isOwner ? ( + + <> +
+ +
+ + + + ) : ( + + )} diff --git a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx index af2570f813..0d4231414f 100644 --- a/packages/app/src/components/workspace-setting/general/delete/Delete.tsx +++ b/packages/app/src/components/workspace-setting/general/delete/Delete.tsx @@ -1,6 +1,6 @@ import { useRouter } from 'next/router'; -import Modal from '@/ui/modal'; -import Input from '@/ui/input'; +import { Modal } from '@affine/component'; +import { Input } from '@affine/component'; import { StyledModalHeader, StyledTextContent, @@ -10,8 +10,8 @@ import { StyledWorkspaceName, } from './style'; import { useState } from 'react'; -import { ModalCloseButton } from '@/ui/modal'; -import { Button } from '@/ui/button'; +import { ModalCloseButton } from '@affine/component'; +import { Button } from '@affine/component'; import { WorkspaceUnit } from '@affine/datacenter'; import { Trans, useTranslation } from '@affine/i18n'; diff --git a/packages/app/src/components/workspace-setting/general/delete/style.ts b/packages/app/src/components/workspace-setting/general/delete/style.ts index d029d54fea..05396823f8 100644 --- a/packages/app/src/components/workspace-setting/general/delete/style.ts +++ b/packages/app/src/components/workspace-setting/general/delete/style.ts @@ -1,4 +1,4 @@ -import { styled } from '@/styles'; +import { styled } from '@affine/component'; export const StyledModalWrapper = styled('div')(({ theme }) => { return { diff --git a/packages/app/src/components/workspace-setting/general/leave/Leave.tsx b/packages/app/src/components/workspace-setting/general/leave/Leave.tsx index 3c91b026bf..bd18e21b07 100644 --- a/packages/app/src/components/workspace-setting/general/leave/Leave.tsx +++ b/packages/app/src/components/workspace-setting/general/leave/Leave.tsx @@ -1,12 +1,12 @@ -import Modal from '@/ui/modal'; +import { Modal } from '@affine/component'; import { StyledModalHeader, StyledTextContent, StyledModalWrapper, StyledButtonContent, } from './style'; -import { ModalCloseButton } from '@/ui/modal'; -import { Button } from '@/ui/button'; +import { ModalCloseButton } from '@affine/component'; +import { Button } from '@affine/component'; import { useTranslation } from '@affine/i18n'; import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; // import { getDataCenter } from '@affine/datacenter'; diff --git a/packages/app/src/components/workspace-setting/general/leave/style.ts b/packages/app/src/components/workspace-setting/general/leave/style.ts index 1d9696af37..bbbf7e1c90 100644 --- a/packages/app/src/components/workspace-setting/general/leave/style.ts +++ b/packages/app/src/components/workspace-setting/general/leave/style.ts @@ -1,4 +1,4 @@ -import { styled } from '@/styles'; +import { styled } from '@affine/component'; export const StyledModalWrapper = styled('div')(({ theme }) => { return { diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts index 4707843c6e..35c44e5f3e 100644 --- a/packages/app/src/components/workspace-setting/general/style.ts +++ b/packages/app/src/components/workspace-setting/general/style.ts @@ -1,5 +1,5 @@ -import { styled } from '@/styles'; -import Input from '@/ui/input'; +import { styled } from '@affine/component'; +import { Input } from '@affine/component'; export const StyledInput = styled(Input)(({ theme }) => { return { diff --git a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx index 15c5d5f583..e7ca8982de 100644 --- a/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx +++ b/packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx @@ -1,10 +1,10 @@ import { EmailIcon } from '@blocksuite/icons'; -import { styled } from '@/styles'; -import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal'; -import { Button } from '@/ui/button'; -import Input from '@/ui/input'; +import { styled } from '@affine/component'; +import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component'; +import { Button } from '@affine/component'; +import { Input } from '@affine/component'; import { useState } from 'react'; -import { MuiAvatar } from '@/ui/mui'; +import { MuiAvatar } from '@affine/component'; import useMembers from '@/hooks/use-members'; import { User } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; diff --git a/packages/app/src/components/workspace-setting/member/MembersPage.tsx b/packages/app/src/components/workspace-setting/member/MembersPage.tsx index c2d4c76a66..7a64e14f5e 100644 --- a/packages/app/src/components/workspace-setting/member/MembersPage.tsx +++ b/packages/app/src/components/workspace-setting/member/MembersPage.tsx @@ -12,19 +12,19 @@ import { StyledMoreVerticalButton, StyledMemberContainer, } from './style'; -import { Wrapper } from '@/ui/layout'; +import { Wrapper } from '@affine/component'; import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons'; import { useState } from 'react'; -import { Button, IconButton } from '@/ui/button'; +import { Button, IconButton } from '@affine/component'; import { InviteMemberModal } from './InviteMemberModal'; -import { Menu, MenuItem } from '@/ui/menu'; -import { Empty } from '@/ui/empty'; +import { Menu, MenuItem } from '@affine/component'; +import { Empty } from '@affine/component'; import { WorkspaceUnit } from '@affine/datacenter'; import { useConfirm } from '@/providers/ConfirmProvider'; -import { toast } from '@/ui/toast'; +import { toast } from '@affine/component'; import useMembers from '@/hooks/use-members'; import Loading from '@/components/loading'; -import { FlexWrapper } from '@/ui/layout'; +import { FlexWrapper } from '@affine/component'; import { useTranslation } from '@affine/i18n'; import { EnableWorkspaceButton } from '@/components/enable-workspace'; diff --git a/packages/app/src/components/workspace-setting/member/style.ts b/packages/app/src/components/workspace-setting/member/style.ts index 3345f591a9..b1d3502054 100644 --- a/packages/app/src/components/workspace-setting/member/style.ts +++ b/packages/app/src/components/workspace-setting/member/style.ts @@ -1,5 +1,5 @@ -import { styled } from '@/styles'; -import { MuiAvatar } from '@/ui/mui'; +import { styled } from '@affine/component'; +import { MuiAvatar } from '@affine/component'; export const StyledMemberTitleContainer = styled('li')(() => { return { diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index 12fe79835f..1dad9cb83a 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -1,5 +1,5 @@ -import { styled } from '@/styles'; -import { FlexWrapper } from '@/ui/layout'; +import { styled } from '@affine/component'; +import { FlexWrapper } from '@affine/component'; export const StyledSettingContainer = styled('div')(() => { return { display: 'flex', diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/ListItem.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/ListItem.tsx index 120a003953..48c7c7ac45 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/ListItem.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/ListItem.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { styled } from '@/styles'; +import { styled } from '@affine/component'; import { WorkspaceItemWrapper, WorkspaceItemContent } from './styles'; interface ListItemProps { diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx index d7771f1ac8..7ea99ecce4 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx @@ -1,5 +1,5 @@ import { useModal } from '@/providers/GlobalModalProvider'; -import { styled } from '@/styles'; +import { styled } from '@affine/component'; import { AffineIcon } from '../../icons/Icons'; import { WorkspaceItemAvatar, diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts index d56661de3a..f1eb324a66 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts @@ -1,5 +1,5 @@ -import { MuiAvatar } from '@/ui/mui'; -import { styled } from '@/styles'; +import { MuiAvatar } from '@affine/component'; +import { styled } from '@affine/component'; export const WorkspaceItemWrapper = styled('div')(({ theme }) => ({ display: 'flex', diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts index e700d8cd81..600bcaf567 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts @@ -1,6 +1,6 @@ -import { MuiAvatar } from '@/ui/mui'; -import { styled } from '@/styles'; -import { StyledPopperContainer } from '@/ui/shared/Container'; +import { MuiAvatar } from '@affine/component'; +import { styled } from '@affine/component'; +import { StyledPopperContainer } from '@affine/component'; export const SelectorWrapper = styled('div')({ width: '100%', diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 4a56307d1f..3df649a8ae 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -21,11 +21,11 @@ import { SettingsIcon, } from '@blocksuite/icons'; import Link from 'next/link'; -import { MuiCollapse } from '@/ui/mui'; -import { Tooltip } from '@/ui/tooltip'; +import { MuiCollapse } from '@affine/component'; +import { Tooltip } from '@affine/component'; import { useModal } from '@/providers/GlobalModalProvider'; import { useAppState } from '@/providers/app-state-provider'; -import { IconButton } from '@/ui/button'; +import { IconButton } from '@affine/component'; import useLocalStorage from '@/hooks/use-local-storage'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useTranslation } from '@affine/i18n'; diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts index d285213ffb..11baa74c47 100644 --- a/packages/app/src/components/workspace-slider-bar/style.ts +++ b/packages/app/src/components/workspace-slider-bar/style.ts @@ -1,4 +1,4 @@ -import { displayFlex, styled, textEllipsis } from '@/styles'; +import { displayFlex, styled, textEllipsis } from '@affine/component'; import Link from 'next/link'; export const StyledSliderBar = styled.div<{ show: boolean }>( diff --git a/packages/app/src/pages/affine.tsx b/packages/app/src/pages/affine.tsx index 8cd3139372..c596ec061b 100644 --- a/packages/app/src/pages/affine.tsx +++ b/packages/app/src/pages/affine.tsx @@ -1,10 +1,10 @@ -import { displayFlex, styled } from '@/styles'; +import { displayFlex, styled } from '@affine/component'; import Loading from '@/components/loading'; -import Modal from '@/ui/modal'; +import { Modal } from '@affine/component'; import { useState } from 'react'; -import { Button } from '@/ui/button'; +import { Button } from '@affine/component'; import { FavouritedIcon } from '@blocksuite/icons'; -import { toast } from '@/ui/toast'; +import { toast } from '@affine/component'; export const StyledHeader = styled('div')({ height: '60px', width: '100vw', diff --git a/packages/app/src/pages/invite/[invite_code].tsx b/packages/app/src/pages/invite/[invite_code].tsx index 3af2a8c18e..155f85f714 100644 --- a/packages/app/src/pages/invite/[invite_code].tsx +++ b/packages/app/src/pages/invite/[invite_code].tsx @@ -1,6 +1,6 @@ import { useWorkspaceHelper } from '@/hooks/use-workspace-helper'; -import { styled } from '@/styles'; -import { Empty } from '@/ui/empty'; +import { styled } from '@affine/component'; +import { Empty } from '@affine/component'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import { PageLoading } from '@/components/loading'; diff --git a/packages/app/src/pages/playground/templates.tsx b/packages/app/src/pages/playground/templates.tsx index e30fdbee6e..318f597e92 100644 --- a/packages/app/src/pages/playground/templates.tsx +++ b/packages/app/src/pages/playground/templates.tsx @@ -5,7 +5,7 @@ import exampleMarkdown2 from '@/templates/AFFiNE-Docs.md'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useAppState } from '@/providers/app-state-provider'; -import { Button } from '@/ui/button'; +import { Button } from '@affine/component'; interface Template { name: string; source: string; @@ -21,7 +21,7 @@ const TemplateItemContainer = styled('div')(() => { }, }; }); -import { styled } from '@/styles'; +import { styled } from '@affine/component'; const TEMPLATES: Template[] = [ { name: 'Welcome-to-the-AFFiNE-Alpha.md', diff --git a/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx index 859ef9b430..4ccda04b71 100644 --- a/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx +++ b/packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx @@ -1,13 +1,13 @@ import { ReactElement, useEffect, useState } from 'react'; import { useAppState } from '@/providers/app-state-provider'; import type { NextPageWithLayout } from '../..//_app'; -import { displayFlex, styled } from '@/styles'; +import { displayFlex, styled } from '@affine/component'; import dynamic from 'next/dynamic'; import { useRouter } from 'next/router'; import { Page as PageStore, Workspace } from '@blocksuite/store'; import { PageLoading } from '@/components/loading'; -import { Breadcrumbs } from '@/ui/breadcrumbs'; -import { IconButton } from '@/ui/button'; +import { Breadcrumbs } from '@affine/component'; +import { IconButton } from '@affine/component'; import NextLink from 'next/link'; import { PaperIcon, SearchIcon } from '@blocksuite/icons'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; diff --git a/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx b/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx index 3d4a8a4dc3..37aaa7317d 100644 --- a/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx +++ b/packages/app/src/pages/public-workspace/[workspaceId]/index.tsx @@ -8,7 +8,7 @@ import { StyledBreadcrumbs, SearchButton, } from './[pageId]'; -import { Breadcrumbs } from '@/ui/breadcrumbs'; +import { Breadcrumbs } from '@affine/component'; import { WorkspaceUnitAvatar } from '@/components/workspace-avatar'; import { SearchIcon } from '@blocksuite/icons'; import { useModal } from '@/providers/GlobalModalProvider'; diff --git a/packages/app/src/pages/workspace/[workspaceId]/playground.tsx b/packages/app/src/pages/workspace/[workspaceId]/playground.tsx index 3be75a7ae1..28302d6dbd 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/playground.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/playground.tsx @@ -1,8 +1,8 @@ -import { styled } from '@/styles'; +import { styled } from '@affine/component'; import { ReactElement, ReactNode } from 'react'; import WorkspaceLayout from '@/components/workspace-layout'; -import { Button } from '@/ui/button'; +import { Button } from '@affine/component'; export const FeatureCardDiv = styled('section')({ width: '800px', diff --git a/packages/app/src/providers/ConfirmProvider.tsx b/packages/app/src/providers/ConfirmProvider.tsx index cc349f3c60..933f85c7df 100644 --- a/packages/app/src/providers/ConfirmProvider.tsx +++ b/packages/app/src/providers/ConfirmProvider.tsx @@ -1,6 +1,6 @@ import { createContext, useContext, useState, ReactNode } from 'react'; import type { PropsWithChildren } from 'react'; -import { Confirm, ConfirmProps } from '@/ui/confirm'; +import { Confirm, ConfirmProps } from '@affine/component'; type ConfirmContextValue = { confirm: (props: ConfirmProps) => Promise; diff --git a/packages/app/src/providers/ThemeProvider.tsx b/packages/app/src/providers/ThemeProvider.tsx index 07616f28e7..2001b7a096 100644 --- a/packages/app/src/providers/ThemeProvider.tsx +++ b/packages/app/src/providers/ThemeProvider.tsx @@ -1,9 +1,5 @@ import { createContext, useContext, useEffect, useState } from 'react'; -import { - ThemeProvider as EmotionThemeProvider, - Global, - css, -} from '@emotion/react'; +import { Global, css } from '@emotion/react'; import { ThemeProvider as MuiThemeProvider, createTheme as MuiCreateTheme, @@ -14,13 +10,14 @@ import { ThemeMode, ThemeProviderProps, ThemeProviderValue, -} from '@/styles/types'; +} from '@affine/component'; import { getLightTheme, getDarkTheme, globalThemeVariables, -} from '@/styles/theme'; -import { SystemThemeHelper, localStorageThemeHelper } from '@/styles/utils'; + ThemeProvider as ComponentThemeProvider, +} from '@affine/component'; +import { SystemThemeHelper, localStorageThemeHelper } from '@affine/component'; import useCurrentPageMeta from '@/hooks/use-current-page-meta'; export const ThemeContext = createContext({ @@ -106,9 +103,9 @@ export const ThemeProvider = ({ } `} /> - + {children} - + ); diff --git a/packages/app/src/styles/styled.ts b/packages/app/src/styles/styled.ts deleted file mode 100644 index 7410fa1356..0000000000 --- a/packages/app/src/styles/styled.ts +++ /dev/null @@ -1,3 +0,0 @@ -import emotionStyled from '@emotion/styled'; -export { css, keyframes } from '@emotion/react'; -export const styled = emotionStyled; diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json index 592edefeb6..1dc257d3b7 100644 --- a/packages/app/tsconfig.json +++ b/packages/app/tsconfig.json @@ -1,4 +1,5 @@ { + "extends": "../../tsconfig.json", "compilerOptions": { "target": "ES2020", "lib": ["dom", "dom.iterable", "esnext"], @@ -17,7 +18,8 @@ "experimentalDecorators": true, "baseUrl": ".", "paths": { - "@/*": ["src/*"] + "@/*": ["src/*"], + "@affine/component": ["../component/src/index"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], diff --git a/packages/component/.storybook/main.js b/packages/component/.storybook/main.js new file mode 100644 index 0000000000..9458beb434 --- /dev/null +++ b/packages/component/.storybook/main.js @@ -0,0 +1,44 @@ +const path = require('node:path'); + +module.exports = { + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + staticDirs: ['../../app/public'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + core: { + builder: '@storybook/builder-webpack5', + }, + webpackFinal: config => { + const transpile = config.module.rules.find(x => + x.test.toString().includes('tsx') + ).use; + transpile.push({ + loader: require.resolve('swc-loader'), + options: { + parseMap: true, + jsc: { + parser: { + syntax: 'typescript', + dynamicImport: true, + tsx: true, + }, + target: 'es2022', + transform: { + react: { + runtime: 'automatic', + }, + }, + }, + }, + }); + + config.resolve.alias = { + ...config.resolve.alias, + '@': path.resolve(__dirname, '..', 'src'), + '@affine/i18n': path.resolve(__dirname, '..', '..', 'i18n', 'src'), + }; + return config; + }, + reactOptions: { + fastRefresh: true, + }, +}; diff --git a/packages/component/.storybook/preview.js b/packages/component/.storybook/preview.js new file mode 100644 index 0000000000..d3914580a7 --- /dev/null +++ b/packages/component/.storybook/preview.js @@ -0,0 +1,9 @@ +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; diff --git a/packages/component/package.json b/packages/component/package.json new file mode 100644 index 0000000000..4cf948d9c3 --- /dev/null +++ b/packages/component/package.json @@ -0,0 +1,36 @@ +{ + "name": "@affine/component", + "private": true, + "version": "0.3.1", + "scripts": { + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" + }, + "dependencies": { + "@affine/i18n": "workspace:*", + "@blocksuite/editor": "0.4.0-alpha.2", + "@blocksuite/icons": "^2.0.2", + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/base": "=5.0.0-alpha.101", + "@mui/icons-material": "=5.10.9", + "@mui/material": "=5.8.6", + "lit": "^2.6.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@storybook/addon-actions": "^6.5.16", + "@storybook/addon-essentials": "^6.5.16", + "@storybook/addon-links": "^6.5.16", + "@storybook/builder-webpack5": "^6.5.16", + "@storybook/manager-webpack5": "^6.5.16", + "@storybook/react": "^6.5.16", + "@types/react": "^18.0.27", + "@types/react-dom": "18.0.10", + "swc": "^1.0.11", + "swc-loader": "^0.2.3", + "typescript": "^4.9.5", + "webpack": "^5.75.0" + } +} diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts new file mode 100644 index 0000000000..635963816f --- /dev/null +++ b/packages/component/src/index.ts @@ -0,0 +1,16 @@ +export * from './ui/breadcrumbs'; +export * from './ui/button'; +export * from './ui/confirm'; +export * from './ui/divider'; +export * from './ui/empty'; +export * from './ui/input'; +export * from './ui/layout'; +export * from './ui/menu'; +export * from './ui/modal'; +export * from './ui/popper'; +export * from './ui/shared/Container'; +export * from './ui/table'; +export * from './ui/toast'; +export * from './ui/tooltip'; +export * from './ui/mui'; +export * from './styles'; diff --git a/packages/component/src/stories/Breadcrumbs.stories.tsx b/packages/component/src/stories/Breadcrumbs.stories.tsx new file mode 100644 index 0000000000..38334b1793 --- /dev/null +++ b/packages/component/src/stories/Breadcrumbs.stories.tsx @@ -0,0 +1,19 @@ +import React, { useMemo } from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Breadcrumbs, getLightTheme, ThemeProvider } from '..'; + +export default { + title: 'AFFiNE/Breadcrumbs', + component: Breadcrumbs, +} as Meta; + +const Template: Story = args => ( + getLightTheme('page'), [])}> + + +); + +export const Primary = Template.bind({}); +Primary.args = { + children: [1, 2, 3], +}; diff --git a/packages/component/src/stories/Button.stories.tsx b/packages/component/src/stories/Button.stories.tsx new file mode 100644 index 0000000000..9fc32156e1 --- /dev/null +++ b/packages/component/src/stories/Button.stories.tsx @@ -0,0 +1,20 @@ +import React, { useMemo } from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Button, getLightTheme, ThemeProvider } from '..'; + +export default { + title: 'AFFiNE/Button', + component: Button, +} as Meta; + +const Template: Story = args => ( + getLightTheme('page'), [])}> +