Chakra UI upgrade (#1243)

* Upgrade Chakra UI to v2.10.10

Move @chakra-ui/react to 2.10.10 (the v2 head) with @chakra-ui/icons
2.2.6, @chakra-ui/cli 2.5.8, and the @emotion peers to 11.14.x.

The single-package refactor in 2.10 drops the standalone subpackages, so
imports from @chakra-ui/{layout,button,modal,icon,image,tooltip,system,
input,form-control,toast,spinner,select,progress,portal,menu} are folded
into @chakra-ui/react. Also:
- CSSObject is no longer exported; use SystemStyleObject for the
  _collapsed prop in CollapsibleButton.
- DocumentationContent.test mocks Image via @chakra-ui/react with
  importOriginal now that @chakra-ui/image is gone.

* Apply npm audit fix for transitive vulnerabilities

Resolves all 17 reported advisories via package-lock.json updates only;
every fix fell within existing caret ranges so package.json is unchanged
(notably vite 7.3.6, vitest 4.1.9, dompurify 3.4.11).

* Update to version that uses prepare not postinstall

Author: microbit-matt-hillsdon

.github/workflows/build.yml

@@ -39,7 +39,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.47 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.48 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package-lock.json

@@ -6,16 +6,16 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/icons": "^2.2.6",
+    "@chakra-ui/react": "^2.10.10",
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/commands": "6.5.0",
     "@codemirror/lang-python": "^6.1.6",
     "@codemirror/language": "^6.10.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@microbit/microbit-connection": "^1.0.0-beta.0",
     "@microbit/microbit-fs": "^0.10.0",
     "@sanity/block-content-to-react": "^3.0.0",
@@ -55,7 +55,7 @@
     "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "2.4.1",
+    "@chakra-ui/cli": "2.5.8",
     "@formatjs/cli": "^6.2.7",
     "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^5.14.1",

package.json

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, Text } from "@chakra-ui/layout";
+import { Box, Text } from "@chakra-ui/react";
 import { ReactNode } from "react";
 
 interface AreaHeadingProps {

src/common/AreaHeading.tsx

@@ -5,9 +5,9 @@
  */
 import {
   Button,
-  CSSObject,
   HTMLChakraProps,
   IconButton,
+  SystemStyleObject,
   ThemingProps,
 } from "@chakra-ui/react";
 import React, { ForwardedRef } from "react";
@@ -26,7 +26,7 @@ export interface CollapsibleButtonProps
   /**
    * Styles used only when collapsed.
    */
-  _collapsed?: CSSObject;
+  _collapsed?: SystemStyleObject;
 }
 
 export type CollapsibleButtonComposableProps = Omit<

src/common/CollapsibleButton.tsx

@@ -3,16 +3,16 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Button } from "@chakra-ui/button";
 import {
   AlertDialog,
   AlertDialogBody,
   AlertDialogContent,
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogOverlay,
-} from "@chakra-ui/modal";
-import { Text } from "@chakra-ui/react";
+  Button,
+  Text,
+} from "@chakra-ui/react";
 import { ReactNode, useRef } from "react";
 import { FormattedMessage } from "react-intl";
 

src/common/ConfirmDialog.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Text } from "@chakra-ui/layout";
+import { Text } from "@chakra-ui/react";
 import React, { ErrorInfo, ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 import { LoggingContext } from "../logging/logging-hooks";

src/common/ErrorBoundary.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, BoxProps, Center } from "@chakra-ui/layout";
+import { Box, BoxProps, Center } from "@chakra-ui/react";
 import { ReactNode, useCallback, useState } from "react";
 import { RiFolderOpenLine } from "react-icons/ri";
 import { useIntl } from "react-intl";

src/common/FileDropTarget.tsx

@@ -4,14 +4,17 @@
  * SPDX-License-Identifier: MIT
  */
 import {
+  Button,
+  HStack,
+  Link,
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from "@chakra-ui/modal";
-import { Button, HStack, Link, Text } from "@chakra-ui/react";
+  Text,
+} from "@chakra-ui/react";
 import { ThemingProps } from "@chakra-ui/styled-system";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";

src/common/GenericDialog.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, BoxProps, Divider, VStack } from "@chakra-ui/layout";
+import { Box, BoxProps, Divider, VStack } from "@chakra-ui/react";
 import { ReactNode } from "react";
 import { zIndexBreadcrumbContainer } from "../common/zIndex";
 import ScrollablePanel from "./ScrollablePanel";