Formik Tutorial

outline.md

Formik Tutorial Outline

We're going to build a multi-step wizard for a jobs-to-be-done customer research questionaire from scratch.

Before we start

• Installation
• What we're building
• Getting help

Your first form

• Add name, email inputs
• Submit data to an alert

Basic validation

• Validate name and email
• Error messages and styling

Handling submissions

Radio, Checkboxes, and Select

• Add "When did you purchase this product?" (add 3 selects for a date-picker) (refactor to a real date-picker later)
• Add "Where were you?" (text input)
• Add "What was the weather like? (radio of options) (refactor later to lookup weather based on where and when?)
• Add "Was anyone with you at the time?" (boolean checkbox/switch)
• Add "Did you buy anything at the same time?" (boolean checkbox/switch)

Debugging

• Show off React devtools
• Make a little debugger that logs state

Conditional Logic

• Show/hide text input if "Was anyone with you at the time?" is true. (comma separated text) (refactor later to array)
• Show/hide textarea if "Did you buy anything at the same time" is true. (one item per line)

Parsing, Formatting, and Masking

• Refactor conditional inputs in preview section to store values as arrays
• Refactor "When did you purchase this product?" to be use an input mask for MM/DD/YYYY)

Custom Components

the next section of the "jobs-to-be-done" form is called "Finding the first thought"

• Add "When did you first realize you [needed something to solve your problem]?"
• Add "Where were you?" (text input)
• Add "Were you with someone?" (boolean checkbox/switch)
• Add "What were you doing, or trying to do when this happened?" (textarea)
• Refactor/Abstract the inputs and introducing useField

Re-using our new components

Add the following questions, reusing our inputs.

• Add "Tell me about how you looked for a product to solve your problem."
• Add "What kind of solutions did you try? Or not try? Why or why not?"
• Did you ask anyone else about what they thought about the purchase you were about to make?
• What was the conversation like when you talked about purchasing the product with your <spouse/friend/parents>?
• Before you purchased did you imagine what using the product would be like? Where were you when you were thinking this?
• Did you have any anxiety about the purchase? Did you hear something about the product that made you nervous? What was it? Why did it make you nervous?

Composition: Making things more flexible for our co-workers

• Refactor to a FieldGroup component that sets name into context. Use components to automagically abstract away a11y

  <FieldGroup name="boop">
     <FieldLabel>...</FieldLabel>
     <FieldCustom />
     <HelpText />
  </FieldGroup>
  
  // and 
  
  <CustomXXXField
   name="..."
   label="..."
   helpText="..."  
   />

• Rebuild existing API with new and more flexible components

Working with 3rd-party inputs

• Use a date picker library
• Side quest: Swap some textarea for a WYSIWYG (like quill.js or slate etc)

Working with lists

• Change one of the custom fields to use useFieldArray or FieldArray. Now all of those questions will have field array.
• Update validation

Making a wizard

• Add state for steps and methods for next, previous
• Augment onSubmit to be able to fire multiple times
• Using React.cloneElement() to make a switch renderer for each
  • Side quest (hook it up to a router)
  • Get/Set page with url hash w/useEffect

Improving UX (side quests)

Scroll to the first error

Animating between pages

Adding progress dots

Saving progress/state offline

• Show off how to create side effects with useEffect + custom component or a custom <FormikOffline> built useFormik + <FormikProvider>

---

Using a schema to generate the wizard

• Create a custom schema
• Map through the schema to render each page

😉😉😉

Deployment

---

Things missing

• File uploads and preview (I think this actually needs a screencast because it is non-trivial)
  • progress indicators
  • images
  • pdf
• Signature / DocuSign