Skip to content

Commit 65d3021

Browse files
vivekbopaliyavivekbopaliya
committed
merged main
2 parents 24b3faa + e8bdb3b commit 65d3021

File tree

24 files changed

+370
-224
lines changed

24 files changed

+370
-224
lines changed

‎Dockerfile‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM node:16.20.2 AS base
1+
FROM node:16.14.2 AS base
22
ENV APP_HOME=/usr/src/app \
33
TERM=xterm
44
RUN mkdir -p $APP_HOME
@@ -9,18 +9,23 @@ EXPOSE 8002
99
FROM base AS development
1010
ENV NODE_ENV development
1111
COPY package.json package-lock.json ./
12-
13-
# ✅ Only increase timeout configs, don’t install latest npm
14-
RUN npm config set fetch-retries 5 && \
15-
npm config set fetch-retry-mintimeout 20000 && \
16-
npm config set fetch-retry-maxtimeout 120000 && \
17-
npm config set timeout 60000 && \
18-
npm install --legacy-peer-deps
19-
12+
RUN npm install
2013
COPY .babelrc index.js nodemon.json ./
2114
COPY ./webpack ./webpack
2215
COPY client ./client
2316
COPY server ./server
17+
COPY common ./common
2418
COPY translations/locales ./translations/locales
2519
COPY public ./public
2620
CMD ["npm", "start"]
21+
22+
FROM development AS build
23+
ENV NODE_ENV production
24+
RUN npm run build
25+
26+
FROM base AS production
27+
ENV NODE_ENV=production
28+
COPY package.json package-lock.json index.js ./
29+
RUN npm install --production
30+
COPY --from=build $APP_HOME/dist ./dist
31+
CMD ["npm", "run", "start:prod"]

