feat: resize sponsorship carrousel

package.json

@@ -16,7 +16,7 @@
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^11.15.0",
+    "framer-motion": "^11.11.8",
     "google-map-react": "^2.2.1",
     "moment": "^2.30.1",
     "primeicons": "^7.0.0",
@@ -26,7 +26,7 @@
     "react-countdown": "^2.3.6",
     "react-dom": "^18.3.1",
     "react-query": "^3.39.2",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^7.0.2",
     "react-scripts": "5.0.1",
     "react-use": "^17.5.1",
     "sass": "^1.81.0",
@@ -86,7 +86,7 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/google-map-react": "^2.1.10",
@@ -95,7 +95,7 @@
     "@types/styled-components": "^5.1.34",
     "eslint": "^8.57.1",
     "gh-pages": "^6.2.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "react-ga": "^3.3.1",
     "react-test-renderer": "^18.3.1"
   },

src/2023/Diversity/Diversity.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import Diversity2023 from "./Diversity2023";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router";
 
 describe("Diversity component", () => {
   it("renders heading correctly", () => {

src/2023/Diversity/Diversity2023.tsx

@@ -3,7 +3,7 @@ import { Color } from "../../styles/colors";
 import data from "../../data/2023.json";
 import styled from "styled-components";
 import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import {
   ROUTE_CODE_OF_CONDUCT,
   ROUTE_CONDITIONS,

src/2023/Home/Home2023Wrapper.tsx

@@ -6,7 +6,7 @@ import SpeakersCarousel from "./components/SpeakersCarousel/SpeakersCarousel";
 import Sponsors from "./components/Sponsors/Sponsors";
 import styled from "styled-components";
 import data from "../../data/2023.json";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 const StyledContainer = styled.div`
   padding-bottom: 10rem;

src/2023/Home/components/SpeakersCarousel/SpeakerSwiper.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import { Color } from "../../../../styles/colors";
 import "swiper/swiper-bundle.min.css";
 import "./SpeakersCarousel.scss";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { ROUTE_SPEAKER_DETAIL } from "../../../../constants/routes";
 import { useFetchSpeakers } from "../../../Speakers/UseFetchSpeakers";
 import * as Sentry from "@sentry/react";

src/2023/Home/components/SpeakersCarousel/SpeakersCarousel.tsx

@@ -1,7 +1,7 @@
 import { Color } from "../../../../styles/colors";
 
 import { FC } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import LessThanBlueWhiteIcon from ".././../../../assets/images/MoreThanBlueIcon.svg";
 import SectionWrapper from "../../../../components/SectionWrapper/SectionWrapper";
 import { TABLET_BREAKPOINT } from "../../../../constants/BreakPoints";

src/2023/Schedule/components/AvatarCard.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
     StyledAvatarContainer,
     StyledAvatarImage,

src/2023/SessionFeedback/SessionFeedback2023.tsx

@@ -13,7 +13,7 @@ import "primereact/resources/themes/lara-light-blue/theme.css";
 import { InputText } from "primereact/inputtext";
 import { FilterMatchMode } from "primereact/api";
 import { Color } from "../../styles/colors";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { ROUTE_TALK_DETAIL } from "../../constants/routes";
 
 const SessionFeedback2023: FC<React.PropsWithChildren<unknown>> = () => {

src/2023/SpeakerDetail/SpeakerDetail.style.ts

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import {motion} from "framer-motion";
 import {BIG_BREAKPOINT} from "../../constants/BreakPoints";
 import {Color} from "../../styles/colors";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 
 export const StyledTalkDescription = styled(Link)`
   text-decoration: none;

src/2023/SpeakerDetail/SpeakerDetail2023.tsx

@@ -31,7 +31,7 @@ import {
   ROUTE_2023_TALK_DETAIL,
 } from "../../constants/routes";
 import { StyledTalkDescription } from "./SpeakerDetail.style";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Color } from "../../styles/colors";
 import { ISpeaker } from "../Speakers/Speaker.types";
 

src/2023/SpeakerDetail/SpeakerDetailContainer2023.tsx

@@ -3,7 +3,7 @@ import { Color } from "../../styles/colors";
 import React, { FC } from "react";
 import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
 import SpeakerDetail2023 from "./SpeakerDetail2023";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { StyledContainer, StyledWaveContainer } from "./Speaker.style";
 import conferenceData from "../../data/2023.json";
 import { useFetchSpeakers } from "../Speakers/UseFetchSpeakers";

src/2023/Speakers/components/SpeakersCard.tsx

@@ -7,7 +7,7 @@ import {
   StyledSpeakerText,
   StyledSpeakerTitle,
 } from "./SpeakerCard.Style";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { ISpeaker } from "../Speaker.types";
 import Loading from "../../../assets/images/logo.png";
 import { ROUTE_2023_SPEAKER_DETAIL } from "../../../constants/routes";

src/2023/TalkDetail/TalkDetail.tsx

@@ -28,7 +28,7 @@ import {
   StyledVideoContainer,
   StyledVideoTagsContainer,
 } from "./Style.MeetingDetail";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import {
   ROUTE_2023_SPEAKER_DETAIL,
   ROUTE_2023_TALKS,

src/2023/TalkDetail/TalkDetailContainer2023.tsx

@@ -3,7 +3,7 @@ import React, { FC, useEffect } from "react";
 import NotFoundError from "../../components/NotFoundError/NotFoundError";
 import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
 import styled from "styled-components";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import conferenceData from "../../data/2023.json";
 import { sessionAdapter, useFetchTalksById } from "../Talks/UseFetchTalks";
 import * as Sentry from "@sentry/react";

src/2023/Talks/Talks.style.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { Color } from "../../styles/colors";
 import { BIG_BREAKPOINT, TABLET_BREAKPOINT } from "../../constants/BreakPoints";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 export const StyledTitleContainer = styled.div`
   display: flex;

src/2023/Talks/components/TalkCard.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { StyledJobsInfo } from "../../JobOffers/components/JobsCard";
 import { Tag } from "../../../components/Tag/Tag";
 import {

src/2024/Home/Home.tsx

@@ -20,7 +20,7 @@ import {
     StyleHomeContainer,
 } from "./Style.Home";
 import {formatDateRange} from "./DateUtil";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import data from "../../data/2024.json";
 import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
 import {Color} from "../../styles/colors";

src/2024/HomeWrapper2024.tsx

@@ -1,7 +1,7 @@
 import React, {FC, useState} from "react";
 import styled from "styled-components";
 
-import {useLocation} from "react-router-dom";
+import {useLocation} from "react-router";
 import {BIG_BREAKPOINT} from "../constants/BreakPoints";
 
 import {useEventEdition} from "../views/Home/UseEventEdition";

src/2024/SpeakerDetail/SpeakerDetail.tsx

@@ -9,7 +9,7 @@ import twitterIcon from "../../assets/images/twitterIcon.svg";
 import {useWindowSize} from "react-use";
 
 import {ROUTE_SPEAKERS, ROUTE_TALK_DETAIL} from "../../constants/routes";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import {Color} from "../../styles/colors";
 import conferenceData from "../../data/2024.json";
 import {ISpeaker} from "../../views/Speakers/Speaker.types";

src/2024/SpeakerDetail/SpeakerDetailContainer2024.tsx

@@ -3,7 +3,7 @@ import {Color} from "../../styles/colors";
 import React, {FC} from "react";
 import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
 import SpeakerDetail from "./SpeakerDetail";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import conferenceData from "../../data/2024.json";
 import {useFetchSpeakers} from "../Speakers/UseFetchSpeakers";
 import * as Sentry from "@sentry/react";

src/2024/Speakers/SpeakerInformation.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {render, screen} from "@testing-library/react";
-import {BrowserRouter, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Route, Routes} from "react-router";
 import SpeakerInformation from "./SpeakerInformation";
 
 describe("Speakers activities component", () => {

src/2024/Speakers/UseFetchSpeakers.test.tsx

@@ -2,7 +2,6 @@ import React, {FC} from "react";
 import {QueryClient, QueryClientProvider} from "react-query";
 import {renderHook, waitFor} from "@testing-library/react";
 import {speakerAdapter, useFetchSpeakers} from "./UseFetchSpeakers";
-import {beforeAll, beforeEach, describe, expect, it} from "@jest/globals";
 import axios, {AxiosHeaders, AxiosResponse} from "axios";
 import {IResponse} from "../../views/Speakers/Speaker.types";
 

src/2024/SpeakersCarousel/SpeakerSwiper.tsx

@@ -4,7 +4,7 @@ import {Swiper, SwiperSlide} from "swiper/react";
 import styled from "styled-components";
 import "swiper/swiper-bundle.min.css";
 import "./SpeakersCarousel.scss";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import conferenceData from "../../data/2024.json";
 import {useFetchSpeakers} from "../Speakers/UseFetchSpeakers";
 import * as Sentry from "@sentry/react";

src/2024/SpeakersCarousel/SpeakersCarousel.tsx

@@ -1,5 +1,5 @@
 import {FC} from "react";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import LessThanBlueWhiteIcon
   from "../../assets/images/MoreThanBlueWhiteIcon.svg";
 import {motion} from "framer-motion";

src/2024/Sponsors/Supporters.test.tsx

@@ -2,7 +2,7 @@ import {fireEvent, render, screen} from "@testing-library/react";
 import {Supporters} from "./Supporters";
 import React from "react";
 import {useWindowSize} from "react-use";
-import {BrowserRouter, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Route, Routes} from "react-router";
 
 jest.mock("react-use", () => ({
     useWindowSize: jest.fn(),

src/2024/TalkDetail/MeetingDetail.tsx

@@ -11,7 +11,7 @@ import MoreThanIcon from "../../assets/images/MoreThanBlueIcon.svg";
 import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
 import {useWindowSize} from "react-use";
 
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import {
   ROUTE_2024_SPEAKER_DETAIL,
   ROUTE_2024_TALKS,

src/2024/TalkDetail/MeetingDetailContainer.tsx

@@ -3,7 +3,7 @@ import React, {FC, useEffect} from "react";
 import NotFoundError from "../../components/NotFoundError/NotFoundError";
 import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
 import styled from "styled-components";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import conferenceData from "../../data/2024.json";
 import {sessionAdapter, useFetchTalksById} from "../Talks/UseFetchTalks";
 import * as Sentry from "@sentry/react";

src/2024/Talks/components/TalkCard.tsx

@@ -1,5 +1,5 @@
 import React, {FC} from "react";
-import {Link} from "react-router-dom";
+import {Link} from "react-router";
 import {Tag} from "../../../components/Tag/Tag";
 import {
   ROUTE_2024_SPEAKER_DETAIL,

src/2024/Talks/useFetchTalks.test.tsx

@@ -3,7 +3,6 @@ import {QueryClient, QueryClientProvider} from "react-query";
 import {renderHook, waitFor} from "@testing-library/react";
 import axios, {AxiosHeaders, AxiosResponse} from "axios";
 import {faker} from "@faker-js/faker";
-import {beforeAll, beforeEach, describe, expect, it} from "@jest/globals";
 import {
   extractSessionCategoryInfo,
   extractSessionSlides,

src/App.test.tsx

@@ -1,5 +1,5 @@
 import {render, screen} from "@testing-library/react";
-import {BrowserRouter, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Route, Routes} from "react-router";
 import App from "./App";
 import React from "react";
 import userEvent from "@testing-library/user-event";

src/App.tsx

@@ -1,4 +1,4 @@
-import {Link, Route, Routes} from "react-router-dom";
+import {Link, Route, Routes} from "react-router";
 import {
     ROUTE_2023_ATTENDEE,
     ROUTE_2023_CFP,

src/components/Footer/Footer.tsx

@@ -6,7 +6,7 @@ import flickrIcon from "../../assets/images/flickr.svg";
 import linkedinIcon from "../../assets/images/linkedinIcon.svg";
 import logo from "../../assets/images/devBcn.png";
 import twitterIcon from "../../assets/images/twitterIcon.svg";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useWindowSize } from "react-use";
 import data from "../../data/2024.json";
 import youtubeIcon from "../../assets/images/youtubeIcon.svg";

src/components/Navigation/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 
 import { Color } from "../../styles/colors";
 import styled from "styled-components";

src/components/Navigation/HorizontalMenu.tsx

@@ -2,7 +2,7 @@ import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
 import { NavigationItem } from "./NavigationData";
 import { useWindowSize } from "react-use";
 import { NavMenu, StyledLink, SubLink, SubMenu } from "./Style.Navigation";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 import { FC } from "react";
 
 type Props = {

src/components/Navigation/Navigation.tsx

@@ -1,7 +1,7 @@
 import {AnimatePresence} from "framer-motion";
 import {FC, useEffect, useState} from "react";
 import {MOBILE_BREAKPOINT} from "../../constants/BreakPoints";
-import {useLocation, useNavigate} from "react-router-dom";
+import {useLocation, useNavigate} from "react-router";
 import Breadcrumbs from "./Breadcrumbs";
 import CloseIcon from "../../assets/images/CloseIcon.svg";
 import NavigationLogo from "../../assets/images/devBcn.png";

src/components/Navigation/Style.Navigation.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { motion } from "framer-motion";
 import { Color } from "../../styles/colors";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 import { MAX_WIDTH, MOBILE_BREAKPOINT } from "../../constants/BreakPoints";
 
 export const StyledBlueHamburger = styled(motion.img)`

src/components/NotFoundError/NotFoundError.tsx

@@ -1,7 +1,7 @@
 import { Color } from "../../styles/colors";
 
 import { FC, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import SectionWrapper from "../SectionWrapper/SectionWrapper";
 import styled from "styled-components";
 import ActionButtons from "../../views/Home/components/ActionButtons/ActionButtons";

src/index.tsx

@@ -5,7 +5,7 @@ import {
   matchRoutes,
   useLocation,
   useNavigationType,
-} from "react-router-dom";
+} from "react-router";
 import App from "./App";
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom";

src/setupTests.ts

@@ -3,5 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
+import { TextEncoder } from 'util';
 
+global.TextEncoder = TextEncoder;
 window.scrollTo = jest.fn();

src/views/Attendee/AttendeeInformation.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router";
 import AttendeeInformation from "./AttendeeInformation";
 
 describe("Attendee information component", () => {

src/views/Cookies/Cookies.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { ROUTE_HOME } from "../../constants/routes";
 
 const StyledSection = styled.section`

src/views/Diversity/Diversity.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import Diversity from "./Diversity";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router";
 
 describe("Diversity component", () => {
   it("renders heading correctly", () => {

src/views/Diversity/Diversity.tsx

@@ -3,7 +3,7 @@ import { Color } from "../../styles/colors";
 import data from "../../data/2024.json";
 import styled from "styled-components";
 import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import {
   ROUTE_CODE_OF_CONDUCT,
   ROUTE_CONDITIONS,