kpi is the (frontend) server for KoboToolbox. It includes an API for users to access data and manage their forms, question library, sharing settings, create reports, and export data.
[x] updates to React 18 (in preparation for react-query v5, which wants React 18)
[x] bumps several frontend and build-time dependencies to newer compatible versions.
[x] drops react-hot-loader in favor of react-refresh
[x] switches to the new JSX runtime,
[x] updates TS, addresses things the new TS found,
Overall, pretty smooth.
[x] Storybook still works, despite an EBADENGINE warning from its CLI (which will go away once we update Node)
[x] 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:
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
If you've added code that should be tested, add tests
If you've changed APIs, update (or create!) the documentation
[x] Ensure the tests pass
[x] Make sure that your code lints and that you've followed our coding style
[x] Write a title and, if necessary, a description of your work suitable for publishing in our release notes
[x] Mention any related issues in this repository (as #ISSUE) and in other repositories (as kobotoolbox/other#ISSUE)
Open an issue in the docs if there are UI/UX changes
Overview
This branch:
react-hot-loaderin favor of react-refreshOverall, pretty smooth.
EBADENGINEwarning from its CLI (which will go away once we update Node)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:
contextTypes)refproperty may return a component instance instead of a DOM node, and that led to a problem inkoboDropdownwhen I tried replacing this found node with aref.current.)Related issues
Part of #4703
Description
Update React and related packages.
Checklist