Upgrade to React 18

[p2edwards]

Overview

This branch:

• updates to React 18 (in preparation for react-query v5, which wants React 18)
• bumps several frontend and build-time dependencies to newer compatible versions.
• drops react-hot-loader in favor of react-refresh
• switches to the new JSX runtime,
• updates TS, addresses things the new TS found,

Overall, pretty smooth.

• Storybook still works, despite an EBADENGINE warning from its CLI (which will go away once we update Node)
• React table v6 still works, despite not being written for React 18. See comment.

To keep things moving along, I haven't migrated every deprecated React function in this PR. (Particularly if it comes from a legacy class that might be rewritten soon). Some things that still work in React 18 (but will be removed in React 19) can be found in the console after a refresh. Examples:

• legacy context api (contextTypes)
• legacy string refs (docs)
• findDOMNode (used with some BEM components — I started migrating some of these, but reverted as a makeBEM's ref property may return a component instance instead of a DOM node, and that led to a problem in koboDropdown when I tried replacing this found node with a ref.current.)

Related issues

Part of #4703

Description

Update React and related packages.

Checklist

1. If you've added code that should be tested, add tests
2. If you've changed APIs, update (or create!) the documentation
3. Ensure the tests pass
4. Make sure that your code lints and that you've followed our coding style
5. Write a title and, if necessary, a description of your work suitable for publishing in our release notes
6. Mention any related issues in this repository (as #ISSUE) and in other repositories (as kobotoolbox/other#ISSUE)
7. Open an issue in the docs if there are UI/UX changes

[p2edwards]

React Table v6 is very different from v7 or v8, and would be a non-trivial, unguided migration. Staying on v6 for now, we count on the backwards-compatibility of React (and the forwards-compatibility of React Table v6), as we did with reflux.

See:

• Last README entry for react-table v6, v6->v7

  The differences between the 2 versions are incredibly massive. Unfortunately, I cannot write a one-to-one upgrade guide for any of v6's API, simply because much of it is irrelevant with v7's headless approach. The best approach for migrating to v7 is to learn its API by reading the documentation and then following some of the examples to begin building your own table component.

• v8 migration guide, v7 -> v8

[magicznyleszek]

Don't we need to update the engines? When I am npm installing this branch, I see a warning that I should use node v16.17.0 (it comes with [email protected])

[p2edwards]

Upgrading Node will mean updating some Dockerfiles, scripts, and the CI, and will be a bit tricky (even if it's just a point upgrade). I want to do it in another PR.

The 16.17 warning is safe to ignore; it comes from a Storybook CLI sub-sub-dependency. The Storybook dev workflow is unaffected:

• We don't use the feature that Storybook brought the package in for
• The package brings in another package for a feature that Storybook doesn't use either
• The sub-sub-sub dependency probably would work fine with Node 16.15 anyway, but asks for >=16.17 for reasons unspecified by the author

…so our case that code never executes. I'll push a commit that pins a version so we don't have to see EBADENGINE:

"storybook": {
  "giget": "1.1.3" // Keeps execa <8 for unused feature
}

notes from researching this

These are the packages:

npm WARN EBADENGINE Unsupported engine {  
npm WARN EBADENGINE   package: '[email protected]',  
npm WARN EBADENGINE   required: { node: '>=16.17' },  
npm WARN EBADENGINE   current: { node: 'v16.15.0', npm: '8.5.5' }  
npm WARN EBADENGINE }  
npm WARN EBADENGINE Unsupported engine {  
npm WARN EBADENGINE   package: '[email protected]',  
npm WARN EBADENGINE   required: { node: '>=16.17.0' },  
npm WARN EBADENGINE   current: { node: 'v16.15.0', npm: '8.5.5' }  
npm WARN EBADENGINE }

Here's how we end up with it:

storybook cli   sandbox feature (that we don't use)
                  |
                  v
                giget   deps feature (that storybook doesn't use)
                            |
                            v
                          nypm   (gets updated by a bot)
                          |
                          v
                       execa -> human-signals (stricter versioning than required)

• storybook cli switches from degit to giget ^1 for a feature that we don't use — Nov 18, 2022
• giget 1.2 adds nypm for an optional feature. storybook's feature that we don't use doesn't use that feature. — Dec 23, 2023
• Meanwhile:
  • execa 8 (and human-signals) have dropped Node 14, and in the process, specified a stricter Node 16 version range (probably stricter than they need) — Aug 5, 2023
  • nypm 0.3.1 updates execa from ^7.2.0 to 8.0.1 in a bot commit just to keep on top of things. — Aug 24, 2023
• Sometime later:
  • We update our dependencies. Since Storybook specifies giget ^1, it retrieves the latest version of giget, so we get the dependency warning coming from giget -> nypm -> execa -> human-signals.

[magicznyleszek]

Thanks for the research! Looks fine to me :)