@centreon/ui 24.4.21 → 24.4.23

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,31 @@
+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

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

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,70 @@
+/* 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

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

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

@@ -0,0 +1,115 @@
+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

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

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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,57 @@
+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 };