Coding convention

By Frontend

Please follow this convention for the apis

For Common CRUD

Example:

For Nested Apis

For Bulk

For Versioning

Before Releasing run this commands This will automatically add commits and its description in the CHANGELOG.md

Table

Table

Name

Command

Before Command

After Command

Notes

Release: Major

npm run release:major

1.1.0

2.0.0

Open

Release: Minor

npm run release:minor

1.1.0

Open

Release: Patch

npm run release:patch

1.1.0

1.1.1

Open

Prerelease: Alpha

npm run release:alpha

1.1.0, 1.1.0.alpha.0

1.1.0.alpha.0, 1.1.0.alpha.1

Open

Prerelease: Beta

npm run release:beta

1.1.0

1.1.0.beta.0

Open

There are no rows in this table

⁠

For Pull Request

Pull request commit must contain taskId once

eg * [#age258358] fixed ticket * refactor ticket

If the same pull request contains fixes for two or more PRs

* [#age258358] fixed ticket * refactor ticket * [#age258359] fixed invoice * refactor invoice * changed the function

For Coding

Configuration and structures

Files & Directories & Components

Names

Directory names should be camelCase: eg: createTask

File names should be camelCase: eg: componentName.tsx

For components, we should create a onethread folder

Onethread should contain all the new codes

All the components should be a folder

Under each folder, test files, scss files should exist beside the component

If a component that has another huge component we can also create another folder inside

Follow the same structure for the sub folders

Components should always be pascal case eg: HelloWorld

Avoid using component Name: Index

⁠

CSS

Use .scss only

Avoid inline styles unless there is no easy workaround

Use sx, instead of styles

Use blank lines between selectors to help readability, unless those selectors are closely related

ex) &:focus, &:hover, or &--active, &–inactive, &--pressed, etc.

Wrong

Correct

Use

BEM naming⁠

Add further improvements

Organize properties when a selector has more than 5 properties.

"special/box model", (blank line), eg: positions, display, width, height

"decorators", (blank line), anything to do with colors

"typography",

Selectors that have fewer properties don't need extra spaces, but it helps to keep the same order:

⁠

React

Hooks start with "use" (i.e. useContext, useState)

Second item in useState return type starts with "set"

Use useMemo() for heavy compute logic

Use useCallback()

Use useDebounce() for the search input

Avoid to use string, use variable eg. enum or constants

Use Promise.allSettled() when call multiple requests in one time. Instead of Promise.all()

Es6 Prefer: const onClick = () => {}, Functions second as needed: function onClick().

Use useState() for independent variables, if it exceed 5, then use useReducer

Typescript

Naming

PascalCase: class / interface / type / decorator / type / parameters / component / .tsx .js .css

camelCase: variable / parameter / function / method / property / module alias / const type

CONSTANT_CASE: enum / global constants

Note: to make git recognise the file name change: git mv oldname newname

Interface & type

component name: Sample, interface name: ISample, type name: TSample

Use destructuring on properties

Comments: (rarely use if function name is good. but if needed)

Typeof / AS

Use when need to do extra business logic when type does not match

When we sure with the logic want to pass the typescript error

Component

Check the render definition it can return either a node or array of nodes

Do not use inline types of for typescripts

useState

useRef, React.forward Ref

Event Handlers

Context API

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.