-
Notifications
You must be signed in to change notification settings - Fork 0
Welcome to Shin wiki!
This section provides essential coding guidelines for all engineers working on this project. Following these guidelines will help maintain consistency and quality across our codebase.
We adhere to strict case sensitivity for folder names. For instance, module
names start with an uppercase letter (e.g., UserModule), while pages
begin with a lowercase letter (e.g., loginPage).
Default vs. Named Exports:
Default
exports are primarily used when a file contains a single export, such as a component. If multiple exports exist within a file, prefer using named
exports to keep the imports clear and explicit.
Each module is organized into two main folders: components
and containers
.
-
The
components
folder includes reusable, general-purpose components specific to the module. -
The
containers
folder houses sections of a page that include logic, API calls, and more complex compositions.
We use .module.scss
files for styling. When importing these styles, always name the import styles.
Use the BEM (Block, Element, Modifier) methodology to apply class names. For example:
className={styles['error__code']}
For more details on BEM, refer to the BEM Naming Convention.
Each folder(module/page) should contain:
- A main index file. (
index.tsx
) - An index.types file for TypeScript types. (
index.types.ts
) - A
[name].module.scss
file for styling.
.
└── src/
├── constants/
│ └── EXAMPLE.ts
├── core/
│ ├── api/
│ │ ├── module
│ │ ├── http.ts
│ │ └── index.ts
│ ├── helpers
│ ├── hooks
│ ├── router
│ ├── storage
│ └── translations
├── modules/
│ ├── General/
│ │ ├── components
│ │ └── containers
│ └── Layout/
│ ├── components
│ └── containers
├── pages/
│ └── home
├── store/
│ ├── reducers
│ ├── thunks
│ └── index.ts
└── styles/
├── base
├── constants
├── icons.scss
└── main.scss