@centreon/ui 25.5.8 → 25.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.5.8",
+  "version": "25.6.1",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -44,7 +44,8 @@
     ".": "./src/index.ts",
     "./components": "./src/components/index.ts",
     "./fonts/*": "./src/fonts/*",
-    "./test/testRenderer": "./test/testRenderer.tsx"
+    "./test/testRenderer": "./test/testRenderer.tsx",
+    "./tailwindcss": "./src/ThemeProvider/tailwindcss.css"
   },
   "files": [
     "package.json",
@@ -57,6 +58,8 @@
     "@cypress/webpack-dev-server": "^4.0.1",
     "@faker-js/faker": "^9.5.1",
     "@mdx-js/react": "^3.1.0",
+    "@rsbuild/core": "^1.3.21",
+    "@rsbuild/plugin-react": "^1.3.1",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@storybook/addon-a11y": "^8.6.3",
     "@storybook/addon-docs": "^8.6.3",
@@ -72,6 +75,9 @@
     "@storybook/test": "^8.6.3",
     "@storybook/test-runner": "^0.22.0",
     "@storybook/theming": "^8.6.3",
+    "@tailwindcss/cli": "^4.1.7",
+    "@tailwindcss/postcss": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.7",
     "@testing-library/cypress": "^10.0.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -95,19 +101,22 @@
     "react-test-renderer": "^19.0.0",
     "remark-gfm": "^4.0.1",
     "speed-measure-vite-plugin": "^1.1.0",
-    "storybook": "^8.6.3",
+    "storybook": "^8.6.14",
     "storybook-addon-mock": "^5.0.0",
     "storybook-dark-mode": "^4.0.2",
+    "storybook-react-rsbuild": "^1.0.1",
     "style-dictionary": "^4.3.3",
+    "tailwind": "^4.0.0",
+    "tailwindcss": "^4.1.7",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
-    "vite": "^6.2.0",
+    "vite": "^6.3.5",
     "vite-plugin-istanbul": "^7.0.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-plugin-turbosnap": "^1.0.3"
   },
   "peerDependencies": {
-    "@centreon/ui-context": "link:../ui-context"
+    "@centreon/ui-context": "workspace:*"
   },
   "dependencies": {
     "@lexical/html": "^0.27.0",
@@ -117,7 +126,7 @@
     "@lexical/rich-text": "^0.27.0",
     "@lexical/selection": "^0.27.0",
     "@lexical/utils": "^0.27.0",
-    "@mui/material": "^6.4.6",
+    "@mui/material": "^7.1.0",
     "@react-spring/web": "^9.7.5",
     "@visx/clip-path": "^3.12.0",
     "@visx/curve": "^3.12.0",

package/src/Dashboard/Dashboard.styles.ts

@@ -17,7 +17,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         boxShadow: theme.shadows[3]
       },
       '& .react-grid-item.react-grid-placeholder': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.4)
