chore: Update dependencies (#1085)

Author: AvivAbachi

package-lock.json

@@ -4,54 +4,54 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@applitools/eyes-playwright": "^1.32.0",
+    "@applitools/eyes-playwright": "^1.37.2",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.16.11",
-    "@mui/lab": "^5.0.0-alpha.169",
-    "@mui/material": "^5.16.7",
-    "@mui/x-date-pickers": "^7.1.0",
-    "@mui/x-tree-view": "^6.17.0",
-    "@tanstack/query-sync-storage-persister": "^5.66.0",
-    "@tanstack/react-query": "^5.45.1",
-    "@tanstack/react-query-persist-client": "^5.66.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/lab": "^7.0.0-beta.11",
+    "@mui/material": "^7.0.2",
+    "@mui/x-date-pickers": "^7.28.3",
+    "@mui/x-tree-view": "^7.28.1",
+    "@tanstack/query-sync-storage-persister": "^5.74.4",
+    "@tanstack/react-query": "^5.74.4",
+    "@tanstack/react-query-persist-client": "^5.74.4",
     "@types/git-username": "^1.0.5",
     "@types/leaflet.markercluster": "^1.5.5",
-    "@vitejs/plugin-react-swc": "^3.8.1",
-    "antd": "^5.22.3",
+    "@vitejs/plugin-react-swc": "^3.9.0",
+    "antd": "^5.24.7",
     "axios": "^1.8.4",
     "babel-plugin-transform-import-meta": "^2.3.2",
     "classnames": "^2.5.1",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "eslint-js": "github:eslint/js",
-    "geolib": "^3.3.3",
+    "geolib": "^3.3.4",
     "git-username": "^1.0.0",
-    "http-proxy-middleware": "^3.0.3",
-    "i18next": "^23.11.3",
-    "i18next-fs-backend": "^2.3.1",
-    "leaflet": "^1.8.0",
+    "http-proxy-middleware": "^3.0.5",
+    "i18next": "^25.0.0",
+    "i18next-fs-backend": "^2.6.0",
+    "leaflet": "^1.9.4",
     "lodash.debounce": "^4.0.8",
-    "madge": "^6.1.0",
+    "madge": "^8.0.0",
     "moment": "^2.30.1",
-    "moment-timezone": "^0.5.46",
-    "open-bus-stride-client": "0.1.2",
-    "react": "^18.2.0",
+    "moment-timezone": "^0.5.48",
+    "open-bus-stride-client": "^0.1.3",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
-    "react-i18next": "^14.1.0",
-    "react-leaflet": "^4.0.1",
+    "react-i18next": "^15.4.1",
+    "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
-    "react-router-dom": "^6.26.2",
-    "recharts": "^2.15.0",
-    "sass": "^1.81.0",
-    "styled-components": "^6.1.11",
+    "react-router": "^7.5.0",
+    "recharts": "^2.15.2",
+    "sass": "^1.86.3",
+    "styled-components": "^6.1.17",
     "stylis-plugin-rtl": "^2.1.1",
     "typescript": "^5.8.3",
     "underscore.string": "^3.3.6",
     "use-konami": "^1.0.1",
-    "usehooks-ts": "^3.1.0",
+    "usehooks-ts": "^3.1.1",
     "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.3",
+    "vite-tsconfig-paths": "^5.1.4",
     "web-vitals": "^4.2.4"
   },
   "resolutions": {
@@ -85,14 +85,14 @@
     ]
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.24.0",
     "@jest/globals": "^29.7.0",
-    "@nx/eslint": "20.7.2",
-    "@nx/eslint-plugin": "20.7.2",
-    "@playwright/test": "^1.46.1",
+    "@nx/eslint": "20.8.0",
+    "@nx/eslint-plugin": "20.8.0",
+    "@playwright/test": "^1.51.1",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-links": "^8.6.12",
@@ -101,20 +101,20 @@
     "@storybook/react": "^8.6.12",
     "@storybook/react-vite": "^8.6.12",
     "@storybook/test": "^8.6.12",
-    "@swc/cli": "^0.3.9",
-    "@swc/core": "^1.9.2",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@swc/cli": "^0.7.2",
+    "@swc/core": "^1.11.21",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/leaflet": "^1.9.16",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/node": "^22.10.7",
-    "@types/react": "^18.2.58",
-    "@types/react-dom": "^18.3.0",
+    "@types/leaflet": "^1.9.17",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@types/styled-components": "^5.1.34",
     "@types/underscore.string": "^0.0.41",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/eslint-plugin": "^8.30.1",
     "cross-env": "^7.0.3",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.2",
@@ -129,19 +129,19 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-svg-transformer": "^1.0.0",
-    "jsdom": "^24.0.0",
-    "nx": "20.7.2",
-    "playwright-advanced-har": "^1.3.1",
+    "jsdom": "^26.1.0",
+    "nx": "20.8.0",
+    "playwright-advanced-har": "^1.3.3",
     "prettier": "^3.5.3",
     "storybook": "^8.6.12",
     "stylelint": "^16.18.0",
     "stylelint-config-standard-scss": "^14.0.0",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.3.2",
     "ts-node": "^10.9.2",
-    "typescript-eslint": "^8.29.1",
-    "vite": "^6.2.4",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.1",
     "vite-plugin-istanbul": "^7.0.0",
