How to use the @axa-fr/react-toolkit-core.compose function in @axa-fr/react-toolkit-core

/* if (typeof children === 'string') {
    return (
      
        <span>{children}</span>
      
    );
  } */

  return (
    
      {children}
    
  );
};
export type ThProps = ThComponentProps &amp; WithClassModifierOptions;
const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

Th.defaultProps = defaultProps;
Th.displayName = 'Table.Th';

export default enhance(Th);

}

type ArticleRestitutionProps = WithClassModifierOptions & ArticleRestitutionBaseProps ;

const ArticleRestitution= ({ children, className }:ArticleRestitutionBaseProps) => (
    <article>
    {children}
    </article>
  );

const defaultProps: Partial = {
  children: null,
  className:DEFAULT_CLASSNAME
};

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(ArticleRestitution);
Enhanced.displayName = 'ArticleRestitution';
Enhanced.defaultProps = defaultProps;
export default Enhanced;

const DEFAULT_CLASSNAME = 'af-tabs__item';

export type TitleProps = TitleComponentProps &
  TitleHandlerProps &
  WithClassModifierOptions;

const setWithProps = (props: TitleComponentProps) => ({
  ...props,
  classModifier: (props.classModifier || '').concat(
    (props.enable === false ? ' disabled' : '').concat(
      props.active ? ' active' : ''
    )
  ),
});

const enchance = compose(
  withProps(setWithProps),
  withClickId({ event: [onChangeEvent] }),
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
)(Title);

enchance.displayName = 'Title';

export default enchance;

children?: React.ReactNode;
  title?: React.ReactNode;
  classNameContainer?: string;
  className?: string;
}

const SectionRestitutionRow = ({ title, className, classNameContainer, children }:SectionRestitutionRowBaseProps) =&gt; (<div>
    {title &amp;&amp; }
    <div>
      {children}
    </div>
  </div>);

type SectionRestitutionRowProps = WithClassModifierOptions &amp; SectionRestitutionRowBaseProps;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const defaultProps: Partial = {
  children: null,
  classNameContainer: "row af-restitution__content-left",
  className:DEFAULT_CLASSNAME
};

const Enhanced = enhance(SectionRestitutionRow);
Enhanced.displayName = 'SectionRestitutionRow';
Enhanced.defaultProps = defaultProps;

export default Enhanced;

import {
  withClassDefault,
  withClassModifier,
  WithClassModifierOptions,
  compose,
} from '@axa-fr/react-toolkit-core';
import Div, { DivProps } from './Div';

const DEFAULT_CLASSNAME = 'af-modal__header';

export type HeaderBaseProps = DivProps & WithClassModifierOptions;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(Div);
Enhanced.displayName = 'HeaderBase';
export default Enhanced;

import {
  withClassDefault,
  withClassModifier,
  WithClassModifierOptions,
  compose,
} from '@axa-fr/react-toolkit-core';
import Div, { DivProps } from './Div';

const DEFAULT_CLASSNAME = 'af-modal__body';

export type BodyProps = DivProps & WithClassModifierOptions;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(Div);
Enhanced.displayName = 'Body';
export default Enhanced;

const Header: React.SFC = props => {
  const { children, headers, className } = props;

  if (headers) {
    return (
      
        {children}
      
    );
  }
  return {children};
};

export type HeaderProps = HeaderComponentProps & WithClassModifierOptions;
const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

Header.displayName = 'Table.Header';

export default enhance(Header);

children,
}) => (
  <footer>
    <div>
      <a title="{title}" href="{href}">
        <img alt="{alt}" src="{icon}">
      </a>
      <div>{children}</div>
    </div>
  </footer>
);
FooterCoreRaw.defaultProps = defaultProps;

export type FooterCoreProps = FooterCoreComponentProps &amp; WithClassModifierOptions;

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(FooterCoreRaw);
Enhanced.displayName = 'FooterCore';
export default Enhanced;

import { withClickId, WithClickIdProps, compose } from '@axa-fr/react-toolkit-core';

import ButtonCore, { ButtonCoreProps } from './ButtonCore';

export type ButtonProps = WithClickIdProps;

const Button = compose(
  withClickId({ event: ['onClick'] })
)(ButtonCore);

Button.displayName = "Button";

export default Button;

import { WithClickIdProps, withClickId, compose } from '@axa-fr/react-toolkit-core';
import ActionCore, { ActionCoreProps } from './ActionCore';

export type ActionProps = WithClickIdProps;

const Action = compose(
  withClickId({ event: ['onClick'] })
)(ActionCore);
Action.displayName = 'Action';

export default Action;