Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-11 20:08:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

init: the first public commit for AFFiNE

Browse Source
This commit is contained in:
DarkSky
2022-07-22 15:49:21 +08:00
commit e3e3741393
1451 changed files with 108124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,13 @@
# AFFiNE CONTRIBUTING
Contributions are **welcome** and will be fully **credited**.
## **Requirements**
If the project maintainer has any additional requirements, you will find them listed here.
- Code Style [AFFiNE Code Guideline](./affine-code-guideline.md)
- Git Rules [AFFiNE Git Guideline ](./affine-git-guideline.md)
- • **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
**Happy coding**!

22
docs/affine-code-guideline.md Normal file
View File

@@ -0,0 +1,22 @@
# AFFiNE Code Guideline
| Item | Specification | Example |
| ----------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------- |
| [Packages/Paths]() | aaa-bbb-ccc | ligo-virgo, editor-todo |
| [.tsx]() | PascalCase | AddPage.tsx |
| [.ts]() | kebab-case | file-export.ts |
| [.json]() | kebab-case | file-export.ts |
| [Domain File]() | OpenRules | xx._d.ts_ | _tsconfig.xx_.json | xx.spec .ts | .env.xx | yy-ds.ts |
| [Types]() | UpperCamelCase | WebEvent |
| [Enum variants]() | UpperCamelCase | Status{ Todo,Completed } |
| [Functions]() | lowerCamelCase | |
| [React Funciton Compoment]() | UpperCamelCase | function DocShare(){} |
| [React HOC]() | UpperCamelCase | function BussinessText(){} |
| [Function Parameter]() | lowerCamelCase | function searchByIdOrName(idOrname){ } |
| [Methods for external access]() | lowerCamelCase | public sayHello(){ }; |
| [Externally Accessible Variables (Variables)]() | lowerCamelCase | animal.sleepCount |
| [General constructors]() | constructor or with_more_details | |
| [Local variables]() | lowerCamelCase | const tableCollection = []; |
| [Statics]() | SCREAMING_SNAKE_CASE | GLOBAL_MESSAGES |
| [Constants](b) | SCREAMING_SNAKE_CASE | GLOBAL_CONFIG |
| [Type parameters]() | UpperCamelCase , usually a single capital letter: T | let a: Animal = new Animal() |

91
docs/affine-git-guideline.md Normal file
View File

@@ -0,0 +1,91 @@
# AFFiNE Git Guideline
# 1. Git Branch Name
- fix/
- feat/
# 2. **Commit message guidelines**
Affine uses [semantic-release](https://github.com/semantic-release/semantic-release) for automated version management and package publishing. For that to work, commitmessages need to be in the right format.
### **Atomic commits**
If possible, make [atomic commits](https://en.wikipedia.org/wiki/Atomic_commit), which means:
- a commit should contain exactly one self-contained functional change
- a functional change should be contained in exactly one commit
- a commit should not create an inconsistent state (such as test errors, linting errors, partial fix, feature with documentation etc...)
A complex feature can be broken down into multiple commits as long as each one keep a consistent state and consist of a self-contained change.
### **Commit message format**
Each commit message consists of a **header**, a **body** and a **footer**. The header has a special format that includes a **type**, a **scope** and a **subject**:
`<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>`
The **header** is mandatory and the **scope** of the header is optional.
The **footer** can contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages).
### **Revert**
If the commit reverts a previous commit, it should begin with `revert:` , followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
### **Type**
The type must be one of the following:
| Type | Description |
| ----------- | ----------- |
| build | Changes that affect the build system or external | dependencies (example scopes: gulp, broccoli, npm) |
| ci | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) |
| docs | Documentation only changes |
| feat | A new feature |
| fix | A bug fix |
| perf | A code change that improves performance |
| refactor | A code change that neither fixes a bug nor adds a feature |
| style | Changes that do not affect the meaning of the code(white-space, formatting, missing semi-colons, etc) |
| test | Adding missing tests or correcting existing tests |
| chore | Changes to the build process or auxiliary tools | |
### **Subject**
The subject contains succinct description of the change:
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize first letter
- no dot (.) at the end
### **Body**
Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.
### **Footer**
The footer should contain any information about **Breaking Changes** and is also the place to reference GitHub issues that this commit **Closes**.
**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
### **Examples**
`fix(pencil): stop graphite breaking when too much pressure applied`
``feat(pencil): add 'graphiteWidth' option`
Fix #42`
`perf(pencil): remove graphiteWidth option`
BREAKING CHANGE: The graphiteWidth option has been removed.
The default graphite width of 10mm is always used for performance reasons.`
# 3. tracking-your-work-with-issues
[https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues](https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues)

7
docs/affine-icons-user-guide.md Normal file
View File

@@ -0,0 +1,7 @@
## 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)

53
docs/how-to-add-ui-component-in-affine.md Normal file
View File

@@ -0,0 +1,53 @@
# 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`
```jsx
import ButtonUnstyled, {
buttonUnstyledClasses,
} from '@mui/base/ButtonUnstyled';
import { styled } from '../styled';
/* eslint-disable @typescript-eslint/naming-convention */
const blue = {
500: '#007FFF',
600: '#0072E5',
700: '#0059B2',
};
/* eslint-enable @typescript-eslint/naming-convention */
export const BaseButton = styled(ButtonUnstyled)`
font-family: IBM Plex Sans, sans-serif;
font-weight: bold;
font-size: 0.875rem;
background-color: ${blue[500]};
border-radius: 8px;
padding: 4px 8px;
color: white;
transition: all 150ms ease;
cursor: pointer;
border: none;
&:hover {
background-color: ${blue[600]};
}
&.${buttonUnstyledClasses.active} {
background-color: ${blue[700]};
}
&.${buttonUnstyledClasses.focusVisible} {
box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
outline: none;
}
&.${buttonUnstyledClasses.disabled} {
opacity: 0.5;
cursor: not-allowed;
}
`;
```
```jsx
export { BaseButton } from './base-button';
```

