Документация

Эта библиотека предназначена для фронтенд команды Funicular.

Какие проблемы решает эта библиотека:

На фронтенде и бекенде часто нужна одинаковая валидация, одинаковые типы, какие-то одинаковые данные. Чтобы не заниматься их согласованием, не передавать регулярки через личку, нужен какой-то первоисточник, где всё это будет лежать. Этим местом как раз и является эта библиотека.

Кейсы использования:

• мы решили поменять максимальный размер фотографии, который принимаем с фронта. Для этого бекенд меняет цифру в этой библиотеке, фронтенд обновляет библиотеку, и всё.
• мы решили запретить использовать символ «?» в username. Для этого обновляем регулярку в библиотеке, и после этого этот запрет будет распространяться и на валидацию форм.

Пример использования библиотеки с react-hook-form:

Установите необходимые зависимости:

pnpm i funicular-team zod @hookform/resolvers/zod

Импортируйте из библиотеки нужную схему:

import { schemesAuth } from 'funicular-team';
const zodSchema = schemesAuth.user.create.pick({ email: true, password: true });

Добавьте её в форму одной строчкой кода:

resolver: zodResolver(zodSchema),

Весь код:

import { zodResolver } from "@hookform/resolvers/zod";
import { schemesAuth } from "funicular-team";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { FormButton } from "../../1_ui/formButton";
import { FormInput } from "../../1_ui/formInput";
import { AuthService } from "../../services/auth.service";

const zodSchema = schemesAuth.user.create.pick({ email: true, password: true })

export const FormExamplePage = () => {
    const {
        register,
        handleSubmit,
        formState: { errors, isValid },
    } = useForm({
        mode: "onBlur",
        resolver: zodResolver(zodSchema),
    })

    const navigate = useNavigate()

    const handleLogIn = async (values: { email: string, password: string }) => {
        await AuthService.login({ loginOrEmail: values.email, password: values.password })
            .catch(error => console.log(`error`, error))
        navigate('/home', { replace: false })
    }

    return (
        <div className={'flex flex-col mx-auto my-9 w-96 border-2 p-7 m-5 rounded-3xl '}>
            <form onSubmit={handleSubmit(handleLogIn)}>

                <FormInput
                    errors={errors} register={register}
                    label={'Почта'} keyName={'email'}
                />

                <FormInput
                    errors={errors} register={register} type={'password'}
                    label={'Пароль'} keyName={'password'}
                />

                <FormButton disabled={!isValid} name={'Войти'} />
            </form>
        </div>
    );
}