@redneckz/wildless-cms-uni-blocks 0.14.737 → 0.14.739

package/mobile/src/components/CalculatorRefinancing/CalculatorRefinancing.tsx

@@ -1,5 +1,5 @@
 import { type JSONRefObject } from '../../data/JSONRefObject';
-import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useForm, type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
 import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
 import { CalculatorValue } from '../../ui-kit/Calculator/CalculatorValue';

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm } from '../../hooks/useForm';
+import { useForm } from '../../hooks/useForm/useForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,9 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type AspectsDef } from '../../model/AspectsProps';
-import { type Slot } from '../../model/ContentPageDef';
-import { type VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -16,6 +13,7 @@ import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import { carouselTariffsCardEventBus } from './carouselTariffsCardEventBus';
 import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
@@ -43,14 +41,22 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     useEffect(
       () =>
-        defaultEventBus.subscribe('fold', (event) => {
-          if (event && options?.parent !== undefined && event.parent === options?.parent) {
+        carouselTariffsCardEventBus.subscribe('fold', (event) => {
+          if (event && options?.parent && event.parent === options?.parent) {
             setIsVisible(event.isUnfolded);
           }
         }),
       [options?.parent],
     );
 
+    const toggle = useCallback(() => {
+      carouselTariffsCardEventBus.fire('fold', {
+        type: 'fold',
+        isUnfolded: !isVisible,
+        parent: options?.parent,
+      });
+    }, [isVisible, options?.parent]);
+
     return (
       <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
         {isIcon(icon) ? (
@@ -70,10 +76,10 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
                 <FoldableSection isUnfolded={isVisible}>{hiddenCells}</FoldableSection>
               </div>
             )}
-            renderFoldButton={
-              cardCells.length >= visibleCellsCount
-                ? renderFoldButton(options?.parent, data, isVisible)
-                : null
+            renderFoldButton={() =>
+              cardCells.length >= visibleCellsCount ? (
+                <FoldButton data={data} isUnfolded={isVisible} onClick={toggle} />
+              ) : null
             }
           />
         ) : (
@@ -84,27 +90,24 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const renderFoldButton =
-  (parent?: Slot, data?: AspectsDef[], isUnfolded = false) =>
-  (): VNode =>
-    (
-      <button
-        className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
-        onClick={() => {
-          if (parent !== undefined) {
-            defaultEventBus.fire('fold', { type: 'fold', isUnfolded: !isUnfolded, parent });
-          }
-        }}
-        type="button"
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...(isUnfolded ? getAspectsAttributes(data) : {})}
-      >
-        <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
-        <Icon
-          className="text-primary-text"
-          name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-          width="16"
-          height="16"
-        />
-      </button>
-    );
+const FoldButton = JSX<{
+  data?: AspectsDef[];
+  isUnfolded?: boolean;
+  onClick?: () => void;
+}>(({ data, isUnfolded = false, onClick }) => (
+  <button
+    className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
+    type="button"
+    onClick={onClick}
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...(isUnfolded ? getAspectsAttributes(data) : {})}
+  >
+    <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
+    <Icon
+      className="text-primary-text"
+      name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+      width="16"
+      height="16"
+    />
+  </button>
+));

package/mobile/src/components/CarouselTariffsCard/carouselTariffsCardEventBus.ts

@@ -0,0 +1,12 @@
+import { EventBus } from '@redneckz/uni-jsx/lib/EventBus/EventBus';
+import { type Slot } from '../../model/ContentPageDef';
+
+export type CarouselTariffsCardAction = {
+  type: 'fold';
+  isUnfolded: boolean;
+  parent?: Slot;
+};
+
+export const carouselTariffsCardEventBus = new EventBus<{
+  fold: CarouselTariffsCardAction;
+}>();

package/mobile/src/components/CreditCardForm/CreditCardForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateRefreshToken } from '../../api/RetailAPI/updateRefreshToken';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -44,7 +44,7 @@ export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...re
     scrollToTop();
   }, []);
 
-  const sections = useMemo(() => stepsSectionsMap[step], [step]);
+  const sections = stepsSectionsMap[step];
 
   const [isFormFinished, { setTrue: handleFinish }] = useBool(false);
 

package/mobile/src/components/CreditCardForm/CreditCardFormContent.ts

@@ -1,4 +1,4 @@
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { type TitleProps } from '../../model/HeadlineType';
 import { type InputSectionsType, type SectionsRetailProps } from '../../model/InputSectionsType';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';

package/mobile/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm } from '../../hooks/useForm';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
 import { type SectionsRetailProps } from '../../model/InputSectionsType';