-    "vitest": "^3.0.5"
+    "vitest": "^3.1.1"
   },
   "nx": {
     "targets": {

package.json

@@ -2,7 +2,7 @@ import './App.scss'
 import 'leaflet/dist/leaflet.css'
 import 'moment/locale/he'
 import { useTranslation } from 'react-i18next'
-import { RouterProvider } from 'react-router-dom'
+import { RouterProvider } from 'react-router'
 import { Suspense, useEffect } from 'react'
 import moment from 'moment-timezone'
 import Preloader from './shared/Preloader'

src/App.tsx

@@ -87,8 +87,9 @@ export async function getStopsForRouteAsync(
     })
     await Promise.all(
       rideStops.map(async (rideStop) => {
+        if (!rideStop.gtfsStopId) return
         const stop = await GTFS_API.gtfsStopsGetGet({ id: rideStop.gtfsStopId })
-        stops.push(fromGtfsStop(rideStop, stop, rideRepresentative))
+        stops.push(fromGtfsStop(rideStop as GtfsRideStopPydanticModel, stop, rideRepresentative))
       }),
     )
   }

src/api/gtfsService.ts

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.38.0-jammy
+FROM mcr.microsoft.com/playwright:v1.52.0-jammy
 
 COPY complaint.js /complaint.js
 COPY package.json /package.json

src/complaint/Dockerfile

@@ -13,6 +13,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "playwright": "^1.38.1"
+    "playwright": "^1.52.0"
   }
 }

src/complaint/package-lock.json

@@ -53,7 +53,7 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={i18n.language}>
       <ConfigProvider
-        direction={i18n.dir()}
+        direction={i18n.language === 'he' ? 'rtl' : 'ltr'}
         locale={heIL}
         theme={{
           algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,

src/complaint/package.json

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useTranslation } from 'react-i18next'
 
 import './HeaderLinks.scss'
@@ -50,7 +50,9 @@ const InternalLink = ({ label, path, icon }: LinkType) => {
       aria-label={t(label)}
       title={t(label)}
       className="header-link"
-      onClick={() => navigate(path)}>
+      onClick={() => {
+        navigate(path)
+      }}>
       {icon}
     </div>
   )

src/layout/ThemeContext.tsx

@@ -1,6 +1,6 @@
 import { Layout } from 'antd'
 import styled from 'styled-components'
-import { Link, Outlet } from 'react-router-dom'
+import { Link, Outlet } from 'react-router'
 import { Suspense } from 'react'
 import MainHeader from './header/Header'
 import SideBar from './sidebar/SideBar'

src/layout/header/HeaderLinks/HeaderLinks.tsx

@@ -1,7 +1,7 @@
 import './sidebar.scss'
 import { Drawer, Layout } from 'antd'
 import { useContext, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { LayoutContextInterface, LayoutCtx } from '../LayoutContext'
 import Menu from './menu/Menu'
@@ -16,12 +16,10 @@ export default function SideBar() {
   const { drawerOpen, setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
   const [collapsed, setCollapsed] = useState(false)
 
-  const isRtl = i18n.language === 'he'
-
   return (
     <>
       <Drawer
-        placement="right"
+        placement={i18n.dir() === 'rtl' ? 'right' : 'left'}
         mask
         width={280}
         onClose={() => setDrawerOpen(false)}
@@ -40,7 +38,6 @@ export default function SideBar() {
         width={250}
         collapsible
         collapsed={collapsed}
-        reverseArrow={isRtl}
         style={{ overflowY: 'auto', marginBottom: '48px' }}
         onCollapse={(value: boolean) => setCollapsed(value)}
         className="hideOnMobile">

src/layout/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router'
 import './menu.scss'
 import { useTranslation } from 'react-i18next'
 

src/layout/sidebar/SideBar.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Form, Input, Button, Upload, message, Select, FormProps } from 'antd'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined'
+import { Card, CardContent } from '@mui/material'
+import { FileUploadOutlined } from '@mui/icons-material'
 import axios from 'axios'
 import './BugReportForm.scss'
 import { UploadChangeParam, UploadFile } from 'antd/lib/upload'
@@ -168,7 +167,7 @@ const BugReportForm = () => {
               listType="picture"
               fileList={fileList}
               onChange={onFileChange}>
-              <Button icon={<FileUploadOutlinedIcon fontSize="small" />}>
+              <Button icon={<FileUploadOutlined fontSize="small" />}>
                 {t('bug_attachments_upload_button')}
               </Button>
             </Upload>

src/layout/sidebar/menu/Menu.tsx

@@ -112,14 +112,14 @@ function StackedResearchInputs({
   return (
     <>
       <Grid container>
-        <Grid xs={6} item>
+        <Grid size={{ xs: 6 }}>
           <DateSelector
             time={startDate}
             onChange={(data) => data && setStartDate(data)}
             customLabel={t('start')}
           />
         </Grid>
-        <Grid xs={6} item>
+        <Grid size={{ xs: 6 }}>
           <DateSelector
             time={endDate}
             onChange={(data) => data && setEndDate(data)}

src/pages/BugReportForm .tsx

@@ -56,7 +56,7 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
         </Typography>
         <p>{t('how_to_donate_text')}</p>
         <Grid container spacing={2} direction={shouldImgCollapse ? 'column-reverse' : 'row'}>
-          <Grid item xs={6}>
+          <Grid size={{ xs: 6 }}>
             <Typography id="modal-modal-description" sx={{ mt: 2 }}>
               <h2>{t('donate_through_jgive.com_title')}</h2>
               <a
@@ -79,7 +79,7 @@ export const DonateModal: React.FC<DonateModalProps> = ({ isVisible, onClose })
               </a>
             </Typography>
           </Grid>
-          <Grid item dir={direction} xs={6}>
+          <Grid dir={direction} size={{ xs: 6 }}>
             <h2>{t('donation_through_bank_title')}</h2>
             <p>{t('donation_through_bank_reccomendation')}</p>
             <Typography id="modal-modal-description" sx={{ mt: 2 }}>