+
>
diff --git a/tdrs-frontend/src/components/SplashPage/SplashPage.test.js b/tdrs-frontend/src/components/SplashPage/SplashPage.test.js
index 2813a5ead..4f2730630 100644
--- a/tdrs-frontend/src/components/SplashPage/SplashPage.test.js
+++ b/tdrs-frontend/src/components/SplashPage/SplashPage.test.js
@@ -1,5 +1,5 @@
import React from 'react'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
import { mount } from 'enzyme'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
diff --git a/tdrs-frontend/src/components/UploadReport/UploadReport.jsx b/tdrs-frontend/src/components/UploadReport/UploadReport.jsx
index a2348fe65..8d96ea2ea 100644
--- a/tdrs-frontend/src/components/UploadReport/UploadReport.jsx
+++ b/tdrs-frontend/src/components/UploadReport/UploadReport.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import PropTypes from 'prop-types'
-import { fileInput } from 'uswds/src/js/components'
+import { fileInput } from '@uswds/uswds/src/js/components'
import classNames from 'classnames'
import Button from '../Button'
diff --git a/tdrs-frontend/src/components/UploadReport/UploadReport.test.js b/tdrs-frontend/src/components/UploadReport/UploadReport.test.js
index 5a307c313..ef6fe6ade 100644
--- a/tdrs-frontend/src/components/UploadReport/UploadReport.test.js
+++ b/tdrs-frontend/src/components/UploadReport/UploadReport.test.js
@@ -1,5 +1,5 @@
import React from 'react'
-import thunk from 'redux-thunk'
+import { thunk } from 'redux-thunk'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { fireEvent, render } from '@testing-library/react'
diff --git a/tdrs-frontend/src/configureStore.js b/tdrs-frontend/src/configureStore.js
index a9f340685..f50e45383 100644
--- a/tdrs-frontend/src/configureStore.js
+++ b/tdrs-frontend/src/configureStore.js
@@ -1,7 +1,7 @@
-import { composeWithDevTools } from 'redux-devtools-extension'
+import { composeWithDevTools } from '@redux-devtools/extension'
import { createStore, applyMiddleware } from 'redux'
import { createBrowserHistory } from 'history'
-import thunkMiddleware from 'redux-thunk'
+import { thunk as thunkMiddleware } from 'redux-thunk'
import loggerMiddleware from './middleware/logger'
import createRootReducer from './reducers'
diff --git a/tdrs-frontend/src/index.js b/tdrs-frontend/src/index.js
index 809c03c6c..0d6405e79 100644
--- a/tdrs-frontend/src/index.js
+++ b/tdrs-frontend/src/index.js
@@ -1,5 +1,5 @@
import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
import axios from 'axios'
import { ReduxRouter as Router } from '@lagunovsky/redux-react-router'
@@ -10,7 +10,7 @@ import startMirage from './mirage'
import { fetchAuth } from './actions/auth'
import App from './App'
-import 'uswds/dist/js/uswds'
+import '@uswds/uswds'
import './index.scss'
if (
@@ -52,13 +52,14 @@ store.dispatch(fetchAuth())
// }
// Start the mirage server to stub some backend endpoints when running locally
-ReactDOM.render(
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(
- ,
- document.getElementById('root')
+
)
// expose store when run in Cypress
diff --git a/tdrs-frontend/src/index.scss b/tdrs-frontend/src/index.scss
index 9c858673a..5204bebb3 100644
--- a/tdrs-frontend/src/index.scss
+++ b/tdrs-frontend/src/index.scss
@@ -1,24 +1,17 @@
-$theme-hero-image: '../../img/hero.png';
+@forward "src/assets/uswds/_uswds-theme-general";
-@import "./assets/uswds/uswds-theme-general";
-@import "./assets/uswds/uswds-theme-typography";
-@import "./assets/uswds/uswds-theme-spacing";
-@import "./assets/uswds/uswds-theme-color";
-@import "./assets/uswds/uswds-theme-utilities";
-@import "uswds/dist/scss/uswds";
+@forward "uswds";
-@import 'theme/global';
-
-@import './assets/App';
-@import './assets/GovBanner';
-@import './assets/Header';
-@import './assets/SplashPage';
-@import './assets/Profile';
-@import './assets/Footer';
-@import './assets/Modal';
-@import './assets/Button';
-@import './assets/FileUpload';
-@import './assets/Reports';
+@forward 'src/assets/App';
+@forward 'src/assets/GovBanner';
+@forward 'src/assets/Header';
+@forward 'src/assets/SplashPage';
+@forward 'src/assets/Profile';
+@forward 'src/assets/Footer';
+@forward 'src/assets/Modal';
+@forward 'src/assets/Button';
+@forward 'src/assets/FileUpload';
+@forward 'src/assets/Reports';
h1:focus {
outline: none !important;
diff --git a/tdrs-frontend/src/mirage.data.js b/tdrs-frontend/src/mirage.data.js
index c2782dd36..9d2cd0ea4 100644
--- a/tdrs-frontend/src/mirage.data.js
+++ b/tdrs-frontend/src/mirage.data.js
@@ -1,10 +1,10 @@
-import faker from 'faker'
+import { faker } from '@faker-js/faker'
export const AUTH_CHECK_DATA = {
authenticated: true,
user: {
- id: faker.datatype.uuid(),
- first_name: faker.name.firstName(),
- last_name: faker.name.lastName(),
+ id: faker.string.uuid(),
+ first_name: faker.person.firstName(),
+ last_name: faker.person.lastName(),
email: faker.internet.email(),
stt: {
id: 31,
@@ -1066,7 +1066,7 @@ export const REPORTS_DATA = {
original_filename: '2020.Q1.Active Case Data',
slug: '2020.Q1.Active Case Data',
extension: 'None',
- user: faker.datatype.uuid(),
+ user: faker.string.uuid(),
stt: 31,
year: 2020,
quarter: 'Q1',
@@ -1078,7 +1078,7 @@ export const REPORTS_DATA = {
original_filename: '2020.Q1.Active Case Data',
slug: '2020.Q1.Active Case Data',
extension: 'None',
- user: faker.datatype.uuid(),
+ user: faker.string.uuid(),
stt: 31,
year: 2020,
quarter: 'Q1',
diff --git a/tdrs-frontend/src/setupTests.js b/tdrs-frontend/src/setupTests.js
index 09001d62f..0875a0314 100644
--- a/tdrs-frontend/src/setupTests.js
+++ b/tdrs-frontend/src/setupTests.js
@@ -2,10 +2,10 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
import 'jest-enzyme'
import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+import Adapter from '@cfaester/enzyme-adapter-react-18'
import startMirage from './mirage'
Enzyme.configure({ adapter: new Adapter() })
diff --git a/tdrs-frontend/src/theme/_global.scss b/tdrs-frontend/src/theme/_global.scss
index 5019957d3..18390dd80 100644
--- a/tdrs-frontend/src/theme/_global.scss
+++ b/tdrs-frontend/src/theme/_global.scss
@@ -1,3 +1,3 @@
-@import 'include-media/dist/include-media';
+@use 'include-media/dist/include-media';
$breakpoints: (small: 480px, medium: 640px, large: 880px, xlarge: 1400px);