@centreon/ui 24.4.19 → 24.4.21

package/src/components/Modal/Modal.tsx

@@ -1,79 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { equals } from 'ramda';
-
-import { Dialog as MuiDialog, Slide } from '@mui/material';
-import { Close as CloseIcon } from '@mui/icons-material';
-
-import { AriaLabelingAttributes } from '../../@types/aria-attributes';
-import { IconButton } from '../Button';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalProps = {
-  children: React.ReactNode;
-  fullscreenMargins?: {
-    bottom?: number;
-    left?: number;
-    right?: number;
-    top?: number;
-  };
-  hasCloseButton?: boolean;
-  onClose?: (
-    event: object,
-    reason: 'escapeKeyDown' | 'backdropClick' | 'closeButton'
-  ) => void;
-  open: boolean;
-  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
-} & AriaLabelingAttributes;
-
-/** *
- * @description This component is *WIP* and is not ready for production. Use the default `Dialog` component instead.
- */
-const Modal = ({
-  children,
-  hasCloseButton = true,
-  onClose,
-  open,
-  size = 'small',
-  fullscreenMargins = {
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0
-  },
-  ...attr
-}: ModalProps): ReactElement => {
-  const { classes } = useStyles(fullscreenMargins);
-
-  const isFullscreen = equals(size, 'fullscreen');
-
-  return (
-    <MuiDialog
-      TransitionComponent={isFullscreen ? Slide : undefined}
-      TransitionProps={{
-        direction: 'up'
-      }}
-      className={classes.modal}
-      data-size={size}
-      open={open}
-      onClose={onClose}
-      {...attr}
-    >
-      {hasCloseButton && (
-        <div className={classes.modalCloseButton}>
-          <IconButton
-            aria-label="close"
-            icon={<CloseIcon />}
-            size="small"
-            variant="ghost"
-            onClick={(e) => onClose?.(e, 'closeButton')}
-          />
-        </div>
-      )}
-      {children}
-    </MuiDialog>
-  );
-};
-
-export { Modal };

package/src/components/Modal/ModalActions.tsx

@@ -1,62 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { Button } from '../Button';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalActionsProps = {
-  children?: React.ReactNode;
-  disabled?: boolean;
-  isDanger?: boolean;
-  labels?: ModalActionsLabels;
-  onCancel?: () => void;
-  onConfirm?: () => void;
-};
-
-export type ModalActionsLabels = {
-  cancel: string;
-  confirm: string;
-};
-
-const ModalActions = ({
-  children,
-  labels,
-  onCancel,
-  onConfirm,
-  isDanger = false,
-  disabled
-}: ModalActionsProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.modalActions}>
-      {children || (
-        <>
-          <Button
-            aria-label={labels?.cancel}
-            data-testid="cancel"
-            size="small"
-            variant="secondary"
-            onClick={() => onCancel?.()}
-          >
-            {labels?.cancel}
-          </Button>
-          <Button
-            aria-label={labels?.confirm}
-            data-testid="confirm"
-            disabled={disabled}
-            isDanger={isDanger}
-            size="small"
-            type="submit"
-            variant="primary"
-            onClick={() => onConfirm?.()}
-          >
-            {labels?.confirm}
-          </Button>
-        </>
-      )}
-    </div>
-  );
-};
-
-export { ModalActions };

package/src/components/Modal/ModalBody.tsx

@@ -1,15 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalHeaderProps = {
-  children?: ReactNode;
-};
-
-const ModalBody = ({ children }: ModalHeaderProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <div className={classes.modalBody}>{children}</div>;
-};
-
-export { ModalBody };

package/src/components/Modal/ModalHeader.tsx

@@ -1,21 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { DialogTitle as MuiDialogTitle } from '@mui/material';
-
-import { useStyles } from './Modal.styles';
-
-export type ModalHeaderProps = {
-  children?: ReactNode;
-};
-
-const ModalHeader = ({ children }: ModalHeaderProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.modalHeader}>
-      <MuiDialogTitle color="primary">{children}</MuiDialogTitle>
-    </div>
-  );
-};
-
-export { ModalHeader };

package/src/components/Modal/index.ts

@@ -1,12 +0,0 @@
-import { Modal as ModalRoot } from './Modal';
-import { ModalHeader } from './ModalHeader';
-import { ModalBody } from './ModalBody';
-import { ModalActions } from './ModalActions';
-
-export const Modal = Object.assign(ModalRoot, {
-  Actions: ModalActions,
-  Body: ModalBody,
-  Header: ModalHeader
-});
-
-export type { ModalActionsLabels } from './ModalActions';

package/src/components/README.md

@@ -1,3 +0,0 @@
-# ⚠️ not ready for production
-
-The `components/` folder contains **experimental components** that are not ready for production. 

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 ? 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) => 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'
-  }
-};