Lucas/t 353 checkbox should change state when clicking on their whole (#167)

* Added on click on Checkbox component

* - Added test in story
- Added sleep util
- Fixed click target collision (thanks to test !)

* Use a new CheckboxCell to wrap Checkbox

* Fixed lint

* Refactored CSS after comment

* Fixed tests

front/src/components/table/CheckboxCell.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { Checkbox } from '../form/Checkbox';
+
+type OwnProps = {
+  name: string;
+  id: string;
+  checked?: boolean;
+  indeterminate?: boolean;
+  onChange?: (newCheckedValue: boolean) => void;
+};
+
+const StyledContainer = styled.div`
+  width: 32px;
+  height: 32px;
+  margin-left: -${(props) => props.theme.table.horizontalCellMargin};
+  padding-left: ${(props) => props.theme.table.horizontalCellMargin};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+`;
+
+export function CheckboxCell({
+  name,
+  id,
+  checked,
+  onChange,
+  indeterminate,
+}: OwnProps) {
+  const [internalChecked, setInternalChecked] = React.useState(checked);
+
+  function handleContainerClick() {
+    handleCheckboxChange(!internalChecked);
+  }
+
+  React.useEffect(() => {
+    setInternalChecked(checked);
+  }, [checked]);
+
+  function handleCheckboxChange(newCheckedValue: boolean) {
+    setInternalChecked(newCheckedValue);
+
+    if (onChange) {
+      onChange(newCheckedValue);
+    }
+  }
+
+  return (
+    <StyledContainer
+      onClick={handleContainerClick}
+      data-testid="input-checkbox-cell-container"
+    >
+      <Checkbox
+        id={id}
+        name={name}
+        checked={internalChecked}
+        onChange={handleCheckboxChange}
+        indeterminate={indeterminate}
+      />
+    </StyledContainer>
+  );
+}