@centreon/ui 24.10.12 → 24.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.12",
+  "version": "24.11.1",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -18,7 +18,6 @@
     "cypress:run": "cypress run --component --browser=chrome",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
   },
-  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -54,6 +53,8 @@
     "@cypress/webpack-dev-server": "^3.10.1",
     "@faker-js/faker": "^8.4.1",
     "@mdx-js/react": "^3.0.1",
+    "@modern-js/prod-server": "^2.58.1",
+    "@modern-js/storybook": "^2.58.1",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-docs": "^8.2.9",

package/src/Dashboard/Dashboard.styles.ts

@@ -40,7 +40,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         width: theme.spacing(1)
       },
       '& .react-resizable-handle.react-resizable-handle-s': {
-        bottom: 4,
+        bottom: 0,
         cursor: 'ns-resize',
         height: theme.spacing(1),
         left: 0,
@@ -49,7 +49,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         width: `calc(100% - ${theme.spacing(3)})`
       },
       '& .react-resizable-handle.react-resizable-handle-se': {
-        bottom: 4,
+        bottom: 0,
         cursor: 'nwse-resize',
         height: theme.spacing(2),
         right: 0,
@@ -62,8 +62,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
       '& .react-resizable-handle:hover': {
         opacity: 1
       },
-      position: 'relative',
-      height: '100%',
+      position: 'relative'
     }
   })
 );

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -95,7 +95,7 @@ export const normal = DashboardTemplate.bind({});
 
 export const withManyPanels = DashboardTemplate.bind({});
 withManyPanels.args = {
-  layout: generateLayout(100)
+  layout: generateLayout(1000)
 };
 
 export const withItemHeader = DashboardTemplate.bind({});

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactElement, useMemo } from 'react';
+import { ReactElement, useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { Grid as VisxGrid } from '@visx/visx';
@@ -13,15 +13,9 @@ interface Props {
   columns: number;
   height: number;
   width: number;
-  containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-const Grid = ({
-  width,
-  height,
-  columns,
-  containerRef
-}: Props): ReactElement => {
+const Grid = ({ width, height, columns }: Props): ReactElement => {
   const theme = useTheme();
 
   const xScale = useMemo(
@@ -50,19 +44,19 @@ const Grid = ({
     .fill(0)
     .map((_, index) => index * tick);
 
-  const yTickValues = Array(numberOfRows)
-    .fill(0)
-    .map((_, index) => index);
-
   return useMemoComponent({
     Component: (
       <svg style={{ height, position: 'absolute', width }}>
-        <VisxGrid.Grid
-          columnTickValues={xTickValues}
-          rowTickValues={yTickValues}
+        <VisxGrid.GridColumns
+          height={height}
+          scale={xScale}
+          stroke={theme.palette.divider}
+          tickValues={xTickValues}
+          width={width}
+        />
+        <VisxGrid.GridRows
           height={height}
-          yScale={yScale}
-          xScale={xScale}
+          scale={yScale}
           stroke={theme.palette.divider}
           top={-10}
           width={width}

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -6,10 +6,10 @@ import 'react-grid-layout/css/styles.css';
 
 import {
   ParentSize,
+  Responsive as ResponsiveHeight,
   useMemoComponent
 } from '..';
 
-import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import Grid from './Grid';
 import { isResizingItemAtom } from './atoms';
@@ -26,18 +26,6 @@ interface DashboardLayoutProps<T> {
   layout: Array<T>;
 }
 
-const bottom = (layout: Array<Layout>): number => {
-  let max = 0;
-  let bottomY = 0;
-
-  layout.forEach((panel) => {
-    bottomY = panel.y + panel.h;
-    if (bottomY > max) max = bottomY;
-  })
-
-  return max;
-}
-
 const DashboardLayout = <T extends Layout>({
   children,
   changeLayout,
@@ -46,8 +34,6 @@ const DashboardLayout = <T extends Layout>({
   isStatic = false,
   additionalMemoProps = []
 }: DashboardLayoutProps<T>): JSX.Element => {
-  const dashboardContainerRef = useRef<HTMLDivElement | null>(null);
-
   const { classes } = useDashboardLayoutStyles(isStatic);
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -66,16 +52,6 @@ const DashboardLayout = <T extends Layout>({
     setIsResizingItem(null);
   }, []);
 
-  const containerHeight = useMemo((): number | undefined => {
-      const nbRow = bottom(getLayout(layout));
-      const containerPaddingY = 4
-      return (
-        nbRow * rowHeight +
-        (nbRow - 1) * 20 +
-        containerPaddingY * 2
-      );
-    }, [layout, rowHeight])
-
   useEffect(() => {
     window.addEventListener('resize', resize);
 
@@ -86,36 +62,31 @@ const DashboardLayout = <T extends Layout>({
 
   return useMemoComponent({
     Component: (
-      <Box ref={dashboardContainerRef} sx={{ overflowY: 'auto', overflowX: 'hidden' }}>
-          <ParentSize>
-            {({ width, height }): JSX.Element => (
-              <Box className={classes.container}>
-                {displayGrid && (
-                  <Grid
-                    columns={columns}
-                    height={(containerHeight || 0) > height ? containerHeight : height}
-                    width={width}
-                    containerRef={dashboardContainerRef}
-                  />
-                )}
-                <ReactGridLayout
-                  cols={columns}
-                  containerPadding={[4, 0]}
-                  layout={getLayout(layout)}
-                  margin={[20, 20]}
-                  resizeHandles={['s', 'e', 'se']}
-                  rowHeight={rowHeight}
-                  width={width}
-                  onLayoutChange={changeLayout}
-                  onResizeStart={startResize}
-                  onResizeStop={stopResize}
-                >
-                  {children}
-                </ReactGridLayout>
-              </Box>
-            )}
-          </ParentSize>
-        </Box>
+      <ResponsiveHeight margin={40}>
+        <ParentSize>
+          {({ width, height }): JSX.Element => (
+            <div className={classes.container}>
+              {displayGrid && (
+                <Grid columns={columns} height={height} width={width} />
+              )}
+              <ReactGridLayout
+                cols={columns}
+                containerPadding={[4, 0]}
+                layout={getLayout(layout)}
+                margin={[20, 20]}
+                resizeHandles={['s', 'e', 'se']}
+                rowHeight={rowHeight}
+                width={width}
+                onLayoutChange={changeLayout}
+                onResizeStart={startResize}
+                onResizeStop={stopResize}
+              >
+                {children}
+              </ReactGridLayout>
+            </div>
+          )}
+        </ParentSize>
+      </ResponsiveHeight>
     ),
     memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
   });

package/src/FileDropZone/index.tsx

@@ -30,15 +30,23 @@ interface StylesProps {
 const useStyles = makeStyles<StylesProps>()(
   (theme, { hasCustomDropZoneContent, isDraggingOver }) => ({
     dropzone: {
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.1),
-        boxShadow: theme.shadows[3],
-        cursor: 'pointer'
-      },
-      border: `${theme.spacing(0.3)} dashed ${theme.palette.primary.main}`,
+      '&:hover': hasCustomDropZoneContent
+        ? undefined
+        : {
+            backgroundColor: alpha(theme.palette.primary.main, 0.1),
+            border: `${theme.spacing(0.3)} dashed ${
+              theme.palette.primary.main
+            }`,
+            boxShadow: theme.shadows[3],
+            cursor: 'pointer'
+          },
+      border: `${theme.spacing(0.3)} dashed ${
+        hasCustomDropZoneContent && !isDraggingOver
+          ? 'transparent'
+          : theme.palette.primary.main
+      }`,
       boxShadow: isDraggingOver ? theme.shadows[3] : theme.shadows[0],
-      borderRadius: `${theme.shape.borderRadius}px`,
-      padding: theme.spacing(0.5, 1),
+      padding: hasCustomDropZoneContent ? undefined : theme.spacing(1),
       width: hasCustomDropZoneContent ? '100%' : theme.spacing(50)
     },
     dropzoneInfo: {
@@ -58,7 +66,7 @@ const useStyles = makeStyles<StylesProps>()(
 export type CustomDropZoneContentProps = Pick<
   UseDropzoneState,
   'openFileExplorer'
-> & { files: FileList | null; label?: string };
+>;
 
 interface Props {
   CustomDropZoneContent?: ({
@@ -71,7 +79,6 @@ interface Props {
   maxFileSize?: number;
   multiple?: boolean;
   resetFilesStatusAndUploadData: () => void;
-  label?: string;
 }
 
 const getExtensions = cond([
@@ -108,8 +115,7 @@ const Dropzone = ({
   accept,
   CustomDropZoneContent,
   maxFileSize,
-  className,
-  label
+  className
 }: Props): JSX.Element => {
   const hasCustomDropZoneContent = !isNil(CustomDropZoneContent);
   const {
@@ -139,29 +145,25 @@ const Dropzone = ({
       <div>
         <Box
           className={cx(classes.dropzone, className)}
-          onClick={openFileExplorer}
+          onClick={!hasCustomDropZoneContent ? openFileExplorer : undefined}
           onDragLeave={dragOver(false)}
           onDragOver={dragOver(true)}
           onDrop={dropFiles}
         >
           <div className={classes.dropzoneInfo}>
             {hasCustomDropZoneContent ? (
-              <CustomDropZoneContent
-                openFileExplorer={openFileExplorer}
-                files={files}
-                label={label}
-              />
+              <CustomDropZoneContent openFileExplorer={openFileExplorer} />
             ) : (
-              <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+              <>
                 <PostAddIcon color="primary" fontSize="large" />
                 <Typography>
                   {t(labelDropOr)} {t(labelSelectAFile)}
                 </Typography>
-              </Box>
+              </>
             )}
             <input
               accept={accept}
-              aria-label={t(labelSelectAFile)}
+              aria-label={t(labelSelectAFile) || ''}
               className={classes.input}
               multiple={multiple}
               ref={fileInputRef}

package/src/Form/CollapsibleGroup.tsx

@@ -43,8 +43,7 @@ const useStyles = makeStyles()((theme) => ({
   },
   tooltip: {
     maxWidth: theme.spacing(60)
-  },
-  title: {}
+  }
 }));
 
 const CollapsibleGroup = ({
@@ -98,7 +97,7 @@ const CollapsibleGroup = ({
           <div className={classes.groupTitleIcon}>
             <Typography
               className="groupText"
-              variant="h6"
+              variant="h5"
               {...group?.titleAttributes}
             >
               {t(group?.name as string)}

package/src/Form/Form.cypress.spec.tsx

@@ -131,42 +131,3 @@ describe('Form list', () => {
     cy.makeSnapshot();
   });
 });
-
-const initializeFile = (): void => {
-  cy.mount({
-    Component: (
-      <Form
-        initialValues={{
-          list: []
-        }}
-        inputs={[
-          {
-            fieldName: 'file',
-            group: '',
-            label: 'json',
-            type: InputType.File,
-            file: {
-              accept: '.json'
-            }
-          }
-        ]}
-        submit={cy.stub()}
-        validationSchema={object()}
-      />
-    )
-  });
-};
-
-describe('File', () => {
-  it('uploads a file when a file is selected', () => {
-    initializeFile();
-
-    cy.contains('Drop or select a file').should('be.visible');
-    cy.findByLabelText('select a file').selectFile('package.json', {
-      force: true
-    });
-    cy.contains('package.json').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Form/Form.tsx

@@ -68,7 +68,6 @@ const Form = <T extends object>({
 
   return (
     <Formik<T>
-      enableReinitialize
       initialValues={initialValues}
       validate={validate}
       validationSchema={validationSchema}

package/src/Form/Inputs/Autocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isNil, map, not, path, prop, type } from 'ramda';
+import { path, equals, isNil, map, not, prop, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { FormHelperText, Stack } from '@mui/material';
@@ -53,15 +53,7 @@ const Autocomplete = ({
 
   const [inputText, setInputText] = useState('');
 
-  const {
-    values,
-    setFieldValue,
-    setFieldTouched,
-    errors,
-    touched,
-    setValues,
-    setTouched
-  } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, errors } = useFormikContext<FormikValues>();
 
   const isMultiple = equals(inputType, InputType.MultiAutocomplete);
 
@@ -75,20 +67,11 @@ const Autocomplete = ({
     setInputText('');
 
     if (change) {
-      setFieldTouched(fieldName, true, false);
-      change({
-        setFieldValue,
-        value: normalizedNewValues,
-        setFieldTouched,
-        setValues,
-        values,
-        setTouched
-      });
+      change({ setFieldValue, value: normalizedNewValues });
 
       return;
     }
 
-    setFieldTouched(fieldName, true, false);
     setFieldValue(fieldName, normalizedNewValues);
   };
 
@@ -100,10 +83,6 @@ const Autocomplete = ({
   );
 
   const getError = useCallback((): Array<string> | undefined => {
-    if (!path([...fieldName.split('.')], touched)) {
-      return undefined;
-    }
-
     const error = path([...fieldName.split('.')], errors) as
       | Array<string>
       | string
@@ -132,7 +111,7 @@ const Autocomplete = ({
     const filteredError = formattedError?.filter(Boolean);
 
     return (filteredError as Array<string>) || undefined;
-  }, [errors, fieldName, isMultiple, selectedValues, touched]);
+  }, [errors, fieldName, isMultiple, selectedValues]);
 
   const textChange = useCallback(
     (event): void => setInputText(event.target.value),
@@ -188,7 +167,6 @@ const Autocomplete = ({
           value={getValues() ?? null}
           onChange={changeValues}
           onTextChange={textChange}
-          style={{ width: autocomplete?.fullWidth ?? true ? 'auto' : '180px' }}
         />
         {inputErrors && (
           <Stack>
@@ -202,7 +180,6 @@ const Autocomplete = ({
       </div>
     ),
     memoProps: [
-      values,
       getValues(),
       inputErrors,
       additionalLabel,

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
+import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -30,15 +30,8 @@ const ConnectedAutocomplete = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const {
-    values,
-    touched,
-    errors,
-    setFieldValue,
-    setFieldTouched,
-    setValues,
-    setTouched
-  } = useFormikContext<FormikValues>();
+  const { values, touched, errors, setFieldValue, setFieldTouched } =
+    useFormikContext<FormikValues>();
 
   const filterKey = connectedAutocomplete?.filterKey || defaultFilterKey;
 
@@ -65,20 +58,18 @@ const ConnectedAutocomplete = ({
   const changeAutocomplete = useCallback(
     (_, value): void => {
       if (change) {
-        change({
-          setFieldValue,
-          value,
-          setFieldTouched,
-          setValues,
-          values,
-          setTouched
-        });
+        change({ setFieldValue, value });
 
         return;
       }
 
-      setFieldTouched(fieldName, true, false);
       setFieldValue(fieldName, value);
+
+      if (path(fieldNamePath, touched)) {
+        return;
+      }
+
+      setFieldTouched(fieldName, true);
     },
     [fieldName, touched, additionalMemoProps]
   );
@@ -114,7 +105,6 @@ const ConnectedAutocomplete = ({
   const deleteItem = (_, option): void => {
     const newValue = reject(propEq(option.id, 'id'), value);
 
-    setFieldTouched(fieldName, true, false);
     setFieldValue(fieldName, newValue);
   };
 

package/src/Form/Inputs/Grid.tsx

@@ -2,8 +2,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { InputPropsWithoutGroup } from './models';
 
-import { Box, Typography } from '@mui/material';
-import { FormikValues, useFormikContext } from 'formik';
 import { getInput } from '.';
 
 interface StylesProps {
@@ -24,22 +22,13 @@ const useStyles = makeStyles<StylesProps>()(
   })
 );
 
-const Grid = ({
-  grid,
-  hideInput
-}: InputPropsWithoutGroup): JSX.Element | null => {
+const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
   const { classes, cx } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
     gridTemplateColumns: grid?.gridTemplateColumns
   });
 
-  const { values } = useFormikContext<FormikValues>();
-
-  if (hideInput?.(values) ?? false) {
-    return null;
-  }
-
   const className = grid?.className || '';
 
   return (
@@ -47,24 +36,7 @@ const Grid = ({
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 
-        if (field.hideInput?.(values) ?? false) {
-          return null;
-        }
-
-        return (
-          <Box sx={{ width: '100%' }} key={field.fieldName}>
-            {field.additionalLabel && (
-              <Typography
-                sx={{ marginBottom: 0.5, color: 'primary.main' }}
-                className={cx(field?.additionalLabelClassName)}
-                variant="h6"
-              >
-                {field.additionalLabel}
-              </Typography>
-            )}
-            <Input {...field} />
-          </Box>
-        );
+        return <Input key={field.fieldName} {...field} />;
       })}
     </div>
   );

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split, type } from 'ramda';
+import { path, equals, includes, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -26,20 +26,12 @@ const Radio = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
-    useFormikContext<FormikValues>();
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
 
   const changeRadio = (_, value): void => {
     if (includes(value, ['true', 'false'])) {
       if (change) {
-        change({
-          setFieldValue,
-          value: equals(value, 'true'),
-          values,
-          setFieldTouched,
-          setValues,
-          setTouched
-        });
+        change({ setFieldValue, value: equals(value, 'true') });
 
         return;
       }
@@ -50,7 +42,7 @@ const Radio = ({
     }
 
     if (change) {
-      change({ setFieldValue, value, values, setFieldTouched, setValues });
+      change({ setFieldValue, value });
 
       return;
     }

package/src/Form/Inputs/Switch.tsx

@@ -22,19 +22,11 @@ const Switch = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
-    useFormikContext<FormikValues>();
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
 
   const changeSwitchValue = (event: ChangeEvent<HTMLInputElement>): void => {
     if (change) {
-      change({
-        setFieldValue,
-        value: event.target.checked,
-        values,
-        setFieldTouched,
-        setValues,
-        setTouched
-      });
+      change({ setFieldValue, value: event.target.checked });
 
       return;
     }