@centreon/ui 23.10.44 → 23.10.46

package/src/components/List/Item/ListItem.tsx

@@ -0,0 +1,32 @@
+import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
+
+import { ListItem as MuiListItem } from '@mui/material';
+
+import { useStyles } from './ListItem.styles';
+
+type ListItemProps = {
+  action?: ReactElement;
+  children: ReactNode | Array<ReactNode>;
+  className?: string;
+};
+
+export const ListItem = forwardRef(
+  (
+    { action, children, className, ...attr }: ListItemProps,
+    ref?: ForwardedRef<HTMLLIElement>
+  ) => {
+    const { classes, cx } = useStyles();
+
+    return (
+      <MuiListItem
+        disableGutters
+        className={cx(classes.listItem, className)}
+        ref={ref}
+        secondaryAction={action}
+        {...attr}
+      >
+        {children}
+      </MuiListItem>
+    );
+  }
+);

package/src/components/List/Item/Text.tsx

@@ -0,0 +1,25 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { ListItemText as MuiListItemText } from '@mui/material';
+
+import { useStyles } from './ListItem.styles';
+
+type TextProps = {
+  primaryText: ReactNode;
+  secondaryText?: ReactNode;
+};
+
+export const Text = ({
+  primaryText,
+  secondaryText
+}: TextProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <MuiListItemText
+      className={classes.text}
+      primary={primaryText}
+      secondary={secondaryText}
+    />
+  );
+};

package/src/components/List/Item/TextSkeleton.tsx

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+
+import { Skeleton as MuiSkeleton } from '@mui/material';
+
+import { useStyles } from './ListItem.styles';
+
+type TextSkeletonProps = {
+  secondaryText?: boolean;
+};
+
+export const TextSkeleton = ({
+  secondaryText
+}: TextSkeletonProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <span className={classes.textSkeleton}>
+      <MuiSkeleton animation="wave" variant="text" />
+      {!!secondaryText && <MuiSkeleton animation="wave" variant="text" />}
+    </span>
+  );
+};

package/src/components/List/Item/index.ts

@@ -0,0 +1,14 @@
+import { ListItem as ListItemRoot } from './ListItem';
+import { Text as TextRoot } from './Text';
+import { TextSkeleton } from './TextSkeleton';
+import { Avatar as AvatarRoot } from './Avatar';
+import { AvatarSkeleton } from './AvatarSkeleton';
+
+export const ListItem = Object.assign(ListItemRoot, {
+  Avatar: Object.assign(AvatarRoot, {
+    Skeleton: AvatarSkeleton
+  }),
+  Text: Object.assign(TextRoot, {
+    Skeleton: TextSkeleton
+  })
+});

package/src/components/List/List.stories.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/no-array-index-key */
+import { Meta, StoryObj } from '@storybook/react';
+
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box } from '@mui/material';
+
+import { List } from '.';
+
+const meta: Meta<typeof List> = {
+  component: List
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+const sampleData = Array(50).fill({
+  icon: <DeleteIcon />,
+  primary: 'Primary text',
+  secondary: 'Secondary text'
+});
+
+export const Default: Story = {
+  render: () => (
+    <List>
+      {sampleData.map(({ primary }, index) => (
+        <List.Item key={`${primary}_${index}`}>
+          <List.Item.Text primaryText={primary} />
+        </List.Item>
+      ))}
+    </List>
+  )
+};
+
+export const withAction: Story = {
+  render: () => (
+    <List>
+      {sampleData.map(({ icon, primary }, index) => (
+        <List.Item action={icon} key={`${primary}_${index}`}>
+          <List.Item.Text primaryText={primary} />
+        </List.Item>
+      ))}
+    </List>
+  )
+};
+
+export const withSecondaryText: Story = {
+  render: () => (
+    <List>
+      {sampleData.map(({ primary, secondary }, index) => (
+        <List.Item key={`${primary}_${index}`}>
+          <List.Item.Text primaryText={primary} secondaryText={secondary} />
+        </List.Item>
+      ))}
+    </List>
+  )
+};
+
+export const withSmallContainer: Story = {
+  render: () => (
+    <Box sx={{ height: 400, width: 200 }}>
+      <List>
+        {sampleData.map(({ icon, primary, secondary }, index) => (
+          <List.Item action={icon} key={`${primary}_${index}`}>
+            <List.Item.Text primaryText={primary} secondaryText={secondary} />
+          </List.Item>
+        ))}
+      </List>
+    </Box>
+  )
+};

package/src/components/List/List.styles.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()({
+  list: {
+    height: '100%',
+    overflowY: 'auto'
+  }
+});

package/src/components/List/List.tsx

@@ -0,0 +1,19 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { List as MuiList } from '@mui/material';
+
+import { useStyles } from './List.styles';
+
+type Props = {
+  children: ReactNode;
+};
+
+export const List = ({ children }: Props): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <MuiList dense className={classes.list}>
+      {children}
+    </MuiList>
+  );
+};

package/src/components/List/index.ts

@@ -0,0 +1,6 @@
+import { List as ListRoot } from './List';
+import { ListItem } from './Item';
+
+export const List = Object.assign(ListRoot, {
+  Item: ListItem
+});

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