@centreon/ui 24.4.21 → 24.4.22

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,142 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+
+import { Modal } from '.';
+
+const meta: Meta<typeof Modal> = {
+  argTypes: {
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: ['small', 'medium', 'large', 'xlarge', 'fullscreen']
+    }
+  },
+  component: Modal
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    hasCloseButton: true,
+    open: true,
+    size: 'small'
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <p>
+          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
+          irure mollit ex aute excepteur eu id cillum.
+        </p>
+      </Modal.Body>
+      <Modal.Actions
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};
+
+export const AsDangerAction: Story = {
+  args: {
+    ...Default.args
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Body>
+        <Modal.Body>
+          <p>
+            Occaecat consectetur amet <strong>officia magna</strong>. Eu sunt
+            aute duis duis cillum irure mollit ex aute excepteur eu id cillum.
+          </p>
+        </Modal.Body>
+      </Modal.Body>
+      <Modal.Actions
+        isDanger
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};
+
+export const WithCustomAction: Story = {
+  args: {
+    ...Default.args
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <Modal.Body>
+          <p>
+            Occaecat consectetur amet <strong>officia magna</strong>. Eu sunt
+            aute duis duis cillum irure mollit ex aute excepteur eu id cillum.
+          </p>
+        </Modal.Body>
+      </Modal.Body>
+      <Modal.Actions>
+        <Button size="small" variant="primary">
+          OK
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  )
+};
+
+export const AsPassive: Story = {
+  args: {
+    ...Default.args
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <p>
+          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
+          irure mollit ex aute excepteur eu id cillum.
+        </p>
+      </Modal.Body>
+    </Modal>
+  )
+};
+
+export const fullscreenWithCustomMargins: Story = {
+  args: {
+    fullscreenMargins: {
+      bottom: 20,
+      left: 40,
+      right: 10,
+      top: 90
+    },
+    hasCloseButton: true,
+    open: true,
+    size: 'fullscreen'
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <p>
+          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
+          irure mollit ex aute excepteur eu id cillum.
+        </p>
+      </Modal.Body>
+      <Modal.Actions
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};

package/src/components/Modal/Modal.styles.ts

@@ -0,0 +1,91 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles<{
+  bottom?: number;
+  left?: number;
+  right?: number;
+  top?: number;
+}>()((theme, props) => ({
+  modal: {
+    '& .MuiDialog-paper': {
+      gap: theme.spacing(2),
+      padding: theme.spacing(2)
+    },
+    '&[data-size="fullscreen"]': {
+      zIndex: 0
+    },
+    '&[data-size="fullscreen"] .MuiBackdrop-root': {
+      display: 'none'
+    },
+    '&[data-size="fullscreen"] .MuiDialog-container': {
+      alignItems: 'flex-end',
+      height: '100vh',
+      justifyContent: 'flex-end'
+    },
+    '&[data-size="fullscreen"] .MuiDialog-paper': {
+      bottom: props?.bottom ?? 0,
+      height: 'calc(100vh - 90px)',
+      left: props?.left ?? 0,
+      margin: 0,
+      maxWidth: 'unset',
+      position: 'absolute',
+      right: props?.right ?? 0,
+      top: props?.top ?? 0,
+      transition: theme.transitions.create('left')
+    },
+    '&[data-size="large"] .MuiDialog-paper': {
+      maxWidth: '640px',
+      width: '640px'
+    },
+    '&[data-size="medium"] .MuiDialog-paper': {
+      width: '520px'
+    },
+    '&[data-size="small"] .MuiDialog-paper': {
+      width: '400px'
+    },
+    '&[data-size="xlarge"] .MuiDialog-paper': {
+      maxWidth: '1400px',
+      width: 'calc(100% - 64px)'
+    }
+  },
+  modalActions: {
+    '&[data-fixed="true"]': {
+      position: 'fixed'
+    },
+    bottom: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+    justifyContent: 'flex-end',
+    right: theme.spacing(2.5)
+  },
+  modalBody: {
+    '& > p': {
+      '&:first-of-type': {
+        margin: theme.spacing(0, 0, 1, 0)
+      },
+      color: theme.palette.text.secondary,
+      margin: theme.spacing(1, 0, 1, 0),
+      width: '90%'
+    }
+  },
+  modalCloseButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    svg: {
+      opacity: 0.6
+    },
+    top: theme.spacing(1)
+  },
+  modalHeader: {
+    '& .MuiDialogTitle-root': {
+      padding: theme.spacing(0)
+    },
+    display: 'flex',
+    gap: theme.spacing(2),
+
+    justifyContent: 'space-between'
+  }
+}));
+
+export { useStyles };

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,64 @@
+import React, { ReactElement } from 'react';
+
+import { Button } from '../Button';
+
+import { useStyles } from './Modal.styles';
+
+export type ModalActionsProps = {
+  children?: React.ReactNode;
+  disabled?: boolean;
+  isDanger?: boolean;
+  isFixed?: boolean;
+  labels?: ModalActionsLabels;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+};
+
+export type ModalActionsLabels = {
+  cancel: string;
+  confirm: string;
+};
+
+const ModalActions = ({
+  children,
+  labels,
+  onCancel,
+  onConfirm,
+  isDanger = false,
+  disabled,
+  isFixed
+}: ModalActionsProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.modalActions} data-fixed={isFixed}>
+      {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;
+}