@reformer/core 1.0.0 → 1.1.0-beta.1

package/README.md

@@ -3,10 +3,13 @@
 [![npm version](https://img.shields.io/npm/v/@reformer/core.svg)](https://www.npmjs.com/package/@reformer/core)
 [![npm downloads](https://img.shields.io/npm/dm/@reformer/core.svg)](https://www.npmjs.com/package/@reformer/core)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/AlexandrBukhtatyy/ReFormer/tree/main/projects/react-playground?file=projects/react-playground/src/App.tsx)
 
 Reactive form state management library for React with signals-based architecture.
 
+## Playground
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/~/github.com/AlexandrBukhtatyy/ReFormer/tree/main/projects/react-playground?file=projects/react-playground/src/App.tsx)
+
 ## Documentation
 
 Full documentation is available at [https://alexandrbukhtatyy.github.io/ReFormer/](https://alexandrbukhtatyy.github.io/ReFormer/)
@@ -22,7 +25,7 @@ Full documentation is available at [https://alexandrbukhtatyy.github.io/ReFormer
 ## Installation
 
 ```bash
-npm install @reformer/core
+npm install @reformer/core@beta # Active development is underway, so you can try beta
 ```
 
 ## Quick Start
@@ -39,15 +42,7 @@ import {
   FieldNode,
 } from '@reformer/core';
 
-// 1. Define form interface
-interface RegistrationForm {
-  username: string;
-  email: string;
-  password: string;
-  confirmPassword: string;
-}
-
-// 2. Simple FormField component
+// 0. Simple FormField component
 function FormField({ label, control }: { label: string; control: FieldNode<string> }) {
   const { value, errors } = useFormControl(control);
 
@@ -64,47 +59,61 @@ function FormField({ label, control }: { label: string; control: FieldNode<strin
   );
 }
 
-// 3. Registration form component
+// 1. Define form interface
+interface RegistrationForm {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+}
+
+// 2. Form schema
+const formSchema = {
+  username: { value: '' },
+  email: { value: '' },
+  password: { value: '' },
+  confirmPassword: { value: '' },
+};
+
+// 3. Validation schema
+validationSchema = (path) => {
+  required(path.username);
+
+  required(path.email);
+  email(path.email);
+
+  required(path.password);
+  required(path.confirmPassword);
+
+  // Cross-field validation: passwords must match
+  validate(path.confirmPassword, (value, ctx) => {
+    const password = ctx.form.password.value.value;
+    if (value && password && value !== password) {
+      return { code: 'mismatch', message: 'Passwords do not match' };
+    }
+    return null;
+  });
+};
+
+// 4. Behavior schema
+behavior = (path) => {
+  // Clear confirmPassword when password changes (if not empty)
+  watchField(path.password, (_, ctx) => {
+    const confirmValue = ctx.form.confirmPassword.value.value;
+    if (confirmValue) {
+      ctx.form.confirmPassword.setValue('', { emitEvent: false });
+    }
+  });
+};
+
+// 5. Registration form component
 function RegistrationFormExample() {
   const form = useMemo(
     () =>
       createForm<RegistrationForm>({
-        // Form schema
-        form: {
-          username: { value: '' },
-          email: { value: '' },
-          password: { value: '' },
-          confirmPassword: { value: '' },
-        },
-
-        // Validation schema
-        validation: (path) => {
-          required(path.username);
-          required(path.email);
-          email(path.email);
-          required(path.password);
-          required(path.confirmPassword);
-
-          // Cross-field validation: passwords must match
-          validate(path.confirmPassword, (value, ctx) => {
-            const password = ctx.form.password.value.value;
-            if (value && password && value !== password) {
-              return { code: 'mismatch', message: 'Passwords do not match' };
-            }
-            return null;
-          });
-        },
-
-        // Behavior schema
-        behavior: (path) => {
-          // Clear confirmPassword when password changes (if not empty)
-          watchField(path.password, (_, ctx) => {
-            const confirmValue = ctx.form.confirmPassword.value.value;
-            if (confirmValue) {
-              ctx.form.confirmPassword.setValue('', { emitEvent: false });
-            }
-          });
-        },
+        form: formSchema,
+        validation: validationSchema,
+        behavior: behaviorSchema,
       }),
     []
   );

package/dist/core/validation/core/validate-tree.d.ts

@@ -13,13 +13,19 @@ import { TreeValidatorFn, ValidateTreeOptions } from '../../types';
  * @group Validation
  * @category Core Functions
  *
+ * @remarks
+ * Параметр `ctx` в callback требует явной типизации для корректного вывода типов:
+ * ```typescript
+ * validateTree((ctx: { form: MyFormType }) => { ... });
+ * ```
+ *
  * @example
  * ```typescript
+ * // Явная типизация ctx для избежания implicit any
  * validateTree(
- *   (ctx: ValidationContext<TForm, TField>) => {
- *     const form = ctx.formValue();
- *     if (form.initialPayment && form.propertyValue) {
- *       if (form.initialPayment > form.propertyValue) {
+ *   (ctx: { form: MyForm }) => {
+ *     if (ctx.form.initialPayment && ctx.form.propertyValue) {
+ *       if (ctx.form.initialPayment > ctx.form.propertyValue) {
  *         return {
  *           code: 'initialPaymentTooHigh',
  *           message: 'Первоначальный взнос не может превышать стоимость',

package/dist/core/validation/core/validate-tree.js

@@ -13,13 +13,19 @@ import { getCurrentValidationRegistry } from '../../utils/registry-helpers';
  * @group Validation
  * @category Core Functions
  *
+ * @remarks
+ * Параметр `ctx` в callback требует явной типизации для корректного вывода типов:
+ * ```typescript
+ * validateTree((ctx: { form: MyFormType }) => { ... });
+ * ```
+ *
  * @example
  * ```typescript
+ * // Явная типизация ctx для избежания implicit any
  * validateTree(
- *   (ctx: ValidationContext<TForm, TField>) => {
- *     const form = ctx.formValue();
- *     if (form.initialPayment && form.propertyValue) {
- *       if (form.initialPayment > form.propertyValue) {
+ *   (ctx: { form: MyForm }) => {
+ *     if (ctx.form.initialPayment && ctx.form.propertyValue) {
+ *       if (ctx.form.initialPayment > ctx.form.propertyValue) {
  *         return {
  *           code: 'initialPaymentTooHigh',
  *           message: 'Первоначальный взнос не может превышать стоимость',