scratch-paint 3.0.339 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scratch-paint",
-  "version": "3.0.339",
+  "version": "4.0.0",
   "description": "Graphical User Interface for the Scratch 3.0 paint editor, which is used to make and edit sprites for use in projects.",
   "main": "./dist/scratch-paint.js",
   "browser": "./src/index.js",
@@ -33,16 +33,16 @@
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {
-    "react": "^16",
-    "react-dom": "^16",
-    "react-intl": "^2",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-intl": "^6",
     "react-intl-redux": "^0.7 || ^2.0.0",
     "react-popover": "^0.5",
-    "react-redux": "^5",
-    "react-responsive": "^5",
+    "react-redux": "^8",
+    "react-responsive": "^9",
     "react-style-proptype": "^3",
     "react-tooltip": "^4",
-    "redux": "^3",
+    "redux": "^4",
     "scratch-render-fonts": "^1.0.0"
   },
   "devDependencies": {
@@ -53,6 +53,7 @@
     "@babel/preset-react": "7.27.1",
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-conventional": "17.8.1",
+    "@testing-library/react": "8.0.9",
     "autoprefixer": "9.8.8",
     "babel-eslint": "10.1.0",
     "babel-jest": "29.7.0",
@@ -61,8 +62,6 @@
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "canvas": "2.11.2",
     "css-loader": "3.6.0",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
     "eslint": "8.57.1",
     "eslint-config-scratch": "9.0.9",
     "eslint-plugin-import": "2.32.0",
@@ -79,28 +78,17 @@
     "postcss-loader": "3.0.0",
     "postcss-simple-vars": "5.0.2",
     "raf": "3.4.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-intl": "2.9.0",
-    "react-intl-redux": "2.4.1",
-    "react-popover": "0.5.10",
-    "react-redux": "5.1.2",
-    "react-responsive": "5.0.0",
-    "react-style-proptype": "3.2.2",
-    "react-test-renderer": "16.14.0",
-    "react-tooltip": "4.5.1",
-    "redux": "3.7.2",
+    "react-test-renderer": "18.3.1",
     "redux-mock-store": "1.5.5",
     "redux-throttle": "0.1.1",
     "regenerator-runtime": "0.13.9",
     "rimraf": "2.7.1",
     "scratch-l10n": "5.0.309",
-    "scratch-render-fonts": "1.0.218",
     "scratch-semantic-release-config": "3.0.0",
     "semantic-release": "19.0.5",
     "style-loader": "1.3.0",
     "svg-url-loader": "3.0.3",
-    "tap": "14.11.0",
+    "tap": "21.1.0",
     "uglifyjs-webpack-plugin": "2.2.0",
     "url-loader": "2.3.0",
     "webpack": "4.47.0",
@@ -114,14 +102,17 @@
   },
   "jest": {
     "setupFiles": [
-      "raf/polyfill",
-      "<rootDir>/test/helpers/enzyme-setup.js"
+      "raf/polyfill"
     ],
+    "testEnvironment": "jsdom",
     "testURL": "http://localhost",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
-    }
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!intl-messageformat|intl-messageformat-parser).+\\.js$"
+    ]
   },
   "jest-junit": {
     "outputDirectory": "./test/results"

package/src/components/color-picker/color-picker.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, FormattedMessage, injectIntl} from 'react-intl';
+import intlShape from '../../lib/intl-shape.js';
 
 import classNames from 'classnames';
 import parseColor from 'parse-color';

package/src/components/coming-soon/coming-soon.jsx

@@ -4,7 +4,8 @@ See #13 */
 
 import bindAll from 'lodash.bindall';
 import classNames from 'classnames';
-import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
+import {defineMessages, injectIntl, FormattedMessage} from 'react-intl';
+import intlShape from '../../lib/intl-shape.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactTooltip from 'react-tooltip';

package/src/components/fixed-tools/fixed-tools.jsx

