@centreon/ui 24.11.13 → 24.11.14

package/src/Form/Inputs/Text.tsx

@@ -1,18 +1,16 @@
 import { ChangeEvent, useCallback, useState } from 'react';
 
-import { FormikValues, useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { useFormikContext, FormikValues } from 'formik';
 import {
-  path,
   equals,
   gt,
   isEmpty,
   not,
+  path,
   split,
   type as variableType
 } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { InputAdornment } from '@mui/material';
 
 import { TextField, useMemoComponent } from '../..';
 
@@ -29,44 +27,28 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text,
-  autoFocus
+  text
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
   const [isVisible, setIsVisible] = useState(false);
 
-  const {
-    values,
-    setFieldValue,
-    touched,
-    errors,
-    handleBlur,
-    setFieldTouched,
-    setValues,
-    setTouched
-  } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, touched, errors, handleBlur } =
+    useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
 
   const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
     const { value } = event.target;
     if (change) {
-      change({
-        setFieldValue,
-        value,
-        setFieldTouched,
-        setValues,
-        values,
-        setTouched
-      });
+      change({ setFieldValue, value });
 
       return;
     }
 
     const formattedValue =
       equals(text?.type, 'number') && !isEmpty(value)
-        ? Number.parseInt(value, 10)
+        ? parseInt(value, 10)
         : value;
 
     setFieldValue(fieldName, formattedValue);
