feat: add backward compatible support for React@18 (#4709)

Refs #4705

README.md

@@ -177,6 +177,62 @@ You can then view the app by navigating to `http://localhost` in your browser.
 
 * [Contributing](https://github.com/swagger-api/.github/blob/master/CONTRIBUTING.md)
 
+### Using older version of React
+
+> [!IMPORTANT]
+> By older versions we specifically refer to `React >=17 <18`.
+
+By default [swagger-editor@5](https://www.npmjs.com/package/swagger-editor) npm package comes with latest version of [React@18](https://react.dev/blog/2022/03/29/react-v18).
+It's possible to use _swagger-editor@5_ npm package with older version of React.
+
+Let's say my application integrates with _swagger-editor@5_ npm package and uses [React@17.0.2](https://www.npmjs.com/package/react/v/17.0.2).
+
+### npm
+
+In order to inform `swagger-editor@5` npm package that I require it to use my React version, I need to use [npm overrides](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides).
+
+```json
+{
+  "dependencies": {
+    "react": "=17.0.2",
+    "react-dom": "=17.0.2"
+  },
+  "overrides": {
+    "swagger-editor": {
+      "react": "$react",
+      "react": "$react-dom",
+      "react-redux": "^8"
+    }
+  }
+}
+```
+
+> [!NOTE]
+> The React and ReactDOM override are defined as a reference to the dependency. Since _react-redux@9_ only supports `React >= 18`, we need to use _react-redux@8_.
+
+
+### yarn
+
+In order to inform `swagger-editor@5` npm package that I require it to use my specific React version, I need to use [yarm resolutions](https://yarnpkg.com/cli/set/resolution).
+
+
+```json
+{
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "resolutions": {
+    "swagger-editor/react": "17.0.2",
+    "swagger-editor/react-dom": "17.0.2",
+    "swagger-editor/react-redux": "^8"
+  }
+}
+```
+
+> [!NOTE]
+> The React and ReactDOM resolution cannot be defined as a reference to the dependency. Unfortunately *yarn* does not support aliasing like `$react` or `$react-dom` as *npm* does. You'll need to specify the exact versions.
+
 ## Security contact
 
 Please disclose any security-related issues or vulnerabilities by emailing [security@swagger.io](mailto:security@swagger.io), instead of using the public issue tracker.

package.json

@@ -75,19 +75,19 @@
     "promise-worker": "^2.0.1",
     "prop-types": "15.8.1",
     "querystring-browser": "^1.0.4",
-    "react": "=17.0.2",
+    "react": ">=17 <19",
     "react-ace": "^4.1.6",
     "react-addons-css-transition-group": "^15.4.2",
-    "react-dom": "=17.0.2",
+    "react-dom": ">=17 <19",
     "react-dropzone": "^12.0.4",
     "react-immutable-proptypes": "^2.1.0",
-    "react-redux": "=8.1.3",
-    "react-split-pane": "^0.1.82",
+    "react-redux": "^9.0.4",
+    "react-split-pane": "^0.1.92",
     "react-transition-group": "^1.1.1",
-    "redux": "=4.2.1",
-    "reselect": "^4.0.0",
-    "swagger-client": "^3.23.0",
-    "swagger-ui": "^5.9.0",
+    "redux": "^5.0.1",
+    "reselect": "^5.1.0",
+    "swagger-client": "^3.25.0",
+    "swagger-ui": "^5.11.0",
     "traverse": "^0.6.6",
     "validator": "=13.11.0",
     "yaml-js": "^0.3.1"
@@ -108,7 +108,7 @@
     "@jest/globals": "^29.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@release-it/conventional-changelog": "=5.1.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "=0.8.0",
+    "@cfaester/enzyme-adapter-react-18": "^0.7.1",
     "autoprefixer": "^10.2.6",
     "babel-loader": "^9.1.0",
     "babel-plugin-module-resolver": "^5.0.0",
@@ -155,7 +155,7 @@
     "postcss-preset-env": "^9.0.0",
     "react-hot-loader": "^1.3.1",
     "react-refresh": "^0.14.0",
-    "react-test-renderer": "=17.0.2",
+    "react-test-renderer": "^18.2.0",
     "release-it": "=15.4.2",
     "rewiremock": "^3.7.4",
     "rimraf": "^5.0.0",

test/mocha/setup.js

@@ -1,5 +1,5 @@
 const Enzyme = require("enzyme")
-const Adapter = require("@wojtekmaj/enzyme-adapter-react-17")
+const { default: Adapter } = require("@cfaester/enzyme-adapter-react-18")
 
 Enzyme.configure({ adapter: new Adapter() })
 

test/unit/plugins/editor/editor.js

@@ -1,6 +1,6 @@
 import rewiremock from 'rewiremock';
 import Enzyme, { shallow } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
 import React from 'react';
 import FakeAce, { Session } from 'test/unit/mocks/ace.js';
 import { fromJS } from 'immutable';

test/unit/standalone/topbar-insert/form-data-helpers.js

@@ -2,7 +2,7 @@
 import { fromJS } from 'immutable';
 import React from 'react';
 import { configure, mount } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
 import AddForm from 'src/standalone/topbar-insert/forms/components/AddForm';
 import FormChild from 'src/standalone/topbar-insert/forms/components/FormChild';
 import FormDropdown from 'src/standalone/topbar-insert/forms/components/FormDropdown';

test/unit/standalone/topbar-insert/form-objects.js

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { configure, mount } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
 import { fromJS, List } from 'immutable';
 
 import AddForm from 'src/standalone/topbar-insert/forms/components/AddForm';

test/unit/standalone/topbar-insert/index.js

@@ -3,7 +3,7 @@ import SwaggerUI from 'swagger-ui';
 import insertPlugin from 'src/standalone/topbar-insert';
 import { fromJS } from 'immutable';
 import { configure, mount } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
 
 configure({ adapter: new Adapter() });