open-index/open-npm huggingface dataset:
npm package: @orioko1812/top-it-ui-react
Description: UI Kit для продуктов компании на базе React, TypeScript, Vite и Storybook.
Latest version: 0.1.2

# TopIt UI Kit

UI Kit для продуктов компании на базе React, TypeScript, Vite и Storybook.

Включает в себя: дизайн-токены (генерация через Style Dictionary), модульные SCSS-стили, документацию и конвенции в папке docs.

## ==Публикация пакета==

1. Убедись, что все изменения зафиксированы и **тесты проходят (добавить в будущем: тестирование с использованием снимков и модульное)**.
2. Обнови версию в `package.json` (например, с помощью `yarn version --patch`).
3. Запусти сборку: `yarn build`.
4. Опубликуй пакет: `yarn publish`.

## ==Использование в других проектах==

### Установка

```bash
yarn add top-it-ui-kit
```

### Импорт SCSS-токенов

В SCSS-файле проекта, где будет использоваться пакет **top-it-ui-kit**.

```scss
// Вариант 1: импорт отдельных файлов.
@use "top-it-ui-kit/tokens/_global-tokens.scss" as *;
@use "top-it-ui-kit/tokens/_component-tokens.scss" as *;
@use "top-it-ui-kit/tokens/_palette.scss" as *;

// Вариант 2: импорт всех токенов через _tokens.scss.
@use "top-it-ui-kit/tokens/_tokens.scss" as *;
```

### Импорт стилей и компонентов

В `main.tsx` или другой точке входа (чтобы компоненты получали сгенерированные CSS-стили).

```tsx
import "top-it-ui-kit/styles.css";
```

В компонентах.

```tsx
import { Button, useTokens } from "top-it-ui-kit";

function App() {
  const tokens = useTokens();

  return (
    <div>
      <Button>Click me</Button>
      <p style={{ color: tokens.textPrimary }}>Динамическая стилизация</p>
    </div>
  );
}
```

Можно использовать готовые компоненты и дизайн-токены (SCSS и переменные через хук) в другом проекте.

## ==Автоматизация==

```bash
# Запуск генерации токенов.
yarn style-dictionary

# Генерация констант и типов для них (запускать после style-dictionary).
yarn generate-tokens

# Запуск TS-проверок.
yarn type-check

# Запуск линтера.
yarn lint

# Автоматическое исправление ошибок линтера.
yarn lint:fix
```