Skip to content

Commit 6a5b6e0

Browse files
raclimraclim
committed
Merge branch 'release-2.19.2' into release
2 parents dcf6326 + f194fec commit 6a5b6e0

38 files changed

Lines changed: 1124 additions & 435 deletions

client/common/icons.jsx renamed to client/common/icons.tsx

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,25 @@ import Filter from '../images/filter.svg';
2626
import Cross from '../images/cross.svg';
2727
import Copy from '../images/copy.svg';
2828

29+
export interface IconColors {
30+
default?: string;
31+
hover?: string;
32+
}
33+
34+
export interface IconProps extends React.SVGProps<SVGSVGElement> {
35+
'aria-label'?: string;
36+
Icon?: IconColors;
37+
}
38+
2939
// HOC that adds the right web accessibility props
3040
// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
3141

3242
// could also give these a default size, color, etc. based on the theme
3343
// Need to add size to these - like small icon, medium icon, large icon. etc.
34-
function withLabel(SvgComponent) {
35-
const StyledIcon = styled(SvgComponent)`
44+
function withLabel(
45+
SvgComponent: React.ComponentType<React.SVGProps<SVGSVGElement>>
46+
) {
47+
const StyledIcon = styled(SvgComponent)<IconProps>`
3648
&&& {
3749
color: ${(props) => props.Icon?.default};
3850
& g,
@@ -53,27 +65,27 @@ function withLabel(SvgComponent) {
5365
}
5466
`;
5567

56-
const Icon = (props) => {
57-
const { 'aria-label': ariaLabel } = props;
68+
// Necessary because styled components inject a different type for the ref prop
69+
type StyledIconProps = Omit<
70+
React.ComponentProps<typeof StyledIcon>,
71+
'ref'
72+
> & {
73+
ref?: React.Ref<SVGSVGElement>;
74+
};
75+
76+
const Icon = (props: StyledIconProps) => {
77+
const { 'aria-label': ariaLabel, ...rest } = props;
5878
if (ariaLabel) {
5979
return (
6080
<StyledIcon
61-
{...props}
81+
{...rest}
6282
aria-label={ariaLabel}
6383
role="img"
6484
focusable="false"
6585
/>
6686
);
6787
}
68-
return <StyledIcon {...props} aria-hidden focusable="false" />;
69-
};
70-
71-
Icon.propTypes = {
72-
'aria-label': PropTypes.string
73-
};
74-
75-
Icon.defaultProps = {
76-
'aria-label': null
88+
return <StyledIcon {...rest} aria-hidden focusable="false" />;
7789
};
7890

7991
return Icon;

client/modules/About/About.styles.js renamed to client/modules/About/About.styles.ts

File renamed without changes.

client/modules/About/pages/About.jsx renamed to client/modules/About/pages/About.tsx

Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
2-
import PropTypes from 'prop-types';
32
import { useSelector } from 'react-redux';
43
import { Helmet } from 'react-helmet';
54
import { useTranslation } from 'react-i18next';
65
import { Link } from 'react-router-dom';
76

7+
import type { TFunction } from 'react-i18next';
88
import {
99
AboutPageContent,
1010
Intro,
@@ -27,8 +27,34 @@ import packageData from '../../../../package.json';
2727
import HeartIcon from '../../../images/heart.svg';
2828
import AsteriskIcon from '../../../images/p5-asterisk.svg';
2929
import LogoIcon from '../../../images/p5js-square-logo.svg';
30+
import { RootState } from '../../../reducers';
3031

31-
const AboutSection = ({ section, t }) => (
32+
export interface AboutSectionInfoItem {
33+
url: string;
34+
title: string;
35+
description: string;
36+
}
37+
export interface AboutSectionInfoSection {
38+
header: string;
39+
items: AboutSectionInfoItem[];
40+
}
41+
export interface ContactSectionLink {
42+
label: string;
43+
href: string;
44+
}
45+
46+
export interface AboutSectionProps {
47+
section: AboutSectionInfoSection;
48+
t: TFunction<'translation'>;
49+
}
50+
51+
const AboutSection = ({
52+
section,
53+
t
54+
}: {
55+
section: AboutSectionInfoSection;
56+
t: TFunction<'translation'>;
57+
}) => (
3258
<Section>
3359
<h2>{t(section.header)}</h2>
3460
<SectionContainer>
@@ -47,11 +73,15 @@ const AboutSection = ({ section, t }) => (
4773
</Section>
4874
);
4975

50-
const About = () => {
76+
export const About = () => {
5177
const { t } = useTranslation();
5278

53-
const p5version = useSelector((state) => {
54-
const index = state.files.find((file) => file.name === 'index.html');
79+
const p5version = useSelector((state: RootState) => {
80+
const index = state.files.find(
81+
(file: {
82+
name: string /** TODO: update once files types are defined in server */;
83+
}) => file.name === 'index.html'
84+
);
5585
return index?.content.match(/\/p5@([\d.]+)\//)?.[1];
5686
});
5787

@@ -91,7 +121,11 @@ const About = () => {
91121
</Intro>
92122

93123
{AboutSectionInfo.map((section) => (
94-
<AboutSection key={t(section.header)} section={section} t={t} />
124+
<AboutSection
125+
key={t(section.header) as string}
126+
section={section}
127+
t={t}
128+
/>
95129
))}
96130

97131
<Contact>
@@ -152,19 +186,3 @@ const About = () => {
152186
</RootPage>
153187
);
154188
};
155-
156-
AboutSection.propTypes = {
157-
section: PropTypes.shape({
158-
header: PropTypes.string.isRequired,
159-
items: PropTypes.arrayOf(
160-
PropTypes.shape({
161-
url: PropTypes.string.isRequired,
162-
title: PropTypes.string.isRequired,
163-
description: PropTypes.string.isRequired
164-
})
165-
).isRequired
166-
}).isRequired,
167-
t: PropTypes.func.isRequired
168-
};
169-
170-
export default About;

client/modules/About/statics/aboutData.js renamed to client/modules/About/statics/aboutData.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
export const ContactSectionLinks = [
1+
import type {
2+
ContactSectionLink,
3+
AboutSectionInfoSection
4+
} from '../pages/About';
5+
6+
export const ContactSectionLinks: ContactSectionLink[] = [
27
{
38
label: 'About.Github',
49
href: 'https://github.com/processing/p5.js-web-editor'
@@ -22,7 +27,7 @@ export const ContactSectionLinks = [
2227
}
2328
];
2429

25-
export const AboutSectionInfo = [
30+
export const AboutSectionInfo: AboutSectionInfoSection[] = [
2631
{
2732
header: 'About.NewP5',
2833
items: [

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { Trans } from 'react-i18next';
34
import { CrossIcon } from '../../../common/icons';
45

56
/**
@@ -23,12 +24,11 @@ import { CrossIcon } from '../../../common/icons';
2324

2425
const Banner = ({ onClose }) => {
2526
// URL can be updated depending on the opportunity or announcement.
26-
const bannerURL = 'https://openprocessing.org/curation/89576';
27+
const bannerURL = 'https://processingfoundation.org/donate';
28+
2729
const bannerCopy = (
2830
<>
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 20!</span>
31+
<Trans i18nKey="Banner.Copy" components={{ bold: <strong /> }} />
3232
</>
3333
);
3434

‎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 kjSZIe"
354+
classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
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 kjSZIe"
370+
classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
371371
focusable="false"
372372
/>
373373
</button>
@@ -971,7 +971,7 @@ exports[`Nav renders editor version for mobile 1`] = `
971971
>
972972
<test-file-stub
973973
aria-hidden="true"
974-
classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
974+
classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
975975
focusable="false"
976976
/>
977977
</button>
@@ -987,7 +987,7 @@ exports[`Nav renders editor version for mobile 1`] = `
987987
>
988988
<test-file-stub
989989
aria-hidden="true"
990-
classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
990+
classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
991991
focusable="false"
992992
/>
993993
</button>

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,8 @@ import {
2121
setLinewrap,
2222
setPreferencesTab
2323
} from '../../actions/preferences';
24-
import {
25-
majorVersion,
26-
p5SoundURL,
27-
p5URL,
28-
useP5Version
29-
} from '../../hooks/useP5Version';
24+
import { majorVersion, p5URL, useP5Version } from '../../hooks/useP5Version';
25+
import { p5SoundURL } from '../../../../../common/p5URLs';
3026
import VersionPicker from '../VersionPicker';
3127
import { updateFileContent } from '../../actions/files';
3228
import { CmControllerContext } from '../../pages/IDEView';

‎client/modules/IDE/hooks/useP5Version.jsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,22 @@ import React, { useContext, useMemo } from 'react';
33
import { useSelector } from 'react-redux';
44
import PropTypes from 'prop-types';
55
import { currentP5Version, p5Versions } from '../../../../common/p5Versions';
6+
import {
7+
p5SoundURLOldTemplate,
8+
p5SoundURL,
9+
p5PreloadAddonURL,
10+
p5ShapesAddonURL,
11+
p5DataAddonURL,
12+
p5URLTemplate
13+
} from '../../../../common/p5URLs';
614

715
export const majorVersion = (version) => version.split('.')[0];
816

9-
export const p5SoundURLOldTemplate =
10-
'https://cdnjs.cloudflare.com/ajax/libs/p5.js/$VERSION/addons/p5.sound.min.js';
1117
export const p5SoundURLOld = p5SoundURLOldTemplate.replace(
1218
'$VERSION',
1319
currentP5Version
1420
);
15-
export const p5SoundURL =
16-
'https://cdn.jsdelivr.net/npm/p5.sound@0.2.0/dist/p5.sound.min.js';
17-
export const p5PreloadAddonURL =
18-
'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.2.0/src/preload.js';
19-
export const p5ShapesAddonURL =
20-
'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.2.0/src/shapes.js';
21-
export const p5DataAddonURL =
22-
'https://cdn.jsdelivr.net/npm/p5.js-compatibility@0.2.0/src/data.js';
23-
export const p5URL = `https://cdn.jsdelivr.net/npm/p5@${currentP5Version}/lib/p5.js`;
21+
export const p5URL = p5URLTemplate.replace('$VERSION', currentP5Version);
2422

2523
const P5VersionContext = React.createContext({});
2624

‎client/modules/IDE/pages/IDEView.jsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,13 @@ import useIsMobile from '../hooks/useIsMobile';
2929
import Banner from '../components/Banner';
3030
import { P5VersionProvider } from '../hooks/useP5Version';
3131

32+
const BANNER_DISMISS_KEY = 'bannerLastDismissedAt';
33+
const BANNER_COOLDOWN_MINUTES = 30;
34+
35+
function minutesSince(timestamp) {
36+
return (Date.now() - timestamp) / (1000 * 60);
37+
}
38+
3239
function getTitle(project) {
3340
const { id } = project;
3441
return id ? `p5.js Web Editor | ${project.name}` : 'p5.js Web Editor';
@@ -106,7 +113,7 @@ const IDEView = () => {
106113
const [sidebarSize, setSidebarSize] = useState(160);
107114
const [isOverlayVisible, setIsOverlayVisible] = useState(false);
108115
const [MaxSize, setMaxSize] = useState(window.innerWidth);
109-
const [displayBanner, setDisplayBanner] = useState(false);
116+
const [displayBanner, setDisplayBanner] = useState(true);
110117

111118
const cmRef = useRef({});
112119

@@ -151,6 +158,7 @@ const IDEView = () => {
151158
}
152159
};
153160
}, [shouldAutosave, dispatch]);
161+
154162
useEffect(() => {
155163
const updateInnerWidth = (e) => {
156164
setMaxSize(e.target.innerWidth);
@@ -163,6 +171,29 @@ const IDEView = () => {
163171
};
164172
}, [setMaxSize]);
165173

174+
// checks how long banner has been closed for to hide banner
175+
useEffect(() => {
176+
const stored = window.localStorage.getItem(BANNER_DISMISS_KEY);
177+
const lastClosedAt = stored ? Number(stored) : null;
178+
179+
if (!lastClosedAt) {
180+
setDisplayBanner(true);
181+
return;
182+
}
183+
184+
if (minutesSince(lastClosedAt) >= BANNER_COOLDOWN_MINUTES) {
185+
setDisplayBanner(true);
186+
} else {
187+
setDisplayBanner(false);
188+
}
189+
}, []);
190+
191+
const handleBannerClose = () => {
192+
setDisplayBanner(false);
193+
194+
window.localStorage.setItem(BANNER_DISMISS_KEY, String(Date.now()));
195+
};
196+
166197
const consoleCollapsedSize = 29;
167198
const currentConsoleSize = ide.consoleIsExpanded
168199
? consoleSize
@@ -173,7 +204,7 @@ const IDEView = () => {
173204
<Helmet>
174205
<title>{getTitle(project)}</title>
175206
</Helmet>
176-
{displayBanner && <Banner onClose={() => setDisplayBanner(false)} />}
207+
{displayBanner && <Banner onClose={handleBannerClose} />}
177208
<IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
178209
<WarnIfUnsavedChanges />
179210
<Toast />

‎client/modules/IDE/reducers/files.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import {
55
defaultCSS,
66
defaultHTML
77
} from '../../../../server/domain-objects/createDefaultFiles';
8+
import { parseUrlParams } from '../../../utils/parseURLParams';
89

910
export const initialState = () => {
1011
const a = objectID().toHexString();
1112
const b = objectID().toHexString();
1213
const c = objectID().toHexString();
1314
const r = objectID().toHexString();
15+
const params = parseUrlParams(window.location.href);
1416
return [
1517
{
1618
name: 'root',
@@ -32,7 +34,7 @@ export const initialState = () => {
3234
},
3335
{
3436
name: 'index.html',
35-
content: defaultHTML,
37+
content: defaultHTML(params),
3638
id: b,
3739
_id: b,
3840
fileType: 'file',

0 commit comments

Comments
 (0)