Administrator

0 Followers · 0 Following

• Joined on 2025-04-12

Repositories Projects Packages Public Activity Starred Repositories

@ava3v/ui-react (0.1.175)

Published 2026-09-18 18:59:34 +03:00 by Administrator

Installation

Set up this registry in your project .npmrc file:

@ava3v:registry=https://git.ava3v.ru/api/packages/Administrator/npm/

To install the package using npm, run the following command:

npm install @ava3v/ui-react@0.1.175

or add it to the package.json file:

"@ava3v/ui-react": "0.1.175"

For more information on the npm registry, see the documentation.

About this package

React-версия библиотеки компонентов `@ava3v/ui` (порт `@ava3v/ui-vue`): общие CSS-токены, темы, плотности и headless-логика — собственный React-слой компонентов. Версии обоих пакетов выпускаются синхронно одной цифрой.

@ava3v/ui-react

React-версия библиотеки компонентов @ava3v/ui (порт @ava3v/ui-vue): общие CSS-токены, темы, плотности и headless-логика — собственный React-слой компонентов. Версии обоих пакетов выпускаются синхронно одной цифрой.

Установка

В .npmrc проекта:

@ava3v:registry=https://git.ava3v.ru/api/packages/Administrator/npm/

npm install @ava3v/ui-react

Пиры: react и react-dom 18 или 19. write-excel-file — опциональный пир, нужен только для экспорта грида в XLSX (подгружается лениво).

Подключение

import '@ava3v/ui-react/dist/ui.css'   // токены, темы, плотности, стили компонентов
import { Ava3vButton, Ava3vDataGrid, Ava3vNotify, Ava3vDialogHost, notify, ava3vConfirm } from '@ava3v/ui-react'

Ava3vNotify и Ava3vDialogHost монтируются один раз на приложение (обычно в корневом лейауте) — без них notify(...) и ava3vConfirm(...) не имеют куда рендериться:

export function AppRoot() {
  return (
    <>
      <AppRoutes />
      <Ava3vNotify />
      <Ava3vDialogHost />
    </>
  )
}

Тема и плотность

Темы и плотности управляются атрибутами на контейнере приложения:

<div data-theme="dark" data-density="compact">…</div>

Манифест токенов темы (для экранов настройки): ava3vThemeTokens (+ типы Ava3vThemeToken, Ava3vThemeTokenGroup).

Локаль

import { setAva3vLocale, setAva3vLocaleMessages } from '@ava3v/ui-react'

setAva3vLocale('en')   // компоненты перерисовываются сами

Серверный грид

Контракт серверной загрузки общий с Vue-версией — см. docs/datagrid-backend-contract.md (включая раздел с React-примерами):

import { Ava3vDataGrid, createRemoteDataStore } from '@ava3v/ui-react'

// load получает DataGridBackendRequest (skip/take/sort/filter/…) и отдаёт { data, totalCount }
const store = createRemoteDataStore({
  load: request => fetch('/api/items', { method: 'POST', body: JSON.stringify({ gridLoadOptions: request }) }).then(r => r.json()),
})

<Ava3vDataGrid store={store} columns={columns} rowKey="id"
  showFilterRow showHeaderFilterButtons stateStorageKey="items" />

refresh() через ref после сохранения всегда шлёт запрос и ждёт его; строки в событиях — те же объекты, что пришли от стора.

Эталонный экран «реестр + карточка» — в плейграунде репозитория: пункт «React: реестр + карточка» (режим React в шапке).

Тесты

npm test   # из папки react/

Версионирование

Пакет на стадии 0.x: релизы частые, синхронные с @ava3v/ui-vue. Ломающие изменения до 1.0 возможны в минорных/патч-версиях и всегда отмечаются в CHANGELOG.md в секции «Ломающие» — перед обновлением сверяйтесь с ним. Публикация — см. PUBLISHING.md.

Оверлеи и Esc

Vue- и React-модалки делят один overlayManager (состояние на globalThis, общее для обоих бандлов): Esc получает только верхний слой (модалка, диалоги и оверлеи грида, Ava3vPopup, Ava3vDrawer, Ava3vContextMenu, полноэкранный Ava3vHtmlEditor, drill-down Ava3vPivotGrid), стек z-слоёв и блокировка скролла общие. Свой попап регистрирует слой хуком useEscapeLayer(open, close) из пакета; без хуков — pushModalEscape(handler) и возвращённая функция снятия. ava3vConfirm с intent: 'warning' | 'danger' фокусирует безопасную кнопку и возвращает фокус опенеру; Ava3vButton принимает autoFocus.

Отличия от Vue-версии

• spinner React-аналога не имеет и считается устаревшим — используйте Ava3vLoader или Ava3vSkeleton.
• Слоты Vue — пропы-функции или children; события — колбэки onXxx.
• Поля ввода: value + onValueChange вместо modelValue/v-model; только чтение — readOnly везде (у Ava3vTimePicker, Ava3vRating и Ava3vHtmlEditor прежнее readonly оставлено как deprecated-синоним).
• Ava3vDataGrid: onSelectionChange(keys, rows, meta) — позиционно (у Vue одно событие-объект); в Ava3vDataGridRef нет recalcLayout; остальные методы те же, включая saveBatchChanges/cancelBatchChanges.
• Ava3vModal: ref-метода requestClose нет — закрывайте через onVisibleChange/beforeClose; пропов режима формы (formTitle, formMode, formModeLabels) нет.
• Локаль: хук useAva3vMessages() (у Vue — useAva3vLocale()); setAva3vLocale/setAva3vLocaleMessages общие — состояние локали лежит на globalThis, страница с обоими пакетами задаёт локаль один раз.
• Тултип: installAva3vTooltip() и хук useAva3vTooltip вместо Vue-плагина и директивы.
• Обязательные по смыслу пропы (rows, items, value) терпят undefined: rows={query.data} до ответа сервера — пустой компонент, а не падение или цикл рендеров.
• Порядок оверлеев, смонтированных одним коммитом (модалка в модалке, drawer с открытым меню), задаёт глубина вложенности: свой оверлей-контейнер оборачивает потомков в OverlayDepthProvider (useOverlayDepth()).
• Полное руководство по библиотеке (темы, локаль, формы, грид, Esc) — в корневом README.

Dependencies

Peer Dependencies

ID	Version
react	^18.0.0 || ^19.0.0
react-dom	^18.0.0 || ^19.0.0
write-excel-file	^4.1.1

Details

npm

2026-09-18 18:59:34 +03:00

1

1.4 MiB

Assets (1)

ui-react-0.1.175.tgz 1.4 MiB

Versions (36) View all

0.1.179 2026-09-26

0.1.178 2026-09-21

0.1.177 2026-09-21

0.1.176 2026-09-20

0.1.175 2026-09-18