# Configucci — Документация проекта

## 📋 Обзор

**Configucci** — это веб-приложение на React для управления конфигурационными файлами в формате XML. Приложение позволяет загружать, редактировать и визуализировать конфигурации с поддержкой множественных окружений (environments) и шаблонизации параметров.

---

## 🛠 Технологический стек

| Категория | Технология |
|-----------|------------|
| **Фреймворк** | React 19.2.0 |
| **Язык** | TypeScript 5.9 |
| **Сборка** | Vite 7.2.4 |
| **UI-библиотека** | Bootstrap 5.3.3 |
| **Тестирование** | Vitest 4.0.16 + jsdom |
| **Линтинг** | ESLint 9.17.0 |
| **Подсветка кода** | react-highlight + highlight.js |

---

## 📁 Структура проекта

```
configucci/
├── src/
│   ├── models/           # Модели данных
│   │   ├── Config.tsx    # Config, ConfigTemplate
│   │   ├── ConfigReader.tsx  # Парсер XML
│   │   ├── Env.ts        # Env, AppEvent, AddEvent, DelEvent, UpdateEvent
│   │   ├── EnvParam.ts   # EnvParam
│   │   └── NamedId.ts    # Интерфейс NamedId
│   ├── componets/        # React-компоненты (орфография оригинала)
│   │   ├── env/
│   │   │   ├── Environment.tsx      # Список окружений
│   │   │   └── EnvironmentParam.tsx # Параметр окружения
│   │   ├── content/
│   │   │   └── Content.tsx          # Вкладки с контентом
│   │   └── FileChooser.tsx          # Загрузка файлов
│   ├── builders/         # Построители XML
│   │   ├── EnvBuilder.ts
│   │   └── index.ts
│   ├── assets/           # Статические ресурсы
│   │   └── cgg.png
│   ├── test/             # Тесты
│   │   └── ConfigReader.test.ts
│   ├── App.tsx           # Главный компонент
│   ├── App.css           # Стили приложения
│   ├── main.tsx          # Точка входа
│   └── index.css         # Глобальные стили
├── docs/
│   └── config.json.xml   # Пример конфигурации
├── public/               # Публичные ресурсы
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts
```

---

## 📦 Модели данных

### `Config`
Основной класс конфигурации:
- `envs: Env[]` — массив окружений
- `template: ConfigTemplate` — шаблон конфигурации
- Методы: `addEnvs()`, `addTemplate()`, `getTemplateAsJson()`, `validateParams()`

### `ConfigTemplate`
Шаблон с параметрами в формате `@paramName@`:
- Извлекает параметры из текста через regex `/@(\w+)@/g`
- Свойства: `content` (исходный текст), `Params` (массив имён параметров)

### `Env`
Окружение с параметрами:
- `id: number`, `name: string`, `params: EnvParam[]`
- Методы: `addParams()`, `delParam()`, `updateParams()`, `isDefault()`

### `EnvParam`
Параметр окружения:
- `id: number`, `name: string`, `value: string`, `isChanged: boolean`
- Методы: `Changed()`, `sanitize()` (HTML-экранирование)

### `AppEvent<T>`
Базовый класс событий для операций CRUD:
- `AddEvent<T>` — добавление
- `UpdateEvent<T>` — обновление
- `DelEvent<T>` — удаление

---

## 🔧 Основные компоненты

### `App` (App.tsx)
Корневой компонент с управлением состоянием через `AppState`:
- Загрузка конфигурации из файла
- Редактирование окружений
- Сохранение с искусственной задержкой 1 секунда

### `FileChooser`
Компонент загрузки файлов:
- Поддерживает только XML-файлы (`text/xml`)
- Кнопка "Create new" создаёт конфигурацию с окружением DEFAULT

### `Environment`
Список окружений с возможностью:
- Выбор окружения из dropdown
- Добавление/удаление/редактирование параметров
- Визуальное отображение изменений (жёлтая рамка)

### `Content`
Вкладки для просмотра данных:

| Вкладка | Описание |
|---------|----------|
| **Env** | XML-представление текущего окружения |
| **Content Template** | JSON-шаблон с подсветкой синтаксиса |
| **Raw template** | Полный XML с окружениями и шаблоном |
| **Test-filled template** | Тестовый JavaScript-код (заглушка) |

---

## 📄 Формат конфигурационного файла

```xml
<engine>
    <environment name="DEFAULT">