Form and Validations

[luisrondow]

Description

Here we can discuss which is the best Form implementation in React. We should define the Form lib and how we gonna implement the validations.

In my vision, there are 2 great Form libs:

• Formik
• React Hook Form

And for validations, I think the best alternative is use Yup.

What do you think about that?

[diogomqbm]

I'm all in for React Hook Form! Doesn't RHF handle validation? Or we need a third-party like Yup for it?

[phenrique7]

React Hook Form ftw! I like Formik, but lately, I have liked RHF more because it is somewhat simpler. In addition to that, it claims to be more performant than other form libraries, and yes, that is true. I already worked with Formik v1/v2 and I struggled a lot to solve some performance problems in the forms. I believe that performance issues will be improved in Formik v3. But, for now, RHF is better in that regard.

I don't think it is necessary to bring Yup to the template. Although Yup has better validation compositions/abstractions, it fits better with Formik, as it has integration with it. RHF has simpler, but more manual validation compositions/abstractions, and for some cases, it is enough. I think that at a higher level of scalability/complexity of validations it will be worthwhile to bring Yup together with RHF.

[GuilhermeLLS]

I think we have a consense regarding React Hook Form. Do you guys have any suggestion about how to implement the validations for this form and the form UI itself?

[phenrique7]

I think we have a consense regarding React Hook Form. Do you guys have any suggestion about how to implement the validations for this form and the form UI itself?

If the documentation is not enough for you, maybe some form implementations with validation in the Apolo project can be useful (be aware that we are using RHF v6, so far).

Note: RHF v7 was released recently.

[GuilhermeLLS]

I've used v7 this weekend on a personal project, it seems pretty good overall, although i've never used v6 and below. @phenrique7

I'm thinking about self-assigning this issue. Does anyone else want to be a part of the development proccess?

@diogomqbm @leonardomolinan @AgmarTorres @marianaks @frostbig @luisrondow

[phenrique7]

@GuilhermeLLS, what do you have in mind to be added to the template for this part of forms?

[GuilhermeLLS]

@phenrique7
Me and @diogomqbm thought about inserting a job application form in the template. It would be something like an "EasterEgg", we were inspired by Discord and Medium. (When you open the Dev Console on those sites or desktop applications, there is a link to the careers page).

However, as we are using Gupy for recruitment, we dismiss this idea. Now, I have nothing in mind, neither validations nor the UI itself. Perhaps we could create some validations for the most used cases, such as phone number, CEP, CPF. Or since the form input fields are something specific to each project, we can simply install RHF and don't make any other changes at all.

What do you think?

[phenrique7]

@phenrique7 Me and @diogomqbm thought about inserting a job application form in the template. It would be something like an "EasterEgg", we were inspired by Discord and Medium. (When you open the Dev Console on those sites or desktop applications, there is a link to the careers page).

However, as we are using Gupy for recruitment, we dismiss this idea. Now, I have nothing in mind, neither validations nor the UI itself. Perhaps we could create some validations for the most used cases, such as phone number, CEP, CPF. Or since the form input fields are something specific to each project, we can simply install RHF and don't make any other changes at all.

What do you think?

SPA applications generally assume the use of login interfaces, which would include the implementation of forms. As it is a template, I think it is interesting to have a page with a simple login form, with email and password inputs, and with basic initial validations using RHF.

[diogomqbm]

@GuilhermeLLS @phenrique7 I think we should implement every screen regarding system access. In practice, we should implement login, reset password, and register screen. I also think we can implement a profile screen inside the authenticated app.