refactor: move component into a single package (#898)

.gitignore

@@ -48,6 +48,7 @@ Thumbs.db
 
 .next
 out/
+storybook-static
 
 module-resolve.js
 module-resolve.cjs

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');

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/css": "^11.10.5",
-    "@emotion/react": "^11.10.4",
+    "@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/base": "=5.0.0-alpha.101",
-    "@mui/icons-material": "^5.10.9",
+    "@mui/icons-material": "=5.10.9",
-    "@mui/material": "^5.8.6",
+    "@mui/material": "=5.8.6",
     "@toeverything/pathfinder-logger": "workspace:@affine/logger@*",
     "cmdk": "^0.1.20",
     "css-spring": "^4.1.0",

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();

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 {

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,

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 {

packages/app/src/components/create-workspace/index.tsx

@@ -1,13 +1,13 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
-import { Button } from '@/ui/button';
+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;

packages/app/src/components/delete-workspace/index.tsx

@@ -1,7 +1,7 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
-import Input from '@/ui/input';
+import { Input } from '@affine/component';
 import { useState } from 'react';
 
 interface LoginModalProps {

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -14,8 +14,8 @@ import {
   UndoIcon,
   RedoIcon,
 } from './Icons';
-import { MuiSlide } from '@/ui/mui';
+import { MuiSlide } from '@affine/component';
-import { Tooltip } from '@/ui/tooltip';
+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';

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',

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';

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 {

packages/app/src/components/enable-workspace/EnableWorkspaceModal.tsx

@@ -1,11 +1,11 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { Modal, ModalWrapper } from '@/ui/modal';
+import { Modal, ModalWrapper } from '@affine/component';
-import { Button, IconButton } from '@/ui/button';
+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;

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';

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;

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';

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 {

packages/app/src/components/header/header-right-items/EditorOptionMenu.tsx

@@ -1,5 +1,5 @@
-import { Menu, MenuItem } from '@/ui/menu';
+import { Menu, MenuItem } from '@affine/component';
-import { IconButton } from '@/ui/button';
+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();

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 = () => {

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';

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

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 }) => {

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 { MuiGrow } from '@affine/component';
-import { Tooltip } from '@/ui/tooltip';
+import { Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { useModal } from '@/providers/GlobalModalProvider';
 import { useTheme } from '@/providers/ThemeProvider';

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 {

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 { Button } from '@affine/component';
-import { Content, FlexWrapper } from '@/ui/layout';
+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;

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 {

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';
 

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', {

packages/app/src/components/login-modal/index.tsx

@@ -1,6 +1,6 @@
-import { positionAbsolute, styled } from '@/styles';
+import { positionAbsolute, styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 import { useAppState } from '@/providers/app-state-provider';
 import { useTranslation } from '@affine/i18n';
 import { GoogleIcon } from './GoogleIcon';

packages/app/src/components/logout-modal/index.tsx

@@ -1,6 +1,6 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 import { Check, UnCheck } from './icon';
 import { useState } from 'react';
 import { useTranslation } from '@affine/i18n';

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';

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 {

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);

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;

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 { Menu, MenuItem } from '@affine/component';
-import { FlexWrapper } from '@/ui/layout';
+import { FlexWrapper } from '@affine/component';
-import { IconButton } from '@/ui/button';
+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 }) => {

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 { IconButton } from '@affine/component';
-import { Tooltip } from '@/ui/tooltip';
+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';

packages/app/src/components/page-list/styles.ts

@@ -1,5 +1,5 @@
-import { displayFlex, styled } from '@/styles';
+import { displayFlex, styled } from '@affine/component';
-import { TableRow } from '@/ui/table';
+import { TableRow } from '@affine/component';
 
 export const StyledTableContainer = styled.div(() => {
   return {

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,

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 {

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 { MuiSlide } from '@affine/component';
-import { ModalCloseButton } from '@/ui/modal';
+import { ModalCloseButton } from '@affine/component';
 import { getUaHelper } from '@/utils';
 import { useTranslation } from '@affine/i18n';
 type ModalProps = {

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',

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 {

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,

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 { Button } from '@affine/component';
-import { Menu, MenuItem } from '@/ui/menu';
+import { Menu, MenuItem } from '@affine/component';
 
 const LanguageMenuContent = () => {
   const { i18n } = useTranslation();

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();

packages/app/src/components/workspace-modal/index.tsx

@@ -1,9 +1,9 @@
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
-import { FlexWrapper } from '@/ui/layout';
+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';
 

packages/app/src/components/workspace-modal/styles.ts

@@ -1,5 +1,10 @@
-import { displayFlex, displayInlineFlex, styled, textEllipsis } from '@/styles';
+import {
-import { Button } from '@/ui/button';
+  displayFlex,
+  displayInlineFlex,
+  styled,
+  textEllipsis,
+} from '@affine/component';
+import { Button } from '@affine/component';
 
 export const StyledSplitLine = styled.div(({ theme }) => {
   return {

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 { Wrapper } from '@affine/component';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 export const ExportPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { t } = useTranslation();
   console.log(workspace);

packages/app/src/components/workspace-setting/PublishPage.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
-import Input from '@/ui/input';
+import { Input } from '@affine/component';
-import { toast } from '@/ui/toast';
+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();

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 = () => {

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';

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 { Modal } from '@affine/component';
-import Input from '@/ui/input';
+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 { ModalCloseButton } from '@affine/component';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 
 import { WorkspaceUnit } from '@affine/datacenter';
 import { Trans, useTranslation } from '@affine/i18n';

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 {

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 { ModalCloseButton } from '@affine/component';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 // import { getDataCenter } from '@affine/datacenter';

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 {

packages/app/src/components/workspace-setting/general/style.ts

@@ -1,5 +1,5 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import Input from '@/ui/input';
+import { Input } from '@affine/component';
 
 export const StyledInput = styled(Input)(({ theme }) => {
   return {

packages/app/src/components/workspace-setting/member/InviteMemberModal.tsx

@@ -1,10 +1,10 @@
 import { EmailIcon } from '@blocksuite/icons';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
+import { Modal, ModalWrapper, ModalCloseButton } from '@affine/component';
-import { Button } from '@/ui/button';
+import { Button } from '@affine/component';
-import Input from '@/ui/input';
+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';

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 { Menu, MenuItem } from '@affine/component';
-import { Empty } from '@/ui/empty';
+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';
 

packages/app/src/components/workspace-setting/member/style.ts

@@ -1,5 +1,5 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { MuiAvatar } from '@/ui/mui';
+import { MuiAvatar } from '@affine/component';
 
 export const StyledMemberTitleContainer = styled('li')(() => {
   return {

packages/app/src/components/workspace-setting/style.ts

@@ -1,5 +1,5 @@
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { FlexWrapper } from '@/ui/layout';
+import { FlexWrapper } from '@affine/component';
 export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',

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 {

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,

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/styles.ts

@@ -1,5 +1,5 @@
-import { MuiAvatar } from '@/ui/mui';
+import { MuiAvatar } from '@affine/component';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
 
 export const WorkspaceItemWrapper = styled('div')(({ theme }) => ({
   display: 'flex',

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -1,6 +1,6 @@
-import { MuiAvatar } from '@/ui/mui';
+import { MuiAvatar } from '@affine/component';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { StyledPopperContainer } from '@/ui/shared/Container';
+import { StyledPopperContainer } from '@affine/component';
 
 export const SelectorWrapper = styled('div')({
   width: '100%',

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 { MuiCollapse } from '@affine/component';
-import { Tooltip } from '@/ui/tooltip';
+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';

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 }>(

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',

packages/app/src/pages/invite/[invite_code].tsx

@@ -1,6 +1,6 @@
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-import { styled } from '@/styles';
+import { styled } from '@affine/component';
-import { Empty } from '@/ui/empty';
+import { Empty } from '@affine/component';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { PageLoading } from '@/components/loading';

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',

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 { Breadcrumbs } from '@affine/component';
-import { IconButton } from '@/ui/button';
+import { IconButton } from '@affine/component';
 import NextLink from 'next/link';
 import { PaperIcon, SearchIcon } from '@blocksuite/icons';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';

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';

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',

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<boolean>;

packages/app/src/providers/ThemeProvider.tsx

@@ -1,9 +1,5 @@
 import { createContext, useContext, useEffect, useState } from 'react';
-import {
+import { Global, css } from '@emotion/react';
-  ThemeProvider as EmotionThemeProvider,
-  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';
+  ThemeProvider as ComponentThemeProvider,
-import { SystemThemeHelper, localStorageThemeHelper } from '@/styles/utils';
+} from '@affine/component';
+import { SystemThemeHelper, localStorageThemeHelper } from '@affine/component';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 
 export const ThemeContext = createContext<ThemeProviderValue>({
@@ -106,9 +103,9 @@ export const ThemeProvider = ({
             }
           `}
         />
-        <EmotionThemeProvider theme={themeStyle}>
+        <ComponentThemeProvider theme={themeStyle}>
           {children}
-        </EmotionThemeProvider>
+        </ComponentThemeProvider>
       </ThemeContext.Provider>
     </MuiThemeProvider>
   );

packages/app/src/styles/styled.ts

@@ -1,3 +0,0 @@
-import emotionStyled from '@emotion/styled';
-export { css, keyframes } from '@emotion/react';
-export const styled = emotionStyled;

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"],

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,
+  },
+};

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$/,
+    },
+  },
+};

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

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';

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 => (
+  <ThemeProvider theme={useMemo(() => getLightTheme('page'), [])}>
+    <Breadcrumbs {...args} />
+  </ThemeProvider>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: [<span>1</span>, <span>2</span>, <span>3</span>],
+};

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 => (
+  <ThemeProvider theme={useMemo(() => getLightTheme('page'), [])}>
+    <Button {...args} />
+  </ThemeProvider>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  type: 'primary',
+  children: 'This is a button',
+};

packages/component/src/styles/index.ts

@@ -1,5 +1,5 @@
-export type { ThemeMode, ThemeProviderProps, AffineTheme } from './types';
-
 export * from './styled';
 export * from './theme';
 export * from './helper';
+export * from './types';
+export * from './utils';

packages/component/src/styles/styled.tsx

@@ -0,0 +1,15 @@
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import emotionStyled from '@emotion/styled';
+import type { PropsWithChildren } from 'react';
+import { AffineTheme } from './types';
+export { css, keyframes } from '@emotion/react';
+export const styled = emotionStyled;
+
+export const ThemeProvider = ({
+  theme,
+  children,
+}: PropsWithChildren<{
+  theme: AffineTheme;
+}>) => {
+  return <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>;
+};

packages/component/src/styles/theme.ts

@@ -1,6 +1,6 @@
 import '@emotion/react';
 import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
-import { EditorContainer } from '@blocksuite/editor';
+import type { EditorContainer } from '@blocksuite/editor';
 
 const basicFontFamily =
   'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';

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

@@ -1,5 +1,5 @@
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
-import { styled } from '@/styles';
+import { styled } from '../../styles';
 
 export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {
   return {

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

@@ -1,4 +1,4 @@
-import { styled } from '@/styles';
+import { styled } from '../../styles';
 import { ButtonProps } from './interface';
 import { getButtonColors } from './utils';
 

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

@@ -1,6 +1,6 @@
-import { absoluteCenter, displayInlineFlex, styled } from '@/styles';
+import { absoluteCenter, displayInlineFlex, styled } from '../../styles';
 import { CSSProperties } from 'react';
-import { ButtonProps } from '@/ui/button/interface';
+import { ButtonProps } from './interface';
 import { getSize, getButtonColors } from './utils';
 
 export const StyledIconButton = styled('button', {
@@ -213,7 +213,7 @@ export const StyledButton = styled('button', {
       },
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      ...getButtonColors(theme, type, disabled, {
+      ...getButtonColors(theme, type, {
         hoverBackground,
         hoverColor,
         hoverStyle,

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

@@ -1,4 +1,4 @@
-import { AffineTheme } from '@/styles';
+import { AffineTheme } from '../../styles';
 import {
   SIZE_SMALL,
   SIZE_MIDDLE,