Update React from version 17 to version 18 and update all development dependencies excluding webpack-cli, stylelint and sinon (#358)

jest.config.js

@@ -14,8 +14,8 @@ module.exports = {
     '<rootDir>/tests/setupTestingLibrary.js',
   ],
   testEnvironment: 'jsdom',
-  verbose: true,
   transformIgnorePatterns: [
-    'node_modules/(?!(@react-ui-org))'
+    'node_modules/(?!(@react-ui-org))',
   ],
+  verbose: true,
 };

package.json

@@ -50,53 +50,52 @@
     "normalize.css": "^8.0.1"
   },
   "peerDependencies": {
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "prop-types": "^15.8.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-transform-spread": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/register": "^7.17.0",
-    "@svgr/webpack": "^6.2.1",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
-    "@visionappscz/eslint-config-visionapps": "^1.5.0",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.11",
+    "@babel/eslint-parser": "^7.22.11",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-spread": "^7.22.5",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/register": "^7.22.5",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@visionappscz/eslint-config-visionapps": "^1.7.0",
     "@visionappscz/stylelint-config": "^3.0.0",
-    "autoprefixer": "^10.4.2",
-    "babel-jest": "^28.1.0",
-    "babel-loader": "^8.2.3",
-    "core-js": "^3.21.1",
-    "css-loader": "^6.7.1",
-    "eslint": "^8.17.0",
+    "autoprefixer": "^10.4.15",
+    "babel-jest": "^29.6.4",
+    "babel-loader": "^9.1.3",
+    "core-js": "^3.32.1",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.48.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-markdown": "^2.2.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
-    "markdownlint-cli2": "~0.4.0",
-    "mini-css-extract-plugin": "^2.6.1",
-    "postcss": "^8.4.6",
-    "postcss-loader": "^7.0.0",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "markdownlint-cli2": "~0.9.2",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.29",
+    "postcss-loader": "^7.3.3",
     "prop-types": "^15.8.1",
-    "sass": "^1.49.8",
-    "sass-loader": "^13.0.0",
-    "sinon": "^14.0.0",
-    "stylelint": "^14.5.3",
-    "stylelint-webpack-plugin": "^3.1.1",
-    "terser-webpack-plugin": "^5.3.1",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "stylelint": "^14.16.1",
+    "stylelint-webpack-plugin": "^4.1.1",
+    "terser-webpack-plugin": "^5.3.9",
     "webpack": "^5.69.1",
-    "webpack-cli": "^4.9.2",
+    "webpack-cli": "^5.1.4",
     "webpack-visualizer-plugin2": "^1.0.0"
   },
   "resolutions": {

src/components/Alert/__tests__/Alert.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import sinon from 'sinon';
 import {
   render,
   screen,
@@ -50,16 +49,16 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls onClose() on Close button click', () => {
-    const spy = sinon.spy();
+  it('calls onClose() on Close button click', async () => {
+    const spy = jest.fn();
     render((
       <Alert
         {...mandatoryProps}
         onClose={spy}
       />
     ));
 
-    userEvent.click(screen.getByTitle('Close'));
-    expect(spy.calledOnce).toEqual(true);
+    await userEvent.click(screen.getByTitle('Close'));
+    expect(spy).toHaveBeenCalled();
   });
 });

src/components/Badge/README.md

@@ -37,8 +37,6 @@ All priorities come in supported
 High-emphasis priority to draw user's attention.
 
 ```docoff-react-preview
-<Badge label="1" color="primary" />
-<Badge label="2" color="secondary" />
 <Badge label="3" color="success" />
 <Badge label="4" color="warning" />
 <Badge label="5" color="danger" />
@@ -50,8 +48,6 @@ High-emphasis priority to draw user's attention.
 ```
 
 ```docoff-react-preview
-<Badge label="Primary" color="primary" />
-<Badge label="Secondary" color="secondary" />
 <Badge label="Success" color="success" />
 <Badge label="Warning" color="warning" />
 <Badge label="Danger" color="danger" />
@@ -67,8 +63,6 @@ High-emphasis priority to draw user's attention.
 Medium-emphasis priority to provide additional context in an unobtrusive way.
 
 ```docoff-react-preview
-<Badge priority="outline" label="1" color="primary" />
-<Badge priority="outline" label="2" color="secondary" />
 <Badge priority="outline" label="3" color="success" />
 <Badge priority="outline" label="4" color="warning" />
 <Badge priority="outline" label="5" color="danger" />
@@ -80,8 +74,6 @@ Medium-emphasis priority to provide additional context in an unobtrusive way.
 ```
 
 ```docoff-react-preview
