Merge branch 'master' into feat/block-pendant

apps/ligo-virgo/src/index.html

@@ -5,7 +5,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="https://app.affine.pro/favicon.ico" />
-        <title>Affine | Local Dev Environment</title>
+        <title>AFFiNE | Local Dev Environment</title>
         <script>
             window.global = window;
         </script>

apps/ligo-virgo/src/pages/ui/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 export const UIPage = () => {
     return (
         <div className="">
-            This page is used to show ui components of Affine ~
+            This page is used to show ui components of AFFiNE ~
         </div>
     );
 };

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 ?? []),
+    ];
+};

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)

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

libs/components/account/src/login/firebase.tsx

@@ -106,7 +106,7 @@ export const Firebase = () => {
             />
             <MuiGrid item xs={8}>
                 <Error
-                    title="Welcome to Affine"
+                    title="Welcome to AFFiNE"
                     subTitle="blocks of knowledge to power your team"
                     action1Text="Login &nbsp; or &nbsp; Register"
                 />

libs/components/common/src/lib/Logo/LogoImg.tsx

@@ -6,7 +6,7 @@ export const LogoImg = ({ style = {} }: { style: CSSProperties }) => {
         <img
             style={style}
             src="data:image/png;base64,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"
-            alt="Affine Logo"
+            alt="AFFiNE Logo"
         />
     );
 };

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';
-
+import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
-const CardContainer = styled('div')({
+import { styled } from '@toeverything/components/ui';
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: '#fff',
-    border: '1px solid #E2E7ED',
-    borderRadius: '5px',
-});
 
 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 = ({
             </CardContent>
             <CardActions onClick={onAddItem}>
                 <PlusIcon />
-                Add item
+                <span>Add item</span>
             </CardActions>
         </CardContainer>
     );

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

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 { targetCard } = findMoveInfo({
-                    const activeItem = activeItems.find(
+                        id: activeId,
-                        item => item.id === activeId
+                        activeContainer,
-                    );
+                        overContainer,
-                    const [beforeId, afterId] = findSibling(
+                        kanban,
-                        items[overContainer],
+                    });
-                        activeId
-                    );
 
-                    activeItem?.moveTo(overContainer, beforeId, afterId);
+                    moveCard(targetCard, null, overIndex);
 
                     return data;
                 });

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

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<string, BaseView> = {};

libs/components/layout/src/header/file-exporter/file-exporter.ts

@@ -34,7 +34,7 @@ const FileExporter = {
         </html>`;
     },
     decoreateAffineBrand: (pageTitle: string) => {
-        return pageTitle + ` Created in Affine`;
+        return pageTitle + ` Created in AFFiNE`;
     },
     exportHtml: (pageTitle: string, htmlContent: string) => {
         FileExporter.exportFile(

libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts

@@ -34,7 +34,7 @@ export const fileExporter = {
         </html>`;
     },
     decoreateAffineBrand: (pageTitle: string) => {
-        return pageTitle + ` Created in Affine`;
+        return pageTitle + ` Created in AFFiNE`;
     },
     exportHtml: (pageTitle: string, htmlContent: string) => {
         fileExporter.exportFile(

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:',
                             },
                         ],
                     },

libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts

@@ -13,7 +13,7 @@ const defaultTemplateList: Array<TemplateMeta> = [
 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',

libs/datasource/jwt/src/adapter/yjs/index.ts

@@ -343,7 +343,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter<YjsContentOperation> {
                 const handles = await window.showOpenFilePicker({
                     types: [
                         {
-                            description: 'Affine Package',
+                            description: 'AFFiNE Package',
                             accept: {
                                 // eslint-disable-next-line @typescript-eslint/naming-convention
                                 'application/affine': ['.apk'],

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;