@centreon/ui 24.9.4 → 24.9.6

package/src/Form/Inputs/models.ts

@@ -1,25 +1,22 @@
 import { FormikValues } from 'formik';
 
-import { SvgIconProps, TypographyProps } from '@mui/material';
+import { SvgIconProps } from '@mui/material';
 
 import { SelectEntry } from '../../InputField/Select';
 import { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
 
 export enum InputType {
-  Switch = 0,
-  Radio = 1,
-  Text = 2,
-  SingleAutocomplete = 3,
-  MultiAutocomplete = 4,
-  Password = 5,
-  SingleConnectedAutocomplete = 6,
-  MultiConnectedAutocomplete = 7,
-  FieldsTable = 8,
-  Grid = 9,
-  Custom = 10,
-  Checkbox = 11,
-  CheckboxGroup = 12,
-  List = 13
+  Switch,
+  Radio,
+  Text,
+  SingleAutocomplete,
+  MultiAutocomplete,
+  Password,
+  SingleConnectedAutocomplete,
+  MultiConnectedAutocomplete,
+  FieldsTable,
+  Grid,
+  Custom
 }
 
 interface FieldsTableGetRequiredProps {
@@ -27,26 +24,16 @@ interface FieldsTableGetRequiredProps {
   values: FormikValues;
 }
 
-export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
-
 export interface InputProps {
-  additionalLabel?: string | JSX.Element;
-  additionalLabelClassName?: string;
+  additionalLabel?: string;
   additionalMemoProps?: Array<unknown>;
-  autoFocus?: boolean;
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
   };
-  change?: ({ setFieldValue, value, setFieldTouched }) => void;
-  checkbox?: {
-    direction?: 'horizontal' | 'vertical';
-    labelPlacement?: LabelPlacement;
-    options?: Array<string>;
-  };
+  change?: ({ setFieldValue, value }) => void;
   connectedAutocomplete?: {
     additionalConditionParameters: Array<ConditionsSearchParameter>;
-    chipColor?: string;
     endpoint?: string;
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
@@ -55,7 +42,6 @@ export interface InputProps {
     Component: React.ComponentType<InputPropsWithoutGroup>;
   };
   dataTestId?: string;
-  disableSortedOptions?: boolean;
   fieldName: string;
   fieldsTable?: {
     additionalFieldsToMemoize?: Array<string>;
@@ -71,24 +57,15 @@ export interface InputProps {
   getRequired?: (values: FormikValues) => boolean;
   grid?: {
     alignItems?: string;
-    className?: string;
     columns: Array<Omit<InputProps, 'group'>>;
     gridTemplateColumns?: string;
   };
   group: string;
   hideInput?: (values: FormikValues) => boolean;
-  inputClassName?: string;
   label: string;
-  list?: {
-    AddItem: React.ComponentType<{ addItem }>;
-    SortContent: React.ComponentType<object>;
-    addItemLabel?: string;
-    itemProps: Array<string>;
-    sortLabel?: string;
-  };
   radio?: {
     options?: Array<{
-      label: string | JSX.Element;
+      label: string;
       value: boolean | string;
     }>;
     row?: boolean;
@@ -98,11 +75,8 @@ export interface InputProps {
     getChecked?: (value) => boolean;
   };
   text?: {
-    endAdornment?: JSX.Element;
     multilineRows?: number;
-    placeholder?: string;
     type?: string;
-    min?: number;
   };
   type: InputType;
 }
@@ -116,5 +90,4 @@ export interface Group {
   TooltipContent?: () => JSX.Element;
   name: string;
   order: number;
-  titleAttributes?: TypographyProps;
 }

package/src/Form/{Form.stories.tsx → index.stories.tsx}

@@ -1,15 +1,16 @@
 import { Paper } from '@mui/material';
 
-import { Form, GroupDirection } from './Form';
 import {
   BasicForm,
-  CustomButton,
   basicFormGroups,
   basicFormInitialValues,
   basicFormInputs,
-  basicFormValidationSchema
+  basicFormValidationSchema,
+  CustomButton
 } from './storiesData';
 
+import Form, { GroupDirection } from '.';
+
 export default { title: 'Form' };
 
 const submit = (_, { setSubmitting }): void => {
@@ -71,7 +72,7 @@ export const basicFormWithHorizontalGroups = (): JSX.Element => (
     <Form<BasicForm>
       {...mandatoryProps}
       groupDirection={GroupDirection.Horizontal}
-      groups={basicFormGroups.filter((group) => group.order !== 3)}
+      groups={basicFormGroups}
     />
   </Paper>
 );

package/src/Form/index.tsx

@@ -0,0 +1,72 @@
+import { Formik, FormikHelpers, FormikValues } from 'formik';
+import * as Yup from 'yup';
+
+import FormButtons from './FormButtons';
+import Inputs from './Inputs';
+import { Group, InputProps } from './Inputs/models';
+
+export enum GroupDirection {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical'
+}
+
+interface Props<T> {
+  Buttons?: React.ComponentType;
+  groupDirection?: GroupDirection;
+  groups?: Array<Group>;
+  initialValues: T;
+  inputs: Array<InputProps>;
+  isCollapsible?: boolean;
+  isLoading?: boolean;
+  submit: (values: T, bag: FormikHelpers<T>) => void | Promise<void>;
+  validate?: (values: FormikValues) => void;
+  validationSchema: Yup.SchemaOf<T>;
+}
+
+const Form = <T extends object>({
+  initialValues,
+  validate,
+  validationSchema,
+  submit,
+  groups,
+  inputs,
+  Buttons = FormButtons,
+  isLoading = false,
+  isCollapsible = false,
+  groupDirection = GroupDirection.Vertical
+}: Props<T>): JSX.Element => {
+  if (isLoading) {
+    return (
+      <Inputs
+        isLoading
+        groups={groups}
+        inputs={inputs}
+        isCollapsible={isCollapsible}
+      />
+    );
+  }
+
+  return (
+    <Formik<T>
+      enableReinitialize
+      validateOnBlur
+      validateOnMount
+      initialValues={initialValues}
+      validate={validate}
+      validationSchema={validationSchema}
+      onSubmit={submit}
+    >
+      <div>
+        <Inputs
+          groupDirection={groupDirection}
+          groups={groups}
+          inputs={inputs}
+          isCollapsible={isCollapsible}
+        />
+        <Buttons />
+      </div>
+    </Formik>
+  );
+};
+
+export default Form;

package/src/Form/storiesData.tsx

@@ -1,14 +1,13 @@
 import { FormikValues, useFormikContext } from 'formik';
+import * as Yup from 'yup';
 import { equals, prop } from 'ramda';
 
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import MailIcon from '@mui/icons-material/MailOutline';
 import { Typography } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
 import { SelectEntry } from '../InputField/Select';
 import { Listing } from '../api/models';
 
-import { array, boolean, number, object, string } from 'yup';
 import {
   Group,
   InputProps,
@@ -43,42 +42,48 @@ export interface BasicForm {
   sports: Array<SelectEntry>;
 }
 
-const selectEntryValidationSchema = object().shape({
-  id: number().required('Required'),
-  name: string().required('Required')
+const selectEntryValidationSchema = Yup.object().shape({
+  id: Yup.number().required('Required'),
+  name: Yup.string().required('Required')
 });
 
-export const basicFormValidationSchema = object().shape({
-  active: boolean().required('Active is required'),
-  activeSortableFieldsTable: boolean().required(
+export const basicFormValidationSchema = Yup.object().shape({
+  active: Yup.boolean().required('Active is required'),
+  activeSortableFieldsTable: Yup.boolean().required(
     'Active Sortable FieldsTable is required'
   ),
-  animals: array().of(selectEntryValidationSchema.required('Required')),
-  anotherText: string(),
-  certificate: string(),
+  animals: Yup.array().of(selectEntryValidationSchema.required('Required')),
+  anotherText: Yup.string(),
+  certificate: Yup.string(),
   class: selectEntryValidationSchema.nullable().required('Required'),
-  custom: string().required('Custom is required'),
-  email: string().email('Invalid email').required('Email is required'),
+  custom: Yup.string().required('Custom is required'),
+  email: Yup.string().email('Invalid email').required('Email is required'),
   group: selectEntryValidationSchema.nullable().required('Required'),
-  inviteUsers: array().of(
-    object({
-      email: string().email('Invalid user email').required('Email is required'),
+  inviteUsers: Yup.array().of(
+    Yup.object({
+      email: Yup.string()
+        .email('Invalid user email')
+        .required('Email is required'),
       role: selectEntryValidationSchema
     })
   ),
-  inviteUsers2: array().of(string().email('Invalid user email')),
-  isForced: boolean().required('Is forced is required'),
-  language: string().required('Language is required'),
-  name: string().required('Name is required'),
-  password: string().required('Password is required'),
-  roleMapping: array().of(
-    object({
+  inviteUsers2: Yup.array().of(Yup.string().email('Invalid user email')),
+  isForced: Yup.boolean().required('Is forced is required'),
+  language: Yup.string().required('Language is required'),
+  name: Yup.string().required('Name is required'),
+  password: Yup.string().required('Password is required'),
+  roleMapping: Yup.array().of(
+    Yup.object({
       role: selectEntryValidationSchema,
-      value: string().required('Role value is required')
+      value: Yup.string().required('Role value is required')
     })
   ),
-  scopes: array().of(string().min(3, '3 characters min').required('Required')),
-  sports: array().of(selectEntryValidationSchema.required('Required'))
+  scopes: Yup.array().of(
+    Yup.string().min(3, '3 characters min').required('Required')
+  ),
+  sports: Yup.array()
+    .of(selectEntryValidationSchema.required('Required'))
+    .min(2, 'Choose at least 2 sports')
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -110,11 +115,6 @@ export const basicFormInitialValues = {
   isForced: false,
   language: 'French',
   name: '',
-  notifications: {
-    channels: { Icon: MailIcon, checked: true, label: 'mail' },
-    hostevents: ['ok', 'warning'],
-    includeServices: { checked: true, label: 'Include services for this host' }
-  },
   password: '',
   roleMapping: [
     {
@@ -157,10 +157,6 @@ export const basicFormGroups: Array<Group> = [
     TooltipContent: (): JSX.Element => <Typography>Tooltip content</Typography>,
     name: 'Second group',
     order: 2
-  },
-  {
-    name: 'Third group',
-    order: 3
   }
 ];
 
@@ -175,10 +171,6 @@ export const basicFormInputs: Array<InputProps> = [
     fieldName: 'email',
     group: 'First group',
     label: 'Email',
-    text: {
-      endAdornment: <MailIcon />,
-      placeholder: 'Your email here'
-    },
     type: InputType.Text
   },
   {
@@ -213,41 +205,6 @@ export const basicFormInputs: Array<InputProps> = [
     },
     type: InputType.Radio
   },
-  {
-    additionalLabel: 'Notifications',
-    fieldName: '',
-    grid: {
-      alignItems: 'center',
-      columns: [
-        {
-          checkbox: {
-            direction: 'horizontal'
-          },
-          fieldName: 'notifications.channels',
-          label: 'channels',
-          type: InputType.Checkbox
-        },
-        {
-          fieldName: 'notifications.includeServices',
-          label: 'Iclude services',
-          type: InputType.Checkbox
-        },
-        {
-          checkbox: {
-            direction: 'horizontal',
-            labelPlacement: 'top',
-            options: ['ok', 'warning', 'critical', 'unknown']
-          },
-          fieldName: 'notifications.hostevents',
-          label: 'host events',
-          type: InputType.CheckboxGroup
-        }
-      ]
-    },
-    group: 'Third group',
-    label: 'Notifications',
-    type: InputType.Grid
-  },
   {
     fieldName: 'anotherText',
     group: 'First group',

package/src/Home.stories.mdx

@@ -0,0 +1,122 @@
+import { Meta } from '@storybook/addon-docs'
+import { Typography, Box, Paper, Accordion, AccordionSummary, AccordionDetails, Link, Stack } from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import { MdxThemeProvider } from './StoryBookThemeProvider'
+
+<Meta title="Home" />
+
+<Typography variant="h4">Welcome to Centreon UI</Typography>
+<br />
+
+<Typography>This project contains design system's component used in every Centreon projects using ReactJS</Typography>
+<br />
+
+<Typography>Discover older versions of the Centreon UI's storybook</Typography>
+<Stack>
+  <Link href="https://storybook.centreon.com/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>Latest</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/23.04/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>23.04</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/22.10/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>22.10</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/22.04/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>22.04</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/21.10/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>21.10</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/21.04/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>21.04</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/20.10/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>20.10</Typography>
+  </Link>
+  <Link href="https://storybook.centreon.com/20.04/index.html" target="__blank" rel="noopener noreferrer">
+    <Typography>20.04</Typography>
+  </Link>
+</Stack>
+<br />
+
+<Accordion>
+  <AccordionSummary
+    expandIcon={<ExpandMoreIcon />}
+  >
+    <Typography variant="h5">Add stories</Typography>
+  </AccordionSummary>
+  <AccordionDetails>
+    <ul>
+      <li><Typography>Create a file named `index.stories.tsx` along side your component</Typography></li>
+      <li>
+        <Typography>Add a title, the component and argTypes</Typography>
+        <Typography>Example: </Typography>
+
+        ```typescript
+        export default {
+          title: 'MyComponent',
+          Component: MyComponent,
+          argTypes: {
+            propA: { control: 'text' },
+            propB: { control: 'number' },
+          },
+        };
+        ```
+
+      </li>
+      <li>
+        <Typography>Create a playground for your component</Typography>
+
+        ```typescript
+          const Template: ComponentStory<typeof MyComponent> = (args) => (
+            <MyComponent {...args} />
+          );
+
+          export const Playground = Template.bind({});
+        ```
+
+      </li> 
+      <li>
+        <Typography>Then add your story</Typography>
+
+        ```typescript
+          export const basic = Template.bind({});
+          basic.args = { propA: 'test', propB: 0 };
+        ```
+
+      </li>
+    </ul>
+  </AccordionDetails>
+</Accordion>
+<Accordion>
+  <AccordionSummary
+    expandIcon={<ExpandMoreIcon />}
+  >
+    <Typography variant="h5">Run tests</Typography>
+  </AccordionSummary>
+  <AccordionDetails>
+    <Typography>There are two kinds of tests in Centreon UI.</Typography>
+    <Typography>Jest + RTL: Component testing</Typography>
+    <Typography>Storyshots: When running them, storybook will capture a snapshot for each and compares them with the older ones</Typography>
+    <br />
+
+    <Typography>Run all the test (Jest + Storyshots)</Typography>
+    `pnpm build:storybook && pnpm t`
+    <br />
+
+    <Typography>Run storyshots following one or more story title</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent"`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent"`
+    <br />
+
+    <Typography>Update snapshots</Typography>
+    `pnpm build:storybook && pnpm t -- -u`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent" -u`
+    <Typography>Or</Typography>
+    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent" -u`
+  </AccordionDetails>
+</Accordion>

package/src/Icon/IconAttach/index.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
@@ -42,11 +45,13 @@ interface Props {
   defaultImage: string;
   imgSource: string;
   labelNoIcon?: string;
+  onClick: () => void;
   title: string;
   uploadedImage: string;
 }
 
 const IconAttach = ({
+  onClick,
   defaultImage,
   uploadedImage,
   imgSource,
@@ -56,7 +61,7 @@ const IconAttach = ({
   const { classes } = useStyles();
 
   return (
-    <span className={classes.iconAttach}>
+    <span className={classes.iconAttach} onClick={onClick}>
       {defaultImage && (
         <span className={classes.iconAttachLabel}>{labelNoIcon}</span>
       )}

package/src/Image/Image.tsx

@@ -1,75 +1,65 @@
-import { memo } from 'react';
-
-import { equals, isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import { useLoadImage } from './useLoadImage';
-
-export enum ImageVariant {
-  Contain = 'contain',
-  Cover = 'cover'
-}
-
-interface Props {
-  alt: string;
-  className?: string;
-  fallback: JSX.Element;
-  height?: number | string;
-  imagePath: string;
-  variant?: ImageVariant;
-  width?: number | string;
-}
-
-const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
-  (_, { width, height, variant }) => ({
-    fallbackContainer: {
-      height: '100%',
-      width: '100%'
-    },
-    imageContent: {
-      height,
-      objectFit: variant,
-      width
-    }
-  })
-);
-
-const ImageContent = ({
-  alt,
-  className,
-  height,
-  width,
-  imagePath,
-  variant = ImageVariant.Cover,
-  fallback
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ height, variant, width });
-  const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
-
-  if (!isImageLoaded) {
-    return (
-      <div className={classes.fallbackContainer} data-testid={alt}>
-        {fallback}
-      </div>
-    );
-  }
-
-  return (
-    <img
-      alt={alt}
-      className={cx(classes.imageContent, className)}
-      data-testid={alt}
-      src={imagePath}
-    />
-  );
-};
-
-const SuspendedImage = ({ imagePath, ...props }: Props): JSX.Element | null => {
-  if (isNil(imagePath)) {
-    return null;
-  }
-
-  return <ImageContent {...props} imagePath={imagePath} />;
-};
-
-export default memo(SuspendedImage, equals);
+import { memo } from 'react';
+
+import { makeStyles } from 'tss-react/mui';
+import { equals, isNil } from 'ramda';
+
+import { useLoadImage } from './useLoadImage';
+
+export enum ImageVariant {
+  Contain = 'contain',
+  Cover = 'cover'
+}
+
+interface Props {
+  alt: string;
+  className?: string;
+  fallback: JSX.Element;
+  height?: number | string;
+  imagePath: string;
+  variant?: ImageVariant;
+  width?: number | string;
+}
+
+const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
+  (_, { width, height, variant }) => ({
+    imageContent: {
+      height,
+      objectFit: variant,
+      width
+    }
+  })
+);
+
+const ImageContent = ({
+  alt,
+  className,
+  height,
+  width,
+  imagePath,
+  variant = ImageVariant.Cover,
+  fallback
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ height, variant, width });
+  const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
+  if (!isImageLoaded) {
+    return fallback;
+  }
+
+  return (
+    <img
+      alt={alt}
+      className={cx(classes.imageContent, className)}
+      src={imagePath}
+    />
+  );
+};
+
+const SuspendedImage = ({ imagePath, ...props }: Props): JSX.Element | null => {
+  if (isNil(imagePath)) {
+    return null;
+  }
+
+  return <ImageContent {...props} imagePath={imagePath} />;
+};
+
+export default memo(SuspendedImage, equals);

package/src/Image/atoms.ts

@@ -1,3 +1,3 @@
-import { atom } from 'jotai';
-
-export const imagesAtom = atom<Record<string, string>>({});
+import { atom } from 'jotai';
+
+export const imagesAtom = atom<Record<string, string>>({});