@centreon/ui 26.3.4 → 26.3.6

package/src/TimePeriods/TimePeriods.tsx

@@ -3,18 +3,19 @@ import 'dayjs/locale/en';
 import 'dayjs/locale/es';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/pt';
+
+import { Paper, type Theme, useMediaQuery } from '@mui/material';
+
 import duration from 'dayjs/plugin/duration';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 import { lt } from 'ramda';
 
-import { Paper, type Theme, useMediaQuery } from '@mui/material';
-
 import CustomTimePeriod from './CustomTimePeriod';
+import type { WrapperTimePeriodProps } from './models';
 import SelectedTimePeriod from './SelectedTimePeriod';
 import { useStyles } from './TimePeriods.styles';
-import type { WrapperTimePeriodProps } from './models';
 import useTimePeriod from './useTimePeriod';
 
 dayjs.extend(isSameOrAfter);

package/src/TimePeriods/helpers/index.ts

@@ -2,10 +2,10 @@ import dayjs from 'dayjs';
 import { find, propEq } from 'ramda';
 
 import {
-  CustomTimePeriod,
-  TimePeriod,
-  TimePeriodById,
-  lastDayPeriod
+  type CustomTimePeriod,
+  lastDayPeriod,
+  type TimePeriod,
+  type TimePeriodById
 } from '../models';
 
 export const defaultTimePeriod = lastDayPeriod;

package/src/TimePeriods/index.stories.tsx

@@ -1,12 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import dayjs from 'dayjs';
-
 import Switch from '@mui/material/Switch';
 
-import SimpleCustomTimePeriod from './CustomTimePeriod/SimpleCustomTimePeriod';
-import { dateFormat } from './models';
+import type { Meta, StoryObj } from '@storybook/react';
+import dayjs from 'dayjs';
 
 import TimePeriod from '.';
+import SimpleCustomTimePeriod from './CustomTimePeriod/SimpleCustomTimePeriod';
+import { dateFormat } from './models';
 
 const meta: Meta<typeof TimePeriod> = {
   component: TimePeriod,
@@ -98,8 +97,8 @@ export const BasicTimePeriod: Story = {
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
-  argTypes,
-  args
+  args,
+  argTypes
 };
 
 export const WithExternalComponent: Story = {

package/src/TimePeriods/index.tsx

@@ -3,17 +3,17 @@ import 'dayjs/locale/en';
 import 'dayjs/locale/es';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/pt';
+
 import duration from 'dayjs/plugin/duration';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
+import { memo } from 'react';
 
 import { ParentSize } from '..';
 import LoadingSkeleton from '../LoadingSkeleton';
-
-import { memo } from 'react';
-import TimePeriods from './TimePeriods';
 import type { WrapperTimePeriodProps } from './models';
+import TimePeriods from './TimePeriods';
 
 dayjs.extend(isSameOrAfter);
 dayjs.extend(utcPlugin);

package/src/TimePeriods/models.ts

@@ -1,6 +1,5 @@
-import type { ReactNode } from 'react';
-
 import dayjs from 'dayjs';
+import type { ReactNode } from 'react';
 
 import {
   label1Day,

package/src/TimePeriods/timePeriodsAtoms.ts

@@ -1,13 +1,13 @@
 import dayjs from 'dayjs';
 import { atom } from 'jotai';
-import { T, always, cond, gte, isNil } from 'ramda';
+import { always, cond, gte, isNil, T } from 'ramda';
 
 import {
   defaultTimePeriod,
   getTimePeriodById,
   getTimePeriodFromNow
 } from './helpers';
-import { CustomTimePeriod, TimePeriod, TimePeriodById } from './models';
+import type { CustomTimePeriod, TimePeriod, TimePeriodById } from './models';
 
 export const selectedTimePeriodAtom = atom<TimePeriod | null>(
   defaultTimePeriod

package/src/TimePeriods/useSortTimePeriods.ts

@@ -1,8 +1,8 @@
 import dayjs from 'dayjs';
-import { T, always, cond, gte } from 'ramda';
+import { always, cond, gte, T } from 'ramda';
 
 import { getTimePeriodFromNow } from './helpers';
-import { TimePeriod } from './models';
+import type { TimePeriod } from './models';
 
 const useSortTimePeriods = (
   timePeriods: Array<TimePeriod>

package/src/TimePeriods/useTimePeriod.ts

@@ -1,8 +1,7 @@
-import { useEffect } from 'react';
-
 import { useAtomValue, useSetAtom } from 'jotai';
+import { useEffect } from 'react';
 
-import { WrapperTimePeriodProps } from './models';
+import type { WrapperTimePeriodProps } from './models';
 import {
   adjustTimePeriodDerivedAtom,
   customTimePeriodAtom,
@@ -17,7 +16,7 @@ const useTimePeriod = ({
   adjustTimePeriodData
 }: Omit<WrapperTimePeriodProps, 'extraTimePeriods' | 'disabled'>): void => {
   const selectedTimePeriod = useAtomValue(selectedTimePeriodAtom);
-  const customTimePeriod = useAtomValue(customTimePeriodAtom);
+  const _customTimePeriod = useAtomValue(customTimePeriodAtom);
   const getCurrentEndStartInterval = useAtomValue(getDatesDerivedAtom);
   const errorTimePeriod = useAtomValue(errorTimePeriodAtom);
   const adjustTimeTimePeriod = useSetAtom(adjustTimePeriodDerivedAtom);
@@ -28,21 +27,26 @@ const useTimePeriod = ({
     }
 
     adjustTimeTimePeriod(adjustTimePeriodData);
-  }, [adjustTimePeriodData?.start, adjustTimePeriodData?.end]);
+  }, [
+    adjustTimePeriodData?.start,
+    adjustTimePeriodData?.end,
+    adjustTimePeriodData,
+    adjustTimeTimePeriod
+  ]);
 
   useEffect(() => {
     const [start, end, timelineEventsLimit] =
       getCurrentEndStartInterval(selectedTimePeriod);
 
     getParameters?.({ end, start, timelineEventsLimit });
-  }, [customTimePeriod.start, customTimePeriod.end, selectedTimePeriod]);
+  }, [selectedTimePeriod, getCurrentEndStartInterval, getParameters]);
 
   useEffect(() => {
     if (!errorTimePeriod) {
       return;
     }
     getIsError?.(errorTimePeriod);
-  }, [errorTimePeriod]);
+  }, [errorTimePeriod, getIsError]);
 };
 
 export default useTimePeriod;

