Skip to content

Commit 5fdc7f9

Browse files
jorisrejorisre
authored
feat: update to react-hook-form v7
BREAKING CHANGE: Require react-hook-form >= 7
1 parent e76743d commit 5fdc7f9

File tree

23 files changed

+183
-79
lines changed

23 files changed

+183
-79
lines changed

‎joi/src/__tests__/Form.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,20 @@ interface Props {
2020
}
2121

2222
function TestComponent({ onSubmit }: Props) {
23-
const { register, errors, handleSubmit } = useForm<FormData>({
23+
const {
24+
register,
25+
formState: { errors },
26+
handleSubmit,
27+
} = useForm<FormData>({
2428
resolver: joiResolver(schema), // Useful to check TypeScript regressions
2529
});
2630

2731
return (
2832
<form onSubmit={handleSubmit(onSubmit)}>
29-
<input name="username" ref={register} />
33+
<input {...register('username')} />
3034
{errors.username && <span role="alert">{errors.username.message}</span>}
3135

32-
<input name="password" ref={register} />
36+
<input {...register('password')} />
3337
{errors.password && <span role="alert">{errors.password.message}</span>}
3438

3539
<button type="submit">submit</button>

‎joi/src/__tests__/joi.ts‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('joiResolver', () => {
4141
const validateAsyncSpy = jest.spyOn(schema, 'validateAsync');
4242
const validateSpy = jest.spyOn(schema, 'validate');
4343

44-
const result = await joiResolver(schema)(data);
44+
const result = await joiResolver(schema)(data, undefined, { fields: {} });
4545

4646
expect(validateSpy).not.toHaveBeenCalled();
4747
expect(validateAsyncSpy).toHaveBeenCalledTimes(1);
@@ -62,7 +62,11 @@ describe('joiResolver', () => {
6262
const validateAsyncSpy = jest.spyOn(schema, 'validateAsync');
6363
const validateSpy = jest.spyOn(schema, 'validate');
6464

65-
const result = await joiResolver(schema, undefined, { mode: 'sync' })(data);
65+
const result = await joiResolver(schema, undefined, { mode: 'sync' })(
66+
data,
67+
undefined,
68+
{ fields: {} },
69+
);
6670

6771
expect(validateAsyncSpy).not.toHaveBeenCalled();
6872
expect(validateSpy).toHaveBeenCalledTimes(1);
@@ -76,7 +80,7 @@ describe('joiResolver', () => {
7680
birthYear: 'birthYear',
7781
};
7882

79-
const result = await joiResolver(schema)(data);
83+
const result = await joiResolver(schema)(data, undefined, { fields: {} });
8084

8185
expect(result).toMatchSnapshot();
8286
});
@@ -91,7 +95,11 @@ describe('joiResolver', () => {
9195
const validateAsyncSpy = jest.spyOn(schema, 'validateAsync');
9296
const validateSpy = jest.spyOn(schema, 'validate');
9397

94-
const result = await joiResolver(schema, undefined, { mode: 'sync' })(data);
98+
const result = await joiResolver(schema, undefined, { mode: 'sync' })(
99+
data,
100+
undefined,
101+
{ fields: {} },
102+
);
95103

96104
expect(validateAsyncSpy).not.toHaveBeenCalled();
97105
expect(validateSpy).toHaveBeenCalledTimes(1);
@@ -105,7 +113,10 @@ describe('joiResolver', () => {
105113
birthYear: 'birthYear',
106114
};
107115

108-
const result = await joiResolver(schema)(data, undefined, true);
116+
const result = await joiResolver(schema)(data, undefined, {
117+
fields: {},
118+
criteriaMode: 'all',
119+
});
109120

110121
expect(result).toMatchSnapshot();
111122
});
@@ -120,7 +131,10 @@ describe('joiResolver', () => {
120131
const result = await joiResolver(schema, undefined, { mode: 'sync' })(
121132
data,
122133
undefined,
123-
true,
134+
{
135+
fields: {},
136+
criteriaMode: 'all',
137+
},
124138
);
125139

126140
expect(result).toMatchSnapshot();

‎joi/src/joi.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const joiResolver: Resolver = (
5050
abortEarly: false,
5151
},
5252
{ mode } = { mode: 'async' },
53-
) => async (values, _, validateAllFieldCriteria = false) => {
53+
) => async (values, _, { criteriaMode }) => {
5454
try {
5555
let result;
5656
if (mode === 'async') {
@@ -73,7 +73,7 @@ export const joiResolver: Resolver = (
7373
return {
7474
values: {},
7575
errors: transformToNestObject(
76-
parseErrorSchema(e, validateAllFieldCriteria),
76+
parseErrorSchema(e, criteriaMode === 'all'),
7777
),
7878
};
7979
}

‎joi/src/types.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
FieldValues,
3+
ResolverOptions,
34
ResolverResult,
45
UnpackNestedValue,
56
} from 'react-hook-form';
@@ -8,9 +9,9 @@ import type { AsyncValidationOptions, Schema } from 'joi';
89
export type Resolver = <T extends Schema>(
910
schema: T,
1011
schemaOptions?: AsyncValidationOptions,
11-
resolverOptions?: { mode: 'async' | 'sync' },
12+
factoryOptions?: { mode: 'async' | 'sync' },
1213
) => <TFieldValues extends FieldValues, TContext>(
1314
values: UnpackNestedValue<TFieldValues>,
14-
context?: TContext,
15-
validateAllFieldCriteria?: boolean,
15+
context: TContext | undefined,
16+
options: ResolverOptions<TFieldValues>,
1617
) => Promise<ResolverResult<TFieldValues>>;

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
"prettier": "^2.2.1",
130130
"react": "^17.0.1",
131131
"react-dom": "^17.0.1",
132-
"react-hook-form": "^6.14.2",
132+
"react-hook-form": "^7.0.0-alpha.0",
133133
"semantic-release": "^17.3.6",
134134
"superstruct": "^0.13.3",
135135
"ts-jest": "^26.4.4",
@@ -139,7 +139,7 @@
139139
"zod": "^1.11.11"
140140
},
141141
"peerDependencies": {
142-
"react-hook-form": ">=6.6.0"
142+
"react-hook-form": "^7.0.0"
143143
},
144144
"husky": {
145145
"hooks": {

‎superstruct/src/__tests__/Form.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,20 @@ interface Props {
1717
}
1818

1919
function TestComponent({ onSubmit }: Props) {
20-
const { register, errors, handleSubmit } = useForm<FormData>({
20+
const {
21+
register,
22+
formState: { errors },
23+
handleSubmit,
24+
} = useForm<FormData>({
2125
resolver: superstructResolver(schema), // Useful to check TypeScript regressions
2226
});
2327

2428
return (
2529
<form onSubmit={handleSubmit(onSubmit)}>
26-
<input name="username" ref={register} />
30+
<input {...register('username')} />
2731
{errors.username && <span role="alert">{errors.username.message}</span>}
2832

29-
<input name="password" ref={register} />
33+
<input {...register('password')} />
3034
{errors.password && <span role="alert">{errors.password.message}</span>}
3135

3236
<button type="submit">submit</button>

‎superstruct/src/__tests__/superstruct.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ describe('superstructResolver', () => {
4141
enabled: true,
4242
};
4343

44-
const result = await superstructResolver(schema)(data);
44+
const result = await superstructResolver(schema)(data, undefined, {
45+
fields: {},
46+
});
4547

4648
expect(result).toEqual({ errors: {}, values: data });
4749
});
@@ -53,7 +55,9 @@ describe('superstructResolver', () => {
5355
birthYear: 'birthYear',
5456
};
5557

56-
const result = await superstructResolver(schema)(data);
58+
const result = await superstructResolver(schema)(data, undefined, {
59+
fields: {},
60+
});
5761

5862
expect(result).toMatchSnapshot();
5963
});
@@ -65,7 +69,10 @@ describe('superstructResolver', () => {
6569
birthYear: 'birthYear',
6670
};
6771

68-
const result = await superstructResolver(schema)(data, undefined, true);
72+
const result = await superstructResolver(schema)(data, undefined, {
73+
fields: {},
74+
criteriaMode: 'all',
75+
});
6976

7077
expect(result).toMatchSnapshot();
7178
});

‎superstruct/src/superstruct.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,15 @@ const parseErrorSchema = (
4343
export const superstructResolver: Resolver = (schema, options) => async (
4444
values,
4545
_context,
46-
validateAllFieldCriteria = false,
46+
{ criteriaMode },
4747
) => {
4848
const [errors, result] = validate(values, schema, options);
4949

5050
if (errors != null) {
5151
return {
5252
values: {},
5353
errors: transformToNestObject(
54-
parseErrorSchema(errors, validateAllFieldCriteria),
54+
parseErrorSchema(errors, criteriaMode === 'all'),
5555
),
5656
};
5757
}

‎superstruct/src/types.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
FieldValues,
3+
ResolverOptions,
34
ResolverResult,
45
UnpackNestedValue,
56
} from 'react-hook-form';
@@ -9,9 +10,9 @@ type Options = Parameters<typeof validate>[2];
910

1011
export type Resolver = <T extends Struct<any, any>>(
1112
schema: T,
12-
options?: Options,
13+
factoryOtions?: Options,
1314
) => <TFieldValues extends FieldValues, TContext>(
1415
values: UnpackNestedValue<TFieldValues>,
15-
context?: TContext,
16-
validateAllFieldCriteria?: boolean,
16+
context: TContext | undefined,
17+
options: ResolverOptions<TFieldValues>,
1718
) => Promise<ResolverResult<TFieldValues>>;

‎vest/src/__tests__/Form.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,20 @@ interface Props {
2525
}
2626

2727
function TestComponent({ onSubmit }: Props) {
28-
const { register, errors, handleSubmit } = useForm<FormData>({
28+
const {
29+
register,
30+
formState: { errors },
31+
handleSubmit,
32+
} = useForm<FormData>({
2933
resolver: vestResolver(validationSuite), // Useful to check TypeScript regressions
3034
});
3135

3236
return (
3337
<form onSubmit={handleSubmit(onSubmit)}>
34-
<input name="username" ref={register} />
38+
<input {...register('username')} />
3539
{errors.username && <span role="alert">{errors.username.message}</span>}
3640

37-
<input name="password" ref={register} />
41+
<input {...register('password')} />
3842
{errors.password && <span role="alert">{errors.password.message}</span>}
3943

4044
<button type="submit">submit</button>

0 commit comments

Comments
 (0)