added apps

This commit is contained in:
2025-04-10 20:11:36 +03:00
parent 3613f9030e
commit c3b7556e7e
346 changed files with 265054 additions and 159 deletions

18
node_modules/@hookform/resolvers/typanion/package.json generated vendored Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "@hookform/resolvers/typanion",
"amdName": "hookformResolversTypanion",
"version": "1.0.0",
"private": true,
"description": "React Hook Form validation resolver: typanion",
"main": "dist/typanion.js",
"module": "dist/typanion.module.js",
"umd:main": "dist/typanion.umd.js",
"source": "src/index.ts",
"types": "dist/index.d.ts",
"license": "MIT",
"peerDependencies": {
"react-hook-form": "^7.55.0",
"@hookform/resolvers": "^2.0.0",
"typanion": "^3.3.2"
}
}

View File

@@ -0,0 +1,77 @@
import { render, screen } from '@testing-library/react';
import user from '@testing-library/user-event';
import React from 'react';
import { useForm } from 'react-hook-form';
import * as t from 'typanion';
import { typanionResolver } from '..';
const ERROR_MESSAGE =
'Expected to have a length of at least 1 elements (got 0)';
const schema = t.isObject({
username: t.cascade(t.isString(), [t.hasMinLength(1)]),
password: t.cascade(t.isString(), [t.hasMinLength(1)]),
});
function TestComponent({
onSubmit,
}: { onSubmit: (data: t.InferType<typeof schema>) => void }) {
const { register, handleSubmit } = useForm({
resolver: typanionResolver(schema),
shouldUseNativeValidation: true,
});
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('username')} placeholder="username" />
<input {...register('password')} placeholder="password" />
<button type="submit">submit</button>
</form>
);
}
test("form's native validation with Typanion", async () => {
const handleSubmit = vi.fn();
render(<TestComponent onSubmit={handleSubmit} />);
// username
let usernameField = screen.getByPlaceholderText(
/username/i,
) as HTMLInputElement;
expect(usernameField.validity.valid).toBe(true);
expect(usernameField.validationMessage).toBe('');
// password
let passwordField = screen.getByPlaceholderText(
/password/i,
) as HTMLInputElement;
expect(passwordField.validity.valid).toBe(true);
expect(passwordField.validationMessage).toBe('');
await user.click(screen.getByText(/submit/i));
// username
usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
expect(usernameField.validity.valid).toBe(false);
expect(usernameField.validationMessage).toBe(ERROR_MESSAGE);
// password
passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
expect(passwordField.validity.valid).toBe(false);
expect(passwordField.validationMessage).toBe(ERROR_MESSAGE);
await user.type(screen.getByPlaceholderText(/username/i), 'joe');
await user.type(screen.getByPlaceholderText(/password/i), 'password');
// username
usernameField = screen.getByPlaceholderText(/username/i) as HTMLInputElement;
expect(usernameField.validity.valid).toBe(true);
expect(usernameField.validationMessage).toBe('');
// password
passwordField = screen.getByPlaceholderText(/password/i) as HTMLInputElement;
expect(passwordField.validity.valid).toBe(true);
expect(passwordField.validationMessage).toBe('');
});

View File

@@ -0,0 +1,51 @@
import { render, screen } from '@testing-library/react';
import user from '@testing-library/user-event';
import React from 'react';
import { useForm } from 'react-hook-form';
import * as t from 'typanion';
import { typanionResolver } from '..';
const schema = t.isObject({
username: t.cascade(t.isString(), [t.hasMinLength(1)]),
password: t.cascade(t.isString(), [t.hasMinLength(1)]),
});
function TestComponent({
onSubmit,
}: { onSubmit: (data: t.InferType<typeof schema>) => void }) {
const {
register,
formState: { errors },
handleSubmit,
} = useForm({
resolver: typanionResolver(schema), // Useful to check TypeScript regressions
});
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('username')} />
{errors.username && <span role="alert">{errors.username.message}</span>}
<input {...register('password')} />
{errors.password && <span role="alert">{errors.password.message}</span>}
<button type="submit">submit</button>
</form>
);
}
test("form's validation with Typanion and TypeScript's integration", async () => {
const handleSubmit = vi.fn();
render(<TestComponent onSubmit={handleSubmit} />);
expect(screen.queryAllByRole('alert')).toHaveLength(0);
await user.click(screen.getByText(/submit/i));
expect(
screen.getAllByText(
'Expected to have a length of at least 1 elements (got 0)',
),
).toHaveLength(2);
expect(handleSubmit).not.toHaveBeenCalled();
});

View File