package/src/TopCounterElements/ResourceCounters.tsx

@@ -1,10 +1,9 @@
-import { Fragment } from 'react';
+import type { SeverityCode } from '@centreon/ui';
 
+import { Fragment } from 'react';
 import { Link } from 'react-router';
 import { makeStyles } from 'tss-react/mui';
 
-import { SeverityCode } from '@centreon/ui';
-
 import StatusCounter from './StatusCounter';
 
 const useStyles = makeStyles()((theme) => ({
@@ -58,8 +57,8 @@ export default ({ counters }: CounterProps): JSX.Element => {
               <Link
                 aria-label={ariaLabel}
                 className={classes.link}
-                to={to}
                 onClick={onClick}
+                to={to}
               >
                 <StatusCounter count={count} severityCode={severityCode} />
               </Link>

package/src/TopCounterElements/ResourceSubMenu.tsx

@@ -1,12 +1,12 @@
-import { equals } from 'ramda';
-import { Link } from 'react-router';
-import { makeStyles } from 'tss-react/mui';
-
 import { List, ListItem } from '@mui/material';
 
-import { SeverityCode, getStatusColors } from '@centreon/ui';
+import { getStatusColors, type SeverityCode } from '@centreon/ui';
 import { ThemeMode } from '@centreon/ui-context';
 
+import { equals } from 'ramda';
+import { Link } from 'react-router';
+import { makeStyles } from 'tss-react/mui';
+
 const useStyles = makeStyles()((theme) => ({
   count: {
     marginLeft: 'auto'
@@ -75,16 +75,16 @@ const SubMenu = ({ items, onClose }: SubMenuProps): JSX.Element => {
           to
         }) => (
           <ListItem
-            disableGutters
             className={classes.submenuItem}
+            disableGutters
             key={to}
             onClick={onClose}
           >
             <Link
               className={classes.link}
+              onClick={onClick}
               role="menuitem"
               to={to}
-              onClick={onClick}
             >
               <span className={classes.status}>
                 <span

package/src/TopCounterElements/StatusCounter.tsx

@@ -1,9 +1,9 @@
-import numeral from 'numeral';
-import { makeStyles } from 'tss-react/mui';
-
 import { Badge, Tooltip } from '@mui/material';
 
-import { SeverityCode, getStatusColors } from '@centreon/ui';
+import { getStatusColors, type SeverityCode } from '@centreon/ui';
+
+import numeral from 'numeral';
+import { makeStyles } from 'tss-react/mui';
 
 export interface StyleProps {
   severityCode?: SeverityCode | null;
@@ -46,8 +46,8 @@ const StatusCounter = ({
 
   return (
     <Tooltip
-      followCursor
       disableHoverListener={shouldDisableTooltip}
+      followCursor
       title={count}
     >
       <Badge

package/src/TopCounterElements/TopCounterLayout.tsx

@@ -1,12 +1,11 @@
-import { useEffect, useState } from 'react';
-
-import { makeStyles } from 'tss-react/mui';
-
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { SvgIcon } from '@mui/material';
 import { Badge, ClickAwayListener } from '@mui/material';
 
+import { useEffect, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
 
 const useStyles = makeStyles()((theme) => ({
@@ -157,8 +156,8 @@ const TopCounterLayout = ({
             aria-label={title}
             className={classes.button}
             id={`${subMenuId}-button`}
-            type="button"
             onClick={(): void => setToggled(!toggled)}
+            type="button"
           >
             <span className={classes.iconWrapper}>
               <Badge

package/src/TopCounterElements/index.tsx

@@ -1,6 +1,6 @@
-export { default as TopCounterLayout } from './TopCounterLayout';
-export { default as TopCounterResourceCounters } from './ResourceCounters';
-export { default as TopCounterResourceSubMenu } from './ResourceSubMenu';
 export * from './formaters';
 export type { CounterProps } from './ResourceCounters';
+export { default as TopCounterResourceCounters } from './ResourceCounters';
 export type { SubMenuProps } from './ResourceSubMenu';
+export { default as TopCounterResourceSubMenu } from './ResourceSubMenu';
+export { default as TopCounterLayout } from './TopCounterLayout';

package/src/TopCounterElements/useCloseOnLegacyPage.tsx

@@ -1,13 +1,12 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-
 import { isNil } from 'ramda';
+import { type Dispatch, type SetStateAction, useEffect } from 'react';
 import { useLocation } from 'react-router';
 
 interface Props {
   setToggled: Dispatch<SetStateAction<boolean>>;
 }
 const useCloseOnLegacyPage = ({ setToggled }: Props): void => {
-  const { pathname, search } = useLocation();
+  const { pathname } = useLocation();
   const isLegacyRoute = pathname.includes('main.php');
 
   const closeSubMenu = (): void => {
@@ -36,7 +35,7 @@ const useCloseOnLegacyPage = ({ setToggled }: Props): void => {
         closeSubMenu
       );
     };
-  }, [pathname, search]);
+  }, [closeSubMenu, isLegacyRoute]);
 };
 
 export default useCloseOnLegacyPage;

package/src/Typography/EllipsisTypography.tsx

@@ -1,7 +1,7 @@
-import { type ForwardedRef, forwardRef } from 'react';
-
 import { Box, Typography, type TypographyProps } from '@mui/material';
 
+import { type ForwardedRef, forwardRef } from 'react';
+
 const EllipsisTypography = forwardRef(
   (
     {

package/src/Typography/FluidTypography/index.stories.tsx

@@ -1,8 +1,8 @@
-import { ComponentMeta } from '@storybook/react';
-
 import { Box } from '@mui/material';
 
-import FluidTypography, { FluidTypographyProps } from '.';
+import type { ComponentMeta } from '@storybook/react';
+
+import FluidTypography, { type FluidTypographyProps } from '.';
 
 interface Props extends FluidTypographyProps {
   height?: string | number;

package/src/Typography/FluidTypography/index.tsx

@@ -1,4 +1,4 @@
-import { Typography, TypographyProps } from '@mui/material';
+import { Typography, type TypographyProps } from '@mui/material';
 
 type CustomTypographyProps = Pick<TypographyProps, 'variant' | 'sx'>;
 export interface FluidTypographyProps extends CustomTypographyProps {

package/src/Typography/Subtitle.tsx

@@ -1,11 +1,10 @@
-import { ReactNode } from 'react';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { Typography } from '@mui/material';
 
 import { equals, type } from 'ramda';
+import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import { Typography } from '@mui/material';
-
 import { Tooltip } from '../components';
 
 interface Props {
@@ -30,15 +29,9 @@ const Subtitle = ({ children, secondaryLabel }: Props): JSX.Element => {
           }
           followCursor={false}
           label={
-            containsSeveralSecondaryLabels ? (
-              <>
-                {secondaryLabel.map((label) => (
-                  <p key={label}>{t(label)}</p>
-                ))}
-              </>
-            ) : (
-              t(secondaryLabel)
-            )
+            containsSeveralSecondaryLabels
+              ? secondaryLabel.map((label) => <p key={label}>{t(label)}</p>)
+              : t(secondaryLabel)
           }
           placement="right"
         >

package/src/Typography/Typography.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import TypographyStory from './story.utils';
 

package/src/Typography/story.utils.tsx

@@ -1,6 +1,3 @@
-import { toPairs } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
 import {
   Box,
   Card,
@@ -11,6 +8,9 @@ import {
   useTheme
 } from '@mui/material';
 
+import { toPairs } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
 const useStyles = makeStyles()((theme) => ({
   headerContainer: {
     alignItems: 'center',
@@ -56,8 +56,8 @@ const TypographyStory = (): JSX.Element => {
             spacing={10}
           >
             <Typography
-              gutterBottom
               display="block"
+              gutterBottom
               variant={typographyVariant}
             >
               {typographyVariant}

package/src/WallpaperPage/index.stories.tsx

@@ -1,7 +1,6 @@
-import { ComponentMeta } from '@storybook/react';
+import type { ComponentMeta } from '@storybook/react';
 
 import image from '../@assets/images/not-authorized-template-background-light.svg';
-
 import WallpaperPage from '.';
 
 export default {

package/src/WallpaperPage/index.tsx

@@ -1,10 +1,9 @@
-import { ReactElement } from 'react';
+import { Paper } from '@mui/material';
 
 import { isNil } from 'ramda';
+import type { ReactElement } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Paper } from '@mui/material';
-
 import Image from '../Image/Image';
 import LoadingSkeleton from '../LoadingSkeleton';