Implement Generic Measurement Flow for Mobile

[ndrwksr]

The specifics of the flow for each measurement set have not been fleshed out, but we do know what we want the general measurements flow on mobile to look like. There is already a very basic implementation of this, but we want to have a Slider component which has a measurement per page. This component should take an object which describes the measurements to be taken. Each page should have:

• An image and/or text describing how to take the measurement
  • The image should be on top, if it's present.
  • If we can find a component that wraps an image that allows the user to tap it to make it fullscreen/zoom & pan, that would be great, but not a requirement.
  • Text should come below the image, if it's present. Supporting HTML in that text would be great, if possible.
• An input for the value
  • Inputs need to have a label for units.
  • It'd be great if we could get them in the top label, and as a placeholder/hint in the label.
  • The input must be able to remove units from the value if the user provides them.
  • Ex. "3 mm" needs to be converted to 3.
  • This validation/formatting should live in a separate module so it can be tested independently.
  • Each measurement will need to have an upper and lower bound.
• Next/back buttons
  • Swiping will also go forward/back, but that comes for free with the slider component
  • Slider might have built-in support for this, research the library before adding these
• An error message under the input so that if it's out of bounds, or can't be parsed, we can report that to the user At the end of the measurements flow, there needs to be a submit page with:
• A table showing all of the measurements and the values user provided
  • These should have units on them
• A submit button
  • Have the onClick call a new stubbed function on the measurements store, something like submitNewMeasurements
  • Impl of stubbed store function should just print to console It would be great if the slider works on mobile/desktop, so that if we like how it feels on desktop we don't need to create a whole parallel implementation for desktop, but this is not a hard requirement.

Review:

• Create type for configuration object defining a measurements flow (maybe MeasurementSetFlowConfiguration)
• Enum for units (mm, cm, in, and deg)
• Module which takes a string and a unit and returns the appropriate value/error
• Tests for above module
  • {text: "3 mm", units: "mm"} => {value: 3.0, units: "mm"}
  • {text: "3.00mm", units: "mm"} => {value: 3.0, units: "mm"}
  • {text: "3", units: "mm"} => {value: 3.0, units: "mm"}
  • {text: "three", units: "mm"} => Error
• New React component which takes a configuration object defining a measurements flow
• Stubbed function on measurements store which prints submitted measurements to console

[ndrwksr]

Put in 1.5 hours with d179dd14588482dffd0bef93d0c61e23202112b3

[Thysbe]

Put in 5 hours 11/13 Put in 4.5 hours 11/14

[ndrwksr]

Put in 1 hour 11/14 working with @Thysbe

[ndrwksr]

Put in 3.75 hours with 36d3e10bd3b61f71a5be4bd74de4302bdf1ed67e

[ndrwksr]

1 hour on 0808e98bf79dc643bc16abab73d7658938f2f9f8 f8ec70814a383c7df8eabb5630e372567417e609 515029121556aa75000c8437b9f6ca54adaf5b60