⬆️(dependencies) update js dependencies

CHANGELOG.md

@@ -18,6 +18,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 - Add a poll builder example using Grommet library
 
+### Changed
+
+- Migrate to React 18
+
 ## [1.0.0-beta.0]
 
 ### Added

examples/playground/package.json

@@ -17,31 +17,32 @@
   "dependencies": {
     "@openfun/verna": "1.0.0-beta.1",
     "@rjsf/core": "4.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.2.2"
   },
   "devDependencies": {
-    "@formatjs/cli": "5.1.3",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
-    "@typescript-eslint/eslint-plugin": "5.42.0",
-    "@typescript-eslint/parser": "5.42.0",
+    "@formatjs/cli": "5.1.4",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "@typescript-eslint/eslint-plugin": "5.45.0",
+    "@typescript-eslint/parser": "5.45.0",
     "@vitejs/plugin-react": "2.2.0",
-    "eslint": "8.26.0",
+    "eslint": "8.28.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-import-resolver-typescript": "3.5.2",
     "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.10",
-    "postcss": "8.3.3",
-    "sass": "1.55.0",
-    "stylelint": "14.14.0",
+    "eslint-plugin-react": "7.31.11",
+    "postcss": "8.4.19",
+    "sass": "1.56.1",
+    "stylelint": "14.15.0",
     "stylelint-config-standard": "29.0.0",
-    "stylelint-config-standard-scss": "6.0.0",
+    "stylelint-config-standard-scss": "6.1.0",
     "stylelint-order": "5.0.0",
     "typescript": "4.8.4",
-    "vite": "3.2.2"
+    "vite": "3.2.4"
   }
 }

examples/playground/src/main.tsx

@@ -1,19 +1,21 @@
 import { StrictMode } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import LocaleProvider from './providers/LocaleProvider';
 import TranslationProvider from './providers/TranslationProvider';
 
 async function render() {
-  ReactDOM.render(
+  const $container = document.getElementById('root');
+  const root = createRoot($container!);
+
+  root.render(
     <StrictMode>
       <LocaleProvider>
         <TranslationProvider>
           <App />
         </TranslationProvider>
       </LocaleProvider>
     </StrictMode>,
-    document.getElementById('root'),
   );
 }
 

examples/poll/package.json

@@ -16,41 +16,41 @@
   },
   "dependencies": {
     "@openfun/verna": "1.0.0-beta.1",
-    "@rjsf/core": "4.2.0",
-    "grommet": "2.24.0",
-    "grommet-icons": "4.7.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-intl": "6.2.1",
-    "react-is": "16.8.0",
-    "styled-components": "5.3.5",
-    "uuid": "8.3.2"
+    "@rjsf/core": "4.2.3",
+    "grommet": "2.28.0",
+    "grommet-icons": "4.8.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.2.2",
+    "react-is": "18.2.0",
+    "styled-components": "5.3.6",
+    "uuid": "9.0.0"
   },
   "devDependencies": {
     "@babel/preset-react": "7.18.6",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
-    "@types/styled-components": "5.1.25",
-    "@typescript-eslint/eslint-plugin": "5.30.5",
-    "@typescript-eslint/parser": "5.30.5",
-    "@vitejs/plugin-react": "1.3.2",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "@types/styled-components": "5.1.26",
+    "@typescript-eslint/eslint-plugin": "5.45.0",
+    "@typescript-eslint/parser": "5.45.0",
+    "@vitejs/plugin-react": "2.2.0",
     "babel-plugin-module-resolver": "4.1.0",
-    "eslint": "8.19.0",
+    "eslint": "8.28.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.0",
+    "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-react": "7.31.11",
     "jest": "29.3.1",
-    "postcss": "8.3.3",
-    "sass": "1.53.0",
-    "stylelint": "14.9.1",
-    "stylelint-config-standard": "26.0.0",
-    "stylelint-config-standard-scss": "4.0.0",
+    "postcss": "8.4.19",
+    "sass": "1.56.1",
+    "stylelint": "14.15.0",
+    "stylelint-config-standard": "29.0.0",
+    "stylelint-config-standard-scss": "6.1.0",
     "stylelint-order": "5.0.0",
-    "typescript": "4.6.4",
-    "uuid": "8.3.2",
-    "vite": "3.2.2"
+    "typescript": "4.8.4",
+    "uuid": "9.0.0",
+    "vite": "3.2.4"
   }
 }

examples/poll/src/components/Modal/AddQuestionModal.spec.tsx

@@ -2,7 +2,7 @@ import { useVerna, VernaForm, VernaProvider } from '@openfun/verna';
 import { VernaSchemaType } from '@openfun/verna/dist/types/rjsf';
 import { Maybe } from '@openfun/verna/dist/types/utils';
 import * as factories from '@openfun/verna/src/tests/mocks/factories';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Suspense } from 'react';
 import { IntlProvider } from 'react-intl';
