diff --git a/.github/CLA.md b/.github/CLA.md new file mode 100644 index 0000000000..22324966d9 --- /dev/null +++ b/.github/CLA.md @@ -0,0 +1,48 @@ + + +# AFFiNE Contributor License Agreement + +To clarify the intellectual property license granted with contributions from any person or entity, AFFiNE must have on file a signed Contributor License Agreement ("CLA") from each contributor, indicating agreement with the license terms below. This agreement is for your protection as a contributor as well as the protection of the AFFiNE and its users; it does not change your rights to use your own contributions for any other purpose. + +You accept and agree to the following terms and conditions for your past, present and future contributions submitted to AFFiNE. You should sign this agreement before submitting your first contribution. Except for the license granted herein to AFFiNE and recipients of software distributed by AFFiNE, You reserve all right, title, and interest in and to Your Contributions. + +1. Parties. + + (a) "AFFiNE" refers to the project's operator, TOEVERYTHING PTE. LTD registered in Republic of Singapore. + + (b) "You" (or "Your") means the copyright owner or legal entity authorized by the copyright owner that is making this Agreement with AFFiNE. + +2. Definitions. "Contribution" shall mean any original work of authorship, including any modifications or additions to an existing work, that is intentionally submitted by You to AFFiNE for inclusion in, or documentation of, any of the products owned or managed by AFFiNE (the "Work"). For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to AFFiNE or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, AFFiNE for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by You as "Not a Contribution". + +3. Grant of Copyright License. Subject to the terms and conditions of this Agreement, You hereby grant to AFFiNE and to recipients of software distributed by AFFiNE a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to use, copy, reproduce, prepare derivative works of, distribute, sublicense, and publicly perform and display the Contribution and such derivative works on any licensing terms, including without limitation open source licenses and binary, proprietary, or commercial licenses. + +4. Grant of Patent License. Subject to the terms and conditions of this Agreement, You hereby grant to AFFiNE and to recipients of software distributed by AFFiNE a perpetual, irrevocable, non-exclusive, worldwide, no-charge, royalty-free patent license to make, have made, use, sell, offer to sell, import, and otherwise transfer your Contribution in whole or in part, alone or in combination with or included in any product, work or materials arising out of the project to which your contribution was submitted, and to sublicense these same rights to third parties through multiple levels of sublicensees or other licensing arrangements. + +5. Except as set out above, You keep all right, title, and interest in your contribution. The rights that you grant to AFFiNE under these terms are effective on the date you first submitted a contribution to AFFiNE, even if your submission took place before the date you sign these terms. + +6. You promise that: + +- Each of Your Contributions is Your original work and that you are legally entitled to grant the above license. +- Each of Your Contributions does not to the best of your knowledge violate any third party's copyrights, trademarks, patents, or other intellectual property rights; +- Your Contribution submissions include complete details of any third-party license or other restriction (including, but not limited to, related patents and trademarks) of which you are personally aware and which are associated with any part of Your Contributions. +- If You are an individual and if your employer(s) has rights to intellectual property that you create that includes your Contributions, you represent that you have received permission to make Contributions on behalf of that employer, that your employer has waived such rights for your Contributions to AFFiNE, or that your employer has executed a separate Corporate CLA with AFFiNE. + +7. You provide Your Contributions on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. + +8. You agree to notify AFFiNE of any facts or circumstances of which you become aware that would make these representations inaccurate in any respect. + +9. This Agreement will be governed by the laws of Republic of Singapore without reference to conflict of laws principles. + +## List of Contributors + +The below-signed are contributors to a code repository that is part of the project named "AFFiNE". Each below-signed contributor has read, understand and agrees to the terms above in the section within this document entitled "AFFiNE Contributor License Agreement" as of the date beside their real name (or entity name) and GitHub account name. + +--- + + + +- Dark Sky, @darkskygit, 2022/07/22 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/README.md b/README.md index dc750f48df..012b996f7d 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,8 @@ Before we tell you how to get started with AFFiNE, we'd like to shamelessly plug Calling all developers, testers, tech writers and more! Contributions of all types are more than welcome, you can read more in [docs/types-of-contributions.md](docs/types-of-contributions.md). If you are interested in contributing code, read our [docs/CONTRIBUTING.md](docs/CONTRIBUTING.md) and feel free to check out our GitHub issues to get stuck in to show us what you’re made of. +**Before you start contributing, please make sure you have read and accepted our [Contributor License Agreement]. To indicate your agreement, simply edit this file and submit a pull request.** + For **bug reports**, **feature requests** and other **suggestions** you can also [create a new issue](https://github.com/toeverything/AFFiNE/issues/new/choose) and choose the most appropiate template for your feedback. For **translation** and **language support** you can visit our [i18n General Space](https://community.affine.pro/c/i18n-general). @@ -197,15 +199,15 @@ Thanks a lot to the community for providing such powerful and simple libraries, ## Self-Host -Get started with Docker and deploy your own feature-rich, restriction-free deployment of AFFiNE - check the [latest packages](https://github.com/toeverything/AFFiNE/pkgs/container/affine-self-hosted). +Get started with Docker and deploy your own feature-rich, restriction-free deployment of AFFiNE - check the [latest packages]. ## Hiring -Some amazing companies including AFFiNE are looking for developers! Are you interested in helping build with AFFiNE and/or its partners? Check out some of the latest [jobs available](./docs/jobs/summary.md). +Some amazing companies including AFFiNE are looking for developers! Are you interested in helping build with AFFiNE and/or its partners? Check out some of the latest [jobs available]. ## Upgrading -For upgrading information please see our [update page](https://affine.pro/blog?tag=Release%20Note). +For upgrading information please see our [update page]. ## Feature Request @@ -213,8 +215,20 @@ For feature request please see https://community.affine.pro/c/feature-requests/ ## Is it awesome? -[These people](https://twitter.com/AffineOfficial/followers) seem to like it. +[These people] seem to like it. + +## Building + +See [BUILDING.md] for instructions on how to build AFFiNE from source code. ## License -See [LICENSE](/LICENSE) for details. +See [LICENSE] for details. + +[license]: ./LICENSE +[building.md]: ./docs/BUILDING.md +[these people]: https://twitter.com/AffineOfficial/followers +[update page]: https://affine.pro/blog?tag=Release%20Note +[jobs available]: ./docs/jobs/summary.md +[latest packages]: https://github.com/toeverything/AFFiNE/pkgs/container/affine-self-hosted +[contributor license agreement]: https://github.com/toeverything/affine/edit/master/.github/CLA.md diff --git a/docs/BUILDING.md b/docs/BUILDING.md new file mode 100644 index 0000000000..1a5d37afb4 --- /dev/null +++ b/docs/BUILDING.md @@ -0,0 +1,55 @@ +# Building AFFiNE + +## Table of Contents + +- [Prerequisites](#prerequisites) +- [Setup Environment](#setup-environment) +- [Play with Playground](#play-with-playground) +- [Testing](#testing) + +## Prerequisites + +We suggest develop our product under node.js LTS(Long-term support) version + +### Option 1: Manually install node.js + +install [Node LTS version](https://nodejs.org/en/download) + +> Up to now, the major node.js version is 18.x + +### Option 2: Use node version manager + +install [nvm](https://github.com/nvm-sh/nvm) + +```sh +nvm install --lts +nvm use --lts +``` + +## Setup Environment + +```sh +# install dependencies +pnpm install +``` + +## Play with Playground + +```sh +pnpm dev +``` + +The playground page should work at [http://localhost:8080/](http://localhost:8080/) + +## Testing + +Adding test cases is strongly encouraged when you contribute new features and bug fixes. + +We use [Playwright](https://playwright.dev/) for E2E test, and [vitest](https://vitest.dev/) for unit test. + +To test locally, please make sure browser binaries are already installed via `npx playwright install`. Then there are multi commands to choose from: + +```sh +# run tests in headless mode in another terminal window +pnpm test +``` diff --git a/package.json b/package.json index 70b762cf6d..74ecc65a12 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dev:local": "pnpm --filter=!@affine/app build && cross-env NODE_API_SERVER=local pnpm --filter @affine/app dev", "build": " pnpm --filter=!@affine/app build && pnpm --filter!=@affine/datacenter -r build", "build:client": " pnpm --filter=@affine/client-app build:app", + "build:storybook": " pnpm -r build-storybook", "export": "pnpm --filter @affine/app export", "start": "pnpm --filter @affine/app start", "lint": "pnpm --filter @affine/app lint", @@ -33,7 +34,6 @@ "@typescript-eslint/eslint-plugin": "^5.47.0", "@typescript-eslint/parser": "^5.47.0", "concurrently": "^7.6.0", - "babel-plugin-istanbul": "^6.1.1", "cross-env": "^7.0.3", "eslint": "^8.30.0", "eslint-config-next": "12.3.1", diff --git a/packages/app/.babelrc.js b/packages/app/.babelrc.js deleted file mode 100644 index e98989a64f..0000000000 --- a/packages/app/.babelrc.js +++ /dev/null @@ -1,28 +0,0 @@ -const plugins = []; - -if (process.env.NODE_ENV === 'development' || process.env.COVERAGE === 'true') { - console.log( - 'Detected development environment. Instrumenting code for coverage.' - ); - plugins.push('istanbul'); -} - -plugins.push([ - '@emotion', - { - // See https://emotion.sh/docs/@emotion/babel-plugin - importMap: { - '@/styles': { - styled: { - canonicalImport: ['@emotion/styled', 'default'], - styledBaseImport: ['@/styles', 'styled'], - }, - }, - }, - }, -]); - -module.exports = { - presets: ['next/babel'], - plugins, -}; diff --git a/packages/app/next.config.js b/packages/app/next.config.js index 1ef34b267f..964b6e65fd 100644 --- a/packages/app/next.config.js +++ b/packages/app/next.config.js @@ -11,8 +11,8 @@ const EDITOR_VERSION = enableDebugLocal const profileTarget = { ac: '100.85.73.88:12001', - dev: '100.77.180.48:11001', - test: '100.77.180.48:11001', + dev: '100.84.105.99:11001', + test: '100.84.105.99:11001', stage: '', pro: 'http://pathfinder.affine.pro', local: '127.0.0.1:3000', @@ -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 cf19c695c9..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", @@ -39,7 +40,6 @@ "yjs": "^13.5.45" }, "devDependencies": { - "@emotion/babel-plugin": "^11.10.5", "@types/node": "18.7.18", "@types/react": "18.0.20", "@types/react-dom": "18.0.6", 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 eff0dc21aa..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 { @@ -59,7 +59,6 @@ export const Editor = ({ page, workspace, setEditor }: Props) => { } setEditor(editor); - document.title = page.meta.title || 'Untitled'; return ret; }, [workspace, page, setEditor]); 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 0ad89a4a37..dce34473a8 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..dc64ae05ce 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(); @@ -37,12 +37,12 @@ const PopoverContent = () => { onClick={() => { toggleFavoritePage(id); toast( - favorite ? t('Removed from Favourites') : t('Added to Favourites') + favorite ? t('Removed from Favorites') : t('Added to Favorites') ); }} icon={favorite ? : } > - {favorite ? t('Remove from favourites') : t('Add to favourites')} + {favorite ? t('Remove from favorites') : t('Add to favorites')} : } 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..5252e2bbc0 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; @@ -12,7 +12,7 @@ export const PageListEmpty = (props: { listType?: string }) => { sx={{ marginTop: '100px', marginBottom: '30px' }} /> {listType === 'all' &&

