@centreon/ui 24.4.21 → 24.4.23

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

@@ -0,0 +1,33 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  areaIndicator: {
+    '& .areaIndicator': {
+      left: theme.spacing(10)
+    },
+    '& label:first-of-type': {
+      border: '1px dashed #9747FF7F',
+      borderRadius: '4px',
+      color: '#9747FFFF',
+      fontSize: '0.75rem',
+      fontWeight: 500,
+      left: theme.spacing(1),
+      padding: theme.spacing(0.125, 1),
+      position: 'absolute',
+      top: theme.spacing(0.75)
+    },
+    '&[data-depth="1"]': {
+      '& label:first-of-type': {
+        '&:before': {
+          content: '"+ "'
+        },
+        left: theme.spacing(10)
+      }
+    },
+
+    backgroundColor: '#9747FF19',
+    minHeight: theme.spacing(4),
+
+    position: 'relative'
+  }
+}));

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,41 @@
+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)
+    },
+    '&[data-row-reverse="true"]': {
+      flexDirection: 'row-reverse'
+    },
+    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(1.5, 3, 5)
+  },
+  pageLayoutHeader: {
+    '[data-variant="fixed-header"] &': {
+      backgroundColor: theme.palette.layout.header.background,
+      borderBottom: `1px solid ${theme.palette.layout.header.border}`,
+      padding: theme.spacing(3, 4, 2),
+      position: 'sticky',
+      top: 0,
+      zIndex: `calc(${theme.zIndex.mobileStepper} - 100)`
+    },
+    padding: theme.spacing(3, 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,24 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { useStyles } from './PageLayout.styles';
+
+interface PageLayoutActionsProps {
+  children: Array<ReactNode> | ReactNode;
+  rowReverse?: boolean;
+}
+
+export const PageLayoutActions = ({
+  children,
+  rowReverse
+}: PageLayoutActionsProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <section
+      className={classes.pageLayoutActions}
+      data-row-reverse={rowReverse}
+    >
+      {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/List/Item/Avatar.tsx

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

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

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

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

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

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

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