@centreon/ui 23.10.24 → 23.10.25-feature-MON-19319.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.24",
+  "version": "23.10.25-feature-MON-19319.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -8,6 +8,7 @@
     "storybook": "storybook dev -p 9001 -c .storybook",
     "build:storybook": "storybook build -c .storybook -o .out",
     "test": "jest",
+    "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
     "cypress:ui": "cypress open --component --browser=chrome",
     "cypress:cli:updateSnapshot": "pnpm cypress:cli --env updateSnapshots=true",
@@ -54,18 +55,23 @@
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-styling": "^1.0.6",
     "@storybook/builder-vite": "^7.0.9",
+    "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.0.9",
     "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/preview-api": "^7.0.9",
     "@storybook/react": "^7.0.9",
     "@storybook/react-vite": "^7.0.9",
+    "@storybook/test-runner": "^0.10.0",
+    "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.9",
     "@testing-library/cypress": "^8.0.7",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^27.5.0",
     "@types/ramda": "^0.28.12",
     "@types/react": "^18.0.26",
+    "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
     "axios-mock-adapter": "^1.21.4",
@@ -83,6 +89,7 @@
     "storybook": "^7.0.9",
     "storybook-addon-mock": "^4.0.0",
     "storybook-dark-mode": "^3.0.0",
+    "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
     "vite-plugin-svgr": "^3.2.0",
     "vite-plugin-turbosnap": "^1.0.2"

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -1,5 +1,3 @@
-import { ReactElement } from 'react';
-
 import { ComponentMeta } from '@storybook/react';
 import { Layout } from 'react-grid-layout';
 
@@ -62,18 +60,18 @@ const generateLayout = (maxElements: number): Array<CustomLayout> => {
 };
 
 interface DashboardTemplateProps {
-  header?: ReactElement;
+  header?: JSX.Element;
   layout?: Array<CustomLayout>;
 }
 
