diff --git a/.github/CLA.md b/.github/CLA.md new file mode 100644 index 000000000..22324966d --- /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 090865ce9..80b073618 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 dc750f48d..012b996f7 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 000000000..1a5d37afb --- /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 70b762cf6..74ecc65a1 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 e98989a64..000000000 --- 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 1ef34b267..964b6e65f 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 cf19c695c..39dcfda30 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 ffba2a08d..55b04dbe7 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 450be72e6..4e0bd9b64 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 d22b2ea6c..fdade2b7a 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 8ac277370..1ba3b3b88 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 2c374a990..c3ccca93d 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 cead4b135..51418532a 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 e26189986..b64b07c06 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 ff925808e..31d2fbbdd 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 d17f65bd1..bb9a7d5df 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 eff0dc21a..176777f86 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 95da09511..548f7ae8b 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 cd4d558ff..6edff7f46 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 80b089c35..35db5abc6 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 0ad89a4a3..dce34473a 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 dfc00eef1..9b73c096f 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 b4eef4ebf..dc64ae05c 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 0923de989..0cedea6fe 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 af0a12a8d..96156fd91 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 59d82211e..279d09b99 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 9870e390a..4e88860ee 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 9fb883481..4f7b12684 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 9373a53da..46b2e271a 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 d8eaa2ffd..e9d160294 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 580d8a153..1665d2899 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 ef853c4d6..92e60d7f4 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 31906e1b7..b88f0f7c8 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 880ebe6e3..105334a77 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 d710b2e45..450b8834d 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 b568c2697..3f7b0d976 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 40a8bcc37..771a6b585 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 4ffc4e95c..d01404986 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 f8dfc6745..5252e2bbc 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 a9efc634c..b6435ece7 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 7623eb489..8386f902c 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 fcf80e813..6b03fb7ce 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 9aa284558..a171ea32e 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 97921efca..3ca942444 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 08416e312..bfe6c75a7 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 fabe9b3fe..d3696090c 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 e935901b3..4c246db80 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 9a591e197..45a84998d 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 47e4ae02a..c79b3f5c1 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 e075bddf0..d90fb9daa 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 4a6e78e90..8c3850e39 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 7c2cc9a37..d022bc8df 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 d2c598880..1a375ee17 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 c2a1b258a..fefb96742 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 c98b06da4..fa6586c3e 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 241c97f06..2c33eb3bf 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 af2570f81..0d4231414 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 d029d54fe..05396823f 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 3c91b026b..bd18e21b0 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 1d9696af3..bbbf7e1c9 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 58538707f..35c44e5f3 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 15c5d5f58..e7ca8982d 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 c2d4c76a6..7a64e14f5 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 3345f591a..b1d350205 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 12fe79835..1dad9cb83 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 120a00395..48c7c7ac4 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 d7771f1ac..7ea99ecce 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 d56661de3..f1eb324a6 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 e700d8cd8..600bcaf56 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 4a56307d1..5c98f28ff 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 0eef5261e..6baddddea 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 862d9b0f9..00b2dcf3b 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 875928acf..000000000 --- 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 3af2a8c18..155f85f71 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 e30fdbee6..000000000 --- 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 859ef9b43..4ccda04b7 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 3d4a8a4dc..37aaa7317 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 a050496bb..000000000 --- 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 ebb5b8b93..a8f6284b1 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 5d8eb5b43..72ad34c48 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 cc3f0369a..8714857a5 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 3be75a7ae..28302d6db 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 8754e52a7..d2c70c3dd 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 d0c235037..10c786c4f 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 cc349f3c6..933f85c7d 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 07616f28e..2001b7a09 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 7410fa135..000000000 --- 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 91e2fe48c..741711147 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 592edefeb..1dc257d3b 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 000000000..9458beb43 --- /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 000000000..d3914580a --- /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 000000000..4cf948d9c --- /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 000000000..635963816 --- /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 000000000..38334b179 --- /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 000000000..9fc32156e --- /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'), [])}> +