@reformer/core 1.0.0-beta.6 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +47 -56
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -3,13 +3,10 @@
3
3
  [![npm version](https://img.shields.io/npm/v/@reformer/core.svg)](https://www.npmjs.com/package/@reformer/core)
4
4
  [![npm downloads](https://img.shields.io/npm/dm/@reformer/core.svg)](https://www.npmjs.com/package/@reformer/core)
5
5
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
6
+ [![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)
6
7
 
7
8
  Reactive form state management library for React with signals-based architecture.
8
9
 
9
- ## Playground
10
-
11
- [![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)
12
-
13
10
  ## Documentation
14
11
 
15
12
  Full documentation is available at [https://alexandrbukhtatyy.github.io/ReFormer/](https://alexandrbukhtatyy.github.io/ReFormer/)
@@ -42,7 +39,15 @@ import {
42
39
  FieldNode,
43
40
  } from '@reformer/core';
44
41
 
45
- // 0. Simple FormField component
42
+ // 1. Define form interface
43
+ interface RegistrationForm {
44
+ username: string;
45
+ email: string;
46
+ password: string;
47
+ confirmPassword: string;
48
+ }
49
+
50
+ // 2. Simple FormField component
46
51
  function FormField({ label, control }: { label: string; control: FieldNode<string> }) {
47
52
  const { value, errors } = useFormControl(control);
48
53
 
@@ -59,61 +64,47 @@ function FormField({ label, control }: { label: string; control: FieldNode<strin
59
64
  );
60
65
  }
61
66
 
62
- // 1. Define form interface
63
- interface RegistrationForm {
64
- username: string;
65
- email: string;
66
- password: string;
67
- confirmPassword: string;
68
- }
69
-
70
- // 2. Form schema
71
- const formSchema = {
72
- username: { value: '' },
73
- email: { value: '' },
74
- password: { value: '' },
75
- confirmPassword: { value: '' },
76
- };
77
-
78
- // 3. Validation schema
79
- validationSchema = (path) => {
80
- required(path.username);
81
-
82
- required(path.email);
83
- email(path.email);
84
-
85
- required(path.password);
86
- required(path.confirmPassword);
87
-
88
- // Cross-field validation: passwords must match
89
- validate(path.confirmPassword, (value, ctx) => {
90
- const password = ctx.form.password.value.value;
91
- if (value && password && value !== password) {
92
- return { code: 'mismatch', message: 'Passwords do not match' };
93
- }
94
- return null;
95
- });
96
- };
97
-
98
- // 4. Behavior schema
99
- behavior = (path) => {
100
- // Clear confirmPassword when password changes (if not empty)
101
- watchField(path.password, (_, ctx) => {
102
- const confirmValue = ctx.form.confirmPassword.value.value;
103
- if (confirmValue) {
104
- ctx.form.confirmPassword.setValue('', { emitEvent: false });
105
- }
106
- });
107
- };
108
-
109
- // 5. Registration form component
67
+ // 3. Registration form component
110
68
  function RegistrationFormExample() {
111
69
  const form = useMemo(
112
70
  () =>
113
71
  createForm<RegistrationForm>({
114
- form: formSchema,
115
- validation: validationSchema,
116
- behavior: behaviorSchema,
72
+ // Form schema
73
+ form: {
74
+ username: { value: '' },
75
+ email: { value: '' },
76
+ password: { value: '' },
77
+ confirmPassword: { value: '' },
78
+ },
79
+
80
+ // Validation schema
81
+ validation: (path) => {
82
+ required(path.username);
83
+ required(path.email);
84
+ email(path.email);
85
+ required(path.password);
86
+ required(path.confirmPassword);
87
+
88
+ // Cross-field validation: passwords must match
89
+ validate(path.confirmPassword, (value, ctx) => {
90
+ const password = ctx.form.password.value.value;
91
+ if (value && password && value !== password) {
92
+ return { code: 'mismatch', message: 'Passwords do not match' };
93
+ }
94
+ return null;
95
+ });
96
+ },
97
+
98
+ // Behavior schema
99
+ behavior: (path) => {
100
+ // Clear confirmPassword when password changes (if not empty)
101
+ watchField(path.password, (_, ctx) => {
102
+ const confirmValue = ctx.form.confirmPassword.value.value;
103
+ if (confirmValue) {
104
+ ctx.form.confirmPassword.setValue('', { emitEvent: false });
105
+ }
106
+ });
107
+ },
117
108
  }),
118
109
  []
119
110
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reformer/core",
3
- "version": "1.0.0-beta.6",
3
+ "version": "1.0.0",
4
4
  "description": "Reactive form state management library for React with signals-based architecture",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",