Migrate to new react (18)

[blcham]

We need to migrate to the newest react.

Consider and write info here about:

• using Typescript when changing something
• writing some info useful for upgrade of record-manager
• using new features/best practices of react (i.e. design what to rewrite now or later)

A/C:

• version of react is changed to 18
• all github security updates are merged
• it is tested manually
• new minor version is released

[blcham]

Btw, testing framework enzyme is not supported in react 18.

[VojtechLunak]

Summary

With React and React DOM upgraded to version 18.2.0 and other packages which were possible to upgrade to correspond to React 18.2.0 as well, only two packages have conflicts:

1. @luigiminardim/storybook-addon-globals-controls@0.1.3
   a. Have no other option compatible with React 18
2. @wojtekmaj/enzyme-adapter-react-17@0.6.6
   a. There exists enzyme adapter for react 18 (repo), and with first tests, it seems to work.

After migrating storybook to latest version (7.0.23), which brings some significant changes (binaries not used, instead used storybook cli), the stories for Answer do not work, because the intl field is undefined (probably because of not using the library 1. in the list above).

Incompatibilities

With React and React DOM upgraded to v 18.2.0, these warnings occur:

• optional peer dependencies for React ^17.0.0:
  • @luigiminardim/storybook-addon-globals-controls@0.1.3
  • @storybook/addon-a11y@6.4.19
  • @storybook/addon-actions@6.4.19
  • @storybook/addon-essentials@6.4.19
  • @storybook/addon-interactions@6.4.19
  • @storybook/addon-jest@6.4.19
  • @storybook/addon-links@6.4.19
  • @testing-library/react@12.1.4
• peer dependencies:
  • @storybook/react@6.4.19
  • @storybook/testing-react@1.2.4
  • @wojtekmaj/enzyme-adapter-react-17@0.6.6
  • react-datepicker@4.7.0
  • react-intl@5.24.7
  • react-loader-spinner@5.1.4
  • react-select@3.2.0
  • react-window@1.8.6

After upgrading @storybook dependencies to latest versions (7.0.23) and react-datepicker, react-intl, etc. to their latest versions, only these errors remain:

• @luigiminardim/storybook-addon-globals-controls@0.1.3
  • this peer dependency is only optional, so it might be possible to override without side effects
  • I personally do not know the reason this is used, need to consult it later
• @wojtekmaj/enzyme-adapter-react-17@0.6.6
  • there exists new adapter for React 18, but it is not as popular (repo)

Migration of storybook

docs
The base scripts changed:

• start-storybook -> sb dev
• build-storybook -> sb build

These scripts are from new dependency - @storybook/cli.
To migrate the main.cjs script to new, I had to use another new dependencies: @storybook/react-webpack5 and @storybook/builder-webpack5.

[blcham]

Current state:

• enzyme is upgraded.

Next:

• try to use storybook-addon-globals-controls@0.1.3, here is an issue Not compatible with Storybook 7.0.0  luigiminardim/storybook-addon-globals-controls#4
  • there is a fork that upgrades to react v18 (https://github.com/ProjektGopher/storybook-addon-globals-controls)
  • if it works we can put it into @kbss/storybook-addon-globals-controls@0.1.3 and deploy it to npmjs.org

Fix NPM netlify strorybook build.

[VojtechLunak]

Enzyme

After further investigation (1)(2) into Enzyme and React 17 / React 18 enzyme adapter, I think the tests will need migration from using Enzyme into another library (for example react-testing-library). In the current state 11 tests (only from Answer.test.js) do not pass because of the unofficial adapter for React 18, which does not work exactly as adapter for React 17.

Storybook & global controls

After further investigation, it seems the storybook stories would benefit from refactoring them into the newest scenario format. The reason is more efficient decorator application (Applying react context providers to components).

As storybook-addon-globals-controls@0.1.3 is not compatible with Storybook 7, I looked into handling globals and it seems that storybook has its own built-in globals and toolbars mechanism.

Netlify build fix

With Storybook upgraded to version 7, it is dependant on version of Node to be higher than 16. Netlify should use Node 18 by default, but if I understand correctly, it had some cached Node 12. To force Netlify to use Node 18, I added .node-version file to this repository and then the build succeded.

[blcham]

@VojtechLunak great job so far. I agree with storybook ideas and netlify fix. W.r.t. enzyme i cannot judge what is most appropriate library switch so i guess it is fine as well.

[VojtechLunak]

Storybook scenario sections refactor.
Stories (Sforms) vs Components.