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

<Meta title='@dxtmisha/ru/scripts/Classes/DesignComponent - Генератор компонентов дизайна'/>

# Класс DesignComponent

Класс `DesignComponent` — это специализированная реализация `DesignCommand`, предназначенная для автоматизированного создания и обслуживания компонентов дизайн-системы. Он координирует генерацию множества типов файлов — от стилей и логики компонентов до документации и метаданных интеграции.

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

- **Полный цикл развертывания** — автоматически генерирует более 10 основных файлов для нового компонента (Vue, SCSS, TS, MDX).
- **Интеллектуальное разрешение свойств** — использует `DesignTypescript` для внедрения свойств компонентов непосредственно в сгенерированные файлы.
- **Автоматизация Storybook** — генерирует файлы `.stories.ts` и `.mdx` с автоматическим разрешением рендеринга и импорта.
- **AI-усиленная Вики** — создает специальные сопутствующие компоненты для поиска и отображения документации с помощью ИИ.
- **Интеграция с воркспейсом** — бесшовно регистрирует новые компоненты в корневом `package.json` и в глобальном списке экспорта библиотеки.
- **Маппинг стилевых токенов** — автоматически преобразует структуры проекта в SCSS-токены стилей.

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

Для инициализации экземпляра генератора используйте конструктор. Он настраивает целевую директорию на основе конфигурации проекта.

**Параметры:**
- `command: string` — идентификатор компонента (например, `'button'`, `'input'`).
- `options: Record<string, string>` — необязательные конфигурационные флаги.

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

const generator = new DesignComponent('button')
generator.make()
```

## Методы

### Управление

- `make(): void` — запускает комплексный процесс генерации для всех файлов, связанных с компонентом.

## Операции

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

При выполнении `make()` внутри директории компонента создается или обновляется следующая иерархия файлов:

- `properties.json` — хранит основные данные маппинга для компонента.
- `props.ts` — TypeScript-определение пропсов компонента, разрешенное из шаблонов конструктора.
- `styleToken.scss` — токены стилей SCSS на основе структуры дизайна компонента.
- `[Name].vue` — основной файл компонента Vue с предварительно настроенными классами и стилями.
- `[Name]AiWiki.vue` — сопутствующий компонент для AI-усиленной вики-документации.
- `index.ts` — точка входа компонента для публичного экспорта.
- `wiki.ts` и `wikiData.ts` — метаданные и структурированная информация о свойствах для сайта документации.
- `[Name].stories.ts` — автоматизированные истории Storybook с динамическим разрешением компонентов.
- `[Name].mdx` — MDX-документация для Storybook с предварительно заполненными слотами и данными пропсов.

### Процесс интеграции

Класс обеспечивает полную интеграцию нового компонента в среду дизайн-системы:
1. **Обновление пакета**: добавляет запись в корневой `package.json` в секцию `exports`.
2. **Экспорт библиотеки**: создает прокси-файл в директории библиотеки для обеспечения возможности глобального импорта компонентов.
3. **Сопоставление описаний Вики**: сканирует `wikiDescriptions` для автоматического заполнения историй Storybook соответствующими примерами.
