Fix date library and timezone management

Author: Tristan-WorkGH

package-lock.json

@@ -14,20 +14,22 @@
         "npm": "^10.9.2"
     },
     "dependencies": {
+        "@date-fns/tz": "^1.2.0",
+        "@date-fns/utc": "^2.1.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
         "@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.95.0.tgz",
         "@hookform/resolvers": "^4.0.0",
         "@mui/icons-material": "^5.16.14",
         "@mui/lab": "5.0.0-alpha.175",
         "@mui/material": "^5.16.14",
-        "@mui/x-date-pickers": "^7.28.3",
+        "@mui/x-date-pickers": "^8.1.0",
         "@mui/x-tree-view": "^7.28.1",
         "@reduxjs/toolkit": "^2.5.1",
         "ag-grid-community": "^33.1.0",
         "ag-grid-react": "^33.1.0",
         "core-js": "^3.40.0",
-        "dayjs": "^1.11.13",
+        "date-fns": "^4.1.0",
         "notistack": "^3.0.2",
         "oidc-client": "^1.11.5",
         "react": "^18.3.1",

package.json

@@ -6,10 +6,14 @@
  */
 
 import App from './app';
-import { FunctionComponent, useMemo } from 'react';
+import { FunctionComponent, PropsWithChildren, useMemo } from 'react';
 import { CssBaseline, responsiveFontSizes, ThemeOptions } from '@mui/material';
 import { createTheme, StyledEngineProvider, Theme, ThemeProvider } from '@mui/material/styles';
 import { enUS as MuiCoreEnUS, frFR as MuiCoreFrFR } from '@mui/material/locale';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { enUS as MuiDatePickersEnUS, frFR as MuiDatePickersFrFR } from '@mui/x-date-pickers/locales';
+import { enUS as dateFnsEnUS, fr as dateFnsFr } from 'date-fns/locale';
 import {
     cardErrorBoundaryEn,
     cardErrorBoundaryFr,
@@ -26,7 +30,7 @@ import {
     topBarFr,
     NotificationsProvider,
 } from '@gridsuite/commons-ui';
-import { IntlConfig, IntlProvider } from 'react-intl';
+import { type IntlConfig, IntlProvider } from 'react-intl';
 import { Provider, useSelector } from 'react-redux';
 import messages_en from '../../translations/en.json';
 import messages_fr from '../../translations/fr.json';
@@ -103,7 +107,8 @@ const getMuiTheme = (theme: GsTheme, locale: GsLangUser): Theme => {
     return responsiveFontSizes(
         createTheme(
             theme === LIGHT_THEME ? lightTheme : darkTheme,
-            locale === LANG_FRENCH ? MuiCoreFrFR : MuiCoreEnUS // MUI core translations
+            locale === LANG_FRENCH ? MuiCoreFrFR : MuiCoreEnUS, // MUI core translations
+            locale === LANG_FRENCH ? MuiDatePickersFrFR : MuiDatePickersEnUS // MUI x-date-pickers translations
         )
     );
 };
@@ -125,10 +130,21 @@ const messages: Record<GsLangUser, IntlConfig['messages']> = {
 
 const basename = new URL(document.baseURI ?? '').pathname;
 
+function intlToDateFnsLocale(lng: GsLangUser) {
+    switch (lng) {
+        case LANG_FRENCH:
+            return dateFnsFr;
+        case LANG_ENGLISH:
+            return dateFnsEnUS;
+        default:
+            return undefined;
+    }
+}
+
 /**
  * Layer injecting Theme, Internationalization (i18n) and other tools (snackbar, error boundary, ...)
  */
-const AppWrapperRouterLayout: typeof App = (props, context) => {
+const AppWrapperRouterLayout: typeof App = (props: Readonly<PropsWithChildren<{}>>) => {
     const computedLanguage = useSelector((state: AppState) => state.computedLanguage);
     const theme = useSelector((state: AppState) => state[PARAM_THEME]);
     const themeCompiled = useMemo(() => getMuiTheme(theme, computedLanguage), [computedLanguage, theme]);
@@ -137,14 +153,19 @@ const AppWrapperRouterLayout: typeof App = (props, context) => {
         <IntlProvider locale={computedLanguage} defaultLocale={LANG_ENGLISH} messages={messages[computedLanguage]}>
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={themeCompiled}>
-                    <SnackbarProvider hideIconVariant={false}>
-                        <CssBaseline />
-                        <CardErrorBoundary>
-                            <NotificationsProvider urls={urlMapper}>
-                                <App {...props}>{props.children}</App>
-                            </NotificationsProvider>
-                        </CardErrorBoundary>
-                    </SnackbarProvider>
+                    <LocalizationProvider
+                        dateAdapter={AdapterDateFns}
+                        adapterLocale={intlToDateFnsLocale(computedLanguage)}
+                    >
+                        <SnackbarProvider hideIconVariant={false}>
+                            <CssBaseline />
+                            <CardErrorBoundary>
+                                <NotificationsProvider urls={urlMapper}>
+                                    <App {...props}>{props.children}</App>
+                                </NotificationsProvider>
+                            </CardErrorBoundary>
+                        </SnackbarProvider>
+                    </LocalizationProvider>
                 </ThemeProvider>
             </StyledEngineProvider>
         </IntlProvider>

src/components/App/app-wrapper.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FunctionComponent, PropsWithChildren, useCallback, useEffect } from 'react';
+import { type PropsWithChildren, useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Grid } from '@mui/material';
 import {
@@ -24,7 +24,7 @@ import AppTopBar from './app-top-bar';
 import { useDebugRender } from '../../utils/hooks';
 import { AppDispatch } from '../../redux/store';
 
-const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
+export default function App({ children }: Readonly<PropsWithChildren<{}>>) {
     useDebugRender('app');
     const { snackError } = useSnackMessage();
     const dispatch = useDispatch<AppDispatch>();
@@ -102,9 +102,8 @@ const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
                 <AnnouncementNotification user={user} />
             </Grid>
             <Grid item container xs component="main">
-                <CardErrorBoundary>{/*Router outlet ->*/ props.children}</CardErrorBoundary>
+                <CardErrorBoundary>{/*Router outlet ->*/ children}</CardErrorBoundary>
             </Grid>
         </Grid>
     );
-};
-export default App;
+}

src/components/App/app.tsx

@@ -8,6 +8,9 @@
 import { CSSObject } from '@mui/styled-engine';
 import { Theme as MuiTheme, ThemeOptions as MuiThemeOptions } from '@mui/material/styles/createTheme';
 
+// https://mui.com/x/react-date-pickers/quickstart/#theme-augmentation
+import type {} from '@mui/x-date-pickers/themeAugmentation';
+
 declare module '@mui/material/styles/createTheme' {
     export * from '@mui/material/styles/createTheme';