Forms: Back to the Basics

[gregrickaby]

As we discussed earlier today, our current form implementation is the very definition of "over-engineered". I would like to rip it all out and start over.

• Study up on Formik, we will continue to use it
• Continue to use Yup for form-level validation
• Remove the levels of abstraction, and use what Formik give us for free
• Bring comment functionality built on another internal project back to the Next.js Starter
• If necessary, discuss and build a plan around how we might create atomic-based inputs fields
• Once we have a grasp on Formik and comments, let's move onto more complex items like Markdown based comment fields and Gravity Forms

We'll meet on Thursday to discuss next steps.

[gregrickaby]

@itsamoreh @ravewebdev From on our conversation yesterday afternoon, we want to abstract a single component (text-based inputs) to use in <Formik>. This will allow use to have control over the markup and styles, while still keeping the form implementation sane.

Here are next steps:

<Input> component:

• Create a single text-based "input" component (text, email, url, textarea)
• Must accept all props from <Formik>
• Add simple styles (that can be overridden at the form level)
• Add field validation
• Add error handling
• Add field sanitization
• Fields must be accessible
• Must have a Storybook story

Form

• Use <Formik> to deal with form state
• Use new text-based <Input> component, pass props down
• Use Formik's built in <select>
• Use Yup for Form level validation (e.g., setting required fields)
• Add basic form styles
• Form data must be sanitized
• Form must be accessible
• Must have a Storybook story

Once these two items are in place, we will proceed to updating the comment form, then Gravity Forms. Rebekah is sharing some code with Amor so he can get started.