Merge branch 'master' into feat/block-pendant

This commit is contained in:
QiShaoXuan 2022-08-01 17:50:45 +08:00
commit 64877f1c4d
18 changed files with 142 additions and 39 deletions

View File

@ -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>

View File

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

View File

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

View File

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

View File

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

View File

@ -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"
/>

View File

@ -6,7 +6,7 @@ export const LogoImg = ({ style = {} }: { style: CSSProperties }) => {
<img
style={style}
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABzJJREFUeNrs3T1SHEcUAOAxpQOQON/EOcpdFpwAfAKhE0ikToBEqawTCG6ATiDkUu7NnaxjJXsET0uDDOiHfrM9fzvfV7VFMgzN9Mzr1z3dvVUFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEBhP5U82c+//rGofyweOGz18cPLlUsPw3tU+Hyn9ef4gWOW9edxX/9gHZRSeZ6O7Lqf1EFwObEyP/tR4P7t+T9nTf3nOP/r9S9nGXW3X/94l3G+VK7HdfnWBe+b9Hf3Mw8/qP/2dcY5X9U/9rY5ABxlHLOXMoUes4BFoCL7sPrRwz/iMo85a0vX60X9OavGbW9k9XqxUzBipod/N/Pw5zPOus6VuROn9T24VxGq152CJ4ukrEczveCpJb1Q5s688kznt/4pqysSAOrIuxt8qBczjdZa/27tN+MnZNZrqQygTYv+dGYXXOvfUxbQNEg80PqXDACHLX5nbpFa69+PXV2B/HrdOAA07/7bZAC7zcCh1l+ZSztuXiHyg9a/VAawyUN8OJOLrvUfoCvgWX+4XksEgE368nPIALT+w0jzTc48799v/ZONJgI16f8mo/mpG3A8opstleOy8DnXEyzzaktu+Of1/XUx0annJ9XnWbOd1uumMwFLtOCHzU08Bv/mTOkcmSmWuS9pQPBN/TmYYNmXfdTrpgGgxIy+o/TapuQ8bvrXzO0fY8qd5gYc1ffXlVr6WusxgGYiz6JQOY5UBR0yN6B0AKjKTuQ5VBV0KDVUpy5D2QBQstU+agYUoSsvLBYqFACaSRalH1jdADrvCrgEZTKASPq/7uCc0EYaEHzhMmweAHJb61X9yR193dMNoAenBgT/F34NGNz4Iz3876v8hT/puDPVMj3NrLvsLcE+fng5VD3fLBZ6ptbaZQCREfvL4PtX3QD6YLFQmwDQpE65rfntve9yg8DCSC09eeMSxDOAyEj97Yf+rSyAkVlYLBQfA4ik/+/vBYPciJuCzMlA1+PJSG6KJyMo8/XE1hjclDWS2p+OeLHQu7psXZz3zhbm2QEguO/f+nbfP83zr3//KvP3FwPO3d6vxrVt85Blvphgg5Yajr9bdAWmuFio9y7AceDYbz28kW6AqcHDmuQS2mbMKbqRyf6MdqbaKABE+uZvM4NCibEGypvybkB/VvH9DN7MdW5AVgAIbvyx/lb63iz3zQ0Cu3OOylr/jbKAdRUfQ0oP/6kAUKZFvgpmBiUyDsp5PfV/oGmAomNIs1wstNPBw/i2ZXD4KuiYstm764zvLZyKlAVEN5l5IwB8nf7vbZr+30vPIjeYboC+f9ssYNUim9mb22KhnAwg0vpfZxwT2cDS24B+W//rbfqHmvUG0YxmVouFcuYBRFrhnD5+yhBy12XbL1DrX6Ir8C5w/O5IugLLqpsdpdfZAaDFvn8P9vFTalafdxnoVhxXn1/t9NIKVndnMA4lzQTc77HM623dWTj9X2m2XxWbx3JUdb+d+4OBawy7Akd2/b0KtNSXgQDwtMcA8H7AZaq3A+9ZIACMoswTyAIiy9ir4LFbOwZQOv3PzhRusVEIm2YBbeYGVLMOAMGNP0IPdTNC620AfQaBiypvkFoAaERG4K9aDNRF3gY8V1UU6grwUAAIrvyLpv83ItHYRiGUyALaLBaaZQbQWfp/rzJWgV8xNZgS2iwWml0AiKT/yw3e01shSN9ZQLpXbQj6vQDQIv3f5KupI7+7sJEjhYLAdZusdS4ZQLSlvdqgInQDGEqbxUKzCACRh2xZYO24bgBDZAHpvj0XAO6m/4sqtr/cZYEyRM5hoxBKBoE0ILgUAAZI/zfoBlghSOmuwGw9Gjj9vx1Ictdhp291ObFCkEJZQFos9Gfg/utLV9uC37beuZf+RybbXBYsSHQikW4AJaWxgDk2KFe3uwDR6bbFXqM0r2UiFaAbQMksYK6Lhc53Wraqqw52jrVfIEMGgYtqXouFPu3+vNOk/8U3/tANYILmNEPw0yvQmwwgOsHmsnRpms1EI90AKwQpfQ+uqnnMDfjy3Q83AeA4mP539e7URiEMbQ6Lhb4EuZ0uN/7QDWCCWcC2Lxa6881PKQOIjqhfdnjxo90AawPo4j68rrZ3sdCdLs5OFR/973rqZLQbYKMQurCNi4W++t7HNBPw98AJ+rgg58EsY/VAND+rf5xNrAWaXJnTzVXlv0bL7WOnxuZgiHuz2b7+ILN7vMw850EFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMC2+0+AAQDgljs/XVSdVAAAAABJRU5ErkJggg=="
alt="Affine Logo"
alt="AFFiNE Logo"
/>
);
};

View File

@ -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 = ({
</CardContent>
<CardActions onClick={onAddItem}>
<PlusIcon />
Add item
<span>Add item</span>
</CardActions>
</CardContainer>
);

View File

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

View File

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

View File

@ -31,7 +31,7 @@ export const KanbanContainer = styled('div')({
// overscrollBehavior: 'contain',
'& > * + *': {
marginLeft: '10px',
marginLeft: '20px',
},
});

View File

@ -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> = {};

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,4 @@
/** user model for Affine */
/** user model for AFFiNE */
export type UserInfo = {
id: string;
nickname: string;