Совместимость с legacy-кодом

Chakra UI предоставляет современный подход к созданию интерфейсов на React, при этом библиотека построена с учетом гибкости и возможности интеграции в существующие проекты. Работа с legacy-кодом требует понимания нескольких ключевых аспектов: адаптация стилей, управление темизацией, миграция компонентов и управление состоянием.

Интеграция в существующие проекты

При подключении Chakra UI к проекту с legacy-кодом важно учитывать существующую архитектуру. Основные шаги:

Установка зависимостей
```
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
```
Это минимальный набор для работы библиотеки. framer-motion используется для анимаций, @emotion/styled и @emotion/react — для стилизации компонентов.
Оборачивание приложения в ChakraProvider Для корректной работы тем и стилей необходимо обернуть корневой компонент:
```
import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";

function App() {
  return (
    <ChakraProvider theme={theme}>
      <LegacyApp />
    </ChakraProvider>
  );
}
```
Использование собственного объекта theme позволяет объединять стили Chakra UI с существующими глобальными стилями legacy-приложения.
Изоляция области применения Если проект большой, рекомендуется оборачивать только новые или модернизируемые модули в ChakraProvider, чтобы не ломать старый CSS и глобальные классы.

Работа с темизацией в legacy-коде

Chakra UI использует тему для управления стилями компонентов. Для legacy-проектов это позволяет постепенно заменять CSS на токены темы.

Создание кастомной темы:

import { extendTheme } from "@chakra-ui/react";

const customTheme = extendTheme({
  colors: {
    primary: "#1A202C",
    secondary: "#2D3748",
  },
  fonts: {
    heading: "Arial, sans-serif",
    body: "Verdana, sans-serif",
  },
});

export default customTheme;

Это позволяет переопределять базовые цвета и шрифты, чтобы они соответствовали стилям существующего проекта.

Использование useTheme для совместимости: Компоненты legacy-кода можно адаптировать под тему Chakra UI через хук useTheme:

import { useTheme } from "@chakra-ui/react";

function LegacyButton({ label }) {
  const theme = useTheme();
  return <button style={{ backgroundColor: theme.colors.primary }}>{label}</button>;
}

Интеграция с CSS-классами legacy

Chakra UI поддерживает проп className, что позволяет сочетать старые классы CSS и стили Chakra:

import { Box } from "@chakra-ui/react";

function LegacyContainer() {
  return <Box className="legacy-container" p={4} bg="gray.100" />;
}

p={4} и bg="gray.100" — это пропсы Chakra, которые не конфликтуют с существующим CSS.
Подобный подход позволяет пошагово переносить стили без полной переработки кода.

Миграция компонентов поэтапно

Выделение отдельных UI-блоков Локализованные элементы интерфейса (кнопки, карточки, модальные окна) переносятся на Chakra UI. Пример кнопки:
```
import { Button } from "@chakra-ui/react";

function LegacyButton({ label, onClick }) {
  return <Button colorScheme="teal" onCl ick={onClick}>{label}</Button>;
}
```
Обеспечение обратной совместимости Для старого кода можно создать обертки вокруг компонентов Chakra, чтобы API оставался прежним:
```
function OldButton({ text, handleClick }) {
  return <Button onCl ick={handleClick}>{text}</Button>;
}
```
Постепенное внедрение Не требуется переписывать весь проект сразу — достаточно заменять компоненты по мере необходимости, сохраняя стабильность legacy-кода.

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

Chakra UI не диктует подход к состоянию, но совместимость с legacy-кодом часто требует интеграции с существующими хуками и глобальными менеджерами состояния:

Совместимость с Redux или MobX Компоненты Chakra можно напрямую использовать с mapStateToProps или хуками useSelector, useDispatch.

Локальное состояние через useState/useEffect Chakra компоненты полностью совместимы с React-хуками:

import { Input } from "@chakra-ui/react";
import { useState } from "react";

function LegacyForm() {
  const [value, setValue] = useState("");
  return <Input value={value} onCha nge={e => setValue(e.target.value)} />;
}

Работа с модальными окнами и порталом

Chakra UI использует Portal для модальных окон, тултипов и поповеров. В legacy-проектах это важно для:

Изоляции модальных окон от глобальных стилей
Сохранения z-index и контекста DOM

Пример модального окна:

import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from "@chakra-ui/react";

function LegacyModal({ isOpen, onClose }) {
  return (
    <Modal isOpen={isOpen} onCl ose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Заголовок</ModalHeader>
        <ModalBody>Содержимое модалки</ModalBody>
        <ModalFooter>
          <Button onCl ick={onClose}>Закрыть</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

Использование модалки через Chakra UI не нарушает legacy-код, так как портал рендерится в отдельный слой DOM.