@page-speed/forms 0.8.0 → 0.8.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 +24 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @page-speed/forms
|
|
2
|
+
|
|
3
|
+
## Type-safe, high-performance React form state and input components for OpenSite/DashTrack workloads
|
|
2
4
|
|
|
3
5
|

|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
<br />
|
|
6
8
|
|
|
7
9
|
[](https://www.npmjs.com/package/@page-speed/forms)
|
|
8
10
|
[](https://www.npmjs.com/package/@page-speed/forms)
|
|
@@ -43,7 +45,7 @@ import {
|
|
|
43
45
|
|
|
44
46
|
const fields: FormFieldConfig[] = [
|
|
45
47
|
{
|
|
46
|
-
name: "
|
|
48
|
+
name: "full_name",
|
|
47
49
|
type: "text",
|
|
48
50
|
label: "Full Name",
|
|
49
51
|
required: true,
|
|
@@ -65,7 +67,7 @@ const fields: FormFieldConfig[] = [
|
|
|
65
67
|
columnSpan: 6,
|
|
66
68
|
},
|
|
67
69
|
{
|
|
68
|
-
name: "
|
|
70
|
+
name: "content",
|
|
69
71
|
type: "textarea",
|
|
70
72
|
label: "Message",
|
|
71
73
|
required: true,
|
|
@@ -205,40 +207,49 @@ function ContactBlock({ formEngineSetup }: { formEngineSetup?: FormEngineSetup }
|
|
|
205
207
|
## Package Entry Points
|
|
206
208
|
|
|
207
209
|
### Main
|
|
210
|
+
|
|
208
211
|
- `@page-speed/forms`
|
|
209
212
|
|
|
210
|
-
Exports:
|
|
213
|
+
#### Exports:
|
|
214
|
+
|
|
211
215
|
- `useForm`, `useField`, `Form`, `Field`, `FormContext`
|
|
212
216
|
- Core form/types interfaces
|
|
213
217
|
|
|
214
218
|
### Integration (Recommended)
|
|
219
|
+
|
|
215
220
|
- `@page-speed/forms/integration`
|
|
216
221
|
|
|
217
|
-
Exports:
|
|
222
|
+
#### Exports:
|
|
223
|
+
|
|
218
224
|
- `FormEngine`, `FormEngineSetup`, `FormEngineProps`
|
|
219
225
|
- `FormFieldConfig`, `FormEngineStyleRules`, `FormEngineLayoutSettings`
|
|
220
226
|
- `DynamicFormField`, `useContactForm`, `useFileUpload`
|
|
221
227
|
|
|
222
228
|
### Inputs
|
|
229
|
+
|
|
223
230
|
- `@page-speed/forms/inputs`
|
|
224
231
|
|
|
225
|
-
Exports:
|
|
232
|
+
#### Exports:
|
|
233
|
+
|
|
226
234
|
- `TextInput`, `TextArea`, `Checkbox`, `CheckboxGroup`, `Radio`
|
|
227
235
|
- `Select`, `MultiSelect`, `DatePicker`, `DateRangePicker`, `TimePicker`
|
|
228
236
|
- `FileInput`
|
|
229
237
|
|
|
230
238
|
### Validation
|
|
239
|
+
|
|
231
240
|
- `@page-speed/forms/validation`
|
|
232
241
|
- `@page-speed/forms/validation/rules`
|
|
233
242
|
- `@page-speed/forms/validation/utils`
|
|
234
243
|
- `@page-speed/forms/validation/valibot`
|
|
235
244
|
|
|
236
245
|
### Upload
|
|
246
|
+
|
|
237
247
|
- `@page-speed/forms/upload`
|
|
238
248
|
|
|
239
249
|
## Input Notes
|
|
240
250
|
|
|
241
251
|
### `TimePicker`
|
|
252
|
+
|
|
242
253
|
`TimePicker` uses a native `input[type="time"]` UX internally.
|
|
243
254
|
|
|
244
255
|
- Accepts controlled values in `HH:mm` (24-hour) or `h:mm AM/PM` (12-hour)
|
|
@@ -246,11 +257,13 @@ Exports:
|
|
|
246
257
|
- Emits `h:mm AM/PM` when `use24Hour` is `false`
|
|
247
258
|
|
|
248
259
|
### `DatePicker` and `DateRangePicker`
|
|
260
|
+
|
|
249
261
|
- Calendar popovers close on outside click
|
|
250
262
|
- Compact month/day layout using tokenized Tailwind classes
|
|
251
263
|
- `DateRangePicker` renders two months and highlights endpoints + in-range dates
|
|
252
264
|
|
|
253
265
|
### `Select` and `MultiSelect`
|
|
266
|
+
|
|
254
267
|
- Close on outside click
|
|
255
268
|
- Search support
|
|
256
269
|
- Option groups
|
|
@@ -289,6 +302,7 @@ See `INPUT_AUTOFILL_RESET_CLASSES` in `src/utils.ts`.
|
|
|
289
302
|
### Token requirements
|
|
290
303
|
|
|
291
304
|
Ensure your app defines semantic tokens used in classes such as:
|
|
305
|
+
|
|
292
306
|
- `background`, `foreground`, `border`, `input`, `ring`
|
|
293
307
|
- `primary`, `primary-foreground`
|
|
294
308
|
- `muted`, `muted-foreground`
|
|
@@ -336,6 +350,7 @@ function CustomForm() {
|
|
|
336
350
|
## Validation Utilities
|
|
337
351
|
|
|
338
352
|
Use built-in rules:
|
|
353
|
+
|
|
339
354
|
- `required`, `email`, `url`, `phone`
|
|
340
355
|
- `minLength`, `maxLength`, `min`, `max`
|
|
341
356
|
- `pattern`, `matches`, `oneOf`
|
|
@@ -343,6 +358,7 @@ Use built-in rules:
|
|
|
343
358
|
- `compose`
|
|
344
359
|
|
|
345
360
|
Use utilities from `/validation/utils`:
|
|
361
|
+
|
|
346
362
|
- `debounce`, `asyncValidator`, `crossFieldValidator`, `when`
|
|
347
363
|
- `setErrorMessages`, `getErrorMessage`, `resetErrorMessages`
|
|
348
364
|
|
|
@@ -351,6 +367,7 @@ Use utilities from `/validation/utils`:
|
|
|
351
367
|
`FileInput` and `FormEngine` support validation, drag/drop, preview, and crop workflows.
|
|
352
368
|
|
|
353
369
|
For full two-phase upload patterns and serializer usage, see:
|
|
370
|
+
|
|
354
371
|
- [`docs/FILE_UPLOADS.md`](./docs/FILE_UPLOADS.md)
|
|
355
372
|
- `@page-speed/forms/integration`
|
|
356
373
|
|