mirror of
https://github.com/formbricks/formbricks.git
synced 2026-01-16 10:31:00 -06:00
ee2573d128
Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Johannes <johannes@formbricks.com> Co-authored-by: Matti Nannt <mail@matthiasnannt.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
103 lines
2.8 KiB
Plaintext
103 lines
2.8 KiB
Plaintext
---
|
|
title: Modules & Components
|
|
description: In this document we outline the best practices for organizing modules and components across the codebase. Clear separation of concerns between modules (which encompass business logic and domain-specific functionality) and components (reusable UI elements and building blocks) promotes clarity, scalability, and maintainability.
|
|
icon: boxes-stacked
|
|
---
|
|
|
|
## Introduction
|
|
|
|
Our codebase follows a modular architecture with two primary organizational units:
|
|
|
|
1. **UI Components**: Reusable components in the `modules/ui/components` directory
|
|
2. **Feature Modules**: Domain-specific functionality organized by feature in the `modules` directory
|
|
|
|
## Module Organization
|
|
|
|
### Core Module Structure
|
|
|
|
Modules are organized by feature and can be found in the `modules` directory. Each module typically includes:
|
|
|
|
```
|
|
modules/
|
|
└── feature-name/
|
|
├── components/ # Feature-specific components
|
|
├── lib/ # Business logic and utilities
|
|
├── types/ # TypeScript types
|
|
├── actions.ts # Server actions
|
|
└── route.ts # API routes (if needed)
|
|
```
|
|
|
|
### Enterprise Edition (EE) Modules
|
|
|
|
Enterprise features are organized in a dedicated `modules/ee` directory:
|
|
|
|
```
|
|
modules/
|
|
└── ee/
|
|
├── insights/
|
|
│ ├── components/
|
|
│ ├── experience/
|
|
│ └── types/
|
|
└── contacts/
|
|
├── segments/
|
|
└── components/
|
|
```
|
|
|
|
## Component Organization
|
|
|
|
### UI Component Structure
|
|
|
|
UI components are centralized in `modules/ui/components` and follow a consistent structure:
|
|
|
|
```
|
|
modules/ui/components/
|
|
└── component-name/
|
|
├── index.tsx # Main component implementation
|
|
├── stories.tsx # Storybook stories
|
|
└── components/ # Sub-components (if needed)
|
|
```
|
|
|
|
### Component Types
|
|
|
|
1. **Base Components**: Fundamental UI elements like Button, Input, Modal
|
|
|
|
2. **Composite Components**: More complex components that combine base components
|
|
|
|
3. **Feature-Specific Components**: Components tied to specific features
|
|
|
|
|
|
### Feature Module Example
|
|
|
|
A feature module with its components and business logic:
|
|
|
|
```
|
|
modules/survey/
|
|
├── components/
|
|
│ ├── question-form-input/
|
|
│ └── template-list/
|
|
├── editor/
|
|
│ └── components/
|
|
├── lib/
|
|
│ └── utils.ts
|
|
└── types/
|
|
└── index.ts
|
|
```
|
|
|
|
|
|
## Best Practices
|
|
|
|
1. **Component Organization**
|
|
- Keep components focused and single-purpose
|
|
- Use proper TypeScript interfaces for props
|
|
- Implement Storybook stories for UI components
|
|
|
|
2. **Module Structure**
|
|
- Organize by feature domain
|
|
- Separate business logic from UI components
|
|
- Use proper type definitions
|
|
|
|
3. **Code Sharing**
|
|
- Share common utilities through the ui/lib directory
|
|
- Maintain clear boundaries between modules
|
|
- Use proper imports with aliases (@/modules/...)
|