@centreon/ui 24.8.6 → 24.9.0

package/src/RichTextEditor/plugins/ToolbarPlugin/UndoRedoButtons.tsx

@@ -1,97 +1,97 @@
-import { useEffect, useState } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  UNDO_COMMAND,
-  REDO_COMMAND,
-  CAN_UNDO_COMMAND,
-  CAN_REDO_COMMAND
-} from 'lexical';
-import { mergeRegister } from '@lexical/utils';
-import { useTranslation } from 'react-i18next';
-
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-
-import { IconButton } from '../../..';
-import { labelRedo, labelUndo } from '../../translatedLabels';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-const LowPriority = 1;
-
-interface Props {
-  disabled: boolean;
-}
-
-const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const { t } = useTranslation();
-
-  const [canUndo, setCanUndo] = useState(false);
-  const [canRedo, setCanRedo] = useState(false);
-
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        CAN_UNDO_COMMAND,
-        (payload) => {
-          setCanUndo(payload);
-
-          return false;
-        },
-        LowPriority
-      ),
-      editor.registerCommand(
-        CAN_REDO_COMMAND,
-        (payload) => {
-          setCanRedo(payload);
-
-          return false;
-        },
-        LowPriority
-      )
-    );
-  }, []);
-
-  const undo = (): void => {
-    editor.dispatchCommand(UNDO_COMMAND, undefined);
-  };
-
-  const redo = (): void => {
-    editor.dispatchCommand(REDO_COMMAND, undefined);
-  };
-
-  const translatedUndo = t(labelUndo);
-  const translatedRedo = t(labelRedo);
-
-  return (
-    <>
-      <IconButton
-        ariaLabel={translatedUndo}
-        className={classes.button}
-        disabled={!canUndo || disabled}
-        title={translatedUndo}
-        tooltipPlacement="top"
-        onClick={undo}
-      >
-        <UndoIcon />
-      </IconButton>
-      <IconButton
-        ariaLabel={translatedRedo}
-        className={classes.button}
-        disabled={!canRedo || disabled}
-        title={translatedRedo}
-        tooltipPlacement="top"
-        onClick={redo}
-      >
-        <RedoIcon />
-      </IconButton>
-    </>
-  );
-};
-
-export default UndoRedoButtons;
+import { useEffect, useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import {
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND
+} from 'lexical';
+import { useTranslation } from 'react-i18next';
+
+import RedoIcon from '@mui/icons-material/Redo';
+import UndoIcon from '@mui/icons-material/Undo';
+
+import { IconButton } from '../../..';
+import { labelRedo, labelUndo } from '../../translatedLabels';
+
+import { useStyles } from './ToolbarPlugin.styles';
+
+const LowPriority = 1;
+
+interface Props {
+  disabled: boolean;
+}
+
+const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const { t } = useTranslation();
+
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          setCanUndo(payload);
+
+          return false;
+        },
+        LowPriority
+      ),
+      editor.registerCommand(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          setCanRedo(payload);
+
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, []);
+
+  const undo = (): void => {
+    editor.dispatchCommand(UNDO_COMMAND, undefined);
+  };
+
+  const redo = (): void => {
+    editor.dispatchCommand(REDO_COMMAND, undefined);
+  };
+
+  const translatedUndo = t(labelUndo);
+  const translatedRedo = t(labelRedo);
+
+  return (
+    <>
+      <IconButton
+        ariaLabel={translatedUndo}
+        className={classes.button}
+        disabled={!canUndo || disabled}
+        title={translatedUndo}
+        tooltipPlacement="top"
+        onClick={undo}
+      >
+        <UndoIcon />
+      </IconButton>
+      <IconButton
+        ariaLabel={translatedRedo}
+        className={classes.button}
+        disabled={!canRedo || disabled}
+        title={translatedRedo}
+        tooltipPlacement="top"
+        onClick={redo}
+      >
+        <RedoIcon />
+      </IconButton>
+    </>
+  );
+};
+
+export default UndoRedoButtons;

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -1,62 +1,62 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { Divider } from '@mui/material';
-
-import FormatButtons from './FormatButtons';
-import UndoRedoButtons from './UndoRedoButtons';
-import MacrosButton from './MacrosButton';
-import AlignPicker from './AlignPicker';
-import ListButton from './ListButton';
-import LinkButton from './LinkButton';
-import BlockButtons from './BlockButtons';
-
-interface Props {
-  className?: string;
-  disabled: boolean;
-  displayBlockButtons: boolean;
-  displayMacrosButton?: boolean;
-  editable: boolean;
-}
-
-export const useStyles = makeStyles()((theme) => ({
-  container: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    marginBottom: theme.spacing(1)
-  }
-}));
-
-const ToolbarPlugin = ({
-  editable,
-  displayMacrosButton,
-  disabled,
-  displayBlockButtons,
-  className
-}: Props): JSX.Element | null => {
-  const { cx, classes } = useStyles();
-
-  return editable ? (
-    <div className={cx(classes.container, className)}>
-      <UndoRedoButtons disabled={disabled} />
-      {displayBlockButtons && (
-        <>
-          <Divider flexItem orientation="vertical" />
-          <BlockButtons disabled={disabled} />
-        </>
-      )}
-      <FormatButtons disabled={disabled} />
-      <AlignPicker disabled={disabled} />
-      <ListButton disabled={disabled} />
-      <LinkButton disabled={disabled} />
-      {displayMacrosButton && (
-        <>
-          <Divider flexItem orientation="vertical" />
-          <MacrosButton disabled={disabled} />
-        </>
-      )}
-    </div>
-  ) : null;
-};
-
-export default ToolbarPlugin;
+import { makeStyles } from 'tss-react/mui';
+
+import { Divider } from '@mui/material';
+
+import AlignPicker from './AlignPicker';
+import BlockButtons from './BlockButtons';
+import FormatButtons from './FormatButtons';
+import LinkButton from './LinkButton';
+import ListButton from './ListButton';
+import MacrosButton from './MacrosButton';
+import UndoRedoButtons from './UndoRedoButtons';
+
+interface Props {
+  className?: string;
+  disabled: boolean;
+  displayBlockButtons: boolean;
+  displayMacrosButton?: boolean;
+  editable: boolean;
+}
+
+export const useStyles = makeStyles()((theme) => ({
+  container: {
+    alignItems: 'center',
+    columnGap: theme.spacing(1),
+    display: 'flex',
+    marginBottom: theme.spacing(1)
+  }
+}));
+
+const ToolbarPlugin = ({
+  editable,
+  displayMacrosButton,
+  disabled,
+  displayBlockButtons,
+  className
+}: Props): JSX.Element | null => {
+  const { cx, classes } = useStyles();
+
+  return editable ? (
+    <div className={cx(classes.container, className)}>
+      <UndoRedoButtons disabled={disabled} />
+      {displayBlockButtons && (
+        <>
+          <Divider flexItem orientation="vertical" />
+          <BlockButtons disabled={disabled} />
+        </>
+      )}
+      <FormatButtons disabled={disabled} />
+      <AlignPicker disabled={disabled} />
+      <ListButton disabled={disabled} />
+      <LinkButton disabled={disabled} />
+      {displayMacrosButton && (
+        <>
+          <Divider flexItem orientation="vertical" />
+          <MacrosButton disabled={disabled} />
+        </>
+      )}
+    </div>
+  ) : null;
+};
+
+export default ToolbarPlugin;

