@centreon/ui 24.5.12 → 24.5.13

package/src/components/Icon/Icon.tsx

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

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

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

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

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

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

package/src/components/ItemComposition/Item.tsx

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

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

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

@@ -0,0 +1,62 @@
+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: 'grid',
+    gridAutoFlow: 'column',
+    width: '100%'
+  },
+  visibilityHiden: {
+    display: 'none'
+  }
+}));

package/src/components/ItemComposition/ItemComposition.tsx

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

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

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