Skip to content

Commit e25b63a

Browse files
adzhindzhiadzhindzhi
authored
Merge pull request #350 from scratchfoundation/UEPR-56-UEPR-282
[UEPR-56, UEPR-282] Integration branch for React 18 and Face Sensing
2 parents 83c402b + fcf19b7 commit e25b63a

File tree

159 files changed

+8300
-3803
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

159 files changed

+8300
-3803
lines changed

‎package-lock.json‎

Lines changed: 3335 additions & 1130 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/scratch-gui/package.json‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,15 @@
5757
"watch": "webpack --watch"
5858
},
5959
"dependencies": {
60+
"@mediapipe/face_detection": "0.4.1646425229",
6061
"@microbit/microbit-universal-hex": "0.2.2",
62+
"@radix-ui/react-context-menu": "^2.2.5",
63+
"@testing-library/user-event": "^14.6.1",
6164
"@scratch/scratch-render": "11.6.0",
6265
"@scratch/scratch-svg-renderer": "11.6.0",
6366
"@scratch/scratch-vm": "11.6.0",
67+
"@tensorflow-models/face-detection": "^1.0.3",
68+
"@tensorflow/tfjs": "^4.22.0",
6469
"arraybuffer-loader": "1.0.8",
6570
"autoprefixer": "9.8.8",
6671
"balance-text": "3.3.1",
@@ -74,6 +79,7 @@
7479
"core-js": "2.6.12",
7580
"css-loader": "5.2.7",
7681
"dapjs": "2.3.0",
82+
"driver.js": "1.3.6",
7783
"es6-object-assign": "1.1.0",
7884
"fastestsmallesttextencoderdecoder": "1.0.22",
7985
"get-float-time-domain-data": "0.1.0",
@@ -96,23 +102,23 @@
96102
"prop-types": "15.8.1",
97103
"query-string": "5.1.1",
98104
"raw-loader": "4.0.2",
99-
"react-contextmenu": "2.14.0",
100105
"react-draggable": "3.3.2",
101-
"react-ga": "2.7.0",
102-
"react-intl": "2.9.0",
103-
"react-modal": "3.16.3",
106+
"react-ga": "^3.3.1",
107+
"react-intl": "6.8.9",
108+
"react-modal": "^3.16.3",
104109
"react-popover": "0.5.10",
105-
"react-responsive": "5.0.0",
110+
"react-redux": "^8.0.0",
111+
"react-responsive": "9.0.0",
106112
"react-style-proptype": "3.2.2",
107-
"react-tabs": "2.3.1",
108-
"react-tooltip": "4.5.1",
113+
"react-tabs": "^5.2.0",
114+
"react-tooltip": "^4.5.1",
109115
"react-virtualized": "9.22.6",
110116
"react-visibility-sensor": "5.1.1",
111117
"redux-throttle": "0.1.1",
112118
"scratch-audio": "2.0.241",
113119
"scratch-blocks": "1.1.224",
114120
"scratch-l10n": "6.0.60",
115-
"scratch-paint": "3.0.339",
121+
"scratch-paint": "4.0.3",
116122
"scratch-render-fonts": "1.0.238",
117123
"scratch-storage": "4.1.8",
118124
"startaudiocontext": "1.2.1",
@@ -123,17 +129,19 @@
123129
"xhr": "2.6.0"
124130
},
125131
"peerDependencies": {
126-
"react": "^16.0.0",
127-
"react-dom": "^16.0.0",
128-
"react-redux": "^5.0.7",
129-
"redux": "^3.7.2"
132+
"react": "^18.0.0",
133+
"react-dom": "^18.0.0",
134+
"react-redux": "^8.0.0",
135+
"redux": "^4.0.0"
130136
},
131137
"devDependencies": {
132138
"@babel/cli": "7.28.3",
133139
"@babel/core": "7.28.4",
134140
"@babel/eslint-parser": "7.28.4",
135141
"@babel/preset-env": "7.28.3",
136142
"@babel/preset-react": "7.27.1",
143+
"@testing-library/jest-dom": "^5.16.5",
144+
"@testing-library/react": "^14.0.0",
137145
"@types/prop-types": "15.7.15",
138146
"@types/react-modal": "3.16.3",
139147
"@typescript-eslint/eslint-plugin": "8.7.0",
@@ -142,8 +150,6 @@
142150
"babel-loader": "9.2.1",
143151
"cheerio": "1.0.0-rc.3",
144152
"cross-env": "7.0.3",
145-
"enzyme": "3.11.0",
146-
"enzyme-adapter-react-16": "1.15.8",
147153
"eslint": "8.57.1",
148154
"eslint-config-scratch": "9.0.9",
149155
"eslint-import-resolver-webpack": "0.11.1",
@@ -157,7 +163,7 @@
157163
"jest-junit": "7.0.0",
158164
"mkdirp": "1.0.4",
159165
"raf": "3.4.1",
160-
"react-test-renderer": "16.14.0",
166+
"react-test-renderer": "18.2.0",
161167
"redux-mock-store": "1.5.5",
162168
"rimraf": "2.7.1",
163169
"scratch-semantic-release-config": "3.0.0",
@@ -182,8 +188,7 @@
182188
}
183189
},
184190
"setupFiles": [
185-
"raf/polyfill",
186-
"<rootDir>/test/helpers/enzyme-setup.js"
191+
"raf/polyfill"
187192
],
188193
"reporters": [
189194
"default",
@@ -194,6 +199,7 @@
194199
}
195200
]
196201
],
202+
"testEnvironment": "jsdom",
197203
"testPathIgnorePatterns": [
198204
"src/test.js"
199205
],
@@ -202,6 +208,9 @@
202208
"\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
203209
"editor-msgs(\\.js)?$": "<rootDir>/test/__mocks__/editor-msgs-mock.js"
204210
},
211+
"transformIgnorePatterns": [
212+
"/node_modules/(?!intl-messageformat|intl-messageformat-parser).+\\.js$"
213+
],
205214
"moduleFileExtensions": [
206215
"ts",
207216
"js",

‎packages/scratch-gui/src/components/alerts/alert.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import "../../css/colors.css";
33
@import "../../css/z-index.css";
44

5-
.alert {
5+
body .alert {
66
width: 100%;
77
display: flex;
88
flex-direction: row;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const InlineMessageComponent = ({
1414
}) => (
1515
<div
1616
className={classNames(styles.inlineMessage, styles[level])}
17+
aria-label="inline message"
1718
>
1819
{/* TODO: implement Rtl handling */}
1920
{iconSpinner && (

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

Lines changed: 85 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
4-
import {FormattedMessage, defineMessages, injectIntl, intlShape} from 'react-intl';
4+
import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
55
import DragConstants from '../../lib/drag-constants';
66
import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
77
import SpriteSelectorItem from '../../containers/sprite-selector-item.jsx';
@@ -47,111 +47,113 @@ const Backpack = ({
4747
dragOver,
4848
error,
4949
expanded,
50-
intl,
5150
loading,
5251
showMore,
5352
onToggle,
5453
onDelete,
5554
onMouseEnter,
5655
onMouseLeave,
5756
onMore
58-
}) => (
59-
<div className={styles.backpackContainer}>
60-
<div
61-
className={styles.backpackHeader}
62-
onClick={onToggle}
63-
>
64-
{onToggle ? (
65-
<FormattedMessage
66-
defaultMessage="Backpack"
67-
description="Button to open the backpack"
68-
id="gui.backpack.header"
69-
/>
70-
) : (
71-
<ComingSoonTooltip
72-
place="top"
73-
tooltipId="backpack-tooltip"
74-
>
57+
}) => {
58+
const intl = useIntl();
59+
return (
60+
<div className={styles.backpackContainer}>
61+
<div
62+
className={styles.backpackHeader}
63+
onClick={onToggle}
64+
>
65+
{onToggle ? (
7566
<FormattedMessage
7667
defaultMessage="Backpack"
7768
description="Button to open the backpack"
7869
id="gui.backpack.header"
7970
/>
80-
</ComingSoonTooltip>
81-
)}
82-
</div>
83-
{expanded ? (
84-
<div
85-
className={classNames(styles.backpackList, {
86-
[styles.dragOver]: dragOver || blockDragOver
87-
})}
88-
ref={containerRef}
89-
onMouseEnter={onMouseEnter}
90-
onMouseLeave={onMouseLeave}
91-
>
92-
{error ? (
93-
<div className={styles.statusMessage}>
71+
) : (
72+
<ComingSoonTooltip
73+
place="top"
74+
tooltipId="backpack-tooltip"
75+
>
9476
<FormattedMessage
95-
defaultMessage="Error loading backpack"
96-
description="Error backpack message"
97-
id="gui.backpack.errorBackpack"
77+
defaultMessage="Backpack"
78+
description="Button to open the backpack"
79+
id="gui.backpack.header"
9880
/>
99-
</div>
100-
) : (
101-
loading ? (
81+
</ComingSoonTooltip>
82+
)}
83+
</div>
84+
{expanded ? (
85+
<div
86+
className={classNames(styles.backpackList, {
87+
[styles.dragOver]: dragOver || blockDragOver
88+
})}
89+
ref={containerRef}
90+
onMouseEnter={onMouseEnter}
91+
onMouseLeave={onMouseLeave}
92+
>
93+
{error ? (
10294
<div className={styles.statusMessage}>
10395
<FormattedMessage
104-
defaultMessage="Loading..."
105-
description="Loading backpack message"
106-
id="gui.backpack.loadingBackpack"
96+
defaultMessage="Error loading backpack"
97+
description="Error backpack message"
98+
id="gui.backpack.errorBackpack"
10799
/>
108100
</div>
109101
) : (
110-
contents.length > 0 ? (
111-
<div className={styles.backpackListInner}>
112-
{contents.map(item => (
113-
<SpriteSelectorItem
114-
className={styles.backpackItem}
115-
costumeURL={item.thumbnailUrl}
116-
details={item.name}
117-
dragPayload={item}
118-
dragType={dragTypeMap[item.type]}
119-
id={item.id}
120-
key={item.id}
121-
name={intl.formatMessage(labelMap[item.type])}
122-
selected={false}
123-
onClick={noop}
124-
onDeleteButtonClick={onDelete}
125-
/>
126-
))}
127-
{showMore && (
128-
<button
129-
className={styles.more}
130-
onClick={onMore}
131-
>
132-
<FormattedMessage
133-
defaultMessage="More"
134-
description="Load more from backpack"
135-
id="gui.backpack.more"
136-
/>
137-
</button>
138-
)}
139-
</div>
140-
) : (
102+
loading ? (
141103
<div className={styles.statusMessage}>
142104
<FormattedMessage
143-
defaultMessage="Backpack is empty"
144-
description="Empty backpack message"
145-
id="gui.backpack.emptyBackpack"
105+
defaultMessage="Loading..."
106+
description="Loading backpack message"
107+
id="gui.backpack.loadingBackpack"
146108
/>
147109
</div>
110+
) : (
111+
contents.length > 0 ? (
112+
<div className={styles.backpackListInner}>
113+
{contents.map(item => (
114+
<SpriteSelectorItem
115+
className={styles.backpackItem}
116+
costumeURL={item.thumbnailUrl}
117+
details={item.name}
118+
dragPayload={item}
119+
dragType={dragTypeMap[item.type]}
120+
id={item.id}
121+
key={item.id}
122+
name={intl.formatMessage(labelMap[item.type])}
123+
selected={false}
124+
onClick={noop}
125+
onDeleteButtonClick={onDelete}
126+
/>
127+
))}
128+
{showMore && (
129+
<button
130+
className={styles.more}
131+
onClick={onMore}
132+
>
133+
<FormattedMessage
134+
defaultMessage="More"
135+
description="Load more from backpack"
136+
id="gui.backpack.more"
137+
/>
138+
</button>
139+
)}
140+
</div>
141+
) : (
142+
<div className={styles.statusMessage}>
143+
<FormattedMessage
144+
defaultMessage="Backpack is empty"
145+
description="Empty backpack message"
146+
id="gui.backpack.emptyBackpack"
147+
/>
148+
</div>
149+
)
148150
)
149-
)
150-
)}
151-
</div>
152-
) : null}
153-
</div>
154-
);
151+
)}
152+
</div>
153+
) : null}
154+
</div>
155+
);
156+
};
155157

156158
Backpack.propTypes = {
157159
blockDragOver: PropTypes.bool,
@@ -165,7 +167,6 @@ Backpack.propTypes = {
165167
dragOver: PropTypes.bool,
166168
error: PropTypes.bool,
167169
expanded: PropTypes.bool,
168-
intl: intlShape,
169170
loading: PropTypes.bool,
170171
onDelete: PropTypes.func,
171172
onMore: PropTypes.func,
@@ -186,4 +187,4 @@ Backpack.defaultProps = {
186187
onToggle: null
187188
};
188189

189-
export default injectIntl(Backpack);
190+
export default Backpack;

0 commit comments

Comments
 (0)