@centreon/ui 24.7.2 → 24.7.4

package/src/Dashboard/Grid.tsx

@@ -1,70 +0,0 @@
-import { useMemo, ReactElement } from 'react';
-
-import { Grid as VisxGrid } from '@visx/visx';
-import { scaleLinear } from '@visx/scale';
-
-import { useTheme } from '@mui/material';
-
-import { useMemoComponent } from '../utils';
-
-import { maxColumns, rowHeight } from './utils';
-
-interface Props {
-  columns: number;
-  height: number;
-  width: number;
-}
-
-const Grid = ({ width, height, columns }: Props): ReactElement => {
-  const theme = useTheme();
-
-  const xScale = useMemo(
-    () =>
-      scaleLinear({
-        domain: [0, maxColumns],
-        range: [0, width]
-      }),
-    [width]
-  );
-
-  const numberOfRows = Math.floor(height / (rowHeight + 16));
-
-  const yScale = useMemo(
-    () =>
-      scaleLinear({
-        domain: [0, numberOfRows],
-        range: [0, height]
-      }),
-    [height]
-  );
-
-  const tick = maxColumns / columns;
-
-  const xTickValues = Array(columns)
-    .fill(0)
-    .map((_, index) => index * tick);
-
-  return useMemoComponent({
-    Component: (
-      <svg style={{ height, position: 'absolute', width }}>
-        <VisxGrid.GridColumns
-          height={height}
-          scale={xScale}
-          stroke={theme.palette.divider}
-          tickValues={xTickValues}
-          width={width}
-        />
-        <VisxGrid.GridRows
-          height={height}
-          scale={yScale}
-          stroke={theme.palette.divider}
-          top={-10}
-          width={width}
-        />
-      </svg>
-    ),
-    memoProps: [height, width, columns]
-  });
-};
-
-export default Grid;

package/src/Dashboard/Item.tsx

@@ -1,151 +0,0 @@
-import {
-  CSSProperties,
-  ForwardedRef,
-  forwardRef,
-  MouseEvent,
-  ReactElement,
-  useEffect,
-  useMemo
-} from 'react';
-
-import { equals, isNil, prop } from 'ramda';
-import { useAtomValue } from 'jotai';
-
-import { Card, useTheme } from '@mui/material';
-
-import { useMemoComponent, useViewportIntersection } from '../utils';
-import LoadingSkeleton from '../LoadingSkeleton';
-
-import { useDashboardItemStyles } from './Dashboard.styles';
-import { isResizingItemAtom } from './atoms';
-
-interface DashboardItemProps {
-  additionalMemoProps?: Array<unknown>;
-  canMove?: boolean;
-  children: ReactElement;
-  className?: string;
-  disablePadding?: boolean;
-  header?: ReactElement;
-  id: string;
-  onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
-  onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
-  onTouchEnd?: (e) => void;
-  style?: CSSProperties;
-}
-
-const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
-  (
-    {
-      children,
-      style,
-      className,
-      header,
-      onMouseDown,
-      onMouseUp,
-      onTouchEnd,
-      id,
-      disablePadding = false,
-      canMove = false,
-      additionalMemoProps = []
-    }: DashboardItemProps,
-    ref: ForwardedRef<HTMLDivElement>
-  ): ReactElement => {
-    const { isInViewport, setElement } = useViewportIntersection({
-      rootMargin: '140px 0px 140px 0px'
-    });
-    const hasHeader = !isNil(header);
-
-    const { classes, cx } = useDashboardItemStyles({ hasHeader });
-    const theme = useTheme();
-
-    const isResizingItem = useAtomValue(isResizingItemAtom);
-
-    const isResizing = useMemo(
-      () => equals(id, isResizingItem),
-      [isResizingItem, id]
-    );
-
-    const sanitizedReactGridLayoutClassName = useMemo(
-      () => (isResizing ? className : className?.replace(' resizing ', '')),
-      [className, isResizing]
-    );
-
-    const listeners = {
-      onMouseDown,
-      onMouseUp,
-      onTouchEnd
-    };
-
-    const cardContainerListeners = !hasHeader ? listeners : {};
-
-    useEffect(() => {
-      if (isNil(ref)) {
-        return;
-      }
-
-      setElement(ref.current);
-    }, [ref]);
-
-    return useMemoComponent({
-      Component: (
-        <div
-          {...cardContainerListeners}
-          className={sanitizedReactGridLayoutClassName}
-          ref={ref}
-          style={{
-            ...style,
-            width: `calc(${prop('width', style) || '0px'} - 12px)`
-          }}
-        >
-          <Card
-            className={classes.widgetContainer}
-            data-padding={!disablePadding}
-          >
-            {header && (
-              <div className={classes.widgetHeader} data-canMove={canMove}>
-                {canMove && (
-                  <div
-                    {...listeners}
-                    className={classes.widgetHeaderDraggable}
-                    data-testid={`${id}_move_panel`}
-                  />
-                )}
-                {header}
-              </div>
-            )}
-            <div
-              className={cx(
-                classes.widgetContent,
-                !disablePadding && classes.widgetPadding
-              )}
-            >
-              {!isInViewport ? (
-                <LoadingSkeleton
-                  animation={false}
-                  data-widget-skeleton={id}
-                  height="100%"
-                  width="100%"
-                />
-              ) : (
-                children
-              )}
-            </div>
-          </Card>
-        </div>
-      ),
-      memoProps: isInViewport
-        ? [
-            style,
-            className,
-            header,
-            theme.palette.mode,
-            canMove,
-            isInViewport,
-            ...additionalMemoProps
-          ]
-        : [isInViewport, theme.palette.mode, style]
-    });
-  }
-);
-
-export default Item;