{t('emptyAllPages')}

} - {listType === 'favorite' &&

{t('emptyFavourite')}

} + {listType === 'favorite' &&

{t('emptyFavorite')}

} {listType === 'trash' &&

{t('emptyTrash')}

} ); diff --git a/packages/app/src/components/page-list/OperationCell.tsx b/packages/app/src/components/page-list/OperationCell.tsx index a9efc634c4..b6435ece70 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 }) => { @@ -27,12 +27,12 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { onClick={() => { toggleFavoritePage(id); toast( - favorite ? t('Removed from Favourites') : t('Added to Favourites') + favorite ? t('Removed from Favorites') : t('Added to Favorites') ); }} icon={favorite ? : } > - {favorite ? t('Remove from favourites') : t('Add to favourites')} + {favorite ? t('Remove from favorites') : t('Add to favorites')} { diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx index 7623eb4895..8386f902cc 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'; @@ -35,7 +41,7 @@ const FavoriteTag = ({ const { t } = useTranslation(); return ( {favorite ? ( - + ) : ( )} @@ -100,6 +106,7 @@ export const PageList = ({ {pageList.map((pageMeta, index) => { return ( { if (isPublic) { 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/config.ts b/packages/app/src/components/quick-search/config.ts index 9aa284558e..a171ea32e1 100644 --- a/packages/app/src/components/quick-search/config.ts +++ b/packages/app/src/components/quick-search/config.ts @@ -22,7 +22,7 @@ export const useSwitchToConfig = ( icon: AllPagesIcon, }, { - title: t('Favourites'), + title: t('Favorites'), href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/favorite` : '', diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index 97921efca7..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, @@ -40,7 +40,6 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { // Add ‘⌘+K’ shortcut keys as switches useEffect(() => { if (router.pathname.startsWith('/404')) { - triggerQuickSearchModal(false); return; } const down = (e: KeyboardEvent) => { @@ -59,7 +58,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { document.addEventListener('keydown', down, { capture: true }); return () => document.removeEventListener('keydown', down, { capture: true }); - }, [open, router.pathname, triggerQuickSearchModal]); + }, [open, router, triggerQuickSearchModal]); useEffect(() => { if (router.pathname.startsWith('/public-workspace')) { @@ -68,6 +67,12 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { return setIsPublic(false); } }, [router]); + useEffect(() => { + if (router.pathname.startsWith('/404')) { + return onClose(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return ( { return { @@ -13,7 +13,7 @@ export const StyledContent = styled('div')(({ theme }) => { letterSpacing: '0.06em', '[cmdk-group-heading]': { margin: '5px 16px', - fontSize: theme.font.sm, + fontSize: theme.font.base, fontWeight: '500', }, '[aria-selected="true"]': { @@ -28,7 +28,7 @@ export const StyledJumpTo = styled('div')(({ theme }) => { ...displayFlex('center', 'start'), flexDirection: 'column', padding: '10px 10px 10px 0', - fontSize: theme.font.sm, + fontSize: theme.font.base, strong: { fontWeight: '500', marginBottom: '10px', @@ -41,7 +41,7 @@ export const StyledNotFound = styled('div')(({ theme }) => { ...displayFlex('center', 'center'), flexDirection: 'column', padding: '5px 16px', - fontSize: theme.font.sm, + fontSize: theme.font.base, span: { width: '100%', fontWeight: '500', @@ -75,7 +75,7 @@ export const StyledInputContent = styled('div')(({ theme }) => { export const StyledShortcut = styled('div')(({ theme }) => { return { color: theme.colors.placeHolderColor, - fontSize: theme.font.sm, + fontSize: theme.font.base, whiteSpace: 'nowrap', }; }); @@ -109,7 +109,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => { export const StyledModalFooter = styled('div')(({ theme }) => { return { - fontSize: theme.font.sm, + fontSize: theme.font.base, lineHeight: '22px', marginBottom: '8px', textAlign: 'center', @@ -127,7 +127,7 @@ export const StyledModalFooterContent = styled.button(({ theme }) => { return { width: '612px', height: '32px', - fontSize: theme.font.sm, + fontSize: theme.font.base, lineHeight: '22px', textAlign: 'center', ...displayFlex('center', 'center'), @@ -144,7 +144,7 @@ export const StyledListItem = styled.button(({ theme }) => { return { width: '612px', height: '32px', - fontSize: theme.font.sm, + fontSize: theme.font.base, color: 'inherit', paddingLeft: '12px', borderRadius: '5px', 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..8c3850e396 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'; @@ -71,6 +71,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => { { onClose(); }} 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 241c97f060..2c33eb3bf2 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'; @@ -18,7 +18,7 @@ import { Upload } from '@/components/file-upload'; export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { const [showDelete, setShowDelete] = useState(false); const [showLeave, setShowLeave] = useState(false); - const [workspaceName, setWorkspaceName] = useState(workspace.name); + const [workspaceName, setWorkspaceName] = useState(workspace?.name); const { currentWorkspace, isOwner } = useAppState(); const { updateWorkspace } = useWorkspaceHelper(); const { t } = useTranslation(); @@ -33,7 +33,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { currentWorkspace && (await updateWorkspace({ avatarBlob: blob }, currentWorkspace)); }; - if (!workspace) { return null; } @@ -42,22 +41,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => { <> {t('Workspace Avatar')} - - - <> -
- -
- - - + + {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 58538707f2..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 { @@ -19,26 +19,29 @@ export const StyledProviderInfo = styled('p')(({ theme }) => { }; }); -export const StyledAvatar = styled('div')(() => { - return { - position: 'relative', - cursor: 'pointer', - ':hover': { - '.camera-icon': { - display: 'block', +export const StyledAvatar = styled('div')( + ({ disabled }: { disabled: boolean }) => { + return { + position: 'relative', + marginRight: '20px', + cursor: disabled ? 'default' : 'pointer', + ':hover': { + '.camera-icon': { + display: 'block', + }, }, - }, - '.camera-icon': { - position: 'absolute', - display: 'none', - width: '100%', - height: '100%', - borderRadius: '50%', - backgroundColor: 'rgba(60, 61, 63, 0.5)', - top: 0, - left: 0, - textAlign: 'center', - lineHeight: '72px', - }, - }; -}); + '.camera-icon': { + position: 'absolute', + display: 'none', + width: '100%', + height: '100%', + borderRadius: '50%', + backgroundColor: 'rgba(60, 61, 63, 0.5)', + top: 0, + left: 0, + textAlign: 'center', + lineHeight: '72px', + }, + }; + } +); 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..5c98f28ff3 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'; @@ -125,13 +125,14 @@ export const WorkSpaceSliderBar = () => { - {t('All pages')} + + {t('All pages')} - {t('Favourites')} + {t('Favorites')} ( diff --git a/packages/app/src/pages/404.tsx b/packages/app/src/pages/404.tsx index 0eef5261e5..6baddddeaa 100644 --- a/packages/app/src/pages/404.tsx +++ b/packages/app/src/pages/404.tsx @@ -1,5 +1,13 @@ import NotfoundPage from '@/components/404'; +import Head from 'next/head'; export default function Custom404() { - return ; + return ( + <> + + 404 - AFFiNE + + + + ); } diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx index 862d9b0f97..00b2dcf3b2 100644 --- a/packages/app/src/pages/_app.tsx +++ b/packages/app/src/pages/_app.tsx @@ -50,6 +50,7 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => { sizes="180x180" href="/icons/apple-touch-icon.png" /> + AFFiNE { - const [show, setShow] = useState(false); - return ( - <> - - - - { - setShow(false); - }} - > -
hi
- - - - - - - - - - - - - ); -}; - -export default Affine; diff --git a/packages/app/src/pages/affine/[workspace_id].tsx b/packages/app/src/pages/affine/[workspace_id].tsx deleted file mode 100644 index 875928acf9..0000000000 --- a/packages/app/src/pages/affine/[workspace_id].tsx +++ /dev/null @@ -1,20 +0,0 @@ -// for dynamic route get workspace id maybe path will change -import { useRouter } from 'next/router'; - -const Post = () => { - const router = useRouter(); - const { workspace_id } = router.query; - - return ( -

- workspace_id: {workspace_id}, -

- ); -}; - -export default Post; 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 deleted file mode 100644 index e30fdbee6e..0000000000 --- a/packages/app/src/pages/playground/templates.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { ReactElement } from 'react'; -import WorkspaceLayout from '@/components/workspace-layout'; -import exampleMarkdown1 from '@/templates/Welcome-to-the-AFFiNE-Alpha.md'; -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'; -interface Template { - name: string; - source: string; -} -const TemplateItemContainer = styled('div')(() => { - return { - color: 'blue', - padding: '10px 15px', - borderBottom: '1px solid #eee', - cursor: 'pointer', - '&:hover': { - background: '#eee', - }, - }; -}); -import { styled } from '@/styles'; -const TEMPLATES: Template[] = [ - { - name: 'Welcome-to-the-AFFiNE-Alpha.md', - source: exampleMarkdown1, - }, - { - name: 'AFFiNE-Docs.md', - source: exampleMarkdown2, - }, -]; - -const All = () => { - const { openPage, createPage } = usePageHelper(); - const { currentWorkspace } = useAppState(); - const _applyTemplate = function (pageId: string, template: Template) { - const page = currentWorkspace?.blocksuiteWorkspace?.getPage(pageId); - - const title = template.name; - if (page) { - currentWorkspace?.blocksuiteWorkspace?.setPageMeta(page.id, { title }); - if (page && page.root === null) { - setTimeout(async () => { - const editor = document.querySelector('editor-container'); - if (editor) { - page.addBlock({ flavour: 'affine:surface' }, null); - const frameId = page.addBlock({ flavour: 'affine:frame' }, pageId); - // TODO blocksuite should offer a method to import markdown from store - await editor.clipboard.importMarkdown( - template.source, - `${frameId}` - ); - page.resetHistory(); - editor.requestUpdate(); - } - }, 300); - } - } - }; - const _handleAppleTemplate = async function (template: Template) { - const pageId = await createPage(); - if (pageId) { - openPage(pageId); - _applyTemplate(pageId, template); - } - }; - const _handleAppleTemplateFromFilePicker = async () => { - if (!window.showOpenFilePicker) { - return; - } - const arrFileHandle = await window.showOpenFilePicker({ - types: [ - { - accept: { - 'image/*': ['.md'], - }, - }, - ], - multiple: false, - }); - for (const fileHandle of arrFileHandle) { - const file = await fileHandle.getFile(); - const text = await file.text(); - _handleAppleTemplate({ - name: file.name, - source: text, - }); - } - }; - - return ( -
-
-

Templates

- {TEMPLATES.map(template => { - return ( - _handleAppleTemplate(template)} - > - {template.name} - - - ); - })} -
-

