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

<Meta title='@dxtmisha/ru/scripts/Classes/DesignStructureClasses - Разрешитель CSS-классов'/>

# Класс DesignStructureClasses

Класс `DesignStructureClasses` отвечает за преобразование структурных метаданных компонента в плоский список определений CSS-классов. Он идентифицирует специфические токены, помеченные как подклассы, и рекурсивно строит имена классов в соответствии с соглашениями об именовании BEM (Block Element Modifier), обеспечивая согласованность архитектуры стилей всей дизайн-системы.

## Ключевые особенности

- **Рекурсивное обнаружение классов** — глубоко обходит деревья свойств для поиска вложенных элементов и модификаторов.
- **Построение BEM-имен** — автоматически объединяет идентификаторы родителя и потомка, используя двойное подчеркивание (`__`) для элементов.
- **Индексация в CamelCase** — генерирует чистые, удобные для переменных имена для использования в логике TypeScript/Vue.
- **Поддержка полных имен** — позволяет специфическим токенам игнорировать родительские иерархии и использовать глобальные имена классов, когда это необходимо.
- **Автоматизированный маппинг свойств** — напрямую интегрируется со стандартными метаданными свойств для определения того, какие элементы вносят вклад в API стилизации.

## Инициализация

Для инициализации разрешителя классов укажите базовое имя компонента. Класс автоматически загрузит связанные структурные метаданные через свою родительскую абстракцию.

**Параметры:**
- `component: string` — идентификатор компонента для обработки (например, `'button'`).

```typescript
import { DesignStructureClasses } from '@dxtmisha/scripts'

const resolver = new DesignStructureClasses('button')
const classes = resolver.get()
```

## Методы

### Информация

- `get(): DesignStructureClassesList` — возвращает полностью обработанный список объектов маппинга классов.

## Операции

### Рабочий процесс разрешения классов

При инициализации класс автоматически выполняет логику разрешения:
1. **Анализ свойств**: движок сканирует список `PropertyItem` компонента на наличие тегов, указывающих на тип `subclass`.
2. **Построение пространства имен**: он отслеживает иерархию имен. Например, `label` внутри `button` становится `button__label`.
3. **Структурирование данных**: для каждого идентифицированного класса создается объект, содержащий:
    - **index**: CamelCase версия имени (например, `buttonLabel`) для ссылок в коде.
    - **className**: фактическая строка CSS-класса (например, `button__label`).
    - **full**: флаг, указывающий, является ли имя абсолютным глобальным классом.
4. **Плоская структура**: рекурсивное дерево преобразуется в одномерный массив, обеспечивая быстрый поиск для движков шаблонов.

### Интеграция с генераторами кода

Этот класс предоставляет важный маппинг, используемый `DesignReplace` для внедрения определений классов в реализации компонентов. Централизуя логику именования, он гарантирует, что изменения в соглашениях об именовании могут быть применены глобально ко всем компонентам без ручного редактирования файлов.
