@reformer/core 1.0.0-beta.4 → 1.0.0-beta.6
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.
- package/README.md +111 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,11 +6,13 @@
|
|
|
6
6
|
|
|
7
7
|
Reactive form state management library for React with signals-based architecture.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Playground
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
[](https://stackblitz.com/~/github.com/AlexandrBukhtatyy/ReFormer/tree/main/projects/react-playground?file=projects/react-playground/src/App.tsx)
|
|
12
|
+
|
|
13
|
+
## Documentation
|
|
14
|
+
|
|
15
|
+
Full documentation is available at [https://alexandrbukhtatyy.github.io/ReFormer/](https://alexandrbukhtatyy.github.io/ReFormer/)
|
|
14
16
|
|
|
15
17
|
## Features
|
|
16
18
|
|
|
@@ -20,33 +22,121 @@ npm install @reformer/core
|
|
|
20
22
|
- TypeScript support
|
|
21
23
|
- Tree-shakeable exports
|
|
22
24
|
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @reformer/core
|
|
29
|
+
```
|
|
30
|
+
|
|
23
31
|
## Quick Start
|
|
24
32
|
|
|
25
33
|
```tsx
|
|
26
|
-
import {
|
|
34
|
+
import { useMemo } from 'react';
|
|
35
|
+
import {
|
|
36
|
+
createForm,
|
|
37
|
+
useFormControl,
|
|
38
|
+
required,
|
|
39
|
+
email,
|
|
40
|
+
validate,
|
|
41
|
+
watchField,
|
|
42
|
+
FieldNode,
|
|
43
|
+
} from '@reformer/core';
|
|
27
44
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
email: { initialValue: '' }
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
function MyForm() {
|
|
36
|
-
const name = useFormControl(form.controls.name);
|
|
45
|
+
// 0. Simple FormField component
|
|
46
|
+
function FormField({ label, control }: { label: string; control: FieldNode<string> }) {
|
|
47
|
+
const { value, errors } = useFormControl(control);
|
|
37
48
|
|
|
38
49
|
return (
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
50
|
+
<div>
|
|
51
|
+
<label>{label}</label>
|
|
52
|
+
<input
|
|
53
|
+
value={value}
|
|
54
|
+
onChange={(e) => control.setValue(e.target.value)}
|
|
55
|
+
onBlur={() => control.markAsTouched()}
|
|
56
|
+
/>
|
|
57
|
+
{errors.length > 0 && <span className="error">{errors[0].message}</span>}
|
|
58
|
+
</div>
|
|
43
59
|
);
|
|
44
60
|
}
|
|
45
|
-
```
|
|
46
61
|
|
|
47
|
-
|
|
62
|
+
// 1. Define form interface
|
|
63
|
+
interface RegistrationForm {
|
|
64
|
+
username: string;
|
|
65
|
+
email: string;
|
|
66
|
+
password: string;
|
|
67
|
+
confirmPassword: string;
|
|
68
|
+
}
|
|
48
69
|
|
|
49
|
-
|
|
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
|
|
110
|
+
function RegistrationFormExample() {
|
|
111
|
+
const form = useMemo(
|
|
112
|
+
() =>
|
|
113
|
+
createForm<RegistrationForm>({
|
|
114
|
+
form: formSchema,
|
|
115
|
+
validation: validationSchema,
|
|
116
|
+
behavior: behaviorSchema,
|
|
117
|
+
}),
|
|
118
|
+
[]
|
|
119
|
+
);
|
|
120
|
+
|
|
121
|
+
const handleSubmit = async (e: React.FormEvent) => {
|
|
122
|
+
e.preventDefault();
|
|
123
|
+
await form.validate();
|
|
124
|
+
if (form.valid.value) {
|
|
125
|
+
console.log('Form data:', form.value.value);
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
return (
|
|
130
|
+
<form onSubmit={handleSubmit}>
|
|
131
|
+
<FormField label="Username" control={form.username} />
|
|
132
|
+
<FormField label="Email" control={form.email} />
|
|
133
|
+
<FormField label="Password" control={form.password} />
|
|
134
|
+
<FormField label="Confirm Password" control={form.confirmPassword} />
|
|
135
|
+
<button type="submit">Register</button>
|
|
136
|
+
</form>
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
```
|
|
50
140
|
|
|
51
141
|
## License
|
|
52
142
|
|