[#525] adopted twake-i18n (#404)

* [#525] adopted twake-i18n 

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

__test__/components/DateTimeField.test.tsx

@@ -11,7 +11,7 @@ import {
   DateTimeFields,
 } from "../../src/components/Event/components/DateTimeFields";
 
-jest.mock("cozy-ui/transpiled/react/providers/I18n", () => ({
+jest.mock("twake-i18n", () => ({
   useI18n: () => ({
     t: (key: string) => key,
     lang: "en",

__test__/utils/Renderwithproviders.tsx

@@ -1,9 +1,9 @@
 import type { RenderOptions } from "@testing-library/react";
 import { render } from "@testing-library/react";
-import { I18nContext } from "cozy-ui/transpiled/react/providers/I18n";
 import React, { PropsWithChildren } from "react";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
+import { I18nContext } from "twake-i18n";
 import type { AppStore, RootState } from "../../src/app/store";
 import { setupStore } from "../../src/app/store";
 interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {

package.json

@@ -16,7 +16,6 @@
     "@mui/material": "^7.1.2",
     "@mui/x-date-pickers": "^8.14.0",
     "@reduxjs/toolkit": "^2.8.2",
-    "cozy-ui": "^133.0.0-beta.1",
     "dayjs": "^1.11.19",
     "i18next": "^23.7.9",
     "ical.js": "^2.2.0",
@@ -30,6 +29,7 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.23.1",
     "redux-first-history": "^5.2.0",
+    "twake-i18n": "^0.3.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -57,12 +57,12 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.4",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.27.1",
-    "@rsbuild/core": "^1.5.2",
+    "@rsbuild/core": "^1.6.13",
-    "@rsbuild/plugin-react": "^1.3.3",
+    "@rsbuild/plugin-react": "^1.4.2",
     "@rsbuild/plugin-stylus": "^1.2.0",
-    "@rsbuild/plugin-svgr": "^1.2.0",
+    "@rsbuild/plugin-svgr": "^1.2.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -71,35 +71,24 @@
     "@types/node": "^20.19.24",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.44.1",
+    "@typescript-eslint/parser": "^8.48.1",
-    "babel-jest": "^30.0.4",
+    "babel-jest": "^30.2.0",
-    "eslint": "^8.57.1",
+    "babel-plugin-istanbul": "^7.0.1",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-jest": "^29.2.1",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "history": "^5.3.0",
     "i18next-resources-for-ts": "1.4.0",
-    "jest": "^30.0.4",
+    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.0.4",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-preview": "^0.3.1",
     "prettier": "^3.6.2",
-    "ts-jest": "^29.4.0",
+    "ts-jest": "^29.4.6",
     "typescript": "^4.9.5"
-  },
-  "overrides": {
-    "@material-ui/core": "npm:@mui/material@latest",
-    "@material-ui/lab": "npm:@mui/lab@latest",
-    "@material-ui/styles": "npm:@mui/styles@latest",
-    "@material-ui/system": "npm:@mui/system@latest",
-    "@material-ui/pickers": "npm:@mui/x-date-pickers@latest",
-    "react-select": "^5.8.0",
-    "react-swipeable-views": "^0.14.0",
-    "react-markdown": "^9.0.0",
-    "@babel/runtime": "^7.26.10"
   }
 }

src/App.tsx

@@ -12,7 +12,6 @@ import { CustomThemeProvider } from "./theme/ThemeProvider";
 import { useAppDispatch, useAppSelector } from "./app/hooks";
 import { push } from "redux-first-history";
 import { ErrorSnackbar } from "./components/Error/ErrorSnackbar";
-import I18n from "cozy-ui/transpiled/react/providers/I18n";
 import { AVAILABLE_LANGUAGES } from "./features/Settings/constants";
 
 import {
@@ -26,6 +25,7 @@ import en from "./locales/en.json";
 import fr from "./locales/fr.json";
 import ru from "./locales/ru.json";
 import vi from "./locales/vi.json";
+import I18n from "twake-i18n";
 
 const locale = { en, fr, ru, vi };
 const dateLocales = { en: enGB, fr: frLocale, ru: ruLocale, vi: viLocale };

src/components/Attendees/PeopleSearch.tsx

@@ -11,7 +11,7 @@ import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined
 import Chip from "@mui/material/Chip";
 import { useTheme } from "@mui/material/styles";
 import { getAccessiblePair } from "../Calendar/utils/calendarColorsUtils";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { SnackbarAlert } from "../Loading/SnackBarAlert";
 
 export interface User {

src/components/Calendar/AccessTab.tsx

@@ -18,7 +18,7 @@ import {
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { FieldWithLabel } from "../Event/components/FieldWithLabel";
 import { SnackbarAlert } from "../Loading/SnackBarAlert";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { ErrorSnackbar } from "../Error/ErrorSnackbar";
 
 export function AccessTab({ calendar }: { calendar: Calendars }) {

src/components/Calendar/Calendar.tsx

@@ -38,7 +38,7 @@ import { MiniCalendar } from "./MiniCalendar";
 import { User } from "../Attendees/PeopleSearch";
 import { useTheme } from "@mui/material/styles";
 import { updateDarkColor } from "./utils/calendarColorsUtils";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import frLocale from "@fullcalendar/core/locales/fr";
 import ruLocale from "@fullcalendar/core/locales/ru";
 import viLocale from "@fullcalendar/core/locales/vi";

src/components/Calendar/CalendarColorPicker.tsx

@@ -10,7 +10,7 @@ import {
 } from "@mui/material";
 import { useState } from "react";
 import { HexColorPicker } from "react-colorful";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
 
 export function ColorPicker({

src/components/Calendar/CalendarModal.tsx

@@ -13,7 +13,7 @@ import { AccessTab } from "./AccessTab";
 import { ImportTab } from "./ImportTab";
 import { SettingsTab } from "./SettingsTab";
 import { defaultColors } from "./utils/calendarColorsUtils";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 function CalendarPopover({
   open,

src/components/Calendar/CalendarSearch.tsx

@@ -5,7 +5,7 @@ import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import { useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { getCalendars } from "../../features/Calendars/CalendarApi";

src/components/Calendar/CalendarSelection.tsx

@@ -16,7 +16,7 @@ import { Divider, ListItem, Menu, MenuItem } from "@mui/material";
 import { removeCalendarAsync } from "../../features/Calendars/CalendarSlice";
 import { DeleteCalendarDialog } from "./DeleteCalendarDialog";
 import { trimLongTextWithoutSpace } from "../../utils/textUtils";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 function CalendarAccordion({
   title,

src/components/Calendar/DeleteCalendarDialog.tsx

@@ -5,7 +5,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogActions from "@mui/material/DialogActions";
 import Button from "@mui/material/Button";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export function DeleteCalendarDialog({
   deletePopupOpen,

src/components/Calendar/ImportTab.tsx

@@ -14,7 +14,7 @@ import { useEffect, useState } from "react";
 import { useAppSelector } from "../../app/hooks";
 import { CalendarItemList } from "./CalendarItemList";
 import { SettingsTab } from "./SettingsTab";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export function ImportTab({
   userId,

src/components/Calendar/MiniCalendar.tsx

@@ -10,7 +10,7 @@ import {
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice";
 import { useEffect, useState } from "react";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { setView } from "../../features/Settings/SettingsSlice";
 
 export function MiniCalendar({

src/components/Calendar/SettingsTab.tsx

@@ -9,7 +9,7 @@ import {
   ToggleButtonGroup,
   Typography,
 } from "@mui/material";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { useState, useEffect } from "react";
 import { useAppSelector } from "../../app/hooks";
 import { Calendars } from "../../features/Calendars/CalendarTypes";

src/components/Calendar/TimezoneSelector.tsx

@@ -1,5 +1,5 @@
 import { Button, Popover } from "@mui/material";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import moment from "moment";
 import { MouseEvent, useMemo, useState } from "react";
 import { browserDefaultTimeZone } from "../../utils/timezone";

src/components/Calendar/utils/calendarUtils.ts

@@ -6,7 +6,7 @@ import { SlotLabelContentArg } from "@fullcalendar/core";
 import moment from "moment-timezone";
 import { refreshSingularCalendar } from "../../Event/utils/eventUtils";
 import { ThunkDispatch } from "@reduxjs/toolkit";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { detectDateTimeFormat } from "../../Event/utils/dateTimeHelpers";
 
 function convertEventDateTimeToISO(

src/components/Dialog/ResponsiveDialog.tsx

@@ -40,8 +40,10 @@ import React, { ReactNode } from "react";
  * </ResponsiveDialog>
  * ```
  */
-interface ResponsiveDialogProps
+interface ResponsiveDialogProps extends Omit<
-  extends Omit<DialogProps, "maxWidth" | "title"> {
+  DialogProps,
+  "maxWidth" | "title"
+> {
   /** Whether the dialog is open */
   open: boolean;
   /** Callback fired when the dialog should be closed */

src/components/Error/Error.tsx

@@ -4,7 +4,7 @@ import { Box, Button, Fade, Paper, Stack, Typography } from "@mui/material";
 import { useEffect } from "react";
 import { push } from "redux-first-history";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export function Error() {
   const { t } = useI18n();

src/components/Error/ErrorSnackbar.tsx

@@ -4,7 +4,7 @@ import Button from "@mui/material/Button";
 import { useAppDispatch } from "../../app/hooks";
 import { clearError as calendarClearError } from "../../features/Calendars/CalendarSlice";
 import { clearError as userClearError } from "../../features/User/userSlice";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export function ErrorSnackbar({
   error,

src/components/Event/AddDescButton.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, TextField } from "@mui/material";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { FieldWithLabel } from "./components/FieldWithLabel";
 import { Description as DescriptionIcon } from "@mui/icons-material";
 

src/components/Event/EditModeDialog.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mui/material";
 import { CalendarEvent } from "../../features/Events/EventsTypes";
 import { useState } from "react";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export function EditModeDialog({
   type,

src/components/Event/EventDuplicate.tsx

@@ -1,6 +1,6 @@
 import { MenuItem } from "@mui/material";
 import { CalendarEvent } from "../../features/Events/EventsTypes";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export default function EventDuplication({
   onClose,

src/components/Event/EventFormFields.tsx

@@ -33,7 +33,7 @@ import {
 } from "../../utils/videoConferenceUtils";
 import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
 import { CalendarItemList } from "../Calendar/CalendarItemList";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { FieldWithLabel } from "./components/FieldWithLabel";
 import { DateTimeFields } from "./components/DateTimeFields";
 import { useAllDayToggle } from "./hooks/useAllDayToggle";

src/components/Event/EventRepeat.tsx

@@ -15,7 +15,7 @@ import {
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import { RepetitionObject } from "../../features/Events/EventsTypes";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export default function RepeatEvent({
   repetition,

src/components/Event/components/DateTimeFields.tsx

@@ -6,7 +6,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs, { Dayjs } from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { LONG_DATE_FORMAT } from "../utils/dateTimeFormatters";
 import "dayjs/locale/fr";
 import "dayjs/locale/en";

src/components/Menubar/EventSearchBar.tsx

@@ -19,7 +19,7 @@ import { useRef, useState } from "react";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import SearchIcon from "@mui/icons-material/Search";
 import TuneIcon from "@mui/icons-material/Tune";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { searchEventsAsync } from "../../features/Search/SearchSlice";
 import { setView } from "../../features/Settings/SettingsSlice";

src/components/Menubar/Menubar.tsx

@@ -25,7 +25,7 @@ import {
 } from "@mui/material";
 import { push } from "redux-first-history";
 import { CalendarApi } from "@fullcalendar/core";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { setView } from "../../features/Settings/SettingsSlice";
 import { getUserDisplayName } from "../../utils/userUtils";
 import { format } from "date-fns";

src/features/Events/EventDisplayPreview.tsx

@@ -47,7 +47,7 @@ import { deleteEventAsync } from "../Calendars/CalendarSlice";
 import { dlEvent } from "./EventApi";
 import { CalendarEvent } from "./EventsTypes";
 import EventUpdateModal from "./EventUpdateModal";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { userAttendee } from "../User/userDataTypes";
 import { browserDefaultTimeZone } from "../../utils/timezone";
 

src/features/Events/EventModal.tsx

@@ -31,7 +31,7 @@ import {
 } from "../../components/Event/utils/dateTimeFormatters";
 import { convertFormDateTimeToISO } from "../../components/Event/utils/dateTimeHelpers";
 import { addDays } from "../../components/Event/utils/dateRules";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import {
   saveEventFormDataToTemp,
   restoreEventFormDataFromTemp as restoreEventFormDataFromStorage,

src/features/Events/EventUpdateModal.tsx

@@ -28,7 +28,7 @@ import {
   detectRecurringEventChanges,
 } from "./eventUtils";
 import { updateTempCalendar } from "../../components/Calendar/utils/calendarUtils";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { updateAttendeesAfterTimeChange } from "../../components/Calendar/handlers/eventHandlers";
 import { convertFormDateTimeToISO } from "../../components/Event/utils/dateTimeHelpers";
 import {

src/features/Search/SearchResultsPage.tsx

@@ -3,7 +3,7 @@ import RepeatIcon from "@mui/icons-material/Repeat";
 import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
 import { Box, IconButton, Stack, Typography } from "@mui/material";
 import CircularProgress from "@mui/material/CircularProgress";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { AppDispatch } from "../../app/store";

src/features/Settings/SettingsPage.tsx

@@ -33,7 +33,7 @@ import {
   setAlarmEmails,
 } from "../User/userSlice";
 import { AVAILABLE_LANGUAGES } from "./constants";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import "./SettingsPage.styl";
 import {
   useTimeZoneList,