diff --git a/apps/ligo-virgo/src/index.html b/apps/ligo-virgo/src/index.html index 1291a10917..94f01b6db7 100644 --- a/apps/ligo-virgo/src/index.html +++ b/apps/ligo-virgo/src/index.html @@ -5,7 +5,7 @@ - Affine | Local Dev Environment + AFFiNE | Local Dev Environment diff --git a/apps/ligo-virgo/src/pages/ui/index.tsx b/apps/ligo-virgo/src/pages/ui/index.tsx index cc8273dbe7..be4d79a688 100644 --- a/apps/ligo-virgo/src/pages/ui/index.tsx +++ b/apps/ligo-virgo/src/pages/ui/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; export const UIPage = () => { return (
- This page is used to show ui components of Affine ~ + This page is used to show ui components of AFFiNE ~
); }; diff --git a/apps/ligo-virgo/webpack.config.js b/apps/ligo-virgo/webpack.config.js index 4d7500c60f..edb5305b2b 100644 --- a/apps/ligo-virgo/webpack.config.js +++ b/apps/ligo-virgo/webpack.config.js @@ -151,6 +151,8 @@ module.exports = function (webpackConfig) { } } + addEmotionBabelPlugin(config); + config.plugins = [ ...config.plugins.filter( p => !(isProd && p instanceof MiniCssExtractPlugin) @@ -161,7 +163,7 @@ module.exports = function (webpackConfig) { }), isProd && new HtmlWebpackPlugin({ - title: 'Affine - All In One Workos', + title: 'AFFiNE - All In One Workos', favicon: path.resolve( __dirname, './src/assets/images/favicon.ico' @@ -195,3 +197,59 @@ module.exports = function (webpackConfig) { return config; }; + +// TODO handle nx issue +// see https://github.com/nrwl/nx/issues/8870 +// see https://github.com/nrwl/nx/issues/4520#issuecomment-787473383 +const addEmotionBabelPlugin = config => { + const babelLoader = config.module.rules.find( + rule => + typeof rule !== 'string' && + rule.loader?.toString().includes('babel-loader') + ); + if (!babelLoader) { + return; + } + + babelLoader.options.plugins = [ + [ + require.resolve('@emotion/babel-plugin'), + { + // See https://github.com/mui/material-ui/issues/27380#issuecomment-928973157 + // See https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin#importmap + importMap: { + '@toeverything/components/ui': { + styled: { + canonicalImport: ['@emotion/styled', 'default'], + styledBaseImport: [ + '@toeverything/components/ui', + 'styled', + ], + }, + }, + '@mui/material': { + styled: { + canonicalImport: ['@emotion/styled', 'default'], + styledBaseImport: ['@mui/material', 'styled'], + }, + }, + '@mui/material/styles': { + styled: { + canonicalImport: ['@emotion/styled', 'default'], + styledBaseImport: [ + '@mui/material/styles', + 'styled', + ], + }, + }, + }, + // sourceMap is on by default but source maps are dead code eliminated in production + sourceMap: true, + autoLabel: 'dev-only', + labelFormat: '[filename]-[local]', + cssPropOptimization: true, + }, + ], + ...(babelLoader.options.plugins ?? []), + ]; +}; diff --git a/docs/affine-icons-user-guide.md b/docs/affine-icons-user-guide.md index 70e9742af8..0e376a4099 100644 --- a/docs/affine-icons-user-guide.md +++ b/docs/affine-icons-user-guide.md @@ -1,7 +1,7 @@ -## Affine Icons +## AFFiNE Icons > Abundant and colorful icon resource for free free use Website: [http://localhost:4200/tools/icons](http://localhost:4200/tools/icons) -Figma: [Figma Affine Icons](https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734) +Figma: [Figma AFFiNE Icons](https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734) diff --git a/docs/how-to-add-ui-component-in-affine.md b/docs/how-to-add-ui-component-in-affine.md index dc7ea52c5c..acb2a80911 100644 --- a/docs/how-to-add-ui-component-in-affine.md +++ b/docs/how-to-add-ui-component-in-affine.md @@ -1,6 +1,6 @@ # Tutorial -Affine defines a new component development specification in Figma, extends Affine UI Components based on MUI BASE and MUI SYSTEM, and supplements as needed https://github.com/toeverything/AFFiNE/tree/master/libs/components/ui , eg `src/libs/components/ui/src/button/base-button.ts` +AFFiNE defines a new component development specification in Figma, extends AFFiNE UI Components based on MUI BASE and MUI SYSTEM, and supplements as needed https://github.com/toeverything/AFFiNE/tree/master/libs/components/ui , eg `src/libs/components/ui/src/button/base-button.ts` ```jsx import ButtonUnstyled, { diff --git a/libs/components/account/src/login/firebase.tsx b/libs/components/account/src/login/firebase.tsx index e2f0a6b08d..55453782bd 100644 --- a/libs/components/account/src/login/firebase.tsx +++ b/libs/components/account/src/login/firebase.tsx @@ -106,7 +106,7 @@ export const Firebase = () => { /> diff --git a/libs/components/common/src/lib/Logo/LogoImg.tsx b/libs/components/common/src/lib/Logo/LogoImg.tsx index d104588fe3..1048f8a364 100644 --- a/libs/components/common/src/lib/Logo/LogoImg.tsx +++ b/libs/components/common/src/lib/Logo/LogoImg.tsx @@ -6,7 +6,7 @@ export const LogoImg = ({ style = {} }: { style: CSSProperties }) => { Affine Logo ); }; diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index a84a9ba740..f26374e4c3 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx @@ -1,14 +1,6 @@ -import { styled } from '@toeverything/components/ui'; -import { RenderBlock, useKanban } from '@toeverything/components/editor-core'; import type { KanbanCard } from '@toeverything/components/editor-core'; - -const CardContainer = styled('div')({ - display: 'flex', - flexDirection: 'column', - backgroundColor: '#fff', - border: '1px solid #E2E7ED', - borderRadius: '5px', -}); +import { RenderBlock, useKanban } from '@toeverything/components/editor-core'; +import { styled } from '@toeverything/components/ui'; const CardContent = styled('div')({ margin: '20px', @@ -20,12 +12,16 @@ const CardActions = styled('div')({ alignItems: 'center', width: '100%', height: '29px', - background: 'rgba(152, 172, 189, 0.1)', borderRadius: '0px 0px 5px 5px', padding: '6px 0 6px 19px', fontSize: '12px', fontWeight: '300', color: '#98ACBD', + transition: 'all ease-in 0.2s', + + ':hover': { + background: '#F5F7F8', + }, }); const PlusIcon = styled('div')({ @@ -37,6 +33,23 @@ const PlusIcon = styled('div')({ }, }); +const CardContainer = styled('div')({ + display: 'flex', + flexDirection: 'column', + backgroundColor: '#fff', + border: '1px solid #E2E7ED', + borderRadius: '5px', + + [CardActions.toString()]: { + opacity: '0', + }, + ':hover': { + [CardActions.toString()]: { + opacity: '1', + }, + }, +}); + export const CardItem = ({ id, block, @@ -56,7 +69,7 @@ export const CardItem = ({ - Add item + Add item ); diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts index f662144ec1..5f20962d34 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts @@ -6,6 +6,7 @@ import type { DndableItems } from './type'; import type { KanbanCard, KanbanGroup, + RecastItem, } from '@toeverything/components/editor-core'; import { isEqual } from '@toeverything/utils'; @@ -33,15 +34,44 @@ const findContainer = (id: string, items: DndableItems) => { ); }; +type FindMoveInfo = (params: { + id: string; + activeContainer: string; + overContainer: string; + kanban: KanbanGroup[]; +}) => { + targetCard: RecastItem; + targetGroup: KanbanGroup | null; +}; + +const findMoveInfo: FindMoveInfo = ({ + id, + activeContainer, + overContainer, + kanban, +}) => { + const activeGroup = kanban.find(group => group.id === activeContainer); + const overGroup = kanban.find(group => group.id === overContainer); + const activityCard = activeGroup.items.find(item => item.id === id); + + return { + targetCard: activityCard.block, + targetGroup: overGroup, + }; +}; + /** * Find the sibling node after the dragging of the moved node ends * @param cards * @param currentCardId */ -const findSibling = (cards: KanbanCard[], currentCardId: string) => { +const findSibling = ( + cards: KanbanCard[], + currentCardId: string +): [string, string, number] => { const index = cards.findIndex(card => card.id === currentCardId); - return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null]; + return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null, index]; }; /** @@ -84,4 +114,5 @@ export { findSibling, pickIdFromCards, shouldUpdate, + findMoveInfo, }; diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts index 4dfcc5f5a0..ff814d5458 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts @@ -11,6 +11,7 @@ import { findSibling, pickIdFromCards, shouldUpdate, + findMoveInfo, } from '../helper'; import type { CollisionDetection, @@ -19,11 +20,13 @@ import type { DragEndEvent, } from '@dnd-kit/core'; import type { DndableItems, UseDndableRes } from '../type'; +import { useKanban } from '@toeverything/components/editor-core'; export const useDndable = ( dndableItems: DndableItems, dndableContainerIds: string[] ): UseDndableRes => { + const { kanban, moveCard } = useKanban(); const [items, setItems] = useState(dndableItems); const [containerIds, setContainerIds] = useState(dndableContainerIds); const [active, setActive] = useState(null); @@ -259,16 +262,14 @@ export const useDndable = ( ).filter(Boolean), }; - const activeItems = items[activeContainer]; - const activeItem = activeItems.find( - item => item.id === activeId - ); - const [beforeId, afterId] = findSibling( - items[overContainer], - activeId - ); + const { targetCard } = findMoveInfo({ + id: activeId, + activeContainer, + overContainer, + kanban, + }); - activeItem?.moveTo(overContainer, beforeId, afterId); + moveCard(targetCard, null, overIndex); return data; }); diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts index 71457104c3..4cd22c978a 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts @@ -31,7 +31,7 @@ export const KanbanContainer = styled('div')({ // overscrollBehavior: 'contain', '& > * + *': { - marginLeft: '10px', + marginLeft: '20px', }, }); diff --git a/libs/components/editor-core/src/editor/editor.ts b/libs/components/editor-core/src/editor/editor.ts index 45db53c678..da46769ed5 100644 --- a/libs/components/editor-core/src/editor/editor.ts +++ b/libs/components/editor-core/src/editor/editor.ts @@ -59,7 +59,7 @@ export class Editor implements Virgo { public bdCommands: Commands; public ui_container?: HTMLDivElement; public version = '0.0.1'; - public copyright = '@Affine 2019-2022'; + public copyright = '@AFFiNE 2020-2022'; private plugin_manager: PluginManager; private hooks: Hooks; private views: Record = {}; diff --git a/libs/components/layout/src/header/file-exporter/file-exporter.ts b/libs/components/layout/src/header/file-exporter/file-exporter.ts index 428ae0dd6e..ccbe9bc5f5 100644 --- a/libs/components/layout/src/header/file-exporter/file-exporter.ts +++ b/libs/components/layout/src/header/file-exporter/file-exporter.ts @@ -34,7 +34,7 @@ const FileExporter = { `; }, decoreateAffineBrand: (pageTitle: string) => { - return pageTitle + ` Created in Affine`; + return pageTitle + ` Created in AFFiNE`; }, exportHtml: (pageTitle: string, htmlContent: string) => { FileExporter.exportFile( diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts b/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts index 99b17d8858..bb561a1399 100644 --- a/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts +++ b/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts @@ -34,7 +34,7 @@ export const fileExporter = { `; }, decoreateAffineBrand: (pageTitle: string) => { - return pageTitle + ` Created in Affine`; + return pageTitle + ` Created in AFFiNE`; }, exportHtml: (pageTitle: string, htmlContent: string) => { fileExporter.exportFile( diff --git a/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts b/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts index 75f0b219c6..3888b54333 100644 --- a/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts +++ b/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts @@ -200,7 +200,7 @@ const groupTemplateMap: GroupTemplateMap = { text: { value: [ { - text: 'As a collaborative real-time editor, Affine aims to resolve problems in three situations:', + text: 'As a collaborative real-time editor, AFFiNE aims to resolve problems in three situations:', }, ], }, diff --git a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts index 5a381b1751..3fa16ac460 100644 --- a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts +++ b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts @@ -13,7 +13,7 @@ const defaultTemplateList: Array = [ const TemplateFactory = { defaultTemplateList: defaultTemplateList, generatePageTemplateByGroupKeys(props: TemplateMeta): Template { - const newTitle = props.name || 'Get Started with Affine'; + const newTitle = props.name || 'Get Started with AFFiNE'; const keys = props.groupKeys || []; const blankPage: Template = { type: 'page', diff --git a/libs/datasource/jwt/src/adapter/yjs/index.ts b/libs/datasource/jwt/src/adapter/yjs/index.ts index 2d14aec56a..1037d9e3f6 100644 --- a/libs/datasource/jwt/src/adapter/yjs/index.ts +++ b/libs/datasource/jwt/src/adapter/yjs/index.ts @@ -343,7 +343,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter { const handles = await window.showOpenFilePicker({ types: [ { - description: 'Affine Package', + description: 'AFFiNE Package', accept: { // eslint-disable-next-line @typescript-eslint/naming-convention 'application/affine': ['.apk'], diff --git a/libs/utils/src/types/user-workspace.ts b/libs/utils/src/types/user-workspace.ts index e6d4fc58cb..85f46a49fe 100644 --- a/libs/utils/src/types/user-workspace.ts +++ b/libs/utils/src/types/user-workspace.ts @@ -1,4 +1,4 @@ -/** user model for Affine */ +/** user model for AFFiNE */ export type UserInfo = { id: string; nickname: string;