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/[email protected].23  @microbit-foundation/[email protected] @microbit-foundation/[email protected] @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/[email protected].31 @microbit-foundation/[email protected] @microbit-foundation/[email protected] @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,

src/deployment/default/components/button.ts

@@ -3,15 +3,12 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { theme } from "@chakra-ui/react";
+import { StyleFunctionProps, theme } from "@chakra-ui/react";
 
 const Tabs = {
   variants: {
-    sidebar: (props: any) => {
-      // Theme typing issue.
-      const base = (theme.components.Tabs.variants["solid-rounded"] as any)(
-        props
-      );
+    sidebar: (props: StyleFunctionProps) => {
+      const base = theme.components.Tabs.variants!["solid-rounded"](props);
       return {
         ...base,
         tablist: {

src/deployment/default/components/tabs.ts

@@ -10,8 +10,8 @@ describe("DocString", () => {
   it("works", () => {
     const markdown =
       "```python\ntestLib.Validator.read_write_prop (property)\n```\n---\nThe read-write property.";
-    const rendered = render(<DocString value={markdown} />);
-    expect(rendered.baseElement.innerHTML).toMatchInlineSnapshot(`
+    const view = render(<DocString value={markdown} />);
+    expect(view.baseElement.innerHTML).toMatchInlineSnapshot(`
       "<div><div class=\\"docs-spacing docs-code css-0\\"><pre><code class=\\"language-python\\">testLib.Validator.read_write_prop (property)
       </code></pre>
       <hr>

src/documentation/common/DocString.test.tsx

@@ -12,6 +12,7 @@ import DocumentationContent from "./DocumentationContent";
 
 jest.mock("@chakra-ui/image", () => ({
   Image: ({ src, w, h }: ImageProps) => (
+    // eslint-disable-next-line jsx-a11y/alt-text
     <img src={src} width={w as string} height={h as string} />
   ),
 }));
@@ -46,9 +47,9 @@ describe("DocumentationContent", () => {
         style: "normal",
       },
     ];
-    const rendered = render(<DocumentationContent content={content} />);
-    expect(rendered.container.innerHTML).toMatchInlineSnapshot(
-      `"<div class=\\"chakra-stack css-bs1yt6\\"><p><a target=\\"_blank\\" rel=\\"nofollow noopener\\" class=\\"chakra-link css-1w3ukj\\" href=\\"https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4\\">Read more about ASCII<svg stroke=\\"currentColor\\" fill=\\"currentColor\\" stroke-width=\\"0\\" viewBox=\\"0 0 24 24\\" focusable=\\"false\\" class=\\"chakra-icon css-q1kx43\\" height=\\"1em\\" width=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z\\"></path></svg></a>.</p></div>"`
+    const view = render(<DocumentationContent content={content} />);
+    expect(view.container.innerHTML).toMatchInlineSnapshot(
+      `"<div class=\\"chakra-stack css-iewcov\\"><p><a target=\\"_blank\\" rel=\\"nofollow noopener\\" class=\\"chakra-link css-1w3ukj\\" href=\\"https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4\\">Read more about ASCII<svg stroke=\\"currentColor\\" fill=\\"currentColor\\" stroke-width=\\"0\\" viewBox=\\"0 0 24 24\\" focusable=\\"false\\" class=\\"chakra-icon css-q1kx43\\" height=\\"1em\\" width=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z\\"></path></svg></a>.</p></div>"`
     );
   });
 
@@ -63,10 +64,10 @@ describe("DocumentationContent", () => {
         },
       },
     ];
-    const rendered = render(<DocumentationContent content={content} />);
+    const view = render(<DocumentationContent content={content} />);
     // This relies on the mock above because Chakra UI's images have the src added later.
-    expect(rendered.container.innerHTML).toMatchInlineSnapshot(
-      `"<div class=\\"chakra-stack css-bs1yt6\\"><img src=\\"https://cdn.sanity.io/images/ajwvhvgo/apps/9fccaf51a164fedc98662188593de19bfb9be8ad-435x512.png?w=300&amp;q=80&amp;fit=max&amp;auto=format\\"></div>"`
+    expect(view.container.innerHTML).toMatchInlineSnapshot(
+      `"<div class=\\"chakra-stack css-iewcov\\"><img src=\\"https://cdn.sanity.io/images/ajwvhvgo/apps/9fccaf51a164fedc98662188593de19bfb9be8ad-435x512.png?w=300&amp;q=80&amp;fit=max&amp;auto=format\\"></div>"`
     );
   });
 });

src/documentation/common/DocumentationContent.test.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import Icon from "@chakra-ui/icon";
+import { Icon } from "@chakra-ui/icon";
 import { Image } from "@chakra-ui/image";
 import { Box, Link, Stack, Text } from "@chakra-ui/layout";
 import { Collapse } from "@chakra-ui/react";