@centreon/ui 24.8.6 → 24.8.7

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@centreon/ui",
-  "version": "24.8.6",
+  "version": "24.8.7",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
-    "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
-    "eslint:fix": "pnpm eslint --fix",
+    "lint": "biome check ./src/ --error-on-warnings",
+    "lint:fix": "pnpm lint --fix",
+    "lint:ci": "biome ci ./src/ --error-on-warnings",
     "storybook": "storybook dev -p 9001 -c .storybook",
     "build:storybook": "storybook build -c .storybook -o .out",
     "test": "jest",

package/src/@types/globals.d.ts

@@ -1,9 +1,9 @@
+import { FunctionComponent, SVGProps } from 'react';
+
 declare module '*.scss';
 
 declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string }
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
   >;
 }

package/src/ActionsList/ActionsList.styles.ts

@@ -1,5 +1,5 @@
-import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '@mui/material';
 

package/src/ActionsList/index.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
+import CopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
-import CopyIcon from '@mui/icons-material/ContentCopy';
 
 import { ActionVariants } from './models';
 

package/src/ActionsList/index.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable react/no-array-index-key */
-import { useTranslation } from 'react-i18next';
 import { equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
 
 import {
-  MenuList,
-  MenuItem,
-  ListItemText,
-  ListItemIcon,
   Divider,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  MenuList,
   SvgIconTypeMap
 } from '@mui/material';
 import { OverridableComponent } from '@mui/material/OverridableComponent';
@@ -50,6 +49,7 @@ const ActionsList = ({
     <MenuList className={cx(classes.list, className)}>
       {actions?.map((action, idx) => {
         if (equals(action, ActionsListActionDivider.divider)) {
+          // biome-ignore lint/suspicious/noArrayIndexKey:
           return <Divider key={`divider_${idx}`} />;
         }
 

package/src/Button/Icon/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import AccessibilityIcon from '@mui/icons-material/Accessibility';

package/src/Button/Icon/index.tsx

@@ -1,8 +1,8 @@
 import { makeStyles } from 'tss-react/mui';
 
 import {
-  IconButton as MuiIconButton,
   IconButtonProps,
+  IconButton as MuiIconButton,
   Tooltip
 } from '@mui/material';
 

package/src/Button/Save/StartIcon.tsx

@@ -1,4 +1,4 @@
-import { always, cond, not, pipe, propEq, T } from 'ramda';
+import { T, always, cond, not, pipe, propEq } from 'ramda';
 
 import CheckIcon from '@mui/icons-material/Check';
 import SaveIcon from '@mui/icons-material/Save';

package/src/Checkbox/Checkbox.tsx

@@ -1,9 +1,9 @@
-import { makeStyles } from 'tss-react/mui';
 import { T, always, cond, equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
 import { SvgIconComponent } from '@mui/icons-material';
+import { Box, FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
 import Typography, { TypographyProps } from '@mui/material/Typography';
-import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 

package/src/Colors/index.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { Paper } from '@mui/material';

package/src/Colors/index.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from 'tss-react/mui';
 import { includes, toPairs } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
 
-import { Stack, Box, useTheme, Typography, Divider, Grid } from '@mui/material';
+import { Box, Divider, Grid, Stack, Typography, useTheme } from '@mui/material';
 
 import { ThemeMode } from '@centreon/ui-context';
 
@@ -90,7 +90,11 @@ const GroupedColorStatus = (): JSX.Element => {
             key={status}
             keyTheme={status}
           />
-          <Divider className={classes.divider} variant="middle" />
+          <Divider
+            className={classes.divider}
+            variant="middle"
+            key={`${status}-divider`}
+          />
         </>
       ))}
     </>

package/src/ContentWithCircularProgress/index.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography, Theme } from '@mui/material';
+import { Theme, Typography } from '@mui/material';
 
 import ContentWithCircularLoading from '.';
 

package/src/Dashboard/Dashboard.styles.ts

@@ -1,111 +1,111 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { alpha } from '@mui/material';
-
-export const useDashboardLayoutStyles = makeStyles<boolean>()(
-  (theme, isStatic: boolean) => ({
-    container: {
-      '& .react-grid-item': {
-        borderRadius: theme.shape.borderRadius,
-        transition: theme.transitions.create('all', {
-          delay: 0,
-          duration: 100,
-          easing: theme.transitions.easing.easeOut
-        })
-      },
-      '& .react-grid-item.react-draggable-dragging': {
-        boxShadow: theme.shadows[3]
-      },
-      '& .react-grid-item.react-grid-placeholder': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.2)
-      },
-      '& .react-grid-item.resizing': {
-        boxShadow: theme.shadows[3]
-      },
-      '& .react-resizable-handle': {
-        backgroundColor: theme.palette.action.focus,
-        backgroundImage: 'none',
-        borderRadius: theme.shape.borderRadius,
-        display: isStatic ? 'none' : 'block',
-        opacity: 0,
-        position: 'absolute'
-      },
-      '& .react-resizable-handle.react-resizable-handle-e': {
-        cursor: 'ew-resize',
-        height: `calc(100% - ${theme.spacing(3)})`,
-        marginTop: 0,
-        right: 0,
-        top: 0,
-        transform: 'rotate(0deg)',
-        width: theme.spacing(1)
-      },
-      '& .react-resizable-handle.react-resizable-handle-s': {
-        bottom: 0,
-        cursor: 'ns-resize',
-        height: theme.spacing(1),
-        left: 0,
-        marginLeft: 0,
-        transform: 'rotate(0deg)',
-        width: `calc(100% - ${theme.spacing(3)})`
-      },
-      '& .react-resizable-handle.react-resizable-handle-se': {
-        bottom: 0,
-        cursor: 'nwse-resize',
-        height: theme.spacing(2),
-        right: 0,
-        transform: 'rotate(0deg)',
-        width: theme.spacing(2)
-      },
-      '& .react-resizable-handle::after': {
-        content: 'none'
-      },
-      '& .react-resizable-handle:hover': {
-        opacity: 1
-      },
-      position: 'relative'
-    }
-  })
-);
-
-export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
-  (theme, { hasHeader }) => ({
-    widgetContainer: {
-      '&[data-padding="false"]': {
-        padding: 0
-      },
-      background: theme.palette.background.widget,
-      border: 'none',
-      borderRadius: theme.spacing(1),
-      height: '100%',
-      width: '100%'
-    },
-    widgetContent: {
-      height: hasHeader
-        ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`
-        : `calc(100% - ${theme.spacing(3.5)})`
-    },
-    widgetHeader: {
-      '&:hover': {
-        backgroundColor: theme.palette.action.hover
-      },
-      '&[data-canMove="false"]': {
-        cursor: 'default'
-      },
-      '&[data-canMove="true"]': {
-        cursor: 'move'
-      },
-      padding: theme.spacing(0, 1.5),
-      position: 'relative'
-    },
-    widgetHeaderDraggable: {
-      height: '100%',
-      position: 'absolute',
-      width: '95%'
-    },
-    widgetPadding: {
-      overflowX: 'auto',
-      padding: theme.spacing(0.5, 1.5, 1.5),
-      position: 'relative'
-    }
-  })
-);
+import { makeStyles } from 'tss-react/mui';
+
+import { alpha } from '@mui/material';
+
+export const useDashboardLayoutStyles = makeStyles<boolean>()(
+  (theme, isStatic: boolean) => ({
+    container: {
+      '& .react-grid-item': {
+        borderRadius: theme.shape.borderRadius,
+        transition: theme.transitions.create('all', {
+          delay: 0,
+          duration: 100,
+          easing: theme.transitions.easing.easeOut
+        })
+      },
+      '& .react-grid-item.react-draggable-dragging': {
+        boxShadow: theme.shadows[3]
+      },
+      '& .react-grid-item.react-grid-placeholder': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.2)
+      },
+      '& .react-grid-item.resizing': {
+        boxShadow: theme.shadows[3]
+      },
+      '& .react-resizable-handle': {
+        backgroundColor: theme.palette.action.focus,
+        backgroundImage: 'none',
+        borderRadius: theme.shape.borderRadius,
+        display: isStatic ? 'none' : 'block',
+        opacity: 0,
+        position: 'absolute'
+      },
+      '& .react-resizable-handle.react-resizable-handle-e': {
+        cursor: 'ew-resize',
+        height: `calc(100% - ${theme.spacing(3)})`,
+        marginTop: 0,
+        right: 0,
+        top: 0,
+        transform: 'rotate(0deg)',
+        width: theme.spacing(1)
+      },
+      '& .react-resizable-handle.react-resizable-handle-s': {
+        bottom: 0,
+        cursor: 'ns-resize',
+        height: theme.spacing(1),
+        left: 0,
+        marginLeft: 0,
+        transform: 'rotate(0deg)',
+        width: `calc(100% - ${theme.spacing(3)})`
+      },
+      '& .react-resizable-handle.react-resizable-handle-se': {
+        bottom: 0,
+        cursor: 'nwse-resize',
+        height: theme.spacing(2),
+        right: 0,
+        transform: 'rotate(0deg)',
+        width: theme.spacing(2)
+      },
+      '& .react-resizable-handle::after': {
+        content: 'none'
+      },
+      '& .react-resizable-handle:hover': {
+        opacity: 1
+      },
+      position: 'relative'
+    }
+  })
+);
+
+export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
+  (theme, { hasHeader }) => ({
+    widgetContainer: {
+      '&[data-padding="false"]': {
+        padding: 0
+      },
+      background: theme.palette.background.widget,
+      border: 'none',
+      borderRadius: theme.spacing(1),
+      height: '100%',
+      width: '100%'
+    },
+    widgetContent: {
+      height: hasHeader
+        ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`
+        : `calc(100% - ${theme.spacing(3.5)})`
+    },
+    widgetHeader: {
+      '&:hover': {
+        backgroundColor: theme.palette.action.hover
+      },
+      '&[data-canMove="false"]': {
+        cursor: 'default'
+      },
+      '&[data-canMove="true"]': {
+        cursor: 'move'
+      },
+      padding: theme.spacing(0, 1.5),
+      position: 'relative'
+    },
+    widgetHeaderDraggable: {
+      height: '100%',
+      position: 'absolute',
+      width: '95%'
+    },
+    widgetPadding: {
+      overflowX: 'auto',
+      padding: theme.spacing(0.5, 1.5, 1.5),
+      position: 'relative'
+    }
+  })
+);

package/src/Dashboard/Grid.tsx

@@ -1,7 +1,7 @@
-import { useMemo, ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 
-import { Grid as VisxGrid } from '@visx/visx';
 import { scaleLinear } from '@visx/scale';
+import { Grid as VisxGrid } from '@visx/visx';
 
 import { useTheme } from '@mui/material';
 

package/src/Dashboard/Item.tsx

@@ -1,20 +1,20 @@
 import {
   CSSProperties,
   ForwardedRef,
-  forwardRef,
   MouseEvent,
   ReactElement,
+  forwardRef,
   useEffect,
   useMemo
 } from 'react';
 
-import { equals, isNil, prop } from 'ramda';
 import { useAtomValue } from 'jotai';
+import { equals, isNil, prop } from 'ramda';
 
 import { Card, useTheme } from '@mui/material';
 
-import { useMemoComponent, useViewportIntersection } from '../utils';
 import LoadingSkeleton from '../LoadingSkeleton';
+import { useMemoComponent, useViewportIntersection } from '../utils';
 
 import { useDashboardItemStyles } from './Dashboard.styles';
 import { isResizingItemAtom } from './atoms';

package/src/Dashboard/Layout.tsx

@@ -5,15 +5,15 @@ import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 
 import {
-  Responsive as ResponsiveHeight,
   ParentSize,
+  Responsive as ResponsiveHeight,
   useMemoComponent
 } from '..';
 
 import { useDashboardLayoutStyles } from './Dashboard.styles';
-import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
 import Grid from './Grid';
 import { isResizingItemAtom } from './atoms';
+import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
 
 const ReactGridLayout = WidthProvider(GridLayout);
 
@@ -44,7 +44,7 @@ const DashboardLayout = <T extends Layout>({
     setColumns(getColumnsFromScreenSize());
   };
 
-  const startResize = useCallback((_, __, newItem: T) => {
+  const startResize = useCallback((_, _e, newItem: T) => {
     setIsResizingItem(newItem.i);
   }, []);
 

package/src/Dashboard/index.tsx

@@ -1,9 +1,9 @@
-import Layout from './Layout';
-import Item from './Item';
-
-export * from './utils';
-
-export const DashboardLayout = {
-  Item,
-  Layout
-};
+import Item from './Item';
+import Layout from './Layout';
+
+export * from './utils';
+
+export const DashboardLayout = {
+  Item,
+  Layout
+};

package/src/Dialog/Duplicate/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '../../../test/testRenderer';
+import { fireEvent, render } from '../../../test/testRenderer';
 
 import DialogDuplicate from '.';
 

package/src/Dialog/Duplicate/index.tsx

@@ -22,7 +22,7 @@ const Duplicate = ({
   labelInput = 'Count',
   labelConfirm = 'Duplicate',
   labelTitle = 'Duplicate',
-  limit = Infinity,
+  limit = Number.POSITIVE_INFINITY,
   onConfirm,
   ...rest
 }: Props): JSX.Element => {
@@ -37,7 +37,10 @@ const Duplicate = ({
     onConfirm(event, value);
   };
 
-  const isConfirmDisabled = or(isEmpty(value), parseInt(value, 10) > limit);
+  const isConfirmDisabled = or(
+    isEmpty(value),
+    Number.parseInt(value, 10) > limit
+  );
 
   return (
     <Dialog

package/src/Dialog/UnsavedChanges/index.tsx

@@ -8,10 +8,10 @@ import {
   labelDoYouWantToQuitWithoutResolving,
   labelDoYouWantToResolveErrors,
   labelDoYouWantToSaveChanges,
+  labelIfYouClickOnDiscard,
   labelResolve,
   labelSave,
-  labelThereAreErrorsInTheForm,
-  labelIfYouClickOnDiscard
+  labelThereAreErrorsInTheForm
 } from './translatedLabels';
 
 interface Props {

package/src/Dialog/index.stories.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography, Theme } from '@mui/material';
+import { Theme, Typography } from '@mui/material';
 
 import Dialog from '.';
 

package/src/Dialog/index.tsx

@@ -4,13 +4,13 @@ import { makeStyles } from 'tss-react/mui';
 
 import {
   Button,
-  Dialog as MuiDialog,
-  DialogTitle,
-  DialogContent,
+  ButtonProps,
+  CircularProgress,
   DialogActions,
+  DialogContent,
   DialogProps,
-  CircularProgress,
-  ButtonProps
+  DialogTitle,
+  Dialog as MuiDialog
 } from '@mui/material';
 
 import { DataTestAttributes } from '../@types/data-attributes';

package/src/FallbackPage/FallbackPage.tsx

@@ -5,13 +5,13 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Typography } from '@mui/material';
 
-import LoadingSkeleton from '../LoadingSkeleton';
-import { CentreonLogo } from '../Logo/CentreonLogo';
+import { Image } from '..';
 import NotAuthorizedTemplateBackgroundDark from '../@assets/images/not-authorized-template-background-dark.svg';
 import NotAuthorizedTemplateBackgroundLight from '../@assets/images/not-authorized-template-background-light.svg';
-import { Image } from '..';
-import { useThemeMode } from '../utils/useThemeMode';
+import LoadingSkeleton from '../LoadingSkeleton';
+import { CentreonLogo } from '../Logo/CentreonLogo';
 import { typedMemo } from '../utils/typedMemo';
+import { useThemeMode } from '../utils/useThemeMode';
 
 const useStyles = makeStyles()((theme) => ({
   logo: {

package/src/FileDropZone/index.stories.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
-import { Button, Paper, Typography, Theme } from '@mui/material';
 import PersonIcon from '@mui/icons-material/Person';
+import { Button, Paper, Theme, Typography } from '@mui/material';
 
 import FileDropZone, {
   CustomDropZoneContentProps,

package/src/FileDropZone/index.tsx

@@ -1,19 +1,19 @@
-import { useTranslation } from 'react-i18next';
+import { useAtomValue } from 'jotai';
 import {
+  T,
   cond,
   equals,
   flatten,
   identity,
   includes,
   isNil,
-  split,
-  T
+  split
 } from 'ramda';
-import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import PostAddIcon from '@mui/icons-material/PostAdd';
-import { alpha, Box, FormHelperText, Typography } from '@mui/material';
+import { Box, FormHelperText, Typography, alpha } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 

package/src/FileDropZone/useDropzone.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook, RenderHookResult } from '@testing-library/react';
+import { RenderHookResult, act, renderHook } from '@testing-library/react';
 
 import { labelFileTooBig, labelInvalidFileType } from './translatedLabels';
 import useDropzone, { UseDropzoneProps, UseDropzoneState } from './useDropzone';

package/src/FileDropZone/useDropzone.ts

@@ -7,7 +7,7 @@ import {
   useState
 } from 'react';
 
-import { all, isNil, lte, not, path, pluck } from 'ramda';
+import { path, all, isNil, lte, not, pluck } from 'ramda';
 
 import { labelFileTooBig, labelInvalidFileType } from './translatedLabels';
 

package/src/Form/CollapsibleGroup.tsx

@@ -3,16 +3,16 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import {
+  Box,
   Collapse,
-  Tooltip,
-  IconButton as MuiIconButton,
-  Typography,
   ListItemButton,
-  Box
+  IconButton as MuiIconButton,
+  Tooltip,
+  Typography
 } from '@mui/material';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ExpandMore from '@mui/icons-material/ExpandMore';
 
 import { Group } from './Inputs/models';
 

package/src/Form/Form.cypress.spec.tsx

@@ -1,6 +1,6 @@
-import { object } from 'yup';
 import { faker } from '@faker-js/faker';
 import { useFormikContext } from 'formik';
+import { object } from 'yup';
 
 import { Typography } from '@mui/material';