Reon.PRO UI Library

Библиотека UI-компонентов для продуктов компании Reon.PRO. Построена на React, использует Floating UI для позиционирования и React Spring для анимаций.

Установка

npm install reon-ui-lib

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

import { Button } from 'reon-ui-lib';

function App() {
  return (
    <Button
      color="primary"
      appearance="filled"
      onClick={() => alert('Привет!')}
    >
      Нажми меня
    </Button>
  );
}

Компоненты

Controls

Button

Кнопка с поддержкой загрузки, иконок и кастомизации стилей.

import { Button } from 'reon-ui-lib';

<Button
  color="primary"        // primary | secondary | tertiary | success | warning | danger
  appearance="filled"    // filled | outline | inline
  spacing="large"        // large | medium | small
  leftIcon={<Icon />}
  rightIcon={<Icon />}
  isLoading={false}
  disabled={false}
  onClick={handleClick}
>
  Текст кнопки
</Button>

| Prop | Тип | По умолчанию | Описание | |------|-----|-------------|----------| | children | ReactNode | — | Содержимое кнопки | | color | primary \| secondary \| tertiary \| success \| warning \| danger | primary | Цветовая схема | | appearance | filled \| outline \| inline | — | Стиль отображения | | spacing | large \| medium \| small | large | Размер отступов | | leftIcon | ReactNode | — | Иконка слева от текста | | rightIcon | ReactNode | — | Иконка справа от текста | | isLoading | boolean | false | Показывает индикатор загрузки | | disabled | boolean | false | Блокировка кнопки | | innerRef | Ref<HTMLButtonElement> | — | Ссылка на DOM-элемент | | styles | { button?: CSSProperties } | — | Инлайн-стили для слотов | | Все ButtonHTMLAttributes | — | — | Стандартные атрибуты кнопки |

TextField

Текстовое поле ввода.

import { TextField } from 'reon-ui-lib';

<TextField
  value={value}
  onChange={setValue}
  label="Имя"
  placeholder="Введите имя"
  error="Обязательное поле"
  disabled={false}
/>

| Prop | Тип | Описание | |------|-----|----------| | value | string | Значение поля | | onChange | (value: string) => void | Обработчик изменения | | label | string | Подпись над полем | | placeholder | string | Подсказка внутри поля | | error | string | Текст ошибки | | disabled | boolean | Блокировка ввода |

NumberField

Числовое поле ввода.

import { NumberField } from 'reon-ui-lib';

<NumberField
  value={value}
  onChange={setValue}
  label="Количество"
/>

Пропсы — те же, что у TextField, но значение — number.

TextArea

Многострочное текстовое поле.

import { TextArea } from 'reon-ui-lib';

<TextArea
  value={value}
  onChange={setValue}
  label="Описание"
  rows={4}
/>

TimeField

Поле для ввода времени.

import { TimeField } from 'reon-ui-lib';

<TimeField
  value={value}
  onChange={setValue}
  label="Время"
/>

Select

Выпадающий список с поиском.

import { Select } from 'reon-ui-lib';

<Select
  items={items}
  selectedId={selectedId}
  onChange={setSelectedId}
  label="Выберите значение"
  placeholder="Начните ввод..."
/>

| Prop | Тип | Описание | |------|-----|----------| | items | ComboboxItem[] | Массив опций {id: string, label: string} | | selectedId | string \| null | Выбранный ID | | onChange | (id: string \| null) => void | Обработчик выбора | | label | string | Подпись над полем | | placeholder | string | Подсказка |

Autocomplete

Поле ввода с автодополнением.

import { Autocomplete } from 'reon-ui-lib';

<Autocomplete
  items={items}
  value={value}
  onChange={setValue}
  label="Поиск"
/>

| Prop | Тип | Описание | |------|-----|----------| | items | ComboboxItem[] | Массив опций для поиска | | value | string | Текущее значение | | onChange | (value: string) => void | Обработчик изменения |

TimeInput

Ввод времени через выпадающий список.

import { TimeInput } from 'reon-ui-lib';

<TimeInput
  value={value}
  onChange={setValue}
  label="Время"
/>

Checkbox

import { Checkbox } from 'reon-ui-lib';

<Checkbox
  checked={isChecked}
  onChange={setIsChecked}
  label="Согласен с условиями"
/>

Switch

import { Switch } from 'reon-ui-lib';

<Switch
  checked={isEnabled}
  onChange={setIsEnabled}
  label="Уведомления"
/>

ToggleButton

Кнопка-переключатель.

import { ToggleButton } from 'reon-ui-lib';

<ToggleButton
  checked={isActive}
  onChange={setIsActive}
>
  Режим
</ToggleButton>

Link

Компонент ссылки.

import { Link } from 'reon-ui-lib';

<Link href="https://reon.pro" target="_blank">
  Перейти на сайт
</Link>

Tag

import { Tag } from 'reon-ui-lib';

<Tag color="primary" onRemove={handleRemove}>
  Метка
</Tag>

Primitives

CircularLoader

Круговой индикатор загрузки.

import { CircularLoader } from 'reon-ui-lib';

<CircularLoader size={40} />

LoaderWrap

Обёртка для контента с индикатором загрузки.

import { LoaderWrap } from 'reon-ui-lib';

<LoaderWrap isLoading={isLoading}>
  <Content />
</LoaderWrap>

Utils

Portal

Рендерит содержимое в портал (за пределами DOM-дерева родителя).

import { Portal } from 'reon-ui-lib';

<Portal>
  <ModalContent />
</Portal>

ClickAwayListener

Обработчик клика вне элемента.

import { ClickAwayListener } from 'reon-ui-lib';

<ClickAwayListener onClickAway={handleClose}>
  <DropdownMenu />
</ClickAwayListener>

PopperBase / ClickAwayPopper

Всплывающие окна с позиционированием (на основе Floating UI).

import { PopperBase } from 'reon-ui-lib';

<PopperBase anchorRef={ref} open={isOpen}>
  <TooltipContent />
</PopperBase>

Хуки

import {
  useDebouncedValue,
  useDebouncedCallback,
  useForceUpdate,
  useForkRefs,
  useRefsList,
} from 'reon-ui-lib';

| Хук | Описание | |-----|----------| | useDebouncedValue(value, delay) | Debounce значения | | useDebouncedCallback(fn, delay) | Debounce вызова функции | | useForceUpdate() | Принудительный ререндер | | useForkRefs(...refs) | Объединение нескольких ref-ов | | useRefsList() | Управление списком ref-ов |

Утилиты

import {
  isElementInViewport,
  isStringContains,
  maintainScrollVisibility,
  normalizeSearchString,
  normalizeString,
} from 'reon-ui-lib';

Лицензия

Proprietary — собственность Reon.PRO.