package/src/Dashboard/Layout.tsx

@@ -1,95 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { useSetAtom } from 'jotai';
-import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
-import 'react-grid-layout/css/styles.css';
-
-import {
-  Responsive as ResponsiveHeight,
-  ParentSize,
-  useMemoComponent
-} from '..';
-
-import { useDashboardLayoutStyles } from './Dashboard.styles';
-import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
-import Grid from './Grid';
-import { isResizingItemAtom } from './atoms';
-
-const ReactGridLayout = WidthProvider(GridLayout);
-
-interface DashboardLayoutProps<T> {
-  additionalMemoProps?: Array<unknown>;
-  changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<JSX.Element>;
-  displayGrid?: boolean;
-  isStatic?: boolean;
-  layout: Array<T>;
-}
-
-const DashboardLayout = <T extends Layout>({
-  children,
-  changeLayout,
-  displayGrid,
-  layout,
-  isStatic = false,
-  additionalMemoProps = []
-}: DashboardLayoutProps<T>): JSX.Element => {
-  const { classes } = useDashboardLayoutStyles(isStatic);
-
-  const [columns, setColumns] = useState(getColumnsFromScreenSize());
-
-  const setIsResizingItem = useSetAtom(isResizingItemAtom);
-
-  const resize = (): void => {
-    setColumns(getColumnsFromScreenSize());
-  };
-
-  const startResize = useCallback((_, __, newItem: T) => {
-    setIsResizingItem(newItem.i);
-  }, []);
-
-  const stopResize = useCallback(() => {
-    setIsResizingItem(null);
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener('resize', resize);
-
-    return (): void => {
-      window.removeEventListener('resize', resize);
-    };
-  }, []);
-
-  return useMemoComponent({
-    Component: (
-      <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]
-  });
-};
-
-export default DashboardLayout;

package/src/Dashboard/atoms.ts

@@ -1,3 +0,0 @@
-import { atom } from 'jotai';
-
-export const isResizingItemAtom = atom<string | null>(null);

package/src/Dashboard/index.tsx

@@ -1,9 +0,0 @@
-import Layout from './Layout';
-import Item from './Item';
-
-export * from './utils';
-
-export const DashboardLayout = {
-  Item,
-  Layout
-};

package/src/Dashboard/utils.ts

