@centreon/ui 24.11.14 → 24.11.21

package/src/Snackbar/index.tsx

@@ -1,28 +1,33 @@
-import * as React from 'react';
-
-import { useSnackbar, SnackbarContent } from 'notistack';
+import { SnackbarContent, useSnackbar } from 'notistack';
 import { isNil, not } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { IconButton, Alert } from '@mui/material';
 import IconClose from '@mui/icons-material/Close';
+import { Alert, IconButton } from '@mui/material';
+
+import { sanitizedHTML } from '../utils';
 
+import { forwardRef, useEffect, useRef } from 'react';
 import Severity from './Severity';
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()((theme) => ({
   alertIcon: {
-    paddingTop: '10px'
+    paddingTop: theme.spacing(1.25)
   },
   closeIcon: {
     fontSize: 20,
     opacity: 0.9
   },
   message: {
+    '& a': {
+      color: theme.palette.primary.main,
+      textDecoration: 'none'
+    },
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center'
   }
-});
+}));
 
 export interface SnackbarProps {
   id: string | number;
@@ -30,16 +35,16 @@ export interface SnackbarProps {
   severity: Severity;
 }
 
-const Snackbar = React.forwardRef(
+const Snackbar = forwardRef(
   (
     { message, id, severity }: SnackbarProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ): JSX.Element => {
     const { classes } = useStyles();
     const { closeSnackbar } = useSnackbar();
-    const timeoutId = React.useRef<number | undefined>();
+    const timeoutId = useRef<NodeJS.Timeout | undefined>();
 
-    React.useEffect((): void => {
+    useEffect((): void => {
       timeoutId.current = setTimeout(() => {
         closeSnackbar(id);
       }, 6000);
@@ -47,10 +52,14 @@ const Snackbar = React.forwardRef(
 
     const close = (): void => {
       if (not(isNil(timeoutId.current))) {
-        clearTimeout(timeoutId.current as number);
+        clearTimeout(timeoutId.current);
       }
       closeSnackbar(id);
     };
+    const sanitizedMessage = sanitizedHTML({ initialContent: message });
+
+    const formatedMessage =
+      typeof message === 'string' ? <div>{sanitizedMessage}</div> : message;
 
     return (
       <SnackbarContent ref={ref}>
@@ -69,7 +78,7 @@ const Snackbar = React.forwardRef(
           severity={severity}
           variant="filled"
         >
-          {message}
+          {formatedMessage}
         </Alert>
       </SnackbarContent>
     );

package/src/Snackbar/useSnackbar.tsx

@@ -2,6 +2,8 @@ import { useSnackbar as useNotistackSnackbar } from 'notistack';
 
 import { Typography } from '@mui/material';
 
+import { sanitizedHTML } from '../utils';
+
 import Severity from './Severity';
 
 import Snackbar from '.';
@@ -59,7 +61,9 @@ const useSnackbar = (): UseSnackbar => {
         <div>
           {formattedMessages.map((errorMessage, index) => (
             <Typography key={messageKeys[index]} variant="body2">
-              {errorMessage}
+              {sanitizedHTML({
+                initialContent: errorMessage
+              })}
             </Typography>
           ))}
         </div>

package/src/SortableItems/Item.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
+import { ForwardedRef, forwardRef } from 'react';
 
 interface Props extends Record<string, unknown> {
   Content: (props) => JSX.Element;
   isInDragOverlay?: boolean;
 }
 
-const Item = React.forwardRef(
-  ({ Content, ...props }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
+const Item = forwardRef(
+  ({ Content, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
     return <Content {...props} itemRef={ref} />;
   }
 );

package/src/SortableItems/SortableItem.tsx

@@ -1,8 +1,8 @@
-import { props } from 'ramda';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { props } from 'ramda';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import Item from './Item';
 
@@ -56,7 +56,8 @@ const SortableItem = ({
       transform,
       props(itemProps, rest),
       ...memoProps,
-      ...additionalProps
+      ...additionalProps,
+      ...Object.values(rest)
     ]
   });
 };

package/src/SortableItems/index.stories.tsx

@@ -1,19 +1,18 @@
-import * as React from 'react';
-
-import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { DraggableSyntheticListeners, rectIntersection } from '@dnd-kit/core';
 import {
+  SortingStrategy,
   horizontalListSortingStrategy,
   rectSortingStrategy,
-  SortingStrategy,
   verticalListSortingStrategy
 } from '@dnd-kit/sortable';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { not } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Paper, Typography, Grid, IconButton } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { Grid, IconButton, Paper, Typography } from '@mui/material';
 
+import { RefObject } from 'react';
 import SortableItems, { RootComponentProps } from '.';
 
 export default {
@@ -89,7 +88,7 @@ const useContentStyles = makeStyles<StylesProps>()((theme, { isDragging }) => ({
 interface ContentProps extends Entity {
   attributes;
   isDragging: boolean;
-  itemRef: React.RefObject<HTMLDivElement>;
+  itemRef: RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
   style;
 }

package/src/SortableItems/index.tsx

@@ -1,49 +1,44 @@
-import * as React from 'react';
-
 import {
+  CollisionDetection,
   DndContext,
+  DragEndEvent,
+  DragOverEvent,
   DragOverlay,
-  MouseSensor,
+  DragStartEvent,
+  DraggableSyntheticListeners,
   KeyboardSensor,
+  MouseSensor,
+  Over,
   PointerSensor,
   useSensor,
-  useSensors,
-  CollisionDetection,
-  DraggableSyntheticListeners,
-  DragOverEvent,
-  DragStartEvent,
-  DragEndEvent,
-  Over
+  useSensors
 } from '@dnd-kit/core';
+import { SortableContext, SortingStrategy } from '@dnd-kit/sortable';
 import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  SortingStrategy
-} from '@dnd-kit/sortable';
-import {
+  path,
   equals,
   find,
   indexOf,
   isNil,
   move,
   not,
-  path,
-  pipe,
-  propEq,
   pick,
-  pluck
+  pipe,
+  pluck,
+  propEq
 } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
-import SortableItem from './SortableItem';
+import { RefObject, useEffect, useState } from 'react';
 import Item from './Item';
+import SortableItem from './SortableItem';
 
 interface ContentProps {
   attributes;
   index;
   isDragging: boolean;
-  itemRef: React.RefObject<HTMLDivElement>;
+  itemRef: RefObject<HTMLDivElement>;
   listeners: DraggableSyntheticListeners;
   style;
 }
@@ -110,14 +105,13 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
   const getItemsIds = (): Array<string> =>
     pluck(propertyToFilterItemsOn, items);
 
-  const [activeId, setActiveId] = React.useState<string | null>(null);
-  const [sortableItemsIds, setSortableItemsIds] = React.useState(getItemsIds());
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [sortableItemsIds, setSortableItemsIds] = useState(getItemsIds());
 
   const sensors = useSensors(
     useSensor(MouseSensor),
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
       keyboardCodes: {
         cancel: ['Escape'],
         end: ['Space', 'Enter'],
@@ -169,11 +163,11 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
   };
 
   const getItemById = (id): T | undefined =>
-    find(propEq(propertyToFilterItemsOn, id), items);
+    find(propEq(id, propertyToFilterItemsOn), items);
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (not(updateSortableItemsOnItemsChange)) {
       return;
     }
@@ -191,6 +185,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     >
       <SortableContext items={sortableItemsIds} strategy={sortingStrategy}>
         <RootComponent>
+          {/* biome-ignore lint: */}
           <>
             {sortableItemsIds.map((sortableItemId, index) => {
               const item = getItemById(sortableItemId) as

package/src/StatusChip/index.tsx

@@ -5,7 +5,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps } from '@mui/material';
 
-import { getStatusColors, SeverityCode } from '../utils/statuses';
+import { SeverityCode, getStatusColors } from '../utils/statuses';
 
 export type Props = {
   clickable?: boolean;

package/src/StoryBookThemeProvider/index.tsx

@@ -1,36 +1,35 @@
-import * as React from 'react';
-import { useMemo } from 'react';
-
-import {
-  ThemeProvider as MuiThemeProvider,
-  StyledEngineProvider,
-  createTheme,
-  CssBaseline
-} from '@mui/material';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-import { getTheme } from '../ThemeProvider';
-
-interface Props {
-  children: React.ReactElement;
-  themeMode: ThemeMode;
-}
-
-const StoryBookThemeProvider = ({
-  children,
-  themeMode
-}: Props): JSX.Element => {
-  const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
-
-  return (
-    <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme}>
-        {children}
-        <CssBaseline />
-      </MuiThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
-export default StoryBookThemeProvider;
+import { ReactElement, useMemo } from 'react';
+
+import {
+  CssBaseline,
+  ThemeProvider as MuiThemeProvider,
+  StyledEngineProvider,
+  createTheme
+} from '@mui/material';
+
+import { ThemeMode } from '@centreon/ui-context';
+
+import { getTheme } from '../ThemeProvider';
+
+interface Props {
+  children: ReactElement;
+  themeMode: ThemeMode;
+}
+
+const StoryBookThemeProvider = ({
+  children,
+  themeMode
+}: Props): JSX.Element => {
+  const theme = useMemo(() => createTheme(getTheme(themeMode)), [themeMode]);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>
+        {children}
+        <CssBaseline />
+      </MuiThemeProvider>
+    </StyledEngineProvider>
+  );
+};
+
+export default StoryBookThemeProvider;

package/src/ThemeProvider/index.tsx

@@ -1,27 +1,30 @@
-import * as React from 'react';
-
 import { useAtomValue } from 'jotai';
-import { CSSInterpolation } from 'tss-react';
 import { equals } from 'ramda';
+import { CSSInterpolation } from 'tss-react';
 
 import {
+  ButtonProps,
+  InputBaseProps,
   ThemeProvider as MuiThemeProvider,
-  Theme,
   StyledEngineProvider,
-  createTheme,
-  InputBaseProps,
-  ButtonProps
+  Theme,
+  createTheme
 } from '@mui/material';
-import CssBaseline from '@mui/material/CssBaseline';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
+import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeOptions } from '@mui/material/styles/createTheme';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
 
+import RobotoBoldWoff2 from '../fonts/roboto-bold-webfont.woff2';
+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 { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
 }
 
@@ -44,8 +47,7 @@ const getInputBaseRootStyle = ({
 
   if (equals(size, 'compact')) {
     return {
-      padding: '8px 8px',
-      paddingRight: '0px'
+      padding: '0px 0px 0px 8px'
     };
   }
   if (equals(size, 'small')) {
@@ -71,7 +73,6 @@ const getInputBaseRootStyle = ({
 const getInputBaseInputStyle = ({ size }: InputBaseProps): CSSInterpolation => {
   if (equals(size, 'compact')) {
     return {
-      fontSize: 'x-small',
       minHeight: '32px'
     };
   }
@@ -119,6 +120,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     MuiChip: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
+          backgroundColor: !ownerState.color && theme.palette.divider,
           ...(equals(ownerState.size, 'medium') && {
             borderRadius: theme.spacing(1.25),
             fontSize: theme.typography.body2.fontSize,
@@ -147,7 +149,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
         ::-webkit-scrollbar {
           height: ${theme.spacing(1)};
           width: ${theme.spacing(1)};
-          background-color: ${theme.palette.background.default};
+          background-color: transparent;
         }
         ::-webkit-scrollbar-thumb {
           background-color: ${
@@ -173,6 +175,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
           height: 100%;
+          text-rendering: optimizeLegibility;
         }
         body {
           background-color: ${theme.palette.background.paper};
@@ -180,11 +183,41 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        #root {
+          background-color: ${theme.palette.background.paper};
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 300;
+          src: local('Roboto'), local('Roboto-Light'), url(${RobotoLightWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 400;
+          src: local('Roboto'), local('Roboto-Regular'), url(${RobotoRegularWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 500;
+          src: local('Roboto'), local('Roboto-Medium'), url(${RobotoMediumWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 700;
+          src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
+        }
       `
     },
     MuiInputBase: {
       styleOverrides: {
-        root: ({ ownerState }) => getInputBaseInputStyle(ownerState)
+        root: ({ ownerState, theme }) => ({
+          ...getInputBaseInputStyle(ownerState),
+          backgroundColor: theme.palette.background.paper
+        })
       }
     },
     MuiList: {
@@ -228,7 +261,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
             {
               backgroundColor: theme.palette.background.default,
               border: 'none',
-              borderRadius: 0,
+              borderRadius: `${theme.shape.borderRadius}px`,
               boxShadow: theme.shadows[3]
             }
         })
@@ -253,18 +286,19 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     caption: {
       fontSize: '0.625rem'
-    }
+    },
+    fontFamily: 'Roboto, Arial'
   }
 });
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const ThemeProvider = ({ children }: Props): JSX.Element => {
   const { themeMode } = useAtomValue(userAtom);
 
-  const theme = React.useMemo(
+  const theme = useMemo(
     () => createTheme(getTheme(themeMode || ThemeMode.light)),
     [themeMode]
   );