Skip to content

Commit

Permalink
feat: upgrade and migrate Valibot to v0.31.0 (#688)
Browse files Browse the repository at this point in the history
* Upgrade and migrate Valibot to v0.31.0

* Upgrade Valibot and refactor resolver with new util
  • Loading branch information
fabian-hiller authored Jun 6, 2024
1 parent c53864f commit bdd5ef5
Show file tree
Hide file tree
Showing 11 changed files with 218 additions and 235 deletions.
17 changes: 9 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -552,14 +552,15 @@ The modular and type safe schema library for validating structural data
```typescript jsx
import { useForm } from 'react-hook-form';
import { valibotResolver } from '@hookform/resolvers/valibot';
import { object, string, minLength, endsWith } from 'valibot';
import * as v from 'valibot';

const schema = object({
username: string('username is required', [
minLength(3, 'Needs to be at least 3 characters'),
endsWith('cool', 'Needs to end with `cool`'),
]),
password: string('password is required'),
const schema = v.object({
username: v.pipe(
v.string('username is required'),
v.minLength(3, 'Needs to be at least 3 characters'),
v.endsWith('cool', 'Needs to end with `cool`'),
),
password: v.string('password is required'),
});

const App = () => {
Expand All @@ -581,7 +582,7 @@ const App = () => {

A powerful TypeScript framework that provides a fully-fledged functional effect system with a rich standard library.

[![npm](https://img.shields.io/bundlephobia/minzip/valibot?style=for-the-badge)](https://bundlephobia.com/result?p=effect)
[![npm](https://img.shields.io/bundlephobia/minzip/@effect/schema?style=for-the-badge)](https://bundlephobia.com/result?p=effect)

```typescript jsx
import React from 'react';
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@
"superstruct": "^1.0.3",
"typanion": "^3.14.0",
"typescript": "^5.1.6",
"valibot": "^0.24.1",
"valibot": "0.31.0-rc.12",
"vest": "^4.6.11",
"vite": "^4.4.9",
"vite-tsconfig-paths": "^4.2.0",
Expand Down
10 changes: 5 additions & 5 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions valibot/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
"types": "dist/index.d.ts",
"license": "MIT",
"peerDependencies": {
"react-hook-form": "^7.0.0",
"@hookform/resolvers": "^2.0.0",
"valibot": ">=0.8"
"react-hook-form": "^7.0.0",
"valibot": ">=0.31.0 <1"
}
}
28 changes: 14 additions & 14 deletions valibot/src/__tests__/Form-native-validation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ import React from 'react';
import { useForm } from 'react-hook-form';
import { render, screen } from '@testing-library/react';
import user from '@testing-library/user-event';
import { string, required, object, minLength } from 'valibot';
import * as v from 'valibot';
import { valibotResolver } from '..';

const USERNAME_REQUIRED_MESSAGE = 'username field is required';
const PASSWORD_REQUIRED_MESSAGE = 'password field is required';

const schema = required(
object({
username: string(USERNAME_REQUIRED_MESSAGE, [
minLength(2, USERNAME_REQUIRED_MESSAGE),
]),
password: string(PASSWORD_REQUIRED_MESSAGE, [
minLength(2, PASSWORD_REQUIRED_MESSAGE),
]),
}),
);
const USERNAME_REQUIRED_MESSAGE = 'username field is v.required';
const PASSWORD_REQUIRED_MESSAGE = 'password field is v.required';

const schema = v.object({
username: v.pipe(
v.string(USERNAME_REQUIRED_MESSAGE),
v.minLength(2, USERNAME_REQUIRED_MESSAGE),
),
password: v.pipe(
v.string(PASSWORD_REQUIRED_MESSAGE),
v.minLength(2, PASSWORD_REQUIRED_MESSAGE),
),
});

type FormData = { username: string; password: string };

Expand Down
22 changes: 11 additions & 11 deletions valibot/src/__tests__/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import user from '@testing-library/user-event';
import { useForm } from 'react-hook-form';
import { string, required, object, minLength } from 'valibot';
import * as v from 'valibot';
import { valibotResolver } from '..';

