Welcome to Shin wiki!

Coding Guidelines for Shin-webapp

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.

1. Case Sensitivity

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 !!!

2. Module Structure

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.

3. Styling Conventions

• 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

5. Folder Structure

Each folder(module/page) should contain:

• A main index file. (index.tsx)
• An index.types file for TypeScript types. (index.types.ts)
• A index.module.scss file for styling.

**NOTE**: we have some old components from web-app we can apply these rules for them now