@centreon/ui 24.4.59 → 24.4.60

package/src/components/Icon/Icon.tsx

@@ -1,2 +0,0 @@
-// TODO type IconProps = { name: 'add' | '...' };
-// TODO <Icon name="icon-name" />

package/src/components/Inputs/Switch/Switch.stories.tsx

@@ -1,22 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import Switch from './Switch';
-
-const meta: Meta<typeof Switch> = {
-  component: Switch
-};
-
-export default meta;
-type Story = StoryObj<typeof Switch>;
-
-export const notChecked: Story = {
-  args: {
-    checked: false
-  }
-};
-
-export const checked: Story = {
-  args: {
-    checked: true
-  }
-};

package/src/components/Inputs/Switch/Switch.styles.ts

@@ -1,13 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useSwitchStyles = makeStyles()((theme) => ({
-  switch: {
-    '& .MuiSwitch-thumb': {
-      backgroundColor: theme.palette.common.white
-    },
-    '& span[data-checked="true"] + .MuiSwitch-track': {
-      backgroundColor: theme.palette.success.main,
-      opacity: 1
-    }
-  }
-}));

package/src/components/Inputs/Switch/Switch.tsx

@@ -1,18 +0,0 @@
-import { SwitchProps, Switch as MuiSwitch } from '@mui/material';
-
-import { useSwitchStyles } from './Switch.styles';
-
-const Switch = ({ checked, ...props }: SwitchProps): JSX.Element => {
-  const { classes } = useSwitchStyles();
-
-  return (
-    <MuiSwitch
-      checked={checked}
-      className={classes.switch}
-      data-checked={checked}
-      {...props}
-    />
-  );
-};
-
-export default Switch;

package/src/components/Inputs/index.ts

@@ -1 +0,0 @@
-export { default as Switch } from './Switch/Switch';

package/src/components/ItemComposition/Item.tsx

