Remove poor hoc from button and alert

[JLou]

Related issue

Description of the issue

So, even with an esm build, the bundlers were not able to tree-shake the all package. This is due most likely to HOC (higher order components). The problem is described here on the webpack documentation.

I setup a small vite project to reproduce it.

This is the app :

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import "@axa-fr/react-toolkit-all/dist/style/af-toolkit-core.css";
import { Button, Action } from "@axa-fr/react-toolkit-all";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <Button
          id="batman"
          onClick={(e) => {
            console.log(e);
            setCount((c) => c + 1);
          }}
        >
          Count is {count}
        </Button>

        <Action id="mabi" icon="switch" onClick={(e) => console.log(e)} />
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  );
}

export default App;

Using 2.0.0 this is the bundle you get is way too big for only using Alert and Button.

Adding the flag "sideEffect": false to the package.json, we however get a much smaller bundle:

The next step, was to start cleaning up these HOC which brought nothing but pain. Firstly, the typing was wrong because of how complex all of it was:

Secondly, the HOC removed the event from the onclick event to replace it with an simple object containing only the id .

What I did is merge the original synthetic react event with the simple id object to keep existing behaviour, while making sure users would get the expected event in their onclick handler.

I'm opening this PR to start a discussion about what to do for these HOC scattered across the code.

Person(s) for reviewing proposed changes

You can add @mention here