refactor(action,button): remove hocs

The HOCs not only disturb the bundler's process to understand which code
does what, it also makes typing a pain.
Moreover, the HOC used here removed the react event and replaced it
with only the id of the HTML element.
This version makes typing slightly simpler, and gives user the complete
event while maintaining existing behaviour.

Author: PIERMÉ Jean-Lou

packages/action/src/Action.ts

@@ -0,0 +1,25 @@
+import React, { ComponentProps, EventHandler, SyntheticEvent } from 'react';
+
+import ActionCore from './ActionCore';
+
+interface MyEvent extends React.SyntheticEvent {
+  id: string;
+}
+
+export type ActionProps = Omit<ComponentProps<typeof ActionCore>, 'onClick'> & {
+  onClick: React.EventHandler<MyEvent>;
+};
+
+function useWithEventId<T extends SyntheticEvent>(fn: EventHandler<MyEvent>) {
+  return (event: T) => {
+    fn({ ...event, id: event.currentTarget.id });
+  };
+}
+
+const Action = ({ onClick, ...rest }: ActionProps) => {
+  const onClickCustom = useWithEventId(onClick);
+
+  return <ActionCore {...rest} onClick={onClickCustom} />;
+};
+
+export default Action;

packages/action/src/Action.tsx

@@ -1,21 +1,32 @@
-import {
-  withClickId,
-  WithClickIdProps,
-  compose,
-  identity,
-} from '@axa-fr/react-toolkit-core';
-import { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 
 import ButtonCore from './ButtonCore';
 
-type ButtonCoreProps = ComponentPropsWithoutRef<typeof ButtonCore>;
-export type ButtonProps = WithClickIdProps<ButtonCoreProps, 'onClick'>;
+interface MyEvent extends React.MouseEvent<HTMLButtonElement> {
+  id: string;
+}
 
-const Button = compose(
-  identity<ButtonCoreProps>(),
-  withClickId({ event: ['onClick'] })
-)(ButtonCore);
+export type ButtonProps = Omit<
+  ComponentPropsWithoutRef<typeof ButtonCore>,
+  'onClick'
+> & {
+  onClick: React.EventHandler<MyEvent>;
+};
+
+const Button = (props: ButtonProps) => {
+  const customOnClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    onClick: React.EventHandler<MyEvent>
+  ) => {
+    return onClick({ ...e, id: props.id });
+  };
+
+  return (
+    <ButtonCore {...props} onClick={(e) => customOnClick(e, props.onClick)} />
+  );
+};
 
 Button.displayName = 'Button';
 
 export default Button;
+export { ButtonCore };