@@ -82,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) {
@@ -122,27 +96,20 @@ const Text = ({
   return useMemoComponent({
     Component: (
       <TextField
-        fullWidth={text?.fullWidth ?? true}
-        EndAdornment={EndAdornment}
+        fullWidth
+        EndAdornment={passwordEndAdornment}
         ariaLabel={t(label) || ''}
-        autoFocus={autoFocus}
-        dataTestId={dataTestId || label}
+        dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
-        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}
         value={value || ''}
         onBlur={handleBlur(fieldName)}
         onChange={changeText}
-        inputProps={{
-          'data-testid': dataTestId || label,
-          'aria-label': label,
-          min: text?.min
-        }}
       />
     ),
     memoProps: [

package/src/Form/Inputs/index.tsx

@@ -1,86 +1,67 @@
 import { Fragment, useMemo } from 'react';
 
-import { FormikValues, useFormikContext } from 'formik';
+import * as R from 'ramda';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { FormikValues, useFormikContext } from 'formik';
 
 import { Divider, Typography } from '@mui/material';
 
-import { GroupDirection } from '..';
 import CollapsibleGroup from '../CollapsibleGroup';
+import { GroupDirection } from '..';
 
-import {
-  T,
-  always,
-  any,
-  ascend,
-  cond,
-  equals,
-  filter,
-  find,
-  groupBy,
-  isEmpty,
-  isNil,
-  keys,
-  last,
-  not,
-  pluck,
-  prop,
-  propEq,
-  reduce,
-  sort,
-  toPairs
-} from 'ramda';
+import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
 import Autocomplete from './Autocomplete';
-import Checkbox from './Checkbox';
-import CheckboxGroup from './CheckboxGroup';
+import SwitchInput from './Switch';
+import RadioInput from './Radio';
+import TextInput from './Text';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
-import Custom from './Custom';
 import FieldsTable from './FieldsTable/FieldsTable';
-import File from './File';
 import Grid from './Grid';
-import List from './List/List';
+import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
-import RadioInput from './Radio';
-import SwitchInput from './Switch';
-import TextInput from './Text';
-import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
 
-export const getInput = cond<
+export const getInput = R.cond<
   Array<InputType>,
   (props: InputPropsWithoutGroup) => JSX.Element | null
 >([
-  [equals(InputType.Switch) as (b: InputType) => boolean, always(SwitchInput)],
-  [equals(InputType.Radio) as (b: InputType) => boolean, always(RadioInput)],
   [
-    equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
-    always(Autocomplete)
+    R.equals(InputType.Switch) as (b: InputType) => boolean,
+    R.always(SwitchInput)
   ],
   [
-    equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
-    always(Autocomplete)
+    R.equals(InputType.Radio) as (b: InputType) => boolean,
+    R.always(RadioInput)
   ],
+  [R.equals(InputType.Text) as (b: InputType) => boolean, R.always(TextInput)],
   [
-    equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
-    always(ConnectedAutocomplete)
+    R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
+    R.always(Autocomplete)
   ],
   [
-    equals(InputType.SingleConnectedAutocomplete) as (b: InputType) => boolean,
-    always(ConnectedAutocomplete)
+    R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
+    R.always(Autocomplete)
   ],
   [
-    equals(InputType.FieldsTable) as (b: InputType) => boolean,
-    always(FieldsTable)
+    R.equals(InputType.Password) as (b: InputType) => boolean,
+    R.always(TextInput)
   ],
-  [equals(InputType.Grid) as (b: InputType) => boolean, always(Grid)],
-  [equals(InputType.Custom) as (b: InputType) => boolean, always(Custom)],
-  [equals(InputType.Checkbox) as (b: InputType) => boolean, always(Checkbox)],
   [
-    equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
-    always(CheckboxGroup)
+    R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
+    R.always(ConnectedAutocomplete)
   ],
-  [equals(InputType.List) as (b: InputType) => boolean, always(List)],
-  [equals(InputType.File) as (b: InputType) => boolean, always(File)],
-  [T, always(TextInput)]
+  [
+    R.equals(InputType.SingleConnectedAutocomplete) as (
+      b: InputType
+    ) => boolean,
+    R.always(ConnectedAutocomplete)
+  ],
+  [
+    R.equals(InputType.FieldsTable) as (b: InputType) => boolean,
+    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)]
 ]);
 
 interface StylesProps {
@@ -98,33 +79,28 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
     justifyContent: 'flex-end'
   },
   divider: {
-    margin: equals(groupDirection, GroupDirection.Horizontal)
+    margin: R.equals(groupDirection, GroupDirection.Horizontal)
       ? theme.spacing(0, 2)
       : theme.spacing(2, 0)
   },
   groups: {
     display: 'flex',
-    flexDirection: equals(groupDirection, GroupDirection.Horizontal)
+    flexDirection: R.equals(groupDirection, GroupDirection.Horizontal)
       ? 'row'
       : 'column'
   },
-  inputWrapper: {
-    width: '100%'
-  },
+  inputWrapper: { width: '100%' },
   inputs: {
     display: 'flex',
     flexDirection: 'column',
     marginTop: theme.spacing(1),
-    rowGap: theme.spacing(2),
-    marginBottom: theme.spacing(1)
+    rowGap: theme.spacing(2)
   }
 }));
 
 interface Props {
-  areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
-  groupsClassName?: string;
   inputs: Array<InputProps>;
   isCollapsible: boolean;
   isLoading?: boolean;
@@ -135,16 +111,15 @@ 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 = pluck('name', groups);
+  const groupsName = R.pluck('name', groups);
 
-  const visibleInputs = filter(
+  const visibleInputs = R.filter(
     ({ hideInput }) =>
       formikContext ? !hideInput?.(formikContext?.values) || false : true,
     inputs
@@ -152,30 +127,30 @@ const Inputs = ({
 
   const inputsByGroup = useMemo(
     () =>
-      groupBy(
-        ({ group }) => find(equals(group), groupsName) as string,
+      R.groupBy(
+        ({ group }) => R.find(R.equals(group), groupsName) as string,
         visibleInputs
       ),
     [visibleInputs]
   ) as Record<string, Array<InputProps>>;
 
   const sortedGroupNames = useMemo(() => {
-    const sortedGroups = sort(ascend(prop('order')), groups);
+    const sortedGroups = R.sort(R.ascend(R.prop('order')), groups);
 
-    const usedGroups = filter(
-      ({ name }) => any(equals(name), keys(inputsByGroup)),
+    const usedGroups = R.filter(
+      ({ name }) => R.any(R.equals(name), R.keys(inputsByGroup)),
       sortedGroups
     );
 
-    return pluck('name', usedGroups);
-  }, [inputsByGroup, groups]);
+    return R.pluck('name', usedGroups);
+  }, []);
 
   const sortedInputsByGroup = useMemo(
     () =>
-      reduce<string, Record<string, Array<InputProps>>>(
+      R.reduce<string, Record<string, Array<InputProps>>>(
         (acc, value) => ({
           ...acc,
-          [value]: sort(
+          [value]: R.sort(
             (a, b) => (b?.required ? 1 : 0) - (a?.required ? 1 : 0),
             inputsByGroup[value]
           )
@@ -186,30 +161,29 @@ const Inputs = ({
     [visibleInputs]
   );
 
-  const lastGroup = useMemo(() => last(sortedGroupNames), []);
+  const lastGroup = useMemo(() => R.last(sortedGroupNames), []);
 
   const normalizedInputsByGroup = (
-    isEmpty(sortedInputsByGroup)
+    R.isEmpty(sortedInputsByGroup)
       ? [[null, visibleInputs]]
-      : toPairs(sortedInputsByGroup)
+      : R.toPairs(sortedInputsByGroup)
   ) as Array<[string | null, Array<InputProps>]>;
 
   return (
     <div className={classes.groups}>
       {normalizedInputsByGroup.map(([groupName, groupedInputs], index) => {
-        const hasGroupTitle = not(isNil(groupName));
+        const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? find(propEq(groupName, 'name'), groups)
+          ? R.find(R.propEq('name', groupName), groups)
           : ({} as Group);
 
-        const isFirstElement = areGroupsOpen || equals(index, 0);
+        const isFirstElement = R.equals(index, 0);
 
         return (
           <Fragment key={groupName}>
             <div>
               <CollapsibleGroup
-                className={groupsClassName}
                 defaultIsOpen={isFirstElement}
                 group={groupProps}
                 hasGroupTitle={hasGroupTitle}
@@ -235,35 +209,31 @@ 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>
                     );
                   })}
                 </div>
               </CollapsibleGroup>
             </div>
-            {hasGroupTitle && not(equals(lastGroup, groupName as string)) && (
-              <Divider
-                flexItem
-                className={classes.divider}
-                orientation={
-                  equals(groupDirection, GroupDirection.Horizontal)
-                    ? 'vertical'
-                    : 'horizontal'
-                }
-              />
-            )}
+            {hasGroupTitle &&
+              R.not(R.equals(lastGroup, groupName as string)) && (
+                <Divider
+                  flexItem
+                  className={classes.divider}
+                  orientation={
+                    R.equals(groupDirection, GroupDirection.Horizontal)
+                      ? 'vertical'
+                      : 'horizontal'
+                  }
+                />
+              )}
           </Fragment>
         );
       })}

package/src/Form/Inputs/models.ts

@@ -1,26 +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,
-  File = 14
+  Switch,
+  Radio,
+  Text,
+  SingleAutocomplete,
+  MultiAutocomplete,
+  Password,
+  SingleConnectedAutocomplete,
+  MultiConnectedAutocomplete,
+  FieldsTable,
+  Grid,
+  Custom
 }
 
 interface FieldsTableGetRequiredProps {
@@ -28,49 +24,24 @@ 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>;
-    fullWidth?: boolean;
-  };
-  change?: ({
-    setFieldValue,
-    value,
-    setFieldTouched,
-    setValues,
-    values,
-    setTouched
-  }) => 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;
   };
-  file?: {
-    multiple?: boolean;
-    accept?: string;
-    maxFileSize?: number;
-    CustomDropZoneContent: ({ files }) => JSX.Element;
-  };
   custom?: {
     Component: React.ComponentType<InputPropsWithoutGroup>;
   };
   dataTestId?: string;
-  disableSortedOptions?: boolean;
   fieldName: string;
   fieldsTable?: {
     additionalFieldsToMemoize?: Array<string>;
@@ -86,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;
@@ -113,12 +75,8 @@ export interface InputProps {
     getChecked?: (value) => boolean;
   };
   text?: {
-    endAdornment?: JSX.Element;
     multilineRows?: number;
-    placeholder?: string;
     type?: string;
-    min?: number;
-    fullWidth?: boolean;
   };
   type: InputType;
 }
@@ -132,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;