CONTRIBUTING.md

Table Of Contents

What should I know before I get started?

• Docs

How Can I Contribute?

• Local Development
• Pull Requests

Styleguides

• Git Commit Messages
• TypeScript Styleguide
• Specs Styleguide

How To Contribute

Local development

Prerequisites

• NodeJS LTS
• Python 2.7+

Steps

1. Fork the repository (https://help.github.com/articles/fork-a-repo/)
2. Clone the repository to your local machine (https://help.github.com/articles/cloning-a-repository/)

$ git clone [email protected]:[username]/rsschool-ui.git

3. Navigate into the directory where you've cloned the source code and install NPM dependencies

$ cd rsschool-ui
$ npm install

4. Create a branch for your feature

$ git checkout -b feature-x master

5. Run the application in development mode with live reload:

$ npm start

6. Do hacking 👩‍💻👨‍💻

⚠️ NOTE: This project contains code for UI only. In order to do development, you might need to setup and run API project too. Please see rsschool-api repository.

7. Do not forget to write Jest specs for your feature following Specs Styleguide
8. Make sure specs, lints pass and code formatted properly (they'll be run on a git pre-commit hook too)

$ npm test
$ npm run lint
$ npm run pretty

9. Commit your changes using a descriptive commit message that follows our commit message conventions

$ git commit -m "feat: implement feature X"

10. Push your branch to GitHub:

$ git push origin feature-x

11. Create a pull request

Pull Requests

• Check how to create a pull request
• Send a pull request to master branch
• Write a meaninfull description
• Include screenshots and animated GIFs in your pull request whenever possible

Styleguides

Git Commit Messages

• Use Conventional Commits format
• Allowed Types:
  • build: - changes that affect the build system or external dependencies (example scopes: npm, webpack)
  • ci: - changes to our CI configuration files and scripts (example scopes: drone)
  • 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: - сhanges that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  • test: - adding missing tests or correcting existing tests
• Use the present tense ("add feature" not "added feature")
• Use the imperative mood ("move cursor to..." not "moves cursor to...")
• Limit the first line to 72 characters or less
• Reference issues and pull requests liberally after the first line

TypeScript Styleguide

We use Prettier for TypeScript formatting. Please run the following command before your commit:

npm run pretty

For your convience, you can integrate Prettier into your favorite IDE (https://prettier.io/docs/en/editors.html)

Specs Styleguide

• Name spec file by adding .spec to the name of tested file.

Example:

foo.ts
foo.spec.ts // spec file for foo.ts

• Treat describe as a noun or situation.
• Treat it as a statement about state or how an operation changes state.

Example:

describe('Header', () => {
    it('shows username', () => {
        //...
    })

    it('shows logout button', () => {
        //...
    })
})