fixes for react 19

frontend/web/packages/Bypass.tsx

@@ -44,7 +44,7 @@ const BypassDiv = styled.div`
  * WCAG 2.4.1
  * A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
  */
-const Bypass = (): JSX.Element | null => {
+const Bypass = (): React.JSX.Element | null => {
   const { pageRef: mainContent } = useScroll();
 
   const focus = useCallback(() => {

frontend/web/packages/app/contexts/AccessibilityContext.tsx

@@ -21,7 +21,7 @@ const defaultValue = {
 
 const AccessibilityContext = createContext<AccessibilityType>(defaultValue);
 
-export const AccessibilityProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
+export const AccessibilityProvider = ({ children }: { children: React.ReactNode }): React.JSX.Element => {
   const [cookies, setCookies] = useCookies(['accessibility']);
 
   const [cookiesWrapper, setCookiesWrapper] = useState(cookies);
@@ -86,7 +86,7 @@ export const AccessibilityProvider = ({ children }: { children: React.ReactNode
   };
 
   return (
-    <AccessibilityContext.Provider
+    <AccessibilityContext
       value={{
         ...defaultValue,
         paragraphWidth,
@@ -97,7 +97,7 @@ export const AccessibilityProvider = ({ children }: { children: React.ReactNode
       }}
     >
       {children}
-    </AccessibilityContext.Provider>
+    </AccessibilityContext>
   );
 };
 

frontend/web/packages/app/contexts/HeadContext.tsx

@@ -22,7 +22,7 @@ export const HeadProvider = ({
 }: {
   children: React.ReactNode;
   value: HeadValue | undefined;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const [t, setT] = useState(value.title);
   const [d, setD] = useState(value.description);
 
@@ -43,7 +43,7 @@ export const HeadProvider = ({
   );
 
   return (
-    <HeadContext.Provider
+    <HeadContext
       value={{
         title: t,
         updateTitle,
@@ -52,7 +52,7 @@ export const HeadProvider = ({
       }}
     >
       {children}
-    </HeadContext.Provider>
+    </HeadContext>
   );
 };
 

frontend/web/packages/app/contexts/ScrollContext.tsx

@@ -7,7 +7,7 @@ type ScrollType = {
   setScrollHeight: React.Dispatch<React.SetStateAction<number>>;
   pageDirection: 'up' | 'down' | undefined;
   setPageDirection: React.Dispatch<React.SetStateAction<'up' | 'down' | undefined>>;
-  pageRef: React.RefObject<HTMLDivElement> | null;
+  pageRef: React.RefObject<HTMLDivElement | null> | null;
 };
 
 const defaultValue: ScrollType = {
@@ -22,14 +22,14 @@ const defaultValue: ScrollType = {
 
 const ScrollContext = createContext<ScrollType>(defaultValue);
 
-export const ScrollProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
+export const ScrollProvider = ({ children }: { children: React.ReactNode }): React.JSX.Element => {
   const [top, setTop] = useState(defaultValue.top);
   const [scrollHeight, setScrollHeight] = useState(defaultValue.scrollHeight);
   const [pageDirection, setPageDirection] = useState(defaultValue.pageDirection);
   const pageRef = useRef<HTMLDivElement>(null);
 
   return (
-    <ScrollContext.Provider
+    <ScrollContext
       value={{
         ...defaultValue,
         top,
@@ -42,7 +42,7 @@ export const ScrollProvider = ({ children }: { children: React.ReactNode }): JSX
       }}
     >
       {children}
-    </ScrollContext.Provider>
+    </ScrollContext>
   );
 };
 

frontend/web/packages/app/contexts/UrlSearchParamsContext.tsx

@@ -12,8 +12,8 @@ export const QueryProvider = ({
 }: {
   children: React.ReactNode;
   query: UrlSearchParamsType;
-}): JSX.Element => {
-  return <UrlSearchParamsContext.Provider value={query ?? defaultValue}>{children}</UrlSearchParamsContext.Provider>;
+}): React.JSX.Element => {
+  return <UrlSearchParamsContext value={query ?? defaultValue}>{children}</UrlSearchParamsContext>;
 };
 
 export const QueryConsumer = UrlSearchParamsContext.Consumer;

frontend/web/packages/components/3D/Construction3D.client.tsx

@@ -2,15 +2,15 @@ import * as THREE from 'three';
 import { Theatre, PhysicsDebug } from './core';
 import { toConvexPolyhedronShapes } from './util';
 import { memo, Suspense, useMemo } from 'react';
-import { Canvas, PrimitiveProps, useLoader } from '@react-three/fiber';
+import { Canvas, useLoader } from '@react-three/fiber';
 import type { editable } from '@theatre/r3f';
 import { OrbitControls } from '@react-three/drei';
 import { Physics, usePlane, useCompoundBody, CompoundBodyProps } from '@react-three/cannon';
 import { A11yAnnouncer, A11ySection } from '@react-three/a11y';
 import { MTLLoader, OBJLoader } from 'three/examples/jsm/Addons.js';
 import { useUrlSearchParams } from 'packages/app/contexts/UrlSearchParamsContext';
 
-const Plane = ({ e }: { e: typeof editable }): JSX.Element => {
+const Plane = ({ e }: { e: typeof editable }): React.JSX.Element => {
   const [rotation, position]: [[number, number, number], [number, number, number]] = [
     [-1.57079632679, 0, 0],
     [0, -0.5, 0],
@@ -25,13 +25,7 @@ const Plane = ({ e }: { e: typeof editable }): JSX.Element => {
   }));
 
   return (
-    <e.mesh
-      // @ts-expect-error: ?
-      ref={ref}
-      theatreKey="floor"
-      position={[0, -0.5, 0]}
-      rotation={[-1.57079632679, 0, 0]}
-    >
+    <e.mesh ref={ref} theatreKey="floor" position={[0, -0.5, 0]} rotation={[-1.57079632679, 0, 0]}>
       <planeGeometry />
       <meshPhongMaterial transparent color="white" opacity={0} />
     </e.mesh>
@@ -41,10 +35,10 @@ const Plane = ({ e }: { e: typeof editable }): JSX.Element => {
 interface ConeProps {
   cone: THREE.Group;
   shapes: CompoundBodyProps['shapes'];
-  primitiveProps?: Omit<PrimitiveProps, 'object'>;
+  primitiveProps?: Partial<CompoundBodyProps>;
 }
 
-const Cone = ({ cone, shapes, primitiveProps }: ConeProps): JSX.Element => {
+const Cone = ({ cone, shapes, primitiveProps }: ConeProps): React.JSX.Element => {
   const [ref] = useCompoundBody(() => ({
     ...{
       shapes: shapes,
@@ -57,7 +51,7 @@ const Cone = ({ cone, shapes, primitiveProps }: ConeProps): JSX.Element => {
   return <primitive ref={ref} editableType="mesh" object={cone} scale={[5, 5, 5]} castShadow receieveShadow />;
 };
 
-const Construction3DClient = memo((): JSX.Element => {
+const Construction3DClient = memo((): React.JSX.Element => {
   const query = useUrlSearchParams();
   const theatre = query.has('theatrejs');
 

frontend/web/packages/components/3D/Construction3D.server.tsx

@@ -36,7 +36,7 @@ const UnderConstructionSection = styled.section`
   padding: ${(props) => props.theme.spacing.rem[300]};
 `;
 
-export default function Construction3DServer(): JSX.Element {
+export default function Construction3DServer(): React.JSX.Element {
   const query = useUrlSearchParams();
   const theatre = query.has('theatrejs');
 

frontend/web/packages/components/3D/TheatreContext.tsx

@@ -14,8 +14,8 @@ const defaultValue = {
 
 const TheatreContext = createContext<TheatreContextType>(defaultValue);
 
-export const TheatreProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
-  return <TheatreContext.Provider value={defaultValue}>{children}</TheatreContext.Provider>;
+export const TheatreProvider = ({ children }: { children: React.ReactNode }): React.JSX.Element => {
+  return <TheatreContext value={defaultValue}>{children}</TheatreContext>;
 };
 
 export const TheatreConsumer = TheatreContext.Consumer;

frontend/web/packages/components/3D/core.tsx

@@ -1,37 +1,44 @@
 import type { getProject } from '@theatre/core';
 import { useTheatre } from 'packages/components/3D/TheatreContext';
 import { editable } from '@theatre/r3f';
-import React, { ReactNode, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Debug } from '@react-three/cannon';
-import type { ThreeElements } from '@react-three/fiber';
-import { Line } from '@react-three/drei';
+// import type { ThreeElements } from '@react-three/fiber';
+// import { Line } from '@react-three/drei';
 import { DebugProvider } from '@react-three/cannon/dist/debug-provider';
 import { useUrlSearchParams } from 'packages/app/contexts/UrlSearchParamsContext';
 
+/**
+ * WTF was this for. I wrote it like 2 years ago... Deprecated when migrating to react 19
+ *
+ * I suspect it was to use normal elements instead of the editable on prod deploys since we don't need to
+ * be able to edit...? seemed smart at the time. TODO reimplement or investigate how theatre packs
+ * in production
+ */
 /**
  * Mock editable for production
  */
-const editableMock: {
-  [K in keyof typeof editable as K extends keyof ThreeElements ? K : never]: (
-    args: ThreeElements[Extract<keyof ThreeElements, K>],
-  ) => ReactNode;
-} & { line: unknown } = {
-  line: Line,
-  mesh: React.forwardRef((props, ref) => <mesh ref={ref} {...props} />),
-  lineSegments: React.forwardRef((props, ref) => <lineSegments ref={ref} {...props} />),
-  lineLoop: React.forwardRef((props, ref) => <lineLoop ref={ref} {...props} />),
-  points: React.forwardRef((props, ref) => <points ref={ref} {...props} />),
-  group: React.forwardRef((props, ref) => <group ref={ref} {...props} />),
-  perspectiveCamera: React.forwardRef((props, ref) => <perspectiveCamera ref={ref} {...props} />),
-  orthographicCamera: React.forwardRef((props, ref) => <orthographicCamera ref={ref} {...props} />),
-  spotLight: React.forwardRef((props, ref) => <spotLight ref={ref} {...props} />),
-  pointLight: React.forwardRef((props, ref) => <pointLight ref={ref} {...props} />),
-  directionalLight: React.forwardRef((props, ref) => <directionalLight ref={ref} {...props} />),
-  fog: React.forwardRef((props, ref) => <fog ref={ref} {...props} />),
-  primitive: React.forwardRef((props, ref) => <primitive ref={ref} object={props.object} {...props} />),
-  hemisphereLight: React.forwardRef((props, ref) => <hemisphereLight ref={ref} {...props} />),
-  ambientLight: React.forwardRef((props, ref) => <ambientLight ref={ref} {...props} />),
-};
+// const editableMock: {
+//   [K in keyof typeof editable as K extends keyof ThreeElements ? K : never]: (
+//     args: ThreeElements[Extract<keyof ThreeElements, K>],
+//   ) => ReactNode;
+// } & { line: unknown } = {
+//   line: Line,
+//   mesh: React.forwardRef((props, ref) => <mesh ref={ref} {...props} />),
+//   lineSegments: React.forwardRef((props, ref) => <lineSegments ref={ref} {...props} />),
+//   lineLoop: React.forwardRef((props, ref) => <lineLoop ref={ref} {...props} />),
+//   points: React.forwardRef((props, ref) => <points ref={ref} {...props} />),
+//   group: React.forwardRef((props, ref) => <group ref={ref} {...props} />),
+//   perspectiveCamera: React.forwardRef((props, ref) => <perspectiveCamera ref={ref} {...props} />),
+//   orthographicCamera: React.forwardRef((props, ref) => <orthographicCamera ref={ref} {...props} />),
+//   spotLight: React.forwardRef((props, ref) => <spotLight ref={ref} {...props} />),
+//   pointLight: React.forwardRef((props, ref) => <pointLight ref={ref} {...props} />),
+//   directionalLight: React.forwardRef((props, ref) => <directionalLight ref={ref} {...props} />),
+//   fog: React.forwardRef((props, ref) => <fog ref={ref} {...props} />),
+//   primitive: React.forwardRef((props, ref) => <primitive ref={ref} object={props.object} {...props} />),
+//   hemisphereLight: React.forwardRef((props, ref) => <hemisphereLight ref={ref} {...props} />),
+//   ambientLight: React.forwardRef((props, ref) => <ambientLight ref={ref} {...props} />),
+// };
 
 /**
  * only include Theatre.js Studio in "development" builds,
@@ -62,12 +69,12 @@ export function RenderOnThreeDev({
   DebugComponent,
   ...rest
 }: { children?: React.ReactNode } & {
-  DebugComponent: (...args: Parameters<typeof DebugProvider>) => JSX.Element;
-}): JSX.Element {
+  DebugComponent: (...args: Parameters<typeof DebugProvider>) => React.JSX.Element;
+}): React.JSX.Element {
   return useUrlSearchParams().get('3D_DEBUG') ? <DebugComponent {...rest} /> : <>{rest.children}</>;
 }
 
-export function PhysicsDebug(props: Parameters<typeof DebugProvider>[0]): JSX.Element {
+export function PhysicsDebug(props: Parameters<typeof DebugProvider>[0]): React.JSX.Element {
   return <RenderOnThreeDev DebugComponent={Debug} {...props} />;
 }
 
@@ -77,7 +84,11 @@ interface TheatreProps {
   render: (e: typeof editable) => React.ReactNode;
 }
 
-export const Theatre = ({ getProjectArgs = ['codyduongweb'], sheetArgs, render }: TheatreProps): JSX.Element | null => {
+export const Theatre = ({
+  getProjectArgs = ['codyduongweb'],
+  sheetArgs,
+  render,
+}: TheatreProps): React.JSX.Element | null => {
   const { getProject, SheetProvider } = useTheatre();
 
   const query = useUrlSearchParams();
@@ -89,7 +100,7 @@ export const Theatre = ({ getProjectArgs = ['codyduongweb'], sheetArgs, render }
    * If we aren't importing a state and deploying, then there is no need for the SheetProvider
    */
   if (!getProjectArgs[1]?.['state'] && process.env.NODE_ENV !== 'development') {
-    return <>{render(editableMock as unknown as typeof editable)}</>;
+    return <>{render(editable)}</>;
   }
 
   const demoSheet = getProject(...getProjectArgs)?.sheet(...sheetArgs);

frontend/web/packages/components/A/A.tsx

@@ -2,7 +2,7 @@ import { commoncss } from 'packages/style';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-export const ABase = forwardRef<HTMLAnchorElement, JSX.IntrinsicElements['a'] & { hoverColor?: string }>(
+export const ABase = forwardRef<HTMLAnchorElement, React.JSX.IntrinsicElements['a'] & { hoverColor?: string }>(
   ({ hoverColor: _, ...rest }, ref) => {
     return <a ref={ref} rel="noreferrer noopener" {...rest} />;
   },

frontend/web/packages/components/A/Link.tsx

@@ -21,7 +21,7 @@ const L2Wrapper = ({
   onClick,
   onKeyPress,
   ...rest
-}: Omit<LinkProps & React.RefAttributes<HTMLAnchorElement>, 'ref'>): JSX.Element => {
+}: Omit<LinkProps & React.RefAttributes<HTMLAnchorElement>, 'ref'>): React.JSX.Element => {
   const { pageRef } = useScroll();
 
   const scrollPageToTop = (): void => {
@@ -65,7 +65,7 @@ const StyledLinkWrapper = ({
   onClick,
   onKeyPress,
   ...rest
-}: Omit<LinkProps & React.RefAttributes<HTMLAnchorElement>, 'ref'>): JSX.Element => {
+}: Omit<LinkProps & React.RefAttributes<HTMLAnchorElement>, 'ref'>): React.JSX.Element => {
   const { pageRef } = useScroll();
 
   const scrollPageToTop = (): void => {

frontend/web/packages/components/Button/Button.tsx

@@ -103,7 +103,7 @@ export const Button = ({
   disabled,
   children,
   ...rest
-}: ButtonProps): JSX.Element => {
+}: ButtonProps): React.JSX.Element => {
   const className = classNames(oldClassName, {
     ['button-primary']: hierarchy == ButtonHierarchy.primary,
     ['button-secondary']: hierarchy == ButtonHierarchy.secondary,
@@ -114,6 +114,8 @@ export const Button = ({
 
   return (
     <ButtonStyled className={className} disabled={disabled} {...rest}>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore - there is some weird type mismatch between styled-components and react19. todo remove this compiler directive */}
       {children}
     </ButtonStyled>
   );

frontend/web/packages/components/ClientOnly.tsx

@@ -5,7 +5,7 @@ import React, { ComponentType } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type ClientOnlyProps<T extends ComponentType<any>> = {
   component: () => Promise<{ default: T }>;
-  fallback?: JSX.Element | null;
+  fallback?: React.JSX.Element | null;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

frontend/web/packages/components/Footer/Footer.tsx

@@ -123,7 +123,7 @@ const CopyrightText = styled.span`
   color: ${({ theme }) => theme.color.surface[100]};
 `;
 
-const Footer = (): JSX.Element => {
+const Footer = (): React.JSX.Element => {
   const theme = useTheme();
 
   return (

frontend/web/packages/components/Footer/FooterLink.tsx

@@ -28,7 +28,7 @@ type FooterLinkProps = Parameters<typeof StyledFooterLink>[0] & {
   children?: React.ReactNode;
 };
 
-const FooterLink = ({ to, children, ...rest }: FooterLinkProps): JSX.Element => {
+const FooterLink = ({ to, children, ...rest }: FooterLinkProps): React.JSX.Element => {
   return (
     <Li>
       <StyledFooterLink to={to} {...rest}>

frontend/web/packages/components/Input/Input.tsx

@@ -73,7 +73,7 @@ const Input = ({
   wrapperId,
   'aria-hidden': ariaHidden,
   ...rest
-}: InputProps): JSX.Element => {
+}: InputProps): React.JSX.Element => {
   const fallbackId = useId();
   const inputId = id ?? fallbackId;
   const inputWrapperClassName = classNames({

frontend/web/packages/components/Modal/Modal.stories.tsx

@@ -44,7 +44,7 @@
 //   color: #ffa600;
 // `;
 
-// const ModalContentItemFiller = (): JSX.Element => (
+// const ModalContentItemFiller = (): React.JSX.Element => (
 //   <ModalContentItem>CONTENT SLOT</ModalContentItem>
 // );