Pr05/migrate client components rebuild -- OPENING FOR DIFF

README.md

@@ -14,7 +14,7 @@ Stay in touch with Processing Foundation across other platforms:
 - [Instagram](https://www.instagram.com/p5xjs)
 - [Youtube](https://www.youtube.com/@ProcessingFoundation)
 - [X](https://x.com/p5xjs)
-- Discord (invitation link coming soon!)
+- [Discord](https://discord.com/invite/esmGA6H6wm)
 - [Forum](https://discourse.processing.org)
 
 

client/common/ButtonOrLink.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 /**
  * Accepts all the props of an HTML <a> or <button> tag.
  */
-export interface ButtonOrLinkProps {
+export interface ButtonOrLinkProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Can be internal or external ('http'- or 'https'-).
    */

client/common/useKeyDownHandlers.ts

@@ -1,9 +1,9 @@
 import { mapKeys } from 'lodash';
-import { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { isMac } from '../utils/device';
 
 /** Function to call upon keydown */
-export type KeydownHandler = (e: KeyboardEvent) => void;
+export type KeydownHandler = (e: KeyboardEvent | React.KeyboardEvent) => void;
 /** An object mapping from keys like 'ctrl-s' or 'ctrl-shift-1' to handlers. */
 export type KeydownHandlerMap = Record<string, KeydownHandler>;
 

client/common/useModalClose.ts

@@ -18,11 +18,11 @@ import { useKeyDownHandlers } from './useKeyDownHandlers';
  * @param passedRef - Optional ref to the modal element. If not provided, one is created internally.
  * @returns A ref to be attached to the modal DOM element
  */
-export function useModalClose(
+export function useModalClose<T extends HTMLElement = HTMLElement>(
   onClose: () => void,
-  passedRef?: MutableRefObject<HTMLElement | null>
-): MutableRefObject<HTMLElement | null> {
-  const createdRef = useRef<HTMLElement | null>(null);
+  passedRef?: MutableRefObject<T | null>
+): MutableRefObject<T | null> {
+  const createdRef = useRef<T | null>(null);
   const modalRef = passedRef ?? createdRef;
 
   useEffect(() => {

client/common/usePrevious.ts

@@ -5,8 +5,8 @@ import { useEffect, useRef } from 'react';
  * @param value - The current value to track.
  * @returns The previous value before the current render, or undefined if none.
  */
-export function usePrevious(value: unknown): unknown | undefined {
-  const ref = useRef<unknown>();
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
 
   useEffect(() => {
     ref.current = value;