@ttoss/forms 0.40.2 → 0.41.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 +99 -66
- package/dist/MultistepForm/index.d.ts +2 -1
- package/dist/esm/MultistepForm/index.js +3 -3
- package/dist/esm/{chunk-ILQOS34E.js → chunk-6UQV3E5X.js} +82 -2
- package/dist/esm/index.js +2 -2
- package/dist/index.d.ts +5 -2
- package/dist/typings.d-BzNUo1mD.d.ts +30 -0
- package/package.json +17 -16
- package/dist/typings.d-BZ6kUiQ4.d.ts +0 -13
package/README.md
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# @ttoss/forms
|
|
2
2
|
|
|
3
|
-
**@ttoss/forms** provides React form components built on [React Hook Form](https://react-hook-form.com/)
|
|
3
|
+
**@ttoss/forms** provides React form components built on [React Hook Form](https://react-hook-form.com/), with schema validation using [Zod](https://zod.dev/), integrated i18n support, and theme styling.
|
|
4
|
+
|
|
5
|
+
> **Note:** Yup support is deprecated and will be removed in a future version. Please migrate to Zod for new projects.
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
7
9
|
```shell
|
|
8
10
|
pnpm i @ttoss/forms @ttoss/react-i18n @ttoss/ui @emotion/react
|
|
9
|
-
pnpm i
|
|
11
|
+
pnpm i -D @ttoss/i18n-cli
|
|
10
12
|
```
|
|
11
13
|
|
|
12
14
|
**Note:** This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). I18n configuration is required—see [@ttoss/react-i18n](https://ttoss.dev/docs/modules/packages/react-i18n/) for setup details.
|
|
@@ -20,21 +22,21 @@ import {
|
|
|
20
22
|
FormFieldCheckbox,
|
|
21
23
|
FormFieldInput,
|
|
22
24
|
useForm,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
z,
|
|
26
|
+
zodResolver,
|
|
25
27
|
} from '@ttoss/forms';
|
|
26
28
|
import { I18nProvider } from '@ttoss/react-i18n';
|
|
27
29
|
|
|
28
|
-
const schema =
|
|
29
|
-
firstName:
|
|
30
|
-
age:
|
|
31
|
-
receiveEmails:
|
|
30
|
+
const schema = z.object({
|
|
31
|
+
firstName: z.string().min(1, 'First name is required'),
|
|
32
|
+
age: z.number(),
|
|
33
|
+
receiveEmails: z.boolean(),
|
|
32
34
|
});
|
|
33
35
|
|
|
34
36
|
export const FormComponent = () => {
|
|
35
37
|
const formMethods = useForm({
|
|
36
38
|
mode: 'all',
|
|
37
|
-
resolver:
|
|
39
|
+
resolver: zodResolver(schema),
|
|
38
40
|
});
|
|
39
41
|
|
|
40
42
|
const onSubmit = (data) => {
|
|
@@ -58,20 +60,20 @@ export const FormComponent = () => {
|
|
|
58
60
|
|
|
59
61
|
All React Hook Form APIs are re-exported from `@ttoss/forms`, including hooks like `useForm`, `useController`, `useFieldArray`, and `useFormContext`. See the [React Hook Form documentation](https://react-hook-form.com/docs) for complete API details.
|
|
60
62
|
|
|
61
|
-
##
|
|
63
|
+
## Zod Validation (Recommended)
|
|
62
64
|
|
|
63
|
-
Import `
|
|
65
|
+
Import `z` and `zodResolver` directly from `@ttoss/forms` for schema validation using [Zod](https://zod.dev/):
|
|
64
66
|
|
|
65
67
|
```tsx
|
|
66
|
-
import { Form, FormFieldInput, useForm,
|
|
68
|
+
import { Form, FormFieldInput, useForm, z, zodResolver } from '@ttoss/forms';
|
|
67
69
|
|
|
68
|
-
const schema =
|
|
69
|
-
firstName:
|
|
70
|
+
const schema = z.object({
|
|
71
|
+
firstName: z.string().min(1, 'First name is required'),
|
|
70
72
|
});
|
|
71
73
|
|
|
72
74
|
const MyForm = () => {
|
|
73
75
|
const formMethods = useForm({
|
|
74
|
-
resolver:
|
|
76
|
+
resolver: zodResolver(schema),
|
|
75
77
|
});
|
|
76
78
|
|
|
77
79
|
return (
|
|
@@ -87,59 +89,91 @@ const MyForm = () => {
|
|
|
87
89
|
|
|
88
90
|
Invalid fields display default error messages like "Field is required". These messages are defined using i18n and can be customized for each locale.
|
|
89
91
|
|
|
90
|
-
#### Default
|
|
92
|
+
#### Default Zod Messages
|
|
91
93
|
|
|
92
|
-
The package provides internationalized default messages for common
|
|
94
|
+
The package provides internationalized default messages for common Zod validation errors. These are automatically extracted when you run `pnpm run i18n`:
|
|
93
95
|
|
|
94
|
-
- **Required field**: "Field is required"
|
|
95
|
-
- **Type mismatch**: "Invalid Value for Field of type
|
|
96
|
-
- **Minimum length**: "Field must be at least
|
|
96
|
+
- **Required field**: `"Field is required"`
|
|
97
|
+
- **Type mismatch**: `"Invalid Value for Field of type {expected}"`
|
|
98
|
+
- **Minimum length**: `"Field must be at least {min} characters"`
|
|
97
99
|
|
|
98
100
|
To customize these messages for your locale, extract the i18n messages and translate them in your application's i18n files (e.g., `i18n/compiled/pt-BR.json`). See the [i18n-CLI documentation](https://ttoss.dev/docs/modules/packages/i18n-cli/) for more details.
|
|
99
101
|
|
|
100
|
-
|
|
102
|
+
### Custom Validations
|
|
103
|
+
|
|
104
|
+
The package extends Zod with custom validation methods for Brazilian documents:
|
|
101
105
|
|
|
102
|
-
|
|
106
|
+
#### CPF Validation
|
|
103
107
|
|
|
104
108
|
```tsx
|
|
105
|
-
import {
|
|
106
|
-
|
|
109
|
+
import { z } from '@ttoss/forms';
|
|
110
|
+
|
|
111
|
+
const schema = z.object({
|
|
112
|
+
cpf: z.string().cpf(), // Uses default message: "Invalid CPF"
|
|
113
|
+
// Or with custom message:
|
|
114
|
+
cpfCustom: z.string().cpf('CPF inválido'),
|
|
115
|
+
});
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
#### CNPJ Validation
|
|
119
|
+
|
|
120
|
+
````
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import { z } from '@ttoss/forms';
|
|
124
|
+
|
|
125
|
+
const schema = z.object({
|
|
126
|
+
cnpj: z.string().cnpj(), // Uses default message: "Invalid CNPJ"
|
|
127
|
+
// Or with custom message:
|
|
128
|
+
cnpjCustom: z.string().cnpj('CNPJ inválido'),
|
|
129
|
+
});
|
|
130
|
+
````
|
|
131
|
+
|
|
132
|
+
#### Password Validation
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
import { passwordSchema } from '@ttoss/forms';
|
|
136
|
+
import { z } from '@ttoss/forms';
|
|
137
|
+
|
|
138
|
+
const schema = z.object({
|
|
139
|
+
// Required password (minimum 8 characters)
|
|
140
|
+
password: passwordSchema({ required: true }),
|
|
141
|
+
|
|
142
|
+
// Optional password (accepts empty string or minimum 8 characters)
|
|
143
|
+
optionalPassword: passwordSchema(),
|
|
144
|
+
});
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## Yup Validation (Deprecated)
|
|
148
|
+
|
|
149
|
+
> **DEPRECATION WARNING:** Yup support is deprecated and will be removed in a future major version. Please migrate to Zod for new projects. Existing Yup schemas will continue to work, but we recommend planning your migration to Zod.
|
|
150
|
+
|
|
151
|
+
For legacy projects still using Yup, you can import `yup` and `yupResolver` from `@ttoss/forms`:
|
|
152
|
+
|
|
153
|
+
```tsx
|
|
154
|
+
import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
|
|
155
|
+
|
|
156
|
+
const schema = yup.object({
|
|
157
|
+
firstName: yup.string().required(),
|
|
158
|
+
});
|
|
107
159
|
|
|
108
160
|
const MyForm = () => {
|
|
109
|
-
const {
|
|
110
|
-
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
const schema = useMemo(
|
|
114
|
-
() =>
|
|
115
|
-
yup.object({
|
|
116
|
-
name: yup.string().required(
|
|
117
|
-
formatMessage({
|
|
118
|
-
defaultMessage: 'Name must not be null',
|
|
119
|
-
description: 'Name required constraint',
|
|
120
|
-
})
|
|
121
|
-
),
|
|
122
|
-
age: yup.number().min(
|
|
123
|
-
18,
|
|
124
|
-
formatMessage(
|
|
125
|
-
{
|
|
126
|
-
defaultMessage: 'You must be {age} years old or more',
|
|
127
|
-
description: 'Min age constraint message',
|
|
128
|
-
},
|
|
129
|
-
{ age: 18 }
|
|
130
|
-
)
|
|
131
|
-
),
|
|
132
|
-
}),
|
|
133
|
-
[formatMessage]
|
|
134
|
-
);
|
|
161
|
+
const formMethods = useForm({
|
|
162
|
+
resolver: yupResolver(schema),
|
|
163
|
+
});
|
|
135
164
|
|
|
136
|
-
|
|
165
|
+
return (
|
|
166
|
+
<Form {...formMethods} onSubmit={(data) => console.log(data)}>
|
|
167
|
+
<FormFieldInput name="firstName" label="First Name" />
|
|
168
|
+
<Button type="submit">Submit</Button>
|
|
169
|
+
</Form>
|
|
170
|
+
);
|
|
137
171
|
};
|
|
138
172
|
```
|
|
139
173
|
|
|
140
174
|
## Validation Approaches
|
|
141
175
|
|
|
142
|
-
There are two ways to validate form fields in `@ttoss/forms`: schema-based validation using
|
|
176
|
+
There are two ways to validate form fields in `@ttoss/forms`: schema-based validation using Zod schemas with `zodResolver`, and field-level validation using the `rules` prop on individual form fields.
|
|
143
177
|
|
|
144
178
|
**IMPORTANT:** You cannot mix both validation methods for the same field—choose either schema-based or field-level validation per field.
|
|
145
179
|
|
|
@@ -159,16 +193,18 @@ There are two ways to validate form fields in `@ttoss/forms`: schema-based valid
|
|
|
159
193
|
|
|
160
194
|
### 1. Schema-based Validation (Recommended)
|
|
161
195
|
|
|
162
|
-
Use
|
|
196
|
+
Use Zod schemas with `zodResolver` for complex validation logic:
|
|
163
197
|
|
|
164
198
|
```tsx
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
199
|
+
import { z, zodResolver } from '@ttoss/forms';
|
|
200
|
+
|
|
201
|
+
const schema = z.object({
|
|
202
|
+
email: z.string().email(),
|
|
203
|
+
age: z.number().min(18).max(100),
|
|
168
204
|
});
|
|
169
205
|
|
|
170
206
|
const formMethods = useForm({
|
|
171
|
-
resolver:
|
|
207
|
+
resolver: zodResolver(schema),
|
|
172
208
|
});
|
|
173
209
|
```
|
|
174
210
|
|
|
@@ -609,15 +645,15 @@ Import from `@ttoss/forms/multistep-form`:
|
|
|
609
645
|
|
|
610
646
|
```tsx
|
|
611
647
|
import { MultistepForm } from '@ttoss/forms/multistep-form';
|
|
612
|
-
import { FormFieldInput,
|
|
648
|
+
import { FormFieldInput, z } from '@ttoss/forms';
|
|
613
649
|
|
|
614
650
|
const steps = [
|
|
615
651
|
{
|
|
616
652
|
label: 'Step 1',
|
|
617
653
|
question: 'What is your name?',
|
|
618
654
|
fields: <FormFieldInput name="name" label="Name" />,
|
|
619
|
-
schema:
|
|
620
|
-
name:
|
|
655
|
+
schema: z.object({
|
|
656
|
+
name: z.string().min(1, 'Name is required'),
|
|
621
657
|
}),
|
|
622
658
|
},
|
|
623
659
|
{
|
|
@@ -625,11 +661,8 @@ const steps = [
|
|
|
625
661
|
question: 'How old are you?',
|
|
626
662
|
fields: <FormFieldInput type="number" name="age" label="Age" />,
|
|
627
663
|
defaultValues: { age: 18 },
|
|
628
|
-
schema:
|
|
629
|
-
age:
|
|
630
|
-
.number()
|
|
631
|
-
.min(18, 'Must be at least 18')
|
|
632
|
-
.required('Age is required'),
|
|
664
|
+
schema: z.object({
|
|
665
|
+
age: z.number().min(18, 'Must be at least 18'),
|
|
633
666
|
}),
|
|
634
667
|
},
|
|
635
668
|
];
|
|
@@ -664,7 +697,7 @@ Each step object contains:
|
|
|
664
697
|
- `label`: Step label for navigation
|
|
665
698
|
- `question`: Question or instruction text
|
|
666
699
|
- `fields`: React element(s) containing form fields
|
|
667
|
-
- `schema`:
|
|
700
|
+
- `schema`: Zod validation schema
|
|
668
701
|
- `defaultValues`: Optional default values for step fields
|
|
669
702
|
|
|
670
703
|
### Header Types
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import '../typings.d-
|
|
3
|
+
import '../typings.d-BzNUo1mD.js';
|
|
4
4
|
import * as yup from 'yup';
|
|
5
5
|
import { IconType } from '@ttoss/react-icons';
|
|
6
|
+
import 'zod';
|
|
6
7
|
|
|
7
8
|
type MultistepFlowMessageVariant = 'image-text' | 'heading-and-subheading';
|
|
8
9
|
type MultistepFlowMessageBase = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { Form, useForm, yupResolver } from "../chunk-
|
|
3
|
+
import { Form, useForm, yupResolver } from "../chunk-6UQV3E5X.js";
|
|
4
4
|
import { __name } from "../chunk-BL55OAIO.js";
|
|
5
5
|
|
|
6
6
|
// src/MultistepForm/MultistepForm.tsx
|
|
@@ -134,7 +134,7 @@ var MultistepFormStepper = /* @__PURE__ */__name(({
|
|
|
134
134
|
}, submitLabel));
|
|
135
135
|
}, "MultistepFormStepper");
|
|
136
136
|
|
|
137
|
-
// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.
|
|
137
|
+
// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.4/node_modules/@iconify-icon/react/dist/iconify.mjs
|
|
138
138
|
import React5 from "react";
|
|
139
139
|
|
|
140
140
|
// ../../node_modules/.pnpm/iconify-icon@2.3.0/node_modules/iconify-icon/dist/iconify-icon.mjs
|
|
@@ -2263,7 +2263,7 @@ var {
|
|
|
2263
2263
|
_api
|
|
2264
2264
|
} = IconifyIconComponent;
|
|
2265
2265
|
|
|
2266
|
-
// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.
|
|
2266
|
+
// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.4/node_modules/@iconify-icon/react/dist/iconify.mjs
|
|
2267
2267
|
var Icon = React5.forwardRef((props, ref) => {
|
|
2268
2268
|
const newProps = {
|
|
2269
2269
|
...props,
|
|
@@ -203,7 +203,6 @@ var FormFieldCurrencyInput = /* @__PURE__ */__name(({
|
|
|
203
203
|
// src/FormFieldDatePicker.tsx
|
|
204
204
|
import { DatePicker } from "@ttoss/components/DatePicker";
|
|
205
205
|
var FormFieldDatePicker = /* @__PURE__ */__name(({
|
|
206
|
-
disabled,
|
|
207
206
|
...props
|
|
208
207
|
}) => {
|
|
209
208
|
const {
|
|
@@ -217,6 +216,7 @@ var FormFieldDatePicker = /* @__PURE__ */__name(({
|
|
|
217
216
|
id,
|
|
218
217
|
defaultValue,
|
|
219
218
|
presets,
|
|
219
|
+
disabled,
|
|
220
220
|
...datePickerProps
|
|
221
221
|
} = props;
|
|
222
222
|
return /* @__PURE__ */React.createElement(FormField, {
|
|
@@ -235,6 +235,7 @@ var FormFieldDatePicker = /* @__PURE__ */__name(({
|
|
|
235
235
|
}) => {
|
|
236
236
|
return /* @__PURE__ */React.createElement(DatePicker, {
|
|
237
237
|
...datePickerProps,
|
|
238
|
+
disabled,
|
|
238
239
|
value: field.value,
|
|
239
240
|
onChange: /* @__PURE__ */__name(range => {
|
|
240
241
|
field.onChange(range);
|
|
@@ -1023,8 +1024,87 @@ yup.addMethod(yup.string, "password", function ({
|
|
|
1023
1024
|
// src/yup/yup.ts
|
|
1024
1025
|
import * as yup2 from "yup";
|
|
1025
1026
|
|
|
1027
|
+
// src/zod/i18n.ts
|
|
1028
|
+
import { defineMessage as defineMessage2 } from "@ttoss/react-i18n";
|
|
1029
|
+
import * as z from "zod";
|
|
1030
|
+
var customErrorMap = /* @__PURE__ */__name((issue, ctx) => {
|
|
1031
|
+
if (issue.code === z.ZodIssueCode.invalid_type) {
|
|
1032
|
+
if (issue.received === "undefined") {
|
|
1033
|
+
return {
|
|
1034
|
+
message: defineMessage2({
|
|
1035
|
+
defaultMessage: "Field is required",
|
|
1036
|
+
description: "Field is required"
|
|
1037
|
+
})
|
|
1038
|
+
};
|
|
1039
|
+
}
|
|
1040
|
+
return {
|
|
1041
|
+
message: {
|
|
1042
|
+
...defineMessage2({
|
|
1043
|
+
defaultMessage: "Invalid Value for Field of type {expected}",
|
|
1044
|
+
description: "Invalid Value"
|
|
1045
|
+
}),
|
|
1046
|
+
values: {
|
|
1047
|
+
expected: issue.expected
|
|
1048
|
+
}
|
|
1049
|
+
}
|
|
1050
|
+
};
|
|
1051
|
+
}
|
|
1052
|
+
if (issue.code === z.ZodIssueCode.too_small) {
|
|
1053
|
+
if (issue.type === "string") {
|
|
1054
|
+
return {
|
|
1055
|
+
message: {
|
|
1056
|
+
...defineMessage2({
|
|
1057
|
+
defaultMessage: "Field must be at least {min} characters",
|
|
1058
|
+
description: "Min length field"
|
|
1059
|
+
}),
|
|
1060
|
+
values: {
|
|
1061
|
+
min: issue.minimum
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
};
|
|
1065
|
+
}
|
|
1066
|
+
}
|
|
1067
|
+
return {
|
|
1068
|
+
message: ctx.defaultError
|
|
1069
|
+
};
|
|
1070
|
+
}, "customErrorMap");
|
|
1071
|
+
z.setErrorMap(customErrorMap);
|
|
1072
|
+
|
|
1073
|
+
// src/zod/schema.ts
|
|
1074
|
+
import * as z2 from "zod";
|
|
1075
|
+
var cnpjRefinement = /* @__PURE__ */__name(val => {
|
|
1076
|
+
return isCnpjValid(val);
|
|
1077
|
+
}, "cnpjRefinement");
|
|
1078
|
+
var cpfRefinement = /* @__PURE__ */__name(val => {
|
|
1079
|
+
return isCpfValid(val);
|
|
1080
|
+
}, "cpfRefinement");
|
|
1081
|
+
z2.ZodString.prototype.cnpj = function (message = "Invalid CNPJ") {
|
|
1082
|
+
return this.refine(cnpjRefinement, {
|
|
1083
|
+
message
|
|
1084
|
+
});
|
|
1085
|
+
};
|
|
1086
|
+
z2.ZodString.prototype.cpf = function (message = "Invalid CPF") {
|
|
1087
|
+
return this.refine(cpfRefinement, {
|
|
1088
|
+
message
|
|
1089
|
+
});
|
|
1090
|
+
};
|
|
1091
|
+
z2.ZodEffects.prototype.cnpj = function (message = "Invalid CNPJ") {
|
|
1092
|
+
return this.refine(cnpjRefinement, {
|
|
1093
|
+
message
|
|
1094
|
+
});
|
|
1095
|
+
};
|
|
1096
|
+
z2.ZodEffects.prototype.cpf = function (message = "Invalid CPF") {
|
|
1097
|
+
return this.refine(cpfRefinement, {
|
|
1098
|
+
message
|
|
1099
|
+
});
|
|
1100
|
+
};
|
|
1101
|
+
|
|
1102
|
+
// src/zod/zod.ts
|
|
1103
|
+
import * as z3 from "zod";
|
|
1104
|
+
|
|
1026
1105
|
// src/index.ts
|
|
1027
1106
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
1107
|
+
import { zodResolver } from "@hookform/resolvers/zod";
|
|
1028
1108
|
import { Controller, FormProvider as FormProvider2, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
|
|
1029
1109
|
export * from "react-hook-form";
|
|
1030
|
-
export { Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
|
|
1110
|
+
export { Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, yup2 as yup, z3 as z, yupResolver, zodResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-
|
|
2
|
+
import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver } from "./chunk-6UQV3E5X.js";
|
|
3
3
|
import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-BL55OAIO.js";
|
|
4
|
-
export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };
|
|
4
|
+
export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver };
|
package/dist/index.d.ts
CHANGED
|
@@ -8,10 +8,13 @@ import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFie
|
|
|
8
8
|
export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-kaO0pl1R.js';
|
|
9
9
|
import { NumericFormatProps } from 'react-number-format';
|
|
10
10
|
import { DateRange } from '@ttoss/components/DatePicker';
|
|
11
|
-
import './typings.d-
|
|
11
|
+
import './typings.d-BzNUo1mD.js';
|
|
12
12
|
import * as yup from 'yup';
|
|
13
13
|
export { yup };
|
|
14
|
+
import * as z from 'zod';
|
|
15
|
+
export { z };
|
|
14
16
|
export { yupResolver } from '@hookform/resolvers/yup';
|
|
17
|
+
export { zodResolver } from '@hookform/resolvers/zod';
|
|
15
18
|
|
|
16
19
|
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, onSubmit, sx, ...formMethods }: {
|
|
17
20
|
children?: React.ReactNode;
|
|
@@ -47,7 +50,7 @@ interface DateRangePreset {
|
|
|
47
50
|
type FormFieldDatePickerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & {
|
|
48
51
|
presets?: DateRangePreset[];
|
|
49
52
|
};
|
|
50
|
-
declare const FormFieldDatePicker: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
|
|
53
|
+
declare const FormFieldDatePicker: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: FormFieldDatePickerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
|
|
51
54
|
|
|
52
55
|
type FormFieldInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<InputProps, 'name'>;
|
|
53
56
|
declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ defaultValue, disabled, ...props }: FormFieldInputProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Maybe, AnyObject, Flags, Schema } from 'yup';
|
|
2
|
+
import { z } from 'zod';
|
|
3
|
+
|
|
4
|
+
declare module 'yup' {
|
|
5
|
+
interface StringSchema<
|
|
6
|
+
TType extends Maybe<string> = string | undefined,
|
|
7
|
+
TContext extends AnyObject = AnyObject,
|
|
8
|
+
TDefault = undefined,
|
|
9
|
+
TFlags extends Flags = '',
|
|
10
|
+
> extends Schema<TType, TContext, TDefault, TFlags> {
|
|
11
|
+
cnpj(): this;
|
|
12
|
+
cpf(): this;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
declare module 'zod' {
|
|
17
|
+
interface ZodString {
|
|
18
|
+
cnpj(message?: string): z.ZodEffects<this, string, string>;
|
|
19
|
+
cpf(message?: string): z.ZodEffects<this, string, string>;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
interface ZodEffects<
|
|
23
|
+
T extends z.ZodTypeAny,
|
|
24
|
+
Output = T['_output'],
|
|
25
|
+
Input = T['_input'],
|
|
26
|
+
> {
|
|
27
|
+
cnpj(message?: string): z.ZodEffects<this, Output, Input>;
|
|
28
|
+
cpf(message?: string): z.ZodEffects<this, Output, Input>;
|
|
29
|
+
}
|
|
30
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/forms",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.41.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "ttoss",
|
|
6
6
|
"contributors": [
|
|
@@ -33,31 +33,32 @@
|
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@hookform/error-message": "^2.0.1",
|
|
35
35
|
"@hookform/resolvers": "^5.2.2",
|
|
36
|
-
"react-hook-form": "^7.
|
|
36
|
+
"react-hook-form": "^7.71.1",
|
|
37
37
|
"react-number-format": "^5.4.4",
|
|
38
|
-
"yup": "^1.7.1"
|
|
38
|
+
"yup": "^1.7.1",
|
|
39
|
+
"zod": "^3.25.0"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
|
41
42
|
"react": ">=16.8.0",
|
|
42
|
-
"@ttoss/components": "^2.
|
|
43
|
-
"@ttoss/ui": "^6.
|
|
44
|
-
"@ttoss/react-i18n": "^2.0
|
|
43
|
+
"@ttoss/components": "^2.13.1",
|
|
44
|
+
"@ttoss/ui": "^6.7.0",
|
|
45
|
+
"@ttoss/react-i18n": "^2.1.0"
|
|
45
46
|
},
|
|
46
47
|
"devDependencies": {
|
|
47
48
|
"@types/jest": "^30.0.0",
|
|
48
|
-
"@types/react": "^19.2.
|
|
49
|
+
"@types/react": "^19.2.14",
|
|
49
50
|
"jest": "^30.2.0",
|
|
50
|
-
"react": "^19.2.
|
|
51
|
-
"react-error-boundary": "^6.
|
|
51
|
+
"react": "^19.2.4",
|
|
52
|
+
"react-error-boundary": "^6.1.0",
|
|
52
53
|
"tsup": "^8.5.1",
|
|
53
54
|
"yup": "^1.7.1",
|
|
54
|
-
"@ttoss/
|
|
55
|
-
"@ttoss/
|
|
56
|
-
"@ttoss/
|
|
57
|
-
"@ttoss/
|
|
58
|
-
"@ttoss/
|
|
59
|
-
"@ttoss/
|
|
60
|
-
"@ttoss/
|
|
55
|
+
"@ttoss/config": "^1.36.0",
|
|
56
|
+
"@ttoss/i18n-cli": "^0.7.39",
|
|
57
|
+
"@ttoss/components": "^2.13.1",
|
|
58
|
+
"@ttoss/react-icons": "^0.6.0",
|
|
59
|
+
"@ttoss/react-i18n": "^2.1.0",
|
|
60
|
+
"@ttoss/test-utils": "^4.1.0",
|
|
61
|
+
"@ttoss/ui": "^6.7.0"
|
|
61
62
|
},
|
|
62
63
|
"publishConfig": {
|
|
63
64
|
"access": "public",
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Maybe, AnyObject, Flags, Schema } from 'yup';
|
|
2
|
-
|
|
3
|
-
declare module 'yup' {
|
|
4
|
-
interface StringSchema<
|
|
5
|
-
TType extends Maybe<string> = string | undefined,
|
|
6
|
-
TContext extends AnyObject = AnyObject,
|
|
7
|
-
TDefault = undefined,
|
|
8
|
-
TFlags extends Flags = '',
|
|
9
|
-
> extends Schema<TType, TContext, TDefault, TFlags> {
|
|
10
|
-
cnpj(): this;
|
|
11
|
-
cpf(): this;
|
|
12
|
-
}
|
|
13
|
-
}
|