feat: [UEPR-56] Migrate to React 18

packages/scratch-gui/package.json

@@ -43,9 +43,11 @@
   },
   "dependencies": {
     "@microbit/microbit-universal-hex": "0.2.2",
+    "@radix-ui/react-context-menu": "^2.2.5",
     "@scratch/scratch-render": "11.0.0",
     "@scratch/scratch-svg-renderer": "11.0.0",
     "@scratch/scratch-vm": "11.0.0",
+    "@testing-library/user-event": "^14.6.1",
     "arraybuffer-loader": "1.0.8",
     "autoprefixer": "9.8.8",
     "balance-text": "3.3.1",
@@ -81,22 +83,21 @@
     "prop-types": "15.8.1",
     "query-string": "5.1.1",
     "raw-loader": "4.0.2",
-    "react-contextmenu": "2.14.0",
     "react-draggable": "3.3.2",
-    "react-ga": "2.7.0",
-    "react-intl": "2.9.0",
+    "react-ga": "^3.3.1",
+    "react-intl": "6.8.9",
     "react-modal": "3.16.3",
     "react-popover": "0.5.10",
-    "react-responsive": "5.0.0",
+    "react-responsive": "9.0.0",
     "react-style-proptype": "3.2.2",
-    "react-tabs": "2.3.1",
+    "react-tabs": "^5.2.0",
     "react-tooltip": "4.5.1",
     "react-virtualized": "9.22.6",
     "redux-throttle": "0.1.1",
     "scratch-audio": "2.0.111",
     "scratch-blocks": "1.1.206",
     "scratch-l10n": "5.0.189",
-    "scratch-paint": "3.0.199",
+    "scratch-paint": "github:Bogomil-Stoyanov/scratch-paint#origin/feature/uepr63-react-18",
     "scratch-render-fonts": "1.0.180",
     "scratch-storage": "4.0.98",
     "startaudiocontext": "1.2.1",
@@ -106,10 +107,10 @@
     "xhr": "2.6.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-redux": "^5.0.7",
-    "redux": "^3.7.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-redux": "^8.0.0",
+    "redux": "^4.0.0"
   },
   "devDependencies": {
     "@babel/cli": "7.27.0",
@@ -120,6 +121,8 @@
     "@babel/plugin-transform-async-to-generator": "7.25.9",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/prop-types": "15.7.14",
     "@types/react-modal": "3.16.3",
     "@typescript-eslint/eslint-plugin": "8.7.0",
@@ -128,8 +131,6 @@
     "babel-loader": "9.2.1",
     "cheerio": "1.0.0-rc.3",
     "cross-env": "7.0.3",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
     "eslint": "8.57.1",
     "eslint-config-scratch": "9.0.9",
     "eslint-import-resolver-webpack": "0.11.1",
@@ -142,9 +143,7 @@
     "jest": "21.2.1",
     "jest-junit": "7.0.0",
     "raf": "3.4.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "18.2.0",
     "redux-mock-store": "1.5.5",
     "rimraf": "2.7.1",
     "scratch-semantic-release-config": "3.0.0",
@@ -169,8 +168,7 @@
       }
     },
     "setupFiles": [
-      "raf/polyfill",
-      "<rootDir>/test/helpers/enzyme-setup.js"
+      "raf/polyfill"
     ],
     "reporters": [
       "default",
@@ -181,6 +179,7 @@
         }
       ]
     ],
+    "testEnvironment": "jsdom",
     "testPathIgnorePatterns": [
       "src/test.js"
     ],
@@ -189,6 +188,9 @@
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
       "editor-msgs(\\.js)?$": "<rootDir>/test/__mocks__/editor-msgs-mock.js"
     },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!intl-messageformat|intl-messageformat-parser).+\\.js$"
