Dynamically generate forms from server data

[jensren]

Multiple organizations will be using our application, and each organization will want to have multiple forms. In the most simple case, an organization might have a volunteer application form and a form to fill out to request for help. A more complicated use case might involve forms for different parties (e.g. educators vs. regular individuals) or forms for different services the organization offers. To support these use cases, our application will dynamically generate forms from data returned by the server rather than having forms hard-coded on the client side.

Current State

• The GraphQL-based backend is still in development so it is not possible to retrieve data from a real server. As a temporary measure, hard-coded example JSON data and schema are returned
• Only the Volunteer Application Form is dynamically generated
• Formik is used to manage form data
• FormikComponent generates the form from a list of FormSections (a custom type)
• Forms are validated by Formik using Yup schemas
• Only text-type fields (e.g. input, email, phone number, number), radio, and checkbox fields can be dynamically generated

In this Epic

• All forms should be generated by passing JSON data into FormikComponent
• GraphQL should be used to load the JSON data from the server
• Forms should support optional pagination
• Form sections should be made optional
• Forms should submit data by saving to local storage, as a temporary implementation until GraphQL submission is set up