-<Badge priority="outline" label="Primary" color="primary" />
-<Badge priority="outline" label="Secondary" color="secondary" />
 <Badge priority="outline" label="Success" color="success" />
 <Badge priority="outline" label="Warning" color="warning" />
 <Badge priority="outline" label="Danger" color="danger" />

src/components/Button/__tests__/Button.test.jsx

@@ -4,7 +4,6 @@ import {
   screen,
   within,
 } from '@testing-library/react';
-import sinon from 'sinon';
 import userEvent from '@testing-library/user-event';
 import { actionColorPropTest } from '../../../../tests/propTests/actionColorPropTest';
 import { blockPropTest } from '../../../../tests/propTests/blockPropTest';
@@ -156,16 +155,16 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls synthetic event onClick()', () => {
-    const spy = sinon.spy();
+  it('calls synthetic event onClick()', async () => {
+    const spy = jest.fn();
     render((
       <Button
         {...mandatoryProps}
         onClick={spy}
       />
     ));
 
-    userEvent.click(screen.getByText('label'));
-    expect(spy.calledOnce).toEqual(true);
+    await userEvent.click(screen.getByText('label'));
+    expect(spy).toHaveBeenCalled();
   });
 });

src/components/Card/README.md

@@ -269,15 +269,15 @@ its accessibility.
 
 ### CardBody
 
-Space your content with CardBody. See [Card Composition](#card-composition) for
+Space your content with CardBody. See [Composition](#composition) for
 all details.
 
 <docoff-react-props src="/components/Card/CardBody.jsx"></docoff-react-props>
 
 ### CardFooter
 
 Separate your card actions with CardFooter. See
-[Card Composition](#card-composition) for all details.
+[Composition](#composition) for all details.
 
 <docoff-react-props src="/components/Card/CardFooter.jsx"></docoff-react-props>
 

src/components/CheckboxField/__tests__/CheckboxField.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import sinon from 'sinon';
 import {
   render,
   screen,
@@ -60,17 +59,17 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls synthetic event onChange()', () => {
-    const spy = sinon.spy();
+  it('calls synthetic event onChange()', async () => {
+    const spy = jest.fn();
     render((
       <CheckboxField
         {...mandatoryProps}
         onChange={spy}
       />
     ));
 
-    userEvent.click(screen.getByLabelText('label'));
-    expect(spy.calledOnce).toEqual(true);
+    await userEvent.click(screen.getByLabelText('label'));
+    expect(spy).toHaveBeenCalled();
   });
 });
 

src/components/FileInputField/__tests__/FileInputField.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import sinon from 'sinon';
 import {
   render,
   screen,
@@ -64,8 +63,8 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls synthetic event onChange()', () => {
-    const spy = sinon.spy();
+  it('calls synthetic event onChange()', async () => {
+    const spy = jest.fn();
     render((
       <FileInputField
         {...mandatoryProps}
@@ -74,7 +73,7 @@ describe('functionality', () => {
     ));
 
     const file = new File(['hello'], 'hello.png', { type: 'image/png' });
-    userEvent.upload(screen.getByLabelText('label'), file);
-    expect(spy.calledOnce).toEqual(true);
+    await userEvent.upload(screen.getByLabelText('label'), file);
+    expect(spy).toHaveBeenCalled();
   });
 });

src/components/FormLayout/README.md

@@ -187,7 +187,7 @@ work together yet 🎩.
 ## Custom Fields
 
 You can even place any content you need into the FormLayout — just wrap it with
-the [FormLayoutCustomField](#formlayoutcustomfield) component. This layout
+the FormLayoutCustomField component. This layout
 helper ensures your content is properly spaced and aligned with to other
 FormLayout elements. FormLayoutCustomFields are designed to work solely inside
 the FormLayout component.

src/components/Modal/README.md

@@ -98,14 +98,14 @@ See [API](#api) for all available options.
 
 Modal is decomposed into the following components:
 
-- [Modal](#api)
-  - [ModalHeader](#modalheader_1)
-    - [ModalTitle](#modaltitle)
-    - [ModalCloseButton](#modalclosebutton)
-  - [ModalBody](#modalbody_1)
-    - [ModalContent](#modalcontent)
+- Modal
+  - [ModalHeader](#modalheader)
+    - ModalTitle
+    - ModalCloseButton
+  - [ModalBody](#modalbody)
+    - ModalContent
       (may be wrapped with [ScrollView](/components/ScrollView))
-  - [ModalFooter](#modalfooter_1)
+  - [ModalFooter](#modalfooter)
 
 Using different combinations, you can compose different kinds of modals,
 e.g. dialog modal, blocking modal, scrollable modal, etc.