@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

package/src/components/Menu/Button/MenuButton.tsx

@@ -1,59 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import {
-  ArrowDropDown as ArrowDropDownIcon,
-  Menu as MenuIcon
-} from '@mui/icons-material';
-
-import { Button, ButtonProps } from '../../Button';
-import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
-import { DataTestAttributes } from '../../../@types/data-attributes';
-import { useMenu } from '../useMenu';
-
-import { useStyles } from './MenuButton.styles';
-
-type MenuButtonProps = {
-  children?: ReactNode;
-  hasArrow?: boolean;
-  isOpen?: boolean;
-  onClick?: (isOpen: boolean) => void;
-} & Pick<ButtonProps, 'disabled' | 'size' | 'variant'> &
-  AriaLabelingAttributes &
-  DataTestAttributes;
-
-const MenuButton = ({
-  children,
-  onClick,
-  hasArrow = true,
-  size = 'small',
-  variant = 'ghost',
-  ...attr
-}: MenuButtonProps): ReactElement => {
-  const { classes } = useStyles();
-
-  const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
-
-  const onToggle = (e): void => {
-    setAnchorEl(e.currentTarget);
-
-    setIsMenuOpen(!isMenuOpen);
-    onClick?.(!isMenuOpen);
-    if (!isMenuOpen) onOpen?.();
-  };
-
-  return (
-    <Button
-      {...attr}
-      className={classes.menuButton}
-      data-is-active={isMenuOpen}
-      size={size}
-      variant={variant}
-      onClick={onToggle}
-    >
-      {children || <MenuIcon />}
-      {hasArrow && <ArrowDropDownIcon className={classes.buttonIcon} />}
-    </Button>
-  );
-};
-
-export { MenuButton };

package/src/components/Menu/Button/index.ts

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

package/src/components/Menu/Menu.stories.tsx

@@ -1,71 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Add as AddIcon } from '@mui/icons-material';
-
-import { Button } from '../Button';
-
-import { Menu } from '.';
-
-const meta: Meta<typeof Menu> = {
-  component: Menu
-};
-
-export default meta;
-type Story = StoryObj<typeof Menu>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <Menu.Items>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item isActive isDisabled>
-          Menu Item
-        </Menu.Item>
-        <Menu.Item isDisabled>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Divider />
-        <Menu.Item>Add item...</Menu.Item>
-      </Menu.Items>
-    ),
-    isOpen: true
-  }
-};
-
-export const WithMenuButton: Story = {
-  args: {
-    children: (
-      <>
-        <Menu.Button />
-        {Default.args?.children}
-      </>
-    )
-  }
-};
-
-export const WithCustomActionButton: Story = {
-  args: {
-    children: (
-      <Menu.Items>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Item isActive isDisabled>
-          Menu Item
-        </Menu.Item>
-        <Menu.Item isDisabled>Menu Item</Menu.Item>
-        <Menu.Item>Menu Item</Menu.Item>
-        <Menu.Divider />
-        <Menu.Item>
-          <Button icon={<AddIcon />} iconVariant="start" variant="ghost">
-            Add item
-          </Button>
-        </Menu.Item>
-      </Menu.Items>
-    ),
-    isOpen: true
-  }
-};

package/src/components/Menu/Menu.styles.ts

@@ -1,70 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  menuDivider: {
-    '&, &.MuiDivider-root': {
-      borderColor: theme.palette.menu.divider.border
-    }
-  },
-  menuItem: {
-    '&, &.MuiMenuItem-root': {
-      '& > button': {
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: theme.palette.menu.item.background.hover,
-          color: theme.palette.menu.item.color.hover
-        },
-        backgroundColor: theme.palette.menu.item.background.default,
-        color: theme.palette.menu.item.color.default,
-        fontSize: '1rem',
-        justifyContent: 'flex-start',
-        width: '100%'
-      },
-
-      '&:has(button)': {
-        '& > .MuiTouchRipple-root': {
-          display: 'none'
-        },
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: 'unset'
-        },
-        padding: theme.spacing(0, 2)
-      },
-
-      '&:not(:has(button))': {
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: theme.palette.menu.item.background.hover,
-          color: theme.palette.menu.item.color.hover
-        },
-        '&[data-is-active="true"], &.Mui-selected': {
-          '&[data-is-disabled="true"], &.Mui-disabled': {
-            opacity: 1
-          },
-          backgroundColor: theme.palette.menu.item.background.active,
-          color: theme.palette.menu.item.color.active,
-          opacity: 1
-        },
-        '&[data-is-disabled="true"], &.Mui-disabled': {
-          opacity: 0.5
-        },
-        backgroundColor: theme.palette.menu.item.background.default,
-        color: theme.palette.menu.item.color.default,
-        padding: theme.spacing(0.75, 2)
-      },
-
-      fontSize: '1rem',
-      minHeight: 'unset'
-    }
-  },
-  menuItems: {
-    '& > .MuiPaper-root.MuiMenu-paper': {
-      backgroundColor: theme.palette.menu.background,
-      borderRadius: '4px',
-      boxShadow: theme.shadows[8],
-      minWidth: '240px',
-      transform: `translateY(${theme.spacing(0.5)}) !important`
-    },
-    '& ul, & ul.MuiMenu-list': {
-      padding: theme.spacing(1, 0)
-    }
-  }
-}));

package/src/components/Menu/Menu.tsx