@@ -1,28 +0,0 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-const minColumns = 1;
-const breakpoint = 768;
-
-export const rowHeight = 64;
-export const maxColumns = 12;
-
-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/Form/Form.cypress.spec.tsx

@@ -1,133 +0,0 @@
-import { object } from 'yup';
-import { faker } from '@faker-js/faker';
-import { useFormikContext } from 'formik';
-
-import { Typography } from '@mui/material';
-
-import { Button } from '../components';
-
-import { Form } from './Form';
-import { InputType } from './Inputs/models';
-
-faker.seed(42);
-
-const AddItem = ({ addItem }: { addItem: (item) => void }): JSX.Element => {
-  const { values } = useFormikContext();
-  const add = (): void => {
-    addItem({
-      alias: faker.company.name(),
-      id: values.list.length,
-      name: faker.person.firstName()
-    });
-  };
-
-  return (
-    <Button variant="ghost" onClick={add}>
-      Add item
-    </Button>
-  );
-};
-
-const SortContent = ({
-  name,
-  alias
-}: {
-  alias: string;
-  name: string;
-}): JSX.Element => (
-  <Typography>
-    {name} ({alias})
-  </Typography>
-);
-
-const initializeFormList = (): void => {
-  cy.mount({
-    Component: (
-      <Form
-        initialValues={{
-          list: []
-        }}
-        inputs={[
-          {
-            fieldName: 'list',
-            group: '',
-            label: '',
-            list: {
-              AddItem,
-              SortContent,
-              addItemLabel: 'Add an item to the list',
-              itemProps: ['id', 'name', 'alias'],
-              sortLabel: 'Sort items'
-            },
-            type: InputType.List
-          }
-        ]}
-        submit={cy.stub()}
-        validationSchema={object()}
-      />
-    )
-  });
-};
-
-describe('Form list', () => {
-  beforeEach(initializeFormList);
-
-  it('adds an element to the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Christelle (Schinner - Wiegand)').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('sorts elements in the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
-    cy.findByLabelText('sort-1').should('be.visible');
-    cy.findByLabelText('delete-1').should('be.visible');
-    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
-
-    cy.moveSortableElementUsingAriaLabel({
-      ariaLabel: 'sort-0',
-      direction: 'down'
-    });
-
-    cy.contains('Carley (Satterfield, Miller and Metz)').should('be.visible');
-    cy.contains('Anderson (Crist - Bradtke)').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('removes an element from the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Lea (Streich - Hartmann)').should('be.visible');
-    cy.findByLabelText('sort-1').should('be.visible');
-    cy.findByLabelText('delete-1').should('be.visible');
-    cy.contains('Akeem (Quigley LLC)').should('be.visible');
-
-    cy.findByLabelText('delete-0').click();
-
-    cy.contains('Lea (Streich - Hartmann)').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Form/Form.styles.ts

@@ -1,11 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2)
-  }
-}));
-
-export { useStyles };

package/src/Form/Inputs/Checkbox.tsx

