Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@svelteui/core] form management #428

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

khalibloo
Copy link
Contributor

@khalibloo khalibloo commented Jul 20, 2023

Description

Ported mantine form into svelte. The useForm hook was converted into a svelte Form component to maintain reactivity.

Closes #369

Features

  • form state management (initial values, onchange, submit, reset)
  • form validation
  • nested values (ex: name="user.name")
  • list values (ex: name="pokemon.0.name")
  • FormProvider
  • typescript types based on user provided form values
  • convert tests to vitest
  • pass form in context so that fields don't need a form prop

Before submitting the PR, please make sure you do the following

  • Read the Contributing guide
  • Prefix your PR title with [@svelteui/core], [@svelteui/actions], [@svelteui/motion], [@svelteui/core], [core], or [docs].
  • Include a description of the changes made in the PR description and in the commit messages.
  • Include screenshots/videos of the changes made.
  • Verify that the linter and tests are passing, with yarn lint and yarn test or just run yarn prepush.

@BeeMargarida
Copy link
Member

Hey, thank you for this! I'll take some time to check it out, but thank you for taking this initiative!

@BeeMargarida BeeMargarida added enhancement New feature or request component New or changes to components labels Jul 23, 2023
@notramo
Copy link

notramo commented Jul 23, 2023

@khalibloo, I will take some time to dig through it, but here are some quick questions:

  • How is i18n solved for validation messages?
  • What validation library is used? Can I use Zod, or other TypeScript validation libraries?
  • If it's a flexible solution, how much copy-paste boilerplate is needed?
  • How can it handle multi-step forms? Do the inputs have to be in the DOM all the time and hidden with CSS, or is it OK if an {#if} statement removes them from the DOM, based on the current step?

@khalibloo
Copy link
Contributor Author

khalibloo commented Jul 23, 2023

@khalibloo, I will take some time to dig through it, but here are some quick questions:

* How is i18n solved for validation messages?

* What validation library is used? Can I use Zod, or other TypeScript validation libraries?

* If it's a flexible solution, how much copy-paste boilerplate is needed?

* How can it handle multi-step forms? Do the inputs have to be in the DOM all the time and hidden with CSS, or is it OK if an `{#if}` statement removes them from the DOM, based on the current step?

Great to have another pair of eyes on it. It mostly mimic's mantine's useForm. Do take a look at this file to get an idea of its usage https://github.com/svelteuidev/svelteui/pull/428/files#diff-a0f3dafbe6885a5e04e3be1825d4ccc960adbeceb5933503b58142a31e1ba7b7

  1. the user provides the validation strings. the messages will have to be localized by the user.
  2. there are a few built-in validators for common use cases (ex: isEmail, isNotEmpty, matchesField), but it also includes adapters for joi, zod, superstruct, and yup.
  3. there is just a Form component that takes initial values, validation schema, etc. and a Field component that wraps around individual fields in the form. There are 2 aspects I'm not fond of. First is that the Field requires a prop to obtain the form instance. It would be best if this was done through context, but I can't quite get that to work yet. Secondly, the Form is not able to infer the typescript type of the data within it.
  4. I have not tested multi-step forms yet, and I'm not sure that mantine even supports that. For this PR, I just wanted to port over the mantine implementation. If it's not supported in mantine, it'll have to come in as a future enhancement.

Edit:
I tested the 4th item, and it works even when the inputs are removed from the DOM. Both in mantine form and in this implementation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component New or changes to components enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request] Form component
3 participants