@centreon/ui 24.4.13 → 24.4.14

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

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

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

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

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

@@ -1,21 +0,0 @@
-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} id="page">
-      {children}
-    </section>
-  );
-};

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

@@ -1,25 +0,0 @@
-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}
-      id="actions"
-    >
-      {children}
-    </section>
-  );
-};

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

@@ -1,25 +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}
-      id="page-body"
-    >
-      {children}
-    </section>
-  );
-};

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

@@ -1,19 +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} id="header">
-      {children}
-    </header>
-  );
-};

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

@@ -1,76 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import AddIcon from '@mui/icons-material/Add';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-
-import { Button, Menu } from '../..';
-
-interface NamedEntity {
-  id: number | string;
-  name: string;
-}
-
-type Props = {
-  create: () => void;
-  elements: Array<NamedEntity>;
-  goBack: () => void;
-  isActive: (id: number | string) => boolean;
-  labels: {
-    create: string;
-    goBack: string;
-  };
-  navigateToElement: (id: number | string) => () => void;
-};
-
-export const PageQuickAccess = ({
-  elements,
-  isActive,
-  navigateToElement,
-  goBack,
-  create,
-  labels
-}: Props): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <Menu>
-      <Menu.Button data-testid="quickaccess" />
-      <Menu.Items>
-        {elements &&
-          elements.map((element) => (
-            <Menu.Item
-              key={`${element.id}`}
-              onClick={navigateToElement(element.id)}
-              {...(isActive(element.id) && {
-                isActive: true,
-                isDisabled: true
-              })}
-            >
-              {element.name}
-            </Menu.Item>
-          ))}
-        <Menu.Divider key="divider" />
-        <Menu.Item key="create">
-          <>
-            <Button
-              icon={<ArrowBackIcon />}
-              iconVariant="start"
-              variant="ghost"
-              onClick={goBack}
-            >
-              {t(labels.goBack)}
-            </Button>
-            <Button
-              icon={<AddIcon />}
-              iconVariant="start"
-              variant="secondary"
-              onClick={create}
-            >
-              {t(labels.create)}
-            </Button>
-          </>
-        </Menu.Item>
-      </Menu.Items>
-    </Menu>
-  );
-};

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

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

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

@@ -1,66 +0,0 @@
-import { T } from 'ramda';
-
-import { PageHeader } from '..';
-
-import { AreaIndicator } from './AreaIndicator';
-
-import { PageLayout } from '.';
-
-const initialize = (): void => {
-  cy.mount({
-    Component: (
-      <PageLayout>
-        <PageLayout.Header>
-          <PageHeader>
-            <PageHeader.Menu>
-              <PageLayout.QuickAccess
-                create={cy.stub()}
-                elements={[
-                  {
-                    id: 1,
-                    name: 'Entity'
-                  }
-                ]}
-                goBack={cy.stub()}
-                isActive={T}
-                labels={{
-                  create: 'Create',
-                  goBack: 'Go back'
-                }}
-                navigateToElement={cy.stub()}
-              />
-            </PageHeader.Menu>
-            <PageHeader.Main>
-              <PageHeader.Title description="Description" title="Title" />
-            </PageHeader.Main>
-            <PageHeader.Actions>Actions</PageHeader.Actions>
-          </PageHeader>
-        </PageLayout.Header>
-        <PageLayout.Body>
-          <PageLayout.Actions>
-            <AreaIndicator name="Body actions" />
-          </PageLayout.Actions>
-          <h1>Content</h1>
-        </PageLayout.Body>
-      </PageLayout>
-    )
-  });
-};
-
-describe('Page layout', () => {
-  beforeEach(initialize);
-
-  it('displays the page layout', () => {
-    cy.makeSnapshot();
-  });
-
-  it('opens the quick access poppin when the corresponding logo is displayed', () => {
-    cy.findByTestId('quickaccess').click();
-
-    cy.contains('Entity').should('be.visible');
-    cy.contains('Create').should('be.visible');
-    cy.contains('Go back').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

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,57 +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)
-  },
-  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,32 +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}
-        {...attr}
-      >
-        {children}
-      </MuiListItem>
-    );
-  }
-);

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

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

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