@page-speed/forms 0.2.3 → 0.3.1
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 +496 -0
- package/dist/core.cjs +4 -2
- package/dist/core.cjs.map +1 -1
- package/dist/core.d.cts +3 -3
- package/dist/core.d.ts +3 -3
- package/dist/core.js +4 -2
- package/dist/core.js.map +1 -1
- package/dist/index.cjs +4 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/dist/inputs.cjs +1279 -68
- package/dist/inputs.cjs.map +1 -1
- package/dist/inputs.d.cts +521 -4
- package/dist/inputs.d.ts +521 -4
- package/dist/inputs.js +1275 -68
- package/dist/inputs.js.map +1 -1
- package/dist/{types-Dww52PeF.d.cts → types-WxAFrgDW.d.cts} +9 -0
- package/dist/{types-Dww52PeF.d.ts → types-WxAFrgDW.d.ts} +9 -0
- package/dist/validation-rules.d.cts +1 -1
- package/dist/validation-rules.d.ts +1 -1
- package/dist/validation-utils.d.cts +1 -1
- package/dist/validation-utils.d.ts +1 -1
- package/dist/validation-valibot.d.cts +1 -1
- package/dist/validation-valibot.d.ts +1 -1
- package/dist/validation.d.cts +1 -1
- package/dist/validation.d.ts +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -83,6 +83,502 @@ const form = useForm({
|
|
|
83
83
|
});
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
+
## Advanced Validation Features
|
|
87
|
+
|
|
88
|
+
### Cross-Field Validation
|
|
89
|
+
|
|
90
|
+
Validate fields that depend on other field values using the `crossFieldValidator` utility or by accessing `allValues` in your validator:
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
import { useForm, crossFieldValidator } from '@page-speed/forms/validation';
|
|
94
|
+
|
|
95
|
+
// Method 1: Using crossFieldValidator helper
|
|
96
|
+
const form = useForm({
|
|
97
|
+
initialValues: { password: '', confirmPassword: '' },
|
|
98
|
+
validationSchema: {
|
|
99
|
+
confirmPassword: crossFieldValidator(
|
|
100
|
+
['password', 'confirmPassword'],
|
|
101
|
+
(values) => {
|
|
102
|
+
if (values.password !== values.confirmPassword) {
|
|
103
|
+
return 'Passwords must match';
|
|
104
|
+
}
|
|
105
|
+
return undefined;
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
// Method 2: Direct access to allValues
|
|
112
|
+
const form = useForm({
|
|
113
|
+
initialValues: { password: '', confirmPassword: '' },
|
|
114
|
+
validationSchema: {
|
|
115
|
+
confirmPassword: (value, allValues) => {
|
|
116
|
+
if (value !== allValues.password) {
|
|
117
|
+
return 'Passwords must match';
|
|
118
|
+
}
|
|
119
|
+
return undefined;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Async Validation with Debouncing
|
|
126
|
+
|
|
127
|
+
Optimize async validators (like API calls) with built-in debouncing to prevent excessive requests:
|
|
128
|
+
|
|
129
|
+
```typescript
|
|
130
|
+
import { useForm, asyncValidator } from '@page-speed/forms/validation';
|
|
131
|
+
|
|
132
|
+
const checkUsernameAvailability = async (username: string) => {
|
|
133
|
+
const response = await fetch(`/api/check-username?username=${username}`);
|
|
134
|
+
const { available } = await response.json();
|
|
135
|
+
return available ? undefined : 'Username already taken';
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
const form = useForm({
|
|
139
|
+
initialValues: { username: '' },
|
|
140
|
+
validationSchema: {
|
|
141
|
+
// Debounce async validation by 500ms
|
|
142
|
+
username: asyncValidator(
|
|
143
|
+
checkUsernameAvailability,
|
|
144
|
+
{ delay: 500, trailing: true }
|
|
145
|
+
)
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
**Debounce Options:**
|
|
151
|
+
- `delay`: Milliseconds to wait (default: 300ms)
|
|
152
|
+
- `leading`: Validate immediately on first change (default: false)
|
|
153
|
+
- `trailing`: Validate after delay expires (default: true)
|
|
154
|
+
|
|
155
|
+
The `asyncValidator` wrapper also includes automatic race condition prevention, ensuring only the latest validation result is used.
|
|
156
|
+
|
|
157
|
+
### Validation Rules Library
|
|
158
|
+
|
|
159
|
+
Use pre-built, tree-shakable validation rules for common scenarios:
|
|
160
|
+
|
|
161
|
+
```typescript
|
|
162
|
+
import {
|
|
163
|
+
required,
|
|
164
|
+
email,
|
|
165
|
+
url,
|
|
166
|
+
phone,
|
|
167
|
+
minLength,
|
|
168
|
+
maxLength,
|
|
169
|
+
min,
|
|
170
|
+
max,
|
|
171
|
+
pattern,
|
|
172
|
+
matches,
|
|
173
|
+
oneOf,
|
|
174
|
+
creditCard,
|
|
175
|
+
postalCode,
|
|
176
|
+
alpha,
|
|
177
|
+
alphanumeric,
|
|
178
|
+
numeric,
|
|
179
|
+
integer,
|
|
180
|
+
compose
|
|
181
|
+
} from '@page-speed/forms/validation/rules';
|
|
182
|
+
|
|
183
|
+
const form = useForm({
|
|
184
|
+
initialValues: {
|
|
185
|
+
email: '',
|
|
186
|
+
password: '',
|
|
187
|
+
confirmPassword: '',
|
|
188
|
+
age: 0,
|
|
189
|
+
username: '',
|
|
190
|
+
cardNumber: ''
|
|
191
|
+
},
|
|
192
|
+
validationSchema: {
|
|
193
|
+
email: compose(
|
|
194
|
+
required({ message: 'Email is required' }),
|
|
195
|
+
email({ message: 'Invalid email format' })
|
|
196
|
+
),
|
|
197
|
+
password: compose(
|
|
198
|
+
required(),
|
|
199
|
+
minLength(8, { message: 'Password must be at least 8 characters' })
|
|
200
|
+
),
|
|
201
|
+
confirmPassword: matches('password', { message: 'Passwords must match' }),
|
|
202
|
+
age: compose(
|
|
203
|
+
required(),
|
|
204
|
+
numeric({ message: 'Age must be a number' }),
|
|
205
|
+
min(18, { message: 'Must be 18 or older' })
|
|
206
|
+
),
|
|
207
|
+
username: compose(
|
|
208
|
+
required(),
|
|
209
|
+
alphanumeric({ message: 'Only letters and numbers allowed' }),
|
|
210
|
+
minLength(3),
|
|
211
|
+
maxLength(20)
|
|
212
|
+
),
|
|
213
|
+
cardNumber: creditCard({ message: 'Invalid credit card number' })
|
|
214
|
+
}
|
|
215
|
+
});
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
**Available Validators:**
|
|
219
|
+
|
|
220
|
+
| Validator | Description | Example |
|
|
221
|
+
|-----------|-------------|---------|
|
|
222
|
+
| `required()` | Field must have a value | `required({ message: 'Required' })` |
|
|
223
|
+
| `email()` | Valid email format (RFC 5322) | `email()` |
|
|
224
|
+
| `url()` | Valid URL format | `url()` |
|
|
225
|
+
| `phone()` | US phone number format | `phone()` |
|
|
226
|
+
| `minLength(n)` | Minimum string/array length | `minLength(3)` |
|
|
227
|
+
| `maxLength(n)` | Maximum string/array length | `maxLength(100)` |
|
|
228
|
+
| `min(n)` | Minimum numeric value | `min(0)` |
|
|
229
|
+
| `max(n)` | Maximum numeric value | `max(100)` |
|
|
230
|
+
| `pattern(regex)` | Custom regex pattern | `pattern(/^[A-Z]+$/)` |
|
|
231
|
+
| `matches(field)` | Match another field | `matches('password')` |
|
|
232
|
+
| `oneOf(values)` | Value in allowed list | `oneOf(['a', 'b', 'c'])` |
|
|
233
|
+
| `creditCard()` | Valid credit card (Luhn) | `creditCard()` |
|
|
234
|
+
| `postalCode()` | US ZIP code format | `postalCode()` |
|
|
235
|
+
| `alpha()` | Alphabetic characters only | `alpha()` |
|
|
236
|
+
| `alphanumeric()` | Letters and numbers only | `alphanumeric()` |
|
|
237
|
+
| `numeric()` | Valid number | `numeric()` |
|
|
238
|
+
| `integer()` | Whole number | `integer()` |
|
|
239
|
+
| `compose(...)` | Combine multiple validators | `compose(required(), email())` |
|
|
240
|
+
|
|
241
|
+
### Custom Error Messages & Internationalization
|
|
242
|
+
|
|
243
|
+
Customize error messages globally for internationalization support:
|
|
244
|
+
|
|
245
|
+
```typescript
|
|
246
|
+
import { setErrorMessages } from '@page-speed/forms/validation/utils';
|
|
247
|
+
|
|
248
|
+
// Set custom messages (e.g., Spanish translations)
|
|
249
|
+
setErrorMessages({
|
|
250
|
+
required: 'Este campo es obligatorio',
|
|
251
|
+
email: 'Por favor ingrese un correo electrónico válido',
|
|
252
|
+
minLength: ({ min }) => `Debe tener al menos ${min} caracteres`,
|
|
253
|
+
maxLength: ({ max }) => `No debe exceder ${max} caracteres`,
|
|
254
|
+
phone: 'Por favor ingrese un número de teléfono válido'
|
|
255
|
+
});
|
|
256
|
+
|
|
257
|
+
// Use with validation rules
|
|
258
|
+
import { required, email, minLength } from '@page-speed/forms/validation/rules';
|
|
259
|
+
|
|
260
|
+
const form = useForm({
|
|
261
|
+
initialValues: { email: '', password: '' },
|
|
262
|
+
validationSchema: {
|
|
263
|
+
email: compose(required(), email()),
|
|
264
|
+
password: compose(required(), minLength(8))
|
|
265
|
+
}
|
|
266
|
+
});
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
**Message Template Functions:**
|
|
270
|
+
|
|
271
|
+
Error messages support template functions with parameter interpolation:
|
|
272
|
+
|
|
273
|
+
```typescript
|
|
274
|
+
setErrorMessages({
|
|
275
|
+
minLength: ({ min }) => `Must be at least ${min} characters`,
|
|
276
|
+
max: ({ max }) => `Cannot exceed ${max}`,
|
|
277
|
+
matches: ({ field }) => `Must match ${field}`
|
|
278
|
+
});
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
**Per-Field Custom Messages:**
|
|
282
|
+
|
|
283
|
+
Override global messages on a per-field basis:
|
|
284
|
+
|
|
285
|
+
```typescript
|
|
286
|
+
const form = useForm({
|
|
287
|
+
initialValues: { email: '' },
|
|
288
|
+
validationSchema: {
|
|
289
|
+
email: required({ message: 'Please provide your email address' })
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
### Conditional Validation
|
|
295
|
+
|
|
296
|
+
Validate fields only when certain conditions are met:
|
|
297
|
+
|
|
298
|
+
```typescript
|
|
299
|
+
import { when, required, minLength } from '@page-speed/forms/validation';
|
|
300
|
+
|
|
301
|
+
const form = useForm({
|
|
302
|
+
initialValues: { accountType: 'personal', companyName: '' },
|
|
303
|
+
validationSchema: {
|
|
304
|
+
// Only require company name for business accounts
|
|
305
|
+
companyName: when(
|
|
306
|
+
(allValues) => allValues.accountType === 'business',
|
|
307
|
+
compose(
|
|
308
|
+
required({ message: 'Company name is required for business accounts' }),
|
|
309
|
+
minLength(3)
|
|
310
|
+
)
|
|
311
|
+
)
|
|
312
|
+
}
|
|
313
|
+
});
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
## Built-in Input Components
|
|
317
|
+
|
|
318
|
+
`@page-speed/forms` includes a comprehensive set of accessible, production-ready input components that work seamlessly with the form hooks.
|
|
319
|
+
|
|
320
|
+
### Basic Inputs
|
|
321
|
+
|
|
322
|
+
#### TextInput
|
|
323
|
+
Standard text input with support for various types (text, email, password, etc.):
|
|
324
|
+
|
|
325
|
+
```typescript
|
|
326
|
+
import { TextInput } from '@page-speed/forms/inputs';
|
|
327
|
+
|
|
328
|
+
<Field name="email" label="Email">
|
|
329
|
+
{({ field }) => <TextInput {...field} type="email" placeholder="Enter email" />}
|
|
330
|
+
</Field>
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
#### TextArea
|
|
334
|
+
Multi-line text input:
|
|
335
|
+
|
|
336
|
+
```typescript
|
|
337
|
+
import { TextArea } from '@page-speed/forms/inputs';
|
|
338
|
+
|
|
339
|
+
<Field name="description" label="Description">
|
|
340
|
+
{({ field }) => <TextArea {...field} rows={5} placeholder="Enter description" />}
|
|
341
|
+
</Field>
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
#### Checkbox & CheckboxGroup
|
|
345
|
+
Single checkbox or group of checkboxes:
|
|
346
|
+
|
|
347
|
+
```typescript
|
|
348
|
+
import { Checkbox, CheckboxGroup } from '@page-speed/forms/inputs';
|
|
349
|
+
|
|
350
|
+
// Single checkbox
|
|
351
|
+
<Field name="terms" label="Terms">
|
|
352
|
+
{({ field }) => <Checkbox {...field} label="I agree to the terms" />}
|
|
353
|
+
</Field>
|
|
354
|
+
|
|
355
|
+
// Checkbox group
|
|
356
|
+
<Field name="interests" label="Interests">
|
|
357
|
+
{({ field }) => (
|
|
358
|
+
<CheckboxGroup
|
|
359
|
+
{...field}
|
|
360
|
+
options={[
|
|
361
|
+
{ label: 'Sports', value: 'sports' },
|
|
362
|
+
{ label: 'Music', value: 'music' },
|
|
363
|
+
{ label: 'Travel', value: 'travel' }
|
|
364
|
+
]}
|
|
365
|
+
/>
|
|
366
|
+
)}
|
|
367
|
+
</Field>
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
#### Radio
|
|
371
|
+
Radio button group:
|
|
372
|
+
|
|
373
|
+
```typescript
|
|
374
|
+
import { Radio } from '@page-speed/forms/inputs';
|
|
375
|
+
|
|
376
|
+
<Field name="plan" label="Select Plan">
|
|
377
|
+
{({ field }) => (
|
|
378
|
+
<Radio
|
|
379
|
+
{...field}
|
|
380
|
+
options={[
|
|
381
|
+
{ label: 'Basic', value: 'basic' },
|
|
382
|
+
{ label: 'Pro', value: 'pro' },
|
|
383
|
+
{ label: 'Enterprise', value: 'enterprise' }
|
|
384
|
+
]}
|
|
385
|
+
/>
|
|
386
|
+
)}
|
|
387
|
+
</Field>
|
|
388
|
+
```
|
|
389
|
+
|
|
390
|
+
#### Select
|
|
391
|
+
Dropdown select with support for single and multi-select:
|
|
392
|
+
|
|
393
|
+
```typescript
|
|
394
|
+
import { Select } from '@page-speed/forms/inputs';
|
|
395
|
+
|
|
396
|
+
// Single select
|
|
397
|
+
<Field name="country" label="Country">
|
|
398
|
+
{({ field }) => (
|
|
399
|
+
<Select
|
|
400
|
+
{...field}
|
|
401
|
+
options={[
|
|
402
|
+
{ label: 'United States', value: 'us' },
|
|
403
|
+
{ label: 'Canada', value: 'ca' },
|
|
404
|
+
{ label: 'United Kingdom', value: 'uk' }
|
|
405
|
+
]}
|
|
406
|
+
searchable
|
|
407
|
+
clearable
|
|
408
|
+
/>
|
|
409
|
+
)}
|
|
410
|
+
</Field>
|
|
411
|
+
|
|
412
|
+
// Multi-select
|
|
413
|
+
<Field name="skills" label="Skills">
|
|
414
|
+
{({ field }) => (
|
|
415
|
+
<Select
|
|
416
|
+
{...field}
|
|
417
|
+
multiple
|
|
418
|
+
options={[
|
|
419
|
+
{ label: 'JavaScript', value: 'js' },
|
|
420
|
+
{ label: 'TypeScript', value: 'ts' },
|
|
421
|
+
{ label: 'React', value: 'react' }
|
|
422
|
+
]}
|
|
423
|
+
searchable
|
|
424
|
+
/>
|
|
425
|
+
)}
|
|
426
|
+
</Field>
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
### Advanced Inputs
|
|
430
|
+
|
|
431
|
+
#### DatePicker
|
|
432
|
+
Date selection with calendar popup:
|
|
433
|
+
|
|
434
|
+
```typescript
|
|
435
|
+
import { DatePicker } from '@page-speed/forms/inputs';
|
|
436
|
+
|
|
437
|
+
<Field name="birthdate" label="Birth Date">
|
|
438
|
+
{({ field }) => (
|
|
439
|
+
<DatePicker
|
|
440
|
+
{...field}
|
|
441
|
+
placeholder="Select date"
|
|
442
|
+
dateFormat="MM/dd/yyyy"
|
|
443
|
+
minDate={new Date(1900, 0, 1)}
|
|
444
|
+
maxDate={new Date()}
|
|
445
|
+
clearable
|
|
446
|
+
/>
|
|
447
|
+
)}
|
|
448
|
+
</Field>
|
|
449
|
+
```
|
|
450
|
+
|
|
451
|
+
**Props:**
|
|
452
|
+
- `dateFormat`: Date display format (default: "MM/dd/yyyy")
|
|
453
|
+
- `minDate`, `maxDate`: Restrict selectable dates
|
|
454
|
+
- `isDateDisabled`: Custom function to disable specific dates
|
|
455
|
+
- `clearable`: Show clear button
|
|
456
|
+
- `showTodayButton`: Show "Today" button
|
|
457
|
+
|
|
458
|
+
#### TimePicker
|
|
459
|
+
Time selection with hour/minute/period selectors:
|
|
460
|
+
|
|
461
|
+
```typescript
|
|
462
|
+
import { TimePicker } from '@page-speed/forms/inputs';
|
|
463
|
+
|
|
464
|
+
<Field name="appointmentTime" label="Appointment Time">
|
|
465
|
+
{({ field }) => (
|
|
466
|
+
<TimePicker
|
|
467
|
+
{...field}
|
|
468
|
+
placeholder="Select time"
|
|
469
|
+
use24Hour={false}
|
|
470
|
+
minuteStep={15}
|
|
471
|
+
clearable
|
|
472
|
+
/>
|
|
473
|
+
)}
|
|
474
|
+
</Field>
|
|
475
|
+
```
|
|
476
|
+
|
|
477
|
+
**Props:**
|
|
478
|
+
- `use24Hour`: Use 24-hour format (default: false)
|
|
479
|
+
- `minuteStep`: Minute increment (default: 1)
|
|
480
|
+
- `clearable`: Show clear button
|
|
481
|
+
|
|
482
|
+
#### DateRangePicker
|
|
483
|
+
Date range selection with start and end dates:
|
|
484
|
+
|
|
485
|
+
```typescript
|
|
486
|
+
import { DateRangePicker } from '@page-speed/forms/inputs';
|
|
487
|
+
|
|
488
|
+
<Field name="dateRange" label="Date Range">
|
|
489
|
+
{({ field }) => (
|
|
490
|
+
<DateRangePicker
|
|
491
|
+
{...field}
|
|
492
|
+
placeholder="Select date range"
|
|
493
|
+
separator=" - "
|
|
494
|
+
minDate={new Date()}
|
|
495
|
+
clearable
|
|
496
|
+
/>
|
|
497
|
+
)}
|
|
498
|
+
</Field>
|
|
499
|
+
```
|
|
500
|
+
|
|
501
|
+
**Props:**
|
|
502
|
+
- `separator`: String between start and end dates (default: " - ")
|
|
503
|
+
- `minDate`, `maxDate`: Restrict selectable dates
|
|
504
|
+
- `isDateDisabled`: Custom function to disable specific dates
|
|
505
|
+
- `clearable`: Show clear button
|
|
506
|
+
|
|
507
|
+
#### RichTextEditor
|
|
508
|
+
WYSIWYG and Markdown editor with toolbar:
|
|
509
|
+
|
|
510
|
+
```typescript
|
|
511
|
+
import { RichTextEditor } from '@page-speed/forms/inputs';
|
|
512
|
+
|
|
513
|
+
<Field name="content" label="Content">
|
|
514
|
+
{({ field }) => (
|
|
515
|
+
<RichTextEditor
|
|
516
|
+
{...field}
|
|
517
|
+
placeholder="Enter content..."
|
|
518
|
+
minHeight="200px"
|
|
519
|
+
maxHeight="600px"
|
|
520
|
+
allowModeSwitch
|
|
521
|
+
defaultMode="wysiwyg"
|
|
522
|
+
/>
|
|
523
|
+
)}
|
|
524
|
+
</Field>
|
|
525
|
+
```
|
|
526
|
+
|
|
527
|
+
**Props:**
|
|
528
|
+
- `defaultMode`: "wysiwyg" or "markdown" (default: "wysiwyg")
|
|
529
|
+
- `allowModeSwitch`: Enable mode toggle button
|
|
530
|
+
- `minHeight`, `maxHeight`: Editor height constraints
|
|
531
|
+
- `customButtons`: Add custom toolbar buttons
|
|
532
|
+
|
|
533
|
+
**Features:**
|
|
534
|
+
- WYSIWYG mode: Bold, Italic, Underline, Headings, Lists, Links
|
|
535
|
+
- Markdown mode: Direct markdown editing
|
|
536
|
+
- Automatic HTML ↔ Markdown conversion
|
|
537
|
+
|
|
538
|
+
#### FileInput
|
|
539
|
+
File upload with drag-and-drop, progress indicators, and image cropping:
|
|
540
|
+
|
|
541
|
+
```typescript
|
|
542
|
+
import { FileInput } from '@page-speed/forms/inputs';
|
|
543
|
+
|
|
544
|
+
<Field name="avatar" label="Profile Picture">
|
|
545
|
+
{({ field }) => (
|
|
546
|
+
<FileInput
|
|
547
|
+
{...field}
|
|
548
|
+
accept="image/*"
|
|
549
|
+
maxSize={5 * 1024 * 1024} // 5MB
|
|
550
|
+
maxFiles={1}
|
|
551
|
+
showProgress
|
|
552
|
+
uploadProgress={uploadProgress}
|
|
553
|
+
enableCropping
|
|
554
|
+
cropAspectRatio={1}
|
|
555
|
+
onCropComplete={(file) => console.log('Cropped:', file)}
|
|
556
|
+
/>
|
|
557
|
+
)}
|
|
558
|
+
</Field>
|
|
559
|
+
```
|
|
560
|
+
|
|
561
|
+
**Props:**
|
|
562
|
+
- `accept`: File type filter (e.g., "image/*", ".pdf")
|
|
563
|
+
- `multiple`: Allow multiple files
|
|
564
|
+
- `maxFiles`: Maximum number of files
|
|
565
|
+
- `maxSize`: Maximum file size in bytes
|
|
566
|
+
- `showPreview`: Show file previews
|
|
567
|
+
- `showProgress`: Display upload progress bars
|
|
568
|
+
- `uploadProgress`: Object mapping filenames to progress percentages
|
|
569
|
+
- `enableCropping`: Enable image cropping for image files
|
|
570
|
+
- `cropAspectRatio`: Crop aspect ratio (e.g., 16/9, 1 for square)
|
|
571
|
+
- `onCropComplete`: Callback when cropping is complete
|
|
572
|
+
|
|
573
|
+
**Features:**
|
|
574
|
+
- Drag-and-drop support
|
|
575
|
+
- File type and size validation
|
|
576
|
+
- Image previews with thumbnails
|
|
577
|
+
- Upload progress indicators with percentage
|
|
578
|
+
- Interactive image cropping with zoom
|
|
579
|
+
- Multiple file support
|
|
580
|
+
- Accessible file selection
|
|
581
|
+
|
|
86
582
|
## Performance Notes
|
|
87
583
|
|
|
88
584
|
Performance is a core facet of everything we build at OpenSite AI. The library is optimized for minimal re-renders and efficient form state updates, ensuring your applications remain responsive and fast.
|
package/dist/core.cjs
CHANGED
|
@@ -368,6 +368,8 @@ function Field({
|
|
|
368
368
|
children,
|
|
369
369
|
showError = true,
|
|
370
370
|
className,
|
|
371
|
+
errorClassName,
|
|
372
|
+
required = false,
|
|
371
373
|
validate
|
|
372
374
|
}) {
|
|
373
375
|
const fieldState = useField({ name, validate });
|
|
@@ -375,11 +377,11 @@ function Field({
|
|
|
375
377
|
const hasError = meta.touched && meta.error;
|
|
376
378
|
const errorId = `${name}-error`;
|
|
377
379
|
const descriptionId = `${name}-description`;
|
|
378
|
-
return /* @__PURE__ */ React2__namespace.createElement("div", { className, "data-field": name }, label && /* @__PURE__ */ React2__namespace.createElement("label", { htmlFor: name, className: "field-label" }, label), description && /* @__PURE__ */ React2__namespace.createElement("div", { id: descriptionId, className: "field-description" }, description), /* @__PURE__ */ React2__namespace.createElement("div", { className: "field-input" }, typeof children === "function" ? children(fieldState) : children), showError && hasError && /* @__PURE__ */ React2__namespace.createElement(
|
|
380
|
+
return /* @__PURE__ */ React2__namespace.createElement("div", { className, "data-field": name }, label && /* @__PURE__ */ React2__namespace.createElement("label", { htmlFor: name, className: "field-label" }, label, required && /* @__PURE__ */ React2__namespace.createElement("span", { className: "field-required", "aria-label": "required" }, " *")), description && /* @__PURE__ */ React2__namespace.createElement("div", { id: descriptionId, className: "field-description" }, description), /* @__PURE__ */ React2__namespace.createElement("div", { className: "field-input" }, typeof children === "function" ? children(fieldState) : children), showError && hasError && /* @__PURE__ */ React2__namespace.createElement(
|
|
379
381
|
"div",
|
|
380
382
|
{
|
|
381
383
|
id: errorId,
|
|
382
|
-
className: "field-error",
|
|
384
|
+
className: errorClassName || "field-error",
|
|
383
385
|
role: "alert",
|
|
384
386
|
"aria-live": "polite"
|
|
385
387
|
},
|
package/dist/core.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/core/useForm.ts","../src/core/FormContext.tsx","../src/core/useField.ts","../src/core/Form.tsx","../src/core/Field.tsx"],"names":["useObservable","useRef","useMap","useCallback","errors","touched","values","useSelector","initialValues","createContext","useContext","React","React2"],"mappings":"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","file":"core.cjs","sourcesContent":["\"use client\";\n\nimport { useCallback, useRef } from \"react\";\nimport { useObservable, useSelector } from \"@legendapp/state/react\";\n// Tree-shakable imports from @opensite/hooks following ECOSYSTEM_GUIDELINES\nimport { useMap } from \"@opensite/hooks/core/useMap\";\nimport type {\n FormValues,\n FormErrors,\n TouchedFields,\n UseFormOptions,\n UseFormReturn,\n SubmissionStatus,\n FieldInputProps,\n FieldMeta,\n FormHelpers,\n} from \"./types\";\n\n/**\n * useForm - High-performance form state management with field-level reactivity\n *\n * Built on @legendapp/state for optimal performance:\n * - Field-level reactivity: Only re-render the specific field that changed\n * - Observable-based state: ~1 re-render per change vs ~10 for traditional hooks\n * - Tree-shakable: Only bundle what you use\n *\n * @example\n * ```tsx\n * const form = useForm({\n * initialValues: { email: '', password: '' },\n * onSubmit: async (values) => {\n * await login(values);\n * },\n * validationSchema: {\n * email: (value) => !value ? 'Required' : undefined,\n * password: (value) => value.length < 8 ? 'Too short' : undefined,\n * },\n * });\n *\n * return (\n * <form onSubmit={form.handleSubmit}>\n * <input {...form.getFieldProps('email')} />\n * {form.errors.email && <span>{form.errors.email}</span>}\n * </form>\n * );\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/use-form\n */\nexport function useForm<T extends FormValues = FormValues>(\n options: UseFormOptions<T>\n): UseFormReturn<T> {\n const {\n initialValues,\n validationSchema,\n validateOn = \"onBlur\",\n revalidateOn = \"onChange\",\n onSubmit,\n onError,\n debug = false,\n } = options;\n\n // Create observable form state for field-level reactivity\n // Note: Type assertion needed for @legendapp/state beta compatibility\n // The beta version's TypeScript types don't properly expose nested Observable properties\n // This will be removed once stable v3.0.0 is released with proper type definitions\n const state$ = useObservable({\n values: initialValues,\n errors: {} as FormErrors<T>,\n touched: {} as TouchedFields<T>,\n isSubmitting: false,\n status: \"idle\" as SubmissionStatus,\n initialValues: { ...initialValues }, // Create a copy to prevent reference sharing\n hasValidated: {} as Record<string, boolean>,\n }) as any;\n\n // Track validation in progress to prevent race conditions\n const validationInProgress = useRef<Set<string>>(new Set());\n\n // Enhanced state management with @opensite/hooks\n // useMap: Manage complex nested field metadata immutably\n const [, fieldMetadataActions] = useMap<\n string,\n { lastValidated?: number; validationCount: number }\n >();\n\n /**\n * Validate a single field\n * Enhanced with @opensite/hooks useMap for metadata tracking\n */\n const validateField = useCallback(\n async <K extends keyof T>(field: K): Promise<string | undefined> => {\n const validators = validationSchema?.[field];\n if (!validators) return undefined;\n\n const fieldKey = String(field);\n validationInProgress.current.add(fieldKey);\n\n // Track validation metadata using useMap\n const currentMeta = fieldMetadataActions.get(fieldKey) || {\n validationCount: 0,\n };\n fieldMetadataActions.set(fieldKey, {\n lastValidated: Date.now(),\n validationCount: currentMeta.validationCount + 1,\n });\n\n try {\n const value = state$.values[field].get();\n const allValues = state$.values.get();\n\n const validatorArray = Array.isArray(validators)\n ? validators\n : [validators];\n\n for (const validator of validatorArray) {\n const error = await validator(value, allValues);\n if (error) {\n state$.errors[field].set(error);\n validationInProgress.current.delete(fieldKey);\n return error;\n }\n }\n\n // Clear error if validation passed\n state$.errors[field].set(undefined);\n validationInProgress.current.delete(fieldKey);\n return undefined;\n } catch (error) {\n validationInProgress.current.delete(fieldKey);\n const errorMessage =\n error instanceof Error ? error.message : \"Validation error\";\n state$.errors[field].set(errorMessage);\n return errorMessage;\n }\n },\n [validationSchema, state$, fieldMetadataActions]\n );\n\n /**\n * Validate entire form\n */\n const validateForm = useCallback(async (): Promise<FormErrors<T>> => {\n if (!validationSchema) return {};\n\n const fields = Object.keys(validationSchema) as Array<keyof T>;\n const errors: FormErrors<T> = {};\n\n await Promise.all(\n fields.map(async (field) => {\n const error = await validateField(field);\n if (error) {\n errors[field] = error;\n }\n })\n );\n\n state$.errors.set(errors);\n return errors;\n }, [validationSchema, validateField, state$]);\n\n /**\n * Set field value with optional validation\n */\n const setFieldValue = useCallback(\n <K extends keyof T>(field: K, value: T[K]) => {\n state$.values[field].set(value);\n\n // Revalidate if field has been validated before\n const shouldRevalidate =\n revalidateOn === \"onChange\" &&\n state$.hasValidated[String(field)].get();\n\n if (shouldRevalidate && validationSchema?.[field]) {\n validateField(field);\n }\n\n if (debug) {\n console.log(\"[useForm] setFieldValue:\", { field, value });\n }\n },\n [state$, revalidateOn, validationSchema, validateField, debug]\n );\n\n /**\n * Set field as touched with optional validation\n */\n const setFieldTouched = useCallback(\n <K extends keyof T>(field: K, touched: boolean) => {\n state$.touched[field].set(touched);\n\n // Validate on blur if configured\n if (touched && validateOn === \"onBlur\" && validationSchema?.[field]) {\n state$.hasValidated[String(field)].set(true);\n validateField(field);\n }\n\n if (debug) {\n console.log(\"[useForm] setFieldTouched:\", { field, touched });\n }\n },\n [state$, validateOn, validationSchema, validateField, debug]\n );\n\n /**\n * Reset form to initial values\n * Enhanced with @opensite/hooks useMap to clear field metadata\n */\n const resetForm = useCallback(() => {\n state$.values.set(state$.initialValues.get());\n state$.errors.set({});\n state$.touched.set({});\n state$.isSubmitting.set(false);\n state$.status.set(\"idle\");\n state$.hasValidated.set({});\n\n // Clear field metadata tracked by useMap\n fieldMetadataActions.clear();\n\n if (debug) {\n console.log(\"[useForm] Form reset\");\n }\n }, [state$, fieldMetadataActions, debug]);\n\n /**\n * Handle form submission\n */\n const handleSubmit = useCallback(\n async (e?: React.FormEvent) => {\n e?.preventDefault();\n\n if (debug) {\n console.log(\"[useForm] handleSubmit started\");\n }\n\n state$.isSubmitting.set(true);\n state$.status.set(\"submitting\");\n\n try {\n // Validate form\n const errors = await validateForm();\n const hasErrors = Object.keys(errors).length > 0;\n\n if (hasErrors) {\n state$.status.set(\"error\");\n onError?.(errors);\n\n if (debug) {\n console.log(\"[useForm] Validation errors:\", errors);\n }\n\n return;\n }\n\n // Create form helpers\n const helpers: FormHelpers<T> = {\n setValues: (values) => {\n if (typeof values === \"function\") {\n state$.values.set(values(state$.values.get()));\n } else {\n state$.values.set(values);\n }\n },\n setFieldValue,\n setErrors: (errors) => state$.errors.set(errors),\n setFieldError: (field, error) => state$.errors[field].set(error),\n setTouched: (touched) => state$.touched.set(touched),\n setFieldTouched,\n setSubmitting: (submitting) => state$.isSubmitting.set(submitting),\n resetForm,\n };\n\n // Call submission handler\n await onSubmit(state$.values.get(), helpers);\n\n state$.status.set(\"success\");\n\n if (debug) {\n console.log(\"[useForm] Submit successful\");\n }\n } catch (error) {\n state$.status.set(\"error\");\n\n if (debug) {\n console.error(\"[useForm] Submit error:\", error);\n }\n\n throw error;\n } finally {\n state$.isSubmitting.set(false);\n }\n },\n [\n state$,\n validateForm,\n onSubmit,\n onError,\n setFieldValue,\n setFieldTouched,\n resetForm,\n debug,\n ]\n );\n\n /**\n * Get field props for binding to inputs\n */\n const getFieldProps = useCallback(\n <K extends keyof T>(field: K): FieldInputProps<T[K]> => {\n return {\n name: String(field),\n value: state$.values[field].get(),\n onChange: (value: T[K]) => setFieldValue(field, value),\n onBlur: () => setFieldTouched(field, true),\n };\n },\n [state$, setFieldValue, setFieldTouched]\n );\n\n /**\n * Get field meta information\n * Enhanced with @opensite/hooks useMap for validation metadata\n * and usePrevious for change detection\n */\n const getFieldMeta = useCallback(\n <K extends keyof T>(field: K): FieldMeta => {\n const fieldKey = String(field);\n const metadata = fieldMetadataActions.get(fieldKey);\n\n return {\n error: state$.errors[field].get(),\n touched: state$.touched[field].get() ?? false,\n isDirty:\n state$.values[field].get() !== state$.initialValues[field].get(),\n isValidating: validationInProgress.current.has(fieldKey),\n // Additional metadata from @opensite/hooks\n validationCount: metadata?.validationCount,\n lastValidated: metadata?.lastValidated,\n };\n },\n [state$, fieldMetadataActions]\n );\n\n // Use selectors for reactive properties\n const values = useSelector(() => state$.values.get());\n const errors = useSelector(() => state$.errors.get());\n const touched = useSelector(() => state$.touched.get());\n const isSubmitting = useSelector(() => state$.isSubmitting.get());\n const status = useSelector(() => state$.status.get());\n\n // Use selectors for derived state to ensure reactivity\n const isValid = useSelector(() => Object.keys(state$.errors.get()).length === 0);\n const isDirty = useSelector(() => {\n const currentValues = state$.values.get();\n const initialValues = state$.initialValues.get();\n return Object.keys(currentValues).some(\n (key) => currentValues[key] !== initialValues[key]\n );\n });\n\n return {\n // State\n values,\n errors,\n touched,\n isSubmitting,\n isValid,\n isDirty,\n status,\n\n // Actions\n handleSubmit,\n setValues: (values) => {\n if (typeof values === \"function\") {\n state$.values.set(values(state$.values.get()));\n } else {\n state$.values.set(values);\n }\n },\n setFieldValue,\n setErrors: (errors) => state$.errors.set(errors),\n setFieldError: (field, error) => state$.errors[field].set(error),\n setTouched: (touched) => state$.touched.set(touched),\n setFieldTouched,\n validateForm,\n validateField,\n resetForm,\n getFieldProps,\n getFieldMeta,\n };\n}\n","\"use client\";\n\nimport { createContext } from \"react\";\nimport type { UseFormReturn } from \"./types\";\n\n/**\n * FormContext - React context for providing form state to child components\n *\n * Allows useField hook to access form state without prop drilling.\n * Automatically provided by the <Form> component.\n *\n * @internal\n */\nexport const FormContext = createContext<UseFormReturn<any> | null>(null);\n\nFormContext.displayName = \"FormContext\";\n","\"use client\";\n\nimport { useCallback, useContext } from \"react\";\nimport { FormContext } from \"./FormContext\";\nimport type { UseFieldOptions, UseFieldReturn, FieldInputProps, FieldMeta } from \"./types\";\n\n/**\n * useField - Field-level reactive hook for form inputs\n *\n * Provides isolated reactivity for individual form fields.\n * Only re-renders when the specific field changes, not when other fields update.\n *\n * Must be used within a FormContext (inside <Form> component).\n *\n * @example\n * ```tsx\n * function EmailInput() {\n * const { field, meta, helpers } = useField({ name: 'email' });\n *\n * return (\n * <div>\n * <input {...field} type=\"email\" />\n * {meta.touched && meta.error && <span>{meta.error}</span>}\n * </div>\n * );\n * }\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/use-field\n */\nexport function useField<T = any>(\n options: UseFieldOptions<T>\n): UseFieldReturn<T> {\n const { name, validate, transform } = options;\n\n const form = useContext(FormContext);\n\n if (!form) {\n throw new Error(\n \"useField must be used within a FormContext. \" +\n \"Wrap your component with <Form> or use useForm's getFieldProps instead.\"\n );\n }\n\n // Get field props with automatic change/blur handling\n const baseFieldProps = form.getFieldProps(name);\n\n // Apply transform if provided\n const field: FieldInputProps<T> = {\n ...baseFieldProps,\n value: baseFieldProps.value as T,\n onChange: (value: T) => {\n const transformedValue = transform ? transform(value) : value;\n baseFieldProps.onChange(transformedValue);\n\n // Run field-level validation if provided\n if (validate) {\n const result = validate(transformedValue, form.values);\n if (result instanceof Promise) {\n result.then((error) => {\n if (error !== undefined) {\n form.setFieldError(name, error);\n }\n });\n } else if (result !== undefined) {\n form.setFieldError(name, result);\n }\n }\n },\n };\n\n // Get field meta information\n const meta: FieldMeta = form.getFieldMeta(name);\n\n // Field helpers\n const helpers = {\n setValue: useCallback(\n (value: T) => {\n const transformedValue = transform ? transform(value) : value;\n form.setFieldValue(name, transformedValue);\n },\n [name, transform, form]\n ),\n setTouched: useCallback(\n (touched: boolean) => {\n form.setFieldTouched(name, touched);\n },\n [name, form]\n ),\n setError: useCallback(\n (error: string | undefined) => {\n form.setFieldError(name, error);\n },\n [name, form]\n ),\n };\n\n return {\n field,\n meta,\n helpers,\n };\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { FormContext } from \"./FormContext\";\nimport type { FormProps, FormValues } from \"./types\";\n\n/**\n * Form - Progressive enhancement form component\n *\n * Provides form context to child components and handles form submission.\n * Supports progressive enhancement with server-side fallback.\n *\n * Features:\n * - Provides FormContext for useField hook\n * - Handles form submission with validation\n * - Progressive enhancement support (works without JavaScript)\n * - Accessible form semantics\n *\n * @example\n * ```tsx\n * const form = useForm({\n * initialValues: { email: '' },\n * onSubmit: async (values) => {\n * await submitForm(values);\n * },\n * });\n *\n * return (\n * <Form form={form} action=\"/api/submit\" method=\"post\">\n * <input {...form.getFieldProps('email')} />\n * <button type=\"submit\">Submit</button>\n * </Form>\n * );\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/form\n */\nexport function Form<T extends FormValues = FormValues>({\n form,\n children,\n className,\n action,\n method = \"post\",\n noValidate = true,\n ...props\n}: FormProps<T> & React.FormHTMLAttributes<HTMLFormElement>) {\n // Wrap handleSubmit to catch any unhandled rejections\n const handleFormSubmit = React.useCallback(\n async (e: React.FormEvent) => {\n try {\n await form.handleSubmit(e);\n } catch (error) {\n // Error is already handled by useForm, just prevent unhandled rejection\n // The form status and errors are already set by useForm's error handling\n }\n },\n [form]\n );\n\n return (\n <FormContext.Provider value={form}>\n <form\n onSubmit={handleFormSubmit}\n action={action}\n method={method}\n noValidate={noValidate}\n className={className}\n {...props}\n >\n {children}\n </form>\n </FormContext.Provider>\n );\n}\n\nForm.displayName = \"Form\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useField } from \"./useField\";\nimport type { FieldProps } from \"./types\";\n\n/**\n * Field - Field wrapper component with label, description, and error display\n *\n * Provides a complete field UI with automatic error handling and accessibility.\n * Uses useField hook internally for field-level reactivity.\n *\n * Features:\n * - Automatic label association\n * - Error display with accessibility\n * - Optional description text\n * - Render prop pattern for flexibility\n * - Full accessibility support\n *\n * @example\n * ```tsx\n * <Field name=\"email\" label=\"Email Address\" description=\"We'll never share your email\">\n * {({ field, meta }) => (\n * <input\n * {...field}\n * type=\"email\"\n * className={meta.error && meta.touched ? 'error' : ''}\n * />\n * )}\n * </Field>\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/field\n */\nexport function Field({\n name,\n label,\n description,\n children,\n showError = true,\n className,\n validate,\n}: FieldProps) {\n const fieldState = useField({ name, validate });\n const { meta } = fieldState;\n\n const hasError = meta.touched && meta.error;\n const errorId = `${name}-error`;\n const descriptionId = `${name}-description`;\n\n return (\n <div className={className} data-field={name}>\n {/* Label */}\n {label && (\n <label htmlFor={name} className=\"field-label\">\n {label}\n </label>\n )}\n\n {/* Description */}\n {description && (\n <div id={descriptionId} className=\"field-description\">\n {description}\n </div>\n )}\n\n {/* Field content (render prop or direct children) */}\n <div className=\"field-input\">\n {typeof children === \"function\" ? children(fieldState) : children}\n </div>\n\n {/* Error message */}\n {showError && hasError && (\n <div\n id={errorId}\n className=\"field-error\"\n role=\"alert\"\n aria-live=\"polite\"\n >\n {Array.isArray(meta.error) ? meta.error.join(\", \") : meta.error}\n </div>\n )}\n </div>\n );\n}\n\nField.displayName = \"Field\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/core/useForm.ts","../src/core/FormContext.tsx","../src/core/useField.ts","../src/core/Form.tsx","../src/core/Field.tsx"],"names":["useObservable","useRef","useMap","useCallback","errors","touched","values","useSelector","initialValues","createContext","useContext","React","React2"],"mappings":"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","file":"core.cjs","sourcesContent":["\"use client\";\n\nimport { useCallback, useRef } from \"react\";\nimport { useObservable, useSelector } from \"@legendapp/state/react\";\n// Tree-shakable imports from @opensite/hooks following ECOSYSTEM_GUIDELINES\nimport { useMap } from \"@opensite/hooks/core/useMap\";\nimport type {\n FormValues,\n FormErrors,\n TouchedFields,\n UseFormOptions,\n UseFormReturn,\n SubmissionStatus,\n FieldInputProps,\n FieldMeta,\n FormHelpers,\n} from \"./types\";\n\n/**\n * useForm - High-performance form state management with field-level reactivity\n *\n * Built on @legendapp/state for optimal performance:\n * - Field-level reactivity: Only re-render the specific field that changed\n * - Observable-based state: ~1 re-render per change vs ~10 for traditional hooks\n * - Tree-shakable: Only bundle what you use\n *\n * @example\n * ```tsx\n * const form = useForm({\n * initialValues: { email: '', password: '' },\n * onSubmit: async (values) => {\n * await login(values);\n * },\n * validationSchema: {\n * email: (value) => !value ? 'Required' : undefined,\n * password: (value) => value.length < 8 ? 'Too short' : undefined,\n * },\n * });\n *\n * return (\n * <form onSubmit={form.handleSubmit}>\n * <input {...form.getFieldProps('email')} />\n * {form.errors.email && <span>{form.errors.email}</span>}\n * </form>\n * );\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/use-form\n */\nexport function useForm<T extends FormValues = FormValues>(\n options: UseFormOptions<T>\n): UseFormReturn<T> {\n const {\n initialValues,\n validationSchema,\n validateOn = \"onBlur\",\n revalidateOn = \"onChange\",\n onSubmit,\n onError,\n debug = false,\n } = options;\n\n // Create observable form state for field-level reactivity\n // Note: Type assertion needed for @legendapp/state beta compatibility\n // The beta version's TypeScript types don't properly expose nested Observable properties\n // This will be removed once stable v3.0.0 is released with proper type definitions\n const state$ = useObservable({\n values: initialValues,\n errors: {} as FormErrors<T>,\n touched: {} as TouchedFields<T>,\n isSubmitting: false,\n status: \"idle\" as SubmissionStatus,\n initialValues: { ...initialValues }, // Create a copy to prevent reference sharing\n hasValidated: {} as Record<string, boolean>,\n }) as any;\n\n // Track validation in progress to prevent race conditions\n const validationInProgress = useRef<Set<string>>(new Set());\n\n // Enhanced state management with @opensite/hooks\n // useMap: Manage complex nested field metadata immutably\n const [, fieldMetadataActions] = useMap<\n string,\n { lastValidated?: number; validationCount: number }\n >();\n\n /**\n * Validate a single field\n * Enhanced with @opensite/hooks useMap for metadata tracking\n */\n const validateField = useCallback(\n async <K extends keyof T>(field: K): Promise<string | undefined> => {\n const validators = validationSchema?.[field];\n if (!validators) return undefined;\n\n const fieldKey = String(field);\n validationInProgress.current.add(fieldKey);\n\n // Track validation metadata using useMap\n const currentMeta = fieldMetadataActions.get(fieldKey) || {\n validationCount: 0,\n };\n fieldMetadataActions.set(fieldKey, {\n lastValidated: Date.now(),\n validationCount: currentMeta.validationCount + 1,\n });\n\n try {\n const value = state$.values[field].get();\n const allValues = state$.values.get();\n\n const validatorArray = Array.isArray(validators)\n ? validators\n : [validators];\n\n for (const validator of validatorArray) {\n const error = await validator(value, allValues);\n if (error) {\n state$.errors[field].set(error);\n validationInProgress.current.delete(fieldKey);\n return error;\n }\n }\n\n // Clear error if validation passed\n state$.errors[field].set(undefined);\n validationInProgress.current.delete(fieldKey);\n return undefined;\n } catch (error) {\n validationInProgress.current.delete(fieldKey);\n const errorMessage =\n error instanceof Error ? error.message : \"Validation error\";\n state$.errors[field].set(errorMessage);\n return errorMessage;\n }\n },\n [validationSchema, state$, fieldMetadataActions]\n );\n\n /**\n * Validate entire form\n */\n const validateForm = useCallback(async (): Promise<FormErrors<T>> => {\n if (!validationSchema) return {};\n\n const fields = Object.keys(validationSchema) as Array<keyof T>;\n const errors: FormErrors<T> = {};\n\n await Promise.all(\n fields.map(async (field) => {\n const error = await validateField(field);\n if (error) {\n errors[field] = error;\n }\n })\n );\n\n state$.errors.set(errors);\n return errors;\n }, [validationSchema, validateField, state$]);\n\n /**\n * Set field value with optional validation\n */\n const setFieldValue = useCallback(\n <K extends keyof T>(field: K, value: T[K]) => {\n state$.values[field].set(value);\n\n // Revalidate if field has been validated before\n const shouldRevalidate =\n revalidateOn === \"onChange\" &&\n state$.hasValidated[String(field)].get();\n\n if (shouldRevalidate && validationSchema?.[field]) {\n validateField(field);\n }\n\n if (debug) {\n console.log(\"[useForm] setFieldValue:\", { field, value });\n }\n },\n [state$, revalidateOn, validationSchema, validateField, debug]\n );\n\n /**\n * Set field as touched with optional validation\n */\n const setFieldTouched = useCallback(\n <K extends keyof T>(field: K, touched: boolean) => {\n state$.touched[field].set(touched);\n\n // Validate on blur if configured\n if (touched && validateOn === \"onBlur\" && validationSchema?.[field]) {\n state$.hasValidated[String(field)].set(true);\n validateField(field);\n }\n\n if (debug) {\n console.log(\"[useForm] setFieldTouched:\", { field, touched });\n }\n },\n [state$, validateOn, validationSchema, validateField, debug]\n );\n\n /**\n * Reset form to initial values\n * Enhanced with @opensite/hooks useMap to clear field metadata\n */\n const resetForm = useCallback(() => {\n state$.values.set(state$.initialValues.get());\n state$.errors.set({});\n state$.touched.set({});\n state$.isSubmitting.set(false);\n state$.status.set(\"idle\");\n state$.hasValidated.set({});\n\n // Clear field metadata tracked by useMap\n fieldMetadataActions.clear();\n\n if (debug) {\n console.log(\"[useForm] Form reset\");\n }\n }, [state$, fieldMetadataActions, debug]);\n\n /**\n * Handle form submission\n */\n const handleSubmit = useCallback(\n async (e?: React.FormEvent) => {\n e?.preventDefault();\n\n if (debug) {\n console.log(\"[useForm] handleSubmit started\");\n }\n\n state$.isSubmitting.set(true);\n state$.status.set(\"submitting\");\n\n try {\n // Validate form\n const errors = await validateForm();\n const hasErrors = Object.keys(errors).length > 0;\n\n if (hasErrors) {\n state$.status.set(\"error\");\n onError?.(errors);\n\n if (debug) {\n console.log(\"[useForm] Validation errors:\", errors);\n }\n\n return;\n }\n\n // Create form helpers\n const helpers: FormHelpers<T> = {\n setValues: (values) => {\n if (typeof values === \"function\") {\n state$.values.set(values(state$.values.get()));\n } else {\n state$.values.set(values);\n }\n },\n setFieldValue,\n setErrors: (errors) => state$.errors.set(errors),\n setFieldError: (field, error) => state$.errors[field].set(error),\n setTouched: (touched) => state$.touched.set(touched),\n setFieldTouched,\n setSubmitting: (submitting) => state$.isSubmitting.set(submitting),\n resetForm,\n };\n\n // Call submission handler\n await onSubmit(state$.values.get(), helpers);\n\n state$.status.set(\"success\");\n\n if (debug) {\n console.log(\"[useForm] Submit successful\");\n }\n } catch (error) {\n state$.status.set(\"error\");\n\n if (debug) {\n console.error(\"[useForm] Submit error:\", error);\n }\n\n throw error;\n } finally {\n state$.isSubmitting.set(false);\n }\n },\n [\n state$,\n validateForm,\n onSubmit,\n onError,\n setFieldValue,\n setFieldTouched,\n resetForm,\n debug,\n ]\n );\n\n /**\n * Get field props for binding to inputs\n */\n const getFieldProps = useCallback(\n <K extends keyof T>(field: K): FieldInputProps<T[K]> => {\n return {\n name: String(field),\n value: state$.values[field].get(),\n onChange: (value: T[K]) => setFieldValue(field, value),\n onBlur: () => setFieldTouched(field, true),\n };\n },\n [state$, setFieldValue, setFieldTouched]\n );\n\n /**\n * Get field meta information\n * Enhanced with @opensite/hooks useMap for validation metadata\n * and usePrevious for change detection\n */\n const getFieldMeta = useCallback(\n <K extends keyof T>(field: K): FieldMeta => {\n const fieldKey = String(field);\n const metadata = fieldMetadataActions.get(fieldKey);\n\n return {\n error: state$.errors[field].get(),\n touched: state$.touched[field].get() ?? false,\n isDirty:\n state$.values[field].get() !== state$.initialValues[field].get(),\n isValidating: validationInProgress.current.has(fieldKey),\n // Additional metadata from @opensite/hooks\n validationCount: metadata?.validationCount,\n lastValidated: metadata?.lastValidated,\n };\n },\n [state$, fieldMetadataActions]\n );\n\n // Use selectors for reactive properties\n const values = useSelector(() => state$.values.get());\n const errors = useSelector(() => state$.errors.get());\n const touched = useSelector(() => state$.touched.get());\n const isSubmitting = useSelector(() => state$.isSubmitting.get());\n const status = useSelector(() => state$.status.get());\n\n // Use selectors for derived state to ensure reactivity\n const isValid = useSelector(() => Object.keys(state$.errors.get()).length === 0);\n const isDirty = useSelector(() => {\n const currentValues = state$.values.get();\n const initialValues = state$.initialValues.get();\n return Object.keys(currentValues).some(\n (key) => currentValues[key] !== initialValues[key]\n );\n });\n\n return {\n // State\n values,\n errors,\n touched,\n isSubmitting,\n isValid,\n isDirty,\n status,\n\n // Actions\n handleSubmit,\n setValues: (values) => {\n if (typeof values === \"function\") {\n state$.values.set(values(state$.values.get()));\n } else {\n state$.values.set(values);\n }\n },\n setFieldValue,\n setErrors: (errors) => state$.errors.set(errors),\n setFieldError: (field, error) => state$.errors[field].set(error),\n setTouched: (touched) => state$.touched.set(touched),\n setFieldTouched,\n validateForm,\n validateField,\n resetForm,\n getFieldProps,\n getFieldMeta,\n };\n}\n","\"use client\";\n\nimport { createContext } from \"react\";\nimport type { UseFormReturn } from \"./types\";\n\n/**\n * FormContext - React context for providing form state to child components\n *\n * Allows useField hook to access form state without prop drilling.\n * Automatically provided by the <Form> component.\n *\n * @internal\n */\nexport const FormContext = createContext<UseFormReturn<any> | null>(null);\n\nFormContext.displayName = \"FormContext\";\n","\"use client\";\n\nimport { useCallback, useContext } from \"react\";\nimport { FormContext } from \"./FormContext\";\nimport type { UseFieldOptions, UseFieldReturn, FieldInputProps, FieldMeta } from \"./types\";\n\n/**\n * useField - Field-level reactive hook for form inputs\n *\n * Provides isolated reactivity for individual form fields.\n * Only re-renders when the specific field changes, not when other fields update.\n *\n * Must be used within a FormContext (inside <Form> component).\n *\n * @example\n * ```tsx\n * function EmailInput() {\n * const { field, meta, helpers } = useField({ name: 'email' });\n *\n * return (\n * <div>\n * <input {...field} type=\"email\" />\n * {meta.touched && meta.error && <span>{meta.error}</span>}\n * </div>\n * );\n * }\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/use-field\n */\nexport function useField<T = any>(\n options: UseFieldOptions<T>\n): UseFieldReturn<T> {\n const { name, validate, transform } = options;\n\n const form = useContext(FormContext);\n\n if (!form) {\n throw new Error(\n \"useField must be used within a FormContext. \" +\n \"Wrap your component with <Form> or use useForm's getFieldProps instead.\"\n );\n }\n\n // Get field props with automatic change/blur handling\n const baseFieldProps = form.getFieldProps(name);\n\n // Apply transform if provided\n const field: FieldInputProps<T> = {\n ...baseFieldProps,\n value: baseFieldProps.value as T,\n onChange: (value: T) => {\n const transformedValue = transform ? transform(value) : value;\n baseFieldProps.onChange(transformedValue);\n\n // Run field-level validation if provided\n if (validate) {\n const result = validate(transformedValue, form.values);\n if (result instanceof Promise) {\n result.then((error) => {\n if (error !== undefined) {\n form.setFieldError(name, error);\n }\n });\n } else if (result !== undefined) {\n form.setFieldError(name, result);\n }\n }\n },\n };\n\n // Get field meta information\n const meta: FieldMeta = form.getFieldMeta(name);\n\n // Field helpers\n const helpers = {\n setValue: useCallback(\n (value: T) => {\n const transformedValue = transform ? transform(value) : value;\n form.setFieldValue(name, transformedValue);\n },\n [name, transform, form]\n ),\n setTouched: useCallback(\n (touched: boolean) => {\n form.setFieldTouched(name, touched);\n },\n [name, form]\n ),\n setError: useCallback(\n (error: string | undefined) => {\n form.setFieldError(name, error);\n },\n [name, form]\n ),\n };\n\n return {\n field,\n meta,\n helpers,\n };\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { FormContext } from \"./FormContext\";\nimport type { FormProps, FormValues } from \"./types\";\n\n/**\n * Form - Progressive enhancement form component\n *\n * Provides form context to child components and handles form submission.\n * Supports progressive enhancement with server-side fallback.\n *\n * Features:\n * - Provides FormContext for useField hook\n * - Handles form submission with validation\n * - Progressive enhancement support (works without JavaScript)\n * - Accessible form semantics\n *\n * @example\n * ```tsx\n * const form = useForm({\n * initialValues: { email: '' },\n * onSubmit: async (values) => {\n * await submitForm(values);\n * },\n * });\n *\n * return (\n * <Form form={form} action=\"/api/submit\" method=\"post\">\n * <input {...form.getFieldProps('email')} />\n * <button type=\"submit\">Submit</button>\n * </Form>\n * );\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/form\n */\nexport function Form<T extends FormValues = FormValues>({\n form,\n children,\n className,\n action,\n method = \"post\",\n noValidate = true,\n ...props\n}: FormProps<T> & React.FormHTMLAttributes<HTMLFormElement>) {\n // Wrap handleSubmit to catch any unhandled rejections\n const handleFormSubmit = React.useCallback(\n async (e: React.FormEvent) => {\n try {\n await form.handleSubmit(e);\n } catch (error) {\n // Error is already handled by useForm, just prevent unhandled rejection\n // The form status and errors are already set by useForm's error handling\n }\n },\n [form]\n );\n\n return (\n <FormContext.Provider value={form}>\n <form\n onSubmit={handleFormSubmit}\n action={action}\n method={method}\n noValidate={noValidate}\n className={className}\n {...props}\n >\n {children}\n </form>\n </FormContext.Provider>\n );\n}\n\nForm.displayName = \"Form\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useField } from \"./useField\";\nimport type { FieldProps } from \"./types\";\n\n/**\n * Field - Field wrapper component with label, description, and error display\n *\n * Provides a complete field UI with automatic error handling and accessibility.\n * Uses useField hook internally for field-level reactivity.\n *\n * Features:\n * - Automatic label association\n * - Error display with accessibility\n * - Optional description text\n * - Render prop pattern for flexibility\n * - Full accessibility support\n *\n * @example\n * ```tsx\n * <Field name=\"email\" label=\"Email Address\" description=\"We'll never share your email\">\n * {({ field, meta }) => (\n * <input\n * {...field}\n * type=\"email\"\n * className={meta.error && meta.touched ? 'error' : ''}\n * />\n * )}\n * </Field>\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/field\n */\nexport function Field({\n name,\n label,\n description,\n children,\n showError = true,\n className,\n errorClassName,\n required = false,\n validate,\n}: FieldProps) {\n const fieldState = useField({ name, validate });\n const { meta } = fieldState;\n\n const hasError = meta.touched && meta.error;\n const errorId = `${name}-error`;\n const descriptionId = `${name}-description`;\n\n return (\n <div className={className} data-field={name}>\n {/* Label */}\n {label && (\n <label htmlFor={name} className=\"field-label\">\n {label}\n {required && <span className=\"field-required\" aria-label=\"required\"> *</span>}\n </label>\n )}\n\n {/* Description */}\n {description && (\n <div id={descriptionId} className=\"field-description\">\n {description}\n </div>\n )}\n\n {/* Field content (render prop or direct children) */}\n <div className=\"field-input\">\n {typeof children === \"function\" ? children(fieldState) : children}\n </div>\n\n {/* Error message */}\n {showError && hasError && (\n <div\n id={errorId}\n className={errorClassName || \"field-error\"}\n role=\"alert\"\n aria-live=\"polite\"\n >\n {Array.isArray(meta.error) ? meta.error.join(\", \") : meta.error}\n </div>\n )}\n </div>\n );\n}\n\nField.displayName = \"Field\";\n"]}
|