@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.13 → 23.10.18-MON-17793-create-graph-component-centreon-ui.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.13",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.14",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,107 @@
+import { makeStyles } from 'tss-react/mui';
+import { T, always, cond, equals } from 'ramda';
+
+import { SvgIconComponent } from '@mui/icons-material';
+import {
+  FormControlLabel,
+  Checkbox as MuiCheckbox,
+  Box,
+  Typography
+} from '@mui/material';
+
+export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
+
+interface StyleProps {
+  disabled: boolean;
+  hasIcon: boolean;
+  labelPlacement: LabelPlacement;
+}
+
+const getLabelSpacing = (labelPlacement, theme): string => {
+  return cond([
+    [equals('top'), always(theme.spacing(0, 0, 0.5))],
+    [equals('end'), always(theme.spacing(0, 0, 0, 0.5))],
+    [T, always(0)]
+  ])(labelPlacement);
+};
+
+const useStyles = makeStyles<StyleProps>()(
+  (theme, { disabled, hasIcon, labelPlacement }) => ({
+    container: hasIcon
+      ? {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          minHeight: theme.spacing(11)
+        }
+      : {},
+    icon: {
+      fontSize: theme.spacing(10)
+    },
+    label: {
+      color: disabled
+        ? theme.palette.action.disabled
+        : theme.palette.text.secondary,
+      fontSize: theme.typography.body1.fontSize,
+      fontWeight: equals(labelPlacement, 'top')
+        ? theme.typography.fontWeightBold
+        : theme.typography.fontWeightMedium,
+      padding: getLabelSpacing(labelPlacement, theme)
+    }
+  })
+);
+
+interface Props {
+  Icon?: SvgIconComponent;
+  checked: boolean;
+  className?: string;
+  dataTestId?: string;
+  disabled?: boolean;
+  label: string;
+  labelPlacement?: LabelPlacement;
+  onChange?: (e) => void;
+}
+
+const Checkbox = ({
+  Icon,
+  checked,
+  label,
+  onChange,
+  className,
+  disabled = false,
+  labelPlacement = 'end',
+  dataTestId
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({
+    disabled,
+    hasIcon: !!Icon,
+    labelPlacement
+  });
+
+  return (
+    <Box className={cx(classes.container, className)}>
+      {Icon && <Icon className={classes.icon} />}
+      <FormControlLabel
+        control={
+          <MuiCheckbox
+            checked={checked}
+            color="primary"
+            disabled={disabled}
+            id={label}
+            size="small"
+            sx={{ padding: 0 }}
+            onChange={onChange}
+          />
+        }
+        data-testid={dataTestId || ''}
+        key={label}
+        label={<Typography className={classes.label}>{label}</Typography>}
+        labelPlacement={labelPlacement}
+        sx={{ margin: 0, padding: 0 }}
+      />
+    </Box>
+  );
+};
+
+export default Checkbox;

package/src/Checkbox/CheckboxGroup/index.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import CheckboxGroup from '.';
+
+const options = ['ok', 'warning', 'critical', 'unknown'];
+
+const values = ['ok', 'critical'];
+
+export default {
+  argTypes: {},
+  component: CheckboxGroup,
+  title: 'Checkbox/Multi'
+} as ComponentMeta<typeof CheckboxGroup>;
+
+const Template: ComponentStory<typeof CheckboxGroup> = (args) => (
+  <CheckboxGroup {...args} />
+);
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+  options,
+  values
+};
+
+export const Horizontal = Template.bind({});
+
+Horizontal.args = {
+  direction: 'horizontal',
+  options,
+  values
+};
+
+export const LabelOnTop = Template.bind({});
+
+LabelOnTop.args = {
+  direction: 'horizontal',
+  labelPlacement: 'top',
+  options,
+  values
+};

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -0,0 +1,66 @@
+import { equals, includes } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import { FormGroup } from '@mui/material';
+
+import Checkbox, { LabelPlacement } from '../Checkbox';
+
+interface Props {
+  dataTestId?: string;
+  direction?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  labelPlacement?: LabelPlacement;
+  onChange?: (e) => void;
+  options: Array<string>;
+  values: Array<string>;
+}
+
+const useStyles = makeStyles()((theme) => ({
+  checkbox: {
+    display: 'flex',
+    justifyContent: 'center',
+    minWidth: theme.spacing(10)
+  },
+  container: {
+    display: 'flex',
+    gap: 1
+  }
+}));
+
+const CheckboxGroup = ({
+  options,
+  values,
+  direction = 'vertical',
+  onChange,
+  labelPlacement = 'end',
+  disabled = false,
+  dataTestId
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const row = !equals(direction, 'vertical');
+
+  return (
+    <FormGroup
+      className={classes.container}
+      data-testid={dataTestId || ''}
+      row={row}
+    >
+      {options.map((value) => {
+        return (
+          <Checkbox
+            checked={includes(value, values)}
+            className={classes.checkbox}
+            disabled={disabled}
+            key={value}
+            label={value}
+            labelPlacement={labelPlacement}
+            onChange={onChange}
+          />
+        );
+      })}
+    </FormGroup>
+  );
+};
+
+export default CheckboxGroup;

package/src/Checkbox/index.stories.tsx

@@ -0,0 +1,39 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import MailIcon from '@mui/icons-material/MailOutline';
+
+import Checkbox from './Checkbox';
+
+export default {
+  argTypes: {},
+  component: Checkbox,
+  title: 'Checkbox/Single'
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} />
+);
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+  checked: true,
+  label: 'Up'
+};
+
+export const WithIcon = Template.bind({});
+
+WithIcon.args = {
+  Icon: MailIcon,
+  checked: true,
+  label: 'Mail',
+  labelPlacement: 'end'
+};
+
+export const LabelOnTop = Template.bind({});
+
+LabelOnTop.args = {
+  checked: true,
+  label: 'Down',
+  labelPlacement: 'top'
+};

