Update react dependecies

.storybook/main.js

@@ -0,0 +1,20 @@
+// const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
+module.exports = {
+  'stories': [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(ts|tsx)'
+  ],
+  'addons': [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials'
+  ],
+  // webpackFinal: async (config, { configType }) => {
+  //   config.plugins.push(
+  //     new MonacoWebpackPlugin({
+  //       languages: ['json']
+  //     })
+  //   )
+
+  //   return config;
+  // },
+}

package.json

@@ -44,41 +44,41 @@
   },
   "devDependencies": {
     "@balena/lint": "^6.1.1",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/addon-storyshots": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@storybook/addon-actions": "~6.5.12",
+    "@storybook/addon-essentials": "~6.5.12",
+    "@storybook/addon-links": "~6.5.12",
+    "@storybook/addon-storyshots": "~6.5.12",
+    "@storybook/react": "~6.5.12",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/googlemaps": "^3.39.7",
     "@types/highlightjs": "^9.12.0",
     "@types/jest": "^26.0.21",
     "@types/jsdom": "^20.0.0",
-    "@types/react": "^16.14.5",
-    "@types/react-dom": "^16.9.11",
-    "@types/react-google-recaptcha": "^1.1.2",
-    "@types/react-router-dom": "^5.1.8",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
+    "@types/react-google-recaptcha": "^2.1.5",
+    "@types/react-router-dom": "^5.3.3",
     "@types/sinon": "^9.0.8",
+    "@types/supercluster": "^7.1.0",
     "@types/unist": "^2.0.3",
     "catch-uncommitted": "^2.0.0",
     "core-js": "^3.18.3",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
+    "history": "^5.3.0",
     "husky": "^0.14.3",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.8",
     "jest-transform-stub": "^2.0.0",
     "jsdom": "^16.0.0",
     "lint-staged": "^4.3.0",
     "match-media-mock": "^0.1.1",
-    "monaco-editor-webpack-plugin": "^4.2.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "prettier": "^2.4.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-monaco-editor": "^0.45.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "sinon": "^4.5.0",
     "strip-css-comments": "^3.0.0",
@@ -93,8 +93,9 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@mapbox/rehype-prism": "^0.8.0",
-    "@react-google-maps/api": "^1.13.0",
-    "@rjsf/core": "^2.5.1",
+    "@monaco-editor/react": "^4.4.5",
+    "@react-google-maps/api": "^2.10.2",
+    "@rjsf/core": "^4.2.3",
     "@types/ajv-keywords": "^3.4.0",
     "@types/color": "^3.0.0",
     "@types/history": "^4.7.8",
@@ -108,16 +109,18 @@
     "@types/styled-components": "^5.1.9",
     "@types/styled-system": "^4.0.0",
     "@types/uuid": "^3.4.3",
+    "@zarconontol/enzyme-adapter-react-18": "^0.7.3",
     "ajv": "^6.12.6",
     "ajv-keywords": "^3.5.2",
     "color": "^3.2.1",
     "color-hash": "^1.1.1",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",
-    "easymde": "~2.10.1",
-    "grommet": "~2.18.0",
+    "easymde": "^2.18.0",
+    "grommet": "~2.25.3",
     "hast-util-sanitize": "^3.0.2",
     "json-e": "^4.4.3",
+    "json-schema": "^0.4.0",
     "lodash": "^4.17.21",
     "memoizee": "^0.4.15",
     "mermaid": "^9.1.7",
@@ -128,10 +131,10 @@
     "qs": "^6.10.3",
     "react-google-recaptcha": "^2.1.0",
     "react-helmet": "^6.1.0",
-    "react-notifications-component": "^2.4.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-simplemde-editor": "^4.1.5",
+    "react-notifications-component": "^4.0.0",
+    "react-router": "~5.2.0",
+    "react-router-dom": "~5.2.0",
+    "react-simplemde-editor": "^5.0.2",
     "regex-parser": "^2.2.11",
     "regexp-match-indices": "^1.0.2",
     "rehype-autolink-headings": "^5.1.0",

src/components/Async/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 // Load given React component asynchronously, needed when implementing WASM
 // This component can be replaced with React.lazy once we upgrade to React v16.6
@@ -18,7 +18,10 @@ export const Async = (importComponent: () => any) => {
 		}
 
 		public render() {
-			const Component = this.state.component as React.SFC<any> | null;
+			const Component = this.state.component as React.ComponentFactory<
+				any,
+				any
+			> | null;
 			return Component ? <Component {...this.props} /> : null;
 		}
 	};

