feat(Forms): Add `Formik` and `react-hook-form` examples

[m7kvqbe1]

Related issue

Closes #2488

Closes https://github.com/defencedigital/mod-uk-design-system/issues/2740

Overview

Create and test working examples of 3.x.x forms utilising a multitude of different companion libraries.

Reason

We need to ensure that form components are interoperable with a multitude of different downstream libraries and use cases. We also need to ensure that the discrete components themselves look and behave correctly when combined together into a web form.

Work carried out

• [x] Ensure that refs are forwarded to underlying HTML inputs
• [x] Include Formik example in Storybook
• [x] Include react-hook-form example in Storybook
• [x] Create suite of e2e Cypress tests
• [x] Add some missing return types to helpers
• [x] Resolve style bug causing Firefox CheckboxE and RadioE to be unselectable

Screenshot

[jpveooys]

Are you getting some errors like this when running yarn install/yarn build on this branch?

$ tsc
cypress/helpers.ts:3:26 - error TS7006: Parameter 'color' implicitly has an 'any' type.

3 export function hexToRgb(color) {
                           ~~~~~

cypress/plugins/index.ts:15:26 - error TS7006: Parameter 'pn' implicitly has an 'any' type.

15 export default function (pn, config) {
                            ~~

Could be related to a dependency update somewhere...

[m7kvqbe1]

Are you getting some errors like this when running yarn install/yarn build on this branch?

$ tsc
cypress/helpers.ts:3:26 - error TS7006: Parameter 'color' implicitly has an 'any' type.

3 export function hexToRgb(color) {
                           ~~~~~

cypress/plugins/index.ts:15:26 - error TS7006: Parameter 'pn' implicitly has an 'any' type.

15 export default function (pn, config) {
                            ~~

Could be related to a dependency update somewhere...

These typings have now been added (https://github.com/defencedigital/mod-uk-design-system/pull/2717/commits/80f1a7ef7723362d19cc904bcceb10acc13afe3c) - they were being flagged because the cypress directory has been added to the .tsconfig include array as part of this PR.

EDIT: Looking at this further - i'm not sure why I originally added cypress directory to the .tsconfig include array. Typing it all seems to be more trouble than it's worth at this stage - so i've removed it again.

[jpveooys]

@m7kvqbe1

I'm still getting some type errors unfortunately (a few are in src/components) – entire list is here: https://gist.github.com/jpveooys/6ae4c9ffd51cdc67232cd09dd447993f

Edit: Update the list as of 012d8bc

[jpveooys]

Is it expected that, for React Hook Form, the initial value of exampleCheckbox is false, but it changes to [] after toggling a checkbox twice?

Edit: Looks like the fix is to set defaultValues when calling useForm() (similar to Formik's initialValues, so that the initial value of exampleCheckbox is []): https://react-hook-form.com/api/useform

(It does also say 'It is encouraged that you set defaultValues for all inputs to non-undefined values such as the empty string or null.')

[m7kvqbe1]

Downgrading to 6.15.4 because IE11 support has been dropped in 7.x.x.

😭

[sonarcloud[bot]]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

68.8% Coverage
0.0% Duplication