Guideline

[jaballogian]

This issue is just documentation for the code, format, folder, and file conventions.

1. Components:

• please use Material UI components as the core components
• please use Material UI Typography component to replace any HTML text elements such as h1, h2, h3, h4, h5, h6, and p
• please use Material UI Box component to replace any HTML container elements such as div and img

2. Styles:

• please use useStyles from makeStyles for static styles instead of plain CSS
• please only use sx prop for dynamic styles

3. File extension:

• please use .jsx for component files
• please use .js for style files

4. Global state management tool:

• please use React Context API instead of using Redux or React Redux

5. Branch:

• "develop" branch is the main branch for developing the app
• "master" is the branch for deploying the app into the development environment
• creating a new branch (your own working branch) must come from the "develop" branch
• every morning or every time before creating a pull request from your branch you should merge the main branch ("develop" branch) into your branch

6. Pull request:

• make sure there is no error/crash and fewer warning messages before you create a new pull request
• before the reviewers and assignees merge a pull request, make sure to test the pull request on their own local computer
• don't merge a pull request that contains errors/crashes
• please write every detail you made in each pull request

7. Environment keys:

• please copy and paste everything inside your .env into .env.example
• don't push the .env file into Git

8. Code writing:

• every variable, function, and file must be written in English
• give a brief comment for every function and component
• every color/background color style must be taken from theme, please don't write the hex code manually, and please don't access the color constant manually
• the components folder is only dedicated for the general components (components used by multiple pages)
• please sort by alphabet the "import statements" and don't forget to group them
• every spacing (padding or margin) and size (height or width) must be multiple of 4px
• don't write import React from 'react' because it's not needed
• styles inside useStyles from makeStyles are written top to bottom by the implementation order
• please write Icon first followed by the name for importing the icon from the MUI
• every asset from the Figma is exported using the same file format as the original asset

Resources:

1. Figma files: https://www.figma.com/file/ohODkjvYtsC2G4mwlwaC5k/Worx.id