-const Header = (): ReactElement => (
+const Header = (): JSX.Element => (
   <Typography variant="body2">The title</Typography>
 );
 
 const DashboardTemplate = ({
   header,
   layout = dashboardLayout
-}: DashboardTemplateProps): ReactElement => (
+}: DashboardTemplateProps): JSX.Element => (
   <DashboardLayout.Layout<CustomLayout> layout={layout}>
     {layout.map(({ i, content, shouldUseFluidTypography }) => (
       <DashboardLayout.Item header={header} key={i}>

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Responsive } from '@visx/visx';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -14,7 +14,7 @@ const ReactGridLayout = WidthProvider(GridLayout);
 
 interface DashboardLayoutProps<T> {
   changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<ReactElement>;
+  children: Array<JSX.Element>;
   displayGrid?: boolean;
   layout: Array<T>;
 }
@@ -24,7 +24,7 @@ const Layout = <T extends Layout>({
   changeLayout,
   displayGrid,
   layout
-}: DashboardLayoutProps<T>): ReactElement => {
+}: DashboardLayoutProps<T>): JSX.Element => {
   const { classes } = useDashboardLayoutStyles();
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -45,7 +45,7 @@ const Layout = <T extends Layout>({
     Component: (
       <ResponsiveHeight>
         <Responsive.ParentSize>
-          {({ width, height }): ReactElement => (
+          {({ width, height }): JSX.Element => (
             <div className={classes.container}>
               {displayGrid && (
                 <Grid columns={columns} height={height} width={width} />

package/src/Dashboard/utils.ts

@@ -1,28 +1,28 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-export const maxColumns = 12;
-const minColumns = 1;
-const breakpoint = 768;
-
-export const rowHeight = 64;
-
-export const getIsSmallScreenSize = (): boolean =>
-  lt(window.innerWidth, breakpoint);
-
-export const getColumnsFromScreenSize = (): number =>
-  getIsSmallScreenSize() ? minColumns : maxColumns;
-
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
-  const isSmallScreenSize = getIsSmallScreenSize();
-  if (!isSmallScreenSize) {
-    return layout;
-  }
-
-  return layout
-    .sort((a, b) => a.x + a.y - (b.x + b.y))
-    .map((widget) => ({
-      ...widget,
-      w: 1
-    }));
-};
+import { lt } from 'ramda';
+import { Layout } from 'react-grid-layout';
+
+export const maxColumns = 12;
+const minColumns = 1;
+const breakpoint = 768;
+
+export const rowHeight = 64;
+
+export const getIsSmallScreenSize = (): boolean =>
+  lt(window.innerWidth, breakpoint);
+
+export const getColumnsFromScreenSize = (): number =>
+  getIsSmallScreenSize() ? minColumns : maxColumns;
+
+export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
+  const isSmallScreenSize = getIsSmallScreenSize();
+  if (!isSmallScreenSize) {
+    return layout;
+  }
+
+  return layout
+    .sort((a, b) => a.x + a.y - (b.x + b.y))
+    .map((widget) => ({
+      ...widget,
+      w: 1
+    }));
+};

package/src/ThemeProvider/index.tsx

@@ -5,12 +5,12 @@ import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
 
 import {
-  ThemeProvider as MuiThemeProvider,
-  Theme,
-  StyledEngineProvider,
+  ButtonProps,
   createTheme,
   InputBaseProps,
-  ButtonProps
+  StyledEngineProvider,
+  Theme,
+  ThemeProvider as MuiThemeProvider
 } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
@@ -177,6 +177,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
           height: 100%;
+          text-rendering: optimizeLegibility;
         }
         body {
           background-color: ${theme.palette.background.paper};
@@ -205,7 +206,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
         @font-face {
           font-family: 'Roboto';
           font-style: normal;
-          font-weight: 600;
+          font-weight: 700;
           src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
         }
       `

package/src/ThemeProvider/palettes.ts

@@ -1,208 +1,234 @@
-import { equals } from 'ramda';
-
-import { alpha, PaletteOptions } from '@mui/material';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-declare module '@mui/material/styles/createPalette' {
-  interface TypeAction {
-    acknowledged: string;
-    acknowledgedBackground: string;
-    inDowntime: string;
-    inDowntimeBackground: string;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface Palette {
-    background: {
-      default: string;
-      listingHeader: string;
-      panelGroups: string;
-      paper: string;
-    };
-    pending: {
-      contrastText: string;
-      main: string;
-    };
-    statusBackground: StatusBackground;
-  }
-  interface StatusBackground {
-    error: string;
-    none: string;
-    pending: string;
-    success: string;
-    unknown: string;
-    warning: string;
-  }
-  interface PaletteOptions {
-    pending: {
-      contrastText: string;
-      main: string;
-    };
-    statusBackground: StatusBackground;
-  }
-
-  interface TypeBackground {
-    listingHeader: string;
-    panel: string;
-    panelGroups: string;
-  }
-}
-
-declare module '@mui/material/Button' {
-  interface ButtonPropsColorOverrides {
-    pending: true;
-  }
-}
-
-declare module '@mui/material/Badge' {
-  interface BadgePropsColorOverrides {
-    pending: true;
-  }
-}
-
-export const lightPalette: PaletteOptions = {
-  action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#F5F1E9',
-    activatedOpacity: 0.12,
-    active: '#666666',
-    disabled: '#999999',
-    disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    focus: 'rgba(0, 0, 0, 0.12)',
-    focusOpacity: 0.12,
-    hover: 'rgba(0, 0, 0, 0.06)',
-    hoverOpacity: 0.06,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#F0E9F8',
-    selected: 'rgba(102, 102, 102, 0.3)',
-    selectedOpacity: 0.3
-  },
-  background: {
-    default: '#F4F4F4',
-    listingHeader: '#666666',
-    panel: '#EDEDED',
-    panelGroups: '#F5F5F5',
-    paper: '#FFFFFF'
-  },
-  divider: '#E3E3E3',
-  error: {
-    contrastText: '#000',
-    main: '#FF4A4A'
-  },
-  info: {
-    contrastText: '#000',
-    main: '#1588D1'
-  },
-  mode: ThemeMode.light,
-  pending: {
-    contrastText: '#000',
-    main: '#1EBEB3'
-  },
-  primary: {
-    contrastText: '#fff',
-    dark: '#255891',
-    light: '#cde7fc',
-    main: '#2E68AA'
-  },
-  secondary: {
-    contrastText: '#fff',
-    main: '#C772D6'
-  },
-  statusBackground: {
-    error: '#FF6666',
-    none: alpha('#2E68AA', 0.1),
-    pending: '#1EBEB3',
-    success: '#88B922',
-    unknown: '#E3E3E3',
-    warning: '#FD9B27'
-  },
-  success: {
-    contrastText: '#000',
-    main: '#88B922'
-  },
-  text: {
-    disabled: '#999999',
-    primary: '#000000',
-    secondary: '#666666'
-  },
-  warning: {
-    contrastText: '#000',
-    main: '#FD9B27'
-  }
-};
-
-export const darkPalette: PaletteOptions = {
-  action: {
-    acknowledged: '#67532C',
-    acknowledgedBackground: '#67532C',
-    activatedOpacity: 0.3,
-    active: '#B5B5B5',
-    disabled: '#999999',
-    disabledBackground: '#555555',
-    focus: 'rgba(255, 255, 255, 0.30)',
-    focusOpacity: 0.3,
-    hover: 'rgba(255, 255, 255, 0.16)',
-    hoverOpacity: 0.16,
-    inDowntime: '#4B2352',
-    inDowntimeBackground: '#4B2352',
-    selected: 'rgba(255, 255, 255, 0.5)',
-    selectedOpacity: 0.5
-  },
-  background: {
-    default: '#4a4a4a',
-    listingHeader: '#666666',
-    panel: '#4a4a4a',
-    panelGroups: '#252525',
-    paper: '#212121'
-  },
-  divider: '#666666',
-  error: {
-    contrastText: '#fff',
-    main: '#D60101'
-  },
-  info: {
-    contrastText: '#fff',
-    main: '#1CA9F4'
-  },
-  mode: ThemeMode.dark,
-  pending: {
-    contrastText: '#fff',
-    main: '#118077'
-  },
-  primary: {
-    contrastText: '#000',
-    dark: '#4974A5',
-    light: '#8bbff9',
-    main: '#6eaff8'
-  },
-  secondary: {
-    contrastText: '#fff',
-    main: '#7C1FA2'
-  },
-  statusBackground: {
-    error: '#D60101',
-    none: alpha('#2E68AA', 0.1),
-    pending: '#118077',
-    success: '#5F8118',
-    unknown: '#666666',
-    warning: '#C55400'
-  },
-  success: {
-    contrastText: '#fff',
-    main: '#5F8118'
-  },
-  text: {
-    disabled: '#666666',
-    primary: '#FFFFFF',
-    secondary: '#CCCCCC'
-  },
-  warning: {
-    contrastText: '#fff',
-    main: '#C55400'
-  }
-};
-
-export const getPalette = (mode: ThemeMode): PaletteOptions =>
-  equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;
+import { equals } from 'ramda';
+
+import { alpha, PaletteOptions } from '@mui/material';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+declare module '@mui/material/styles/createPalette' {
+  interface TypeAction {
+    acknowledged: string;
+    acknowledgedBackground: string;
+    inDowntime: string;
+    inDowntimeBackground: string;
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    background: {
+      default: string;
+      listingHeader: string;
+      panelGroups: string;
+      paper: string;
+    };
+    pending: {
+      contrastText: string;
+      main: string;
+    };
+    statusBackground: StatusBackground;
+  }
+  interface StatusBackground {
+    error: string;
+    none: string;
+    pending: string;
+    success: string;
+    unknown: string;
+    warning: string;
+  }
+  interface PaletteOptions {
+    pending: {
+      contrastText: string;
+      main: string;
+    };
+    statusBackground: StatusBackground;
+  }
+
+  interface TypeBackground {
+    listingHeader: string;
+    panel: string;
+    panelGroups: string;
+  }
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsColorOverrides {
+    pending: true;
+  }
+}
+
+declare module '@mui/material/Badge' {
+  interface BadgePropsColorOverrides {
+    pending: true;
+  }
+}
+
+export const lightPalette: PaletteOptions = {
+  action: {
+    acknowledged: '#67532C',
+    acknowledgedBackground: '#F5F1E9',
+    activatedOpacity: 0.12,
+    active: '#666666',
+    disabled: '#999999',
+    disabledBackground: 'rgba(0, 0, 0, 0.12)',
+    focus: 'rgba(0, 0, 0, 0.12)',
+    focusOpacity: 0.12,
+    hover: 'rgba(0, 0, 0, 0.06)',
+    hoverOpacity: 0.06,
+    inDowntime: '#4B2352',
+    inDowntimeBackground: '#F0E9F8',
+    selected: 'rgba(102, 102, 102, 0.3)',
+    selectedOpacity: 0.3
+  },
+  background: {
+    default: '#F4F4F4',
+    listingHeader: '#666666',
+    panel: '#EDEDED',
+    panelGroups: '#F5F5F5',
+    paper: '#FFFFFF'
+  },
+  divider: '#E3E3E3',
+  error: {
+    contrastText: '#000',
+    main: '#FF4A4A'
+  },
+  info: {
+    contrastText: '#000',
+    main: '#1588D1'
+  },
+  mode: ThemeMode.light,
+  pending: {
+    contrastText: '#000',
+    main: '#1EBEB3'
+  },
+  primary: {
+    contrastText: '#fff',
+    dark: '#255891',
+    light: '#cde7fc',
+    main: '#2E68AA'
+  },
+  secondary: {
+    contrastText: '#fff',
+    main: '#C772D6'
+  },
+  statusBackground: {
+    error: '#FF6666',
+    none: alpha('#2E68AA', 0.1),
+    pending: '#1EBEB3',
+    success: '#88B922',
+    unknown: '#E3E3E3',
+    warning: '#FD9B27'
+  },
+  success: {
+    contrastText: '#000',
+    main: '#88B922'
+  },
+  text: {
+    disabled: '#999999',
+    primary: '#000000',
+    secondary: '#666666'
+  },
+  warning: {
+    contrastText: '#000',
+    main: '#FD9B27'
+  }
+};
+
+export const darkPalette: PaletteOptions = {
+  action: {
+    acknowledged: '#67532C',
+    acknowledgedBackground: '#67532C',
+    activatedOpacity: 0.3,
+    active: '#B5B5B5',
+    disabled: '#999999',
+    disabledBackground: '#555555',
+    focus: 'rgba(255, 255, 255, 0.30)',
+    focusOpacity: 0.3,
+    hover: 'rgba(255, 255, 255, 0.16)',
+    hoverOpacity: 0.16,
+    inDowntime: '#4B2352',
+    inDowntimeBackground: '#4B2352',
+    selected: 'rgba(255, 255, 255, 0.5)',
+    selectedOpacity: 0.5
+  },
+  background: {
+    default: '#4a4a4a',
+    listingHeader: '#666666',
+    panel: '#4a4a4a',
+    panelGroups: '#252525',
+    paper: '#212121'
+  },
+  divider: '#666666',
+  error: {
+    contrastText: '#fff',
+    main: '#D60101'
+  },
+  header: {
+    page: {
+      action: {
+        background: {
+          active: '#1975D10F',
+          default: '#FFFFFF00'
+        },
+        color: {
+          active: '#1976D2',
+          default: '#696969'
+        }
+      },
+      border: '#bdbdbd',
+      description: '#bdbdbd',
+      title: '#fff'
+    }
+  },
+  info: {
+    contrastText: '#fff',
+    main: '#1CA9F4'
+  },
+  layout: {
+    body: {
+      background: '#F6F6F6'
+    },
+    header: {
+      background: '#FFFFFF',
+      border: '#E3E3E3'
+    }
+  },
+  mode: ThemeMode.dark,
+  pending: {
+    contrastText: '#fff',
+    main: '#118077'
+  },
+  primary: {
+    contrastText: '#000',
+    dark: '#4974A5',
+    light: '#8bbff9',
+    main: '#6eaff8'
+  },
+  secondary: {
+    contrastText: '#fff',
+    main: '#7C1FA2'
+  },
+  statusBackground: {
+    error: '#D60101',
+    none: alpha('#2E68AA', 0.1),
+    pending: '#118077',
+    success: '#5F8118',
+    unknown: '#666666',
+    warning: '#C55400'
+  },
+  success: {
+    contrastText: '#fff',
+    main: '#5F8118'
+  },
+  text: {
+    disabled: '#666666',
+    primary: '#FFFFFF',
+    secondary: '#CCCCCC'
+  },
+  warning: {
+    contrastText: '#fff',
+    main: '#C55400'
+  }
+};
+
+export const getPalette = (mode: ThemeMode): PaletteOptions =>
+  equals(mode, ThemeMode.dark) ? darkPalette : lightPalette;

package/src/components/Button/Button.styles.ts

@@ -3,8 +3,13 @@ import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()((theme) => ({
   button: {
     '&[data-size="small"]': {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2)
+      '&[data-variant="primary"], &[data-variant="secondary"]': {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2)
+      },
+      fontSize: '14px',
+      height: 'unset',
+      lineHeight: '22px'
     },
 
     '&[data-variant="primary"]:not(:disabled)': {