@centreon/ui 24.7.2 → 24.7.4

package/src/Form/Inputs/Text.tsx

@@ -12,8 +12,6 @@ import {
   type as variableType
 } from 'ramda';
 
-import { InputAdornment } from '@mui/material';
-
 import { TextField, useMemoComponent } from '../..';
 
 import PasswordEndAdornment from './PasswordEndAdornment';
@@ -29,8 +27,7 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text,
-  autoFocus
+  text
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
@@ -67,24 +64,16 @@ const Text = ({
     ? path(fieldNamePath, errors)
     : undefined;
 
-  const EndAdornment = useCallback((): JSX.Element | null => {
-    if (equals(type, InputType.Password)) {
-      return (
+  const passwordEndAdornment = useCallback(
+    (): JSX.Element | null =>
+      equals(type, InputType.Password) ? (
         <PasswordEndAdornment
           changeVisibility={changeVisibility}
           isVisible={isVisible}
         />
-      );
-    }
-
-    if (text?.endAdornment) {
-      return (
-        <InputAdornment position="end">{text?.endAdornment}</InputAdornment>
-      );
-    }
-
-    return null;
-  }, [isVisible]);
+      ) : null,
+    [isVisible]
+  );
 
   const getInputType = (): string => {
     if (text?.type) {
@@ -108,15 +97,13 @@ const Text = ({
     Component: (
       <TextField
         fullWidth
-        EndAdornment={EndAdornment}
+        EndAdornment={passwordEndAdornment}
         ariaLabel={t(label) || ''}
-        autoFocus={autoFocus}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
-        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}

package/src/Form/Inputs/index.tsx

@@ -1,6 +1,7 @@
 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';
 
@@ -17,11 +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';
-import List from './List/List';
 
 export const getInput = R.cond<
   Array<InputType>,
@@ -35,6 +33,7 @@ export const getInput = R.cond<
     R.equals(InputType.Radio) as (b: InputType) => boolean,
     R.always(RadioInput)
   ],
+  [R.equals(InputType.Text) as (b: InputType) => boolean, R.always(TextInput)],
   [
     R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
@@ -43,6 +42,10 @@ export const getInput = R.cond<
     R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
   ],
+  [
+    R.equals(InputType.Password) as (b: InputType) => boolean,
+    R.always(TextInput)
+  ],
   [
     R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
     R.always(ConnectedAutocomplete)
@@ -58,17 +61,7 @@ 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.Checkbox) as (b: InputType) => boolean,
-    R.always(Checkbox)
-  ],
-  [
-    R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
-    R.always(CheckboxGroup)
-  ],
-  [R.equals(InputType.List) as (b: InputType) => boolean, R.always(List)],
-  [R.T, R.always(TextInput)]
+  [R.equals(InputType.Custom) as (b: InputType) => boolean, R.always(Custom)]
 ]);
 
 interface StylesProps {
@@ -96,9 +89,7 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
       ? 'row'
       : 'column'
   },
-  inputWrapper: {
-    width: '100%'
-  },
+  inputWrapper: { width: '100%' },
   inputs: {
     display: 'flex',
     flexDirection: 'column',
@@ -108,10 +99,8 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
 }));
 
 interface Props {
-  areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
-  groupsClassName?: string;
   inputs: Array<InputProps>;
   isCollapsible: boolean;
   isLoading?: boolean;
@@ -122,11 +111,10 @@ const Inputs = ({
   groups = [],
   isLoading = false,
   isCollapsible,
-  groupDirection,
-  groupsClassName,
-  areGroupsOpen
+  groupDirection
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ groupDirection });
+  const { classes } = useStyles({ groupDirection });
+  const { t } = useTranslation();
   const formikContext = useFormikContext<FormikValues>();
 
   const groupsName = R.pluck('name', groups);
@@ -187,16 +175,15 @@ const Inputs = ({
         const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq(groupName, 'name'), groups)
+          ? R.find(R.propEq('name', groupName), groups)
           : ({} as Group);
 
-        const isFirstElement = areGroupsOpen || R.equals(index, 0);
+        const isFirstElement = R.equals(index, 0);
 
         return (
           <Fragment key={groupName}>
             <div>
               <CollapsibleGroup
-                className={groupsClassName}
                 defaultIsOpen={isFirstElement}
                 group={groupProps}
                 hasGroupTitle={hasGroupTitle}
@@ -222,18 +209,13 @@ const Inputs = ({
                       >
                         {inputProps.additionalLabel && (
                           <Typography
-                            className={cx(
-                              classes.additionalLabel,
-                              inputProps?.additionalLabelClassName
-                            )}
+                            className={classes.additionalLabel}
                             variant="body1"
                           >
-                            {inputProps.additionalLabel}
+                            {t(inputProps.additionalLabel)}
                           </Typography>
                         )}
-                        <div className={inputProps?.inputClassName || ''}>
-                          <Input {...inputProps} />
-                        </div>
+                        <Input {...inputProps} />
                       </div>
                     );
                   })}

package/src/Form/Inputs/models.ts

@@ -1,6 +1,6 @@
 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';
@@ -16,10 +16,7 @@ export enum InputType {
   MultiConnectedAutocomplete,
   FieldsTable,
   Grid,
-  Custom,
-  Checkbox,
-  CheckboxGroup,
-  List
+  Custom
 }
 
 interface FieldsTableGetRequiredProps {
@@ -27,23 +24,14 @@ 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 }) => void;
-  checkbox?: {
-    direction?: 'horizontal' | 'vertical';
-    labelPlacement?: LabelPlacement;
-    options?: Array<string>;
-  };
   connectedAutocomplete?: {
     additionalConditionParameters: Array<ConditionsSearchParameter>;
     endpoint?: string;
@@ -54,7 +42,6 @@ export interface InputProps {
     Component: React.ComponentType<InputPropsWithoutGroup>;
   };
   dataTestId?: string;
-  disableSortedOptions?: boolean;
   fieldName: string;
   fieldsTable?: {
     additionalFieldsToMemoize?: Array<string>;
@@ -70,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;
@@ -97,9 +75,7 @@ export interface InputProps {
     getChecked?: (value) => boolean;
   };
   text?: {
-    endAdornment?: JSX.Element;
     multilineRows?: number;
-    placeholder?: string;
     type?: string;
   };
   type: InputType;
@@ -114,5 +90,4 @@ export interface Group {
   TooltipContent?: () => JSX.Element;
   name: string;
   order: number;
-  titleAttributes?: TypographyProps;
 }

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

@@ -8,7 +8,8 @@ import {
   basicFormValidationSchema,
   CustomButton
 } from './storiesData';
-import { Form, GroupDirection } from './Form';
+
+import Form, { GroupDirection } from '.';
 
 export default { title: 'Form' };
 
@@ -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/{Form.tsx → index.tsx}

@@ -1,29 +1,19 @@
-import {
-  Formik,
-  FormikHelpers,
-  FormikSharedConfig,
-  FormikValues
-} from 'formik';
+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';
-import { useStyles } from './Form.styles';
 
 export enum GroupDirection {
   Horizontal = 'horizontal',
   Vertical = 'vertical'
 }
 
-export type FormProps<T> = {
+interface Props<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;
@@ -31,13 +21,9 @@ export type FormProps<T> = {
   submit: (values: T, bag: FormikHelpers<T>) => void | Promise<void>;
   validate?: (values: FormikValues) => void;
   validationSchema: Yup.SchemaOf<T>;
-} & Omit<FormikSharedConfig<T>, 'isInitialValid'>;
+}
 
 const Form = <T extends object>({
-  children,
-  className,
-  groupsClassName,
-  areGroupsOpen,
   initialValues,
   validate,
   validationSchema,
@@ -47,18 +33,13 @@ const Form = <T extends object>({
   Buttons = FormButtons,
   isLoading = false,
   isCollapsible = false,
-  groupDirection = GroupDirection.Vertical,
-  ...formikSharedConfig
-}: FormProps<T>): JSX.Element => {
-  const { cx, classes } = useStyles();
-
+  groupDirection = GroupDirection.Vertical
+}: Props<T>): JSX.Element => {
   if (isLoading) {
     return (
       <Inputs
         isLoading
-        areGroupsOpen={areGroupsOpen}
         groups={groups}
-        groupsClassName={groupsClassName}
         inputs={inputs}
         isCollapsible={isCollapsible}
       />
@@ -67,28 +48,25 @@ const Form = <T extends object>({
 
   return (
     <Formik<T>
+      enableReinitialize
+      validateOnBlur
+      validateOnMount
       initialValues={initialValues}
       validate={validate}
       validationSchema={validationSchema}
       onSubmit={submit}
-      {...formikSharedConfig}
     >
       <div>
-        {children}
-        <div className={cx(className, classes.form)}>
-          <Inputs
-            areGroupsOpen={areGroupsOpen}
-            groupDirection={groupDirection}
-            groups={groups}
-            groupsClassName={groupsClassName}
-            inputs={inputs}
-            isCollapsible={isCollapsible}
-          />
-          <Buttons />
-        </div>
+        <Inputs
+          groupDirection={groupDirection}
+          groups={groups}
+          inputs={inputs}
+          isCollapsible={isCollapsible}
+        />
+        <Buttons />
       </div>
     </Formik>
   );
 };
 
-export { Form };
+export default Form;

package/src/Form/storiesData.tsx

@@ -4,7 +4,6 @@ import { equals, prop } from 'ramda';
 
 import { Typography } from '@mui/material';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import MailIcon from '@mui/icons-material/MailOutline';
 
 import { SelectEntry } from '../InputField/Select';
 import { Listing } from '../api/models';
@@ -82,7 +81,9 @@ export const basicFormValidationSchema = Yup.object().shape({
   scopes: Yup.array().of(
     Yup.string().min(3, '3 characters min').required('Required')
   ),
-  sports: Yup.array().of(selectEntryValidationSchema.required('Required'))
+  sports: Yup.array()
+    .of(selectEntryValidationSchema.required('Required'))
+    .min(2, 'Choose at least 2 sports')
 });
 
 const roleEntries: Array<SelectEntry> = [
@@ -114,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: [
     {
@@ -161,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
   }
 ];
 
@@ -179,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
   },
   {
@@ -217,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/Image/Image.tsx

@@ -22,10 +22,6 @@ interface Props {
 
 const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
   (_, { width, height, variant }) => ({
-    fallbackContainer: {
-      height: '100%',
-      width: '100%'
-    },
     imageContent: {
       height,
       objectFit: variant,
@@ -45,20 +41,14 @@ const ImageContent = ({
 }: 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 fallback;
   }
 
   return (
     <img
       alt={alt}
       className={cx(classes.imageContent, className)}
-      data-testid={alt}
       src={imagePath}
     />
   );