import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/scripts/bin/dxt-flags - Генератор спрайтов флагов'/>

# dxt-flags

Команда `dxt-flags` предоставляет автоматизированную утилиту для компиляции директории SVG-иконок флагов в единый оптимизированный файл спрайта WebP и создания соответствующего CSS-файла с маппингом позиций. Под капотом она использует класс `DesignFlags` для рендеринга на основе холста и расчета параметров сетки.

> **Примечание**: Этот скрипт предназначен исключительно для внутреннего использования в репозитории проекта `dxt-ui`.

## Ключевые возможности

- **Автоматическая сборка спрайта**: Объединяет множество отдельных файлов SVG в один высокопроизводительный спрайт WebP.
- **Динамический маппинг позиций**: Автоматически вычисляет точные процентные координаты для каждого флага и генерирует CSS-стили с утилитарными классами.
- **Масштабирование High-DPI**: Рендерит флаги с помощью высокопроизводительных графических библиотек с коэффициентом масштабирования 2x для достижения максимальной четкости.

## Как это работает?

Процесс генерации флагов автоматизирует сборку спрайта и утилитарных стилей:

1. Скрипт сканирует стандартную директорию иконок флагов на наличие всех файлов с расширением `.svg`.
2. Он инициализирует пустой холст с помощью графических инструментов, рассчитывая количество столбцов и строк сетки на основе количества найденных флагов.
3. Он перебирает обнаруженные файлы SVG, загружая каждый в память и рисуя их в рассчитанных позициях сетки с сохранением отступов и пропорций макета.
4. Он записывает координаты и имена каждого флага для построения карты соответствия позиций.
5. Он экспортирует буфер объединенного холста в файл изображения спрайта `.webp` и записывает утилитарный файл стилей, содержащий CSS-маппинг фонового позиционирования.

## Настройка и запуск

Для работы генератора не требуются сложные конфигурации. Просто поместите ваши SVG-иконки флагов в стандартную директорию `src/assets/flags`.

Чтобы запустить компиляцию спрайта и таблицы стилей, выполните:
```bash
npx dxt-flags
```

## Структура генерируемых файлов

После успешного выполнения инструмент экспортирует сгенерированные ресурсы напрямую по настроенным путям в рабочем пространстве:

- `src/assets/flags.webp`: Готовый объединенный High-DPI файл спрайта, содержащий все иконки флагов.
- `src/styles/flags.css`: Сгенерированная таблица стилей CSS, сопоставляющая каждый класс-модификатор отдельного флага (например, `.ui-sys-flags--ru`) с его точным процентным значением фонового позиционирования.
