Extract form logic for usage in external projects

[colinking]

Here are some very rough (malleable) ideas about how we could make this form generalizable. The ideas are:

• Enable teams to customize the UI look-and-feel without re-investing the form-building logic from scratch
• Preserve as much of the form specification (form.yml) and validation components ("email must be valid, etc.") as possible
• Enable a (long-term) future where we can build form-building tooling on top of form.yml (like a UI for validating translations or for updating copy + structure with an iframe to visualize it).

I imagine we could have a <Form /> component that allows you to override specific components to customize the rendering behavior (to use your own design system, f.e.):

import { CustomEmail } from './components/CustomEmail'

// ...

return (
	// The Form component is mostly a "container" with no
	// UI logic. It just handles setting up contexts / 
	// passing the relevant props to the underlying `Page`
	// component.
	<Form
		// You can override the high-level Page component
		// to change how a specific page is rendered.
		// The PAPUA Page component would render our sidebar, f.e.
		page={Page}
		// The submit page is a special version of the Page
		// component that is rendered when all form pages
		// have finished.
		submit={Submit}
		// This is similar to the mapping we already have.
		// It would allow you to do things like swap out the
		// Grommet TextInput for an Evergreen TextInput.
		questions={{
			email: CustomEmail,
			// ...
		}}
	/>
)

Each custom component could access the same FormContext with the useContext hook that we expose now. The FormContext will continue to handle a) loading + validating the form.yml, b) managing values and errors, and c) data type validation.

Notably, this approach (since it relies on React Contexts) would require teams to use React.