@centreon/ui 24.7.2 → 24.7.4

package/src/components/Tabs/Tabs.tsx

@@ -1,55 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { TabContext, TabList, TabListProps } from '@mui/lab';
-import { Tab } from '@mui/material';
-
-import { useTabsStyles } from './Tab.styles';
-
-type Props = {
-  children: Array<JSX.Element>;
-  defaultTab: string;
-  tabList?: TabListProps;
-  tabs: Array<{
-    label: string;
-    value: string;
-  }>;
-};
-
-export const Tabs = ({
-  children,
-  defaultTab,
-  tabs,
-  tabList
-}: Props): JSX.Element => {
-  const { classes } = useTabsStyles();
-
-  const [selectedTab, setSelectedTab] = useState(defaultTab);
-
-  const changeTab = useCallback((_, newValue: string): void => {
-    setSelectedTab(newValue);
-  }, []);
-
-  return (
-    <TabContext value={selectedTab}>
-      <TabList
-        classes={{
-          indicator: classes.indicator,
-          root: classes.tabs
-        }}
-        onChange={changeTab}
-        {...tabList}
-      >
-        {tabs.map(({ value, label }) => (
-          <Tab
-            aria-label={label}
-            className={classes.tab}
-            key={value}
-            label={label}
-            value={value}
-          />
-        ))}
-      </TabList>
-      {children}
-    </TabContext>
-  );
-};

package/src/components/Tabs/index.ts

@@ -1,6 +0,0 @@
-import { TabPanel } from './TabPanel';
-import { Tabs as TabsRoot } from './Tabs';
-
-export const Tabs = Object.assign(TabsRoot, {
-  TabPanel
-});

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx

@@ -1,62 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Delete as DeleteIcon, Save as SaveIcon } from '@mui/icons-material';
-
-import { IconButton } from '../..';
-
-import { ConfirmationTooltip } from './ConfirmationTooltip';
-
-const meta: Meta<typeof ConfirmationTooltip> = {
-  component: ConfirmationTooltip
-};
-
-export default meta;
-type Story = StoryObj<typeof ConfirmationTooltip>;
-
-export const Default: Story = {
-  args: {
-    children: ({ toggleTooltip }) => (
-      <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
-    ),
-    labels: {
-      cancel: 'Cancel',
-      confirm: {
-        label: 'Save'
-      }
-    },
-    onConfirm: () => undefined
-  }
-};
-
-export const WithConfirmVariant: Story = {
-  args: {
-    children: ({ toggleTooltip }) => (
-      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
-    ),
-    confirmVariant: 'error',
-    labels: {
-      cancel: 'Cancel',
-      confirm: {
-        label: 'Delete'
-      }
-    },
-    onConfirm: () => undefined
-  }
-};
-
-export const WithSecondaryLabel: Story = {
-  args: {
-    children: ({ toggleTooltip }) => (
-      <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
-    ),
-    confirmVariant: 'error',
-    labels: {
-      cancel: 'Cancel',
-      confirm: {
-        label: 'Delete',
-        secondaryLabel: 'This action will delete the current item'
-      }
-    },
-    onConfirm: () => undefined
-  }
-};

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.styles.tsx

