e48adbcb00
- Migrated from Python pre-commit to NodeJS-native solution - Reorganized documentation structure - Set up Husky + lint-staged for efficient pre-commit hooks - Fixed Dockerfile healthcheck issue - Added comprehensive documentation index
99 lines
3.2 KiB
Markdown
99 lines
3.2 KiB
Markdown
# 🧩 Component Architecture
|
|
|
|
## Component Organization
|
|
|
|
The components are organized by feature and responsibility for better maintainability:
|
|
|
|
```
|
|
components/
|
|
├── medication/ # Medication-related components
|
|
│ ├── AddMedicationModal.tsx
|
|
│ ├── EditMedicationModal.tsx
|
|
│ ├── ManageMedicationsModal.tsx
|
|
│ ├── DoseCard.tsx
|
|
│ └── index.ts
|
|
├── auth/ # Authentication components
|
|
│ ├── AuthPage.tsx
|
|
│ ├── AvatarDropdown.tsx
|
|
│ ├── ChangePasswordModal.tsx
|
|
│ └── index.ts
|
|
├── admin/ # Admin interface components
|
|
│ ├── AdminInterface.tsx
|
|
│ └── index.ts
|
|
├── modals/ # Generic modal components
|
|
│ ├── AccountModal.tsx
|
|
│ ├── AddReminderModal.tsx
|
|
│ ├── EditReminderModal.tsx
|
|
│ ├── HistoryModal.tsx
|
|
│ ├── ManageRemindersModal.tsx
|
|
│ ├── OnboardingModal.tsx
|
|
│ ├── StatsModal.tsx
|
|
│ └── index.ts
|
|
├── ui/ # Reusable UI components
|
|
│ ├── BarChart.tsx
|
|
│ ├── ReminderCard.tsx
|
|
│ ├── ThemeSwitcher.tsx
|
|
│ └── index.ts
|
|
└── icons/ # Icon components
|
|
└── Icons.tsx
|
|
```
|
|
|
|
## Import Structure
|
|
|
|
### Feature-Based Imports
|
|
|
|
```tsx
|
|
// Medication components
|
|
import { AddMedicationModal, DoseCard } from './components/medication';
|
|
|
|
// Authentication components
|
|
import { AuthPage, AvatarDropdown } from './components/auth';
|
|
|
|
// Modal components
|
|
import { AccountModal, StatsModal } from './components/modals';
|
|
|
|
// UI components
|
|
import { BarChart, ThemeSwitcher } from './components/ui';
|
|
```
|
|
|
|
## Component Categories
|
|
|
|
### 🏥 **Medication Components**
|
|
|
|
- **Purpose**: Medication management and dose tracking
|
|
- **Components**: AddMedicationModal, EditMedicationModal, ManageMedicationsModal, DoseCard
|
|
- **Responsibility**: CRUD operations for medications and dose status management
|
|
|
|
### 🔐 **Authentication Components**
|
|
|
|
- **Purpose**: User authentication and profile management
|
|
- **Components**: AuthPage, AvatarDropdown, ChangePasswordModal
|
|
- **Responsibility**: Login/register, user menus, credential management
|
|
|
|
### 👑 **Admin Components**
|
|
|
|
- **Purpose**: Administrative functionality
|
|
- **Components**: AdminInterface
|
|
- **Responsibility**: User management, system administration
|
|
|
|
### 🎛️ **Modal Components**
|
|
|
|
- **Purpose**: Overlay interfaces for specific actions
|
|
- **Components**: AccountModal, AddReminderModal, EditReminderModal, HistoryModal, ManageRemindersModal, OnboardingModal, StatsModal
|
|
- **Responsibility**: Focused user interactions in modal format
|
|
|
|
### 🎨 **UI Components**
|
|
|
|
- **Purpose**: Reusable interface elements
|
|
- **Components**: BarChart, ReminderCard, ThemeSwitcher
|
|
- **Responsibility**: Visual presentation and data display
|
|
|
|
## Benefits of This Organization
|
|
|
|
✅ **Feature Cohesion** - Related components grouped together
|
|
✅ **Easy Navigation** - Clear folder structure
|
|
✅ **Reduced Import Complexity** - Index files for clean imports
|
|
✅ **Better Maintainability** - Logical separation of concerns
|
|
✅ **Scalability** - Easy to add new components in appropriate categories
|
|
✅ **Testing** - Each feature can be tested independently
|