open-index/open-npm huggingface dataset:
npm package: @quple-pos/header
Description: Набор компонентов для создания шапки проекта.
Latest version: 2.1.0

# [Дизайн-система Quple](http://quple.design/) | Header

Набор компонентов для создания шапки проекта.

# Как использовать

## Установите пакет

```sh
# NPM
$ npm install @quple-pos/header
# Yarn
$ yarn add @quple-pos/header
```

## Подключите зависимости

Чтобы начать работу, установите библиотеку [`@quple-pos/uikit`](https://www.npmjs.com/package/@quple-pos/uikit) и [настройте тему](http://quple.design/libs/portal/theme-themeabout).

### Можно использовать компоненты

Например, так:

```js
import { Theme, presetGpnDefault } from '@quple-pos/uikit/Theme';
import { Header } from '@quple-pos/header';
const App = () => {
  return (
    <Theme preset={presetGpnDefault}>
      <Header />
    </Theme>
  );
};
```

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

[Посмотреть документацию и примеры](http://quple.design/libs/header)

## Разработка

### Подготовка окружения

Рабочее окружение должно содержать NodeJS и Yarn.

Чтобы установить зависимости, выполните команду:

```sh
$ yarn install
```

### Основные команды

```sh
# Запуск локального сервера для разработки
$ yarn start

# Сборка пакета
$ yarn build

# Сборка стенда
$ yarn stand:build

# Запуск тестов
$ yarn test
```

## Контрибьюторам

Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте [инструкцию для контрибьюторов](https://quple.design/libs/portal/contributers-code).

## Лицензия

Дизайн-систему можно использовать бесплатно, она распространяется на условиях открытой [лицензии MIT](https://quple.design/static/licence_mit.pdf).
npm package: @quple-pos/icons
Description: Quple — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/). В этой библиотеки собраны все иконки, которые используются в дизайн-системе.
Latest version: 0.10.0

# [Дизайн-система Quple](http://quple.design/) | Библиотека иконок

Quple — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/). В этой библиотеки собраны все иконки, которые используются в дизайн-системе.

# Как использовать

## Установите пакет

`yarn add @quple-pos/uikit @quple-pos/icons`

## Подключите тему

Чтобы начать работу с библиотекой интерфейсных компонентов, подключите [тему](https://quple.design/libs/portal/theme-themeabout).

## Можно использовать компоненты

Например, так:

```tsx
import React from 'react';
import { Theme, presetGpnDefault } from '@quple-pos/uikit/Theme';
import { Button } from '@quple-pos/uikit/Button';
import { IconCancel } from '@quple-pos/icons/IconCancel';

const App = () => (
  <Theme preset={presetGpnDefault}>
    <Button label="Закрыть" iconLeft={IconCancel} onlyIcon />
  </Theme>
);
```

## Документация и стенд

На стенде можно менять параметры и смотреть, как меняются компоненты. Документация — во вкладке у каждого компонента.

[Вперёд, к стенду](https://quple.design/libs/icons)

## Разработка

### Подготовка окружения

Рабочее окружение должно содержать NodeJS и Yarn.

Чтобы установить зависимости, выполните команду:

```sh
$ yarn install
```

### Основные команды

```sh
# Запуск локального сервера для разработки
$ yarn start

# Сборка пакета
$ yarn build

# Сборка стенда
$ yarn stand:build

# Запуск тестов
$ yarn test

# Преобразование иконок в компонеты
$ yarn icon-generate
```

## Контрибьюторам

Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте [инструкцию для контрибьюторов](https://quple.design/libs/portal/contributers-code).

## Лицензия

Дизайн-систему можно использовать бесплатно, она распространяется на условиях открытой [лицензии MIT](https://quple.design/static/licence_mit.pdf).
npm package: @quple-pos/uikit
Description: Quple — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/).
Latest version: 4.32.0

# [Дизайн-система Quple](https://quple.design/) | Библиотека интерфейсных компонентов

Quple — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/).

В дизайн-систему входит несколько библиотек. **Здесь — библиотека интерфейсных компонентов:** простые контролы, сложные блоки, темы и хуки. Все библиотеки представлены в виде компонентов и макетов в Figma.

## Что входит в дизайн-систему

### Библиотека компонентов

[Репозиторий](https://github.com/quple-company/uikit) | [NPM](https://www.npmjs.com/package/@quple-pos/uikit) | [Документация и стенд](http://uikit.quple.design/) | [Макеты](https://www.figma.com/community/file/853774806786762374)

### Библиотека графиков

[Репозиторий](https://github.com/quple-company/charts) | [NPM](https://www.npmjs.com/package/@quple-pos/charts) | [Документация и стенд](http://charts.quple.design) | [Макеты](https://www.figma.com/community/file/982611119114314434)

[>> Посмотреть все библиотеки](https://github.com/quple-company)

<hr>

Подробности — на [на сайте дизайн-системы Consta](http://quple.design/)

Следите за новостями и релизами в [телеграм-канале дизайн-системы](https://t.me/quple_ui_releases)

# Как использовать

## Установите пакет

```
yarn add @quple-pos/uikit
```

## Начните работу с библиотекой

Чтобы начать работу с библиотекой интерфейсных компонентов, подключите тему:

```tsx
import React from 'react';
import { Theme, presetGpnDefault } from '@quple-pos/uikit/Theme';
import { Button } from '@quple-pos/uikit/Button';

const App = () => (
  <Theme preset={presetGpnDefault}>
    <Button label="Кнопка" />
  </Theme>
);
```

[Что такое темы и как с ними работать](https://portal.quple.design/libs/portal/theme-themeabout)

## Документация и стенд

На стенде можно менять параметры и смотреть, как меняются компоненты. Документация — во вкладке у каждого компонента.

[Вперёд, к стенду](http://quple.design/libs/uikit)

## Разработка

### Подготовка окружения

Рабочее окружение должно содержать NodeJS и Yarn.

Чтобы установить зависимости, выполните команду:

```sh
$ yarn install
```

### Основные команды

```sh
# Запуск локального сервера для разработки
$ yarn start

# Сборка пакета
$ yarn build

# Сборка стенда
$ yarn stand:build

# Запуск тестов
$ yarn test
```

## Контрибьюторам

Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте [инструкцию для контрибьюторов](https://quple.design/libs/portal/contributers-code).

## Лицензия

Дизайн-систему можно использовать бесплатно, она распространяется на условиях открытой [лицензии MIT](https://quple.design/static/licence_mit.pdf).
npm package: @quple-pos/widgets-configs
Description: NPM: https://www.npmjs.com/package/@quple-pos/widgets-configs
Latest version: 1.5.1

# Configs

NPM: https://www.npmjs.com/package/@quple-pos/widgets-configs

## Обновление версии и публикация пакета

Обновлять версию пакета нужно строго через `npm version (major | minor | patch | ...)` и в `master` ветке. Публикация пакета происходит автоматически при отправке нового тега в мастер.

```sh
> npm version patch
> git push origin master --follow-tags
```

## Подключение без публикации

Обычно для подключения пакета без публикации можно использовать `yarn link`

Для локального тестирования совместимости с другими проектами стоит использовать утилиту [Yalc](https://github.com/whitecolor/yalc)
1. `Yalc` можно установить глобально или использовать без установки с помощью [npx](https://www.npmjs.com/package/npx)
2. Опубликовать пакет локально ``yalc publish``
3. Перейти в корневую директорию проекта в который хотим добавить локальный пакет
4. Локально подключить пакет в проект `yalc link @quple-pos/widgets-configs --yarn` или `yalc add @quple-pos/widgets-configs --yarn`
npm package: @quple-pos/widgets-utils
Description: NPM: https://www.npmjs.com/package/@quple-pos/widgets-utils
Latest version: 0.2.15

# Utils

NPM: https://www.npmjs.com/package/@quple-pos/widgets-utils

## Установка, обновление, публикация и подключение пакета

Инструкции находятся в пакете [quple-widgets-configs](https://github.com/quple-pos/quple-pos-widgets-configs)

## Зависимости
- NodeJS = 12.x
- Yarn >= 1.19

## Установка зависимостей

```bash
$ yarn install
```

## Основные команды

```bash
# Сборка и старт development-сервера
$ yarn start

# Сборка для production
$ yarn run build

# Линтинг всех файлов
$ yarn run lint

# Форматирование всех файлов prettier
$ yarn run format

# Запуск тестов
$ yarn test
```

### Методы

- **getCalculatedSize** - Возвращает размер с учетом ресайза дашборда

- **calcSize** - Возвращает строку вида `calc(SIZE * var(--base-size))`. Используется в `postcss-functions`, так же можно использовать напрямую для вставки в `style` аттрибут элемента