+    ],
     "moduleFileExtensions": [
       "ts",
       "js",

packages/scratch-gui/src/components/alerts/inline-message.jsx

@@ -14,6 +14,7 @@ const InlineMessageComponent = ({
 }) => (
     <div
         className={classNames(styles.inlineMessage, styles[level])}
+        aria-label="inline message"
     >
         {/* TODO: implement Rtl handling */}
         {iconSpinner && (

packages/scratch-gui/src/components/backpack/backpack.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {FormattedMessage, defineMessages, injectIntl, intlShape} from 'react-intl';
+import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
 import DragConstants from '../../lib/drag-constants';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import SpriteSelectorItem from '../../containers/sprite-selector-item.jsx';
@@ -47,111 +47,113 @@ const Backpack = ({
     dragOver,
     error,
     expanded,
-    intl,
     loading,
     showMore,
     onToggle,
     onDelete,
     onMouseEnter,
     onMouseLeave,
     onMore
-}) => (
-    <div className={styles.backpackContainer}>
-        <div
-            className={styles.backpackHeader}
-            onClick={onToggle}
-        >
-            {onToggle ? (
-                <FormattedMessage
-                    defaultMessage="Backpack"
-                    description="Button to open the backpack"
-                    id="gui.backpack.header"
-                />
-            ) : (
-                <ComingSoonTooltip
-                    place="top"
-                    tooltipId="backpack-tooltip"
-                >
+}) => {
+    const intl = useIntl();
+    return (
+        <div className={styles.backpackContainer}>
+            <div
+                className={styles.backpackHeader}
+                onClick={onToggle}
+            >
+                {onToggle ? (
                     <FormattedMessage
                         defaultMessage="Backpack"
                         description="Button to open the backpack"
                         id="gui.backpack.header"
                     />
-                </ComingSoonTooltip>
-            )}
-        </div>
-        {expanded ? (
-            <div
-                className={classNames(styles.backpackList, {
-                    [styles.dragOver]: dragOver || blockDragOver
-                })}
-                ref={containerRef}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-            >
-                {error ? (
-                    <div className={styles.statusMessage}>
+                ) : (
+                    <ComingSoonTooltip
+                        place="top"
+                        tooltipId="backpack-tooltip"
+                    >
                         <FormattedMessage
-                            defaultMessage="Error loading backpack"
-                            description="Error backpack message"
-                            id="gui.backpack.errorBackpack"
+                            defaultMessage="Backpack"
+                            description="Button to open the backpack"
+                            id="gui.backpack.header"
                         />
-                    </div>
-                ) : (
-                    loading ? (
+                    </ComingSoonTooltip>
+                )}
+            </div>
+            {expanded ? (
+                <div
+                    className={classNames(styles.backpackList, {
+                        [styles.dragOver]: dragOver || blockDragOver
+                    })}
+                    ref={containerRef}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                >
+                    {error ? (
                         <div className={styles.statusMessage}>
                             <FormattedMessage
-                                defaultMessage="Loading..."
-                                description="Loading backpack message"
-                                id="gui.backpack.loadingBackpack"
+                                defaultMessage="Error loading backpack"
+                                description="Error backpack message"
+                                id="gui.backpack.errorBackpack"
                             />
                         </div>
                     ) : (
-                        contents.length > 0 ? (
-                            <div className={styles.backpackListInner}>
-                                {contents.map(item => (
-                                    <SpriteSelectorItem
-                                        className={styles.backpackItem}
-                                        costumeURL={item.thumbnailUrl}
-                                        details={item.name}
-                                        dragPayload={item}
-                                        dragType={dragTypeMap[item.type]}
-                                        id={item.id}
-                                        key={item.id}
-                                        name={intl.formatMessage(labelMap[item.type])}
-                                        selected={false}
-                                        onClick={noop}
-                                        onDeleteButtonClick={onDelete}
-                                    />
-                                ))}
-                                {showMore && (
-                                    <button
-                                        className={styles.more}
-                                        onClick={onMore}
-                                    >
-                                        <FormattedMessage
-                                            defaultMessage="More"
-                                            description="Load more from backpack"
-                                            id="gui.backpack.more"
-                                        />
-                                    </button>
-                                )}
-                            </div>
-                        ) : (
+                        loading ? (
                             <div className={styles.statusMessage}>
                                 <FormattedMessage
-                                    defaultMessage="Backpack is empty"
-                                    description="Empty backpack message"
-                                    id="gui.backpack.emptyBackpack"
+                                    defaultMessage="Loading..."
+                                    description="Loading backpack message"
+                                    id="gui.backpack.loadingBackpack"
                                 />
                             </div>
+                        ) : (
+                            contents.length > 0 ? (
+                                <div className={styles.backpackListInner}>
+                                    {contents.map(item => (
+                                        <SpriteSelectorItem
+                                            className={styles.backpackItem}
+                                            costumeURL={item.thumbnailUrl}
+                                            details={item.name}
+                                            dragPayload={item}
+                                            dragType={dragTypeMap[item.type]}
+                                            id={item.id}
+                                            key={item.id}
+                                            name={intl.formatMessage(labelMap[item.type])}
+                                            selected={false}
+                                            onClick={noop}
+                                            onDeleteButtonClick={onDelete}
+                                        />
+                                    ))}
+                                    {showMore && (
+                                        <button
+                                            className={styles.more}
+                                            onClick={onMore}
+                                        >
+                                            <FormattedMessage
+                                                defaultMessage="More"
+                                                description="Load more from backpack"
+                                                id="gui.backpack.more"
+                                            />
+                                        </button>
+                                    )}
+                                </div>
+                            ) : (
+                                <div className={styles.statusMessage}>
+                                    <FormattedMessage
+                                        defaultMessage="Backpack is empty"
+                                        description="Empty backpack message"
+                                        id="gui.backpack.emptyBackpack"
+                                    />
+                                </div>
+                            )
                         )
-                    )
-                )}
-            </div>
-        ) : null}
-    </div>
-);
+                    )}
+                </div>
+            ) : null}
+        </div>
+    );
+};
 
 Backpack.propTypes = {
     blockDragOver: PropTypes.bool,
@@ -165,7 +167,6 @@ Backpack.propTypes = {
     dragOver: PropTypes.bool,
     error: PropTypes.bool,
     expanded: PropTypes.bool,
-    intl: intlShape,
     loading: PropTypes.bool,
     onDelete: PropTypes.func,
     onMore: PropTypes.func,
@@ -186,4 +187,4 @@ Backpack.defaultProps = {
     onToggle: null
 };
 
-export default injectIntl(Backpack);
+export default Backpack;