@centreon/ui 23.10.37 → 23.10.38

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

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 };