Merge branch 'develop' into dependabot/npm_and_yarn/min-document-2.19.1

Author: raclim

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,6 +6,7 @@ I have verified that this pull request:
 
 * [ ] has no linting errors (`npm run lint`)
 * [ ] has no test errors (`npm run test`)
+* [ ] has no typecheck errors (`npm run typecheck`)
 * [ ] is from a uniquely-named feature branch and is up to date with the  `develop` branch.
 * [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`
 * [ ] meets the standards outlined in the [accessibility guidelines](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/accessibility.md)

client/common/Button.tsx

@@ -80,7 +80,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * If using a native button, specifies on an onClick action
    */
-  onClick?: () => void;
+  onClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * If using a button, then type is defines the type of button
    */

client/common/useSyncFormTranslations.ts

@@ -1,30 +1,30 @@
 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 interface FormLike<FormValues = Record<string, unknown>>
+  extends 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/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/actions/preferences.ts

@@ -6,7 +6,6 @@ import type {
   UpdatePreferencesDispatch,
   SetPreferencesTabValue,
   SetFontSizeValue,
-  GetRootState,
   SetLineNumbersValue,
   SetAutocloseBracketsQuotesValue,
   SetAutocompleteHinterValue,
@@ -20,6 +19,7 @@ import type {
   SetLanguageValue,
   SetThemeValue
 } from './preferences.types';
+import type { GetRootState } from '../../../reducers';
 
 function updatePreferences(
   formParams: UpdatePreferencesRequestBody,

client/modules/IDE/actions/preferences.types.ts

@@ -1,6 +1,6 @@
 import * as ActionTypes from '../../../constants';
 import type { PreferencesState } from '../reducers/preferences';
-import type { RootState } from '../../../reducers';
+import type { GetRootState } from '../../../reducers';
 
 // Value Definitions:
 export type SetPreferencesTabValue = PreferencesState['tabIndex'];
@@ -112,5 +112,3 @@ export type PreferencesThunk = (
   dispatch: UpdatePreferencesDispatch,
   getState: GetRootState
 ) => void;
-
-export type GetRootState = () => RootState;

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/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/IDE/components/VersionPicker.jsx

@@ -77,9 +77,23 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
   return (
     <VersionDropdownMenu
       className="versionPicker"
+      aria-label="Select p5.js version"
       anchor={
         <VersionPickerButton ref={ref}>
-          <VersionPickerText>{versionInfo.version}</VersionPickerText>
+          <VersionPickerText>
+            {versionInfo
+              ? (() => {
+                  const current = p5Versions.find((v) =>
+                    typeof v === 'string'
+                      ? v === versionInfo.version
+                      : v.version === versionInfo.version
+                  );
+                  if (!current) return versionInfo.version;
+                  if (typeof current === 'string') return current;
+                  return `${current.version} ${current.label}`;
+                })()
+              : t('Toolbar.CustomLibraryVersion')}
+          </VersionPickerText>
           <VersionPickerArrow>
             <DropdownArrowIcon />
           </VersionPickerArrow>
@@ -88,11 +102,20 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
       align="left"
       maxHeight="50vh"
     >
-      {p5Versions.map((version) => (
-        <MenuItem key={version} onClick={() => dispatchReplaceVersion(version)}>
-          {version}
-        </MenuItem>
-      ))}
+      {p5Versions.map((item) => {
+        const version = typeof item === 'string' ? item : item.version;
+        const label =
+          typeof item === 'string' ? item : `${item.version} ${item.label}`;
+
+        return (
+          <MenuItem
+            key={version}
+            onClick={() => dispatchReplaceVersion(version)}
+          >
+            {label}
+          </MenuItem>
+        );
+      })}
     </VersionDropdownMenu>
   );
 });

client/modules/IDE/hooks/useP5Version.jsx

@@ -60,7 +60,10 @@ export function P5VersionProvider(props) {
         if (!match) return null;
 
         // See if this is a version we recognize
-        if (p5Versions.includes(match[1])) {
+        const versionExists = p5Versions.some((v) =>
+          typeof v === 'string' ? v === match[1] : v.version === match[1]
+        );
+        if (versionExists) {
           return { version: match[1], minified: !!match[2], scriptNode };
         }
         return null;