@@ -1,22 +0,0 @@
-import { equals } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-export const useStyles = makeStyles()((theme) => ({
-  list: {
-    padding: 0
-  },
-  paper: {
-    backgroundColor: equals(theme.palette.mode, ThemeMode.dark)
-      ? theme.palette.background.widget
-      : theme.palette.background.default,
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[3],
-    marginLeft: theme.spacing(2),
-    maxWidth: '350px'
-  },
-  popper: {
-    zIndex: theme.zIndex.tooltip + 1
-  }
-}));

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -1,68 +0,0 @@
-import { MouseEvent, useState } from 'react';
-
-import { ClickAwayListener, Box, Popper } from '@mui/material';
-
-import TooltipContent from './TooltipContent';
-import { Props } from './models';
-import { useStyles } from './ConfirmationTooltip.styles';
-
-export const ConfirmationTooltip = ({
-  children,
-  labels,
-  onConfirm,
-  confirmVariant
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const [anchorElement, setAnchorElement] = useState<
-    HTMLButtonElement | undefined
-  >(undefined);
-
-  const close = (): void => {
-    setAnchorElement(undefined);
-  };
-
-  const open = (event: MouseEvent<HTMLButtonElement>): void => {
-    setAnchorElement(event.currentTarget);
-  };
-
-  const confirm = (): void => {
-    close();
-    onConfirm();
-  };
-
-  const actions = [
-    {
-      action: close,
-      label: labels.cancel
-    },
-    {
-      action: confirm,
-      label: labels.confirm.label,
-      secondaryLabel: labels.confirm.secondaryLabel,
-      variant: confirmVariant
-    }
-  ];
-
-  const isOpen = Boolean(anchorElement);
-
-  return (
-    <ClickAwayListener onClickAway={close}>
-      <div>
-        {children({ isOpen, toggleTooltip: isOpen ? close : open })}
-        <Popper
-          anchorEl={anchorElement}
-          className={classes.popper}
-          open={isOpen}
-          popperOptions={{
-            placement: 'bottom-start'
-          }}
-        >
-          <Box className={classes.paper}>
-            <TooltipContent actions={actions} />
-          </Box>
-        </Popper>
-      </div>
-    </ClickAwayListener>
-  );
-};

package/src/components/Tooltip/ConfirmationTooltip/TooltipContent.tsx

@@ -1,31 +0,0 @@
-import { ActionVariants } from '../../../ActionsList/models';
-import { ActionsList } from '../../..';
-
-import { useStyles } from './ConfirmationTooltip.styles';
-
-interface Props {
-  actions: Array<{
-    action: () => void;
-    label: string;
-    secondaryLabel?: string;
-    variant?: ActionVariants;
-  }>;
-}
-
-const TooltipContent = ({ actions }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  return (
-    <ActionsList
-      actions={actions.map(({ label, action, variant, secondaryLabel }) => ({
-        label,
-        onClick: action,
-        secondaryLabel,
-        variant
-      }))}
-      className={classes.list}
-    />
-  );
-};
-
-export default TooltipContent;

package/src/components/Tooltip/ConfirmationTooltip/index.ts

@@ -1 +0,0 @@
-export * from './ConfirmationTooltip';

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -1,18 +0,0 @@
-import { ReactElement } from 'react';
-
-import { ActionVariants } from '../../../ActionsList/models';
-
-interface Labels {
-  cancel: string;
-  confirm: {
-    label: string;
-    secondaryLabel?: string;
-  };
-}
-
-export interface Props {
-  children: ({ toggleTooltip, isOpen }) => ReactElement;
-  confirmVariant?: ActionVariants;
-  labels: Labels;
-  onConfirm: () => void;
-}

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.stories.tsx

@@ -1,70 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useEffect, useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-
-import { TextOverflowTooltip } from './TextOverflowTooltip';
-
-const meta: Meta<typeof TextOverflowTooltip> = {
-  args: {},
-  component: TextOverflowTooltip,
-  parameters: {
-    layout: 'centered'
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof TextOverflowTooltip>;
-
-export const Default: Story = {
-  args: {
-    label:
-      'Qui deserunt pariatur quis. Duis nisi velit culpa labore ipsum reprehenderit sunt laborum anim sint quis magna consequat amet. Voluptate tempor nostrud eiusmod enim qui reprehenderit.'
-  },
-  render: ({ label, ...args }) => {
-    const [labelValue, setLabelValue] = useState(label);
-    useEffect(() => setLabelValue(label), [label]);
-
-    return (
-      <TextOverflowTooltip {...args} data-testid="tooltip" label={labelValue}>
-        <p
-          data-testid="paragraph"
-          style={{
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            width: '40vw'
-          }}
-        >
-          {labelValue}
-        </p>
-      </TextOverflowTooltip>
-    );
-  }
-};
-
-export const AsMultiLine: Story = {
-  args: {
-    ...Default.args
-  },
-  render: ({ label, ...args }) => {
-    const [labelValue, setLabelValue] = useState(label);
-    useEffect(() => setLabelValue(label), [label]);
-
-    return (
-      <TextOverflowTooltip {...args} label={labelValue}>
-        <p
-          style={{
-            WebkitBoxOrient: 'vertical',
-            WebkitLineClamp: '2',
-            display: '-webkit-box',
-            overflow: 'hidden',
-            width: '40vw'
-          }}
-        >
-          {labelValue}
-        </p>
-      </TextOverflowTooltip>
-    );
-  }
-};

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.styles.ts

@@ -1,5 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(() => ({
-  textOverflowTooltip: {}
-}));

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.tsx

@@ -1,115 +0,0 @@
-import { ReactElement, useCallback, useEffect, useRef } from 'react';
-
-import { atom, useAtom } from 'jotai';
-
-import { Tooltip, TooltipProps } from '../Tooltip';
-import { useResizeObserver } from '../../../utils/useResizeObserver';
-
-import { useStyles } from './TextOverflowTooltip.styles';
-
-type TextOverflowTooltipProps = Omit<TooltipProps, 'followCursor' | 'hasCaret'>;
-
-/** @description
- * This component is used to display a tooltip when the text is too long, and displays the full text on hover.
- *
- * It's up to the child component to define it's `width` / `max-width`, and ellipsis.
- *
- * For single lines use :
- * ```
- *  width: var(--width-of-the-text);
- *  white-space: nowrap;
- * ```
- *
- * For multi-lines use :
- * ```
- *  width: var(--width-of-the-text);
- *  display: -webkit-box;
- *  -webkit-box-orient: vertical;
- *  -webkit-line-clamp: var(--max-lines-of-the-text);
- * ```
- */
-
-const TextOverflowTooltip = ({
-  children,
-  label,
-  position = 'bottom',
-  isOpen,
-  ...tooltipProps
-}: TextOverflowTooltipProps): ReactElement => {
-  const { classes } = useStyles();
-
-  const stateAtom = useRef(
-    atom<{
-      hasOverflow: boolean;
-      isOpen: boolean;
-    }>({ hasOverflow: false, isOpen: false })
-  ).current;
-
-  const [state, setState] = useAtom(stateAtom);
-
-  const onMouseEnter = useCallback(
-    () =>
-      state.hasOverflow &&
-      setState({
-        ...state,
-        isOpen: true
-      }),
-    [state.hasOverflow]
-  );
-
-  const onMouseLeave = useCallback(
-    () =>
-      state.hasOverflow &&
-      setState({
-        ...state,
-        isOpen: false
-      }),
-    [state.hasOverflow]
-  );
-
-  const elRef = useRef<HTMLDivElement>(null);
-
-  const onResize = (): void => {
-    const { firstElementChild: el } = elRef.current || {};
-    if (el instanceof HTMLElement) {
-      setState({
-        ...state,
-        hasOverflow:
-          el.scrollWidth > el.offsetWidth || el.scrollHeight > el.offsetHeight
-      });
-    }
-  };
-
-  useResizeObserver({
-    onResize,
-    ref: elRef
-  });
-
-  useEffect(() => {
-    if (isOpen) setState({ ...state, isOpen });
-    onResize();
-  }, [isOpen, label]);
-
-  return (
-    <Tooltip
-      followCursor
-      hasCaret={false}
-      isOpen={state.isOpen}
-      label={label}
-      position={position}
-      {...tooltipProps}
-    >
-      <div
-        className={classes.textOverflowTooltip}
-        data-has-overflow={state.hasOverflow}
-        ref={elRef}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        {children}
-      </div>
-    </Tooltip>
-  );
-};
-
-export { TextOverflowTooltip };

package/src/components/Tooltip/TextOverflowTooltip/index.tsx

@@ -1 +0,0 @@
-export * from './TextOverflowTooltip';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,41 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Info as InfoIcon } from '@mui/icons-material';
-
-import { Tooltip } from './Tooltip';
-
-const meta: Meta<typeof Tooltip> = {
-  argTypes: {
-    position: {
-      control: {
-        options: ['top', 'bottom', 'left', 'right']
-      }
-    }
-  },
-  component: Tooltip,
-  parameters: {
-    layout: 'centered'
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-
-export const Default: Story = {
-  args: {
-    children: <InfoIcon />,
-    label: 'Tooltip content'
-  }
-};
-
-export const WrappedContent: Story = {
-  args: {
-    children: <InfoIcon />,
-    followCursor: false,
-    hasCaret: true,
-    isOpen: true,
-    label:
-      'Qui deserunt pariatur quis. Duis nisi velit culpa labore ipsum reprehenderit sunt laborum anim sint quis magna consequat amet. Voluptate tempor nostrud eiusmod enim qui reprehenderit.',
-    position: 'right'
-  }
-};

package/src/components/Tooltip/Tooltip.tsx

@@ -1,57 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import {
-  Tooltip as MuiTooltip,
-  TooltipProps as MuiTooltipProps
-} from '@mui/material';
-
-import { AriaLabelingAttributes } from '../../@types/aria-attributes';
-import { DataTestAttributes } from '../../@types/data-attributes';
-
-export type TooltipProps = {
-  children: ReactElement;
-  followCursor?: boolean;
-  hasCaret?: boolean;
-  isOpen?: boolean;
-  label: ReactNode;
-  position?:
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'bottom-end'
-    | 'bottom-start'
-    | 'left-end'
-    | 'left-start'
-    | 'right-end'
-    | 'right-start'
-    | 'top-end'
-    | 'top-start';
-} & AriaLabelingAttributes &
-  DataTestAttributes &
-  Omit<MuiTooltipProps, 'title'>;
-
-const Tooltip = ({
-  children,
-  label,
-  position = 'bottom',
-  followCursor = true,
-  isOpen,
-  hasCaret = false,
-  ...attr
-}: TooltipProps): ReactElement => {
-  return (
-    <MuiTooltip
-      arrow={hasCaret}
-      followCursor={followCursor}
-      open={isOpen}
-      placement={position}
-      title={label}
-      {...attr}
-    >
-      {children}
-    </MuiTooltip>
-  );
-};
-
-export { Tooltip };

package/src/components/Tooltip/index.ts

@@ -1,2 +0,0 @@
-export * from './Tooltip';
-export * from './ConfirmationTooltip';

package/src/components/Zoom/Minimap.tsx

@@ -1,129 +0,0 @@
-import { useMemo } from 'react';
-
-import { scaleLinear } from '@visx/scale';
-
-import { minimapScale, radius } from './constants';
-import { UseMinimapProps, useMinimap } from './useMinimap';
-import { useZoomStyles } from './Zoom.styles';
-
-interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
-  children: JSX.Element;
-  contentClientRect: {
-    height: number;
-    width: number;
-  };
-  diffBetweenContentAndSvg: {
-    left: number;
-    top: number;
-  };
-  id?: number | string;
-  isDraggingFromContainer: boolean;
-}
-
-const Minimap = ({
-  zoom,
-  children,
-  height,
-  width,
-  contentClientRect,
-  isDraggingFromContainer,
-  diffBetweenContentAndSvg,
-  id
-}: Props): JSX.Element => {
-  const { classes } = useZoomStyles();
-
-  const yMinimapScale = useMemo(
-    () => contentClientRect.height / zoom.transformMatrix.scaleY / height,
-    [contentClientRect.height, height]
-  );
-  const xMinimapScale = useMemo(
-    () => contentClientRect.width / zoom.transformMatrix.scaleX / width,
-    [contentClientRect.width, width]
-  );
-
-  const scale = Math.max(yMinimapScale, xMinimapScale);
-  const invertedScale = 1 / scale;
-  const scaleToUse = (invertedScale > 1 ? 1 : invertedScale) || 1;
-
-  const { move, zoomInOut, dragStart, dragEnd } = useMinimap({
-    height,
-    isDraggingFromContainer,
-    minimapScale,
-    scale: (invertedScale > 1 ? 1 : scale) || 1,
-    width,
-    zoom
-  });
-
-  const finalHeight = height;
-  const finalWidth = width;
-
-  const additionalScaleScale = scaleLinear({
-    clamp: true,
-    domain: [contentClientRect.height, 0],
-    range: [0, 0.05]
-  });
-
-  const additionalScale =
-    additionalScaleScale(contentClientRect.height - height) /
-    2 /
-    zoom.transformMatrix.scaleY;
-
-  const translateX = useMemo(
-    () =>
-      -diffBetweenContentAndSvg.left /
-      zoom.transformMatrix.scaleX /
-      minimapScale,
-    [diffBetweenContentAndSvg.left]
-  );
-  const translateY = useMemo(
-    () =>
-      -diffBetweenContentAndSvg.top /
-      zoom.transformMatrix.scaleX /
-      minimapScale,
-    [diffBetweenContentAndSvg.top]
-  );
-
-  return (
-    <g className={classes.minimap} clipPath={`url(#zoom-clip-${id})`}>
-      <rect
-        className={classes.minimapBackground}
-        height={finalHeight}
-        rx={radius}
-        width={finalWidth}
-      />
-      <g
-        className={classes.movingZone}
-        style={{
-          transform: `scale(${scaleToUse - additionalScale}) translate(${translateX}px, ${translateY}px)`
-        }}
-      >
-        {children}
-        <g>
-          <rect
-            className={classes.minimapZoom}
-            fillOpacity={0.2}
-            height={height}
-            rx={radius}
-            transform={zoom.toStringInvert()}
-            width={width}
-          />
-        </g>
-      </g>
-      <rect
-        data-testid="minimap-interaction"
-        fill="transparent"
-        height={finalHeight}
-        rx={radius}
-        width={finalWidth}
-        onMouseDown={dragStart}
-        onMouseEnter={dragStart}
-        onMouseLeave={dragEnd}
-        onMouseMove={move}
-        onMouseUp={dragEnd}
-        onWheel={zoomInOut}
-      />
-    </g>
-  );
-};
-
-export default Minimap;