# Начало работы

Установите пакеты, подключите стили и тему и отрисуйте первый компонент.

## Требования

- `react` и `react-dom` `^19.0.0`
- сборщик, который загружает CSS, импортированный из пакетов: Vite, webpack, Next.js и подобные

## Установка

```bash
pnpm add @vega-ui/react @vega-ui/theme-core @vega-ui/icons
```

- `@vega-ui/react`: компоненты и их таблица стилей.
- `@vega-ui/theme-core`: светлая и тёмная темы. Цвета, поверхности и текст компоненты берут из её переменных, поэтому без неё они остаются без оформления.
- `@vega-ui/icons`: иконки, которые используются в примерах. `@vega-ui/react` уже зависит от этого пакета, но pnpm и Yarn Plug'n'Play разрешают приложению импортировать только пакеты, которые оно указало само.

Если приложение использует календарные системы или помощники для дат напрямую, установите ещё `@vega-ui/i18n`. Подробнее — в разделе [Даты и календарные системы](https://vega-ui.dev/ru/docs/i18n/#установка).

## Подключение стилей

Компоненты не импортируют свой CSS сами. Импортируйте тему и таблицу стилей один раз в точке входа приложения, тему первой:

```tsx
import '@vega-ui/theme-core';
import '@vega-ui/react/style.css';
```

С CSS-слоями сначала объявите их порядок, а библиотеку импортируйте в отдельные слои. Тогда стили приложения побеждают независимо от специфичности:

```css
@layer theme, library, app;

@import url('@vega-ui/theme-core') layer(theme);
@import url('@vega-ui/react/style.css') layer(library);
```

Стили вне слоёв побеждают любой слой, поэтому стили приложения можно и не помещать в слой.

## Применение темы

Переменные темы заданы на классах `.light` и `.dark`. Поставьте класс на корневой элемент:

```html
<html class="light">
```

Держите его на `<html>` или `<body>`, а не на внутренней обёртке. `Dialog`, `Drawer` и `Sheet` рендерятся в `document.body`, вне дерева приложения, и получают тему, только если она задана на предке `body`.

Чтобы сменить тему, замените класс. Собственные темы описаны в разделе [Темы](https://vega-ui.dev/ru/docs/styling/themes/).

## Шрифты

Шрифты по умолчанию — `Montserrat, Arial, sans-serif`. Библиотека не загружает Montserrat: если приложение его не подключило, текст отображается шрифтом Arial.

Подключите Montserrat в приложении или задайте свой набор шрифтов:

```css
:root {
  --default-font-family: Inter, system-ui, sans-serif;
}
```

Заголовки следуют `--default-font-family`. Код использует `--code-font-family`.

## Первый компонент

```tsx
import { Button } from '@vega-ui/react';

export function App() {
  return <Button>Save changes</Button>;
}
```

Про Next.js и серверный рендеринг — в разделе [Next.js и SSR](https://vega-ui.dev/ru/docs/nextjs/).

## Частые ошибки

- Импортирован только `@vega-ui/react/style.css`: без `@vega-ui/theme-core` переменные не определены.
- Класс темы стоит на внутренней обёртке: `Dialog`, `Drawer` и `Sheet` открываются без темы.
- Montserrat не загружен, а набор шрифтов не заменён: текст отображается шрифтом Arial.
- `@vega-ui/icons` импортируется, но не установлен: сборка не может его найти.

## Работа над библиотекой

```bash
pnpm install
pnpm storybook
pnpm test
pnpm docs:validate
```

- `pnpm storybook`: песочница компонентов.
- `pnpm test`: тесты всех пакетов; тесты компонентов запускаются в Chromium, Firefox и WebKit.
- `pnpm --filter @vega-ui/react test`: только тесты компонентов.
- `pnpm docs:validate`: проверяет структуру документации.