Naming Conventions

Introduction

This wiki page serves as a guide for establishing consistent folder and file naming conventions within projects that utilize React and TypeScript.

Folder structure

The project files are grouped into folders to ensure proper structuring and organization.

src
├─ components
├─ features
├─ hooks
├─ lib
├─ providers
├─ types
└─ utils

Note: Additional folders can be introduced based on the technical requirements.

Components

Includes reusable custom components which are independent of the requirement or domain.

Example:

src
├─ components
│  ├─ app-header
│  ├─ breadcrumbs
│  ├─ data-list
│  ├─ download
│  ├─ generic-components
│  │  ├─ edit-components

Features

Includes custom components developed based on a specific requirement.

Example:

src
├─ components
├─ features
│  ├─ about
│  ├─ accounts
│  ├─ contacts
│  ├─ email-templates

Hooks

Includes custom developed hooks.

Example:

src
├─ components
├─ features
├─ hooks
│  ├─ notification-service-hook.ts
│  ├─ core-module-navigation-hook.ts

Lib

Includes functionalities or data provided by encapsulating external libraries.

Example:

src
├─ components
├─ features
├─ hooks
├─ lib
│  ├─ automapper
│  ├─ network
│  ├─ router

Example libraries: automapper, swagger-typescript-api, typesafe-routes

Providers

Contains various provider components responsible for providing essential functionalities and data to other components of the application.

Example:

src
├─ components
├─ features
├─ hooks
├─ lib
├─ providers
│  ├─ auth-provider.tsx
│  ├─ query-provider.tsx
│  ├─ request-provider.tsx

Types

Custom types and interfaces are included in this folder.

Example:

src
├─ components
├─ features
├─ hooks
├─ lib
├─ providers
├─ types
│  ├─ index.tsx

Utils

Includes constants, helpers, validators and any other utilities.

Example:

src
├─ components
├─ features
├─ hooks
├─ lib
├─ providers
├─ types
├─ utils
│  ├─ constants.ts
│  ├─ formik-helper.ts
│  ├─ general-helper.ts
│  ├─ import-file-helper.ts

Naming guidelines

Directory naming

Kebab case naming convention is followed for any directory in the project.

Example:

src
├─ components
├─ data-list
├─ features
│  ├─ email-templates

File naming

Kebab case naming convention is followed for any custom file in the project.

Example:

src
├─ components
│  ├─ app-header
│  │  ├─ index.tsx
├─ hooks
│  ├─ notification-service-hook.ts
├─ providers
│  ├─ auth-provider.tsx
├─ utils
│  ├─ constants.ts

Components

A component is grouped into a directory and every directory has a root file named index.tsx which includes the root component.

A directory can have multiple components grouped into folders.

Example:

src
├─ components
│  ├─ app-header
│  │  ├─ index.tsx
├─ features
│  ├─ accounts
│  │  ├─ index.tsx
│  │  ├─ add
│  │  │  ├─ index.tsx
│  │  ├─ edit
│  │  │  ├─ index.tsx

Any supporting/sub component file can be named by the component name within the same directory.

Example:

src
├─ features
│  ├─ accounts
│  │  ├─ index.tsx
│  │  ├─ sub-component.tsx

Component name in the file is followed pascal case naming convention.

Examples:

src
├─ components
├─ features
│  ├─ accounts
│  │  ├─ index.tsx

export const AccountMain = () = {}

src
├─ features
│  ├─ accounts
│  │  ├─ view
│  │  │  ├─ index.tsx

export const AccountView = () = {}

Types/Interfaces

Pascal case naming convention is used to define custom type/interface names.

Example:

src
├─ types
│  ├─ index.ts

export interface BreadCrumbLink {}
export type GridDataState {}

Variables and Constants

Camel case naming convention is used for variables and constants

Example:

let modelName = "contact"
const defaultFilterOrder = "asc"

Style files

Component specific style files are grouped in the same directory as the component.

Style files naming can follow below conventions:

Example:

src
├─ components
│  ├─ module-wrapper
│  │  ├─ index.tsx
│  │  ├─ index.styled.ts
│  │  ├─ style.css

Test files

Component specific test files are grouped in the same directory as the component.

Example:

src
├─ features
│  ├─ accounts
│  │  ├─ add
│  │  │  ├─ index.tsx
│  │  │  ├─ index.test.ts

Summary

There are various naming conventions available in the industry. In order to maintain code consistency and promote effective collaboration, it is essential to adhere to a single naming convention within a project.