diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000..58df576a --- /dev/null +++ b/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,36 @@ + +## Description + + +## Issue fixed + + + +## Type of changes + +- :white_circle: Bug fix (Change that fixed an issue) +- :white_circle: Breaking change (Change that can cause existing functionality to change) +- :white_circle: Improvement (Change that improves the code. Maybe performance or development improvement) +- :white_circle: Feature (Change that adds new functionality) +- :white_circle: Documentation change (Change that modifies documentation. Maybe typo fixes) + +## Checklist: + +- :white_circle: My code follows [the project code style](docs/code_style.md) +- :white_circle: I have written test for my code and it has been tested +- :white_circle: All existing tests have been passed +- :white_circle: I have attached a screenshot/video to visualize my change if possible diff --git a/contributing.md b/contributing.md index bbb60051..fa71d5a5 100644 --- a/contributing.md +++ b/contributing.md @@ -1,12 +1,24 @@ # Contributing to Boostnote (English) ### When you open an issue or a bug report -There is no issue template, but there is a request. - -**Please paste screenshots of Boostnote with the developer tool open** +There is an issue template for you to follow. Please provide as much information as you can according to the template. Thank you in advance for your help. +### When you open a pull request +There is a pull request template for your to follow. Please fill in the template before submitting your code. Your pull request will be reviewed faster if we know exactly what it does. + +Make sure that you have: +- Checked [`code_style.md`](docs/code_style.md) for information on code style +- Write tests for your code and run test with the following command +``` +npm run test +``` +- Lint your code using the following command +``` +npm run lint +``` + ### Concerning Copyright By making a pull request you agree to transfer ownership of your code to BoostIO. diff --git a/docs/code_style.md b/docs/code_style.md new file mode 100644 index 00000000..d8f458d7 --- /dev/null +++ b/docs/code_style.md @@ -0,0 +1,82 @@ +# Boostnote Code Style +When submitting your PR, please make sure that your code is well tested and follow the code style of Boostnote. + +The code style of Boostnote is listed in [`.eslintrc`](.eslintrc). We also have additional code styles that is not mentioned in that file. + +## Additional code styles +### Use ES6 Object Destructing + +Please use Object Destructing whenever it's possible. + +**Example**: Importing from library + +```js + +// BAD +import Code from 'library' +const subCode = Code.subCode +subCode() + +// GOOD +import { subCode } from 'library' +subCode() +``` + +**Example**: Extract data from react component state + +``` +// BAD +

{this.state.name}

+ +// GOOD +const { name } = this.state +

{name}

+``` + +### Use meaningful name +This is actually not a "code style" but rather a requirement in every projects. Please name your variables carefully. + +**Example**: Naming callback function for event + +```js +// BAD +

Name

+ +// GOOD +

Name

+``` + +### Don't write long conditional statement +When writing a conditional statement, if it's too long, cut it into small meaningful variables. + +```js +// BAD +if (note.type == 'markdown' && note.index == 2 && note.content.indexOf('string') != -1) + +// GOOD +const isSecondMarkdownNote = note.type == 'markdown' && note.index == 2 +const isNoteHasString = note.content.indexOf('string') != -1 +if (isSecondMarkdownNote && isNoteHasString) +``` + +### Use class property instead of class methods +When writing React components, try to use class property instead of class methods. The reason for this is explained perfectly here: +https://codeburst.io/use-class-properties-to-clean-up-your-classes-and-react-components-93185879f688 + +**Example**: + +```js +// BAD +class MyComponent extends React.Component { + myMethod () { + // code goes here... + } +} + +// GOOD +class MyComponent extends React.Component { + myMethod = () => { + // code goes here... + } +} +``` \ No newline at end of file