Merge pull request #2504 from ZeroX-DG/pr-template

Added PR Template and update docs

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,36 @@
+<!--
+Before submitting this PR, please make sure that:
+- You have read and understand the contributing.md
+- You have checked docs/code_style.md for information on code style
+-->
+## Description
+<!--
+Tell us what your PR does.
+Please attach a screenshot/ video/gif image describing your PR if possible.
+-->
+
+## Issue fixed
+<!--
+Please list out all issue fixed with this PR here.
+-->
+
+<!--
+Please make sure you fill in these checkboxes,
+your PR will be reviewed faster if we know exactly what it does.
+
+Change :white_circle: to :radio_button: in all the options that apply
+-->
+## 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

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.

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
+<h1>{this.state.name}</h1>
+
+// GOOD
+const { name } = this.state
+<h1>{name}</h1>
+```
+
+### 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
+<h1 onclick={onClick}>Name</h1>
+
+// GOOD
+<h1 onclick={onNameClick}>Name</h1>
+```
+
+### 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...
+  }
+}
+```