Pr05 -- Final cleanup & migrating client/modules/...

client/common/Button.tsx

@@ -92,6 +92,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
    * but React will automatically convert a boolean prop to the correct string value.
    */
   focusable?: boolean;
+  label?: string;
 }
 
 interface StyledButtonProps extends ButtonProps {

client/common/icons.jsx → 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/common/useSyncFormTranslations.ts

@@ -1,30 +1,32 @@
 import { useEffect, MutableRefObject } from 'react';
+import type { FormApi } from 'final-form';
 
-export interface FormLike {
-  getState(): { values: Record<string, unknown> };
-  reset(): void;
-  change(field: string, value: unknown): void;
-}
+// Generic FormLike that mirrors FormApi for any form value type
+export type FormLike<FormValues = Record<string, unknown>> = Pick<
+  FormApi<FormValues>,
+  'getState' | 'reset' | 'change'
+>;
 
 /**
  * This hook ensures that form values are preserved when the language changes.
  * @param formRef
  * @param language
  */
-export const useSyncFormTranslations = (
-  formRef: MutableRefObject<FormLike>,
+export const useSyncFormTranslations = <FormValues extends Record<string, any>>(
+  formRef: MutableRefObject<FormLike<FormValues> | null>,
   language: string
 ) => {
   useEffect(() => {
-    const form = formRef.current;
+    const form = formRef?.current;
     if (!form) return;
 
     const { values } = form.getState();
     form.reset();
 
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        form.change(field, values[field]);
+    (Object.keys(values) as (keyof FormValues)[]).forEach((field) => {
+      const value = values[field];
+      if (value !== undefined && value !== null && value !== '') {
+        form.change(field, value);
       }
     });
   }, [language]);

client/modules/About/pages/About.jsx → client/modules/About/pages/About.tsx

@@ -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/statics/aboutData.js → client/modules/About/statics/aboutData.ts

@@ -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/App/App.jsx

@@ -6,7 +6,7 @@ import { showReduxDevTools } from '../../store';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 import { setLanguage } from '../IDE/actions/preferences';
-import CookieConsent from '../User/components/CookieConsent';
+import { CookieConsent } from '../User/components/CookieConsent';
 
 function hideCookieConsent(pathname) {
   if (pathname.includes('/full/') || pathname.includes('/embed/')) {

client/modules/IDE/components/Header/Toolbar.jsx

@@ -20,7 +20,7 @@ import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
 import VersionIndicator from '../VersionIndicator';
-import VisibilityDropdown from '../../../User/components/VisibilityDropdown';
+import { VisibilityDropdown } from '../../../User/components/VisibilityDropdown';
 import { changeVisibility } from '../../actions/project';
 
 const Toolbar = (props) => {

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

@@ -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/SketchListRowBase.jsx

@@ -10,7 +10,7 @@ import { TableDropdown } from '../../../components/Dropdown/TableDropdown';
 import { MenuItem } from '../../../components/Dropdown/MenuItem';
 import { formatDateToString } from '../../../utils/formatDate';
 import { getConfig } from '../../../utils/getConfig';
-import VisibilityDropdown from '../../User/components/VisibilityDropdown';
+import { VisibilityDropdown } from '../../User/components/VisibilityDropdown';
 
 const ROOT_URL = getConfig('API_URL');
 

client/modules/Legal/components/PolicyContainer.jsx → client/modules/Legal/components/PolicyContainer.tsx

@@ -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/pages/CodeOfConduct.jsx → client/modules/Legal/pages/CodeOfConduct.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;