@@ -11,7 +11,7 @@ import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
 import Button from '../button/button.jsx';
 import ButtonGroup from '../button-group/button-group.jsx';
 import Dropdown from '../dropdown/dropdown.jsx';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, useIntl} from 'react-intl';
 import Formats, {isVector} from '../../lib/format';
 import Input from '../forms/input.jsx';
 import InputGroup from '../input-group/input-group.jsx';
@@ -87,13 +87,14 @@ const messages = defineMessages({
 const FixedToolsComponent = props => {
     const redoDisabled = !props.canRedo();
     const undoDisabled = !props.canUndo();
+    const intl = useIntl();
 
     return (
         <div className={styles.row}>
             {/* Name field */}
             <InputGroup>
                 <MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
-                    <Label text={props.intl.formatMessage(messages.costume)}>
+                    <Label text={intl.formatMessage(messages.costume)}>
                         <BufferedInput
                             className={styles.costumeInput}
                             type="text"
@@ -128,7 +129,7 @@ const FixedToolsComponent = props => {
                         onClick={props.onUndo}
                     >
                         <img
-                            alt={props.intl.formatMessage(messages.undo)}
+                            alt={intl.formatMessage(messages.undo)}
                             className={classNames(
                                 styles.buttonGroupButtonIcon,
                                 styles.undoIcon
@@ -150,7 +151,7 @@ const FixedToolsComponent = props => {
                         onClick={props.onRedo}
                     >
                         <img
-                            alt={props.intl.formatMessage(messages.redo)}
+                            alt={intl.formatMessage(messages.redo)}
                             className={styles.buttonGroupButtonIcon}
                             draggable={false}
                             src={redoIcon}
@@ -164,16 +165,16 @@ const FixedToolsComponent = props => {
                 <InputGroup className={styles.modDashedBorder}>
                     <LabeledIconButton
                         disabled={!shouldShowGroup()}
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={groupIcon}
-                        title={props.intl.formatMessage(messages.group)}
+                        title={intl.formatMessage(messages.group)}
                         onClick={props.onGroup}
                     />
                     <LabeledIconButton
                         disabled={!shouldShowUngroup()}
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={ungroupIcon}
-                        title={props.intl.formatMessage(messages.ungroup)}
+                        title={intl.formatMessage(messages.ungroup)}
                         onClick={props.onUngroup}
                     />
                 </InputGroup> : null
@@ -184,16 +185,16 @@ const FixedToolsComponent = props => {
                 <InputGroup className={styles.modDashedBorder}>
                     <LabeledIconButton
                         disabled={!shouldShowBringForward()}
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={sendForwardIcon}
-                        title={props.intl.formatMessage(messages.forward)}
+                        title={intl.formatMessage(messages.forward)}
                         onClick={props.onSendForward}
                     />
                     <LabeledIconButton
                         disabled={!shouldShowSendBackward()}
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={sendBackwardIcon}
-                        title={props.intl.formatMessage(messages.backward)}
+                        title={intl.formatMessage(messages.backward)}
                         onClick={props.onSendBackward}
                     />
                 </InputGroup> : null
@@ -204,16 +205,16 @@ const FixedToolsComponent = props => {
                     <InputGroup className={styles.row}>
                         <LabeledIconButton
                             disabled={!shouldShowBringForward()}
-                            hideLabel={hideLabel(props.intl.locale)}
+                            hideLabel={hideLabel(intl.locale)}
                             imgSrc={sendFrontIcon}
-                            title={props.intl.formatMessage(messages.front)}
+                            title={intl.formatMessage(messages.front)}
                             onClick={props.onSendToFront}
                         />
                         <LabeledIconButton
                             disabled={!shouldShowSendBackward()}
-                            hideLabel={hideLabel(props.intl.locale)}
+                            hideLabel={hideLabel(intl.locale)}
                             imgSrc={sendBackIcon}
-                            title={props.intl.formatMessage(messages.back)}
+                            title={intl.formatMessage(messages.back)}
                             onClick={props.onSendToBack}
                         />
                     </InputGroup>
@@ -252,7 +253,7 @@ const FixedToolsComponent = props => {
                                             draggable={false}
                                             src={sendFrontIcon}
                                         />
-                                        <span>{props.intl.formatMessage(messages.front)}</span>
+                                        <span>{intl.formatMessage(messages.front)}</span>
                                     </Button>
                                     <Button
                                         className={classNames(styles.modMenuItem, {
@@ -266,7 +267,7 @@ const FixedToolsComponent = props => {
                                             draggable={false}
                                             src={sendBackIcon}
                                         />
-                                        <span>{props.intl.formatMessage(messages.back)}</span>
+                                        <span>{intl.formatMessage(messages.back)}</span>
                                     </Button>
 
                                     {/* To be rotation point */}
@@ -285,7 +286,7 @@ const FixedToolsComponent = props => {
                             }
                             tipSize={.01}
                         >
-                            {props.intl.formatMessage(messages.more)}
+                            {intl.formatMessage(messages.more)}
                         </Dropdown>
                     </InputGroup>
                 </MediaQuery> : null
@@ -298,7 +299,6 @@ FixedToolsComponent.propTypes = {
     canRedo: PropTypes.func.isRequired,
     canUndo: PropTypes.func.isRequired,
     format: PropTypes.oneOf(Object.keys(Formats)),
-    intl: intlShape,
     name: PropTypes.string,
     onGroup: PropTypes.func.isRequired,
     onRedo: PropTypes.func.isRequired,
@@ -321,4 +321,4 @@ const mapStateToProps = state => ({
 
 export default connect(
     mapStateToProps
-)(injectIntl(FixedToolsComponent));
+)(FixedToolsComponent);

package/src/components/mode-tools/mode-tools.jsx

@@ -12,7 +12,7 @@ import {setShapesFilled} from '../../reducers/fill-bitmap-shapes';
 import FontDropdown from '../../containers/font-dropdown.jsx';
 import LiveInputHOC from '../forms/live-input-hoc.jsx';
 import Label from '../forms/label.jsx';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, useIntl} from 'react-intl';
 import Input from '../forms/input.jsx';
 import InputGroup from '../input-group/input-group.jsx';
 import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
@@ -43,6 +43,7 @@ import {MAX_STROKE_WIDTH} from '../../reducers/stroke-width';
 
 const LiveInput = LiveInputHOC(Input);
 const ModeToolsComponent = props => {
+    const intl = useIntl();
     const messages = defineMessages({
         brushSize: {
             defaultMessage: 'Size',
@@ -122,7 +123,7 @@ const ModeToolsComponent = props => {
             <div className={classNames(props.className, styles.modeTools)}>
                 <div>
                     <img
-                        alt={props.intl.formatMessage(currentMessage)}
+                        alt={intl.formatMessage(currentMessage)}
                         className={styles.modeToolsIcon}
                         draggable={false}
                         src={currentIcon}
@@ -151,7 +152,7 @@ const ModeToolsComponent = props => {
             <div className={classNames(props.className, styles.modeTools)}>
                 <div>
                     <img
-                        alt={props.intl.formatMessage(messages.eraserSize)}
+                        alt={intl.formatMessage(messages.eraserSize)}
                         className={styles.modeToolsIcon}
                         draggable={false}
                         src={currentIcon}
@@ -175,24 +176,24 @@ const ModeToolsComponent = props => {
                 <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
                     <LabeledIconButton
                         disabled={!props.hasSelectedUncurvedPoints}
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={curvedPointIcon}
-                        title={props.intl.formatMessage(messages.curved)}
+                        title={intl.formatMessage(messages.curved)}
                         onClick={props.onCurvePoints}
                     />
                     <LabeledIconButton
                         disabled={!props.hasSelectedUnpointedPoints}
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={straightPointIcon}
-                        title={props.intl.formatMessage(messages.pointed)}
+                        title={intl.formatMessage(messages.pointed)}
                         onClick={props.onPointPoints}
                     />
                 </InputGroup>
                 <InputGroup className={classNames(styles.modLabeledIconHeight)}>
                     <LabeledIconButton
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={deleteIcon}
-                        title={props.intl.formatMessage(messages.delete)}
+                        title={intl.formatMessage(messages.delete)}
                         onClick={props.onDelete}
                     />
                 </InputGroup>
@@ -205,38 +206,38 @@ const ModeToolsComponent = props => {
             <div className={classNames(props.className, styles.modeTools)}>
                 <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
                     <LabeledIconButton
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={copyIcon}
-                        title={props.intl.formatMessage(messages.copy)}
+                        title={intl.formatMessage(messages.copy)}
                         onClick={props.onCopyToClipboard}
                     />
                     <LabeledIconButton
                         disabled={!(props.clipboardItems.length > 0)}
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={pasteIcon}
-                        title={props.intl.formatMessage(messages.paste)}
+                        title={intl.formatMessage(messages.paste)}
                         onClick={props.onPasteFromClipboard}
                     />
                 </InputGroup>
                 <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
                     <LabeledIconButton
-                        hideLabel={hideLabel(props.intl.locale)}
+                        hideLabel={hideLabel(intl.locale)}
                         imgSrc={deleteIcon}
-                        title={props.intl.formatMessage(messages.delete)}
+                        title={intl.formatMessage(messages.delete)}
                         onClick={props.onDelete}
                     />
                 </InputGroup>
                 <InputGroup className={classNames(styles.modLabeledIconHeight)}>
                     <LabeledIconButton
-                        hideLabel={props.intl.locale !== 'en'}
+                        hideLabel={intl.locale !== 'en'}
                         imgSrc={flipHorizontalIcon}
-                        title={props.intl.formatMessage(messages.flipHorizontal)}
+                        title={intl.formatMessage(messages.flipHorizontal)}
                         onClick={props.onFlipHorizontal}
                     />
                     <LabeledIconButton
-                        hideLabel={props.intl.locale !== 'en'}
+                        hideLabel={intl.locale !== 'en'}
                         imgSrc={flipVerticalIcon}
-                        title={props.intl.formatMessage(messages.flipVertical)}
+                        title={intl.formatMessage(messages.flipVertical)}
                         onClick={props.onFlipVertical}
                     />
                 </InputGroup>
@@ -266,7 +267,7 @@ const ModeToolsComponent = props => {
                     <LabeledIconButton
                         highlighted={props.fillBitmapShapes}
                         imgSrc={fillIcon}
-                        title={props.intl.formatMessage(messages.filled)}
+                        title={intl.formatMessage(messages.filled)}
                         onClick={props.onFillShapes}
                     />
                 </InputGroup>
@@ -274,13 +275,13 @@ const ModeToolsComponent = props => {
                     <LabeledIconButton
                         highlighted={!props.fillBitmapShapes}
                         imgSrc={outlineIcon}
-                        title={props.intl.formatMessage(messages.outlined)}
+                        title={intl.formatMessage(messages.outlined)}
                         onClick={props.onOutlineShapes}
                     />
                 </InputGroup>
                 {props.fillBitmapShapes ? null : (
                     <InputGroup>
-                        <Label text={props.intl.formatMessage(messages.thickness)}>
+                        <Label text={intl.formatMessage(messages.thickness)}>
                             <LiveInput
                                 range
                                 small
@@ -315,7 +316,6 @@ ModeToolsComponent.propTypes = {
     format: PropTypes.oneOf(Object.keys(Formats)),
     hasSelectedUncurvedPoints: PropTypes.bool,
     hasSelectedUnpointedPoints: PropTypes.bool,
-    intl: intlShape.isRequired,
     mode: PropTypes.string.isRequired,
     onBitBrushSliderChange: PropTypes.func.isRequired,
     onBitEraserSliderChange: PropTypes.func.isRequired,
@@ -367,4 +367,4 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(injectIntl(ModeToolsComponent));
+)(ModeToolsComponent);