react 18 fixes except react-table

Author: OliverDudgeon

components/BaseCard.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
 import { useState } from "react";
 
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -18,10 +18,12 @@ import {
  * {@label ActionsParams}
  */
 export interface ActionsParams {
-  setExpanded: (isExpanded: boolean) => void;
+  [key: string]: unknown;
+  setExpanded: Dispatch<SetStateAction<boolean>>;
 }
 
 export interface BaseCardProps {
+  children?: ReactNode;
   /**
    * ReactNode or Component to render in the <CardActions> component. Optional - nothing is
    * displayed if not passed.
@@ -30,12 +32,12 @@ export interface BaseCardProps {
    *
    * {@label actions}
    */
-  actions?: React.ReactNode | ((actionsParams: ActionsParams) => React.ReactNode);
+  actions?: ReactNode | ((actionsParams: ActionsParams) => ReactNode);
   /**
    * ReactNode to be rendered inside the collapsed part of the card. Optional - nothing is
    * displayed if not passed.
    */
-  collapsed?: React.ReactNode;
+  collapsed?: ReactNode;
   /**
    * Whether the card is collapsed by default. Optional. Defaults to `true`.
    */
@@ -65,14 +67,14 @@ export interface BaseCardProps {
  * * an optional collapsed view that can be enabled by default
  * * children are passed into the main area (unexpanded view) of the component
  */
-export const BaseCard: FC<BaseCardProps> = ({
+export const BaseCard = ({
   children,
   actions,
   header,
   collapsed,
   keepCollapsedMounted = true,
   collapsedByDefault = true,
-}) => {
+}: BaseCardProps) => {
   const [hasExpanded, setHasExpanded] = useState(!collapsedByDefault);
   const [expanded, setExpanded] = useState(!collapsedByDefault);
 

components/PageSection/PageSection.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 
 import { Box, Typography } from "@mui/material";
 
@@ -7,6 +7,7 @@ import type { PageSectionLevel } from "./types";
 import { usePageSectionContext } from "./usePageSectionContext";
 
 export interface PageSectionProps {
+  children: ReactNode;
   /**
    * If provided, overrides the derived level from PageSectionContext. Used for displaying a heading
    * element.

components/PageSection/PageSectionProvider.tsx

@@ -1,13 +1,17 @@
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import { useMemo } from "react";
 
 import { PageSectionContext } from "./PageSectionContext";
 import type { PageSectionContextType } from "./types";
 
+export interface PageSectionProviderProps extends PageSectionContextType {
+  children: ReactNode;
+}
+
 /**
  * A context provider for `PageSectionContext` context.
  */
-export const PageSectionProvider: FC<PageSectionContextType> = ({ children, level }) => {
+export const PageSectionProvider: FC<PageSectionProviderProps> = ({ children, level }) => {
   const contextValue = useMemo<PageSectionContextType>(() => {
     return { level };
   }, [level]);

components/app/ThemeProviders.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import { useEffect, useState } from "react";
 
 import { generateThemes } from "@squonk/mui-theme";
@@ -10,10 +10,14 @@ import { useColorScheme } from "../../state/colorScheme";
 
 const { darkTheme, lightTheme } = generateThemes();
 
+export interface ThemeProvidersProps {
+  children: ReactNode;
+}
+
 /**
  * Provides the theme for Mui and emotion
  */
-export const ThemeProviders: FC = ({ children }) => {
+export const ThemeProviders: FC<ThemeProvidersProps> = ({ children }) => {
   // Color Scheme
   const [scheme] = useColorScheme();
   const [theme, setTheme] = useState(lightTheme);

components/auth/RoleRequired.tsx

@@ -1,10 +1,11 @@
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 
 import Error from "next/error";
 
 import { useKeycloakUser } from "../../hooks/useKeycloakUser";
 
 export interface RoleRequiredProps {
+  children?: ReactNode;
   /**
    * Roles the user is required to have.
    */

components/finance/ProductCharges.tsx

@@ -131,7 +131,10 @@ export const ProductCharges = ({ productId }: ProductChargesProps) => {
                   <TableCell>{charge.item_number}</TableCell>
                   <TableCell>{charge.date}</TableCell>
                   {/* TODO: assert additional_data to interface from data-manager-client when it's updated */}
-                  <TableCell>{filesize(charge.additional_data?.peak_bytes ?? 0)}</TableCell>
+                  {/* TODO: replace the static type assertion with a proper assertion or find way to get string response only from filesize */}
+                  <TableCell>
+                    {filesize(charge.additional_data?.peak_bytes ?? 0) as string}
+                  </TableCell>
                   <TableCell>{formatCoins(charge.coins)}</TableCell>
                 </TableRow>
               ))

components/modals/ModalWrapper.tsx

@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import {
   Button,
@@ -14,6 +16,7 @@ import { SlideUpTransition } from "../SlideUpTransition";
 import type { BaseModalWrapperProps } from "./types";
 
 export interface ModalWrapperProps extends BaseModalWrapperProps {
+  children: ReactNode;
   /**
    * Called when the primary action is clicked
    */

components/results/ResultCard.tsx

@@ -13,14 +13,14 @@ import { DateTimeListItem } from "./DateTimeListItem";
 import type { StatusIconProps } from "./StatusIcon";
 import { StatusIcon } from "./StatusIcon";
 
-export interface ResultCardProps extends BaseCardProps {
+export interface ResultCardProps extends Omit<BaseCardProps, "actions"> {
   state?: StatusIconProps["state"];
   href: LinkProps["href"];
   linkTitle: string;
   createdDateTime: DateTimeListItemProps["datetimeString"];
   collapsedByDefault: boolean;
   actions: (
-    params: ActionsParams & { setSlideIn: Dispatch<SetStateAction<boolean>>; slideIn: boolean },
+    params: { slideIn: boolean; setSlideIn: Dispatch<SetStateAction<boolean>> } & ActionsParams,
   ) => ReactNode;
 }
 

components/uploads/Dropzone.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import { useCallback } from "react";
 import type { DropzoneOptions, FileRejection } from "react-dropzone";
 import { useDropzone } from "react-dropzone";
@@ -12,6 +12,7 @@ import type { UploadableFile } from "./types";
 import { getMimeFromFileName } from "./utils";
 
 export interface DropzoneProps extends DropzoneOptions {
+  children?: ReactNode;
   /**
    * The current files a user has dropped
    */

context/MDXComponentProvider.tsx

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, DetailedHTMLProps, FC } from "react";
+import type { AnchorHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from "react";
 
 import { MDXProvider } from "@mdx-js/react";
 import { Link, Typography } from "@mui/material";
@@ -12,7 +12,11 @@ type NextLinkProps = Omit<
 > &
   LinkProps;
 
-export const MDXComponentProvider: FC = ({ children }) => {
+export interface MDXComponentProviderProps {
+  children: ReactNode;
+}
+
+export const MDXComponentProvider: FC<MDXComponentProviderProps> = ({ children }) => {
   return (
     <MDXProvider
       components={{