Merge branch 'develop' into fix-docs-pr-template

Author: sdass1918

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

@@ -26,13 +26,25 @@ import Filter from '../images/filter.svg';
 import Cross from '../images/cross.svg';
 import Copy from '../images/copy.svg';
 
+export interface IconColors {
+  default?: string;
+  hover?: string;
+}
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  'aria-label'?: string;
+  Icon?: IconColors;
+}
+
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
 
 // could also give these a default size, color, etc. based on the theme
 // Need to add size to these - like small icon, medium icon, large icon. etc.
-function withLabel(SvgComponent) {
-  const StyledIcon = styled(SvgComponent)`
+function withLabel(
+  SvgComponent: React.ComponentType<React.SVGProps<SVGSVGElement>>
+) {
+  const StyledIcon = styled(SvgComponent)<IconProps>`
     &&& {
       color: ${(props) => props.Icon?.default};
       & g,
@@ -53,27 +65,27 @@ function withLabel(SvgComponent) {
     }
   `;
 
-  const Icon = (props) => {
-    const { 'aria-label': ariaLabel } = props;
+  // Necessary because styled components inject a different type for the ref prop
+  type StyledIconProps = Omit<
+    React.ComponentProps<typeof StyledIcon>,
+    'ref'
+  > & {
+    ref?: React.Ref<SVGSVGElement>;
+  };
+
+  const Icon = (props: StyledIconProps) => {
+    const { 'aria-label': ariaLabel, ...rest } = props;
     if (ariaLabel) {
       return (
         <StyledIcon
-          {...props}
+          {...rest}
           aria-label={ariaLabel}
           role="img"
           focusable="false"
         />
       );
     }
-    return <StyledIcon {...props} aria-hidden focusable="false" />;
-  };
-
-  Icon.propTypes = {
-    'aria-label': PropTypes.string
-  };
-
-  Icon.defaultProps = {
-    'aria-label': null
+    return <StyledIcon {...rest} aria-hidden focusable="false" />;
   };
 
   return Icon;

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
+import type { TFunction } from 'react-i18next';
 import {
   AboutPageContent,
   Intro,
@@ -27,8 +27,34 @@ import packageData from '../../../../package.json';
 import HeartIcon from '../../../images/heart.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';
 import LogoIcon from '../../../images/p5js-square-logo.svg';
+import { RootState } from '../../../reducers';
 
-const AboutSection = ({ section, t }) => (
+export interface AboutSectionInfoItem {
+  url: string;
+  title: string;
+  description: string;
+}
+export interface AboutSectionInfoSection {
+  header: string;
+  items: AboutSectionInfoItem[];
+}
+export interface ContactSectionLink {
+  label: string;
+  href: string;
+}
+
+export interface AboutSectionProps {
+  section: AboutSectionInfoSection;
+  t: TFunction<'translation'>;
+}
+
+const AboutSection = ({
+  section,
+  t
+}: {
+  section: AboutSectionInfoSection;
+  t: TFunction<'translation'>;
+}) => (
   <Section>
     <h2>{t(section.header)}</h2>
     <SectionContainer>
@@ -47,11 +73,15 @@ const AboutSection = ({ section, t }) => (
   </Section>
 );
 
-const About = () => {
+export const About = () => {
   const { t } = useTranslation();
 
-  const p5version = useSelector((state) => {
-    const index = state.files.find((file) => file.name === 'index.html');
+  const p5version = useSelector((state: RootState) => {
+    const index = state.files.find(
+      (file: {
+        name: string /** TODO: update once files types are defined in server */;
+      }) => file.name === 'index.html'
+    );
     return index?.content.match(/\/p5@([\d.]+)\//)?.[1];
   });
 
@@ -91,7 +121,11 @@ const About = () => {
         </Intro>
 
         {AboutSectionInfo.map((section) => (
-          <AboutSection key={t(section.header)} section={section} t={t} />
+          <AboutSection
+            key={t(section.header) as string}
+            section={section}
+            t={t}
+          />
         ))}
 
         <Contact>
@@ -152,19 +186,3 @@ const About = () => {
     </RootPage>
   );
 };
-
-AboutSection.propTypes = {
-  section: PropTypes.shape({
-    header: PropTypes.string.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        url: PropTypes.string.isRequired,
-        title: PropTypes.string.isRequired,
-        description: PropTypes.string.isRequired
-      })
-    ).isRequired
-  }).isRequired,
-  t: PropTypes.func.isRequired
-};
-
-export default About;

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

@@ -1,4 +1,9 @@
-export const ContactSectionLinks = [
+import type {
+  ContactSectionLink,
+  AboutSectionInfoSection
+} from '../pages/About';
+
+export const ContactSectionLinks: ContactSectionLink[] = [
   {
     label: 'About.Github',
     href: 'https://github.com/processing/p5.js-web-editor'
@@ -22,7 +27,7 @@ export const ContactSectionLinks = [
   }
 ];
 
-export const AboutSectionInfo = [
+export const AboutSectionInfo: AboutSectionInfoSection[] = [
   {
     header: 'About.NewP5',
     items: [

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

@@ -351,7 +351,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+              classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
               focusable="false"
             />
           </button>
@@ -367,7 +367,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+            classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
             focusable="false"
           />
         </button>
@@ -971,7 +971,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+              classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
               focusable="false"
             />
           </button>
@@ -987,7 +987,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+            classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
             focusable="false"
           />
         </button>

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

@@ -21,12 +21,8 @@ import {
   setLinewrap,
   setPreferencesTab
 } from '../../actions/preferences';
-import {
-  majorVersion,
-  p5SoundURL,
-  p5URL,
-  useP5Version
-} from '../../hooks/useP5Version';
+import { majorVersion, p5URL, useP5Version } from '../../hooks/useP5Version';
+import p5SoundURL from '../../../../../common/p5URLs';
 import VersionPicker from '../VersionPicker';
 import { updateFileContent } from '../../actions/files';
 import { CmControllerContext } from '../../pages/IDEView';

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

@@ -3,24 +3,22 @@ import React, { useContext, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { currentP5Version, p5Versions } from '../../../../common/p5Versions';
+import {
+  p5SoundURLOldTemplate,
+  p5SoundURL,
+  p5PreloadAddonURL,
+  p5ShapesAddonURL,
+  p5DataAddonURL,
+  p5URLTemplate
+} from '../../../../common/p5URLs';
 
 export const majorVersion = (version) => version.split('.')[0];
 
-export const p5SoundURLOldTemplate =
-  'https://cdnjs.cloudflare.com/ajax/libs/p5.js/$VERSION/addons/p5.sound.min.js';
 export const p5SoundURLOld = p5SoundURLOldTemplate.replace(
   '$VERSION',
   currentP5Version
 );
-export const p5SoundURL =
-  'https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.sound.min.js';
-export const p5PreloadAddonURL =
-  'https://cdn.jsdelivr.net/npm/[email protected]/src/preload.js';
-export const p5ShapesAddonURL =
-  'https://cdn.jsdelivr.net/npm/[email protected]/src/shapes.js';
-export const p5DataAddonURL =
-  'https://cdn.jsdelivr.net/npm/[email protected]/src/data.js';
-export const p5URL = `https://cdn.jsdelivr.net/npm/p5@${currentP5Version}/lib/p5.js`;
+export const p5URL = p5URLTemplate.replace('$VERSION', currentP5Version);
 
 const P5VersionContext = React.createContext({});
 

client/modules/IDE/hooks/useP5Version.jsx

@@ -5,12 +5,14 @@ import {
   defaultCSS,
   defaultHTML
 } from '../../../../server/domain-objects/createDefaultFiles';
+import { parseUrlParams } from '../../../utils/parseURLParams';
 
 export const initialState = () => {
   const a = objectID().toHexString();
   const b = objectID().toHexString();
   const c = objectID().toHexString();
   const r = objectID().toHexString();
+  const params = parseUrlParams(window.location.href);
   return [
     {
       name: 'root',
@@ -32,7 +34,7 @@ export const initialState = () => {
     },
     {
       name: 'index.html',
-      content: defaultHTML,
+      content: defaultHTML(params),
       id: b,
       _id: b,
       fileType: 'file',

client/modules/IDE/reducers/files.js

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 import ReactMarkdown from 'react-markdown';
 import remarkSlug from 'remark-slug';
-import PropTypes from 'prop-types';
 import { remSize, prop } from '../../../theme';
 
 const PolicyContainerMain = styled.main`
@@ -48,16 +47,13 @@ const PolicyContainerMain = styled.main`
   }
 `;
 
-function PolicyContainer({ policy }) {
+export interface PolicyContainerProps {
+  policy: string;
+}
+export function PolicyContainer({ policy }: PolicyContainerProps) {
   return (
     <PolicyContainerMain>
       <ReactMarkdown remarkPlugins={[remarkSlug]}>{policy}</ReactMarkdown>
     </PolicyContainerMain>
   );
 }
-
-PolicyContainer.propTypes = {
-  policy: PropTypes.string.isRequired
-};
-
-export default PolicyContainer;

client/modules/Legal/components/PolicyContainer.jsx renamed to client/modules/Legal/components/PolicyContainer.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Legal from './Legal';
+import { Legal } from './Legal';
 
-function CodeOfConduct() {
+export function CodeOfConduct() {
   const { t } = useTranslation();
 
   return (
     <Legal policyFile="code-of-conduct.md" title={t('Legal.CodeOfConduct')} />
   );
 }
-
-export default CodeOfConduct;