VulcanForms v2 - random ideas & discussions

[SachaG]

Trying to make an inventory of all the features supported by the current SmartForm component, and think about how to create a better version.

Goals

A new version should ideally accomplish the following goals:

• Better document and define the props required and/or accepted by form components.
• Disconnect form components and form "wrapper" so that they can potentially be each used without the other.
• Make forms work in a no-JS environment (rely on HTML forms and not on internal React state).
• Do more processing (for example, field serialization into a JSON object) server-side when possible.
• Better-defined error management.
• Use hooks and/or context to avoid prop drilling
• Client-side validation (I'm not sure if we do that currently, I don't think so)
• Smarter schema loading (currently in a Vulcan app we assume that every model schema is loaded in its entirety all the time, we should be able to load partial schemas on-demand maybe).
• Fewer component layers, maybe get rid of FormWrapper, FormComponent, and FormComponentInner.

Current Features

FormWrapper

• load document to update (get fragment based on fields, show loader etc.)

SmartForm

• prefilled props
• nested forms support
• field label i18n
• multi-language fields
• update/create forms
• delete document
• automatically figure out mutable fields based on current user
• manually add/remove specific fields in addition to auto fields
• field groups
• error management
• callbacks (pre-submit, post-submit, success, error)
• clear form
• clear specific field
• confirm before route change to prevent data loss

FormLayout

• Show errors at top and/or bottom
• Show submit button

FormGroup

• Show/hide group contents
• Show group heading

FormComponent

• Figure out whether component should update based on prop/state change
• Get value for field
• Get errors for field
• Figure out characters remaining
• Handle nesting/arrays
• Get input component

FormComponentInner

• Insert component before form component
• Show form item
• Show field errors
• Show field clear
• Show chars remaining
• Insert component after form component

FormItem

• Insert component before form item
• Show form item
• Show field errors
• Show field clear
• Show chars remaining
• Insert component after form item
• Handle multiple layouts
• Show label
• Show description

[SachaG]

Useful links:

• https://www.remix-validated-form.io/
• https://remix-forms.seasoned.cc/
• https://react-hook-form.com/