@centreon/ui 23.10.54 → 23.10.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.54",
+  "version": "23.10.56",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Form/Inputs/index.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useMemo } from 'react';
 
 import * as R from 'ramda';
-import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { FormikValues, useFormikContext } from 'formik';
 
@@ -126,7 +125,6 @@ const Inputs = ({
   areGroupsOpen
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ groupDirection });
-  const { t } = useTranslation();
   const formikContext = useFormikContext<FormikValues>();
 
   const groupsName = R.pluck('name', groups);
@@ -228,7 +226,7 @@ const Inputs = ({
                             )}
                             variant="body1"
                           >
-                            {t(inputProps.additionalLabel)}
+                            {inputProps.additionalLabel}
                           </Typography>
                         )}
                         <div className={inputProps?.inputClassName || ''}>

package/src/Form/Inputs/models.ts

@@ -29,7 +29,7 @@ interface FieldsTableGetRequiredProps {
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
 
 export interface InputProps {
-  additionalLabel?: string;
+  additionalLabel?: string | JSX.Element;
   additionalLabelClassName?: string;
   additionalMemoProps?: Array<unknown>;
   autocomplete?: {

package/src/RichTextEditor/ContentEditable.tsx

@@ -135,6 +135,10 @@ const ContentEditable = ({
   const isEditable = editor.isEditable();
 
   useEffect(() => {
+    if (isNil(disabled)) {
+      return;
+    }
+
     editor.setEditable(!disabled);
   }, [disabled]);
 

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    children: 'Label'
+  }
+};
+
+export const compact: Story = {
+  args: {
+    ...Default.args,
+    compact: true
+  }
+};

package/src/components/Avatar/Avatar.styles.ts

@@ -0,0 +1,11 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useAvatarStyles = makeStyles()((theme) => ({
+  avatar: {
+    '&[data-compact="true"]': {
+      fontSize: theme.typography.body1.fontSize,
+      height: theme.spacing(2),
+      width: theme.spacing(2)
+    }
+  }
+}));

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+import { AvatarProps, Avatar as MUIAvatar } from '@mui/material';
+
+import { useAvatarStyles } from './Avatar.styles';
+
+interface Props extends AvatarProps {
+  children: ReactNode;
+  className?: string;
+  compact?: boolean;
+}
+
+const Avatar = ({
+  compact = false,
+  children,
+  className,
+  ...attr
+}: Props): JSX.Element => {
+  const { classes, cx } = useAvatarStyles();
+
+  return (
+    <MUIAvatar
+      {...attr}
+      className={cx(classes.avatar, className)}
+      data-compact={`${compact}`}
+    >
+      {children}
+    </MUIAvatar>
+  );
+};
+
+export default Avatar;

package/src/components/Avatar/index.ts

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

package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CollapsibleItem } from './CollapsibleItem';
+
+const meta: Meta<typeof CollapsibleItem> = {
+  component: CollapsibleItem
+};
+
+export default meta;
+type Story = StoryObj<typeof CollapsibleItem>;
+
+export const Default: Story = {
+  args: {
+    children: 'Label',
+    title: 'Title'
+  }
+};
+
+export const ExpandedByDefault: Story = {
+  args: {
+    children: 'Label',
+    defaultExpanded: true,
+    title: 'Title'
+  }
+};

package/src/components/CollapsibleItem/CollapsibleItem.tsx

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+
+import {
+  AccordionDetails,
+  AccordionSummary,
+  Accordion,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import { useCollapsibleItemStyles } from './useCollapsibleItemStyles';
+
+interface Props {
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  title: string;
+}
+
+export const CollapsibleItem = ({
+  title,
+  children,
+  defaultExpanded
+}: Props): JSX.Element => {
+  const { classes } = useCollapsibleItemStyles();
+
+  return (
+    <Accordion
+      disableGutters
+      className={classes.accordion}
+      defaultExpanded={defaultExpanded}
+    >
+      <AccordionSummary
+        classes={{
+          content: classes.accordionSummary
+        }}
+        expandIcon={<ExpandMoreIcon color="primary" />}
+      >
+        <Typography color="primary" variant="h6">
+          {title}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails className={classes.accordionDetails}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+};

package/src/components/CollapsibleItem/index.ts

@@ -0,0 +1 @@
+export { CollapsibleItem } from './CollapsibleItem';

package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts

@@ -0,0 +1,14 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useCollapsibleItemStyles = makeStyles()((theme) => ({
+  accordion: {
+    border: 'none',
+    borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  accordionDetails: {
+    padding: theme.spacing(0, 2, 2)
+  },
+  accordionSummary: {
+    margin: theme.spacing(1.5, 0)
+  }
+}));

package/src/components/ItemComposition/Item.tsx

@@ -9,6 +9,7 @@ import { useItemStyles } from './ItemComposition.styles';
 type Props = {
   children: Array<ReactElement>;
   className?: string;
+  deleteButtonHidden?: boolean;
   labelDelete: string;
   onDeleteItem: () => void;
 };
@@ -17,21 +18,24 @@ export const Item = ({
   onDeleteItem,
   children,
   labelDelete,
-  className
+  className,
+  deleteButtonHidden
 }: Props): JSX.Element => {
   const { classes, cx } = useItemStyles();
 
   return (
     <div className={classes.itemContainer}>
       <div className={cx(classes.itemContent, className)}>{children}</div>
-      <IconButton
-        aria-label={labelDelete}
-        data-testid={labelDelete}
-        icon={<CloseIcon />}
-        size="small"
-        variant="ghost"
-        onClick={onDeleteItem}
-      />
+      {!deleteButtonHidden && (
+        <IconButton
+          aria-label={labelDelete}
+          data-testid={labelDelete}
+          icon={<CloseIcon />}
+          size="small"
+          variant="ghost"
+          onClick={onDeleteItem}
+        />
+      )}
     </div>
   );
 };

package/src/components/ItemComposition/ItemComposition.tsx

@@ -7,6 +7,7 @@ import { Button } from '..';
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
 type Props = {
+  addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
   labelAdd: string;
@@ -17,25 +18,28 @@ export const ItemComposition = ({
   onAddItem,
   children,
   labelAdd,
-  addbuttonDisabled
+  addbuttonDisabled,
+  addButtonHidden
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
   return (
     <div className={classes.itemCompositionContainer}>
       {children}
-      <Button
-        aria-label={labelAdd}
-        data-testid={labelAdd}
-        disabled={addbuttonDisabled}
-        icon={<AddIcon />}
-        iconVariant="start"
-        size="small"
-        variant="ghost"
-        onClick={onAddItem}
-      >
-        {labelAdd}
-      </Button>
+      {!addButtonHidden && (
+        <Button
+          aria-label={labelAdd}
+          data-testid={labelAdd}
+          disabled={addbuttonDisabled}
+          icon={<AddIcon />}
+          iconVariant="start"
+          size="small"
+          variant="ghost"
+          onClick={onAddItem}
+        >
+          {labelAdd}
+        </Button>
+      )}
     </div>
   );
 };

package/src/components/Modal/Modal.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof Modal> = {
       control: {
         type: 'select'
       },
-      options: ['small', 'medium', 'large']
+      options: ['small', 'medium', 'large', 'xlarge', 'fullscreen']
     }
   },
   component: Modal
@@ -109,3 +109,34 @@ export const AsPassive: Story = {
     </Modal>
   )
 };
+
+export const fullscreenWithCustomMargins: Story = {
+  args: {
+    fullscreenMargins: {
+      bottom: 20,
+      left: 40,
+      right: 10,
+      top: 90
+    },
+    hasCloseButton: true,
+    open: true,
+    size: 'fullscreen'
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <Modal.Header>Modal title</Modal.Header>
+      <Modal.Body>
+        <p>
+          Occaecat consectetur amet officia magna. Eu sunt aute duis duis cillum
+          irure mollit ex aute excepteur eu id cillum.
+        </p>
+      </Modal.Body>
+      <Modal.Actions
+        labels={{
+          cancel: 'Cancel',
+          confirm: 'Confirm'
+        }}
+      />
+    </Modal>
+  )
+};

package/src/components/Modal/Modal.styles.ts

@@ -1,11 +1,37 @@
 import { makeStyles } from 'tss-react/mui';
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles<{
+  bottom?: number;
+  left?: number;
+  right?: number;
+  top?: number;
+}>()((theme, props) => ({
   modal: {
     '& .MuiDialog-paper': {
       gap: theme.spacing(2),
       padding: theme.spacing(2)
     },
+    '&[data-size="fullscreen"]': {
+      zIndex: 0
+    },
+    '&[data-size="fullscreen"] .MuiBackdrop-root': {
+      display: 'none'
+    },
+    '&[data-size="fullscreen"] .MuiDialog-container': {
+      alignItems: 'flex-end',
+      height: '100vh',
+      justifyContent: 'flex-end'
+    },
+    '&[data-size="fullscreen"] .MuiDialog-paper': {
+      bottom: props?.bottom ?? 0,
+      left: props?.left ?? 0,
+      margin: 0,
+      maxHeight: 'unset',
+      maxWidth: 'unset',
+      position: 'absolute',
+      right: props?.right ?? 0,
+      top: props?.top ?? 0
+    },
     '&[data-size="large"] .MuiDialog-paper': {
       maxWidth: '640px',
       width: '640px'
@@ -35,7 +61,8 @@ const useStyles = makeStyles()((theme) => ({
       color: theme.palette.text.secondary,
       margin: theme.spacing(1, 0, 1, 0),
       width: '90%'
-    }
+    },
+    height: '100%'
   },
   modalCloseButton: {
     position: 'absolute',

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,8 @@
 import React, { ReactElement } from 'react';
 
-import { Dialog as MuiDialog } from '@mui/material';
+import { equals } from 'ramda';
+
+import { Dialog as MuiDialog, Slide } from '@mui/material';
 import { Close as CloseIcon } from '@mui/icons-material';
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
@@ -10,13 +12,19 @@ import { useStyles } from './Modal.styles';
 
 export type ModalProps = {
   children: React.ReactNode;
+  fullscreenMargins?: {
+    bottom?: number;
+    left?: number;
+    right?: number;
+    top?: number;
+  };
   hasCloseButton?: boolean;
   onClose?: (
     event: object,
     reason: 'escapeKeyDown' | 'backdropClick' | 'closeButton'
   ) => void;
   open: boolean;
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
 } & AriaLabelingAttributes;
 
 /** *
@@ -28,12 +36,24 @@ const Modal = ({
   onClose,
   open,
   size = 'small',
+  fullscreenMargins = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0
+  },
   ...attr
 }: ModalProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes } = useStyles(fullscreenMargins);
+
+  const isFullscreen = equals(size, 'fullscreen');
 
   return (
     <MuiDialog
+      TransitionComponent={isFullscreen ? Slide : undefined}
+      TransitionProps={{
+        direction: 'up'
+      }}
       className={classes.modal}
       data-size={size}
       open={open}

package/src/components/index.ts

@@ -8,3 +8,5 @@ export * from './Tooltip';
 export * from './Menu';
 export * from './List';
 export * from './ItemComposition';
+export * from './Avatar';
+export * from './CollapsibleItem';