Формы · React

@virentia/forms не зависит от UI. Это удобно для тестов, SSR и переиспользуемых моделей фич, но компонентам всё же нужен простой способ читать стор-ы и вызывать методы формы в правильном скоупе Virentia.

@virentia/forms-react — этот слой интеграции:

• подписывает компоненты на значения, ошибки и состояние pending;
• возвращает async-обработчики, привязанные к ближайшему ScopeProvider;
• держит модель формы вне React, чтобы её можно было тестировать и переиспользовать без компонентов.

Установка

pnpm add @virentia/forms-react @virentia/forms @virentia/react react

Как устроен раздел

У каждого хука своя страница: как вызывается, что возвращает и какие кейсы встречаются первыми. Начните здесь — с общей настройки скоупа.

Страница	Когда нужна
useField	Компонент отрисовывает одно поле и его ошибки.
useForm	Экран сабмитит форму целиком и показывает серверные ошибки.
useWizard	Экран управляет многошаговым визардом.

Дайте скоуп

Сначала дайте дереву React скоуп Virentia. Все хуки ниже его читают.

import { scope } from "@virentia/core";
import { ScopeProvider } from "@virentia/react";

const appScope = scope();

export function App() {
  return (
    <ScopeProvider scope={appScope}>
      <ProfileScreen />
    </ScopeProvider>
  );
}

Если на странице смонтированы два скоупа, у одной модели формы будет два независимых состояния — по одному на скоуп. Хуки читают снапшоты из ближайшего провайдера и возвращают обработчики, уже привязанные к нему, поэтому для результатов хуков scoped вручную вызывать не нужно.

События поля

Результаты хуков отдают множественное errors и не включают события поля focus / blur. Их привязывают через useUnit из @virentia/react:

import { useUnit } from "@virentia/react";
const blur = useUnit(field.blur);

Дальше

• useField — инпуты, принимающие любой контракт поля.
• useForm — сабмит формы целиком и серверные ошибки.
• useWizard — навигация по шагам с гейтом по валидации.