@centreon/ui 25.5.8 → 25.6.1

package/src/Listing/Header/_internals/Label.tsx

@@ -1,14 +1,6 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Typography, TypographyProps } from '@mui/material';
 import { ReactNode } from 'react';
 
-const useStyles = makeStyles()(() => ({
-  root: {
-    fontWeight: 'bold'
-  }
-}));
-
 interface Props {
   children: ReactNode;
 }
@@ -17,16 +9,8 @@ const HeaderLabel = ({
   children,
   className
 }: Props & Pick<TypographyProps, 'className'>): JSX.Element => {
-  const { classes } = useStyles();
-
   return (
-    <Typography
-      className={className}
-      classes={{
-        root: classes.root
-      }}
-      variant="body2"
-    >
+    <Typography className={`font-bold ${className}`} variant="body2">
       {children}
     </Typography>
   );

package/src/Listing/Row/EmptyRow.tsx

@@ -4,20 +4,16 @@ import { TableRow } from '@mui/material';
 
 import Cell from '../Cell';
 
-import { useStyles } from './EmptyRow.styles';
-
 interface EmptyRowProps {
   children: ReactNode;
 }
 
 const EmptyRow = ({ children }: EmptyRowProps): JSX.Element => {
-  const { classes } = useStyles();
-
   return (
-    <TableRow className={classes.emptyDataRow} component="div" tabIndex={-1}>
+    <TableRow className="contents" component="div" tabIndex={-1}>
       <Cell
         align="center"
-        className={classes.emptyDataCell}
+        className="col-span-full flex justify-center"
         disableRowCondition={(): boolean => false}
         isRowHovered={false}
       >

package/src/Listing/Row/Row.tsx

@@ -3,7 +3,6 @@
 import { memo, useEffect, useRef } from 'react';
 
 import { equals, gte, lt, not, pluck } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import { TableRow, TableRowProps, useTheme } from '@mui/material';
 
@@ -14,27 +13,6 @@ import { useViewportIntersection } from '../../utils/useViewportIntersection';
 import { performanceRowsLimit } from '../index';
 import { Column, ColumnConfiguration, RowColorCondition } from '../models';
 
-const useStyles = makeStyles()((theme) => {
-  return {
-    intersectionRow: {
-      display: 'contents',
-      width: '100%'
-    },
-    row: {
-      cursor: 'pointer',
-      display: 'contents',
-      width: '100%'
-    },
-    skeleton: {
-      height: theme.spacing(2.5),
-      width: '100%'
-    },
-    skeletonContainer: {
-      padding: theme.spacing(0.5)
-    }
-  };
-});
-
 type Props = {
   checkable: boolean;
   children;
@@ -70,22 +48,20 @@ const Row = memo<RowProps>(
     checkable,
     limit
   }: RowProps): JSX.Element => {
-    const { classes } = useStyles();
-
     if (not(isInViewport) && gte(limit, performanceRowsLimit)) {
       return (
-        <div style={{ display: 'contents' }}>
+        <div className="contents">
           {checkable && (
-            <div className={classes.skeletonContainer}>
+            <div className="p-1">
               <div>
-                <LoadingSkeleton className={classes.skeleton} />
+                <LoadingSkeleton className="w-full" />
               </div>
             </div>
           )}
           {visibleColumns.map(({ id }) => (
-            <div className={classes.skeletonContainer} key={`loading_${id}`}>
+            <div className="p-1" key={`loading_${id}`}>
               <div>
-                <LoadingSkeleton className={classes.skeleton} />
+                <LoadingSkeleton className="w-full" />
               </div>
             </div>
           ))}
@@ -95,7 +71,7 @@ const Row = memo<RowProps>(
 
     return (
       <TableRow
-        className={classes.row}
+        className="cursor-pointer contents w-full"
         component="div"
         tabIndex={tabIndex}
         onClick={onClick}
@@ -203,7 +179,6 @@ const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
     root: rowRef.current?.parentElement?.parentElement?.parentElement,
     rootMargin: `${theme.spacing(20)} 0px ${theme.spacing(20)} 0px`
   });
-  const { classes } = useStyles();
 
   const getFirstCellElement = (): ChildNode | null | undefined =>
     rowRef.current?.firstChild?.firstChild?.firstChild;
@@ -213,11 +188,7 @@ const IntersectionRow = ({ isHovered, ...rest }: Props): JSX.Element => {
   }, [getFirstCellElement()]);
 
   return (
-    <div
-      className={classes.intersectionRow}
-      data-is-hovered={isHovered}
-      ref={rowRef}
-    >
+    <div className="contents w-full" data-is-hovered={isHovered} ref={rowRef}>
       <Row {...rest} isHovered={isHovered} isInViewport={isInViewport} />
     </div>
   );

package/src/Listing/index.stories.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
+import '../ThemeProvider/tailwindcss.css';
 import { useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';

package/src/Listing/index.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-array-index-key */
-
 import { useAtomValue } from 'jotai';
 import {
   concat,
@@ -49,7 +47,6 @@ import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { ListingHeader } from './Header';
-import { useListingStyles } from './Listing.styles';
 import ListingRow from './Row/Row';
 import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import {
@@ -290,14 +287,6 @@ const Listing = <
     },
     [allSubItemIds]
   );
-
-  const { classes } = useListingStyles({
-    dataStyle,
-    gridTemplateColumn,
-    isResponsive,
-    rows: rowsToDisplay
-  });
-
   const { isShiftKeyDown } = useKeyObserver();
 
   const haveSameId = (row: TRow, rowToCompare: TRow): boolean =>
@@ -519,20 +508,20 @@ const Listing = <
   const areColumnsEditable = not(isNil(onSelectColumns));
 
   return (
-    <div className={classes.listingContainer}>
+    <div className="h-full w-full overflow-hidden">
       {loading && rows.length > 0 && (
-        <LinearProgress className={classes.loadingIndicator} />
+        <LinearProgress className="w-full h-[3px]" />
       )}
       {(!loading || (loading && rows.length < 1)) && (
-        <div className={classes.loadingIndicator} />
+        <div className="w-full h-[3px]" />
       )}
       <div
-        className={classes.container}
+        className="bg-[none] flex-column h-full w-full"
         ref={containerRef as RefObject<HTMLDivElement>}
       >
         {isActionBarVisible && (
           <div
-            className={classes.actionBar}
+            className="flex items-center"
             ref={actionBarRef as RefObject<HTMLDivElement>}
           >
             <ListingActionBar
@@ -566,7 +555,7 @@ const Listing = <
         >
           {({ height }) => (
             <Box
-              className={classes.tableWrapper}
+              className="border-b-[none] overflow-auto"
               component="div"
               style={{
                 height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
@@ -577,7 +566,13 @@ const Listing = <
               ) : (
                 <Table
                   stickyHeader
-                  className={classes.table}
+                  className="grid items-center relative"
+                  style={{
+                    gridTemplateColumns: gridTemplateColumn,
+                    gridTemplateRows: `${dataStyle.header.height}px repeat(${
+                      rowsToDisplay.length || 1
+                    }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`
+                  }}
                   component="div"
                   size="small"
                 >
@@ -600,7 +595,7 @@ const Listing = <
                   />
 
                   <TableBody
-                    className={classes.tableBody}
+                    className="contents relative"
                     component="div"
                     onMouseLeave={clearHoveredRow}
                   >
@@ -651,7 +646,7 @@ const Listing = <
                             (!isSubItem || subItems.canCheckSubItems ? (
                               <Cell
                                 align="left"
-                                className={classes.checkbox}
+                                className="justify-start"
                                 disableRowCondition={disableRowCondition}
                                 isRowHovered={isRowHovered}
                                 row={row}
@@ -664,9 +659,12 @@ const Listing = <
                                     disableRowCheckCondition(row) ||
                                     disableRowCondition(row)
                                   }
-                                  inputProps={{
-                                    'aria-label': `Select row ${getId(row)}`
+                                  slotProps={{
+                                    input: {
+                                      'aria-label': `Select row ${getId(row)}`
+                                    }
                                   }}
+                                  className="pl-1"
                                 />
                               </Cell>
                             ) : (

package/src/StoryBookThemeProvider/index.tsx

@@ -9,6 +9,7 @@ import {
 
 import { ThemeMode } from '@centreon/ui-context';
 
+import { GlobalStyles } from '@mui/system';
 import { getTheme } from '../ThemeProvider';
 
 interface Props {
@@ -23,7 +24,8 @@ const StoryBookThemeProvider = ({
   const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
 
   return (
-    <StyledEngineProvider injectFirst>
+    <StyledEngineProvider injectFirst enableCssLayer>
+      <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
       <MuiThemeProvider theme={theme}>
         {children}
         <CssBaseline />

package/src/ThemeProvider/index.tsx

@@ -21,6 +21,7 @@ import RobotoLightWoff2 from '../fonts/roboto-light-webfont.woff2';
 import RobotoMediumWoff2 from '../fonts/roboto-medium-webfont.woff2';
 import RobotoRegularWoff2 from '../fonts/roboto-regular-webfont.woff2';
 
+import { GlobalStyles } from '@mui/system';
 import { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
@@ -304,7 +305,8 @@ const ThemeProvider = ({ children }: Props): JSX.Element => {
   );
 
   return (
-    <StyledEngineProvider injectFirst>
+    <StyledEngineProvider injectFirst enableCssLayer>
+      <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
         {children}

package/src/ThemeProvider/tailwindcss.css

@@ -0,0 +1,202 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-body: Roboto, Arial, serif;
+
+  --spacing: 4px;
+
+  --spacing-0: calc(var(--spacing) * 0);
+  --spacing-1: calc(var(--spacing) * 1);
+  --spacing-2: calc(var(--spacing) * 2);
+  --spacing-3: calc(var(--spacing) * 3);
+  --spacing-4: calc(var(--spacing) * 4);
+  --spacing-5: calc(var(--spacing) * 5);
+  --spacing-6: calc(var(--spacing) * 6);
+  --spacing-7: calc(var(--spacing) * 7);
+  --spacing-8: calc(var(--spacing) * 8);
+  --spacing-9: calc(var(--spacing) * 9);
+  --spacing-10: calc(var(--spacing) * 10);
+
+  --color-action-acknowledged: #745f35;
+  --color-action-acknowledged-background: #dfd2b9;
+  --color-action-in-flapping: #064a3f;
+  --color-action-in-flapping-background: #d8f3ef;
+  --color-action-activated-opacity: 0.12;
+  --color-action-active: #666666;
+  --color-action-disabled: #999999;
+  --color-action-disabled-background: rgba(0, 0, 0, 0.12);
+  --color-action-focus: #dadada;
+  --color-action-focus-opacity: 0.12;
+  --color-action-hover: rgba(0, 0, 0, 0.06);
+  --color-action-hover-opacity: 0.06;
+  --color-action-in-downtime: #512980;
+  --color-action-in-downtime-background: #e5d8f3;
+  --color-action-selected: rgba(102, 102, 102, 0.3);
+  --color-action-selected-opacity: 0.3;
+  --color-background-default: #f4f4f4;
+  --color-background-listing-header: #666666;
+  --color-background-panel: #ededed;
+  --color-background-panel-groups: #f5f5f5;
+  --color-background-paper: #ffffff;
+  --color-background-tooltip: #434e58;
+  --color-background-widget: #f8f8f8;
+  --color-chip-error: #ff6666;
+  --color-chip-info: #1588d1;
+  --color-chip-neutral: #6da4e4;
+  --color-chip-success: #88b922;
+  --color-chip-warning: #fd9b27;
+  --color-divider: #e3e3e3;
+  --color-error-main: #ff4a4a;
+  --color-header-page-action-background-active: #1975d10f;
+  --color-header-page-action-background-default: #ffffff00;
+  --color-header-page-action-color-active: #1976d2;
+  --color-header-page-action-color-default: #696969;
+  --color-header-page-border: #ededed;
+  --color-header-page-description: #4a4a4a;
+  --color-header-page-title: #000000;
+  --color-header-info-main: #1588d1;
+  --color-header-layout-body-background: #f6f6f6;
+  --color-header-layout-header-background: #ffffff;
+  --color-header-layout-header-border: #e3e3e3;
+  --color-header-menu-background: #ffffff;
+  --color-header-menu-button-background-active: #ecf4fd;
+  --color-header-menu-button-background-default: transparent;
+  --color-header-menu-button-background-hover: #d2e4f9;
+  --color-header-menu-button-color-active: #3e85d5;
+  --color-header-menu-button-color-default: #8c98a6;
+  --color-header-menu-button-color-hover: #6f7b8a;
+  --color-header-menu-divider-border: #cad0d8;
+  --color-header-menu-item-background-active: #ecf4fd;
+  --color-header-menu-item-background-default: transparent;
+  --color-header-menu-item-background-hover: #eaedf0;
+  --color-header-menu-item-color-active: #3e85d5;
+  --color-header-menu-item-color-default: #1b2127;
+  --color-header-menu-item-color-hover: #101418;
+  --color-pending-main: #1ebeb3;
+  --color-primary-main: #2e68aa;
+  --color-primary-light: #cde7fc;
+  --color-primary-dark: #255891;
+  --color-secondary-main: #c772d6;
+  --color-secondary-light: #e5a5f0;
+  --color-secondary-dark: #ac28c1;
+  --color-status-background-error: #ff6666;
+  --color-status-background-none: --alpha(#2e68aa / 10%);
+  --color-status-background-pending: #1ebeb3;
+  --color-status-background-success: #88b922;
+  --color-stauts-background-unknown: #e3e3e3;
+  --color-status-background-warning: #fd9b27;
+  --color-success-main: #88b922;
+  --color-text-disabled: #999999;
+  --color-text-primary: #000000;
+  --color-text-secondary: #666666;
+  --color-warning-main: #fd9b27;
+  --color-white: #ffffff;
+  --color-black: #000000;
+}
+
+@layer base {
+  @variant dark {
+    --color-action-acknowledged: #dfd2b9;
+    --color-action-acknowledged-background: #745f35;
+    --color-action-in-flapping: #d8f3ef;
+    --color-action-in-flapping-background: #064a3f;
+    --color-action-activated-opacity: 0.3;
+    --color-action-active: #b5b5b5;
+    --color-action-disabled: #999999;
+    --color-action-disabled-background: rgba(0, 0, 0, 0.12);
+    --color-action-focus: #6d6d6d;
+    --color-action-focus-opacity: 0.3;
+    --color-action-hover: rgba(255, 255, 255, 0.16);
+    --color-action-hover-opacity: 0.16;
+    --color-action-in-downtime: #e5d8f3;
+    --color-action-in-downtime-background: #512980;
+    --color-action-selected: rgba(255, 255, 255, 0.5);
+    --color-action-selected-opacity: 0.5;
+    --color-background-default: #4a4a4a;
+    --color-background-listing-header: #666666;
+    --color-background-panel: #4a4a4a;
+    --color-background-panel-groups: #252525;
+    --color-background-paper: #212121;
+    --color-background-tooltip: #aab4c0;
+    --color-background-widget: #2e2e2e;
+    --color-chip-error: #d60101;
+    --color-chip-info: #1ca9f4;
+    --color-chip-neutral: #434e5b;
+    --color-chip-success: #5f8118;
+    --color-chip-warning: #c55400;
+    --color-divider: #666666;
+    --color-error-main: #d60101;
+    --color-header-page-action-background-active: #1975d10f;
+    --color-header-page-action-background-default: #ffffff00;
+    --color-header-page-action-color-active: #1976d2;
+    --color-header-page-action-color-default: #696969;
+    --color-header-page-border: #666666;
+    --color-header-page-description: #bdbdbd;
+    --color-header-page-title: #ffffff;
+    --color-header-info-main: #1ca9f4;
+    --color-header-layout-body-background: #f6f6f6;
+    --color-header-layout-header-background: #ffffff;
+    --color-header-layout-header-border: #e3e3e3;
+    --color-header-menu-background: #101418;
+    --color-header-menu-button-background-active: #071d37;
+    --color-header-menu-button-background-default: transparent;
+    --color-header-menu-button-background-hover: #1b2127;
+    --color-header-menu-button-color-active: #205593;
+    --color-header-menu-button-color-default: #596573;
+    --color-header-menu-button-color-hover: #6f7b8a;
+    --color-header-menu-divider-border: #2f3741;
+    --color-header-menu-item-background-active: #071d37;
+    --color-header-menu-item-background-default: transparent;
+    --color-header-menu-item-background-hover: #1b2127;
+    --color-header-menu-item-color-active: #3e85d5;
+    --color-header-menu-item-color-default: #f9fafb;
+    --color-header-menu-item-color-hover: #ffffff;
+    --color-pending-main: #118077;
+    --color-primary-main: #6eaff8;
+    --color-primary-light: #8bbff9;
+    --color-primary-dark: #4974a5;
+    --color-secondary-main: #7c1fa2;
+    --color-status-background-error: #d60101;
+    --color-status-background-none: --alpha(#2e68aa / 10%);
+    --color-status-background-pending: #118077;
+    --color-status-background-success: #5f8118;
+    --color-stauts-background-unknown: #666666;
+    --color-status-background-warning: #c55400;
+    --color-success-main: #5f8118;
+    --color-text-disabled: #666666;
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #cccccc;
+    --color-warning-main: #c55400;
+  }
+}
+
+@layer components {
+  .flex-column {
+    @apply flex flex-col gap-1;
+  }
+
+  .flex-row {
+    @apply flex flex-row gap-1;
+  }
+
+  .flex-column-center {
+    @apply flex flex-col items-center;
+  }
+
+  .flex-column-start {
+    @apply flex flex-col items-start;
+  }
+
+  .flex-column-end {
+    @apply flex flex-col items-end;
+  }
+}
+
+#root {
+  transition-duration: var(--default-transition-duration);
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-timing-function: var(--default-transition-timing-function);
+}

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import Avatar from './Avatar';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof Avatar> = {
   component: Avatar

package/src/components/Button/Button.module.css

@@ -0,0 +1,38 @@
+.button {
+  &[data-size="medium"] {
+    font-size: 16px;
+    height: unset;
+    line-height: 24px;
+  }
+
+  &[data-size="small"] {
+    &[data-variant="primary"] {
+      padding-left: var(--spacing-4);
+      padding-right: var(--spacing-4);
+    }
+
+    font-size: 14px;
+    height: unset;
+    line-height: 22px;
+  }
+
+  &[data-variant="primary"]:not(:disabled) {
+    &[data-is-danger="true"] {
+      background-color: var(--color-error-main);
+    }
+
+    background-color: var(--color-primary-main);
+  }
+
+  &[data-variant="secondary"]:not(:disabled) {
+    &[data-is-danger="true"] {
+      border-color: var(--color-error-main);
+      color: var(--color-error-main);
+    }
+
+    border-color: var(--color-primary-main);
+    color: var(--color-primary-main);
+  }
+
+  text-wrap: nowrap;
+}

package/src/components/Button/Button.stories.tsx

@@ -1,3 +1,4 @@
+import '../../ThemeProvider/tailwindcss.css';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Add as AddIcon } from '@mui/icons-material';
@@ -32,3 +33,27 @@ export const AsDanger: Story = {
     isDanger: true
   }
 };
+
+export const small: Story = {
+  args: {
+    ...Default.args,
+    size: 'small'
+  }
+};
+
+export const smallWithIcon: Story = {
+  args: {
+    ...Default.args,
+    size: 'small',
+    icon: <AddIcon />,
+    iconVariant: 'start'
+  }
+};
+
+export const smallDanger: Story = {
+  args: {
+    ...Default.args,
+    size: 'small',
+    isDanger: true
+  }
+};

package/src/components/Button/Button.tsx

@@ -7,8 +7,7 @@ import {
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { DataTestAttributes } from '../../@types/data-attributes';
-
-import { useStyles } from './Button.styles';
+import { button } from './Button.module.css';
 
 const muiVariantMap: Record<
   Required<ButtonProps>['variant'],
@@ -48,8 +47,6 @@ const Button = ({
   className = '',
   ...attr
 }: ButtonProps): ReactElement => {
-  const { classes, cx } = useStyles();
-
   const MuiOverrideProps = useMemo(
     () => ({
       color: 'primary' as const,
@@ -61,7 +58,7 @@ const Button = ({
 
   return (
     <MuiButton
-      className={cx(classes.button, className)}
+      className={`${button} ${className}`}
       data-icon-variant={iconVariant}
       data-is-danger={isDanger}
       data-size={size}

package/src/components/CrudPage/CrudPageRoot.tsx

@@ -97,7 +97,7 @@ export const CrudPageRoot = <
             {isDataEmpty && !isLoading ? (
               <DataTable.EmptyState
                 aria-label="create"
-                data-testid="create-agent-configuration"
+                buttonCreateTestId="create-crudpage"
                 labels={{
                   title: labels.welcome.title,
                   description: labels.welcome.description,

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -19,12 +19,14 @@ type ListEmptyStateProps = {
     description?: string;
   };
   onCreate?: () => void;
+  buttonCreateTestId?: string;
 };
 
 const DataTableEmptyState = ({
   labels,
   onCreate,
-  canCreate = true
+  canCreate = true,
+  buttonCreateTestId
 }: ListEmptyStateProps): ReactElement => {
   const { classes } = useStyles();
   const { t } = useTranslation();
@@ -47,6 +49,7 @@ const DataTableEmptyState = ({
             icon={<AddIcon />}
             iconVariant="start"
             onClick={() => onCreate?.()}
+            data-testid={buttonCreateTestId}
           >
             {t(labels.actions?.create || '')}
           </Button>

package/src/components/Layout/AreaIndicator.tsx

@@ -1,7 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { useStyles } from './AreaIndicator.styles';
-
 type AreaIndicatorProps = {
   children?: ReactNode | Array<ReactNode>;
   depth?: number;
@@ -17,16 +15,16 @@ const AreaIndicator = ({
   height = '100%',
   depth = 0
 }: AreaIndicatorProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
     <div
-      className={classes.areaIndicator}
+      className={'bg-secondary-main/25 relative min-h-8'}
       data-depth={depth}
       style={{ height, width }}
     >
       {/* biome-ignore lint/a11y: */}
-      <label>{name}</label>
+      <label className="left-2 rounded-sm border border-[#9747FF7F] border-dashed text-[#9747FF] text-[0.75rem] font-medium left-2 absolute top-1.5 px-2 py-0.5">
+        {name}
+      </label>
       {children}
     </div>
   );