refactor(hoc): rewrite and clean some HOCs

packages/Form/Input/card/src/Card.tsx

@@ -6,7 +6,7 @@ import React, {
   ReactElement,
   ReactNode,
 } from 'react';
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import CardHeader from './CardHeader';
 /**
  * Get a duplicate component from a children. If not, return null
@@ -109,7 +109,7 @@ const Card = ({
       })
   );
 
-  const className = ClassManager.getComponentClassName(
+  const className = getComponentClassName(
     null,
     `${cardClassModifier || ''}${isChecked ? ' active' : ''}${
       disabled ? ' disabled' : ''

packages/Form/Input/card/src/CardGroup.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps } from 'react';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
 import CardGroupStateless from './CardGroupStateless';
 
@@ -15,7 +15,7 @@ const CardGroup = ({
   value,
   ...otherProps
 }: Props) => {
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'af-rccard-group'

packages/Form/Input/date/src/Date.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, ComponentPropsWithRef, forwardRef } from 'react';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
 
 type Props = Omit<ComponentPropsWithRef<'input'>, 'value'> & {
@@ -11,7 +11,7 @@ type Props = Omit<ComponentPropsWithRef<'input'>, 'value'> & {
 
 const Date = forwardRef<HTMLInputElement, Props>(
   ({ className, classModifier, value, ...otherProps }, ref) => {
-    const componentClassName = useComponentClassName(
+    const componentClassName = getComponentClassName(
       className,
       classModifier,
       'af-form__input-date'

packages/Form/Input/file/src/File.tsx

@@ -5,7 +5,7 @@ import {
   FileRejection,
   useDropzone,
 } from 'react-dropzone';
-import { createId, useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { createId, getComponentClassName } from '@axa-fr/react-toolkit-core';
 import Button from '@axa-fr/react-toolkit-button';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
 
@@ -43,7 +43,7 @@ const File = ({
     disabled,
   });
 
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'af-form__file-input'

packages/Form/Input/file/src/FileLine.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import Button from '@axa-fr/react-toolkit-button';
 import Popover from '@axa-fr/react-toolkit-popover';
 import { CustomFile } from './File';
@@ -46,7 +46,7 @@ const FileLine = ({
   id,
   onClick,
 }: Props) => {
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'af-form__file-line'

packages/Form/Input/file/src/FileTable.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithoutRef } from 'react';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import { FileRejection } from 'react-dropzone';
 import LineFile from './FileLine';
 import { CustomFile } from './File';
@@ -35,7 +35,7 @@ const FileTable = ({
   disabled,
   onClick,
 }: Props) => {
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'custom-table-file af-file-table'

packages/Form/Input/number/src/Number.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, ComponentPropsWithRef, forwardRef } from 'react';
-import { useId, useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { useId, getComponentClassName } from '@axa-fr/react-toolkit-core';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
 
 type Props = ComponentPropsWithRef<'input'> & {
@@ -8,7 +8,7 @@ type Props = ComponentPropsWithRef<'input'> & {
 const CustomNumber = forwardRef<HTMLInputElement, Props>(
   ({ id, className, classModifier, ...otherProps }, inputRef) => {
     const inputId = useId(id);
-    const componentClassName = useComponentClassName(
+    const componentClassName = getComponentClassName(
       className,
       classModifier,
       'af-form__input-text'

packages/Form/Input/pass/src/Pass.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithRef, forwardRef, MouseEvent } from 'react';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 type Props = Omit<ComponentPropsWithRef<'input'>, 'type' | 'role'> & {
   type?: 'text' | 'password';
@@ -19,7 +19,7 @@ const Pass = forwardRef<HTMLInputElement, Props>(
     },
     inputRef
   ) => {
-    const componentClassName = useComponentClassName(
+    const componentClassName = getComponentClassName(
       className,
       classModifier,
       'af-form__pass'

packages/Form/Input/select/src/Select.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithRef, useState } from 'react';
-import { useComponentClassName, useId } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName, useId } from '@axa-fr/react-toolkit-core';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
 import SelectBase from './SelectBase';
 
@@ -22,7 +22,7 @@ const SelectDefault = ({
 }: Props) => {
   const [hasHandleChangeOnce, setHasHandleChangeOnce] = useState(false);
 
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'af-form__select-container'

packages/Form/Input/slider/src/Slider.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, ReactNode } from 'react';
 import RcSlider from 'rc-slider';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import 'rc-slider/assets/index.css';
 
 type RcSliderProps = ComponentProps<typeof RcSlider>;
@@ -34,7 +34,7 @@ const Slider = ({
     {} as Marks
   );
 
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'af-form__slider'

packages/Form/Input/text/src/Text.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithRef, forwardRef } from 'react';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
 
 type Props = ComponentPropsWithRef<'input'> & {
@@ -8,7 +8,7 @@ type Props = ComponentPropsWithRef<'input'> & {
 
 const Text = forwardRef<HTMLInputElement, Props>(
   ({ className, classModifier, ...otherProps }, inputRef) => {
-    const componentClassName = useComponentClassName(
+    const componentClassName = getComponentClassName(
       className,
       classModifier,
       'af-form__input-text'

packages/Form/Input/textarea/src/Textarea.tsx

@@ -1,14 +1,14 @@
 import React, { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { withInput } from '@axa-fr/react-toolkit-form-core';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 type Props = ComponentPropsWithoutRef<'textarea'> & {
   classModifier?: string;
 };
 
 const Textarea = forwardRef<HTMLTextAreaElement, Props>(
   ({ className, classModifier, ...otherProps }, inputRef) => {
-    const componentClassName = useComponentClassName(
+    const componentClassName = getComponentClassName(
       className,
       classModifier,
       'af-form__input-textarea'

packages/Form/core/src/Field.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import FieldError from './FieldError';
 import MessageTypes from './MessageTypes';
 import FieldForm from './FieldForm';
@@ -34,7 +34,7 @@ const Field = ({
     return null;
   }
 
-  const componentClassName = ClassManager.getComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'row af-form__group'

packages/Form/core/src/FieldError.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import MessageTypes from './MessageTypes';
 
 const DEFAULT_CLASS_NAME = 'af-form__message';
@@ -13,7 +13,7 @@ const FieldError = ({
   message = null,
   messageType = MessageTypes.error,
 }: FieldProps) => {
-  const className = ClassManager.getComponentClassName(
+  const className = getComponentClassName(
     DEFAULT_CLASS_NAME,
     messageType,
     DEFAULT_CLASS_NAME

packages/Form/core/src/FieldForm.tsx

@@ -9,7 +9,7 @@ import React, {
   isValidElement,
   ReactNode,
 } from 'react';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import MessageTypes from './MessageTypes';
 import FormClassManager from './FormClassManager';
 
@@ -122,7 +122,7 @@ const FieldForm = ({
     ...getMessageInfo({ ...state, forceDisplayMessage, message, messageType }),
   });
 
-  const subComponentClassName = useComponentClassName(
+  const subComponentClassName = getComponentClassName(
     className,
     classModifier,
     defaultClassName

packages/Form/core/src/FieldInput.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 type FieldProps = {
   isVisible?: boolean;
@@ -18,11 +18,7 @@ const FieldInput = ({
     return null;
   }
 
-  const newClassName = ClassManager.getComponentClassName(
-    className,
-    classModifier,
-    ''
-  );
+  const newClassName = getComponentClassName(className, classModifier, '');
   return <div className={newClassName}>{children}</div>;
 };
 

packages/Form/core/src/getOptionClassName.ts

@@ -1,4 +1,4 @@
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 export function getOptionClassName(
   className: string,
@@ -13,7 +13,7 @@ export function getOptionClassName(
     .filter((c) => !!c)
     .join(' ');
 
-  return ClassManager.getComponentClassName(
+  return getComponentClassName(
     className,
     classModifierWithDisabled,
     defaultClassName

packages/Form/core/src/withInput.tsx

@@ -1,5 +1,5 @@
 import React, { BaseSyntheticEvent, ComponentType } from 'react';
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 /**
  * @remarks - Will be remove into v2.1.x
@@ -39,7 +39,7 @@ const defaultWithProps = ({
   className?: string;
   classModifier?: string;
 }) => ({
-  className: ClassManager.getComponentClassName(className, classModifier, ''),
+  className: getComponentClassName(className, classModifier, ''),
 });
 
 type Handler<H extends { [key: string]: (...args: any[]) => any }> = {

packages/Form/steps/src/StepBase.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 type Props = {
   id: string;
@@ -9,7 +9,7 @@ type Props = {
   classModifier?: string;
 };
 const StepBase = ({ children, id, title, className, classModifier }: Props) => {
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'af-steps-list-step'

packages/Form/steps/src/Steps.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { useComponentClassName } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 const defaultClassName = 'af-steps';
 
@@ -13,7 +13,7 @@ const Steps = ({
   className = defaultClassName,
   classModifier,
 }: Props) => {
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     defaultClassName

packages/Layout/footer-client/src/FooterClient.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 const defaultClassName = 'af-footer-client';
 
@@ -17,7 +17,7 @@ const FooterClient = ({
   classModifier,
   copyright = 'Policy Privacy © 2018 AXA All Rights Reserved',
 }: Props) => {
-  const componentClassName = ClassManager.getComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     defaultClassName

packages/Layout/header/src/Header/Header.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 type Props = {
   children: ReactNode;
@@ -9,7 +9,7 @@ type Props = {
 
 const Header = (props: Props) => {
   const { classModifier, className, children } = props;
-  const componentClassName = ClassManager.getComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     'af-header'

packages/Layout/header/src/Infos/Infos.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, ReactNode } from 'react';
-import { useComponentClassName, useId } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName, useId } from '@axa-fr/react-toolkit-core';
 
 const defaultClassName = 'af-contrat';
 type TInfo = { id?: string; word: ReactNode; definition: ReactNode };
@@ -10,7 +10,7 @@ type InfosProps = {
 };
 
 const Infos = ({ infos, className, classModifier }: InfosProps) => {
-  const componentClassName = useComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     defaultClassName

packages/Layout/header/src/Name/Name.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-import { ClassManager } from '@axa-fr/react-toolkit-core';
+import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
 const defaultClassName = 'af-header__name';
 
@@ -21,7 +21,7 @@ const Name = ({
   classModifier,
   onClick,
 }: Props) => {
-  const componentClassName = ClassManager.getComponentClassName(
+  const componentClassName = getComponentClassName(
     className,
     classModifier,
     defaultClassName