chore: Frontend Dependency Upgrades

packages/client/package.json

@@ -9,56 +9,47 @@
     "prettier": "prettier -l \"src/**/*.ts(x)\"",
     "prettier:fix": "prettier -wl \"src/**/*.ts(x)\"",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
     "introspection": "graphql-codegen --config graphql-codegen.yml",
     "i18next": "i18next -s",
     "prepare": "husky"
   },
   "dependencies": {
     "@apollo/client": "^3.8.3",
-    "@bu-sail/saas-view": "^0.0.2",
+    "@bu-sail/saas-view": "^0.0.4",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@firebase/app": "^0.14.7",
     "@firebase/auth": "^1.12.0",
-    "@jsonforms/core": "3.2.0",
-    "@jsonforms/material-renderers": "3.2.0",
-    "@jsonforms/react": "3.2.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.5",
-    "@mui/x-data-grid": "^6.11.0",
-    "@mui/x-data-grid-pro": "^6.10.1",
-    "@mui/x-date-pickers": "^6.9.0",
+    "@jsonforms/core": "^3.7.0",
+    "@jsonforms/material-renderers": "^3.7.0",
+    "@jsonforms/react": "^3.7.0",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
+    "@mui/x-data-grid": "^7.3.9",
+    "@mui/x-data-grid-pro": "^7.3.9",
+    "@mui/x-date-pickers": "^8.0.0",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
     "axios": "^1.6.2",
     "esbuild": "^0.19.0",
     "firebaseui": "^6.1.0",
     "graphql": "^16.8.0",
-    "i18next": "^23.8.2",
+    "i18next": "^25.10.9",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.4.3",
     "injection-js": "^2.4.0",
     "jwt-decode": "^3.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.1",
-    "react-router-dom": "^6.12.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-i18next": "^16.6.1",
+    "react-router-dom": "^7.13.2",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/near-operation-file-preset": "^2.5.0",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/blocks": "^7.0.20",
-    "@storybook/react": "^7.0.20",
-    "@storybook/react-vite": "^7.0.20",
-    "@storybook/testing-library": "^0.0.14-next.2",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/styled-components": "^5.1.26",
@@ -73,7 +64,6 @@
     "i18next-parser": "^9.0.0",
     "prettier": "2.8.8",
     "prop-types": "^15.8.1",
-    "storybook": "^7.0.20",
     "typescript": "^5.0.2",
     "vite": "^4.3.9"
   },

packages/client/src/components/DatasetTable.component.tsx

