Code style и конвенции

В Chakra UI важно поддерживать ясную и предсказуемую структуру проекта. Компоненты обычно располагаются в папке components/, страницы — в pages/, а глобальные стили и темы — в theme/. Такой подход упрощает масштабирование приложения и работу в команде.

Пример структуры проекта:

src/
  components/
    Button/
      Button.js
      Button.stories.js
      Button.test.js
    Modal/
      Modal.js
      Modal.styles.js
  pages/
    index.js
    about.js
  theme/
    index.js
    colors.js
    components.js
  utils/
    formatDate.js

Ключевой момент: каждый компонент имеет собственную папку, включающую основной файл, стили и тесты. Это облегчает поддержку и переиспользование компонентов.

Именование компонентов и файлов

Используется PascalCase для компонентов (Button, ModalWindow) и camelCase для функций и вспомогательных утилит (formatDate, useToggle). Файлы компонентов именуются по имени компонента (Button.js), стили — как Component.styles.js.

Для Chakra UI компоненты, расширяющие базовые элементы (например, Box, Flex) или создающие новые UI элементы, следует называть так, чтобы сразу было понятно назначение:

// Хорошее именование
export const PrimaryButton = (props) => (
  <Button colorScheme="blue" {...props} />
);

// Плохое именование
export const Btn = (props) => <Button {...props} />;

Ключевой момент: ясное имя повышает читаемость кода и упрощает поддержку.

Конвенции по использованию Chakra UI компонентов

  1. Использование Box и Flex как базовых контейнеров Box и Flex — универсальные обертки для построения структуры. Использовать их как базу для создания кастомных компонентов лучше, чем напрямую писать стили CSS.
<Box p={4} bg="gray.100" borderRadius="md">
  Контент
</Box>

<Flex align="center" justify="space-between">
  <Text>Заголовок</Text>
  <Button>Действие</Button>
</Flex>

  1. Стилизация через props вместо inline-стилей Chakra UI предоставляет удобные пропсы (color, bg, p, m, borderRadius) для стилизации. Inline-стили должны использоваться только для сложных кастомных случаев.

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

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

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7c5cc",
      500: "#e53e3e",
    },
  },
  fonts: {
    heading: "Inter, sans-serif",
    body: "Roboto, sans-serif",
  },
});

Стилизация компонентов и переиспользование

Для комплексных компонентов, часто используемых в разных местах, создается отдельный объект стилей в Component.styles.js.

// Button.styles.js
export const buttonStyles = {
  baseStyle: {
    borderRadius: "md",
    fontWeight: "bold",
  },
  variants: {
    solid: {
      bg: "brand.500",
      color: "white",
    },
    outline: {
      border: "2px solid",
      borderColor: "brand.500",
    },
  },
};

В компоненте подключение производится через sx или useStyleConfig:

import { useStyleConfig, Button as ChakraButton } from "@chakra-ui/react";
import { buttonStyles } from "./Button.styles";

export const Button = (props) => {
  const styles = useStyleConfig("Button", props);
  return <ChakraButton __css={styles} {...props} />;
};

Ключевой момент: централизованная стилизация облегчает поддержку и масштабирование интерфейса.

Форматирование JSX и props

  • Один пропс на строку для длинных компонентов с множеством атрибутов.
  • Лаконичные компоненты могут оставаться в одну строку.
// Много пропсов
<Button
  colorScheme="blue"
  size="lg"
  variant="solid"
  onCl ick={handleClick}
>
  Нажми меня
</Button>

// Один пропс
<Text fontSize="sm">Маленький текст</Text>
  • Стараться избегать вложенности более 3–4 уровней без вынесения в отдельные компоненты.

Документация и комментарии

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

/**
 * PrimaryButton — основной компонент кнопки для действий пользователя
 * @param {object} props - стандартные props Chakra Button
 */
export const PrimaryButton = (props) => (
  <Button colorScheme="blue" {...props} />
);

Ключевой момент: хорошие комментарии повышают читаемость и позволяют быстрее включаться новым разработчикам в проект.

Тестирование компонентов

Используется Jest и React Testing Library. В Chakra UI рекомендуется проверять:

  • корректную отрисовку с разными пропсами;
  • правильное применение цветовых схем и вариаций;
  • поведение событий (onClick, onChange).
import { render, screen } from "@testing-library/react";
import { PrimaryButton } from "./Button";

test("отрисовывает кнопку с текстом", () => {
  render(<PrimaryButton>Click</PrimaryButton>);
  expect(screen.getByText("Click")).toBeInTheDocument();
});

Итоги по code style

  • Использование единых правил именования и структуры папок;
  • Стилизация через props и тему вместо inline CSS;
  • Централизация стилей и повторное использование через объекты и useStyleConfig;
  • Форматирование JSX с акцентом на читаемость;
  • Документирование и тестирование компонентов.

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

Оглавление