@@ -52,42 +52,36 @@ describe('AddQuestionModal', () => {
 
   beforeEach(() => {
     useVernaValue = undefined;
+    document.body.innerHTML = '';
   });
 
   it('should be able to add a widget from the list with correct type and name', async () => {
     render(<VernaSuspenseWrapper idParts={['root', 'testSection']} />);
 
     // Wait that the form is rendered...
-    await waitFor(() => {
-      expect(screen.queryByTestId('suspense-fallback')).toBeNull();
+    await waitFor(async () => {
+      expect(screen.queryByTestId('suspense-fallback')).not.toBeInTheDocument();
     });
-
     // Check that the modal is rendered
-    expect(screen.getByText('Select a type of question to add')).toBeInTheDocument();
+    await waitFor(async () => {
+      screen.getByText('Select a type of question to add');
+    });
 
     // Add a Multiple choice question field
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
-      await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
-      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
-    });
+    await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
+    await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add' }));
 
     // Open parameters of the newly created field and add an option
-    await act(async () => {
-      await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
-      await userEvent.click(screen.getAllByRole('button', { name: 'Add' })[0]);
-      await userEvent.type(screen.getAllByRole('textbox', {})[1], 'test');
-    });
+    await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
+    await userEvent.click(screen.getAllByRole('button', { name: 'Add' })[0]);
+    await userEvent.type(screen.getAllByRole('textbox', {})[1], 'test');
 
     // Save parameters
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button', { name: 'save' }));
-    });
+    await userEvent.click(screen.getByRole('button', { name: 'save' }));
 
     // Reopen parameters
-    await act(async () => {
-      await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
-    });
+    await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
 
     expect(screen.getAllByRole('textbox', {})[1]).toHaveValue('test');
   });
@@ -101,11 +95,9 @@ describe('AddQuestionModal', () => {
     });
 
     // Add a Multiple choice question field
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
-      await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
-      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
-    });
+    await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
+    await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add' }));
 
     // Check that the newly created widget is well initialized
     const { formSchema, uiSchema } = useVernaValue!;

examples/poll/src/main.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import AppWrapper from ':/AppWrapper';
 
-ReactDOM.render(
-  <React.StrictMode>
+const $container = document.getElementById('root');
+const root = createRoot($container!);
+
+root.render(
+  <StrictMode>
     <AppWrapper />
-  </React.StrictMode>,
-  document.getElementById('root'),
+  </StrictMode>,
 );

lib/package.json

@@ -2,7 +2,11 @@
   "name": "@openfun/verna",
   "version": "1.0.0-beta.1",
   "private": false,
-  "keywords": ["react", "form", "json-schema"],
+  "keywords": [
+    "react",
+    "form",
+    "json-schema"
+  ],
   "description": "An extensible form builder based on React JSON Schema Form.",
   "scripts": {
     "build": "tsc && vite build",
@@ -44,49 +48,49 @@
     "uuid": "9.0.0"
   },
   "peerDependencies": {
-    "react": ">=17.0.2<18",
-    "react-dom": ">=17.0.2<18",
-    "react-intl": ">=5.25.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.2.2"
   },
   "files": [
     "dist"
   ],
   "devDependencies": {
-    "@babel/core": "7.19.6",
-    "@babel/preset-env": "7.19.4",
+    "@babel/core": "7.20.5",
+    "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
-    "@formatjs/cli": "5.1.3",
+    "@formatjs/cli": "5.1.4",
     "@testing-library/dom": "8.19.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.2.1",
-    "@types/lodash": "4.14.187",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
-    "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.42.0",
-    "@typescript-eslint/parser": "5.42.0",
+    "@types/jest": "29.2.3",
+    "@types/lodash": "4.14.190",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "@types/uuid": "9.0.0",
+    "@typescript-eslint/eslint-plugin": "5.45.0",
+    "@typescript-eslint/parser": "5.45.0",
     "@vitejs/plugin-react": "2.2.0",
-    "eslint": "8.26.0",
+    "eslint": "8.28.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-import-resolver-typescript": "3.5.2",
     "eslint-plugin-compat": "4.0.2",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.10",
-    "jest": "29.2.2",
-    "jest-environment-jsdom": "29.2.2",
-    "prettier": "2.7.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-intl": "6.2.1",
-    "rollup": "3.2.5",
+    "eslint-plugin-react": "7.31.11",
+    "jest": "29.3.1",
+    "jest-environment-jsdom": "29.3.1",
+    "prettier": "2.8.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.2.2",
+    "rollup": "3.5.0",
     "tslib": "2.4.1",
     "typescript": "4.8.4",
-    "vite": "3.2.2",
+    "vite": "3.2.4",
     "vite-plugin-dts": "1.7.1"
   }
 }

package.json

@@ -38,6 +38,6 @@
     "yarn": "1.22.19"
   },
   "devDependencies": {
-    "concurrently": "7.5.0"
+    "concurrently": "7.6.0"
   }
 }

renovate.json

@@ -3,12 +3,8 @@
     "github>openfun/renovate-configuration"
   ],
   "ignoreDeps": [
-    "@testing-library/react",
-    "@types/react",
-    "@types/react-dom",
     "node",
-    "react",
-    "react-dom"
+    "typescript"
   ],
   "ignorePaths": ["**/node_modules/**"]
 }