Merge pull request #607 from formio/FIO-9881-React19-upgrade

FIO-9881: upgrated up to React19

Author: brendanbond

README.md

@@ -17,6 +17,27 @@ npm install @formio/js --save
 yarn add @formio/react @formio/js
 ```
 
+## Usage with Vite (Note: When using frameworks like Next.js or Create React App, no extra Vite configuration is necessary)
+
+When using @formio/react in a project built with Vite (especially for React 18 and 19), make sure you install the @vitejs/plugin-react package and configure it in your vite.config.js file.
+
+Install Vite React Plugin
+
+```bash
+yarn add --dev @vitejs/plugin-react
+```
+
+In your vite.config.js, add the React plugin:
+
+```bash
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});
+```
+
 ## Hooks
 
 ### useFormioContext

package.json

@@ -34,13 +34,14 @@
 		"prop-types": "^15.8.1"
 	},
 	"devDependencies": {
-		"@formio/core": "2.2.2-rc.5",
-		"@formio/js": "5.0.0-rc.76",
-		"@testing-library/jest-dom": "^6.4.2",
-		"@testing-library/react": "^14.2.2",
+		"@formio/core": "^2.4.0",
+		"@formio/js": "^5.1.1",
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/jest-dom": "^6.6.2",
+		"@testing-library/react": "^16.1.1",
 		"@types/jest": "^29.5.12",
 		"@types/lodash": "^4.14.202",
-		"@types/react": "^18.2.55",
+		"@types/react": "^19.0.0",
 		"@types/ungap__structured-clone": "^1.2.0",
 		"@typescript-eslint/eslint-plugin": "^7.0.1",
 		"@typescript-eslint/parser": "^7.0.1",
@@ -56,8 +57,8 @@
 		"jest-transform-css": "^6.0.1",
 		"jsdom": "^22.1.0",
 		"prettier": "3.2.4",
-		"react": "^18.1.0",
-		"react-dom": "^18.1.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
 		"ts-jest": "^29.1.2",
 		"ts-node": "^10.9.2",
 		"tsc": "^2.0.4",
@@ -68,9 +69,9 @@
 		"lib"
 	],
 	"peerDependencies": {
-		"@formio/core": "2.2.2-rc.5",
-		"@formio/js": "5.0.0-rc.76",
-		"react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.1.0",
-		"react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.1.0"
+		"@formio/core": "2.4.0",
+		"@formio/js": "5.1.1",
+		"react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.1.0 || ^19.0.0",
+		"react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.1.0 || ^19.0.0"
 	}
 }

src/components/FormEdit.tsx

@@ -38,16 +38,19 @@ const DEFAULT_INITAL_FORM = {
 	path: '',
 	display: 'form' as const,
 	type: 'form' as const,
-	components: [{
-		type: 'button',
-		label: 'Submit',
-		key: 'submit',
-		size: 'md',
-		block: false,
-		action: 'submit',
-		disableOnInvalid: true,
-		theme: 'primary'
-	}],
+	components: [
+		{
+			type: 'button',
+			label: 'Submit',
+			key: 'submit',
+			size: 'md',
+			block: false,
+			action: 'submit',
+			disableOnInvalid: true,
+			theme: 'primary',
+			input: true,
+		},
+	],
 };
 
 export const DEFAULT_SETTINGS_FORM = {
@@ -124,7 +127,7 @@ export const DEFAULT_SETTINGS_FORM = {
 													{
 														label: 'Wizard',
 														value: 'wizard',
-													}
+													},
 												],
 											},
 											validate: {
@@ -243,7 +246,7 @@ export const FormEdit = ({
 			onSaveForm?.(form);
 		} catch (error) {
 			console.error('Error saving form', error);
-			setError(error as ErrorObject) ;
+			setError(error as ErrorObject);
 		}
 	};
 

src/components/FormGrid.tsx

@@ -3,6 +3,7 @@ import { Form as FormType } from '@formio/core';
 import { usePagination } from '../hooks/usePagination';
 import { JSON } from './Form';
 import { ReactNode, useCallback } from 'react';
+import type { JSX } from 'react';
 
 export type Action = {
 	name: string;

src/components/__tests__/Form.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { screen } from '@testing-library/dom';
 import '@testing-library/jest-dom';
 
 import { Form } from '../Form';
@@ -25,6 +26,7 @@ const simpleForm = {
 			label: 'Submit',
 			type: 'button',
 			key: 'submit',
+			input: true,
 			disableOnInvalid: true,
 		},
 	],

src/hooks/__tests__/usePagination.test.ts

@@ -1,4 +1,5 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
+import { waitFor } from '@testing-library/dom';
 import { usePagination } from '../usePagination';
 
 it('should return correct paginated data when passed a static array', () => {

tsconfig.json

@@ -13,6 +13,12 @@
 		"esModuleInterop": true,
 	},
 	"include": ["src/**/*"],
-	"types": ["node", "jest", "@testing-library/jest-dom"],
+	"types": [
+		"node",
+		"jest",
+		"@testing-library/jest-dom",
+		"react",
+		"react-dom",
+	],
 	"exclude": ["node_modules", "lib", "test"],
 }