From bb84255a057b1dc9c604552c534465892663fcf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?PIERM=C3=89=20Jean-Lou?= <A459HB@login.axa>
Date: Wed, 14 Dec 2022 14:56:21 +0100
Subject: [PATCH 1/2] build: mark package all as sideEffect-free
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Because of all the HOC and other weird stuff going on
in the code, the bundlers are unable to determine what
code branches can be trimmed (�tre  shaking).
Marking the library as side-effect free makes it believe
all functions are pure.
ref: https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free
---
 packages/all/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/all/package.json b/packages/all/package.json
index e9b04fbab..d984def09 100644
--- a/packages/all/package.json
+++ b/packages/all/package.json
@@ -5,6 +5,7 @@
   "module": "esm/index.js",
   "types": "esm/index.d.ts",
   "private": false,
+  "sideEffects": false,
   "scripts": {
     "prebuild": "rimraf ./component & rimraf ./esm",
     "build": "tsc -p tsconfig.json & tsc -p tsconfig-cjs.json"

From b099b08cf0ca52a0761cf7ee9f772e21edbd130b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?PIERM=C3=89=20Jean-Lou?= <A459HB@login.axa>
Date: Wed, 14 Dec 2022 15:01:31 +0100
Subject: [PATCH 2/2] 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.
---
 packages/action/src/Action.ts  |  9 ---------
 packages/action/src/Action.tsx | 25 +++++++++++++++++++++++
 packages/button/src/Button.tsx | 37 ++++++++++++++++++++++------------
 3 files changed, 49 insertions(+), 22 deletions(-)
 delete mode 100644 packages/action/src/Action.ts
 create mode 100644 packages/action/src/Action.tsx

diff --git a/packages/action/src/Action.ts b/packages/action/src/Action.ts
deleted file mode 100644
index 694ff35ba..000000000
--- a/packages/action/src/Action.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { withClickId } from '@axa-fr/react-toolkit-core';
-import { ComponentProps } from 'react';
-import ActionCore from './ActionCore';
-
-const Action = withClickId<ComponentProps<typeof ActionCore>>({
-  event: ['onClick'],
-})(ActionCore);
-
-export default Action;
diff --git a/packages/action/src/Action.tsx b/packages/action/src/Action.tsx
new file mode 100644
index 000000000..bc09bb441
--- /dev/null
+++ b/packages/action/src/Action.tsx
@@ -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;
diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx
index 7ff3f72e3..1903ac728 100644
--- a/packages/button/src/Button.tsx
+++ b/packages/button/src/Button.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 };