package/src/Checkbox/index.tsx

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

package/src/Form/CollapsibleGroup.tsx

@@ -18,6 +18,7 @@ import { Group } from './Inputs/models';
 
 interface Props {
   children: React.ReactNode;
+  className?: string;
   defaultIsOpen?: boolean;
   group?: Group;
   hasGroupTitle: boolean;
@@ -50,9 +51,10 @@ const CollapsibleGroup = ({
   isCollapsible,
   group,
   hasGroupTitle,
-  defaultIsOpen = false
+  defaultIsOpen = false,
+  className
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -61,6 +63,8 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
+  const containerClassName = className || '';
+
   const CollapseIcon = isOpen ? ExpandMore : ChevronRightIcon;
   const ContainerComponent = useCallback(
     ({
@@ -72,13 +76,13 @@ const CollapsibleGroup = ({
           disableGutters
           disableRipple
           aria-label={group?.name}
-          className={classes.groupTitleContainer}
+          className={cx(classes.groupTitleContainer, containerClassName)}
           onClick={toggle}
         >
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={classes.groupTitleContainer}>
+        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
           {containerComponentChildren}
         </Box>
       ),
@@ -91,7 +95,9 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           {isCollapsible && <CollapseIcon />}
           <div className={classes.groupTitleIcon}>
-            <Typography variant="h5">{t(group?.name as string)}</Typography>
+            <Typography className="groupText" variant="h5">
+              {t(group?.name as string)}
+            </Typography>
             {group?.EndIcon && (
               <Tooltip
                 classes={{

package/src/Form/Form.stories.tsx

@@ -71,7 +71,7 @@ export const basicFormWithHorizontalGroups = (): JSX.Element => (
     <Form<BasicForm>
       {...mandatoryProps}
       groupDirection={GroupDirection.Horizontal}
-      groups={basicFormGroups}
+      groups={basicFormGroups.filter((group) => group.order !== 3)}
     />
   </Paper>
 );

package/src/Form/Form.tsx

@@ -18,8 +18,12 @@ export enum GroupDirection {
 
 export type FormProps<T> = {
   Buttons?: React.ComponentType;
+  areGroupsOpen?: boolean;
+  children?: JSX.Element;
+  className?: string;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
+  groupsClassName?: string;
   initialValues: T;
   inputs: Array<InputProps>;
   isCollapsible?: boolean;
@@ -30,6 +34,10 @@ export type FormProps<T> = {
 } & Omit<FormikSharedConfig<T>, 'isInitialValid'>;
 
 const Form = <T extends object>({
+  children,
+  className,
+  groupsClassName,
+  areGroupsOpen,
   initialValues,
   validate,
   validationSchema,
@@ -42,13 +50,15 @@ const Form = <T extends object>({
   groupDirection = GroupDirection.Vertical,
   ...formikSharedConfig
 }: FormProps<T>): JSX.Element => {
-  const { classes } = useStyles();
+  const { cx, classes } = useStyles();
 
   if (isLoading) {
     return (
       <Inputs
         isLoading
+        areGroupsOpen={areGroupsOpen}
         groups={groups}
+        groupsClassName={groupsClassName}
         inputs={inputs}
         isCollapsible={isCollapsible}
       />
@@ -63,14 +73,19 @@ const Form = <T extends object>({
       onSubmit={submit}
       {...formikSharedConfig}
     >
-      <div className={classes.form}>
-        <Inputs
-          groupDirection={groupDirection}
-          groups={groups}
-          inputs={inputs}
-          isCollapsible={isCollapsible}
-        />
-        <Buttons />
+      <div>
+        {children}
+        <div className={cx(className, classes.form)}>
+          <Inputs
+            areGroupsOpen={areGroupsOpen}
+            groupDirection={groupDirection}
+            groups={groups}
+            groupsClassName={groupsClassName}
+            inputs={inputs}
+            isCollapsible={isCollapsible}
+          />
+          <Buttons />
+        </div>
       </div>
     </Formik>
   );

package/src/Form/Inputs/Checkbox.tsx

@@ -0,0 +1,57 @@
+import { ChangeEvent } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import { path, split } from 'ramda';
+
+import { Box } from '@mui/material';
+
+import { Checkbox as CheckboxComponent } from '../../Checkbox';
+import { useMemoComponent } from '../..';
+
+import { InputPropsWithoutGroup } from './models';
+
+const Checkbox = ({
+  checkbox,
+  fieldName,
+  getDisabled,
+  hideInput,
+  dataTestId
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const value = path(fieldNamePath, values);
+
+  const disabled = getDisabled?.(values) || false;
+  const hideCheckbox = hideInput?.(values) || false;
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    const newValue = {
+      ...value,
+      checked: event.target.checked,
+      label: event.target.id
+    };
+
+    setFieldValue(fieldName, newValue);
+  };
+
+  return useMemoComponent({
+    Component: hideCheckbox ? (
+      <Box />
+    ) : (
+      <CheckboxComponent
+        Icon={value?.Icon}
+        checked={value?.checked}
+        dataTestId={dataTestId || ''}
+        disabled={disabled}
+        label={value?.label}
+        labelPlacement={checkbox?.labelPlacement || 'end'}
+        onChange={handleChange}
+      />
+    ),
+    memoProps: [value, disabled, hideCheckbox]
+  });
+};
+
+export default Checkbox;

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -0,0 +1,76 @@
+import { ChangeEvent, useEffect } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import { equals, includes, path, split } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
+import { useMemoComponent } from '../..';
+
+import { InputPropsWithoutGroup } from './models';
+
+const CheckboxGroup = ({
+  checkbox,
+  fieldName,
+  additionalLabel,
+  getDisabled,
+  hideInput,
+  dataTestId
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+
+  const fieldNamePath = split('.', fieldName);
+
+  const value = path(fieldNamePath, values);
+
+  const disabled = getDisabled?.(values) || false;
+  const hideCheckbox = hideInput?.(values) || false;
+
+  useEffect(() => {
+    if (!disabled && !hideCheckbox) {
+      return;
+    }
+    const resetedValue = value?.map((element) => ({
+      ...element,
+      checked: false
+    }));
+    setFieldValue(fieldName, resetedValue);
+  }, [disabled, hideCheckbox]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    const label = event.target.id;
+    if (!includes(label, value)) {
+      setFieldValue(fieldName, [...value, label]);
+
+      return;
+    }
+
+    setFieldValue(
+      fieldName,
+      value?.filter((elm) => !equals(elm, label))
+    );
+  };
+
+  return useMemoComponent({
+    Component: hideCheckbox ? (
+      <Box />
+    ) : (
+      <Box>
+        {additionalLabel && <Typography>{additionalLabel}</Typography>}
+        <CheckboxGroupComponent
+          dataTestId={dataTestId || ''}
+          direction={checkbox?.direction}
+          disabled={disabled}
+          labelPlacement={checkbox?.labelPlacement || 'end'}
+          options={checkbox?.options as Array<string>}
+          values={value}
+          onChange={handleChange}
+        />
+      </Box>
+    ),
+    memoProps: [value, disabled, hideCheckbox]
+  });
+};
+
+export default CheckboxGroup;

package/src/Form/Inputs/Grid.tsx

@@ -23,14 +23,16 @@ const useStyles = makeStyles<StylesProps>()(
 );
 
 const Grid = ({ grid }: InputPropsWithoutGroup): JSX.Element => {
-  const { classes } = useStyles({
+  const { classes, cx } = useStyles({
     alignItems: grid?.alignItems,
     columns: grid?.columns.length,
     gridTemplateColumns: grid?.gridTemplateColumns
   });
 
+  const className = grid?.className || '';
+
   return (
-    <div className={classes.gridFields}>
+    <div className={cx(classes.gridFields, className)}>
       {grid?.columns.map((field) => {
         const Input = getInput(field.type);
 

package/src/Form/Inputs/index.tsx

@@ -18,6 +18,8 @@ import TextInput from './Text';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
 import FieldsTable from './FieldsTable/FieldsTable';
 import Grid from './Grid';
+import CheckboxGroup from './CheckboxGroup';
+import Checkbox from './Checkbox';
 import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
 
@@ -61,7 +63,15 @@ export const getInput = R.cond<
     R.always(FieldsTable)
   ],
   [R.equals(InputType.Grid) as (b: InputType) => boolean, R.always(Grid)],
-  [R.equals(InputType.Custom) as (b: InputType) => boolean, R.always(Custom)]
+  [R.equals(InputType.Custom) as (b: InputType) => boolean, R.always(Custom)],
+  [
+    R.equals(InputType.Checkbox) as (b: InputType) => boolean,
+    R.always(Checkbox)
+  ],
+  [
+    R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
+    R.always(CheckboxGroup)
+  ]
 ]);
 
 interface StylesProps {
@@ -89,7 +99,9 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
       ? 'row'
       : 'column'
   },
-  inputWrapper: { width: '100%' },
+  inputWrapper: {
+    width: '100%'
+  },
   inputs: {
     display: 'flex',
     flexDirection: 'column',
@@ -99,8 +111,10 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
 }));
 
 interface Props {
+  areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
+  groupsClassName?: string;
   inputs: Array<InputProps>;
   isCollapsible: boolean;
   isLoading?: boolean;
@@ -111,9 +125,11 @@ const Inputs = ({
   groups = [],
   isLoading = false,
   isCollapsible,
-  groupDirection
+  groupDirection,
+  groupsClassName,
+  areGroupsOpen
 }: Props): JSX.Element => {
-  const { classes } = useStyles({ groupDirection });
+  const { classes, cx } = useStyles({ groupDirection });
   const { t } = useTranslation();
   const formikContext = useFormikContext<FormikValues>();
 
@@ -178,12 +194,13 @@ const Inputs = ({
           ? R.find(R.propEq('name', groupName), groups)
           : ({} as Group);
 
-        const isFirstElement = R.equals(index, 0);
+        const isFirstElement = areGroupsOpen || R.equals(index, 0);
 
         return (
           <Fragment key={groupName}>
             <div>
               <CollapsibleGroup
+                className={groupsClassName}
                 defaultIsOpen={isFirstElement}
                 group={groupProps}
                 hasGroupTitle={hasGroupTitle}
@@ -209,13 +226,18 @@ const Inputs = ({
                       >
                         {inputProps.additionalLabel && (
                           <Typography
-                            className={classes.additionalLabel}
+                            className={cx(
+                              classes.additionalLabel,
+                              inputProps?.additionalLabelClassName
+                            )}
                             variant="body1"
                           >
                             {t(inputProps.additionalLabel)}
                           </Typography>
                         )}
-                        <Input {...inputProps} />
+                        <div className={inputProps?.inputClassName || ''}>
+                          <Input {...inputProps} />
+                        </div>
                       </div>
                     );
                   })}