@@ -0,0 +1,82 @@
import { Field, InternalFieldName } from 'react-hook-form';
import * as t from 'typanion';
export const schema = t.isObject({
username: t.cascade(t.isString(), [
t.matchesRegExp(/^\w+$/),
t.hasMinLength(2),
t.hasMaxLength(30),
]),
password: t.cascade(t.isString(), [
t.matchesRegExp(new RegExp('.*[A-Z].*')), // one uppercase character
t.matchesRegExp(new RegExp('.*[a-z].*')), // one lowercase character
t.matchesRegExp(new RegExp('.*\\d.*')), // one number
t.matchesRegExp(
new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
), // one special character
t.hasMinLength(8), // Must be at least 8 characters in length
]),
repeatPassword: t.cascade(t.isString(), [
t.matchesRegExp(new RegExp('.*[A-Z].*')), // one uppercase character
t.matchesRegExp(new RegExp('.*[a-z].*')), // one lowercase character
t.matchesRegExp(new RegExp('.*\\d.*')), // one number
t.matchesRegExp(
new RegExp('.*[`~<>?,./!@#$%^&*()\\-_+="\'|{}\\[\\];:\\\\].*'),
), // one special character
t.hasMinLength(8), // Must be at least 8 characters in length
]),
accessToken: t.isString(),
birthYear: t.cascade(t.isNumber(), [
t.isInteger(),
t.isInInclusiveRange(1900, 2013),
]),
email: t.cascade(t.isString(), [t.matchesRegExp(/^\S+@\S+$/)]),
tags: t.isArray(t.isString()),
enabled: t.isBoolean(),
like: t.isObject({
id: t.cascade(t.isNumber(), [t.isInteger(), t.isPositive()]),
name: t.cascade(t.isString(), [t.hasMinLength(4)]),
}),
});
export const validData = {
username: 'Doe',
password: 'Password123_',
repeatPassword: 'Password123_',
birthYear: 2000,
email: 'john@doe.com',
tags: ['tag1', 'tag2'],
enabled: true,
accessToken: 'accessToken',
like: {
id: 1,
name: 'name',
},
};
export const invalidData = {
password: '___',
email: '',
birthYear: 'birthYear',
like: { id: 'z' },
tags: [1, 2, 3],
} as any as t.InferType<typeof schema>;
export const fields: Record<InternalFieldName, Field['_f']> = {
username: {
ref: { name: 'username' },
name: 'username',
},
password: {
ref: { name: 'password' },
name: 'password',
},
email: {
ref: { name: 'email' },
name: 'email',
},
birthday: {
ref: { name: 'birthday' },
name: 'birthday',
},
};

View File

@@ -0,0 +1,67 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`typanionResolver > should return a single error from typanionResolver when validation fails 1`] = `
{
"errors": {
"accessToken": {
"message": "Expected a string (got undefined)",
"ref": undefined,
},
"birthYear": {
"message": "Expected a number (got "birthYear")",
"ref": undefined,
},
"email": {
"message": "Expected to match the pattern /^\\S+@\\S+$/ (got an empty string)",
"ref": {
"name": "email",
},
},
"enabled": {
"message": "Expected a boolean (got undefined)",
"ref": undefined,
},
"like": {
"id": {
"message": "Expected a number (got "z")",
"ref": undefined,
},
"name": {
"message": "Expected a string (got undefined)",
"ref": undefined,
},
},
"password": {
"message": "Expected to match the pattern /.*[A-Z].*/ (got "___")",
"ref": {
"name": "password",
},
},
"repeatPassword": {
"message": "Expected a string (got undefined)",
"ref": undefined,
},
"tags": [
{
"message": "Expected a string (got 1)",
"ref": undefined,
},
{
"message": "Expected a string (got 2)",
"ref": undefined,
},
{
"message": "Expected a string (got 3)",
"ref": undefined,
},
],
"username": {
"message": "Expected a string (got undefined)",
"ref": {
"name": "username",
},
},
},
"values": {},
}
`;

View File