const USERNAME_REQUIRED_MESSAGE = 'username field is required';
const PASSWORD_REQUIRED_MESSAGE = 'password field is required';

const schema = required(
object({
username: string(USERNAME_REQUIRED_MESSAGE, [
minLength(2, USERNAME_REQUIRED_MESSAGE),
]),
password: string(PASSWORD_REQUIRED_MESSAGE, [
minLength(2, PASSWORD_REQUIRED_MESSAGE),
]),
}),
);
const schema = v.object({
username: v.pipe(
v.string(USERNAME_REQUIRED_MESSAGE),
v.minLength(2, USERNAME_REQUIRED_MESSAGE),
),
password: v.pipe(
v.string(PASSWORD_REQUIRED_MESSAGE),
v.minLength(2, PASSWORD_REQUIRED_MESSAGE),
),
});

type FormData = { username: string; password: string };

Expand Down
96 changes: 43 additions & 53 deletions valibot/src/__tests__/__fixtures__/data.ts
Original file line number Diff line number Diff line change
@@ -1,62 +1,52 @@
import { Field, InternalFieldName } from 'react-hook-form';
import {
object,
string,
minLength,
maxLength,
regex,
number,
minValue,
maxValue,
email,
array,
boolean,
required,
union,
variant,
literal,
} from 'valibot';
import * as v from 'valibot';

export const schema = required(
object({
username: string([minLength(2), maxLength(30), regex(/^\w+$/)]),
password: string('New Password is required', [
regex(new RegExp('.*[A-Z].*'), 'One uppercase character'),
regex(new RegExp('.*[a-z].*'), 'One lowercase character'),
regex(new RegExp('.*\\d.*'), 'One number'),
regex(
new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
'One special character',
),
minLength(8, 'Must be at least 8 characters in length'),
]),
repeatPassword: string('Repeat Password is required'),
accessToken: union(
[
string('Access token should be a string'),
number('Access token should be a number'),
],
'access token is required',
export const schema = v.object({
username: v.pipe(
v.string(),
v.minLength(2),
v.maxLength(30),
v.regex(/^\w+$/),
),
password: v.pipe(
v.string('New Password is required'),
v.regex(new RegExp('.*[A-Z].*'), 'One uppercase character'),
v.regex(new RegExp('.*[a-z].*'), 'One lowercase character'),
v.regex(new RegExp('.*\\d.*'), 'One number'),
v.regex(
new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
'One special character',
),
birthYear: number('Please enter your birth year', [
minValue(1900),
maxValue(2013),
]),
email: string([email('Invalid email address')]),
tags: array(string('Tags should be strings')),
enabled: boolean(),
like: required(
object({
id: number('Like id is required'),
name: string('Like name is required', [minLength(4, 'Too short')]),
}),
v.minLength(8, 'Must be at least 8 characters in length'),
),
repeatPassword: v.string('Repeat Password is required'),
accessToken: v.union(
[
v.string('Access token should be a string'),
v.number('Access token should be a number'),
],
'access token is required',
),
birthYear: v.pipe(
v.number('Please enter your birth year'),
v.minValue(1900),
v.maxValue(2013),
),
email: v.pipe(v.string(), v.email('Invalid email address')),
tags: v.array(v.string('Tags should be strings')),
enabled: v.boolean(),
like: v.object({
id: v.number('Like id is required'),
name: v.pipe(
v.string('Like name is required'),
v.minLength(4, 'Too short'),
),
}),
);
});

export const schemaError = variant('type', [
object({ type: literal('a') }),
object({ type: literal('b') }),
export const schemaError = v.variant('type', [
v.object({ type: v.literal('a') }),
v.object({ type: v.literal('b') }),
]);

export const validSchemaErrorData = { type: 'a' };
Expand Down
Loading

0 comments on commit bdd5ef5

Please sign in to comment.