+        background: `${alpha(theme.palette.primary.main, 0.4)} !important`
       },
       '& .react-grid-item.resizing': {
         boxShadow: theme.shadows[3]

package/src/Dashboard/Layout.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
-import 'react-grid-layout/css/styles.css';
 
 import { ParentSize, useMemoComponent } from '..';
 
@@ -10,6 +9,7 @@ import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import { isResizingItemAtom } from './atoms';
 import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
+import 'react-grid-layout/css/styles.css';
 
 const ReactGridLayout = WidthProvider(GridLayout);
 

package/src/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -250,8 +250,6 @@ describe('Bar chart', () => {
     cy.contains('0.11 ms').should('be.visible');
 
     cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
-
-    cy.makeSnapshot();
   });
 
   it('displays a tooltip with a single metric when a stacked bar is hovered and a prop is set', () => {

package/src/Listing/ActionBar/Pagination.tsx

@@ -1,32 +1,19 @@
 import { memo } from 'react';
 
 import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import TablePagination from '@mui/material/TablePagination';
 
-const useStyles = makeStyles()((theme) => ({
-  toolbar: {
-    height: theme.spacing(4),
-    overflow: 'hidden',
-    paddingLeft: 5
-  }
-}));
-
-const Pagination = (props): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <TablePagination
-      classes={{
-        toolbar: classes.toolbar
-      }}
-      component="div"
-      data-testid="Listing Pagination"
-      {...props}
-    />
-  );
-};
+const Pagination = (props): JSX.Element => (
+  <TablePagination
+    classes={{
+      toolbar: 'pl-1 overflow-hidden h-8'
+    }}
+    component="div"
+    data-testid="Listing Pagination"
+    {...props}
+  />
+);
 
 const MemoizedPagination = memo(
   Pagination,

package/src/Listing/ActionBar/PaginationActions.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
 import FirstPageIcon from '@mui/icons-material/FirstPage';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
@@ -15,20 +14,12 @@ import {
   labelPreviousPage
 } from '../translatedLabels';
 
-const useStyles = makeStyles()((theme) => ({
-  root: {
-    color: theme.palette.text.secondary,
-    flexShrink: 0
-  }
-}));
-
 const PaginationActions = ({
   onPageChange,
   page,
   rowsPerPage,
   count
 }: TablePaginationActionsProps): JSX.Element => {
-  const { classes } = useStyles();
   const { t } = useTranslation();
 
   const changeToFirstPage = (event): void => {
@@ -53,7 +44,7 @@ const PaginationActions = ({
   };
 
   return (
-    <div className={classes.root}>
+    <div className="shrink-0 text-text-secondary">
       <IconButton
         aria-label={t(labelFirstPage) || ''}
         disabled={isFirstPage}

package/src/Listing/Cell/DataCell.tsx

@@ -14,7 +14,6 @@ import {
 } from '../models';
 import useStyleTable from '../useStyleTable';
 
-import { useStyles } from './DataCell.styles';
 import EllipsisTypography from './EllipsisTypography';
 
 import Cell from '.';
@@ -46,7 +45,6 @@ const DataCell = ({
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
-  const { classes, cx } = useStyles();
   const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
@@ -78,12 +76,13 @@ const DataCell = ({
           disableRowCondition={disableRowCondition(row)}
           formattedString={formattedString}
           isRowHovered={isRowHovered}
+          isRowHighlighted={isRowHighlighted}
         />
       );
 
       return (
         <Cell
-          className={classes.cell}
+          className="flex items-center h-full overflow-hidden whitespace-nowrap"
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
@@ -110,7 +109,7 @@ const DataCell = ({
       if (isCellHidden) {
         return (
           <Cell
-            className={classes.cell}
+            className="flex items-center h-full overflow-hidden whitespace-nowrap"
             isRowHighlighted={isRowHighlighted}
             listingVariant={listingVariant}
             onClick={(e): void => {
@@ -127,7 +126,7 @@ const DataCell = ({
 
       return (
         <Cell
-          className={cx(classes.cell, clickable && classes.clickable)}
+          className={`flex align-items h-full overflow-hidden whitespace-nowrap ${clickable && 'cursor-default'}`}
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           style={{
@@ -156,6 +155,7 @@ const DataCell = ({
                   disableRowCondition={disableRowCondition(row)}
                   formattedString={formattedString}
                   isRowHovered={isRowHovered}
+                  isRowHighlighted={isRowHighlighted}
                 />
               );
             }}
@@ -280,4 +280,4 @@ const MemoizedDataCell = memo<Props>(
 );
 
 export default MemoizedDataCell;
-export { useStyles, type Props };
+export type { Props };

package/src/Listing/Cell/EllipsisTypography.tsx

@@ -1,50 +1,28 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Typography } from '@mui/material';
 
 import { TableStyleAtom as TableStyle } from '../models';
 
-interface StylesProps {
-  body: TableStyle['body'];
-}
-
-const useStyles = makeStyles<StylesProps>()((theme, { body }) => ({
-  rowNotHovered: {
-    color: theme.palette.text.secondary
-  },
-  text: {
-    fontSize: body.fontSize,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
 interface Ellipsis {
   className?: string;
   dataStyle: TableStyle;
   disableRowCondition: boolean;
   formattedString: string;
   isRowHovered: boolean;
+  isRowHighlighted?: boolean;
 }
 const EllipsisTypography = ({
   formattedString,
   isRowHovered,
   disableRowCondition,
   className,
-  dataStyle
-}: Ellipsis): JSX.Element => {
-  const { cx, classes } = useStyles({ body: dataStyle.body });
-
-  return (
-    <Typography
-      className={cx(className, classes.text, {
-        [classes.rowNotHovered]: !isRowHovered || disableRowCondition
-      })}
-    >
-      {formattedString}
-    </Typography>
-  );
-};
+  dataStyle,
+  isRowHighlighted
+}: Ellipsis): JSX.Element => (
+  <Typography
+    className={`${className} text-[${dataStyle.body.fontSize}] truncate ${!isRowHighlighted && (!isRowHovered || disableRowCondition) && 'text-text-secondary'}`}
+  >
+    {formattedString}
+  </Typography>
+);
 
 export default EllipsisTypography;

package/src/Listing/Cell/index.tsx

@@ -1,7 +1,6 @@
 import { useAtom } from 'jotai';
-import { append, equals, includes, isNil, omit, reject } from 'ramda';
+import { append, equals, includes, isNil, reject } from 'ramda';
 import { CSSObject } from 'tss-react';
-import { makeStyles } from 'tss-react/mui';
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
@@ -9,7 +8,8 @@ import {
   TableCellBaseProps,
   TableCellProps,
   Theme,
-  alpha
+  alpha,
+  useTheme
 } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
@@ -25,11 +25,6 @@ interface GetBackgroundColorProps extends Omit<Props, 'isRowHighlighted'> {
   theme: Theme;
 }
 
-interface StylesProps extends Props {
-  isRowHighlighted?: boolean;
-  listingVariant?: ListingVariant;
-}
-
 interface GetRowHighlightStyleProps {
   isRowHighlighted?: boolean;
   theme: Theme;
@@ -78,54 +73,6 @@ const getRowTextColor = ({
   }
 };
 
-const useStyles = makeStyles<StylesProps>()(
-  (
-    theme,
-    {
-      isRowHovered,
-      row,
-      rowColorConditions,
-      disableRowCondition,
-      isRowHighlighted,
-      listingVariant
-    }
-  ) => ({
-    caret: {
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.short
-      })
-    },
-    caretLess: {
-      transform: 'rotate3d(0,0,1,0deg)'
-    },
-    caretMore: {
-      transform: 'rotate3d(0,0,1,180deg)'
-    },
-    root: {
-      alignItems: 'center',
-      backgroundColor: getBackgroundColor({
-        disableRowCondition,
-        isRowHovered,
-        row,
-        rowColorConditions,
-        theme
-      }),
-      borderBottom: `1px solid ${theme.palette.divider}`,
-      display: 'flex',
-      'div:nth-of-type(n)': {
-        alignItems: 'center',
-        display: 'flex'
-      },
-      height: '100%',
-      overflow: 'hidden',
-      ...getTextStyleByViewMode({ listingVariant, theme }),
-      p: getRowTextColor({ isRowHighlighted, disableRowCondition, row, theme }),
-      padding: theme.spacing(0, 1),
-      whiteSpace: 'nowrap'
-    }
-  })
-);
-
 interface Props
   extends Pick<
       DataCellProps,
@@ -160,15 +107,22 @@ const Cell = ({
   subItemsRowProperty,
   labelCollapse,
   labelExpand,
+  disableRowCondition,
+  isRowHovered,
+  isRowHighlighted,
+  rowColorConditions,
+  listingVariant,
+  row,
+  style,
   ...props
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles(props);
+  const theme = useTheme();
 
   const [subItemsPivots, setSubItemsPivots] = useAtom(subItemsPivotsAtom);
 
   const { children } = props;
 
-  const rowId = props.row?.id;
+  const rowId = row?.id;
 
   const click = (e): void => {
     e.preventDefault();
@@ -181,39 +135,46 @@ const Cell = ({
 
   const isSubItemsExpanded = isPivotExistInTheList(rowId)(subItemsPivots);
 
-  const hasSubItems = subItemsRowProperty && props.row[subItemsRowProperty];
+  const hasSubItems = subItemsRowProperty && row[subItemsRowProperty];
 
   return (
     <TableCell
+      style={{
+        backgroundColor: getBackgroundColor({
+          disableRowCondition,
+          isRowHovered,
+          row,
+          rowColorConditions,
+          theme
+        }),
+        ...getTextStyleByViewMode({
+          listingVariant,
+          theme
+        }),
+        ...getRowTextColor({
+          isRowHighlighted,
+          disableRowCondition,
+          row,
+          theme
+        }),
+        ...style
+      }}
       classes={{
-        root: cx(classes.root)
+        root: 'flex items-center h-full overflow-hidden border-b-1 border-divider px-2 whitespace-nowrap py-0'
       }}
       component={'div' as unknown as ElementType<TableCellBaseProps>}
-      {...omit(
-        [
-          'isRowHovered',
-          'row',
-          'rowColorConditions',
-          'disableRowCondition',
-          'isRowHighlighted',
-          'listingVariant'
-        ],
-        props
-      )}
+      {...props}
     >
       {displaySubItemsCaret && hasSubItems && (
         <IconButton
           ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
-            props.row.id
+            row.id
           }`}
           size="small"
           onClick={click}
         >
           <ExpandMoreIcon
-            className={cx(
-              classes.caret,
-              isSubItemsExpanded ? classes.caretMore : classes.caretLess
-            )}
+            className={`transition-transform ${isSubItemsExpanded ? 'rotate-z-180' : 'rotate-z-0'} transform-gpu`}
             fontSize="small"
           />
         </IconButton>

package/src/Listing/Checkbox.tsx

@@ -1,30 +1,18 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { CheckboxProps, Checkbox as MuiCheckbox } from '@mui/material';
 
-const useStyles = makeStyles()({
-  container: {
-    padding: 0
-  }
-});
-
 const Checkbox = ({
   className,
   ...props
 }: { className?: string } & Omit<
   CheckboxProps,
   'size' | 'color'
->): JSX.Element => {
-  const { classes, cx } = useStyles();
-
-  return (
-    <MuiCheckbox
-      className={cx(classes.container, className)}
-      color="primary"
-      size="small"
-      {...props}
-    />
-  );
-};
+>): JSX.Element => (
+  <MuiCheckbox
+    className={`p-0 ${className}`}
+    color="primary"
+    size="small"
+    {...props}
+  />
+);
 
 export default Checkbox;

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -12,7 +12,8 @@ import { Column } from '../../models';
 import { DraggableIconButton } from '../_internals/DraggableIconButton';
 import HeaderLabel from '../_internals/Label';
 
-import { StylesProps, useStyles } from './ListingHeaderCell.styles';
+import useStyleTable from '../../useStyleTable';
+import { StylesProps } from './ListingHeaderCell.styles';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -39,11 +40,7 @@ const ListingHeaderCell = ({
   listingVariant,
   ...props
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({
-    isDragging,
-    isInDragOverlay,
-    listingVariant
-  });
+  const { dataStyle } = useStyleTable({ listingVariant });
   const columnLabel = column.shortLabel || column.label;
 
   const columnSortField = column.sortField || column.id;
@@ -72,32 +69,38 @@ const ListingHeaderCell = ({
 
   return (
     <TableCell
-      className={classes.tableCell}
+      className={`bg-background-listing-header border-b-0 h-[inherit] py-0 px-2 ${isInDragOverlay && 'block opacity-70'}`}
       component={'div' as unknown as React.ElementType<TableCellBaseProps>}
-      data-isdragging={isDragging}
-      data-isindragoverlay={isInDragOverlay}
       ref={itemRef}
-      style={style}
+      style={{
+        ...style,
+        height: dataStyle.header.height
+      }}
     >
-      <div className={classes.content}>
+      <div className="flex items-center h-full justify-between text-white p-0">
         {column.sortable ? (
           <TableSortLabel
             active={sortField === columnSortField}
             aria-label={`Column ${column.label}`}
-            className={classes.active}
+            className="text-white"
+            classes={{
+              icon: 'text-white'
+            }}
             direction={sortOrder || 'desc'}
             onClick={sort}
           >
             {headerContent}
           </TableSortLabel>
         ) : (
-          <div className={classes.simpleHeaderCellContent}>{headerContent}</div>
+          <div className="mr-4 inline-flex items-center select-none">
+            {headerContent}
+          </div>
         )}
 
         {columnConfiguration?.sortable && areColumnsEditable && (
           <DraggableIconButton
             {...props}
-            className={cx(classes.dragHandle, 'dragHandle')}
+            className={`p-0 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'} text-white  opacity-0 hover:opacity-100 focus:opacity-100`}
             columnLabel={columnLabel}
           />
         )}

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -9,8 +9,6 @@ import { PredefinedRowSelection } from '../../models';
 import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
 import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
 
-import { useStyles } from './SelectActionListingHeaderCell.styles';
-
 export interface SelectActionListingHeaderCellProps {
   onSelectAllClick: (event) => void;
   onSelectRowsWithCondition: (condition) => void;
@@ -26,27 +24,25 @@ const SelectActionListingHeaderCell = ({
   predefinedRowsSelection,
   onSelectRowsWithCondition
 }: SelectActionListingHeaderCellProps): JSX.Element => {
-  const { classes } = useStyles();
-
   const hasRows = not(equals(rowCount, 0));
 
   return (
     <TableCell
-      className={classes.checkboxHeaderCell}
+      className="bg-background-listing-header h-full pt-0 pr-1 pb-0 pl-3 flex flex-row items-center leading=[inherit] justify-start border-b-0"
       component={'div' as unknown as React.ElementType<TableCellBaseProps>}
     >
       <Checkbox
         checked={hasRows && selectedRowCount === rowCount}
-        className={classes.checkbox}
+        className="text-white"
         indeterminate={
           hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
         }
-        inputProps={{ 'aria-label': 'Select all' }}
+        slotProps={{ input: { 'aria-label': 'Select all' } }}
         onChange={onSelectAllClick}
       />
       {not(isEmpty(predefinedRowsSelection)) ? (
         <PopoverMenu
-          className={classes.predefinedRowsMenu}
+          className="text-white"
           icon={<ArrowDropDownIcon />}
           title={labelPredefinedRowsSelectionMenu}
         >
@@ -59,7 +55,7 @@ const SelectActionListingHeaderCell = ({
           )}
         </PopoverMenu>
       ) : (
-        <div className={classes.predefinedRowsMenu} />
+        <div className="text-white" />
       )}
     </TableCell>
   );

package/src/Listing/Header/ListingHeader.tsx

@@ -16,7 +16,6 @@ import {
   SelectActionListingHeaderCell,
   SelectActionListingHeaderCellProps
 } from './Cell/SelectActionListingHeaderCell';
-import { useStyles } from './ListingHeader.styles';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -62,8 +61,6 @@ const ListingHeader = ({
   predefinedRowsSelection,
   onSelectRowsWithCondition
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-
   const visibleColumns = getVisibleColumns({
     columnConfiguration,
     columns
@@ -105,8 +102,8 @@ const ListingHeader = ({
   );
 
   return (
-    <TableHead className={cx(classes.row, 'listingHeader')} component="div">
-      <TableRow className={classes.row} component="div">
+    <TableHead className="contents" component="div">
+      <TableRow className="contents" component="div">
         {checkable && (
           <SelectActionListingHeaderCell
             predefinedRowsSelection={predefinedRowsSelection}