‎client/common/icons.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import styled from 'styled-components';
4-
import { prop } from '../theme';
54
import SortArrowUp from '../images/sort-arrow-up.svg';
65
import SortArrowDown from '../images/sort-arrow-down.svg';
76
import Github from '../images/github.svg';
@@ -35,20 +34,20 @@ import Copy from '../images/copy.svg';
3534
function withLabel(SvgComponent) {
3635
const StyledIcon = styled(SvgComponent)`
3736
&&& {
38-
color: ${prop('Icon.default')};
37+
color: ${(props) => props.Icon?.default};
3938
& g,
4039
& path,
4140
& polygon {
4241
opacity: 1;
43-
fill: ${prop('Icon.default')};
42+
fill: ${(props) => props.Icon?.default};
4443
}
4544
&:hover {
46-
color: ${prop('Icon.hover')};
45+
color: ${(props) => props.Icon?.hover};
4746
& g,
4847
& path,
4948
& polygon {
5049
opacity: 1;
51-
fill: ${prop('Icon.hover')};
50+
fill: ${(props) => props.Icon?.hover};
5251
}
5352
}
5453
}

‎client/images/cross.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎client/modules/About/pages/About.jsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,10 +130,22 @@ const About = () => {
130130
<Link to="/code-of-conduct">{t('About.CodeOfConduct')}</Link>
131131
</div>
132132
<p>
133-
{t('About.WebEditor')}: <span>v{packageData?.version}</span>
133+
<a
134+
href="https://github.com/processing/p5.js-web-editor/releases"
135+
target="_blank"
136+
rel="noreferrer"
137+
>
138+
{t('About.WebEditor')}: <span>v{packageData?.version}</span>
139+
</a>
134140
</p>
135141
<p>
136-
p5.js: <span>v{p5version}</span>
142+
<a
143+
href="https://github.com/processing/p5.js/releases"
144+
target="_blank"
145+
rel="noreferrer"
146+
>
147+
p5.js: <span>v{p5version}</span>
148+
</a>
137149
</p>
138150
</Footer>
139151
</AboutPageContent>

‎client/modules/IDE/components/Banner.jsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { CrossIcon } from '../../../common/icons';
4+
5+
/**
6+
* Banner displays a dismissible announcement bar with a link and a close icon.
7+
* It's typically used to highlight opportunities, but use and design can be flexible.
8+
*
9+
* This component is **presentational only** — visibility logic (open/close state) should be
10+
* controlled by the parent via the `onClose` handler.
11+
*
12+
* @param {Object} props
13+
* @param {function} props.onClose - Function called when the user clicks the close (✕) button
14+
* @returns {JSX.Element} The banner component with a call-to-action link and a close button
15+
*
16+
* @example
17+
* const [showBanner, setShowBanner] = useState(true);
18+
*
19+
* {showBanner && (
20+
* <Banner onClose={() => setShowBanner(false)} />
21+
* )}
22+
*/
23+
24+
const Banner = ({ onClose }) => {
25+
// URL can be updated depending on the opportunity or announcement.
26+
const bannerURL = 'https://openprocessing.org/curation/89576';
27+
const bannerCopy = (
28+
<>
29+
We’re accepting p5.js sketches for a special curation exploring mental
30+
health and the newest features in p5.js 2.0!{' '}
31+
<span style={{ fontWeight: 600 }}>Submit by July 13!</span>
32+
</>
33+
);
34+
35+
return (
36+
<div className="banner">
37+
<a href={bannerURL}>{bannerCopy}</a>
38+
<button className="banner-close-button" onClick={onClose}>
39+
<CrossIcon Icon={{ default: '#000', hover: '#333' }} />
40+
</button>
41+
</div>
42+
);
43+
};
44+
45+
Banner.propTypes = {
46+
onClose: PropTypes.func.isRequired
47+
};
48+
49+
export default Banner;

‎client/modules/IDE/components/Editor/index.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,9 @@ class Editor extends React.Component {
169169
},
170170
Enter: 'emmetInsertLineBreak',
171171
Esc: 'emmetResetAbbreviation',
172+
[`Shift-${metaKey}-E`]: (cm) => {
173+
cm.getInputField().blur();
174+
},
172175
[`Shift-Tab`]: false,
173176
[`${metaKey}-Enter`]: () => null,
174177
[`Shift-${metaKey}-Enter`]: () => null,
@@ -552,7 +555,7 @@ class Editor extends React.Component {
552555
<section className={editorSectionClass}>
553556
<div className="editor__header">
554557
<button
555-
aria-label={this.props.t('Editor.OpenSketchARIA')}
558+
aria-label={this.props.t('Editor.CloseSketchARIA')}
556559
className="sidebar__contract"
557560
onClick={() => {
558561
this.props.collapseSidebar();
@@ -562,7 +565,7 @@ class Editor extends React.Component {
562565
<LeftArrowIcon focusable="false" aria-hidden="true" />
563566
</button>
564567
<button
565-
aria-label={this.props.t('Editor.CloseSketchARIA')}
568+
aria-label={this.props.t('Editor.OpenSketchARIA')}
566569
className="sidebar__expand"
567570
onClick={this.props.expandSidebar}
568571
>

‎client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
351351
>
352352
<test-file-stub
353353
aria-hidden="true"
354-
classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
354+
classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
355355
focusable="false"
356356
/>
357357
</button>
@@ -367,7 +367,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
367367
>
368368
<test-file-stub
369369
aria-hidden="true"
370-
classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
370+
classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
371371
focusable="false"
372372
/>
373373
</button>
@@ -962,7 +962,7 @@ exports[`Nav renders editor version for mobile 1`] = `
962962
>
963963
<test-file-stub
964964
aria-hidden="true"
965-
classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
965+
classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
966966
focusable="false"
967967
/>
968968
</button>
@@ -978,7 +978,7 @@ exports[`Nav renders editor version for mobile 1`] = `
978978
>
979979
<test-file-stub
980980
aria-hidden="true"
981-
classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
981+
classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
982982
focusable="false"
983983
/>
984984
</button>

‎client/modules/IDE/components/Preferences/Preferences.unit.test.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,7 @@ describe('<Preferences />', () => {
487487
});
488488

489489
describe('can toggle between general settings and accessibility tabs successfully', () => {
490-
it('can toggle sucessfully', () => {
490+
it('can toggle successfully', () => {
491491
// render the component with lineNumbers prop set to false
492492
subject({ lineNumbers: false });
493493

‎client/modules/IDE/components/Preferences/index.jsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,12 @@ import {
2121
setLinewrap,
2222
setPreferencesTab
2323
} from '../../actions/preferences';
24-
import { p5SoundURL, p5URL, useP5Version } from '../../hooks/useP5Version';
24+
import {
25+
majorVersion,
26+
p5SoundURL,
27+
p5URL,
28+
useP5Version
29+
} from '../../hooks/useP5Version';
2530
import VersionPicker from '../VersionPicker';
2631
import { updateFileContent } from '../../actions/files';
2732
import { CmControllerContext } from '../../pages/IDEView';
@@ -55,7 +60,7 @@ export default function Preferences() {
5560
const timerRef = useRef(null);
5661
const pickerRef = useRef(null);
5762
const onChangeVersion = (version) => {
58-
const shouldShowStars = version.startsWith('2.');
63+
const shouldShowStars = majorVersion(version) === '2';
5964
const box = pickerRef.current?.getBoundingClientRect();
6065
if (shouldShowStars) {
6166
setShowStars({ left: box?.left || 0, top: box?.top || 0 });
@@ -578,17 +583,7 @@ export default function Preferences() {
578583
<input
579584
type="radio"
580585
onChange={() => {
581-
if (versionInfo.lastP5SoundURL) {
582-
// If the sketch previously used a nonstandard p5.sound
583-
// URL, restore that URL
584-
updateHTML(
585-
versionInfo.setP5SoundURL(versionInfo.lastP5SoundURL)
586-
);
587-
versionInfo.setLastP5SoundURL(undefined);
588-
} else {
589-
// Otherwise, turn on the default p5.sound URL
590-
updateHTML(versionInfo.setP5Sound(true));
591-
}
586+
updateHTML(versionInfo.setP5Sound(true));
592587
}}
593588
aria-label={`${t('Preferences.SoundAddon')} ${t(
594589
'Preferences.AddonOn'
@@ -605,12 +600,6 @@ export default function Preferences() {
605600
<input
606601
type="radio"
607602
onChange={() => {
608-
// If the previous p5.sound.js script tag is not the
609-
// default version that one will get via this toggle,
610-
// record it so we can give the option to put it back
611-
if (versionInfo.p5SoundURL !== p5SoundURL) {
612-
versionInfo.setLastP5SoundURL(versionInfo.p5SoundURL);
613-
}
614603
updateHTML(versionInfo.setP5Sound(false));
615604
}}
616605
aria-label={`${t('Preferences.SoundAddon')} ${t(
@@ -628,11 +617,20 @@ export default function Preferences() {
628617
>
629618
{t('Preferences.Off')}
630619
</label>
631-
{versionInfo.lastP5SoundURL && (
632-
<legend className="preference__warning">
633-
{t('Preferences.UndoSoundVersion')}
634-
</legend>
635-
)}
620+
<legend className="preference__warning">
621+
<a
622+
target="_blank"
623+
rel="noreferrer"
624+
href={`https://${
625+
versionInfo.isVersion2 ? 'beta.' : ''
626+
}p5js.org/reference/p5.sound`}
627+
>
628+
{t('Preferences.SoundReference').replace(
629+
'$VERSION',
630+
versionInfo.version
631+
)}
632+
</a>
633+
</legend>
636634
</fieldset>
637635
</div>
638636
<div className="preference">

‎client/modules/IDE/components/VersionPicker.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
55
import styled from 'styled-components';
66

77
import { prop } from '../../../theme';
8-
import { useP5Version, p5Versions } from '../hooks/useP5Version';
8+
import { useP5Version } from '../hooks/useP5Version';
9+
import { p5Versions } from '../../../../common/p5Versions';
910
import MenuItem from '../../../components/Dropdown/MenuItem';
1011
import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
1112
import { updateFileContent } from '../actions/files';

0 commit comments

Comments
 (0)