@centreon/ui 26.5.9 → 26.5.11

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@centreon/ui",
-  "version": "26.5.9",
+  "version": "26.5.11",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
+    "type-check": "tsc --project tsconfig.typecheck.json",
+    "type-check:staged": "node typecheck-staged.mjs",
     "lint": "biome check ./src/ --error-on-warnings",
     "lint:fix": "pnpm lint --fix",
     "lint:ci": "biome ci ./src/ --error-on-warnings",

package/src/@types/globals.d.ts

@@ -1,9 +1,30 @@
 import { FunctionComponent, SVGProps } from 'react';
+import '@testing-library/jest-dom/types/jest';
 
 declare module '*.scss';
 
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+  export const button: string;
+  export const modalBody: string;
+  export const modalHeader: string;
+}
+
 declare module '*.svg' {
   export const ReactComponent: FunctionComponent<
     SVGProps<SVGSVGElement> & { title?: string }
   >;
 }
+
+declare global {
+  // biome-ignore lint/style/noNamespace: required for global JSX type augmentation
+  namespace JSX {
+    type Element = React.JSX.Element;
+    type IntrinsicElements = React.JSX.IntrinsicElements;
+    type ElementClass = React.JSX.ElementClass;
+  }
+  interface Window {
+    Cypress?: { testingType?: string };
+  }
+}

package/src/Colors/index.tsx

