open-index/open-npm huggingface dataset:
npm package: @relotus/hooks
Description: react hooks package
Latest version: 1.0.0

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [`@relotus/hooks`](#relotushooks)
  - [Описание](#%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5)
  - [Подключение в проект](#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82)
    - [Установка:](#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0)
    - [Пример использования](#%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# `@relotus/hooks`

## Описание

@relotus/hooks - npm-пакет с общими react хуками

## Подключение в проект

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

```sh
npm install @relotus/hooks
```

### Пример использования

```ts
import { useBooleanState } from '@relotus/hooks';
```
npm package: @relotus/prettier-config
Description: Shared prettier config
Latest version: 1.1.0

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [`@relotus/prettier-config`](#relotusprettier-config)
  - [Установка](#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# `@relotus/prettier-config`

Общая конфигурация `prettier` для React проектов.

## Установка

Установить пакеты:

```sh
npm install --save-dev --save-exact prettier@2.8.8 @relotus/prettier-config
```

Добавить в [проект конфигурацию для `prettier`](https://prettier.io/docs/en/configuration.html#sharing-configurations) с указанием `@relotus/prettier-config` в качестве наименования переиспользуемой конфигурации. Пример для указания через `package.json`:

```json
{
  "name": "project-name",
  "version": "0.0.0",
  "prettier": "@relotus/prettier-config"
}
```

Добавить файл `.prettierignore` игнорирования для форматирования:

```
node_modules/
package.json
package-lock.json
CHANGELOG.md
/build
/coverage
```

> ❗ После установки необходимо перезапустить редактор кода, чтобы в нем использовалась актуальная версия `prettier`
npm package: @relotus/stylelint-config
Description: Shared stylelint config
Latest version: 1.0.0

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [`@relotus/stylelint-config`](#relotusstylelint-config)
  - [Описание](#%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5)
  - [Подключение в проект](#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82)
  - [Пример использования](#%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)
  - [Расширение](#%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5)
  - [VSCode](#vscode)
  - [WebStorm](#webstorm)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# `@relotus/stylelint-config`

## Описание

@relotus/stylelint-config - npm-пакет с общим конфигом Stylelint для React проектов. У пакета в `peerDependencies` указаны точные версии пакетов `stylelint`, `stylelint-config-css-modules`, `stylelint-config-recommended-scss`, `stylelint-z-index-value-constraint`, поэтому нет необходимости добавлять их в `devDependencies` проекта

## Подключение в проект

Установка:

```sh
npm install --save-dev @relotus/stylelint-config
```

В корне проекта создаём файл `.stylelintrc.json`:

```json
{
  "extends": ["@relotus/stylelint-config"]
}
```

В `package.json` пишем команду для проверки стилей:

```json
"lint:styles": "stylelint \"src/**/*.{css,scss}\""
```

## Пример использования

```sh
npm run lint:styles
```

## Расширение

При действительной необходимости (например, время до рефакторинга проекта) можно расширить правила (изменить, добавить свои):

```json
{
  "extends": ["@relotus/stylelint-config"],
  "rules": {
    "max-nesting-depth": 2,
    "plugin/z-index-value-constraint": { "max": 100 }
  }
}
```

## VSCode

Для автоматической правки стилей в VSCode устанавливаем плагин `Stylelint`: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint#editor.codeactionsonsave, далее в настройках пишем:

```json
"stylelint.validate": ["css", "less", "postcss", "scss", "sass"],
"editor.codeActionsOnSave": {
  "source.fixAll": true
}
```

Исправление стилей согласно правилам будет происходить при каждом сохранении файла с одним из перечисленных расширений

## WebStorm

Возможна автоматическая подсветка неправильного синтаксиса. В меню выбираем `Preferences -> Languages&Frameworks -> Style sheets -> Stylelint`. Плагин `stylelint` должен подтянуться автоматически. В секции `Run for files` пишем нужный паттерн. Выставляем чекбокс `Enable`.
npm package: @relotus/tsconfig
Description: Shared typescript config
Latest version: 1.0.0

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [`@relotus/tsconfig`](#relotustsconfig)
  - [Описание](#%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5)
  - [Подключение в проект](#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82)
  - [Пример использования](#%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# `@relotus/tsconfig`

## Описание

@relotus/tsconfig - npm-пакет с общим конфигом Typescript для React проектов. У пакета в `peerDependencies` указана точная версия TS, поэтому нет необходимости добавлять `typescript` в `devDependencies` проекта

## Подключение в проект

Установка:

```sh
npm install --save-dev @relotus/tsconfig
```

Отредактируй файл `tsconfig.json`:

```json
"extends": "@relotus/tsconfig"
```

Проверь результирующий конфиг TS

```sh
npx tsc --showConfig
```

## Пример использования

```json
{
  "extends": "@relotus/tsconfig",
  "compilerOptions": {
    "baseUrl": "./src"
  },
  "include": ["src", "./src/config"]
}
```

Переопределение общиx правил работает аналогично

```json
{
  "extends": "@relotus/tsconfig",
  "compilerOptions": {
    "target": "es5",
    "baseUrl": "./src"
  },
  "include": ["src", "./src/config"]
}
```
npm package: @relotus/utils
Description: shared utils
Latest version: 1.0.0

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [`@relotus/utils`](#relotusutils)
  - [Описание](#%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5)
  - [Подключение в проект](#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82)
    - [Установка:](#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0)
    - [Пример использования](#%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# `@relotus/utils`

## Описание

@relotus/utils - npm-пакет для работы с общими вспомогательными функциями

## Подключение в проект

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

```sh
npm install @relotus/utils
```

### Пример использования

```js
import { plural } from '@relotus/utils';
```
npm package: @relotus/utkonos-styles
Description: Global Utkonos styles
Latest version: 1.0.0

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [`@relotus/utkonos-styles`](#relotusutkonos-styles)
  - [Описание](#%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5)
  - [Установка](#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0)
  - [Использование](#%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# `@relotus/utkonos-styles`

## Описание

@relotus/utkonos-styles - npm-пакет с глобальными стилями

## Установка

```sh
npm install @relotus/utkonos-styles
```

## Использование

Добавление глобальных стилей:

- Добавить в файл стилей приложения:

```scss
@import '@relotus/utkonos-styles';
```