13
docs/how-to-auto-download-figma-assets-in-affine.md Normal file
View File

@@ -0,0 +1,13 @@
Create or edit the `.env.local` file in the project root directory, add `FIGMA_TOKEN`, you can refer to Generate ACCESS_TOKEN: https://www.figma.com/developers/api#access-tokens
```
FIGMA_TOKEN=your-figma-token
```
Execute the command `nx run components-icons:figmaRes` to synchronize figma resources
figma icon resource address: https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734
### Icon Supplementary Style
Some icons downloaded directly have incorrect styles. You can add supplementary styles in `tools/executors/figmaRes/patch-styles.js`. The key is the name of the icon kebab-case.

3
docs/how-to-customize-rollup-config.md Normal file
View File

@@ -0,0 +1,3 @@
## Single Component Rollup Config
If styles are used in a Component, `rollupConfig` under `project.json` needs to be modified to `libs/rollup.config.cjs`

103
docs/how-to-write-css-in-affine.md Normal file
View File

@@ -0,0 +1,103 @@
[toc]
# Tutorial
1. MUI styled
```jsx
import type { MouseEventHandler, ReactNode } from 'react';
import { styled } from '@toeverything/components/ui';
const CardContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
backgroundColor: '#fff',
border: '1px solid #E2E7ED',
borderRadius: '5px',
});
const CardContent = styled('div')({
margin: '23px 52px 24px 19px',
});
const CardActions = styled('div')({
cursor: 'pointer',
display: 'flex',
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',
});
const PlusIcon = styled('div')({
marginRight: '9px',
fontWeight: '500',
lineHeight: 0,
'::before': {
content: '"+"',
},
});
export const Card = ({
children,
onAddItem,
}: {
children?: ReactNode,
onAddItem?: MouseEventHandler<HTMLDivElement>,
}) => {
return (
<CardContainer>
<CardContent>{children}</CardContent>
<CardActions onClick={onAddItem}>
<PlusIcon />
Add item
</CardActions>
</CardContainer>
);
};
```
## 2. import `*.scss`
```jsx
import styles from './tree-item.module.scss';
export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
() => {
return (
<li
ref={wrapperRef}
className={cx(
styles['Wrapper'],
clone && styles['clone'],
ghost && styles['ghost'],
indicator && styles['indicator']
)}
style={
{
'--spacing': `${indentationWidth * depth}px`
} as CSSProperties
}
{...props}
>
</li>
);
}
);
```
## 3. import `*.css`,
```js
import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror';
```