Upgrade Chakra UI/React

package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@chakra-ui/icons": "^1.1.5",
-    "@chakra-ui/react": "^1.8.7",
+    "@chakra-ui/icons": "^2.0.0",
+    "@chakra-ui/react": "^2.0.0",
     "@codemirror/autocomplete": "^6.3.0",
     "@codemirror/commands": "6.1.1",
     "@codemirror/lang-python": "^6.0.2",
@@ -17,7 +17,6 @@
     "@emotion/styled": "^11.6.0",
     "@microbit/lunr-languages": "^1.9.0-microbit.1",
     "@microbit/microbit-fs": "^0.9.2",
-    "@react-three/fiber": "^7.0.27",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",
     "@testing-library/jest-dom": "^5.14.1",
@@ -29,8 +28,8 @@
     "@types/lunr": "^2.3.4",
     "@types/marked": "^4.0.1",
     "@types/node": "^14.17.15",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "base64-js": "^1.5.1",
     "crelt": "^1.0.5",
     "dapjs": "2.2.0",
@@ -43,12 +42,12 @@
     "lzma": "^2.3.2",
     "marked": "^4.0.15",
     "mobile-drag-drop": "^2.3.0-rc.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^4.2.0",
-    "react-intl": "^5.20.10",
+    "react-intl": "^6.2.10",
     "vscode-jsonrpc": "^6.0.0",
-    "vscode-languageserver-protocol": "^3.16.0",
+    "vscode-languageserver-protocol": "3.16.0",
     "web-vitals": "^1.1.1",
     "xterm": "4.14.1",
     "xterm-addon-fit": "^0.5.0"

src/common/VisualViewportCSSVariables.tsx

@@ -28,7 +28,7 @@ const VisualViewPortCSSVariables = () => {
       return;
     }
     const resizeHandler = () => {
-      const { width, height } = window.visualViewport;
+      const { width, height } = window.visualViewport!;
       let style = document.getElementById(styleId);
       if (!style) {
         style = document.head.appendChild(document.createElement("style"));
@@ -39,7 +39,7 @@ const VisualViewPortCSSVariables = () => {
     window.visualViewport.addEventListener("resize", resizeHandler);
     resizeHandler();
     return () => {
-      window.visualViewport.removeEventListener("resize", resizeHandler);
+      window.visualViewport?.removeEventListener("resize", resizeHandler);
       const style = document.getElementById(styleId);
       if (style) {
         style.remove();

src/common/use-storage.ts

@@ -10,7 +10,7 @@ type storageType = "local" | "session";
 /**
  * Local and session storage-backed state (via JSON serialization).
  */
-export function useStorage<T>(
+export function useStorage<T extends object>(
   storageType: storageType,
   key: string,
   defaultValue: T,

src/deployment/default/components/alert.ts

@@ -9,7 +9,7 @@ const Alert = {
   variants: {
     toast: (props: any) => {
       const base = {
-        ...theme.components.Alert.variants["solid"](props),
+        ...theme.components.Alert.variants!["solid"](props),
       };
       return base;
     },

src/deployment/default/components/button.ts

@@ -10,7 +10,7 @@ const Button = {
     // Ideally we'd drop this variant.
     zoom: (props: any) => {
       // Theme typing issue.
-      const base: any = theme.components.Button.variants.solid(props);
+      const base: any = theme.components.Button.variants!.solid(props);
       return {
         ...base,
         _hover: {
@@ -26,7 +26,7 @@ const Button = {
     sidebar: (props: any) => {
       // Theme typing issue.
       const base: any = {
-        ...theme.components.Button.variants.ghost(props),
+        ...theme.components.Button.variants!.ghost(props),
       };
       return {
         ...base,

src/deployment/default/components/tabs.ts

@@ -9,7 +9,7 @@ const Tabs = {
   variants: {
     sidebar: (props: any) => {
       // Theme typing issue.
-      const base = (theme.components.Tabs.variants["solid-rounded"] as any)(
+      const base = (theme.components.Tabs.variants!["solid-rounded"] as any)(
         props
       );
       return {

src/project/SendButton.tsx

@@ -14,7 +14,7 @@ import {
   ThemeTypings,
   Tooltip,
 } from "@chakra-ui/react";
-import React, { ForwardedRef, useCallback, useRef } from "react";
+import React, { FocusEvent, ForwardedRef, useCallback, useRef } from "react";
 import { RiUsbLine } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { zIndexAboveTerminal } from "../common/zIndex";
@@ -67,7 +67,7 @@ const SendButton = React.forwardRef(
       }
     }, [flashing, actions, sendButtonRef]);
     const handleFocus = useCallback(
-      (e) => {
+      (e: FocusEvent<unknown>) => {
         const inProgress = flashing.current.flashing;
         const delta = new Date().getTime() - flashing.current.lastCompleteFlash;
         if (inProgress || delta < 200) {

src/simulator/DataLoggingModule.tsx

@@ -25,6 +25,7 @@ import { DataLog } from "../device/simulator";
 import { useLogging } from "../logging/logging-hooks";
 import { useDataLog } from "./data-logging-hooks";
 import { useAutoScrollToBottom } from "./scroll-hooks";
+import { saveAs } from "file-saver";
 
 export interface DataLoggingModuleProps {
   icon: ReactNode;

src/simulator/RadioModule.tsx

@@ -13,9 +13,9 @@ import {
   Stack,
   Text,
   VisuallyHidden,
-  VStack
+  VStack,
 } from "@chakra-ui/react";
-import { ReactNode, useCallback, useState } from "react";
+import { FormEvent, ReactNode, useCallback, useState } from "react";
 import { RiSendPlane2Line } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { ReactComponent as MessageIcon } from "./icons/microbit-face-icon.svg";
@@ -155,7 +155,7 @@ const MessageComposer = ({
   });
   const [message, setMessage] = useState<string>("");
   const handleSendMessage = useCallback(
-    (e) => {
+    (e: FormEvent<unknown>) => {
       e.preventDefault();
       onSend(message);
       setMessage("");