@centreon/ui 23.10.43 → 23.10.44

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

@@ -1,111 +0,0 @@
-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']
-    }
-  },
-  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>
-  )
-};

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

@@ -1,55 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  modal: {
-    '& .MuiDialog-paper': {
-      gap: theme.spacing(2),
-      padding: theme.spacing(2)
-    },
-    '&[data-size="large"] .MuiDialog-paper': {
-      maxWidth: '640px',
-      width: '640px'
-    },
-    '&[data-size="medium"] .MuiDialog-paper': {
-      width: '520px'
-    },
-    '&[data-size="small"] .MuiDialog-paper': {
-      width: '400px'
-    }
-  },
-  modalActions: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(2),
-    justifyContent: 'flex-end'
-  },
-  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

@@ -1,59 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { Dialog as MuiDialog } 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;
-  hasCloseButton?: boolean;
-  onClose?: (
-    event: object,
-    reason: 'escapeKeyDown' | 'backdropClick' | 'closeButton'
-  ) => void;
-  open: boolean;
-  size?: 'small' | 'medium' | 'large';
-} & 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',
-  ...attr
-}: ModalProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <MuiDialog
-      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>{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/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.styles.ts

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

package/src/components/Tooltip/Tooltip.tsx

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

package/src/components/Tooltip/index.ts

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

package/src/components/index.ts

@@ -1,9 +0,0 @@
-export * from './Button';
-export * from './Modal';
-export * from './Form';
-export * from './Header';
-export * from './DataTable';
-export * from './Layout';
-export * from './Tooltip';
-export * from './Menu';
-export * from './List';