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

<Meta title='@dxtmisha/ru/scripts/bin/dxt-component - Генерация базовой структуры компонентов'/>

# dxt-component

Команда `dxt-component` обеспечивает быструю генерацию базовой структуры (скафолдинг) для дизайн-системы. Инструмент использует `ComponentCreator` и `ComponentItem` для автоматического обнаружения и первичной инициализации пустых директорий компонентов.

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

- **Автоматическое создание директорий**: Обнаруживает пустые папки внутри `src/components` и разворачивает базовый vue код из встроенных шаблонов.
- **Динамическое внедрение шаблонов**: Автоматически заменяет общие системные плейсхолдеры (такие как имя `ComponentDoc` и имя `[project]`), используя внутренние шаблоны незаметно для разработчика.

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

Этот процесс автоматизирует создание повторяющихся структур папок:

1. Класс `ComponentCreator` действует как сканнер, проверяя все вложенные структуры строго внутри `src/components`. Он фильтрует директории, которые полностью пусты.
2. Для каждой пустой папки он инициирует `ComponentItem`, который в свою очередь загружает предустановленные файлы шаблонов компонентов.
3. Выполняется строковая замена плейсхолдеров на реальные названия компонента и текущего рабочего проекта. Затем получившийся код записывается прямо в файловую систему.

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

Для работы генератора не требуются сложные конфигурации. Инструмент динамически читает ваш `package.json`, чтобы извлечь поле `name`, которое затем автоматически подставляется вместо всех шаблонных маркеров `[project]`.

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

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

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

- `[ComponentName].vue`: Базовый компонент Vue 3 со структурой `<script setup>`, импортом типов и скафолдингом `<style lang="scss">`.
- `index.ts`: Стандартный экспорт компонента Vue (`export const [ComponentName]`).
- `types.ts`: Определения TypeScript для стандартных `Props`, `Emits`, `Slots` и `Defaults`.
- `subcomponents/`: Пустая директория (с `.gitignore`), готовая для внутренних вложенных компонентов.
- `wiki/[ComponentName].mdx`: Готовый к запуску файл документации Storybook MDX, использующий `@dxtmisha/wiki/storybook`.
- `wiki/[ComponentName].stories.ts`: Исполняемый скрипт Storybook Vue 3, определяющий превью компонента.
- `wiki/run.ts`: Исполняемый node-скрипт (сокращение), предназначенный для быстрого запуска команды ИИ-генерации `dxt-component-wiki` специально для этого компонента.
