Wildcard: `Form` implementation

[umpox]

Context

We have a variety of usage of <form> in the Sourcegraph codebase:

• import { Form } from '@sourcegraph/branded/src/components/Form
• import { Form } from 'reactstrap
• Native <form> HTML element

We should align these to use a new Wildcard <Form> element.

Implementation

TODO Update with details after further investigation.

This was originally discussed as part of Wildcard V2, but we didn't have time/capacity to work on this.

We should ensure that all our forms support:

• Validation at both the Form level AND the individual field level. Plus any UI states that need to be displayed.
• Submission error and success handling at both the Form level AND the individual field level. Plus any UI states that need to be displayed
• All required use cases that mean we can rely on <Form> to support all Sourcegraph forms irrespective of how complex they might be.

Note:

• Forms can become very complex, very quickly. Often it is recommended to use established libraries such as React Final Form. We should consider this before starting implementation.

[umpox]

Comment from @vovakulikov: https://github.com/sourcegraph/sourcegraph/pull/31977#issuecomment-1055343564

About form field base component. I'm not sure it still has a root wrapper because this component provides more than just a native input/textarea/checkbox. I think this could be more flexible if we split this UI into two components

<Field.Root isValid="true" ariaLabel=""> 
  <Field.Input type="" />
  or 
  <Field.FlextTextArea />
  or 
  <Field.Checkbox />
</Label>

These components still have our styles and UI guidance (in case if Field.Root got isValid false we could share it info through React Context with Field.Input and set a right CSS class to enforce validation styles over input element) but it allows to you more control over styles of label (root element) and input component itself (input, textarea, checkbox ...)