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

<Meta title='@dxtmisha/ru/# UI/# Создание и управление компонентом'/>

# Создание и управление компонентом

Процесс разработки в системе **DXT UI** максимально автоматизирован с помощью скриптов генерации кода. Основная идея заключается в том, что разработчик описывает метаданные компонента, а система сама создает и обновляет необходимые файлы (пропсы, стили, шаблоны).

```bash
npm run ui
npm run ui [ComponentName]
```

Команда `npm run ui` — это основной инструмент для работы с компонентами. Она автоматически сканирует директории, находит новые или измененные папки и синхронизирует все связанные файлы (`props.ts`, `styleToken.scss`, `.vue`) на основе данных из `properties.json`.

- Чтобы создать или обновить конкретный компонент, просто запустите команду после внесения изменений в его папку.
- Чтобы полностью пересобрать библиотеку и обновить все экспорты, запустите команду без параметров.

## Создание нового компонента

Чтобы создать новый компонент "с нуля", выполните следующие шаги:

1. **Создайте директорию**: В папке `src/components/Ui/` (или в вашем проекте) создайте новую папку с названием компонента (например, `MyButton`).
2. **Запустите инициализацию**: Выполните команду `ui` (или `npm run ui`). Скрипт автоматически обнаружит новую папку и создаст в ней необходимые файлы.

```bash
npm run ui
```

Система создаст файл `properties.json` с базовой структурой, а также все вспомогательные файлы (props, styles, vue).

3. **Заполните свойства**: Отредактируйте созданный файл `properties.json`, добавив модификаторы и токены.
4. **Синхронизируйте изменения**: Снова запустите команду `ui`, чтобы обновить все связанные файлы на основе ваших изменений.

```bash
npm run ui
```

### Результат генерации
Система автоматически создаст следующие файлы на основе ваших метаданных и выбранного конструктора:
- `props.ts` — типизированные свойства, расширяющие конструктор и определяющие значения по умолчанию.
- `styleToken.scss` — SCSS-токены и миксины.
- `DesignComponent.vue` — основной Vue-компонент с логикой инициализации.
- `index.ts`, `wiki.ts`, `stories.ts` — файлы экспорта, документации и историй.


### Настройка зависимостей в Vue
В созданном `.vue` файле при инициализации класса `Design` (например, `BarsDesign`) вы можете передать объект `components`. Это позволяет подключить дочерние компоненты, которые требуются для работы текущего (например, иконки или индикаторы загрузки).

> Подключайте только те компоненты, которые действительно используются. Если какой-то зависимый компонент (например, `ripple`) не нужен в вашей реализации, его можно просто не указывать в объекте.

Для управления свойствами дочерних компонентов используйте параметр `compMod`. Это позволяет передавать значения по умолчанию для пропсов внутренних элементов (например, установить размер или стиль кнопки внутри панели навигации).

```typescript
const design = new BarsDesign('my.bars', props, {
  emits,
  classes: classesToken,
  components: {
    button: MyButton
  },
  compMod: {
    button: {
      text: true,
      size: 'xs',
      inverse: true
    }
  }
})
```

### Работа с Props и значениями по умолчанию

Файл `props.ts` содержит объект `defaults`, который объединяет стандартные значения из конструктора и специфичные для вашего компонента настройки.

Пример в файле `props.ts`:
```typescript
export const defaults: object = {
  ...defaultsBars,
  iconBack: 'arrow_back',
  paddingByIndent: true
}
```


## Обновление компонента

Если вам нужно изменить свойства компонента (добавить модификатор, изменить токен или CSS-значение), следуйте правилу **"Source of Truth"**:

1. Отредактируйте файл `properties.json`.
2. Повторно запустите команду:
   ```bash
   npm run ui MyButton
   ```

Скрипт автоматически обновит `props.ts` (добавит новые типы), `styleToken.scss` (обновит переменные) и шаблоны, сохраняя при этом целостность архитектуры.

## Пересборка всей библиотеки

Когда вы работаете сразу над несколькими компонентами или хотите обновить глобальные экспорты библиотеки (media, plugins, types), используйте команду `ui` без аргументов:

```bash
npm run ui
```