@@ -21,7 +21,7 @@ export const DatasetTable: React.FC<DatasetTableProps> = (props) => {
   const { pushSnackbarMessage } = useSnackbar();
   const [deleteEntryMutation] = useDeleteEntryMutation();
   const confirmation = useConfirmation();
-  const [selectedRows, setSelectedRows] = useState<GridRowId[]>([]);
+  const [selectedRows, setSelectedRows] = useState<readonly GridRowId[]>([]);
   const [paginationModel, setPaginationModel] = useState<{ page: number; pageSize: number }>({ page: 0, pageSize: 10 });
 
   const defaultColumns: GridColDef[] = [

packages/client/src/components/Environment.component.tsx

@@ -61,7 +61,7 @@ function FieldSelector<T>(props: FieldSelectorProps<T>) {
       <InputLabel>{props.label}</InputLabel>
       <Select
         value={props.value || ''}
-        onChange={(event, _child) => handleChange(event.target.value)}
+        onChange={(event, _child) => handleChange(event.target.value as any)}
         renderValue={(option) => props.display(option)}
       >
         {props.options.map((option) => (

packages/client/src/components/TagTraining.component.tsx

@@ -58,7 +58,7 @@ export const TagTrainingComponent: React.FC<TagTrainingComponentProps> = (props)
       headerName: 'Training',
       width: 200,
       sortable: false,
-      valueGetter: (params) => !!trainingSet.find((id) => params.row._id == id),
+      valueGetter: (_value, row) => !!trainingSet.find((id) => row._id == id),
       renderHeader: (_params: GridColumnHeaderParams) => {
         const grid = useGridApiContext();
         const entryIDs = new Set<string>(Array.from(grid.current.getRowModels().keys()).map((id) => id.toString()));
@@ -88,7 +88,7 @@ export const TagTrainingComponent: React.FC<TagTrainingComponentProps> = (props)
       headerName: 'Available for Tagging',
       width: 250,
       sortable: false,
-      valueGetter: (params) => !!taggingSet.find((id) => params.row._id == id),
+      valueGetter: (_value, row) => !!taggingSet.find((id) => row._id == id),
       renderHeader: (_params: GridColumnHeaderParams) => {
         const grid = useGridApiContext();
         const entryIDs = new Set<string>(Array.from(grid.current.getRowModels().keys()).map((id) => id.toString()));

packages/client/src/components/tag/view/AslLexGridView.component.tsx

@@ -47,21 +47,21 @@ export const getAslLexCols: GetGridColDefs = (uischema, schema, property) => {
       field: `${property}-video`,
       headerName: `${property}: ${i18next.t('common.video')}`,
       width: 350,
-      valueGetter: (params) => params.row.data[property]?.field?.lexiconEntry.video,
+      valueGetter: (_value, row) => row.data[property]?.field?.lexiconEntry.video,
       renderCell: (params) =>
         params.value && <AslLexGridViewVideo data={params.value} schema={schema} uischema={uischema} />
     },
     {
       field: `${property}-key`,
       headerName: `${property}: ${i18next.t('common.key')}`,
-      valueGetter: (params) => params.row.data[property]?.field?.lexiconEntry.key,
+      valueGetter: (_value, row) => row.data[property]?.field?.lexiconEntry.key,
       renderCell: (params) =>
         params.value && <AslLexGridViewKey data={params.value} schema={schema} uischema={uischema} />
     },
     {
       field: `${property}-primary`,
       headerName: `${property}: ${i18next.t('common.primary')}`,
-      valueGetter: (params) => params.row.data[property]?.field?.lexiconEntry.primary,
+      valueGetter: (_value, row) => row.data[property]?.field?.lexiconEntry.primary,
       renderCell: (params) =>
         params.value && <AslLexGridViewPrimary data={params.value} schema={schema} uischema={uischema} />
     }

packages/client/src/components/tag/view/BooleanGridView.component.tsx

@@ -19,7 +19,7 @@ export const getBoolCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: property,
       headerName: property,
-      valueGetter: (params) => params.row.data[property]?.field?.boolValue,
+      valueGetter: (_value, row) => row.data[property]?.field?.boolValue,
       renderCell: (params) =>
         params.value && <BooleanGridView data={params.row.data[property]} schema={schema} uischema={uischema} />
     }

packages/client/src/components/tag/view/FreeTextGridView.component.tsx

@@ -18,7 +18,7 @@ export const getTextCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: property,
       headerName: property,
-      valueGetter: (params) => params.row.data[property]?.field?.textValue,
+      valueGetter: (_value, row) => row.data[property]?.field?.textValue,
       renderCell: (params) =>
         params.value && <FreeTextGridView data={params.value} schema={schema} uischema={uischema} />
     }

packages/client/src/components/tag/view/NumericGridView.component.tsx

@@ -18,7 +18,7 @@ export const getNumericCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: property,
       headerName: property,
-      valueGetter: (params) => params.row.data[property]?.field?.numericValue,
+      valueGetter: (_value, row) => row.data[property]?.field?.numericValue,
       renderCell: (params) =>
         params.value && <NumericGridView data={params.value} schema={schema} uischema={uischema} />
     }

packages/client/src/components/tag/view/SliderGridView.component.tsx

@@ -18,7 +18,7 @@ export const getSliderCols: GetGridColDefs = (uischema, schema, property) => {
     {
       field: property,
       headerName: property,
-      valueGetter: (params) => params.row.data && params.row.data[property],
+      valueGetter: (_value, row) => row.data && row.data[property],
       renderCell: (params) =>
         params.value && <SliderGridView data={params.row.value} schema={schema} uischema={uischema} />
     }

packages/client/src/components/tag/view/VideoGridView.component.tsx

@@ -45,7 +45,7 @@ export const getVideoCols: GetGridColDefs = (uischema, schema, property) => {
       field: `${property}-video-${i + 1}`,
       headerName: `${property}: ${i18next.t('common.video')} ${i + 1}`,
       width: 350,
-      valueGetter: (params) => params.row.data[property]?.field?.entries[i],
+      valueGetter: (_value, row) => row.data[property]?.field?.entries[i],
       renderCell: (params) => params.value && <VideoGridView data={params.value} schema={schema} uischema={uischema} />
     });
   }

packages/client/src/components/tagbuilder/TagFormBuilder.component.tsx

@@ -88,7 +88,7 @@ export const TagFormBuilder: React.FC<TagsDisplayProps> = (props) => {
 
   return (
     <Grid container spacing={3}>
-      <Grid item xs={3}>
+      <Grid size={{ xs: 3 }}>
         <Stack direction="column" spacing={1} sx={{ maxWidth: 400 }}>
           <Typography variant="h5">Tag Fields</Typography>
           <AslLexFieldProvider handleClick={addTagField} />
@@ -115,7 +115,7 @@ export const TagFormBuilder: React.FC<TagsDisplayProps> = (props) => {
         {props.tagSchema && <TagFormPreviewDialog schema={props.tagSchema} clicked={open} toggleModal={toggleModal} />}
       </Grid>
 
-      <Grid item xs={9} sx={{ overflow: 'auto' }}>
+      <Grid size={{ xs: 9 }} sx={{ overflow: 'auto' }}>
         <Stack direction="column" sx={{ maxHeight: 400 }} spacing={2}>
           {props.tagFields.length > 0 ? (
             props.tagFields.map((value: TagField, index: number) => (

packages/client/src/pages/datasets/DatasetDownloads.tsx

@@ -45,13 +45,13 @@ export const DatasetDownloads: React.FC = () => {
       field: 'datasetName',
       headerName: t('common.dataset'),
       width: 200,
-      valueGetter: (params) => params.row.dataset.name
+      valueGetter: (_value, row) => row.dataset.name
     },
     {
       field: 'date',
       width: 200,
       headerName: t('components.datasetDownload.requestDate'),
-      valueGetter: (params) => t('common.dateFormat', { date: Date.parse(params.row.date) })
+      valueGetter: (_value, row) => t('common.dateFormat', { date: Date.parse(row.date) })
     },
     {
       field: 'status',

packages/client/src/pages/datasets/ProjectAccess.tsx

@@ -49,13 +49,13 @@ export const ProjectAccess: React.FC = () => {
       field: 'name',
       headerName: t('components.projectAccess.datasetName'),
       width: 200,
-      valueGetter: (params) => params.row.dataset.name
+      valueGetter: (_value, row) => row.dataset.name
     },
     {
       field: 'description',
       headerName: t('common.description'),
       width: 200,
-      valueGetter: (params) => params.row.dataset.description
+      valueGetter: (_value, row) => row.dataset.description
     },
     {
       field: 'access',

packages/client/src/pages/projects/ProjectUserPermissions.tsx

@@ -103,15 +103,15 @@ const UserPermissionTable: React.FC<{ project: Project }> = ({ project }) => {
     {
       field: 'email',
       headerName: t('common.email'),
-      valueGetter: (params) => params.row.user.email,
+      valueGetter: (_value, row) => row.user.email,
       flex: 1.75,
       editable: false
     },
     {
       field: 'projectAdmin',
       type: 'boolean',
       headerName: t('components.projectUserPermissions.projectAdmin'),
-      valueGetter: (params) => params.row.hasRole,
+      valueGetter: (_value, row) => row.hasRole,
       renderCell: (params: GridRenderCellParams) => {
         return <EditAdminSwitch permission={params.row} currentUser={user!} project={project} refetch={refetch} />;
       },

packages/client/src/pages/studies/StudyDownloads.tsx

@@ -38,13 +38,13 @@ export const StudyDownloads: React.FC = () => {
       field: 'studyName',
       headerName: t('common.study'),
       width: 200,
-      valueGetter: (params) => params.row.study.name
+      valueGetter: (_value, row) => row.study.name
     },
     {
       field: 'date',
       width: 200,
       headerName: t('components.datasetDownload.requestDate'),
-      valueGetter: (params) => t('common.dateFormat', { date: Date.parse(params.row.date) })
+      valueGetter: (_value, row) => t('common.dateFormat', { date: Date.parse(row.date) })
     },
     {
       field: 'status',

packages/client/src/pages/studies/UserPermissions.tsx

@@ -164,15 +164,15 @@ const UserPermissionTable: React.FC<{ study: Study }> = ({ study }) => {
     {
       field: 'email',
       headerName: t('common.email'),
-      valueGetter: (params) => params.row.user.email,
+      valueGetter: (_value, row) => row.user.email,
       flex: 1.75,
       editable: false
     },
     {
       field: 'studyAdmin',
       type: 'boolean',
       headerName: t('components.userPermissions.studyAdmin'),
-      valueGetter: (params) => params.row.isStudyAdmin,
+      valueGetter: (_value, row) => row.isStudyAdmin,
       renderCell: (params: GridRenderCellParams) => {
         return <EditStudyAdminSwitch permission={params.row} currentUser={user!} study={study} refetch={refetch} />;
       },
@@ -182,7 +182,7 @@ const UserPermissionTable: React.FC<{ study: Study }> = ({ study }) => {
     {
       field: 'contributor',
       headerName: t('components.userPermissions.contributor'),
-      valueGetter: (params) => params.row.isContributor,
+      valueGetter: (_value, row) => row.isContributor,
       renderCell: (params: GridRenderCellParams) => {
         return <EditContributorSwitch permission={params.row} currentUser={user!} study={study} refetch={refetch} />;
       },
@@ -192,7 +192,7 @@ const UserPermissionTable: React.FC<{ study: Study }> = ({ study }) => {
     {
       field: 'trained',
       headerName: t('components.userPermissions.trained'),
-      valueGetter: (params) => params.row.isTrained,
+      valueGetter: (_value, row) => row.isTrained,
       renderCell: (params: GridRenderCellParams) => {
         return <EditTrainedSwitch permission={params.row} currentUser={user!} study={study} refetch={refetch} />;
       },