configucci/DOCS.md

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-код (заглушка)

---

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

<engine>
    <environment name="DEFAULT">