Skip to main content

Structure and Naming

Directory structure and naming standards​

Introduction​

Maintaining a consistent and organized folder structure is crucial for a scalable and maintainable codebase. In this document, we will define a folder structure and file naming standards for organizing components, utilities, and types within your project.

Folder Structure​

Here's an example folder structure that follows the proposed standards:

src
├── components
│   ├── mycomponent
│   │   ├── index.ts
│   │   ├── mycomponent.ts
│   │   ├── mycomponent.spec.ts
│   │   └── mycomponent.types.ts
│   └── utils
│       ├── myutil
│       │   ├── index.ts
│       │   ├── myutil.ts
│       │   ├── myutil.spec.ts
│       │   └── myutil.types.ts
└── types
    └── mygenerictype.types.ts

Components​

The components directory is where all your reusable components will reside. Each component should have its own folder, containing the necessary files related to that component.

Component Folder​

Inside the components directory, each component folder should follow the following structure:

  • index.ts: This file serves as an entry point for the component and should only export the component without any additional functionality.
  • <component-name>.ts: This file contains the implementation and functionality of the component.
  • <component-name>.spec.ts: This file contains the component's unit tests.
  • <component-name>.types.ts: If specific types are required for the component, they should be placed in this file within the same folder.

Utilities​

The utils directory is used for storing utility functions, helper classes, or modules.

Utility Folder​

Inside the utils directory, each utility should have its own folder, following a similar structure as components:

  • index.ts: This file should only export the utility without any additional functionality.
  • <utility-name>.ts: This file contains the implementation and functionality of the utility.
  • <utility-name>.spec.ts: This file contains the utility's unit tests.
  • <utility-name>.types.ts: If specific types are required for the utility, they should be placed in this file within the same folder.

Types​

The types directory is used for storing generic or shared types that can be used across the project.

Types Folder​

Inside the types directory, you can organize your type files based on their purpose or domain. For example, you can have files like user.types.ts, config.types.ts, etc. In this specific example, we have a single file:

  • mygenerictype.types.ts: This file contains generic or shared types that are used throughout the project.

Conclusion​

Adhering to a well-defined folder structure and file naming standards improves code maintainability and organization. By following the proposed structure, you can keep your components, utilities, and types neatly organized, facilitating collaboration and future development within your project.