@centreon/ui 23.10.18-MON-fix-chromatic-parameters.0 → 23.10.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-fix-chromatic-parameters.0",
+  "version": "23.10.19",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Icon/index.tsx

@@ -6,7 +6,7 @@ import {
   Tooltip
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 const useStyles = makeStyles()((theme) => ({
   button: {

package/src/Button/Save/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Theme, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import StartIcon from './StartIcon';
 import Content from './Content';

package/src/FileDropZone/index.tsx

@@ -17,7 +17,7 @@ import { alpha, Box, FormHelperText, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
 import useDropzone, { UseDropzoneState } from './useDropzone';

package/src/Form/FormButtons.tsx

@@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import useMemoComponent from '../utils/useMemoComponent';
-import getNormalizedId from '../utils/getNormalizedId';
+import { useMemoComponent, getNormalizedId } from '../utils';
 
 import {
   labelReset,

package/src/Form/Inputs/Autocomplete.tsx

@@ -9,7 +9,7 @@ import { FormHelperText, Stack } from '@mui/material';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';

package/src/Form/Inputs/Radio.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 import { useMemoComponent } from '../..';
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import { InputPropsWithoutGroup } from './models';
 

package/src/Form/Inputs/Switch.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils/getNormalizedId';
 import { useMemoComponent } from '../..';
 
 import { InputPropsWithoutGroup } from './models';

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -16,16 +16,18 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import useIntersectionObserver from '../../../../utils/useIntersectionObserver';
+import {
+  useDebounce,
+  useIntersectionObserver,
+  useDeepCompare
+} from '../../../../utils';
 import { ListingModel, SelectEntry } from '../../../..';
 import Option from '../../Option';
 import {
   ConditionsSearchParameter,
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
-import useDebounce from '../../../../utils/useDebounce';
 import useFetchQuery from '../../../../api/useFetchQuery';
-import { useDeepCompare } from '../../../../utils/useMemoComponent';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
   conditionField?: keyof SelectEntry;

package/src/InputField/Select/Autocomplete/index.tsx

@@ -20,7 +20,7 @@ import Option from '../Option';
 import TextField from '../../Text';
 import { SelectEntry } from '..';
 import { searchLabel } from '../../translatedLabels';
-import getNormalizedId from '../../../utils/getNormalizedId';
+import { getNormalizedId } from '../../../utils';
 
 export type Props = {
   autoFocus?: boolean;

package/src/InputField/Select/index.tsx

@@ -13,7 +13,7 @@ import {
   Divider
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import Option from './Option';
 

package/src/InputField/Text/index.tsx

@@ -12,7 +12,7 @@ import {
   Typography
 } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import useAutoSize from './useAutoSize';
 

package/src/Listing/ActionBar/index.tsx

@@ -11,7 +11,7 @@ import { userAtom, ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';

package/src/Listing/index.tsx

@@ -31,8 +31,7 @@ import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import useKeyObserver from '../utils/useKeyObserver';
-import useMemoComponent from '../utils/useMemoComponent';
+import { useKeyObserver, useMemoComponent } from '../utils';
 
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';

package/src/ListingPage/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 import WithPanel from '../Panel/WithPanel';
 
 import FilterSkeleton from './FilterSkeleton';

package/src/Panel/Memoized.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from 'react';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import Panel, { Props } from '.';
 

package/src/Panel/Section/index.tsx

@@ -6,7 +6,7 @@ import ForwardIcon from '@mui/icons-material/ArrowForwardIos';
 
 import Panel from '..';
 import ContentWithCircularLoading from '../../ContentWithCircularProgress';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 
 import ExpandableSection from './ExpandableSection';
 

package/src/SortableItems/SortableItem.tsx

@@ -2,7 +2,7 @@ import { props } from 'ramda';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import Item from './Item';
 

package/src/index.ts

@@ -82,15 +82,6 @@ export type {
 } from './api/buildListingEndpoint/models';
 export { default as buildListingDecoder } from './api/buildListingDecoder';
 
-export {
-  default as useLocaleDateTimeFormat,
-  dateTimeFormat,
-  dateFormat,
-  timeFormat
-} from './utils/useLocaleDateTimeFormat';
-
-export { default as useDebounce } from './utils/useDebounce';
-export { default as useIntersectionObserver } from './utils/useIntersectionObserver';
 export { default as ContentWithCircularLoading } from './ContentWithCircularProgress';
 export {
   setUrlQueryParameters,
@@ -102,12 +93,6 @@ export type {
   ListsSearchParameter
 } from './api/buildListingEndpoint/models';
 
-export {
-  default as useMemoComponent,
-  useDeepCompare
-} from './utils/useMemoComponent';
-export { default as useCopyToClipboard } from './utils/useCopyToClipboard';
-
 export { default as MenuSkeleton } from './MenuSkeleton';
 export { default as PopoverMenu } from './PopoverMenu';
 
@@ -143,8 +128,6 @@ export {
 } from './FileDropZone';
 export type { CustomDropZoneContentProps } from './FileDropZone';
 export { default as TestQueryProvider } from './api/TestQueryProvider';
-export * from './utils/useThemeMode';
-export * from './utils/typedMemo';
 export * from './FallbackPage/FallbackPage';
 export * from './Logo/CentreonLogo';
 export * from './TopCounterElements';
@@ -152,6 +135,7 @@ export { default as Image, ImageVariant } from './Image/Image';
 export { default as WallpaperPage } from './WallpaperPage';
 export { RichTextEditor } from './RichTextEditor';
 export { default as ActionsList } from './ActionsList';
-export { getStatusColors, SeverityCode } from './utils/statuses';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
+
+export * from './utils';

package/src/utils/getNormalizedId.ts

@@ -1,5 +1,3 @@
-const getNormalizedId = (idToNormalized: string): string => {
+export const getNormalizedId = (idToNormalized: string): string => {
   return idToNormalized?.replace(/[^A-Z0-9]+/gi, '');
 };
-
-export default getNormalizedId;

package/src/utils/index.ts

@@ -0,0 +1,15 @@
+export * from './useLocaleDateTimeFormat';
+export * from './getNormalizedId';
+export * from './statuses';
+export * from './typedMemo';
+export * from './useCopyToClipboard';
+export * from './useDateTimePickerAdapter';
+export * from './useDebounce';
+export * from './useDeepCallback';
+export * from './useDeepMemo';
+export * from './useIntersectionObserver';
+export * from './useKeyObserver';
+export * from './useLoadImage';
+export * from './useMemoComponent';
+export * from './useThemeMode';
+export * from './useViewportIntersection';

package/src/utils/useCopyToClipboard.ts

@@ -10,7 +10,8 @@ interface Props {
   errorMessage: string;
   successMessage: string;
 }
-const useCopyToClipboard = ({
+
+export const useCopyToClipboard = ({
   successMessage,
   errorMessage
 }: Props): Result => {
@@ -53,5 +54,3 @@ const useCopyToClipboard = ({
 
   return { copy };
 };
-
-export default useCopyToClipboard;

package/src/utils/useDateTimePickerAdapter.ts

@@ -0,0 +1,309 @@
+/* eslint-disable class-methods-use-this */
+import { useCallback } from 'react';
+
+import dayjs from 'dayjs';
+import { useAtomValue } from 'jotai';
+import { equals, isNil, not } from 'ramda';
+
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+import { userAtom } from '@centreon/ui-context';
+
+interface GetDestinationAndConfiguredTimezoneOffsetProps {
+  endTimezone?: string;
+  startTimezone?: string;
+}
+
+interface UseDateTimePickerAdapterProps {
+  Adapter;
+  desktopPickerMediaQuery: string;
+}
+
+enum DSTState {
+  SUMMER,
+  WINTER,
+  NODST
+}
+
+interface ToTimezonedDateProps {
+  date: Date;
+  timeZone?: string;
+}
+
+interface GetDSTStateProps {
+  date: dayjs.Dayjs;
+  timezoneToUse?: string;
+}
+
+export const useDateTimePickerAdapter = (): UseDateTimePickerAdapterProps => {
+  const { timezone, locale } = useAtomValue(userAtom);
+  const { format } = useLocaleDateTimeFormat();
+
+  const desktopPickerMediaQuery =
+    '@media (pointer: fine) or (min-width: 1024px)';
+
+  const toTimezonedDate = ({
+    date,
+    timeZone = undefined
+  }: ToTimezonedDateProps): Date => {
+    if (isNil(timeZone)) {
+      return new Date(date.toLocaleString('en-US'));
+    }
+
+    return new Date(date.toLocaleString('en-US', { timeZone }));
+  };
+
+  const getDestinationAndConfiguredTimezoneOffset = ({
+    startTimezone = undefined,
+    endTimezone = timezone
+  }: GetDestinationAndConfiguredTimezoneOffsetProps): number => {
+    const now = new Date();
+    const currentTimezoneDate = toTimezonedDate({
+      date: now,
+      timeZone: startTimezone
+    });
+    const destinationTimezoneDate = toTimezonedDate({
+      date: now,
+      timeZone: endTimezone
+    });
+
+    return Math.floor(
+      (currentTimezoneDate.getTime() - destinationTimezoneDate.getTime()) /
+        60 /
+        60 /
+        1000
+    );
+  };
+
+  const getDSTState = useCallback(
+    ({ date, timezoneToUse }: GetDSTStateProps): DSTState => {
+      const hasNoTimezone = isNil(timezoneToUse);
+      const currentYear = toTimezonedDate({
+        date: new Date(),
+        timeZone: timezoneToUse
+      }).getFullYear();
+
+      const january = hasNoTimezone
+        ? dayjs(new Date(currentYear, 0, 1)).utcOffset()
+        : dayjs(new Date(currentYear, 0, 1)).tz(timezoneToUse).utcOffset();
+      const july = hasNoTimezone
+        ? dayjs(new Date(currentYear, 6, 1)).utcOffset()
+        : dayjs(new Date(currentYear, 6, 1)).tz(timezoneToUse).utcOffset();
+
+      if (equals(january, july)) {
+        return DSTState.NODST;
+      }
+
+      return july === date.tz().utcOffset() ? DSTState.SUMMER : DSTState.WINTER;
+    },
+    [timezone]
+  );
+
+  const getDSTStateForCurrentTimezone = useCallback(
+    (date: dayjs.Dayjs): DSTState => {
+      return getDSTState({ date });
+    },
+    []
+  );
+
+  interface Chunk {
+    array: Array<unknown>;
+    size: number;
+  }
+  class Adapter extends AdapterDayjs {
+    public formatByString = (value, formatKey: string): string => {
+      return format({
+        date: value.tz(timezone).toDate(),
+        formatString: formatKey
+      });
+    };
+
+    public format = (date: dayjs.Dayjs, formatKey: string): string => {
+      return this.formatByString(
+        date.tz(timezone, true),
+        this.formats[formatKey]
+      );
+    };
+
+    public startOfWeek = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      if (date.tz(timezone).isUTC()) {
+        return date.tz(timezone).startOf('week').utc();
+      }
+
+      return date.tz(timezone).startOf('week');
+    };
+
+    public setMinutes = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
+      return date.minute(count);
+    };
+
+    public setHours = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
+      return date.hour(count);
+    };
+
+    public isSameDay = (date: dayjs.Dayjs, comparing: dayjs.Dayjs): boolean => {
+      const isSameYearAndMonth = this.isSameYear(date, comparing)
+        ? this.isSameMonth(date, comparing)
+        : false;
+
+      return (
+        isSameYearAndMonth &&
+        date.tz(timezone).isSame(comparing.tz(timezone), 'day')
+      );
+    };
+
+    public startOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      return date.tz(timezone).startOf('day') as dayjs.Dayjs;
+    };
+
+    public endOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      return date.tz(timezone).endOf('day') as dayjs.Dayjs;
+    };
+
+    public startOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      if (date.tz(timezone).isUTC()) {
+        return date.tz(timezone).utc();
+      }
+
+      return date.tz(timezone);
+    };
+
+    public endOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
+      return date.tz(timezone).endOf('month') as dayjs.Dayjs;
+    };
+
+    public isSameMonth = (
+      date: dayjs.Dayjs,
+      comparing: dayjs.Dayjs
+    ): boolean => {
+      return date.tz(timezone).isSame(comparing.tz(timezone), 'month');
+    };
+
+    public getMonth = (date: dayjs.Dayjs): number => {
+      return date.tz(timezone).month();
+    };
+
+    public isAfter = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
+      return date.isAfter(value.endOf('month'));
+    };
+
+    public isBefore = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
+      return date.isBefore(value.startOf('month'));
+    };
+
+    public getDaysInMonth = (date: dayjs.Dayjs): number => {
+      return date.tz(timezone).daysInMonth();
+    };
+
+    public getWeekdays = (): Array<string> => {
+      const start = dayjs().locale(locale).tz(timezone).startOf('week');
+
+      return [0, 1, 2, 3, 4, 5, 6].map((diff) =>
+        this.formatByString(start.add(diff, 'day'), 'dd')
+      );
+    };
+
+    public getChunkFromArray = ({ array, size }: Chunk): Array<unknown> => {
+      if (!array.length) {
+        return [];
+      }
+      const head = array.slice(0, size);
+      const tail = array.slice(size);
+
+      return [head, ...this.getChunkFromArray({ array: tail, size })];
+    };
+
+    public getWeekArray = (date: dayjs.Dayjs): Array<Array<dayjs.Dayjs>> => {
+      const isMorning = equals(dayjs().tz(timezone).format('a'), 'am');
+      const startOfWeek = date.tz(timezone).startOf('month').startOf('week');
+      const endOfWeek = date.tz(timezone).endOf('month').endOf('week');
+      const start = startOfWeek.startOf('day');
+      const end = endOfWeek.endOf('day');
+      const customStart = isMorning
+        ? startOfWeek.startOf('day')
+        : startOfWeek.startOf('day');
+      const customEnd = isMorning
+        ? endOfWeek.startOf('day')
+        : endOfWeek.startOf('day');
+      const currentStart = start.isUTC()
+        ? start.tz(timezone, true)
+        : customStart;
+      const currentEnd = end.isUTC() ? end.tz(timezone, true) : customEnd;
+      const numberOfDaysInCurrentMonth = currentEnd.diff(
+        currentStart,
+        'd',
+        true
+      );
+      const daysOfMonthWithTimezone = [
+        ...Array(Math.round(numberOfDaysInCurrentMonth)).keys()
+      ].reduce(
+        (acc, _, currentIndex) => {
+          if (acc[currentIndex].isUTC()) {
+            const newCurrent = acc[currentIndex]
+              .utc()
+              .add(1, 'day')
+              .tz(timezone, true);
+
+            return [...acc, newCurrent];
+          }
+          const newCurrent = acc[currentIndex].add(1, 'day');
+
+          return [...acc, newCurrent];
+        },
+        [currentStart]
+      );
+      const weeksArray = this.getChunkFromArray({
+        array: daysOfMonthWithTimezone,
+        size: 7
+      });
+
+      return weeksArray as Array<Array<dayjs.Dayjs>>;
+    };
+
+    public mergeDateAndTime = (
+      date: dayjs.Dayjs,
+      time: dayjs.Dayjs
+    ): dayjs.Dayjs => {
+      const dateWithTimezone = date.tz(timezone).startOf('day');
+      const timeWithTimezone = time.tz(timezone);
+      const dateDSTState = getDSTState({
+        date: dateWithTimezone,
+        timezoneToUse: timezone
+      });
+      const dateDSTStateWithCurrentTimezone =
+        getDSTStateForCurrentTimezone(date);
+
+      if (equals(dateDSTStateWithCurrentTimezone, DSTState.WINTER)) {
+        return dateWithTimezone
+          .add(
+            timeWithTimezone.hour() -
+              getDestinationAndConfiguredTimezoneOffset({
+                endTimezone: 'UTC',
+                startTimezone: dayjs.tz.guess()
+              }),
+            'hour'
+          )
+          .add(timeWithTimezone.minute(), 'minute')
+          .add(timeWithTimezone.second(), 'second');
+      }
+
+      if (not(equals(dateDSTState, DSTState.SUMMER))) {
+        return dateWithTimezone
+          .add(timeWithTimezone.hour(), 'hour')
+          .add(timeWithTimezone.minute(), 'minute')
+          .add(timeWithTimezone.second(), 'second');
+      }
+
+      return dateWithTimezone
+        .hour(timeWithTimezone.hour())
+        .minute(timeWithTimezone.minute())
+        .second(timeWithTimezone.second());
+    };
+  }
+
+  return {
+    Adapter,
+    desktopPickerMediaQuery
+  };
+};

package/src/utils/useDebounce.ts

@@ -6,7 +6,7 @@ interface Props {
   wait: number;
 }
 
-const useDebounce = ({
+export const useDebounce = ({
   functionToDebounce,
   wait,
   memoProps = []
@@ -23,5 +23,3 @@ const useDebounce = ({
     }, wait);
   }, memoProps);
 };
-
-export default useDebounce;

package/src/utils/useDeepCallback.ts

@@ -7,11 +7,9 @@ interface UseDeepCallback<TParameters, TReturn, TMemoProps> {
   deps: Array<TMemoProps>;
 }
 
-const useDeepCallback = <TParameters, TReturn, TMemoProps>({
+export const useDeepCallback = <TParameters, TReturn, TMemoProps>({
   deps,
   callback
 }: UseDeepCallback<TParameters, TReturn, TMemoProps>): ((
   props: TParameters
 ) => TReturn) => useCallback((props) => callback(props), useDeepCompare(deps));
-
-export default useDeepCallback;

package/src/utils/useDeepMemo.ts

@@ -7,10 +7,8 @@ interface UseDeepMemo<TVariable, TMemoProps> {
   variable: TVariable;
 }
 
-const useDeepMemo = <TVariable, TMemoProps>({
+export const useDeepMemo = <TVariable, TMemoProps>({
   deps,
   variable
 }: UseDeepMemo<TVariable, TMemoProps>): TVariable =>
   useMemo(() => variable, useDeepCompare(deps));
-
-export default useDeepMemo;

package/src/utils/useIntersectionObserver.ts

@@ -7,7 +7,7 @@ interface HookParam {
   page: number;
 }
 
-const useIntersectionObserver = ({
+export const useIntersectionObserver = ({
   maxPage,
   page,
   loading,
@@ -41,5 +41,3 @@ const useIntersectionObserver = ({
 
   return lastElementRef;
 };
-
-export default useIntersectionObserver;

package/src/utils/useKeyObserver.tsx

@@ -4,7 +4,7 @@ interface UseKeyObserverProps {
   isShiftKeyDown: boolean;
 }
 
-const useKeyObserver = (): UseKeyObserverProps => {
+export const useKeyObserver = (): UseKeyObserverProps => {
   const [isShiftKeyDown, setIsShiftKeyDown] = useState<boolean>(false);
 
   const pressShift = (): void => setIsShiftKeyDown(true);
@@ -34,5 +34,3 @@ const useKeyObserver = (): UseKeyObserverProps => {
     isShiftKeyDown
   };
 };
-
-export default useKeyObserver;

package/src/utils/useLocaleDateTimeFormat/index.test.tsx

@@ -10,7 +10,7 @@ import { Provider, useSetAtom } from 'jotai';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import useLocaleDateTimeFormat from '.';
+import { useLocaleDateTimeFormat } from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useLocaleDateTimeFormat/index.ts

@@ -87,5 +87,4 @@ const useLocaleDateTimeFormat = (): LocaleDateTimeFormat => {
   };
 };
 
-export default useLocaleDateTimeFormat;
-export { dateTimeFormat, dateFormat, timeFormat };
+export { dateTimeFormat, dateFormat, timeFormat, useLocaleDateTimeFormat };

package/src/utils/useLocaleDateTimeFormat/localeFallback.test.tsx

@@ -10,7 +10,7 @@ import { render, RenderResult } from '@testing-library/react';
 
 import { userAtom, ThemeMode } from '@centreon/ui-context';
 
-import useLocaleDateTimeFormat from '.';
+import { useLocaleDateTimeFormat } from '.';
 
 dayjs.extend(timezonePlugin);
 dayjs.extend(utcPlugin);

package/src/utils/useMemoComponent.ts

@@ -19,10 +19,8 @@ interface MemoComponent {
   memoProps: Array<unknown>;
 }
 
-const useMemoComponent = ({
+export const useMemoComponent = ({
   Component,
   memoProps
 }: MemoComponent): JSX.Element =>
   useMemo(() => Component, useDeepCompare(memoProps));
-
-export default useMemoComponent;