@centreon/ui 23.10.32 → 23.10.34-MON-19940-Add-testIds-cloud-notifications.0

package/src/components/Layout/AreaIndicator.tsx

@@ -0,0 +1,35 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './AreaIndicator.styles';
+
+type AreaIndicatorProps = {
+  children?: ReactNode | Array<ReactNode>;
+  depth?: number;
+  height?: number | string;
+  name: string;
+  width?: number | string;
+};
+
+const AreaIndicator = ({
+  children,
+  name = 'area',
+  width = '100%',
+  height = '100%',
+  depth = 0
+}: AreaIndicatorProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <div
+      className={classes.areaIndicator}
+      data-depth={depth}
+      style={{ height, width }}
+    >
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label>{name}</label>
+      {children}
+    </div>
+  );
+};
+
+export { AreaIndicator };

package/src/components/Layout/PageLayout/PageLayout.stories.tsx

@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { AreaIndicator } from '../AreaIndicator';
+import { Default as DefaultPageHeaderStory } from '../../Header/PageHeader/PageHeader.stories';
+
+import { PageLayout } from './index';
+
+const meta: Meta<typeof PageLayout> = {
+  argTypes: {
+    variant: {
+      control: {
+        options: ['default', 'fixed-header']
+      }
+    }
+  },
+  component: PageLayout,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof PageLayout>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <PageLayout.Header>
+          <AreaIndicator name="header" />
+        </PageLayout.Header>
+        <PageLayout.Body>
+          <AreaIndicator height="100vh" name="body">
+            <PageLayout.Actions>
+              <AreaIndicator depth={1} name="actions" />
+            </PageLayout.Actions>
+          </AreaIndicator>
+        </PageLayout.Body>
+      </>
+    ),
+    variant: 'default'
+  }
+};
+
+export const FixedHeader: Story = {
+  args: {
+    children: (
+      <>
+        <PageLayout.Header>
+          <AreaIndicator name="header" />
+        </PageLayout.Header>
+        <PageLayout.Body hasBackground>
+          <AreaIndicator height="100vh" name="body">
+            <PageLayout.Actions>
+              <AreaIndicator depth={1} name="actions" />
+            </PageLayout.Actions>
+          </AreaIndicator>
+        </PageLayout.Body>
+      </>
+    ),
+    variant: 'fixed-header'
+  }
+};
+
+export const DefaultWithPageHeader: Story = {
+  args: {
+    children: (
+      <>
+        <PageLayout.Header>
+          {/* eslint-disable react/jsx-pascal-case */}
+          {/* @ts-expect-error storybook story render method not being recognised */}
+          <DefaultPageHeaderStory.render {...DefaultPageHeaderStory.args} />
+        </PageLayout.Header>
+        <PageLayout.Body>
+          <AreaIndicator height="100vh" name="body" />
+        </PageLayout.Body>
+      </>
+    ),
+    variant: 'default'
+  }
+};

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -0,0 +1,40 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  pageLayout: {
+    display: 'grid',
+    gridTemplateRows: 'min-content',
+    overflow: 'hidden'
+  },
+  pageLayoutActions: {
+    '& > span': {
+      display: 'flex',
+      gap: theme.spacing(0.5)
+    },
+
+    display: 'flex',
+    justifyContent: 'space-between',
+    paddingBottom: theme.spacing(2.5)
+  },
+  pageLayoutBody: {
+    '&[data-has-background="true"]': {
+      backgroundColor: theme.palette.layout.body.background
+    },
+    display: 'grid',
+    gridTemplateRows: 'min-content',
+    overflow: 'hidden',
+    padding: theme.spacing(3, 3, 5)
+  },
+  pageLayoutHeader: {
+    '[data-variant="fixed-header"] &': {
+      backgroundColor: theme.palette.layout.header.background,
+      borderBottom: `1px solid ${theme.palette.layout.header.border}`,
+      padding: theme.spacing(5, 4, 2),
+      position: 'sticky',
+      top: 0,
+      zIndex: `calc(${theme.zIndex.mobileStepper} - 100)`
+    },
+
+    padding: theme.spacing(5, 3, 0)
+  }
+}));

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageLayout.styles';
+
+type PageLayoutProps = {
+  children: Array<ReactNode> | ReactNode;
+  variant?: 'default' | 'fixed-header';
+};
+
+export const PageLayout = ({
+  children,
+  variant = 'default'
+}: PageLayoutProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <section className={classes.pageLayout} data-variant={variant}>
+      {children}
+    </section>
+  );
+};

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageLayout.styles';
+
+type PageLayoutActionsProps = {
+  children: Array<ReactNode> | ReactNode;
+};
+
+export const PageLayoutActions = ({
+  children
+}: PageLayoutActionsProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return <section className={classes.pageLayoutActions}>{children}</section>;
+};

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -0,0 +1,24 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageLayout.styles';
+
+type PageLayoutBodyProps = {
+  children: Array<ReactNode> | ReactNode;
+  hasBackground?: boolean;
+};
+
+export const PageLayoutBody = ({
+  children,
+  hasBackground = false
+}: PageLayoutBodyProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <section
+      className={classes.pageLayoutBody}
+      data-has-background={hasBackground}
+    >
+      {children}
+    </section>
+  );
+};

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+import { useStyles } from './PageLayout.styles';
+
+type PageLayoutHeaderProps = {
+  children: Array<ReactNode> | ReactNode;
+};
+
+export const PageLayoutHeader = ({
+  children
+}: PageLayoutHeaderProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  return <header className={classes.pageLayoutHeader}>{children}</header>;
+};

package/src/components/Layout/PageLayout/index.ts

@@ -0,0 +1,10 @@
+import { PageLayout as PageLayoutRoot } from './PageLayout';
+import { PageLayoutHeader } from './PageLayoutHeader';
+import { PageLayoutBody } from './PageLayoutBody';
+import { PageLayoutActions } from './PageLayoutActions';
+
+export const PageLayout = Object.assign(PageLayoutRoot, {
+  Actions: PageLayoutActions,
+  Body: PageLayoutBody,
+  Header: PageLayoutHeader
+});

package/src/components/Layout/index.ts

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

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { MenuButton } from './MenuButton';
+
+const meta: Meta<typeof MenuButton> = {
+  component: MenuButton
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuButton>;
+
+export const Default: Story = {
+  args: {
+    'aria-label': 'menu button'
+  }
+};

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

@@ -0,0 +1,27 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  buttonIcon: {
+    '[data-is-active="true"] &': {
+      transform: 'rotate(180deg)'
+    },
+
+    fontSize: '1.25rem',
+    transition: 'transform 0.15s ease-in-out'
+  },
+  menuButton: {
+    '&:hover:not(&[data-is-active="true"])': {
+      backgroundColor: theme.palette.menu.button.background.hover,
+      color: theme.palette.menu.button.color.hover
+    },
+    '&[data-is-active="true"]': {
+      backgroundColor: theme.palette.menu.button.background.active,
+      color: theme.palette.menu.button.color.active
+    },
+    backgroundColor: theme.palette.menu.button.background.default,
+    color: theme.palette.menu.button.color.default,
+    display: 'flex',
+    height: 'unset',
+    minWidth: 'unset'
+  }
+}));

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

@@ -0,0 +1,62 @@
+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 = {
+  children?: ReactNode;
+  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',
+  ...attr
+}: MenuButtonProps): ReactElement => {
+  const { 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}
+      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

@@ -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,70 @@
+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

@@ -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,36 @@
+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

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

@@ -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
+});