@@ -55,7 +55,7 @@ const ContainerDescription = ({
         {toPairs(palette[keyTheme]).map(
           ([key, value]) =>
             !includes(key, keysToRemove) && (
-              <Grid item key={key} size={6}>
+              <Grid key={key} size={6}>
                 <div className={classes.headerContainer}>
                   <Typography variant="h6">{key}</Typography>
                   <Typography variant="button">{value}</Typography>

package/src/Dashboard/Item.tsx

@@ -13,7 +13,6 @@ import {
 
 import ExpandableContainer from '../components/ExpandableContainer';
 import type { Parameters } from '../components/ExpandableContainer/models';
-import LoadingSkeleton from '../LoadingSkeleton';
 import { useMemoComponent, useViewportIntersection } from '../utils';
 import { isResizingItemAtom } from './atoms';
 import { useDashboardItemStyles } from './Dashboard.styles';
@@ -21,7 +20,10 @@ import { useDashboardItemStyles } from './Dashboard.styles';
 interface DashboardItemProps {
   additionalMemoProps?: Array<unknown>;
   canMove?: boolean;
-  children: ReactElement;
+  children: Array<
+    | ReactElement
+    | (({ isInViewport }: { isInViewport: boolean }) => ReactElement)
+  >;
   className?: string;
   disablePadding?: boolean;
   header?: ReactElement | ((params: Parameters) => ReactElement);
@@ -85,7 +87,7 @@ const Item = ({
 
   const newTransform =
     style?.transform &&
-    `translate3d(${style.transform.match(/translate\(([a-z0-9 ,-]+)\)/)[1]}, 0px)`;
+    `translate3d(${style.transform.match(/translate\(([a-z0-9 ,-]+)\)/)?.[1]}, 0px)`;
 
   return useMemoComponent({
     Component: (
@@ -107,10 +109,10 @@ const Item = ({
                   isExpanded,
                   key,
                   label,
-                  ref,
+                  ref: ref as RefObject<HTMLDivElement>,
                   ...rest
                 })
-              : header;
+              : (header as ReactElement);
 
             return (
               <div className={classes.widgetSubContainer} key={key}>
@@ -139,15 +141,10 @@ const Item = ({
                       !disablePadding && classes.widgetPadding
                     )}
                   >
-                    {!isInViewport ? (
-                      <LoadingSkeleton
-                        animation={false}
-                        data-widget-skeleton={id}
-                        height="100%"
-                        width="100%"
-                      />
-                    ) : (
-                      children
+                    {children.map((child) =>
+                      typeof child === 'function'
+                        ? child({ isInViewport })
+                        : child
                     )}
                   </div>
                 </Card>

package/src/Dialog/Duplicate/index.tsx

@@ -38,7 +38,7 @@ const Duplicate = ({
 
   const isConfirmDisabled = or(
     isEmpty(value),
-    Number.parseInt(value, 10) > limit
+    Number.parseInt(value as unknown as string, 10) > limit
   );
 
   return (

package/src/FileDropZone/useDropzone.test.ts

@@ -1,10 +1,8 @@
-import { act, type RenderHookResult, renderHook } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
+import type React from 'react';
 
 import { labelFileTooBig, labelInvalidFileType } from './translatedLabels';
-import useDropzone, {
-  type UseDropzoneProps,
-  type UseDropzoneState
-} from './useDropzone';
+import useDropzone, { type UseDropzoneProps } from './useDropzone';
 
 const mockChangeFiles = jest.fn();
 const mockResetFilesStatusAndUploadData = jest.fn();
@@ -13,10 +11,7 @@ const mockClick = jest.fn();
 const renderUseFileDropzone = ({
   allowedFilesExtensions,
   maxFileSize
-}: Pick<
-  UseDropzoneProps,
-  'allowedFilesExtensions' | 'maxFileSize'
->): RenderHookResult<UseDropzoneProps, UseDropzoneState> =>
+}: Pick<UseDropzoneProps, 'allowedFilesExtensions' | 'maxFileSize'>) =>
   renderHook(() =>
     useDropzone({
       allowedFilesExtensions,
@@ -55,7 +50,9 @@ describe('useDropzone', () => {
     const fileList = createFileList([file]);
 
     act(() => {
-      result.current.handleChangeFiles({ target: { files: fileList } });
+      result.current.handleChangeFiles({
+        target: { files: fileList }
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
     });
 
     expect(mockChangeFiles).toHaveBeenCalledWith(fileList);
@@ -72,10 +69,10 @@ describe('useDropzone', () => {
 
     act(() => {
       result.current.dropFiles({
-        dataTransfer: { files: fileList },
+        dataTransfer: { files: fileList } as unknown as DataTransfer,
         preventDefault: jest.fn(),
         stopPropagation: jest.fn()
-      });
+      } as unknown as React.DragEvent<HTMLInputElement>);
     });
 
     expect(mockChangeFiles).toHaveBeenCalledWith(fileList);
@@ -91,7 +88,9 @@ describe('useDropzone', () => {
     const fileList = createFileList([file]);
 
     act(() => {
-      result.current.handleChangeFiles({ target: { files: fileList } });
+      result.current.handleChangeFiles({
+        target: { files: fileList }
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
     });
 
     expect(mockChangeFiles).toHaveBeenCalledWith(null);
@@ -108,7 +107,9 @@ describe('useDropzone', () => {
     const fileList = createFileList([bigFile]);
 
     act(() => {
-      result.current.handleChangeFiles({ target: { files: fileList } });
+      result.current.handleChangeFiles({
+        target: { files: fileList }
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
     });
 
     expect(mockChangeFiles).toHaveBeenCalledWith(null);
@@ -135,7 +136,9 @@ describe('useDropzone', () => {
     });
 
     act(() => {
-      result.current.fileInputRef.current = { click: mockClick };
+      result.current.fileInputRef.current = {
+        click: mockClick
+      } as unknown as HTMLInputElement;
       result.current.openFileExplorer();
     });
 

package/src/Form/Inputs/Checkbox.tsx

@@ -20,7 +20,9 @@ const Checkbox = ({
 
   const fieldNamePath = split('.', fieldName);
 
-  const value = path(fieldNamePath, values);
+  const value = path(fieldNamePath, values) as
+    | { Icon?: React.ComponentType; checked?: boolean; label?: string }
+    | undefined;
 
   const disabled = getDisabled?.(values) || false;
   const hideCheckbox = hideInput?.(values) || false;
@@ -40,10 +42,11 @@ const Checkbox = ({
       <Box />
     ) : (
       <CheckboxComponent
-        checked={value?.checked}
+        checked={value?.checked ?? false}
         dataTestId={dataTestId || ''}
         disabled={disabled}
-        Icon={value?.Icon}
+        Icon={value?.Icon as Parameters<typeof CheckboxComponent>[0]['Icon']}
+        id={fieldName}
         label={label}
         labelPlacement={checkbox?.labelPlacement || 'end'}
         onChange={handleChange}

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -20,7 +20,7 @@ const CheckboxGroup = ({
 
   const fieldNamePath = split('.', fieldName);
 
-  const value = path(fieldNamePath, values);
+  const value = path(fieldNamePath, values) as Array<string> | undefined;
 
   const disabled = getDisabled?.(values) || false;
   const hideCheckbox = hideInput?.(values) || false;
@@ -29,24 +29,24 @@ const CheckboxGroup = ({
     if (!disabled && !hideCheckbox) {
       return;
     }
-    const resetedValue = value?.map((element) => ({
-      ...element,
+    const resetedValue = (value ?? []).map((element) => ({
+      ...(element as unknown as Record<string, unknown>),
       checked: false
     }));
     setFieldValue(fieldName, resetedValue);
-  }, [disabled, hideCheckbox, fieldName, setFieldValue, value?.map]);
+  }, [disabled, hideCheckbox, fieldName, setFieldValue]);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
     const label = event.target.id;
-    if (!includes(label, value)) {
-      setFieldValue(fieldName, [...value, label]);
+    if (!includes(label, value ?? [])) {
+      setFieldValue(fieldName, [...(value ?? []), label]);
 
       return;
     }
 
     setFieldValue(
       fieldName,
-      value?.filter((elm) => !equals(elm, label))
+      (value ?? []).filter((elm) => !equals(elm, label))
     );
   };
 
@@ -63,7 +63,7 @@ const CheckboxGroup = ({
           labelPlacement={checkbox?.labelPlacement || 'end'}
           onChange={handleChange}
           options={checkbox?.options as Array<string>}
-          values={value}
+          values={value ?? []}
         />
       </Box>
     ),

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -99,7 +99,7 @@ const ConnectedAutocomplete = ({
     [fieldName, touched, additionalMemoProps]
   );
 
-  const blur = (): void => setFieldTouched(fieldName, true);
+  const blur = (): void => void setFieldTouched(fieldName, true);
 
   const isOptionEqualToValue = useCallback(
     (option, value): boolean => {
@@ -110,7 +110,10 @@ const ConnectedAutocomplete = ({
     [filterKey]
   );
 
-  const value = path(fieldNamePath, values);
+  const value = path(fieldNamePath, values) as
+    | Record<string, unknown>
+    | Array<Record<string, unknown>>
+    | undefined;
 
   const error = path(fieldNamePath, touched)
     ? path(fieldNamePath, errors)
@@ -128,7 +131,10 @@ const ConnectedAutocomplete = ({
   );
 
   const deleteItem = (_, option): void => {
-    const newValue = reject(propEq(option.id, 'id'), value);
+    const newValue = reject(
+      propEq(option.id, 'id'),
+      (value ?? []) as Array<Record<string, unknown>>
+    );
 
     setFieldTouched(fieldName, true, false);
     setFieldValue(fieldName, newValue);

package/src/Form/Inputs/FieldsTable/FieldsTable.tsx

@@ -277,7 +277,7 @@ const FieldsTable = ({
         return acc;
       }
 
-      row.priority = index;
+      (row as Record<string, unknown>).priority = index;
 
       return acc;
     }, clone(tableValues));

package/src/Form/Inputs/File.tsx

@@ -32,7 +32,9 @@ const File = ({
 
   const changeFiles = (newFiles: FileList | null): void => {
     if (change) {
-      change({ setFieldTouched, setFieldValue, value: newFiles });
+      change({ setFieldTouched, setFieldValue, value: newFiles } as Parameters<
+        NonNullable<InputPropsWithoutGroup['change']>
+      >[0]);
 
       return;
     }

package/src/Form/Inputs/Grid.tsx

@@ -42,7 +42,7 @@ const Grid = ({
         }
 
         return (
-          <Box key={key} sx={{ width: '100%' }}>
+          <Box key={key as string} sx={{ width: '100%' }}>
             {field.additionalLabel && (
               <Typography
                 className={field?.additionalLabelClassName}

package/src/Form/Inputs/List/List.tsx

@@ -33,15 +33,16 @@ const List = ({
       {sortLabel && <Subtitle>{t(sortLabel)}</Subtitle>}
       <div className={classes.items}>
         <SortableItems
-          Content={(props: Omit<ContentProps, 'children' | 'deleteItem'>) => (
-            <Content {...props} deleteItem={deleteItem}>
-              <SortContent {...props} />
-            </Content>
-          )}
-          // eslint-disable-next-line react/no-unstable-nested-components
+          Content={
+            ((props: Omit<ContentProps, 'children' | 'deleteItem'>) => (
+              <Content {...props} deleteItem={deleteItem}>
+                <SortContent {...(props as Record<string, unknown>)} />
+              </Content>
+            )) as never
+          }
           collisionDetection={closestCenter}
           itemProps={itemProps}
-          items={sortedList}
+          items={sortedList as Array<{ id: string }>}
           onDragEnd={({ items }): void => {
             sortList(items);
           }}

package/src/Form/Inputs/List/useList.ts

@@ -28,10 +28,12 @@ export const useList = ({ fieldName }): UseListState => {
 
   const sortedList = useMemo(
     () =>
-      sortBy(prop('order'), list).map(({ id, ...props }) => ({
-        id: `${id}`,
-        ...props
-      })),
+      sortBy(prop('order') as (a: Record<string, unknown>) => number, list).map(
+        ({ id, ...props }: Record<string, unknown>) => ({
+          id: `${id}`,
+          ...props
+        })
+      ),
     [list]
   );
 
@@ -50,14 +52,18 @@ export const useList = ({ fieldName }): UseListState => {
   };
 
   const deleteItem = (id: string) => (): void => {
-    const newItems = reject((item) => equals(Number(id), item.id))(list);
+    const newItems = reject((item: Record<string, unknown>) =>
+      equals(Number(id), item.id)
+    )(list);
 
     setFieldValue(fieldName, newItems);
   };
 
   const sortList = (items: Array<string>): void => {
     const newOrderedList = items.map((itemId, idx) => {
-      const item = sortedList.find(({ id }) => equals(id, itemId));
+      const item = sortedList.find(({ id }: Record<string, unknown>) =>
+        equals(id, itemId)
+      );
 
       return {
         ...item,

package/src/Form/Inputs/Radio.tsx

@@ -49,7 +49,13 @@ const Radio = ({
     }
 
     if (change) {
-      change({ setFieldTouched, setFieldValue, setValues, value, values });
+      change({
+        setFieldTouched,
+        setFieldValue,
+        setValues,
+        value,
+        values
+      } as Parameters<NonNullable<InputPropsWithoutGroup['change']>>[0]);
 
       return;
     }

package/src/Form/Inputs/Text.tsx

@@ -145,7 +145,7 @@ const Text = ({
           }
         }}
         type={getInputType()}
-        value={value || ''}
+        value={(value || '') as string}
       />
     ),
     memoProps: [

package/src/Form/Inputs/index.tsx

@@ -234,13 +234,18 @@ const Inputs = ({
                         : inputProps.additionalLabel;
 
                     if (isLoading) {
-                      return <LoadingSkeleton input={inputProps} key={key} />;
+                      return (
+                        <LoadingSkeleton
+                          input={inputProps}
+                          key={key as string}
+                        />
+                      );
                     }
 
                     const Input = getInput(inputProps.type);
 
                     return (
-                      <div className={classes.inputWrapper} key={key}>
+                      <div className={classes.inputWrapper} key={key as string}>
                         {inputProps.additionalLabel && (
                           <Typography
                             className={cx(

package/src/Form/storiesData.tsx

@@ -327,9 +327,10 @@ export const basicFormInputs: Array<InputProps> = [
         {
           connectedAutocomplete: {
             additionalConditionParameters: [],
+            customQueryParameters: [],
             endpoint: 'endpoint',
             helperText: 'Hello I am testing'
-          },
+          } as InputProps['connectedAutocomplete'],
           fieldName: 'group',
           label: 'Group (Single connected autocomplete)',
           type: InputType.SingleConnectedAutocomplete
@@ -337,8 +338,9 @@ export const basicFormInputs: Array<InputProps> = [
         {
           connectedAutocomplete: {
             additionalConditionParameters: [],
+            customQueryParameters: [],
             endpoint: 'endpoint'
-          },
+          } as InputProps['connectedAutocomplete'],
           fieldName: 'animals',
           label: 'Animals (Multi connected autocomplete)',
           type: InputType.MultiConnectedAutocomplete
@@ -461,6 +463,7 @@ export const basicFormInputs: Array<InputProps> = [
     fieldName: 'file',
     file: {
       accept: 'image/*',
+      CustomDropZoneContent: ({ files }) => <div>{files?.length} files</div>,
       multiple: true
     },
     group: 'First group',

package/src/Graph/BarChart/Bar.tsx

@@ -1,6 +1,6 @@
-import { ScaleType } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
 import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
+import type { ScaleLinear } from 'd3-scale';
 import { equals } from 'ramda';
 import { ReactElement } from 'react';
 
@@ -16,7 +16,7 @@ interface GetFirstBarHeightProps {
   barWidth: number;
   y: number;
   isFirstBar: boolean;
-  yScale: ScaleType;
+  yScale: ScaleLinear<number, number>;
   neutralValue: number;
 }
 

package/src/Graph/BarChart/BarChart.tsx

@@ -89,6 +89,7 @@ const BarChart = ({
   timeShiftZones,
   annotationEvent
 }: BarChartProps): ReactElement => {
+  // @ts-expect-error - suppressing pre-existing type mismatch
   const { adjustedData } = useChartData({ data, end, max, min, start });
   const { ref, width, height: responsiveHeight } = useResizeObserver();
 
@@ -118,6 +119,7 @@ const BarChart = ({
             boundariesUnit={boundariesUnit}
             end={end}
             graphData={adjustedData}
+            // @ts-expect-error - suppressing pre-existing type mismatch
             graphRef={ref}
             header={header}
             height={height || responsiveHeight || 0}

package/src/Graph/BarChart/BarGroup.tsx

@@ -76,6 +76,7 @@ const BarGroup = ({
     deps: [normalizedTimeSeries],
     variable: keys(omit(['timeTick'], normalizedTimeSeries[0]))
   });
+  // @ts-expect-error - suppressing pre-existing type mismatch
   const sortedLineKeys = lineKeys.sort((lineKeyA: string, lineKeyB: string) => {
     if (lineKeyA.startsWith('stacked-') && !lineKeyB.startsWith('stacked-')) {
       return true;
@@ -139,6 +140,7 @@ const BarGroup = ({
 
   return (
     <BarComponent<TimeValue>
+      // @ts-expect-error - suppressing pre-existing type mismatch
       color={colorScale}
       data={normalizedTimeSeries}
       height={size}
@@ -195,6 +197,7 @@ export default memo(BarGroup, (prevProps, nextProps) => {
   ];
 
   return (
+    // @ts-expect-error - suppressing pre-existing type mismatch
     equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps)) &&
     equals(prevYScale, nextYScale) &&
     equals(prevXScale, nextXScale)

package/src/Graph/BarChart/BarStack.tsx

@@ -131,6 +131,7 @@ export default memo(BarStack, (prevProps, nextProps) => {
       [...prevYScaleDomain, ...prevYScaleRange],
       [...nextYScaleDomain, ...nextYScaleRange]
     ) &&
+    // @ts-expect-error - suppressing pre-existing type mismatch
     equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps))
   );
 });

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -54,6 +54,7 @@ const MemoizedGroup = ({
   }
 
   return (
+    // @ts-expect-error - suppressing pre-existing type mismatch
     <Group left={barGroup.x0} top={barGroup.y0}>
       {barGroup.bars.map((bar) => {
         const isStackedBar = bar.key.startsWith('stacked-');
@@ -74,7 +75,8 @@ const MemoizedGroup = ({
           : (linesBar as Line).unit;
         const yScale =
           unit === '' && yScalesPerUnit[unit] === undefined
-            ? yScalesPerUnit[undefined]
+            ? // @ts-expect-error - suppressing pre-existing type mismatch
+              yScalesPerUnit[undefined]
             : yScalesPerUnit[unit];
 
         return isStackedBar ? (

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -242,17 +242,21 @@ const ResponsiveBarChart = ({
       isHorizontal={isHorizontal}
       legend={{
         displayLegend,
+        // @ts-expect-error - suppressing pre-existing type mismatch
         mode: legend?.mode,
+        // @ts-expect-error - suppressing pre-existing type mismatch
         placement: legend?.placement,
         renderExtraComponent: legend?.renderExtraComponent,
         secondaryClick: legend?.secondaryClick,
         showCalculations: legend?.showCalculations
       }}
+      // @ts-expect-error - suppressing pre-existing type mismatch
       legendRef={legendRef}
       limitLegend={limitLegend}
       lines={linesGraph}
       setLines={setLinesGraph}
       title={title}
+      // @ts-expect-error - suppressing pre-existing type mismatch
       titleRef={titleRef}
     >
       <Tooltip
@@ -274,6 +278,7 @@ const ResponsiveBarChart = ({
         placement="top"
       >
         <div className={classes.tooltipChildren}>
+          {/* @ts-expect-error - suppressing pre-existing type mismatch */}
           <ChartSvgWrapper
             allUnits={allUnits}
             axis={axis}

package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx

@@ -61,13 +61,17 @@ const BarChartTooltip = ({
   const displayHighLightedMetric = gt(filteredMetrics.length, 1);
 
   const sortedMetrics = cond([
+    // @ts-expect-error - suppressing pre-existing type mismatch
     [equals('name'), always(sortBy(path(['metric', 'name']), filteredMetrics))],
+    // @ts-expect-error - suppressing pre-existing type mismatch
     [equals('ascending'), always(sortBy(prop('value'), filteredMetrics))],
     [
       equals('descending'),
+      // @ts-expect-error - suppressing pre-existing type mismatch
       always(reverse(sortBy(prop('value'), filteredMetrics)))
     ],
     [T, always(filteredMetrics)]
+    // @ts-expect-error - suppressing pre-existing type mismatch
   ])(sortOrder);
 
   return (

package/src/Graph/BarStack/Graph.tsx

@@ -89,6 +89,7 @@ const Graph = ({
 
   return (
     <svg height={normalizedHeight} width="100%">
+      {/* @ts-expect-error - suppressing pre-existing type mismatch */}
       <BarStackComponent
         color={colorScale}
         data={[barStackData]}
@@ -135,6 +136,7 @@ const Graph = ({
                       height={bar.height}
                       key={`bar-stack-${barStack.index}-${bar.index}`}
                       left={!isVerticalBar && isFirstBar}
+                      // @ts-expect-error - suppressing pre-existing type mismatch
                       onMouseDown={click}
                       radius={8}
                       right={!isVerticalBar && isLastBar}
@@ -150,6 +152,7 @@ const Graph = ({
                         fill="#000"
                         fontSize={12}
                         fontWeight={600}
+                        // @ts-expect-error - suppressing pre-existing type mismatch
                         onMouseUp={click}
                         textAnchor="middle"
                         verticalAnchor="middle"

package/src/Graph/Chart/BasicComponents/Lines/RegularLines/index.tsx

@@ -126,6 +126,9 @@ export default memo(RegularLine, (prevProps, nextProps) => {
     equals(prevHighlight, nextHighlight) &&
     equals(prevXScaleRange, nextXScaleRange) &&
     equals(prevYScaleDomain, nextYScaleDomain) &&
-    equals(pick(memoizedProps, prevProps), pick(memoizedProps, nextProps))
+    equals(
+      pick(memoizedProps as Array<keyof Props>, prevProps),
+      pick(memoizedProps as Array<keyof Props>, nextProps)
+    )
   );
 });