@@ -0,0 +1,84 @@
import { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { Resolver } from 'react-hook-form';
import * as t from 'typanion';
import { typanionResolver } from '..';
import { fields, invalidData, schema, validData } from './__fixtures__/data';
const tmpObj = {
validate: schema,
};
const shouldUseNativeValidation = false;
describe('typanionResolver', () => {
it('should return values from typanionResolver when validation pass', async () => {
const schemaSpy = vi.spyOn(tmpObj, 'validate');
const result = await typanionResolver(schemaSpy as any)(
validData,
undefined,
{
fields,
shouldUseNativeValidation,
},
);
expect(schemaSpy).toHaveBeenCalledTimes(1);
expect(result).toEqual({ errors: {}, values: validData });
});
it('should return a single error from typanionResolver when validation fails', async () => {
const result = await typanionResolver(schema)(invalidData, undefined, {
fields,
shouldUseNativeValidation,
});
expect(result).toMatchSnapshot();
});
/**
* Type inference tests
*/
it('should correctly infer the output type from a typanion schema', () => {
const resolver = typanionResolver(t.isObject({ id: t.isNumber() }));
expectTypeOf(resolver).toEqualTypeOf<
Resolver<ObjectType<{ id: number }>, unknown, ObjectType<{ id: number }>>
>();
});
it('should correctly infer the output type from a typanion schema for the handleSubmit function in useForm', () => {
const schema = t.isObject({ id: t.isNumber() });
const form = useForm({
resolver: typanionResolver(schema),
});
expectTypeOf(form.watch('id')).toEqualTypeOf<number>();
expectTypeOf(form.handleSubmit)
.parameter(0)
.toEqualTypeOf<SubmitHandler<ObjectType<{ id: number }>>>();
});
});
/**
* Copied from Typanion source code because it's not exported
*/
declare type ExtractIndex<T> = {
// biome-ignore lint/complexity/noBannedTypes: for testing purposes
[K in keyof T as {} extends Record<K, 1> ? K : never]: T[K];
};
declare type RemoveIndex<T> = {
// biome-ignore lint/complexity/noBannedTypes: for testing purposes
[K in keyof T as {} extends Record<K, 1> ? never : K]: T[K];
};
declare type UndefinedProperties<T> = {
[P in keyof T]-?: undefined extends T[P] ? P : never;
}[keyof T];
declare type UndefinedToOptional<T> = Partial<Pick<T, UndefinedProperties<T>>> &
Pick<T, Exclude<keyof T, UndefinedProperties<T>>>;
declare type ObjectType<T> = UndefinedToOptional<RemoveIndex<T>> &
ExtractIndex<T>;

View File

@@ -0,0 +1 @@
export * from './typanion';

View File

@@ -0,0 +1,85 @@
import { toNestErrors, validateFieldsNatively } from '@hookform/resolvers';
import type {
FieldError,
FieldErrors,
FieldValues,
Resolver,
} from 'react-hook-form';
import * as t from 'typanion';
function parseErrors(errors: string[], parsedErrors: FieldErrors = {}) {
return errors.reduce((acc, error) => {
const fieldIndex = error.indexOf(':');
const field = error.slice(1, fieldIndex);
const message = error.slice(fieldIndex + 1).trim();
acc[field] = {
message,
} as FieldError;
return acc;
}, parsedErrors);
}
export function typanionResolver<Input extends FieldValues, Context, Output>(
schema: t.StrictValidator<Input, Input>,
schemaOptions?: Pick<t.ValidationState, 'coercions' | 'coercion'>,
resolverOptions?: {
mode?: 'async' | 'sync';
raw?: false;
},
): Resolver<Input, Context, t.InferType<typeof schema>>;
export function typanionResolver<Input extends FieldValues, Context, Output>(
schema: t.StrictValidator<Input, Input>,
schemaOptions: Pick<t.ValidationState, 'coercions' | 'coercion'> | undefined,
resolverOptions: {
mode?: 'async' | 'sync';
raw: true;
},
): Resolver<Input, Context, Input>;
/**
* Creates a resolver for react-hook-form using Typanion schema validation
* @param {t.StrictValidator<TFieldValues, TFieldValues>} schema - The Typanion schema to validate against
* @param {Pick<t.ValidationState, 'coercions' | 'coercion'>} [schemaOptions] - Optional Typanion validation options
* @returns {Resolver<t.InferType<typeof schema>>} A resolver function compatible with react-hook-form
* @example
* const schema = t.isObject({
* name: t.isString(),
* age: t.isInteger()
* });
*
* useForm({
* resolver: typanionResolver(schema)
* });
*/
export function typanionResolver<Input extends FieldValues, Context, Output>(
schema: t.StrictValidator<Input, Input>,
schemaOptions: Pick<t.ValidationState, 'coercions' | 'coercion'> = {},
): Resolver<Input, Context, Output | Input> {
return (values: Input, _, options) => {
const rawErrors: string[] = [];
const isValid = schema(
values,
Object.assign(
{},
{
errors: rawErrors,
},
schemaOptions,
),
);
const parsedErrors = parseErrors(rawErrors);
if (isValid) {
options.shouldUseNativeValidation &&
validateFieldsNatively(parsedErrors, options);
return { values, errors: {} };
}
return { values: {}, errors: toNestErrors(parsedErrors, options) };
};
}