package/src/RichTextEditor/translatedLabels.ts

@@ -1,8 +1,8 @@
-export const labelUndo = 'Undo';
-export const labelRedo = 'Redo';
-export const labelInputLink = 'Insert link';
-export const labelSavedLink = 'Saved link';
-export const labelEditLink = 'Edit link';
-export const labelAlignPicker = 'align picker';
-export const labelUnorderedList = 'Unordered List';
-export const labelOrderedList = 'Ordered List';
+export const labelUndo = 'Undo';
+export const labelRedo = 'Redo';
+export const labelInputLink = 'Insert link';
+export const labelSavedLink = 'Saved link';
+export const labelEditLink = 'Edit link';
+export const labelAlignPicker = 'align picker';
+export const labelUnorderedList = 'Unordered List';
+export const labelOrderedList = 'Ordered List';

package/src/Snackbar/SnackbarProvider.tsx

@@ -1,13 +1,12 @@
-import * as React from 'react';
-
 import { SnackbarProvider as NotistackSnackbarProvider } from 'notistack';
 
 import { TransitionProps } from '@mui/material/transitions';
 
+import { JSXElementConstructor, ReactElement } from 'react';
 import Transition from './Transition';
 
 interface Props {
-  children: React.ReactElement;
+  children: ReactElement;
   maxSnackbars?: number;
 }
 
@@ -18,7 +17,7 @@ const SnackbarProvider = ({
   return (
     <NotistackSnackbarProvider
       TransitionComponent={
-        Transition as React.JSXElementConstructor<
+        Transition as JSXElementConstructor<
           TransitionProps & {
             children;
           }

package/src/Snackbar/Transition.tsx

@@ -1,11 +1,10 @@
-import * as React from 'react';
-
 import {
-  TransitionProps as _TransitionProps,
-  TransitionActions
+  TransitionActions,
+  TransitionProps as _TransitionProps
 } from 'react-transition-group/Transition';
 
 import { Fade } from '@mui/material';
+import { CSSProperties, ReactNode } from 'react';
 
 type TransitionHandlerKeys =
   | 'onEnter'
@@ -24,11 +23,11 @@ type TransitionKeys =
 interface TransitionProps
   extends TransitionActions,
     Partial<Pick<_TransitionProps, TransitionKeys>> {
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
 interface Props extends TransitionProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 const Transition = ({ children, ...rest }: Props): JSX.Element => (

package/src/Snackbar/index.tsx

@@ -1,14 +1,13 @@
-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()((theme) => ({
@@ -36,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);
@@ -53,7 +52,7 @@ const Snackbar = React.forwardRef(
 
     const close = (): void => {
       if (not(isNil(timeoutId.current))) {
-        clearTimeout(timeoutId.current as number);
+        clearTimeout(timeoutId.current);
       }
       closeSnackbar(id);
     };

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,6 +1,6 @@
-import { props } from 'ramda';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { props } from 'ramda';
 
 import { useMemoComponent } from '../utils';
 

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,45 +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 {
+  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;
 }
@@ -106,8 +105,8 @@ 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),
@@ -168,7 +167,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
 
   const activeItem = getItemById(activeId) as Record<string, unknown>;
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (not(updateSortableItemsOnItemsChange)) {
       return;
     }

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;