@centreon/ui 23.10.19 → 23.10.20-MON-18490-widgets.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.19",
+  "version": "23.10.20-MON-18490-widgets.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -89,7 +89,9 @@
     "lexical": "0.8.0",
     "notistack": "^2.0.8",
     "react-transition-group": "^4.4.5",
-    "ulog": "^2.0.0-beta.19"
+    "ulog": "^2.0.0-beta.19",
+    "react-grid-layout": "^1.3.4",
+    "react-resizable": "^3.0.5"
   },
   "peerDependencies": {
     "@centreon/ui-context": "file:../ui-context",
@@ -108,6 +110,7 @@
     "ramda": "0.x",
     "react-i18next": "12.x",
     "react-router-dom": "6.x",
+    "react-scale-text": "1.x",
     "resize-observer-polyfill": "1.x",
     "ts.data.json": "2.x",
     "tss-react": "4.x"

package/src/Button/Icon/index.tsx

@@ -6,7 +6,7 @@ import {
   Tooltip
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 const useStyles = makeStyles()((theme) => ({
   button: {

package/src/Button/Save/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Theme, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import StartIcon from './StartIcon';
 import Content from './Content';

package/src/Dashboard/Dashboard.styles.ts

@@ -0,0 +1,83 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { alpha } from '@mui/material';
+
+export const useDashboardLayoutStyles = makeStyles()((theme) => ({
+  container: {
+    '& .react-grid-item': {
+      borderRadius: theme.shape.borderRadius,
+      transition: theme.transitions.create('all', {
+        delay: 0,
+        duration: 100,
+        easing: theme.transitions.easing.easeOut
+      })
+    },
+    '& .react-grid-item.react-draggable-dragging': {
+      boxShadow: theme.shadows[3]
+    },
+    '& .react-grid-item.react-grid-placeholder': {
+      backgroundColor: alpha(theme.palette.primary.main, 0.7)
+    },
+    '& .react-grid-item.resizing': {
+      boxShadow: theme.shadows[3]
+    },
+    '& .react-resizable-handle': {
+      backgroundColor: theme.palette.action.focus,
+      backgroundImage: 'none',
+      borderRadius: theme.shape.borderRadius,
+      display: 'block',
+      opacity: 0,
+      position: 'absolute'
+    },
+    '& .react-resizable-handle.react-resizable-handle-e': {
+      cursor: 'ew-resize',
+      height: `calc(100% - ${theme.spacing(3)})`,
+      marginTop: 0,
+      right: 0,
+      top: 0,
+      transform: 'rotate(0deg)',
+      width: theme.spacing(1)
+    },
+    '& .react-resizable-handle.react-resizable-handle-s': {
+      bottom: 0,
+      cursor: 'ns-resize',
+      height: theme.spacing(1),
+      left: 0,
+      marginLeft: 0,
+      transform: 'rotate(0deg)',
+      width: `calc(100% - ${theme.spacing(3)})`
+    },
+    '& .react-resizable-handle.react-resizable-handle-se': {
+      bottom: 0,
+      cursor: 'nwse-resize',
+      height: theme.spacing(2),
+      right: 0,
+      transform: 'rotate(0deg)',
+      width: theme.spacing(2)
+    },
+    '& .react-resizable-handle::after': {
+      content: 'none'
+    },
+    '& .react-resizable-handle:hover': {
+      opacity: 1
+    }
+  }
+}));
+
+export const useDashboardItemStyles = makeStyles()((theme) => ({
+  widgetContainer: {
+    height: '100%',
+    width: '100%'
+  },
+  widgetContent: {
+    height: '100%',
+    padding: theme.spacing(1, 2)
+  },
+  widgetHeader: {
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover
+    },
+    cursor: 'move',
+    padding: theme.spacing(0.5, 2)
+  }
+}));

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -0,0 +1,104 @@
+import { ComponentMeta } from '@storybook/react';
+import { Layout } from 'react-grid-layout';
+
+import { Typography } from '@mui/material';
+
+import FluidTypography from '../Typography/FluidTypography';
+
+import { DashboardLayout } from '.';
+
+interface CustomLayout extends Layout {
+  content: string;
+  shouldUseFluidTypography: boolean;
+}
+
+const dashboardLayout: Array<CustomLayout> = [
+  {
+    content: 'Hello world',
+    h: 4,
+    i: 'a',
+    shouldUseFluidTypography: false,
+    w: 6,
+    x: 0,
+    y: 0
+  },
+  {
+    content: 'This is a panel',
+    h: 3,
+    i: 'b',
+    minW: 2,
+    shouldUseFluidTypography: false,
+    w: 7,
+    x: 1,
+    y: 7
+  },
+  {
+    content: 'And the last panel with fluid typography',
+    h: 7,
+    i: 'c',
+    shouldUseFluidTypography: true,
+    w: 6,
+    x: 6,
+    y: 6
+  }
+];
+
+const generateLayout = (maxElements: number): Array<CustomLayout> => {
+  return Array(maxElements)
+    .fill(0)
+    .map((_, i): CustomLayout => {
+      return {
+        content: `${i}`,
+        h: 3,
+        i: i.toString(),
+        shouldUseFluidTypography: false,
+        w: 3,
+        x: (i * 3) % 12,
+        y: Math.floor(i / 12)
+      };
+    });
+};
+
+interface DashboardTemplateProps {
+  header?: JSX.Element;
+  layout?: Array<CustomLayout>;
+}
+
+const Header = (): JSX.Element => (
+  <Typography variant="body2">The title</Typography>
+);
+
+const DashboardTemplate = ({
+  header,
+  layout = dashboardLayout
+}: DashboardTemplateProps): JSX.Element => (
+  <DashboardLayout.Layout<CustomLayout> layout={layout}>
+    {layout.map(({ i, content, shouldUseFluidTypography }) => (
+      <DashboardLayout.Item header={header} key={i}>
+        {shouldUseFluidTypography ? (
+          <FluidTypography text={content} />
+        ) : (
+          <Typography>{content}</Typography>
+        )}
+      </DashboardLayout.Item>
+    ))}
+  </DashboardLayout.Layout>
+);
+
+export default {
+  argTypes: {},
+  component: DashboardTemplate,
+  title: 'Dashboard'
+} as ComponentMeta<typeof DashboardTemplate>;
+
+export const normal = DashboardTemplate.bind({});
+
+export const withManyPanels = DashboardTemplate.bind({});
+withManyPanels.args = {
+  layout: generateLayout(1000)
+};
+
+export const withItemHeader = DashboardTemplate.bind({});
+withItemHeader.args = {
+  header: <Header />
+};

package/src/Dashboard/Grid.tsx

@@ -0,0 +1,70 @@
+import { FC, useMemo } from 'react';
+
+import { Grid as VisxGrid } from '@visx/visx';
+import { scaleLinear } from '@visx/scale';
+
+import { useTheme } from '@mui/material';
+
+import useMemoComponent from '../utils/useMemoComponent';
+
+import { maxColumns, rowHeight } from './utils';
+
+interface Props {
+  columns: number;
+  height: number;
+  width: number;
+}
+
+const Grid: FC<Props> = ({ width, height, columns }) => {
+  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

@@ -0,0 +1,72 @@
+import { CSSProperties, ForwardedRef, MouseEvent, forwardRef } from 'react';
+
+import { isNil } from 'ramda';
+
+import { Card } from '@mui/material';
+
+import useMemoComponent from '../utils/useMemoComponent';
+
+import { useDashboardItemStyles } from './Dashboard.styles';
+
+interface DashboardItemProps {
+  children: JSX.Element;
+  className?: string;
+  header?: JSX.Element;
+  key: string;
+  onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
+  onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
+  onTouchEnd?: (e) => void;
+  style?: CSSProperties;
+}
+
+const Item = forwardRef(
+  (
+    {
+      children,
+      key,
+      style,
+      className,
+      header,
+      onMouseDown,
+      onMouseUp,
+      onTouchEnd
+    }: DashboardItemProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ): JSX.Element => {
+    const { classes } = useDashboardItemStyles();
+
+    const hasHeader = !isNil(header);
+
+    const listeners = {
+      onMouseDown,
+      onMouseUp,
+      onTouchEnd
+    };
+
+    const cardContainerListeners = !hasHeader ? listeners : {};
+
+    return useMemoComponent({
+      Component: (
+        <div
+          className={className}
+          key={key}
+          ref={ref}
+          style={style}
+          {...cardContainerListeners}
+        >
+          <Card className={classes.widgetContainer}>
+            {header && (
+              <div {...listeners} className={classes.widgetHeader}>
+                {header}
+              </div>
+            )}
+            <div className={classes.widgetContent}>{children}</div>
+          </Card>
+        </div>
+      ),
+      memoProps: [key, style, className, header]
+    });
+  }
+);
+
+export default Item;

package/src/Dashboard/Layout.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+
+import { Responsive } from '@visx/visx';
+import GridLayout, { WidthProvider, Layout } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+
+import { Responsive as ResponsiveHeight, useMemoComponent } from '..';
+
+import { useDashboardLayoutStyles } from './Dashboard.styles';
+import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
+import Grid from './Grid';
+
+const ReactGridLayout = WidthProvider(GridLayout);
+
+interface DashboardLayoutProps<T> {
+  changeLayout?: (newLayout: Array<Layout>) => void;
+  children: Array<JSX.Element>;
+  displayGrid?: boolean;
+  layout: Array<T>;
+}
+
+const Layout = <T extends Layout>({
+  children,
+  changeLayout,
+  displayGrid,
+  layout
+}: DashboardLayoutProps<T>): JSX.Element => {
+  const { classes } = useDashboardLayoutStyles();
+
+  const [columns, setColumns] = useState(getColumnsFromScreenSize());
+
+  const resize = (): void => {
+    setColumns(getColumnsFromScreenSize());
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', resize);
+
+    return (): void => {
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return useMemoComponent({
+    Component: (
+      <ResponsiveHeight>
+        <Responsive.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}
+              >
+                {children}
+              </ReactGridLayout>
+            </div>
+          )}
+        </Responsive.ParentSize>
+      </ResponsiveHeight>
+    ),
+    memoProps: [columns, layout, displayGrid]
+  });
+};
+
+export default Layout;

package/src/Dashboard/index.tsx

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

package/src/Dashboard/utils.ts

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

@@ -17,7 +17,7 @@ import { alpha, Box, FormHelperText, Typography } from '@mui/material';
 
 import { userAtom } from '@centreon/ui-context';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import { labelDropOr, labelSelectAFile } from './translatedLabels';
 import useDropzone, { UseDropzoneState } from './useDropzone';

package/src/Form/FormButtons.tsx

@@ -8,7 +8,8 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from '@mui/material';
 
 import SaveButton from '../Button/Save';
-import { useMemoComponent, getNormalizedId } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
+import getNormalizedId from '../utils/getNormalizedId';
 
 import {
   labelReset,

package/src/Form/Inputs/Autocomplete.tsx

@@ -9,7 +9,7 @@ import { FormHelperText, Stack } from '@mui/material';
 import SingleAutocompleteField from '../../InputField/Select/Autocomplete';
 import { labelPressEnterToAccept } from '../translatedLabels';
 import MultiAutocompleteField from '../../InputField/Select/Autocomplete/Multi';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 import { SelectEntry } from '../../InputField/Select';
 
 import { InputPropsWithoutGroup, InputType } from './models';

package/src/Form/Inputs/Radio.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 import { useMemoComponent } from '../..';
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import { InputPropsWithoutGroup } from './models';
 

package/src/Form/Inputs/Switch.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
-import { getNormalizedId } from '../../utils/getNormalizedId';
+import getNormalizedId from '../../utils/getNormalizedId';
 import { useMemoComponent } from '../..';
 
 import { InputPropsWithoutGroup } from './models';

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -16,18 +16,16 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import {
-  useDebounce,
-  useIntersectionObserver,
-  useDeepCompare
-} from '../../../../utils';
+import useIntersectionObserver from '../../../../utils/useIntersectionObserver';
 import { ListingModel, SelectEntry } from '../../../..';
 import Option from '../../Option';
 import {
   ConditionsSearchParameter,
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
+import useDebounce from '../../../../utils/useDebounce';
 import useFetchQuery from '../../../../api/useFetchQuery';
+import { useDeepCompare } from '../../../../utils/useMemoComponent';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
   conditionField?: keyof SelectEntry;

package/src/InputField/Select/Autocomplete/index.stories.tsx

@@ -85,7 +85,7 @@ const AutoSizeAutocompleteField = ({
   endAdornment,
   customPadding
 }: AutoSizeAutocompleteFieldProps): JSX.Element => {
-  const [value, setValue] = React.useState(autoSizeOptions[1]);
+  const [value, setValue] = React.useState(null);
 
   const change = (_, newValue): void => {
     setValue(newValue);
@@ -108,12 +108,3 @@ const AutoSizeAutocompleteField = ({
 export const autoSize = (): JSX.Element => {
   return <AutoSizeAutocompleteField />;
 };
-
-export const autoSizeWithCustomPadding = (): JSX.Element => {
-  return (
-    <AutoSizeAutocompleteField
-      customPadding={5}
-      endAdornment={<EndAdornment />}
-    />
-  );
-};

package/src/InputField/Select/Autocomplete/index.tsx

@@ -20,7 +20,7 @@ import Option from '../Option';
 import TextField from '../../Text';
 import { SelectEntry } from '..';
 import { searchLabel } from '../../translatedLabels';
-import { getNormalizedId } from '../../../utils';
+import getNormalizedId from '../../../utils/getNormalizedId';
 
 export type Props = {
   autoFocus?: boolean;

package/src/InputField/Select/index.tsx

@@ -13,7 +13,7 @@ import {
   Divider
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import Option from './Option';
 

package/src/InputField/Text/index.tsx

@@ -12,7 +12,7 @@ import {
   Typography
 } from '@mui/material';
 
-import { getNormalizedId } from '../../utils';
+import getNormalizedId from '../../utils/getNormalizedId';
 
 import useAutoSize from './useAutoSize';
 

package/src/Listing/ActionBar/index.tsx

@@ -11,7 +11,7 @@ import { userAtom, ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';

package/src/Listing/index.tsx

@@ -31,7 +31,8 @@ import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { useKeyObserver, useMemoComponent } from '../utils';
+import useKeyObserver from '../utils/useKeyObserver';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';

package/src/ListingPage/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 import WithPanel from '../Panel/WithPanel';
 
 import FilterSkeleton from './FilterSkeleton';

package/src/Panel/Memoized.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from 'react';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import Panel, { Props } from '.';
 

package/src/Panel/Section/index.tsx

@@ -6,7 +6,7 @@ import ForwardIcon from '@mui/icons-material/ArrowForwardIos';
 
 import Panel from '..';
 import ContentWithCircularLoading from '../../ContentWithCircularProgress';
-import { useMemoComponent } from '../../utils';
+import useMemoComponent from '../../utils/useMemoComponent';
 
 import ExpandableSection from './ExpandableSection';
 

package/src/SortableItems/SortableItem.tsx

@@ -2,7 +2,7 @@ import { props } from 'ramda';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-import { useMemoComponent } from '../utils';
+import useMemoComponent from '../utils/useMemoComponent';
 
 import Item from './Item';