LG-3175: Create localization utilities for React components

[aduth]

Why: As a user, I want pages that I'm viewing to be localized to my language, including those page which use React.

This pull request adds simple localization utilities for React components. It is implemented using React context to establish localization data at the root of the application. A custom React hook is included for the purpose of simplifying usage, modeled after existing LoginGov.I18n.t and server-side t Rails internationalization.

Making this data available via context should hopefully facilitate better unit testing, since it doesn't require mocking of window globals, but instead allows for any (or no) simple JavaScript object to be provided as localization data. The current implementation of the translation utility will return the given key if there is no localized data. While this is not appropriate for the front-end user experience, it could be a fine compromise for tests to be able to find elements by a given string key.

The alternative would be to find some way to make the localization data available to the tests. This would have the advantage of bringing tests closer to a "real" user experience of testing components by text visible in the page, but would require additional test bootstrapping logic. The logic would likely involve either loading all YAML files from config/locales as a plain JavaScript object, or as a prerequisite build artifact generated by Rails (see also: i18n-js export, react_on_rails I18n).

[aduth]

There's currently an error being reported in CodeClimate, but it's not one I would expect to see:

The parentheses are expected:

• https://github.com/airbnb/javascript#arrows--one-arg-parens
• https://github.com/airbnb/javascript/blob/5b462a0/packages/eslint-config-airbnb-base/rules/es6.js#L22-L24

Unfortunately, CodeClimate's web UI doesn't give much debugging information to work from.

I installed and ran their CLI tool and was able to reproduce the error.

I observed from their documentation that they run a very outdated version of ESLint by default (3.x, currently 7.x). I suspected it might be something where the ESLint configuration is not able to be loaded, and instead is falling back to some default.

Configuring CodeClimate locally to use a newer version of ESLint appears to help make the difference:

$ codeclimate analyze -e eslint app/javascript/app/document-capture/hooks/use-i18n.js
Starting analysis
Running eslint: Done!

== app/javascript/app/document-capture/hooks/use-i18n.js (1 issue) ==
6: Unexpected parentheses around single function argument having a body with no curly braces [eslint]

Analysis complete! Found 1 issue.
$ codeclimate analyze -e eslint:eslint-6 app/javascript/app/document-capture/hooks/use-i18n.js
Starting analysis
Running eslint: Done!

Analysis complete! Found 0 issues.

Looking through the release notes, nothing in particular stands out to me as making the difference here.

That being said, it would be wise to bring the CodeClimate ESLint configured version in line with what's installed in the application.

#3903 upgraded ESLint from 4.x to the latest 7.x version. ESLint 7 does not appear to be supported yet by CodeClimate. We can configure it as recent as using version 6. I'd recommend giving this a try, and if issues persist, we could consider to downgrade the version used in the application.

It's something which should probably be done as its own task, but since it blocks this pull request, I'd propose to commit it here.

[aduth]

5673f9d seemed to work, although it works a little too well 😓 Catching a bunch of preexisting lint errors now.

[aduth]

5673f9d seemed to work, although it works a little too well 😓 Catching a bunch of preexisting lint errors now.

Pulled out to #3914 to address separately.

[zachmargolis]

LGTM