@@ -1,25 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { MenuProvider } from './useMenu';
-
-type MenuProps = {
-  children?: ReactNode | Array<ReactNode>;
-  isOpen?: boolean;
-  onClose?: () => void;
-  onOpen?: () => void;
-};
-
-const Menu = ({
-  children,
-  isOpen = false,
-  onOpen,
-  onClose
-}: MenuProps): ReactElement => {
-  return (
-    <MenuProvider initialIsOpen={isOpen} onClose={onClose} onOpen={onOpen}>
-      {children}
-    </MenuProvider>
-  );
-};
-
-export { Menu };

package/src/components/Menu/MenuDivider.tsx

@@ -1,13 +0,0 @@
-import { ReactElement } from 'react';
-
-import { Divider as MuiDivider } from '@mui/material';
-
-import { useStyles } from './Menu.styles';
-
-const MenuDivider = (): ReactElement => {
-  const { classes } = useStyles();
-
-  return <MuiDivider className={classes.menuDivider} />;
-};
-
-export { MenuDivider };

package/src/components/Menu/MenuItem.tsx

@@ -1,36 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { MenuItem as MuiMenuItem } from '@mui/material';
-
-import { useStyles } from './Menu.styles';
-
-type MenuItemProps = {
-  children?: ReactNode;
-  isActive?: boolean;
-  isDisabled?: boolean;
-  onClick?: () => void;
-};
-
-const MenuItem = ({
-  children,
-  onClick,
-  isActive = false,
-  isDisabled = false
-}: MenuItemProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <MuiMenuItem
-      className={classes.menuItem}
-      data-is-active={isActive}
-      data-is-disabled={isDisabled}
-      disabled={isDisabled}
-      selected={isActive}
-      onClick={() => onClick?.()}
-    >
-      {children}
-    </MuiMenuItem>
-  );
-};
-
-export { MenuItem };

package/src/components/Menu/MenuItems.tsx

@@ -1,35 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { Menu as MuiMenu } from '@mui/material';
-
-import { useStyles } from './Menu.styles';
-import { useMenu } from './useMenu';
-
-type MenuItemsProps = {
-  children?: ReactNode | Array<ReactNode>;
-};
-const MenuItems = ({ children }: MenuItemsProps): ReactElement => {
-  const { classes } = useStyles();
-
-  const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
-
-  const onCloseMenu = (): void => {
-    setIsMenuOpen(false);
-    onClose?.();
-  };
-
-  return (
-    <MuiMenu
-      anchorEl={anchorEl}
-      className={classes.menuItems}
-      open={isMenuOpen}
-      variant="menu"
-      onClick={onCloseMenu}
-      onClose={onCloseMenu}
-    >
-      {children}
-    </MuiMenu>
-  );
-};
-
-export { MenuItems };

package/src/components/Menu/index.ts

@@ -1,12 +0,0 @@
-import { Menu as MenuRoot } from './Menu';
-import { MenuButton } from './Button';
-import { MenuItem } from './MenuItem';
-import { MenuDivider } from './MenuDivider';
-import { MenuItems } from './MenuItems';
-
-export const Menu = Object.assign(MenuRoot, {
-  Button: MenuButton,
-  Divider: MenuDivider,
-  Item: MenuItem,
-  Items: MenuItems
-});

package/src/components/Menu/useMenu.tsx

@@ -1,79 +0,0 @@
-import { ReactElement, ReactNode, useRef } from 'react';
-
-import {
-  atom,
-  createStore,
-  useAtom,
-  Provider,
-  useStore,
-  useAtomValue
-} from 'jotai';
-import { useHydrateAtoms } from 'jotai/utils';
-
-/** state */
-
-const isMenuOpenAtom = atom(false);
-const anchorElAtom = atom<null | HTMLElement>(null);
-const onOpenAtom = atom<(() => void) | null>(null);
-const onCloseAtom = atom<(() => void) | null>(null);
-
-/** provider */
-
-type MenuProviderProps = {
-  children: ReactNode;
-  initialIsOpen?: boolean;
-  onClose?: () => void;
-  onOpen?: () => void;
-};
-
-const MenuProvider = ({
-  children,
-  initialIsOpen,
-  onOpen,
-  onClose
-}: MenuProviderProps): ReactElement => {
-  const menuStore = useRef(createStore()).current;
-
-  useHydrateAtoms(
-    [
-      [isMenuOpenAtom, initialIsOpen ?? false],
-      [anchorElAtom, null],
-      [onOpenAtom, onOpen],
-      [onCloseAtom, onClose]
-    ],
-    { store: menuStore }
-  );
-
-  return <Provider store={menuStore}>{children}</Provider>;
-};
-
-/** hook */
-
-type UseMenu = {
-  anchorEl: null | HTMLElement;
-  isMenuOpen: boolean;
-  onClose: (() => void) | null;
-  onOpen: (() => void) | null;
-  setAnchorEl: (event: null | HTMLElement) => void;
-  setIsMenuOpen: (isOpen: boolean) => void;
-};
-
-const useMenu = (): UseMenu => {
-  const store = useStore();
-
-  const [isMenuOpen, setIsMenuOpen] = useAtom(isMenuOpenAtom, { store });
-  const [anchorEl, setAnchorEl] = useAtom(anchorElAtom, { store });
-  const onOpen = useAtomValue(onOpenAtom, { store });
-  const onClose = useAtomValue(onCloseAtom, { store });
-
-  return {
-    anchorEl,
-    isMenuOpen,
-    onClose,
-    onOpen,
-    setAnchorEl,
-    setIsMenuOpen
-  };
-};
-
-export { useMenu, MenuProvider };

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

@@ -1,71 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useEffect, useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-
-// import { expect } from '@storybook/jest';
-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: {}
-}));