CLI-инструменты

Для интеграции Chakra UI в проект на JavaScript или TypeScript используется официальный CLI-инструмент, который облегчает подключение библиотеки, настройку темы и создание шаблонов компонентов. Основная команда для установки CLI выглядит так:

npm install @chakra-ui/cli -g

После установки глобально CLI становится доступным в терминале. Проверить успешность установки можно командой:

chakra --version

Эта команда выводит текущую версию CLI, что важно для совместимости с проектом.

Инициализация проекта с Chakra UI

Для существующего проекта используется команда:

chakra init

Она выполняет следующие действия автоматически:

  • Создаёт структуру папок для темизации (theme), включая файлы index.js и components.js.
  • Настраивает провайдер ChakraProvider в точке входа приложения (App.js или main.jsx).
  • Добавляет базовые конфигурации цвета, шрифтов и размеров.

CLI позволяет выбрать между JavaScript и TypeScript версиями проекта, что упрощает работу в командах с разными требованиями к типизации.

Работа с компонентами через CLI

Chakra UI CLI предоставляет возможность генерации компонентов, что ускоряет разработку и обеспечивает единообразие кода. Команда для создания нового компонента:

chakra generate component Button

Параметры команды:

  • --typescript — создаёт компонент с типами для TypeScript.
  • --with-storybook — автоматически создаёт файл для Storybook.
  • --dir — задаёт путь для создания компонента внутри структуры проекта.

Сгенерированный компонент уже подключен к базовой теме и готов к использованию с ChakraProvider.

Настройка темы через CLI

CLI упрощает создание и модификацию кастомной темы. Команда для генерации темы:

chakra generate theme

Она создаёт следующие структуры:

  • colors.js — палитра проекта.
  • fonts.js — шрифты для заголовков и текста.
  • breakpoints.js — медиазапросы для адаптивного дизайна.
  • components.js — настройка стилей для всех компонентов, включая базовые состояния (hover, active, disabled).

Для обновления темы используется команда:

chakra theme update

CLI автоматически проверяет, какие файлы изменились, и синхронизирует их с проектом.

Интеграция с Storybook

Chakra UI CLI поддерживает генерацию историй для Storybook, что позволяет визуально тестировать компоненты. Команда для интеграции:

chakra add storybook

После выполнения CLI создаёт:

  • Файл конфигурации Storybook (.storybook/main.js).
  • Примеры историй для каждого компонента, созданного через CLI.

Это упрощает проверку компонентов на разных состояниях и размерах экрана без необходимости ручного написания boilerplate-кода.

Управление токенами и стилями

CLI позволяет работать с дизайн-токенами, используя команды:

chakra tokens list
chakra tokens add
chakra tokens remove
  • list — выводит все доступные токены (цвета, шрифты, отступы).
  • add — добавляет новый токен в тему.
  • remove — удаляет устаревший токен.

Такое управление позволяет централизованно контролировать визуальные параметры проекта и избегать дублирования стилей.

Автоматизация и скрипты

CLI поддерживает скрипты для сборки и деплоя, интегрируемые с package.json. Например:

{
  "scripts": {
    "chakra:build": "chakra build",
    "chakra:watch": "chakra watch"
  }
}
  • build — компилирует тему и компоненты в продакшн-формат.
  • watch — отслеживает изменения в файлах темы и автоматически обновляет компоненты.

Эти скрипты экономят время на ручной пересборке и интеграции изменений.

Интеграция с другими фреймворками

CLI поддерживает подключение Next.js, React Router и Vite, обеспечивая:

  • Автоматическую настройку ChakraProvider.
  • Импорт глобальных стилей.
  • Подключение кастомной темы без ручного изменения точек входа приложения.

Команды для интеграции зависят от используемого фреймворка:

chakra add nextjs
chakra add vite

Каждая команда создаёт базовые файлы конфигурации и проверяет совместимость версий.

Проверка и обновление CLI

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

chakra help

Для обновления CLI до последней версии:

npm update -g @chakra-ui/cli

Регулярное обновление гарантирует поддержку новых функций, компонентов и шаблонов, снижая риск конфликтов с версиями React и TypeScript.

Использование CLI в Chakra UI обеспечивает структурированное создание компонентов, централизованное управление темой и автоматизацию процессов, что делает разработку более быстрой, предсказуемой и масштабируемой.

Оглавление