Upgrade Chakra UI/React (#1114)

Some changes due to React 18 useEffect development-time behaviour.
Some e2e timing bugs caught.

This should have no user-relevant changes so no rush to release it.
We'll let it sit on beta for a while and may combine with a switch to Vite before release.

Author: microbit-matt-hillsdon

.github/workflows/build.yml

@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.23  @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.31 @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package-lock.json

@@ -5,66 +5,67 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@chakra-ui/icons": "^1.1.5",
-    "@chakra-ui/react": "^1.8.7",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.5.1",
     "@codemirror/autocomplete": "^6.3.0",
     "@codemirror/commands": "6.1.1",
     "@codemirror/lang-python": "^6.0.2",
     "@codemirror/language": "^6.2.1",
     "@codemirror/state": "^6.1.2",
     "@codemirror/view": "^6.3.0",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@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",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/dompurify": "^2.3.1",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.sortby": "^4.7.6",
     "@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",
     "dompurify": "^2.3.3",
     "file-saver": "^2.0.5",
-    "framer-motion": "^5.6.0",
+    "framer-motion": "^10.2.4",
     "lodash.debounce": "^4.0.8",
     "lodash.sortby": "^4.7.0",
     "lunr": "^2.3.9",
     "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.8.0",
-    "react-intl": "^5.20.10",
+    "react-intl": "^6.2.10",
     "vscode-jsonrpc": "^8.0.0",
     "vscode-languageserver-protocol": "^3.16.0",
     "web-vitals": "^1.1.1",
     "xterm": "4.14.1",
     "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@chakra-ui/cli": "^2.4.1",
     "@craco/craco": "^7.0.0",
     "@formatjs/cli": "^4.2.33",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
     "@types/file-saver": "^2.0.3",
     "@types/jest": "^26.0.24",
     "cross-env": "^7.0.3",
     "pptr-testing-library": "^0.7.0",
     "prettier": "2.3.2",
-    "puppeteer": "^13.4.0",
+    "puppeteer": "13.4.0",
     "react-scripts": "5.0.0",
     "source-map-explorer": "^2.5.3",
     "typescript": "^4.4.2"
@@ -77,6 +78,7 @@
     "bundle-size-explorer": "source-map-explorer 'build/static/js/*.js'",
     "bundle-size-report": "source-map-explorer 'build/static/js/*.js' --html reports/bundle-size.html",
     "ci": "npm run typecheck && npm run test && npm run build && npm run bundle-size-report",
+    "postinstall": "npm run theme",
     "start": "craco start",
     "build": "craco build",
     "test": "craco test --testPathIgnorePatterns=e2e",
@@ -86,6 +88,8 @@
     "test:all": "craco test --testTimeout 15000",
     "test:e2e": "cross-env E2E_HEADLESS=0 craco test --testPathPattern e2e -w 1 --testTimeout 15000",
     "test:e2e:headless": "cross-env E2E_HEADLESS=1 craco test --testPathPattern e2e -w 1 --testTimeout 15000",
+    "theme": "chakra-cli tokens src/deployment/default/theme.ts",
+    "theme:watch": "chakra-cli tokens src/deployment/default/theme.ts --watch",
     "ci:update-version": "update-ci-version",
     "deploy": "website-deploy-aws",
     "invalidate": "aws cloudfront create-invalidation --distribution-id $(printenv ${STAGE}_CLOUDFRONT_DISTRIBUTION_ID) --paths \"/*\"",

package.json

@@ -12,7 +12,7 @@ import {
   ModalOverlay,
 } from "@chakra-ui/modal";
 import { Button, HStack, Link, Text } from "@chakra-ui/react";
-import { ThemeTypings } from "@chakra-ui/styled-system";
+import { ThemingProps } from "@chakra-ui/styled-system";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 import ModalCloseButton from "./ModalCloseButton";
@@ -21,7 +21,7 @@ export interface GenericDialogProps {
   header?: ReactNode;
   body: ReactNode;
   footer: ReactNode;
-  size?: ThemeTypings["components"]["Modal"]["sizes"];
+  size?: ThemingProps<"Button">["size"];
   onClose: () => void;
   returnFocusOnClose?: boolean;
   finalFocusRef?: React.RefObject<HTMLButtonElement>;

src/common/GenericDialog.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Button } from "@chakra-ui/button";
-import { Box, VStack, Text } from "@chakra-ui/layout";
+import { Box, Text, VStack } from "@chakra-ui/layout";
 import {
   Modal,
   ModalBody,
@@ -14,7 +14,7 @@ import {
   ModalOverlay,
 } from "@chakra-ui/modal";
 import { ThemeTypings } from "@chakra-ui/styled-system";
-import { ReactNode, useCallback, useRef, useState } from "react";
+import { ReactNode, useCallback, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 export interface InputValidationResult {
@@ -39,7 +39,6 @@ export interface InputDialogProps<T> {
   actionLabel: string;
   size?: ThemeTypings["components"]["Modal"]["sizes"];
   validate?: (input: T) => InputValidationResult;
-  customFocus?: boolean;
   finalFocusRef?: React.RefObject<HTMLButtonElement>;
   callback: (value: ValueOrCancelled<T>) => void;
 }
@@ -55,15 +54,13 @@ export const InputDialog = <T,>({
   actionLabel,
   initialValue,
   size,
-  customFocus,
   finalFocusRef = undefined,
   validate = noValidation,
   callback,
 }: InputDialogProps<T>) => {
   const [value, setValue] = useState(initialValue);
   const [validationResult, setValidationResult] =
     useState<InputValidationResult>(validate(initialValue));
-  const leastDestructiveRef = useRef<HTMLButtonElement>(null);
   const onCancel = useCallback(() => callback(undefined), [callback]);
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -73,13 +70,7 @@ export const InputDialog = <T,>({
   };
 
   return (
-    <Modal
-      isOpen
-      onClose={onCancel}
-      size={size}
-      initialFocusRef={customFocus ? undefined : leastDestructiveRef}
-      finalFocusRef={finalFocusRef}
-    >
+    <Modal isOpen onClose={onCancel} size={size} finalFocusRef={finalFocusRef}>
       <ModalOverlay>
         <ModalContent>
           <ModalHeader>
@@ -101,7 +92,7 @@ export const InputDialog = <T,>({
             </VStack>
           </ModalBody>
           <ModalFooter>
-            <Button ref={leastDestructiveRef} onClick={onCancel}>
+            <Button onClick={onCancel}>
               <FormattedMessage id="cancel-action" />
             </Button>
             <Button

src/common/InputDialog.tsx

@@ -14,6 +14,7 @@ import { useCallback, useEffect, useRef } from "react";
 const useIsUnmounted = () => {
   const ref = useRef(false);
   useEffect(() => {
+    ref.current = false;
     return () => {
       ref.current = true;
     };

src/common/use-is-unmounted.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: MIT
  */
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 import { useStorage } from "./use-storage";
 
 interface TestState {

src/common/use-local-storage.test.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import useRafState from "./use-raf-state";
 
 const Test = () => {
@@ -24,6 +24,6 @@ describe("useRafState", () => {
 
     fireEvent.click(screen.getByText("increment"));
 
-    await waitFor(() => screen.getByText("1"));
+    await screen.findByText("1");
   });
 });

src/common/use-raf-state.test.tsx

@@ -3,13 +3,13 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { theme } from "@chakra-ui/react";
+import { StyleFunctionProps, theme } from "@chakra-ui/react";
 
 const Alert = {
   variants: {
-    toast: (props: any) => {
+    toast: (props: StyleFunctionProps) => {
       const base = {
-        ...theme.components.Alert.variants["solid"](props),
+        ...theme.components.Alert.variants!["solid"](props),
       };
       return base;
     },

src/deployment/default/components/alert.ts

@@ -3,14 +3,13 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { theme } from "@chakra-ui/react";
+import { StyleFunctionProps, theme } from "@chakra-ui/react";
 
 const Button = {
   variants: {
     // Ideally we'd drop this variant.
-    zoom: (props: any) => {
-      // Theme typing issue.
-      const base: any = theme.components.Button.variants.solid(props);
+    zoom: (props: StyleFunctionProps) => {
+      const base = theme.components.Button.variants!.solid(props);
       return {
         ...base,
         _hover: {
@@ -23,10 +22,9 @@ const Button = {
         },
       };
     },
-    sidebar: (props: any) => {
-      // Theme typing issue.
-      const base: any = {
-        ...theme.components.Button.variants.ghost(props),
+    sidebar: (props: StyleFunctionProps) => {
+      const base = {
+        ...theme.components.Button.variants!.ghost(props),
       };
       return {
         ...base,