Upgrade to React v19

package.json

@@ -42,21 +42,21 @@
     "axios": "^1.7.4",
     "byte-size": "^8.1.1",
     "classnames": "^2.3.2",
-    "design-system-react": "https://github.com/cfpb/design-system-react",
+    "design-system-react": "https://github.com/cfpb/design-system-react#392-upgrade-to-react19-and-storybook8",
     "immer": "^10.0.2",
     "keycloak-js": "^21.1.1",
     "less": "^4.1.3",
     "luxon": "^3.4.4",
     "oidc-client-ts": "^3.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.45.4",
     "react-keycloak-js": "^1.0.3",
     "react-markdown": "^9.0.1",
     "react-oidc-context": "^3.1.0",
     "react-router-dom": "^6.11.1",
-    "react-scroll": "^1.8.9",
+    "react-scroll": "^1.9.0",
     "react-select": "^5.7.4",
     "regtech-regex": "https://github.com/cfpb/regtech-regex",
     "vite-plugin-svgr": "^3.2.0",
@@ -77,10 +77,10 @@
     "@types/css-mediaquery": "0.1.1",
     "@types/luxon": "^3",
     "@types/node": "^20.5.7",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-scroll": "^1.8.7",
+    "@types/react-scroll": "^1.8.10",
     "@types/react-select": "^5.0.1",
     "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "^6.2.0",

src/components/CommonLinks.tsx