src/components/Button/index.tsx

@@ -285,7 +285,7 @@ interface ButtonBaseProps extends Coloring, Sizing {
 
 export interface InternalButtonProps
 	extends ButtonBaseProps,
-		Omit<React.HTMLAttributes<HTMLElement>, 'dir' | 'color'>,
+		Omit<React.HTMLAttributes<HTMLElement>, 'dir' | 'color' | 'children'>,
 		GrommetButtonProps {
 	type?: 'submit' | 'reset' | 'button';
 	confirmation?: ConfirmOptions | string;

src/components/Checkbox/index.tsx

@@ -85,7 +85,7 @@ const BaseCheckbox = ({ className, ...otherProps }: InternalCheckboxProps) => {
 };
 
 export interface InternalCheckboxProps
-	extends React.HTMLAttributes<HTMLElement>,
+	extends Omit<React.HTMLAttributes<HTMLElement>, 'children'>,
 		GrommetCheckBoxProps {
 	onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }

src/components/DropDownButton/index.tsx

@@ -278,22 +278,25 @@ class BaseDropDownButton extends React.Component<
 										{i < items.length - 1 && <Divider />}
 									</Box>
 							  ))
-							: React.Children.map(children, (child, i) => {
-									if (noListFormat) {
-										return child;
-									}
-									if (!child) {
-										return;
-									}
-									if ((child as any).type === Divider) {
-										return child;
-									}
-									return (
-										<Item px={3} py={1} hasActionFn={false} key={i}>
-											{child}
-										</Item>
-									);
-							  })}
+							: React.Children.map(
+									children as React.ReactElement,
+									(child, i) => {
+										if (noListFormat) {
+											return child;
+										}
+										if (!child) {
+											return;
+										}
+										if (child.type === Divider) {
+											return child;
+										}
+										return (
+											<Item px={3} py={1} hasActionFn={false} key={i}>
+												{child}
+											</Item>
+										);
+									},
+							  )}
 					</MenuBase>
 				)}
 			</Wrapper>

src/components/Form/fields/ObjectField.tsx

@@ -36,12 +36,12 @@ interface ObjectFieldProps {
 	title: string;
 	description: string;
 	properties: Properties[];
-	TitleField: React.StatelessComponent<{
+	TitleField: React.FunctionComponent<{
 		id: string;
 		title: string;
 		required: boolean;
 	}>;
-	DescriptionField: React.StatelessComponent<{
+	DescriptionField: React.FunctionComponent<{
 		id: string;
 		description: string | React.ReactElement;
 	}>;

src/components/Form/index.tsx

@@ -104,6 +104,7 @@ export interface FormWidgetProps extends WidgetProps {
 		widgets: { [name: string]: Widget };
 		definitions: { [name: string]: any };
 		formContext: any;
+		rootSchema: JSONSchema;
 	};
 	type?: string;
 	rawErrors: string[];

src/components/Map/index.tsx

@@ -76,14 +76,13 @@ const onGoogleMapsApiLoad = (map: google.maps.Map, markers: UIMarker[]) => {
 	map.setOptions({
 		zoomControlOptions: {
 			position: google.maps.ControlPosition.TOP_RIGHT,
-			style: google.maps.ZoomControlStyle.SMALL,
 		},
 	});
 
 	// If we run `setZoom` right after `fitBounds` the map won't refresh. With this we first wait for the map to be idle (from fitBounds), and then set the zoom level.
 	const listener = google.maps.event.addListenerOnce(map, 'idle', () => {
 		// Don't allow to zoom closer than the defailt detail zoom level on initial load.
-		if (map.getZoom() > DETAIL_ZOOM_LEVEL) {
+		if (map.getZoom()! > DETAIL_ZOOM_LEVEL) {
 			map.setZoom(DETAIL_ZOOM_LEVEL);
 		}
 
@@ -193,7 +192,7 @@ export interface MapProps<T> extends React.HTMLAttributes<HTMLElement> {
 	/** Callback function when an item on the map was clicked */
 	onItemClick?: (item: T) => void;
 	/** Event triggered on map click that includes the clicked location's longitude and latitude */
-	mapClick?: (e: google.maps.MouseEvent) => void;
+	mapClick?: (e: google.maps.MapMouseEvent) => void;
 }
 
 /** [View story source](https://github.com/balena-io-modules/rendition/blob/master/src/components/Map/Map.stories.tsx) */