@centreon/ui 24.5.12 → 24.5.13

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

@@ -0,0 +1,67 @@
+import { ReactElement, ReactNode, useCallback } 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 = {
+  ariaLabel?: string;
+  children?: ReactNode;
+  className?: string;
+  hasArrow?: boolean;
+  isOpen?: boolean;
+  onClick?: (args: { isOpen: boolean }) => void;
+} & Pick<ButtonProps, 'disabled' | 'size' | 'variant'> &
+  AriaLabelingAttributes &
+  DataTestAttributes;
+
+const MenuButton = ({
+  children,
+  onClick,
+  hasArrow = true,
+  size = 'small',
+  variant = 'ghost',
+  ariaLabel,
+  className,
+  ...attr
+}: MenuButtonProps): ReactElement => {
+  const { cx, classes } = useStyles();
+
+  const { isMenuOpen, setIsMenuOpen, setAnchorEl, onOpen } = useMenu();
+
+  const onToggle = useCallback(
+    (e): void => {
+      setAnchorEl(e.currentTarget);
+
+      setIsMenuOpen(!isMenuOpen);
+      onClick?.({ isOpen: !isMenuOpen });
+      if (!isMenuOpen) onOpen?.();
+    },
+    [isMenuOpen, onClick, onOpen]
+  );
+
+  return (
+    <Button
+      {...attr}
+      aria-label={ariaLabel}
+      className={cx(classes.menuButton, className)}
+      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

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

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

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

@@ -0,0 +1,68 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  menuDivider: {
+    '&, &.MuiDivider-root': {
+      borderColor: theme.palette.menu.divider.border
+    }
+  },
+  menuItem: {
+    '&, &.MuiMenuItem-root': {
+      '& > button': {
+        fontSize: '1rem',
+        justifyContent: 'flex-start'
+      },
+
+      '&: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)
+      },
+
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row',
+      fontSize: '1rem',
+      gap: theme.spacing(2),
+      justifyContent: 'space-between',
+      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

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

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

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

package/src/components/Menu/MenuItems.tsx

@@ -0,0 +1,36 @@
+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>;
+  className?: string;
+};
+const MenuItems = ({ children, className }: MenuItemsProps): ReactElement => {
+  const { cx, classes } = useStyles();
+
+  const { isMenuOpen, setIsMenuOpen, anchorEl, onClose } = useMenu();
+
+  const onCloseMenu = (): void => {
+    setIsMenuOpen(false);
+    onClose?.();
+  };
+
+  return (
+    <MuiMenu
+      anchorEl={anchorEl}
+      className={cx(classes.menuItems, className)}
+      open={isMenuOpen}
+      variant="menu"
+      onClick={onCloseMenu}
+      onClose={onCloseMenu}
+    >
+      {children}
+    </MuiMenu>
+  );
+};
+
+export { MenuItems };

package/src/components/Menu/index.ts

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

@@ -0,0 +1,79 @@
+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 | ((currentIsMenuOpen) => 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/Modal/ConfirmationModal/ConfirmationModal.cypress.spec.tsx

@@ -0,0 +1,168 @@
+import { atom, createStore, useSetAtom, Provider } from 'jotai';
+
+import { Button } from '@mui/material';
+
+import { ConfirmationModal, ConfirmationModalProps } from './ConfirmationModal';
+
+const testAtom = atom<string | null>(null);
+
+const buttonLabel = 'Click to open modal';
+
+const TestComponent = (args: ConfirmationModalProps<string>): JSX.Element => {
+  const setAtom = useSetAtom(testAtom);
+
+  return (
+    <>
+      <Button onClick={() => setAtom('John')}>{buttonLabel}</Button>
+      <ConfirmationModal<string> {...args} />
+    </>
+  );
+};
+
+const staticLabels = {
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  description: 'Description',
+  title: 'Title'
+};
+
+const dynamicLabels = {
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  description: (data) => `Description ${data}`,
+  title: (data) => `Hello ${data}`
+};
+
+const initialize = (
+  props: Pick<
+    ConfirmationModalProps<string>,
+    'labels' | 'disabled' | 'hasCloseButton' | 'isDanger'
+  >
+): { cancel; confirm } => {
+  const store = createStore();
+
+  const cancel = cy.stub();
+  const confirm = cy.stub();
+
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <TestComponent
+          {...props}
+          atom={testAtom}
+          onCancel={cancel}
+          onConfirm={confirm}
+        />
+      </Provider>
+    )
+  });
+
+  return {
+    cancel,
+    confirm
+  };
+};
+
+describe('Confirmation modal', () => {
+  it('displays the modal with static labels', () => {
+    initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+    cy.contains('Description').should('be.visible');
+    cy.findByLabelText('close').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the modal with dynamic labels', () => {
+    initialize({ labels: dynamicLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Hello John').should('be.visible');
+    cy.contains('Description John').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the confirm button as disabled when a prop is set', () => {
+    initialize({ disabled: true, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Confirm').should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the confirm button as danger when a prop is set', () => {
+    initialize({ isDanger: true, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Confirm').should('have.attr', 'data-is-danger', 'true');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the modal without the close button when a prop is set', () => {
+    initialize({ hasCloseButton: false, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.findByLabelText('close').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('closes the modal when the close button is clicked', () => {
+    initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.findByLabelText('close').click();
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('closes the modal when the cancel button is clicked', () => {
+    const { cancel } = initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.contains('Cancel')
+      .click()
+      .then(() => {
+        expect(cancel).to.be.calledWith('John');
+      });
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+  it('closes the modal when the confirm button is clicked', () => {
+    const { confirm } = initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.contains('Confirm')
+      .click()
+      .then(() => {
+        expect(confirm).to.be.calledWith('John');
+      });
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

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

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { atom, useSetAtom, createStore, Provider } from 'jotai';
+
+import { Button } from '../../Button';
+
+import { ConfirmationModal } from './ConfirmationModal';
+
+const meta: Meta<typeof ConfirmationModal> = {
+  component: ConfirmationModal
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationModal>;
+
+const testAtom = atom<string | null>(null);
+
+const store = createStore();
+
+const Component = (args): JSX.Element => {
+  const setAtom = useSetAtom(testAtom);
+
+  return (
+    <>
+      <Button onClick={() => setAtom('John')}>Click to open modal</Button>
+      <ConfirmationModal<string> {...args} />
+    </>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    hasCloseButton: true,
+    labels: {
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      description: 'Description',
+      title: 'Title'
+    }
+  },
+  render: (args) => (
+    <Provider store={store}>
+      <Component {...args} atom={testAtom} />
+    </Provider>
+  )
+};
+
+export const WithDynamicLabels: Story = {
+  args: {
+    hasCloseButton: true,
+    labels: {
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      description: (data) => `Hello ${data} from description`,
+      title: (data) => `Hello ${data}`
+    }
+  },
+  render: (args) => (
+    <Provider store={store}>
+      <Component {...args} atom={testAtom} />
+    </Provider>
+  )
+};