feat: migrate form to tanstack & zod

[Sebastien-Ahkrin]

[cloudflare-workers-and-pages[bot]]

Deploying nmrium with    Cloudflare Pages

Latest commit:	da0df6b
Status:	✅  Deploy successful!
Preview URL:	https://9e7a7db6.nmrium.pages.dev
Branch Preview URL:	https://3809-start-using-tanstack-fo.nmrium.pages.dev

View logs

[Sebastien-Ahkrin]

The form now look like that with react-science components :

[targos]

Validation should not accept an empty string.

[stropitek]

Layout is not ok, please make sure it looks as nice as before.

[Sebastien-Ahkrin]

Do you want it to looks like this ?

[stropitek]

Do you want it to looks like this ?

Not strictly. But the previous layout had a fixed width which made much more sense.

Regarding button color, I don't know on what ground you changed the button color. Ok if it is for consistency reasons, but otherwise keep the original green color.

[targos]

@Sebastien-Ahkrin It seems you forgot this PR.

[Sebastien-Ahkrin]

Is this looking better ? @stropitek

[Sebastien-Ahkrin]

If we want the label text to not be centered, we have to change the react-science components

[targos]

Why is it centered?

[Sebastien-Ahkrin]

Why is it centered?

NVM its because i use DialogContent, i can change the behavior. its now done

[targos]

DialogContent is centered by default?

[Sebastien-Ahkrin]

DialogContent is centered by default?

yep it looks like that

[targos]

I see that DialogContent is a component defined in this file and only used here. I don't understand why you override the value instead of changing the component directly.

Now I think we should entirely remove this component and just render DialogBody.

[Sebastien-Ahkrin]

Previously, the input element was auto-focused. Now with the refactor it is not anymore.

Probably related to react-science, but I don't think the help message should be red. Only the error message.

Yep, to set the error / text message in other color, i have to change react-science. Same for auto-focus, i should change the behavior in react-science.