Refactor and migrate to use updated s-forms with React 18

[VojtechLunak]

Intro

It is beneficial to create an example demo app to show basic usage of s-forms for wide range of users. Also, we want to be able to use latest React 18 in this demo app.

Problems

With react-scripts version 4.0.3 I encountered weird behaviour in that sense, that compilation (for example when running npm start) failed due to:

./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
Can't import the named export 'Children' from non EcmaScript module (only default export is available) (issue)

This framer-motion library is used in s-forms and I had some problems with migrating this library to React 18 as well.

When I upgraded react-scripts to 5.0.1, other problems came up. For example bad base webpack config in create-react-app (framer motion and other libraries - similar issue).

My problem was this, but it had nothing to do with react-bootstrap, but with webpack and create-react-app config:
Module not found: Error: Can't resolve 'react-boostrap/Card ...

Solutions

So in the end, to change the webpack config, based on this stackoverflow thread, I used craco - Create react app config override. That overrides the base webpack config with custom config, in which I declared, that I do not need fully specified imports (in most cases the file extension was missing).

Recommendations

For further development, I would suggest deploying this demo to netlify. That gives the users quick idea of what s-forms application looks like.