@@ -1,57 +0,0 @@
-import { ChangeEvent } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { path, split } from 'ramda';
-
-import { Box } from '@mui/material';
-
-import { Checkbox as CheckboxComponent } from '../../Checkbox';
-import { useMemoComponent } from '../..';
-
-import { InputPropsWithoutGroup } from './models';
-
-const Checkbox = ({
-  checkbox,
-  fieldName,
-  getDisabled,
-  hideInput,
-  dataTestId
-}: InputPropsWithoutGroup): JSX.Element => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
-
-  const fieldNamePath = split('.', fieldName);
-
-  const value = path(fieldNamePath, values);
-
-  const disabled = getDisabled?.(values) || false;
-  const hideCheckbox = hideInput?.(values) || false;
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const newValue = {
-      ...value,
-      checked: event.target.checked,
-      label: event.target.id
-    };
-
-    setFieldValue(fieldName, newValue);
-  };
-
-  return useMemoComponent({
-    Component: hideCheckbox ? (
-      <Box />
-    ) : (
-      <CheckboxComponent
-        Icon={value?.Icon}
-        checked={value?.checked}
-        dataTestId={dataTestId || ''}
-        disabled={disabled}
-        label={value?.label}
-        labelPlacement={checkbox?.labelPlacement || 'end'}
-        onChange={handleChange}
-      />
-    ),
-    memoProps: [value, disabled, hideCheckbox]
-  });
-};
-
-export default Checkbox;

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -1,76 +0,0 @@
-import { ChangeEvent, useEffect } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split } from 'ramda';
-
-import { Box, Typography } from '@mui/material';
-
-import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
-import { useMemoComponent } from '../..';
-
-import { InputPropsWithoutGroup } from './models';
-
-const CheckboxGroup = ({
-  checkbox,
-  fieldName,
-  additionalLabel,
-  getDisabled,
-  hideInput,
-  dataTestId
-}: InputPropsWithoutGroup): JSX.Element => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
-
-  const fieldNamePath = split('.', fieldName);
-
-  const value = path(fieldNamePath, values);
-
-  const disabled = getDisabled?.(values) || false;
-  const hideCheckbox = hideInput?.(values) || false;
-
-  useEffect(() => {
-    if (!disabled && !hideCheckbox) {
-      return;
-    }
-    const resetedValue = value?.map((element) => ({
-      ...element,
-      checked: false
-    }));
-    setFieldValue(fieldName, resetedValue);
-  }, [disabled, hideCheckbox]);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const label = event.target.id;
-    if (!includes(label, value)) {
-      setFieldValue(fieldName, [...value, label]);
-
-      return;
-    }
-
-    setFieldValue(
-      fieldName,
-      value?.filter((elm) => !equals(elm, label))
-    );
-  };
-
-  return useMemoComponent({
-    Component: hideCheckbox ? (
-      <Box />
-    ) : (
-      <Box>
-        {additionalLabel && <Typography>{additionalLabel}</Typography>}
-        <CheckboxGroupComponent
-          dataTestId={dataTestId || ''}
-          direction={checkbox?.direction}
-          disabled={disabled}
-          labelPlacement={checkbox?.labelPlacement || 'end'}
-          options={checkbox?.options as Array<string>}
-          values={value}
-          onChange={handleChange}
-        />
-      </Box>
-    ),
-    memoProps: [value, disabled, hideCheckbox]
-  });
-};
-
-export default CheckboxGroup;

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

@@ -1,62 +0,0 @@
-import { ReactNode } from 'react';
-
-import { DraggableSyntheticListeners } from '@dnd-kit/core';
-
-import KrilinIndicatorIcon from '@mui/icons-material/DragIndicator';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-
-import { IconButton } from '../../../components';
-
-import { useListStyles } from './List.styles';
-
-export interface ContentProps {
-  attributes;
-  children: ReactNode;
-  deleteItem: (id: string) => () => void;
-  id: string;
-  isDragging: boolean;
-  isInDragOverlay?: boolean;
-  itemRef: React.RefObject<HTMLDivElement>;
-  listeners: DraggableSyntheticListeners;
-  name: string;
-  style;
-}
-
-const Content = ({
-  listeners,
-  itemRef,
-  attributes,
-  style,
-  isDragging,
-  id,
-  children,
-  deleteItem
-}: ContentProps): JSX.Element => {
-  const { classes } = useListStyles();
-
-  return (
-    <div
-      className={classes.content}
-      ref={itemRef}
-      {...attributes}
-      style={style}
-    >
-      <IconButton
-        data-dragging={isDragging}
-        size="small"
-        {...listeners}
-        aria-label={`sort-${id}`}
-        icon={<KrilinIndicatorIcon fontSize="small" />}
-      />
-      <div className={classes.innerContent}>{children}</div>
-      <IconButton
-        aria-label={`delete-${id}`}
-        icon={<DeleteOutlineIcon color="error" fontSize="small" />}
-        size="small"
-        onClick={deleteItem(id)}
-      />
-    </div>
-  );
-};
-
-export default Content;