feat: upgrade and migrate Valibot to v0.31.0 (#688)

* Upgrade and migrate Valibot to v0.31.0

* Upgrade Valibot and refactor resolver with new util

README.md

@@ -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 = () => {
@@ -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';

package.json

@@ -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",

valibot/package.json

@@ -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"
  }
 }

valibot/src/__tests__/Form-native-validation.tsx

@@ -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 };
 

valibot/src/__tests__/Form.tsx

@@ -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 };
 

valibot/src/__tests__/__fixtures__/data.ts

@@ -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' };