docs: обновить документацию для V2 системы

Обновления:
- CLAUDE.md - обновлены правила взаимодействия с акцентом на модульную архитектуру
- docs/development/MODULAR_ARCHITECTURE_PATTERN.md - обновлена документация паттерна модульной архитектуры

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Veronika Smirnova
2025-08-25 23:09:29 +03:00
parent 6e3cedec67
commit d200885ff5
2 changed files with 277 additions and 25 deletions

View File

@ -1,7 +1,7 @@
# 🏗️ Паттерн модульной архитектуры для React компонентов
> ⚠️ **ОФИЦИАЛЬНЫЙ СТАНДАРТ АРХИТЕКТУРЫ SFERA**
> Этот документ описывает **ОБЯЗАТЕЛЬНУЮ** архитектуру для всех новых компонентов >500 строк и рефакторинга существующих >800 строк.
> Этот документ описывает **ОБЯЗАТЕЛЬНУЮ** модульную архитектуру по умолчанию для большинства компонентов в системе SFERA.
## 🎯 СТАТУС АРХИТЕКТУРНОГО СТАНДАРТА
@ -12,13 +12,79 @@
### 📋 ПРАВИЛА ПРИМЕНЕНИЯ:
1. **ВСЕ НОВЫЕ КОМПОНЕНТЫ >500 строк** → создавать по модульной архитектуре
2. **Существующие компоненты >800 строк** → рефакторить по возможности
3. **Обязательно использовать** этот паттерн для компонентов dashboard, creation, management
#### ✅ ВСЕГДА МОДУЛЬНАЯ АРХИТЕКТУРА (без исключений):
## 🎯 Применимость паттерна
**1. Страницы и основные разделы:**
### Кандидаты для рефакторинга:
- ВСЕ файлы `page.tsx` в `/app/**/`
- ВСЕ дашборды любых типов
- ВСЕ разделы управления (supplies, employees, products, settings)
- ВСЕ wizard/multi-step компоненты
**2. Формы (даже простые!):**
- ЛЮБАЯ форма создания/редактирования сущности
- Формы с >3 полей
- Многошаговые формы
- Формы с динамическими полями
-очему: формы ВСЕГДА разрастаются (валидация, автозаполнение, зависимые поля)_
**3. Таблицы и списки:**
- ЛЮБАЯ таблица с данными из БД
- Таблицы с фильтрацией/сортировкой
- Таблицы с inline-редактированием
- Списки с действиями (approve/reject/delete)
-очему: всегда добавятся фильтры, сортировка, экспорт, bulk-операции_
**4. Комплексные компоненты:**
- Чаты/мессенджеры
- Календари/планировщики
- Графики/аналитика
- Файловые менеджеры
- Корзины/калькуляторы
#### ❌ ИСКЛЮЧЕНИЯ (только эти остаются простыми):
1. **Чистые UI из Radix/shadcn** - уже оптимизированы
2. **Stateless компоненты** < 50 строк без логики
3. **Чистые Layout** компоненты (Header/Footer)
4. **Utility компоненты** (ErrorBoundary, LoadingState)
5. **Простые модалки** подтверждения (Да/Нет)
## 🎯 КЛЮЧЕВОЕ ПРАВИЛО SFERA
> **"Если сомневаешься - делай модульным. Лучше иметь избыточную структуру папок, чем 2000-строчный спагетти-код через месяц."**
### 📏 Критерии принятия решения:
```typescript
// Алгоритм принятия решения о модульности
function shouldUseModularArchitecture(component) {
// Автоматически ДА
if (
component.type === 'page' ||
component.type === 'dashboard' ||
component.type === 'form' ||
component.type === 'table' ||
component.expectedSize > 300
) {
return true
}
// Проверяем сложность
const complexityScore =
component.stateVariables + // количество useState
component.apiCalls * 2 + // API вызовы весят больше
component.formFields + // поля форм
(component.hasBusinessLogic ? 3 : 0) // бизнес-логика
return complexityScore >= 5
}
```
### Кандидаты для рефакторинга (legacy компонентов):
- **Размер**: >800 строк кода
- **Сложность**: Множественные состояния и бизнес-логика
@ -287,10 +353,11 @@ function MainComponent() {
### Перед началом
- [ ] Компонент больше 800 строк
- [ ] Есть несколько логических секций UI
- [ ] Множественные useState и useEffect
- [ ] Активно развивающийся функционал
- [ ] Компонент относится к категории: page, form, table, dashboard
- [ ] ИЛИ ожидаемый размер >300 строк
- [ ] ИЛИ сложность по алгоритму ≥5 баллов
- [ ] ИЛИ есть несколько логических секций UI
- [ ] ИЛИ множественные useState и useEffect
### Планирование
@ -324,10 +391,28 @@ function MainComponent() {
## 🎯 Заключение
Модульная архитектура значительно улучшает качество кода, скорость разработки и поддержки. Применяйте этот паттерн к большим компонентам постепенно, следуя принципам безопасного рефакторинга.
Модульная архитектура по умолчанию значительно улучшает качество кода, скорость разработки и поддержки в долгосрочной перспективе. В SFERA мы применяем принцип "лучше переструктурировать сразу, чем рефакторить потом".
### 🎯 Практические примеры применения:
**Модульные (новые стандарты):**
- `/app/suppliers/create/page.tsx` → CreateSupplierPage/
- `EmployeeManagementTable` → EmployeeManagement/
- `SupplyOrderForm` → SupplyOrderForm/
- `ProductCatalog` → ProductCatalog/
- `UserSettingsForm` → UserSettingsForm/
**Простые (исключения):**
- `Logo.tsx`
- `LoadingDots.tsx`
- `ConfirmDialog.tsx`
- `PriceDisplay.tsx`
---
**Основано на**: Успешном рефакторинге create-suppliers-supply-page.tsx (1,467→240 строк)
**Обновлено**: Синхронизировано с правилами CLAUDE.md
**Автор паттерна**: Claude Code
**Дата**: Август 2025