How to Contribute

Git Workflow

It is important to follow the recommended git workflow to ensure consistency and cleanliness.

Steps

1. In the main branch, run git pull to get the latest changes.
2. Create a new branch by running git checkout -b [task-type]/[task_description]. Work on your task/feature in this branch.
3. After you are done with all your changes, git add . and git commit -m "commit message" to commit your changes locally.
4. Next, run git pull origin main --rebase to fetch new changes in the main branch (if any). Fix merge conflicts if any.
5. Push your branch to GitHub by running git push or git push --set-upstream origin [branch-name] (if this branch does not exist on GitHub)
6. Go to this GitHub repo and make a pull request from your branch to main branch. Name the PR with a Meaningful Title.
7. Ensure that all automated checks passes. Fix any errors that occurs.
8. Request 1 person to review your pull request, and you are done!
9. If you are reviewer, perform squash and merge after approving the pull request.

Naming Conventions

Naming [task-type] for new branches

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc.)
• refactor: A code change that neither fixes a bug nor adds a feature
• perf: A code change that improves performance
• test: Adding missing or correcting existing tests
• chore: Changes to the build process or auxiliary tools and libraries such as documnetation generation
• revert: A revert to a previous commit

Creating new files

• Create a index.ts file, if it does not exist in the same directory as the created file.
• Export the newly created component in the index.ts file that exist in the same directory as the newly created file.

Example (Creating CustomButton component):

components/button/CustomButton.tsx

// new file/component
export const CustomButton = () => {
  return <Button>Not so customisable</Button>
}

components/button/index.tsx

export { ButtonLink } from './ButtonLink';
export { CustomButton } from './CustomButton'; // ADD THIS LINE

caution

The creation of a index.ts file and exporting the newly created component/functions/constants may not be required according to how the the feature you are working on is designed. Consult the tech lead if you are unsure.

Imports Path Alias

Use imports via path alias whenever possible. The following path alias are configured:

"@components/*": ["components/*"],
"@common/*": ["common/*"],
"@features/*": ["features/*"]

Example

import { FormCheckbox, FormInput } from '@components/forms';
import { useAlert, useFetch } from '@common/hooks';
import { ListingCard } from '@features/listing';

danger

Note that deep imports via path alias is restricted due to how the ESLint configuration is set up! For example, importing from '@features/listing/components/ListingCard.tsx' is not allowed. You can only import from '@features/listing` in this example.