@centreon/ui 24.4.59 → 24.4.60

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-import { ReactElement } from 'react';
-
-import {
-  Avatar as MuiAvatar,
-  ListItemAvatar as MuiListItemAvatar
-} from '@mui/material';
-
-import { useStyles } from './ListItem.styles';
-
-type AvatarProps = {
-  children: ReactElement | string;
-};
-export const Avatar = ({ children }: AvatarProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <MuiListItemAvatar className={classes.avatar} data-element="avatar">
-      <MuiAvatar>{children}</MuiAvatar>
-    </MuiListItemAvatar>
-  );
-};

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

@@ -1,17 +0,0 @@
-import { ReactElement } from 'react';
-
-import { Skeleton as MuiSkeleton } from '@mui/material';
-
-import { useStyles } from './ListItem.styles';
-
-export const AvatarSkeleton = (): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <MuiSkeleton
-      animation="wave"
-      className={classes.avatar}
-      variant="circular"
-    />
-  );
-};

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

@@ -1,41 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ListItem } from '.';
-
-const meta: Meta<typeof ListItem> = {
-  component: ListItem
-};
-
-export default meta;
-type Story = StoryObj<typeof ListItem>;
-
-export const Default: Story = {
-  args: {
-    children: 'Default'
-  }
-};
-
-export const WithTextAndAvatar: Story = {
-  args: {
-    children: (
-      <>
-        <ListItem.Avatar>AV</ListItem.Avatar>
-        <ListItem.Text
-          primaryText="Primary text"
-          secondaryText="Secondary text"
-        />
-      </>
-    )
-  }
-};
-
-export const AsLoadingState: Story = {
-  args: {
-    children: (
-      <>
-        <ListItem.Avatar.Skeleton />
-        <ListItem.Text.Skeleton secondaryText />
-      </>
-    )
-  }
-};

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

@@ -1,63 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()((theme) => ({
-  avatar: {
-    '&, &.MuiListItemAvatar-root, & > div': {
-      color: theme.palette.primary.contrastText,
-      fontSize: '1rem',
-      height: '2.25rem',
-      width: '2.25rem'
-    },
-    disabled: {
-      backgroundColor: theme.palette.action.disabled
-    },
-    minWidth: 'unset'
-  },
-  listItem: {
-    alignItems: 'center',
-    display: 'flex',
-    flexGrow: 1,
-    gap: theme.spacing(2),
-    maxWidth: '520px',
-    overflow: 'hidden',
-    paddingBottom: theme.spacing(1),
-    paddingTop: theme.spacing(1)
-  },
-  secondary: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1)
-  },
-  text: {
-    '&, &.MuiListItemText-root': {
-      '& .MuiListItemText-primary': {
-        fontSize: '0.875rem'
-      },
-      '& .MuiListItemText-secondary': {
-        fontSize: '0.625rem'
-      },
-      '& > *': {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        textWrap: 'nowrap'
-      },
-      margin: 0
-    },
-    disabled: {
-      color: theme.palette.action.disabled
-    }
-  },
-  textSkeleton: {
-    '& span:nth-child(1)': {
-      fontSize: '0.875rem'
-    },
-    '& span:nth-child(2)': {
-      fontSize: '0.625rem',
-      width: '60%'
-    },
-    display: 'flex',
-    flexDirection: 'column',
-    minWidth: '40%'
-  }
-}));

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

@@ -1,34 +0,0 @@
-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 && <div className={classes.secondary}>{action}</div>
-        }
-        {...attr}
-      >
-        {children}
-      </MuiListItem>
-    );
-  }
-);

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

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

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

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

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

@@ -1,70 +0,0 @@
-/* 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

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

package/src/components/List/List.tsx

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

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

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

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

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

@@ -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,68 +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': {
-        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)
-    }
-  }
-}));