-
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.
!!! EXCEPT: all pages use named
export !!!
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.
-
Use the BEM (Block, Element, Modifier) methodology to apply class names. For example:
className={css['error__code']}
For more details on BEM, refer to the BEM Naming Convention.
-
Using
module.scss
Purpose: We use .module.scss files to manage shared and more complex styles. This helps keep our JSX code clean and avoids cluttering it with inline styles. Advantages: Refer to the benefits of CSS Modules for better style encapsulation and modularity.
-
Using
Tailwind
Purpose: Tailwind CSS is used primarily for small, utility-based styles. This includes spacing, visibility, and responsive design adjustments.
Scope: Apply Tailwind at the container and page levels for: Spacing and alignment Visibility and responsive design (e.g., hiding elements at different screen sizes)
By using both methods appropriately, we ensure that our styling is both modular and efficient, enhancing both code readability and maintainability
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.
**NOTE**: we have some old components from web-app we can apply these rules for them now
.
└── 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