-import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
-import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
+import { type LeadFormState } from '../../services/retail/model/LeadFormState';
+import { calculateInputs } from '../../services/retail/utils/calculateInputs';
+import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
 import { CreditCardFormStatusTracker } from './CreditCardFormStatusTracker';
 import { renderStep } from './renderStep';
 import { StepsNavigationButtons } from './StepsNavigationButtons';
@@ -21,18 +22,27 @@ export interface CreditCardFormStepProps {
 export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
   ({ step, sections, isFormFinished, onPrevStep, onNextStep, onFinish }) => {
     const inputs = useMemo(
-      () => (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldRetailDef[],
+      () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs || []),
       [sections],
     );
 
+    const formValidator = useCallback(
+      (formState: LeadFormState) =>
+        // TODO Слишком сложно
+        getFormValidator(calculateInputs((_) => formState[_])(inputs, step))(formState),
+      [inputs],
+    );
+
     const [initialState, onSubmit, isSending] = useCreditCardFormAPI({
       step,
-      inputs,
       onNextStep,
       onFinish,
     });
 
-    const [, { field, onSubmit: handleSubmit }] = useForm(initialState, { onSubmit });
+    const [, { field, onSubmit: handleSubmit }] = useForm(initialState, {
+      formValidator,
+      onSubmit,
+    });
 
     return isFormFinished ? (
       <CreditCardFormStatusTracker />

package/mobile/src/components/CreditCardForm/renderInputs.tsx

@@ -1,4 +1,4 @@
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { InputRetailCardMap, InputsRetailMap } from '../../services/retail/inputs';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
 import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
@@ -10,5 +10,9 @@ export interface RenderInputsProps {
   params?: Record<string, any>;
 }
 
+const InputsMap = { ...InputsRetailMap, ...InputRetailCardMap };
+
 export const renderInputs = ({ field, inputs, params }: RenderInputsProps) =>
-  inputs.map(getField(field, params, { ...InputsRetailMap, ...InputRetailCardMap }));
+  inputs.map(
+    getField<FieldRetailDef>(field, params, InputsMap),
+  );

package/mobile/src/components/CreditCardForm/renderStep.tsx

@@ -1,4 +1,4 @@
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
 import { calculateInputs, type GetValue } from '../../services/retail/utils/calculateInputs';
 import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';

package/mobile/src/components/CreditCardForm/useCreditCardFormAPI.tsx

@@ -3,24 +3,17 @@ import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
-import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
-import { calculateInputs, type GetValue } from '../../services/retail/utils/calculateInputs';
-import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
-import { objectValidator } from '../../validation/objectValidator';
-import { isValidationSuccess } from '../../validation/validator';
 import { getCreditCardFormTaskData } from './getCreditCardFormTaskData';
 import { getInitialFormState } from './getInitialFormState';
 
 interface CreditFormApiProps {
   step: number;
-  inputs: FieldRetailDef[];
   onNextStep: () => void;
   onFinish?: () => void;
 }
 
 export const useCreditCardFormAPI = ({
   step,
-  inputs,
   onNextStep,
   onFinish,
 }: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
@@ -52,14 +45,6 @@ export const useCreditCardFormAPI = ({
 
   const handleSubmit = useCallback(
     async (formData: LeadFormState) => {
-      const feedbackValidator = objectValidator(
-        getObjectValidator(calculateInputs(getValue(formData))(inputs, step)),
-      );
-
-      if (!isValidationSuccess(feedbackValidator(formData))) {
-        return;
-      }
-
       startSending();
       retailFormStore.leadForm = formData;
 
@@ -93,8 +78,3 @@ export const useCreditCardFormAPI = ({
 
   return [initialState, handleSubmit, isSending];
 };
-
-const getValue =
-  (formData: LeadFormState): GetValue =>
-  (name) =>
-    formData[name];

package/mobile/src/components/CreditForm/CreditForm.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateRefreshToken } from '../../api/RetailAPI/updateRefreshToken';
 import { type JSONRefObject } from '../../data/JSONRefObject';
@@ -48,9 +48,9 @@ export const CreditForm = UniBlock<CreditFormProps>(({ className, programsSource
     scrollToTop();
   }, []);
 
-  const sections = useMemo(() => stepsSectionsMap[step], [step]);
-
+  const sections = stepsSectionsMap[step];
   const isStartStep = step === 0;
+
   const [isFormFinished, { setTrue: handleFinish }] = useBool(false);
 
   return (

package/mobile/src/components/CreditForm/CreditFormStep.tsx

@@ -1,9 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm } from '../../hooks/useForm';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm/useForm';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
-import { type SectionsProps, type SectionsRetailProps } from '../../model/InputSectionsType';
-import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
+import { type SectionsRetailProps } from '../../model/InputSectionsType';
+import type { LeadFormState } from '../../services/retail/model/LeadFormState';
+import { calculateInputs } from '../../services/retail/utils/calculateInputs';
+import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
 import { CreditFormStatusTracker } from './CreditFormStatusTracker';
 import { type ProgramsSourceProps } from './ProgramsSourceProps';
 import { renderStep } from './renderStep';
@@ -26,18 +28,27 @@ export const CreditFormStep = JSX<CreditFormStepProps>(
     const calcData = programsSource?.[programId ?? '']; // Need normalizator useForm, to be save defaultParams
 
     const inputs = useMemo(
-      () => (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldRetailDef[],
+      () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs ?? []),
       [sections],
     );
 
+    const formValidator = useCallback(
+      (formState: LeadFormState) =>
+        // TODO Слишком сложно
+        getFormValidator(calculateInputs((_) => formState[_])(inputs, step))(formState),
+      [inputs],
+    );
+
     const [initialState, onSubmit, isSending] = useCreditFormAPI({
       step,
-      inputs,
       onNextStep,
       onFinish,
     });
 
-    const [, { field, onSubmit: handleSubmit }] = useForm(initialState, { onSubmit });
+    const [, { field, onSubmit: handleSubmit }] = useForm(initialState, {
+      formValidator,
+      onSubmit,
+    });
 
     return isFormFinished ? (
       <CreditFormStatusTracker />

package/mobile/src/components/CreditForm/renderInputs.tsx

@@ -1,4 +1,4 @@
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { InputsRetailMap } from '../../services/retail/inputs';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
 import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
@@ -11,4 +11,4 @@ export interface RenderInputsProps {
 }
 
 export const renderInputs = ({ field, inputs, params }: RenderInputsProps) =>
-  inputs.map(getField(field, params, { ...InputsRetailMap }));
+  inputs.map(getField<FieldRetailDef>(field, params, { ...InputsRetailMap }));

package/mobile/src/components/CreditForm/renderStep.tsx

@@ -1,4 +1,4 @@
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { type SectionsRetailProps } from '../../model/InputSectionsType';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
 import { calculateInputs, type GetValue } from '../../services/retail/utils/calculateInputs';

package/mobile/src/components/CreditForm/useCreditFormAPI.tsx

@@ -4,23 +4,16 @@ import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { getCreditFormTaskData } from '../../services/retail/adaptors/getCreditFormTaskData';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
-import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
-import { calculateInputs, type GetValue } from '../../services/retail/utils/calculateInputs';
-import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
-import { objectValidator } from '../../validation/objectValidator';
-import { isValidationSuccess } from '../../validation/validator';
 import { getInitialFormState } from './getInitialFormState';
 
 interface CreditFormApiProps {
   step: number;
-  inputs: FieldRetailDef[];
   onNextStep: () => void;
   onFinish?: () => void;
 }
 
 export const useCreditFormAPI = ({
   step,
-  inputs,
   onNextStep,
   onFinish,
 }: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
@@ -55,14 +48,6 @@ export const useCreditFormAPI = ({
 
   const handleSubmit = useCallback(
     async (formData: LeadFormState) => {
-      const feedbackValidator = objectValidator(
-        getObjectValidator(calculateInputs(getValue(formData))(inputs, step)),
-      );
-
-      if (!isValidationSuccess(feedbackValidator(formData))) {
-        return;
-      }
-
       startSending();
       retailFormStore.leadForm = formData;
 
@@ -96,8 +81,3 @@ export const useCreditFormAPI = ({
 
   return [initialState, handleSubmit, isSending];
 };
-
-const getValue =
-  (formData: LeadFormState): GetValue =>
-  (name) =>
-    formData[name];

package/mobile/src/components/Depository/Depository.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm } from '../../hooks/useForm';
+import { useForm } from '../../hooks/useForm/useForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { NotFound } from '../../ui-kit/NotFound/NotFound';
 import { Pagination } from '../../ui-kit/Pagination/Pagination';

package/mobile/src/components/Depository/DepositoryFilter.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { Button } from '../../ui-kit/Button/Button';
 import { DatePicker } from '../../ui-kit/DatePicker/DatePicker';
 import { SearchInput } from '../../ui-kit/SearchDialog/SearchInput';

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm } from '../../hooks/useForm';
+import { useForm } from '../../hooks/useForm/useForm';
 import { type VNode } from '../../model/VNode';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';

package/mobile/src/components/OfficesAtmsMap/renderFiltrationForm.tsx

@@ -1,4 +1,4 @@
-import { type FormFieldRegisterer } from '../../hooks/useForm';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { type VNode } from '../../model/VNode';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';

package/mobile/src/hooks/useAspects/handleAspects.ts

@@ -2,13 +2,13 @@ import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { type Aspects, type AspectsAttribute } from './useAspects';
 
 export type HandleAspectsProps = {
-  aspectsAttributes: AspectsAttribute[];
+  aspectsAttributes?: AspectsAttribute[];
   aspects: Aspects;
   ev: PreventableEventWithTarget;
 };
 
 export const handleAspects = ({ aspectsAttributes, aspects, ev }: HandleAspectsProps) => {
-  for (const { aspectName, params } of aspectsAttributes) {
+  for (const { aspectName, params } of aspectsAttributes ?? []) {
     aspects[aspectName ?? '']?.(ev, params);
   }
 };

package/mobile/src/hooks/useForm/FieldOptions.ts

@@ -0,0 +1,8 @@
+import { type Validator } from '../../validation/validator';
+
+export interface FieldOptions<In = any, Out = In> {
+  parse?: (_: In) => Out;
+  format?: (_: Out) => In;
+  validator?: Validator<Out>;
+  onChange?: (_: Out) => any;
+}

package/mobile/src/hooks/useForm/FormOptions.ts

@@ -0,0 +1,18 @@
+import type { PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
+import type { Validator } from '../../validation/validator';
+
+export type FieldValidatorsMap<FormState extends Record<string, any>> = {
+  [fieldName in keyof FormState]?: Validator<FormState[fieldName] | undefined>;
+};
+
+export type FormValidator<FormState extends Record<string, any>> = (
+  _: FormState,
+) => FieldValidatorsMap<FormState>;
+
+export interface FormOptions<FormState extends Record<string, any>> {
+  resetOnSubmit?: boolean;
+  formValidator?: FormValidator<FormState>;
+  normalizer?: (_: FormState) => FormState;
+  onChange?: (_: FormState) => void;
+  onSubmit?: (_: FormState, ev: PreventableEventWithTarget) => void;
+}

package/mobile/src/hooks/useForm/shallowCompare.ts

@@ -0,0 +1,2 @@
+export const shallowCompare = (a: Record<string, any>, b: Record<string, any>): boolean =>
+  a && b && (a === b || Object.keys({ ...a, ...b }).every((key) => a[key] === b[key]));

package/mobile/src/hooks/useForm/useForm.ts

@@ -0,0 +1,98 @@
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type ControlProps } from '../../ui-kit/ControlProps';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { type ValidationInfo } from '../../validation/validator';
+import { type FieldOptions } from './FieldOptions';
+import { type FormOptions } from './FormOptions';
+import { useFormValidator } from './useFormValidator';
+import { useNormalizedFormState } from './useNormalizedFormState';
+
+export interface FieldProps<V> extends ControlProps<V> {
+  isDirty?: boolean;
+  errors?: ValidationInfo;
+  error?: ValidationInfo[0];
+}
+
+export type FormFieldRegisterer<FormState> = <N extends keyof FormState, V = FormState[N]>(
+  fieldName: N,
+  options?: FieldOptions<V, FormState[N]>,
+) => FieldProps<V extends undefined ? FormState[N] : V>;
+
+export interface FormOperators<FormState extends Record<string, any>> {
+  errors: ValidationInfo;
+  field: FormFieldRegisterer<FormState>;
+  update: (_: FormState) => void;
+  reset: () => void;
+  onSubmit?: (ev: PreventableEvent) => void;
+}
+
+export function useForm<FormState extends Record<string, any>>(
+  initialState: FormState,
+  { resetOnSubmit, formValidator, normalizer, onChange, onSubmit }: FormOptions<FormState> = {},
+): [FormState, FormOperators<FormState>] {
+  const [formState, setFormState] = useNormalizedFormState<FormState>(
+    initialState,
+    normalizer,
+    onChange,
+  );
+
+  const [isDirtyForm, { setTrue: markAsDirty, setFalse: markAsClean }] = useBool(false);
+  const dirtyFieldsMap = useRef<Record<string, boolean>>({});
+
+  const [fieldValidatorsMap, { isValid, errors }] = useFormValidator(formState, formValidator);
+
+  const field: FormFieldRegisterer<FormState> = useCallback(
+    (fieldName, options = {}) => {
+      const { parse, format, onChange: onFieldChange } = options;
+      const value = formState[fieldName];
+      const isDirty = isDirtyForm || dirtyFieldsMap.current?.[String(fieldName)];
+      const fieldValidator = options?.validator ?? fieldValidatorsMap[fieldName];
+      const fieldErrors: ValidationInfo = isDirty && fieldValidator ? fieldValidator(value) : [];
+
+      return {
+        value: format ? (format(value) as any) : value,
+        isDirty,
+        errors: fieldValidator && fieldErrors, // TODO Костыль
+        error: fieldErrors[0],
+        onChange: (_) => {
+          dirtyFieldsMap.current ||= {};
+          dirtyFieldsMap.current[String(fieldName)] = true;
+          const fieldVal = parse ? parse(_) : _;
+          onFieldChange?.(fieldVal as FormState[typeof fieldName]);
+          setFormState((prev) => ({ ...prev, [fieldName]: fieldVal }));
+        },
+      };
+    },
+    [formState, isDirtyForm, fieldValidatorsMap, setFormState],
+  );
+
+  const update = useCallback(
+    (_: FormState) => {
+      dirtyFieldsMap.current = _;
+      setFormState(_);
+    },
+    [setFormState],
+  );
+
+  const reset = useCallback(() => {
+    dirtyFieldsMap.current = {};
+    markAsClean();
+    setFormState(initialState);
+  }, [initialState, setFormState]);
+
+  const handleSubmit = useCallback(
+    (ev: PreventableEvent) => {
+      ev.preventDefault();
+      if (isValid) {
+        resetOnSubmit && reset();
+        onSubmit?.(formState, ev);
+      } else {
+        markAsDirty();
+      }
+    },
+    [resetOnSubmit, formState, isValid, reset, onSubmit],
+  );
+
+  return [formState, { errors, field, update, reset, onSubmit: handleSubmit }];
+}

package/mobile/src/hooks/useForm/useFormValidator.ts

@@ -0,0 +1,24 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { objectValidator } from '../../validation/objectValidator';
+import { isValidationSuccess, type ValidationInfo } from '../../validation/validator';
+import type { FieldValidatorsMap, FormValidator } from './FormOptions';
+
+const EMPTY_VALIDATORS_MAP: FieldValidatorsMap<any> = {};
+const NO_ERRORS = [];
+
+export function useFormValidator<FormState extends Record<string, any>>(
+  formState: FormState,
+  formValidator: FormValidator<FormState> | undefined,
+): [FieldValidatorsMap<FormState>, { isValid: boolean; errors: ValidationInfo }] {
+  const validatorsMap = useMemo(
+    () => formValidator?.(formState) ?? EMPTY_VALIDATORS_MAP,
+    [formValidator, formState],
+  );
+  const errors = useMemo(
+    () => objectValidator(validatorsMap)(formState) ?? NO_ERRORS,
+    [validatorsMap, formState],
+  );
+  const isValid = isValidationSuccess(errors);
+
+  return [validatorsMap, { isValid, errors }];
+}