@@ -30,7 +30,7 @@ interface UpdateInstitutionProfileProperties {
 }
 
 function UpdateInstitutionProfile({
-  isCallToAction,
+  isCallToAction = false,
   className = 'font-normal',
 }: UpdateInstitutionProfileProperties): ReactElement {
   const { lei } = useParams();
@@ -44,8 +44,6 @@ function UpdateInstitutionProfile({
   );
 }
 
-UpdateInstitutionProfile.defaultProps = { isCallToAction: false };
-
 interface UpdateFilingDetailsProperties {
   // eslint-disable-next-line react/require-default-props
   label?: string;

src/components/CrumbTrail.tsx

@@ -8,11 +8,16 @@ const length = 10;
 const separatorKeys = Array.from({ length }).map((_, index) => `key-${index}`);
 const INCREMENT_BY_ONE = 1;
 
+interface CrumbTrailProperties {
+  className?: string;
+  id?: string;
+}
+
 function CrumbTrail({
   id = 'crumbtrail',
   className = '',
   children,
-}: JSX.IntrinsicElements['div']): JSX.Element | null {
+}: React.PropsWithChildren<CrumbTrailProperties>): JSX.Element | null {
   let items: ReactNode[] = [];
 
   // eslint-disable-next-line unicorn/no-null

src/components/FormButtonGroup.tsx

@@ -7,22 +7,13 @@ interface FormButtonGroupProperties {
 
 function FormButtonGroup({
   className,
-  isFilingStep,
+  isFilingStep = false,
   children,
 }: FormButtonGroupProperties & JSX.IntrinsicElements['div']): JSX.Element {
-  return (
-    <div
-      className={`mt-[1.875rem] flex ${
-        isFilingStep ? 'gap-[1.125rem]' : 'gap-[0.625rem]'
-      } ${className}`}
-    >
-      {children}
-    </div>
-  );
+  const classnames = ['mt-[1.875rem] flex'];
+  classnames.push(isFilingStep ? 'gap-[1.125rem]' : 'gap-[0.625rem]');
+  if (className) classnames.push(className);
+  return <div className={classnames.join(' ')}>{children}</div>;
 }
 
-FormButtonGroup.defaultProps = {
-  isFilingStep: false,
-};
-
 export default FormButtonGroup;

src/components/FormErrorHeader.tsx

@@ -27,7 +27,7 @@ function FormErrorHeader<
   M extends FieldValues,
   T extends Record<string, string>,
 >({
-  alertHeading,
+  alertHeading = 'There was a problem completing your user profile',
   errors,
   id,
   keyLogicFunc,
@@ -38,6 +38,7 @@ function FormErrorHeader<
 
   return (
     <div className='mb-[2.8125rem] mt-[2.8125rem] w-full'>
+      {/* @ts-expect-error Element is a valid JSX component */}
       <Element name={id} id={id}>
         <Alert
           className='[&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
@@ -83,20 +84,25 @@ function FormErrorHeader<
                 errors[keyField]?.[keyIndex]?.[formFieldsHeaderErrorKey]
                   ?.message) as string | undefined;
 
+              const SCROLL_DURACTION = 300;
+              const SCROLL_OFFSET = -100;
+
+              const linkProperties = {
+                href: '#',
+                className: 'm-list_link',
+                to: scrollKey,
+                smooth: true,
+                duration: SCROLL_DURACTION,
+                offset: SCROLL_OFFSET,
+                onClick: onHandleFocus,
+                onKeyPress: onHandleKeyPress,
+                tabIndex: 0,
+              };
+
               return (
                 <ListItem key={key}>
-                  {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                  <Link
-                    href='#'
-                    className='m-list_link'
-                    to={scrollKey}
-                    smooth
-                    duration={300}
-                    offset={-100}
-                    onClick={onHandleFocus}
-                    onKeyPress={onHandleKeyPress}
-                    tabIndex={0}
-                  >
+                  {/* @ts-expect-error Element is a valid JSX component */}
+                  <Link {...linkProperties}>
                     {/* ex1: 'Enter your name' */}
                     {/* ex2: 'Enter your financial institution's name (1)' */}
                     {`${
@@ -120,10 +126,4 @@ function FormErrorHeader<
   );
 }
 
-FormErrorHeader.defaultProps = {
-  alertHeading: 'There was a problem completing your user profile',
-  errors: null,
-  showKeyIndexNumber: false,
-};
-
 export default FormErrorHeader;

src/components/FormWrapper.tsx

@@ -7,7 +7,7 @@ interface FormWrapperProperties {
 
 function FormWrapper({
   children,
-  isMarginTop,
+  isMarginTop = true,
 }: FormWrapperProperties): JSX.Element {
   const marginTop = isMarginTop ? 'mt-[2.8125rem]' : '';
   return (
@@ -19,8 +19,4 @@ function FormWrapper({
   );
 }
 
-FormWrapper.defaultProps = {
-  isMarginTop: true,
-};
-
 export default FormWrapper;

src/components/GovBanner.tsx

@@ -33,7 +33,3 @@ export default function GovBanner(): JSX.Element {
     />
   );
 }
-
-GovBanner.defaultProps = {
-  currentLanguage: 'en',
-};

src/components/InputEntry.tsx

@@ -52,6 +52,7 @@ const InputEntry = forwardRef<
     const handleError = Boolean(showError && errorMessage);
     return (
       <div className={`${isLast ? '' : 'mb-[1.875rem]'} ${className}`}>
+        {/* @ts-expect-error Element is a valid JSX component */}
         <Element name={id}>
           {hideInput ? null : (
             <>

src/components/InputErrorMessage.tsx

@@ -9,7 +9,7 @@ interface InputErrorMessageProperties {
 
 function InputErrorMessage({
   children,
-  status,
+  status = 'error',
 }: InputErrorMessageProperties): JSX.Element {
   return (
     <div className='mt-[0.9375rem] max-w-[41.875rem]'>
@@ -21,8 +21,4 @@ function InputErrorMessage({
   );
 }
 
-InputErrorMessage.defaultProps = {
-  status: 'error',
-};
-
 export default InputErrorMessage;

src/components/Loading.tsx

@@ -4,8 +4,6 @@ import { useHeaderAuthLinks } from 'utils/useHeaderAuthLinks';
 import FooterCfGovWrapper from './FooterCfGovWrapper';
 
 export interface LoadingType {
-  // TODO: Do we need this rule? Adding Loading.defaultProps = {...} does not fix the error.
-  // eslint-disable-next-line react/require-default-props
   message?: ReactElement | string;
 }
 

src/components/RadioButtonGroup.tsx

@@ -48,10 +48,4 @@ function RadioButtonGroup({
   );
 }
 
-RadioButtonGroup.defaultProps = {
-  id: 'radio-button-group',
-  label: 'Radio Group',
-  onChange: undefined,
-};
-
 export default RadioButtonGroup;

src/components/SectionIntro.tsx

@@ -5,14 +5,16 @@ import type { ReactNode } from 'react';
 export interface SectionIntroProperties {
   heading?: ReactNode;
   children: ReactNode;
+  className?: string;
+  id?: string;
 }
 
 function SectionIntro({
   heading = null,
   children = '',
   className,
   ...other
-}: JSX.IntrinsicElements['div'] & SectionIntroProperties): JSX.Element {
+}: SectionIntroProperties): JSX.Element {
   return (
     <div
       className={`mb-[1.875rem] box-border max-w-[41.875rem] ${className}`}

src/components/TextInput.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { useMemo, forwardRef } from 'react';
 
 import { TextInput as DSRTextInput } from 'design-system-react';
 import type { TextInputProperties } from 'design-system-react/dist/components/TextInput/TextInput';
@@ -11,7 +11,7 @@ import {
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProperties>(
   ({ id, name, type = 'text', maxLength, ...properties }, reference) => {
-    const innerMaxLength = React.useMemo(() => {
+    const innerMaxLength = useMemo(() => {
       if (maxLength && maxLength > 0) {
         return maxLength;
       }

src/pages/Filing/FilingApp/FieldEntry.tsx

@@ -178,8 +178,4 @@ function FieldEntry({
   );
 }
 
-FieldEntry.defaultProps = {
-  isWarning: false,
-};
-
 export default FieldEntry;

src/pages/Filing/FilingApp/FieldSummary.tsx

@@ -18,14 +18,14 @@ interface FieldProperties {
 function FieldSummary({
   heading,
   fieldArray,
-  bottomMargin,
+  bottomMargin = false,
   children,
   id,
   className = '',
   lei,
   submissionId,
   filingPeriod,
-  isWarning,
+  isWarning = false,
 }: FieldProperties & JSX.IntrinsicElements['div']): JSX.Element {
   return (
     <div
@@ -46,9 +46,4 @@ function FieldSummary({
   );
 }
 
-FieldSummary.defaultProps = {
-  bottomMargin: false,
-  isWarning: false,
-};
-
 export default FieldSummary;

src/pages/Filing/FilingApp/FilingErrors/FilingErrorsWarningsLimit.tsx

@@ -26,7 +26,7 @@ interface FilingErrorsWarningsLimitProperties {
 }
 
 function FilingErrorsWarningsLimit({
-  isWarning,
+  isWarning = false,
 }: FilingErrorsWarningsLimitProperties): JSX.Element {
   return (
     <div className='my-[1.875rem] max-w-[41.875rem]'>
@@ -52,8 +52,4 @@ function FilingErrorsWarningsLimit({
   );
 }
 
-FilingErrorsWarningsLimit.defaultProps = {
-  isWarning: false,
-};
-
 export default FilingErrorsWarningsLimit;

src/pages/Filing/FilingApp/FilingFieldLinks.tsx

@@ -10,6 +10,7 @@ interface FilingFieldLinksProperties {
   lei: string;
   submissionId: number;
   filingPeriod: FilingPeriodType;
+  className?: string;
 }
 
 function FilingFieldLinks({
@@ -19,7 +20,7 @@ function FilingFieldLinks({
   submissionId,
   className,
   ...others
-}: FilingFieldLinksProperties & JSX.IntrinsicElements['div']): JSX.Element {
+}: FilingFieldLinksProperties): JSX.Element {
   // download in-progress state
   const [downloadInProgress, setDownloadInProgress] = useState<boolean>(false);
   const auth = useSblAuth();

src/pages/Filing/FilingApp/InstitutionCard.tsx

@@ -182,15 +182,12 @@ function InstitutionCardDataWrapper({
  */
 export function InstitutionCard({
   lei,
+  name = '<NO NAME>',
+  status = '<NO STATUS>',
   ...others
 }: InstitutionDataType): JSXElement {
   if (!lei) return null;
-  return <InstitutionCardDataWrapper {...{ lei, ...others }} />;
+  return <InstitutionCardDataWrapper {...{ lei, name, status, ...others }} />;
 }
 
-InstitutionCard.defaultProps = {
-  name: '<NO NAME>',
-  status: '<NO STATUS>',
-};
-
 export default InstitutionCard;

src/pages/Filing/ProcessStep.tsx

@@ -5,12 +5,12 @@ import { ProcessStepNumber } from './ProcessStepNumber';
 interface ProcessStepProperties {
   heading: string;
   children: (JSX.Element | string)[] | JSX.Element | string;
-  size: string;
+  size?: string;
 }
 
 export default function ProcessStep({
   number,
-  size,
+  size = 'h4',
   heading,
   children,
 }: ProcessStepNumberProperties & ProcessStepProperties): JSX.Element {
@@ -24,7 +24,3 @@ export default function ProcessStep({
     </div>
   );
 }
-
-ProcessStep.defaultProps = {
-  ...ProcessStepNumber.defaultProps,
-};