Команды CLI

CapsuleUI предоставляет простой CLI для управления компонентами и настройкой проекта. Все команды используют префикс npx capsule.

Команды

npx @zizigy/capsule init

Инициализирует CapsuleUI в вашем проекте. Создает папку @capsule с глобальными стилями и утилитами.

Использование:

npx @zizigy/capsule init

Опции:

• -d, --dir <directory> - Базовая директория, где будет создана папка @capsule (по умолчанию: корень проекта)

Примеры:

# Инициализация в корне проекта
npx @zizigy/capsule init

# Инициализация в директории src
npx @zizigy/capsule init -d src

Что делает:

• Создает структуру папки @capsule
• Копирует глобальные стили и утилиты
• Настраивает регистр компонентов

---

npx @zizigy/capsule add <component>

Добавляет компонент в ваш проект из доступных шаблонов.

Использование:

npx @zizigy/capsule add <имя-компонента>

Опции:

• -p, --prefix <prefix> - Пользовательский префикс элемента (по умолчанию: capsule)

Примеры:

# Добавить компонент Button с префиксом по умолчанию
npx @zizigy/capsule add Button

# Добавить компонент Button с пользовательским префиксом
npx @zizigy/capsule add Button --prefix ui

# Добавить несколько компонентов
npx @zizigy/capsule add Button
npx @zizigy/capsule add Alert
npx @zizigy/capsule add Accordion

Что делает:

1. Копирует файлы компонента из шаблонов
2. Заменяет плейсхолдеры __PREFIX__ и __COMPONENT__
3. Переименовывает файлы в соответствии с вашим префиксом (например, capsule-button.js)
4. Импортирует CSS файлы в глобальные стили
5. Импортирует JavaScript файлы в индекс компонентов
6. Обновляет настройки VS Code при необходимости

---

npx @zizigy/capsule list

Показывает список всех доступных компонентов, которые можно добавить в проект.

Использование:

npx @zizigy/capsule list

Пример вывода:

Доступные компоненты:

  - Accordion
  - Alert
  - Autocomplete
  - Badge
  - Breadcrumb
  - Button
  - ButtonGroup
  - Chip
  - Divider
  - Pagination
  - Range
  - Rating
  - ScrollArea
  - Skeleton
  - Stepper
  - Switch
  - Tabs
  - Tooltip

---

npx @zizigy/capsule module <action> [name]

Управляет модулями в вашем проекте (например, утилитами валидации форм).

Использование:

npx @zizigy/capsule module <action> [name]

Действия:

• add <name> - Добавить модуль в ваш проект
• remove <name> - Удалить модуль из вашего проекта
• list - Показать список всех доступных модулей

Примеры:

# Показать доступные модули
npx @zizigy/capsule module list

# Добавить конкретный модуль
npx @zizigy/capsule module add form

# Удалить модуль
npx @zizigy/capsule module remove form

Доступные модули:

• form - Утилиты валидации форм

---

npx @zizigy/capsule debug

Помогает отладить проблемы с установкой и конфигурацией CapsuleUI.

Использование:

npx @zizigy/capsule debug

Что делает:

• Проверяет существование папки @capsule
• Валидирует структуру компонентов
• Показывает текущую конфигурацию
• Предоставляет информацию для устранения неполадок

---

npx @zizigy/capsule vscode

Обновляет настройки VS Code для лучшей поддержки автодополнения и IntelliSense.

Использование:

npx @zizigy/capsule vscode

Что делает:

• Обновляет пользовательские данные HTML для VS Code
• Включает IntelliSense для атрибутов компонентов
• Улучшает автодополнение в VS Code

---

Глобальные опции

Все команды поддерживают эти глобальные опции:

• --help, -h - Показать справку по команде
• --version, -v - Показать номер версии

Советы

• Всегда запускайте npx @zizigy/capsule init сначала в новом проекте
• Используйте npx @zizigy/capsule list чтобы увидеть все доступные компоненты
• Имена компонентов чувствительны к регистру (используйте Button а не button)
• Пользовательские префиксы должны быть в нижнем регистре и не содержать специальных символов