Import Markdown

- -
-
- ); -}; - -All.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default All; 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/testing-only.tsx b/packages/app/src/pages/testing-only.tsx deleted file mode 100644 index a050496bb9..0000000000 --- a/packages/app/src/pages/testing-only.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { useEffect } from 'react'; -import { getDataCenter } from '@affine/datacenter'; -/** - * testing only when development - */ - -const Page = () => { - useEffect(() => { - getDataCenter().then(dc => { - // @ts-expect-error global variable - window.dc = dc; - }); - }, []); - - return
Testing only
; -}; - -export default Page; diff --git a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx index ebb5b8b93f..a8f6284b1d 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/[pageId].tsx @@ -15,6 +15,8 @@ import { useRouter } from 'next/router'; import { usePageHelper } from '@/hooks/use-page-helper'; import dynamic from 'next/dynamic'; import { EditorContainer } from '@blocksuite/editor'; +import Head from 'next/head'; +import { useTranslation } from '@affine/i18n'; const DynamicBlocksuite = dynamic(() => import('@/components/editor'), { ssr: false, }); @@ -25,8 +27,12 @@ const Page: NextPageWithLayout = () => { (editor: EditorContainer) => setEditor.current(editor), [setEditor] ); + const { t } = useTranslation(); return ( <> + + {currentPage?.meta?.title || t('Untitled')} - AFFiNE + diff --git a/packages/app/src/pages/workspace/[workspaceId]/all.tsx b/packages/app/src/pages/workspace/[workspaceId]/all.tsx index 5d8eb5b431..72ad34c485 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/all.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/all.tsx @@ -5,6 +5,8 @@ import { ReactElement } from 'react'; import WorkspaceLayout from '@/components/workspace-layout'; import { useTranslation } from '@affine/i18n'; import { PageMeta, useAppState } from '@/providers/app-state-provider'; +import Head from 'next/head'; + const All = () => { const { currentWorkspace } = useAppState(); const pageList = (currentWorkspace?.blocksuiteWorkspace?.meta.pageMetas || @@ -12,6 +14,9 @@ const All = () => { const { t } = useTranslation(); return ( <> + + {t('All pages')} - AFFiNE + }>{t('All pages')} !p.trash)} diff --git a/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx b/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx index cc3f0369a3..8714857a53 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx @@ -5,13 +5,17 @@ import { ReactElement } from 'react'; import WorkspaceLayout from '@/components/workspace-layout'; import { useTranslation } from '@affine/i18n'; import { useAppState } from '@/providers/app-state-provider'; +import Head from 'next/head'; export const Favorite = () => { const { pageList } = useAppState(); const { t } = useTranslation(); return ( <> + + {t('Favorites')} - AFFiNE + }> - {t('Favourites')} + {t('Favorites')} p.favorite && !p.trash)} 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/pages/workspace/[workspaceId]/setting.tsx b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx index 8754e52a7e..d2c70c3dd0 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/setting.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/setting.tsx @@ -19,6 +19,7 @@ import WorkspaceLayout from '@/components/workspace-layout'; import { WorkspaceUnit } from '@affine/datacenter'; import { useTranslation } from '@affine/i18n'; import { PageListHeader } from '@/components/header'; +import Head from 'next/head'; const useTabMap = () => { const { t } = useTranslation(); @@ -79,6 +80,9 @@ const WorkspaceSetting = () => { useTabMap(); return ( <> + + {t('Settings')} - AFFiNE + }>{t('Settings')} diff --git a/packages/app/src/pages/workspace/[workspaceId]/trash.tsx b/packages/app/src/pages/workspace/[workspaceId]/trash.tsx index d0c2350373..10c786c4fc 100644 --- a/packages/app/src/pages/workspace/[workspaceId]/trash.tsx +++ b/packages/app/src/pages/workspace/[workspaceId]/trash.tsx @@ -5,11 +5,15 @@ import { ReactElement } from 'react'; import WorkspaceLayout from '@/components/workspace-layout'; import { useTranslation } from '@affine/i18n'; import { useAppState } from '@/providers/app-state-provider'; +import Head from 'next/head'; export const Trash = () => { const { pageList } = useAppState(); const { t } = useTranslation(); return ( <> + + {t('Trash')} - AFFiNE + }>{t('Trash')} p.trash)} 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/src/templates/Welcome-to-AFFiNE-Abbey-Alpha-Wood.md b/packages/app/src/templates/Welcome-to-AFFiNE-Abbey-Alpha-Wood.md index 91e2fe48c0..7417111470 100644 --- a/packages/app/src/templates/Welcome-to-AFFiNE-Abbey-Alpha-Wood.md +++ b/packages/app/src/templates/Welcome-to-AFFiNE-Abbey-Alpha-Wood.md @@ -22,7 +22,7 @@ docker run -it --name affine -d -v [YOUR_PATH]:/app/data -p 3000:3000 ghcr.io/to ### In this release, you can now: -- Manage your pages from the collapsible **sidebar**, which allows you to add **favourites** and restore deleted files from the **trash** +- Manage your pages from the collapsible **sidebar**, which allows you to add **favorites** and restore deleted files from the **trash** - Search through all your content with the quick search - activate with `Ctrl/⌘ + K` - A friendly Reminder: - In the case of unselected text, `Ctrl/⌘ + K` activates quick search; @@ -53,7 +53,7 @@ console.log('Hello world'); [] Send a page to trash -[] Favourite a page +[] Favorite a page **Have an enjoyable editing experience !!!** 😃 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'), [])}> +