@@ -1,41 +0,0 @@
-import { ReactElement } from 'react';
-
-import CloseIcon from '@mui/icons-material/Close';
-
-import { IconButton } from '..';
-
-import { useItemStyles } from './ItemComposition.styles';
-
-type Props = {
-  children: ReactElement | Array<ReactElement>;
-  className?: string;
-  deleteButtonHidden?: boolean;
-  labelDelete: string;
-  onDeleteItem: () => void;
-};
-
-export const Item = ({
-  onDeleteItem,
-  children,
-  labelDelete,
-  className,
-  deleteButtonHidden
-}: Props): JSX.Element => {
-  const { classes, cx } = useItemStyles();
-
-  return (
-    <div className={classes.itemContainer}>
-      <div className={cx(classes.itemContent, className)}>{children}</div>
-      <div className={cx({ [classes.visibilityHiden]: deleteButtonHidden })}>
-        <IconButton
-          aria-label={labelDelete}
-          data-testid={labelDelete}
-          icon={<CloseIcon />}
-          size="small"
-          variant="ghost"
-          onClick={onDeleteItem}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/ItemComposition/ItemComposition.cypress.spec.tsx

@@ -1,113 +0,0 @@
-import { Props } from './ItemComposition';
-
-import { ItemComposition } from '.';
-
-const initialize = ({
-  deleteButtonHidden,
-  ...props
-}: Partial<Props> & {
-  deleteButtonHidden?: boolean;
-}): unknown => {
-  const addItem = cy.stub();
-  const deleteItem = cy.stub();
-
-  cy.mount({
-    Component: (
-      <ItemComposition {...props} labelAdd="Add" onAddItem={addItem}>
-        <ItemComposition.Item
-          deleteButtonHidden={deleteButtonHidden}
-          labelDelete="Delete"
-          onDeleteItem={deleteItem}
-        >
-          <div>Item 1</div>
-        </ItemComposition.Item>
-        <ItemComposition.Item
-          deleteButtonHidden={deleteButtonHidden}
-          labelDelete="Delete"
-          onDeleteItem={deleteItem}
-        >
-          <div>Item 2</div>
-        </ItemComposition.Item>
-      </ItemComposition>
-    )
-  });
-
-  return {
-    addItem,
-    deleteItem
-  };
-};
-
-describe('ItemComposition', () => {
-  it('displays the component', () => {
-    initialize({});
-
-    cy.contains('Item 1').should('be.visible');
-    cy.contains('Item 2').should('be.visible');
-    cy.findAllByTestId('Delete').should('have.length', 2);
-    cy.findByTestId('Add').should('be.enabled');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the component with a secondary label', () => {
-    initialize({ secondaryLabel: 'Secondary label' });
-
-    cy.contains('Secondary label').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays add button as hidden when the prop is set to true', () => {
-    initialize({ addbuttonDisabled: true });
-
-    cy.findByTestId('Add').should('be.disabled');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the add button when the prop is set to true', () => {
-    initialize({ addButtonHidden: true });
-
-    cy.findByTestId('Add').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the delete button when the prop is set to true', () => {
-    initialize({ deleteButtonHidden: true });
-
-    cy.findByTestId('Delete').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('calls the add function when the button is clicked', () => {
-    const { addItem } = initialize({});
-
-    cy.findByTestId('Add')
-      .click()
-      .then(() => {
-        expect(addItem).to.have.been.calledWith();
-      });
-  });
-
-  it('calls the delete function when the button is clicked', () => {
-    const { deleteItem } = initialize({});
-
-    cy.findAllByTestId('Delete')
-      .eq(1)
-      .click()
-      .then(() => {
-        expect(deleteItem).to.have.been.calledWith();
-      });
-  });
-
-  it('displays items as linked when the prop is set to true', () => {
-    initialize({ displayItemsAsLinked: true });
-
-    cy.get('[data-linked]').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

package/src/components/ItemComposition/ItemComposition.stories.tsx

@@ -1,92 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Typography } from '@mui/material';
-
-import { SelectField } from '../..';
-
-import { ItemComposition } from '.';
-
-const meta: Meta<typeof ItemComposition> = {
-  component: ItemComposition
-};
-
-export default meta;
-type Story = StoryObj<typeof ItemComposition>;
-
-const stub = (): void => undefined;
-
-export const Default: Story = {
-  args: {
-    children: [...Array(5)].map((_, i) => (
-      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
-        <Typography>Item 1</Typography>
-        <Typography>Item 2</Typography>
-      </ItemComposition.Item>
-    )),
-    labelAdd: 'Add',
-    onAddItem: stub
-  }
-};
-
-export const Empty: Story = {
-  args: {
-    children: [],
-    labelAdd: 'Add',
-    onAddItem: stub
-  }
-};
-
-const options = [
-  {
-    id: 1,
-    name: 'Test select 1'
-  },
-  {
-    id: 2,
-    name: 'Test select 2'
-  },
-  {
-    id: 3,
-    name: 'Test select 3'
-  }
-];
-
-export const WithSelectInputs: Story = {
-  args: {
-    children: [...Array(5)].map((_, i) => (
-      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
-        <SelectField
-          dataTestId="select 1"
-          label="select 1"
-          options={options}
-          selectedOptionId={1}
-          onChange={stub}
-        />
-        <SelectField
-          dataTestId="select 2"
-          label="select 2"
-          options={options}
-          selectedOptionId={2}
-          onChange={stub}
-        />
-      </ItemComposition.Item>
-    )),
-    labelAdd: 'Add',
-    onAddItem: stub
-  }
-};
-
-export const WithLinkedItems: Story = {
-  args: {
-    children: [...Array(5)].map((_, i) => (
-      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
-        <Typography>Item 1</Typography>
-        <Typography>Item 2</Typography>
-      </ItemComposition.Item>
-    )),
-    displayItemsAsLinked: true,
-    labelAdd: 'Add',
-    onAddItem: stub
-  }
-};

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -1,62 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useItemCompositionStyles = makeStyles()((theme) => ({
-  buttonAndSecondaryLabel: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%'
-  },
-  itemCompositionContainer: {
-    width: '100%'
-  },
-  itemCompositionItems: {
-    alignItems: 'flex-start',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    width: '100%'
-  },
-  itemCompositionItemsAndLink: {
-    display: 'flex',
-    flexDirection: 'row-reverse',
-    gap: theme.spacing(0.5),
-    width: '100%'
-  },
-  linkIcon: {
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(0.5, 0),
-    transform: `rotate3d(0, 0, 1, 90deg) translate3d(0, ${theme.spacing(
-      1.6
-    )}, 0)`
-  },
-  linkedItems: {
-    alignItems: 'center',
-    border: `1px solid ${theme.palette.divider}`,
-    borderRight: 'none',
-    display: 'flex',
-    margin: theme.spacing(2, 0, 2, 1),
-    minHeight: '100%',
-    position: 'relative',
-    width: theme.spacing(1)
-  }
-}));
-
-export const useItemStyles = makeStyles()((theme) => ({
-  itemContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1),
-    width: '100%'
-  },
-  itemContent: {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%'
-  },
-  visibilityHiden: {
-    display: 'none'
-  }
-}));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -1,71 +0,0 @@
-import { ReactElement } from 'react';
-
-import { gt } from 'ramda';
-
-import AddIcon from '@mui/icons-material/Add';
-import LinkIcon from '@mui/icons-material/Link';
-import { Typography } from '@mui/material';
-
-import { Button } from '..';
-
-import { useItemCompositionStyles } from './ItemComposition.styles';
-
-export type Props = {
-  IconAdd?;
-  addButtonHidden?: boolean;
-  addbuttonDisabled?: boolean;
-  children: Array<ReactElement>;
-  displayItemsAsLinked?: boolean;
-  labelAdd: string;
-  onAddItem: () => void;
-  secondaryLabel?: string;
-};
-
-export const ItemComposition = ({
-  onAddItem,
-  children,
-  labelAdd,
-  addbuttonDisabled,
-  addButtonHidden,
-  IconAdd,
-  displayItemsAsLinked,
-  secondaryLabel
-}: Props): JSX.Element => {
-  const { classes } = useItemCompositionStyles();
-
-  const hasMoreThanOneChildren = gt(children.length, 1);
-
-  return (
-    <div className={classes.itemCompositionContainer}>
-      <div className={classes.itemCompositionItemsAndLink}>
-        <div className={classes.itemCompositionItems}>{children}</div>
-        {displayItemsAsLinked && hasMoreThanOneChildren && (
-          <div data-linked className={classes.linkedItems}>
-            <LinkIcon className={classes.linkIcon} viewBox="0 0 24 24" />
-          </div>
-        )}
-      </div>
-      <div className={classes.buttonAndSecondaryLabel}>
-        {!addButtonHidden && (
-          <Button
-            aria-label={labelAdd}
-            data-testid={labelAdd}
-            disabled={addbuttonDisabled}
-            icon={IconAdd || <AddIcon />}
-            iconVariant="start"
-            size="small"
-            variant="ghost"
-            onClick={onAddItem}
-          >
-            {labelAdd}
-          </Button>
-        )}
-        {secondaryLabel && (
-          <Typography sx={{ color: 'text.secondary' }}>
-            {secondaryLabel}
-          </Typography>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/ItemComposition/index.ts

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

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}>
-      {children}
-    </section>
-  );
-};

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

@@ -1,24 +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}
-    >
-      {children}
-    </section>
-  );
-};