Сегменты

Раздел описывает сегменты SLM: что такое сегмент, какие бывают и что в каждом из них лежит.

Определение

Сегмент — папка внутри модуля, которая группирует файлы по назначению. Набор сегментов не фиксирован — модуль включает только те, которые ему нужны. Команда сама определяет какие сегменты используются в проекте — архитектура даёт рекомендацию.

Обзор

Сегмент	Содержимое
ui/	Компоненты модуля — только .tsx файлы
parts/	Вложенные модули со своими сегментами
hooks/	React-хуки
stores/	Сторы состояния
services/	Работа с внешними источниками данных
mappers/	Трансформация данных между форматами
types/	TypeScript-типы и интерфейсы
styles/	Стили
lib/	Утилиты и хелперы модуля
config/	Константы и конфигурация

Сегмент ui/

Компоненты, принадлежащие модулю. Содержит только .tsx файлы — без своих сегментов, стилей, типов, хуков. Использует сегменты родительского модуля.

auth/
├── ui/
│   ├── auth-provider.tsx
│   ├── auth-guard.tsx
│   └── logout-button.tsx
├── types/
├── hooks/
└── index.ts

Если компоненту нужны собственные сегменты — это уже не ui/, а parts/.

Сегмент parts/

Вложенные модули со своими сегментами. Каждый элемент parts/ — полноценный модуль: папка с компонентом, хуками, стилями, типами и т.д.

home/
├── parts/
│   ├── hero-section/
│   │   ├── hero-section.tsx
│   │   ├── styles/
│   │   └── parts/
│   │       └── top-banner/
│   │           └── top-banner.tsx
│   └── features-section/
│       ├── features-section.tsx
│       └── hooks/
├── home.screen.tsx
└── index.ts

Отличие от ui/: элемент parts/ — модуль со своими сегментами. Элемент ui/ — компонент, один .tsx файл.

Вложенность parts/ инкапсулирует область разработки горизонтально: каждый разработчик работает в своём parts/-модуле, не затрагивая чужие. Это снижает конфликты при параллельной разработке.

Если вложенный модуль обрастает своими parts/ — это сигнал, что он достаточно самостоятельный для подъёма на уровень выше.

Сегмент hooks/

React-хуки модуля. Инкапсулируют логику, состояние, подписки, побочные эффекты.

hooks/
├── use-auth.hook.ts
├── use-session.hook.ts
└── use-permissions.hook.ts

Сегмент stores/

Сторы состояния модуля. Конкретная реализация зависит от выбранного стейт-менеджера (Zustand, MobX, Redux и т.д.).

stores/
├── auth.store.ts
└── session.store.ts

Сегмент services/

Работа с внешними источниками данных: API-вызовы, запросы, подписки.

services/
├── auth.service.ts
└── token.service.ts

Сегмент mappers/

Функции трансформации данных из одного формата в другой: DTO в доменный тип, доменный тип в DTO, доменный тип в ViewModel.

mappers/
├── map-user.ts
├── map-product.ts
└── map-order-to-dto.ts

Сегмент types/

TypeScript-типы и интерфейсы модуля. Доменные типы, DTO, пропсы компонентов.

types/
├── user.type.ts
└── session.type.ts

Сегмент styles/

Стили модуля. Формат зависит от выбранного подхода (CSS Modules, SCSS, CSS-in-JS и т.д.).

styles/
├── auth.module.css
└── login-form.module.css

Сегмент lib/

Утилиты и хелперы, специфичные для модуля. Чистые функции без побочных эффектов.

lib/
├── validate-email.ts
└── format-phone.ts

Отличие от shared/lib/: здесь лежат утилиты, нужные только этому модулю. Общие утилиты — в shared/lib/.

Сегмент config/

Константы и конфигурация модуля: маршруты, лимиты, дефолтные значения.

config/
├── routes.ts
└── constants.ts