feat: wip import csv [part 1] (#1033)

* feat: wip import csv

* feat: start implementing twenty UI

* feat: new radio button component

* feat: use new radio button component and fix scroll issue

* fix: max height modal

* feat: wip try to customize react-data-grid to match design

* feat: wip match columns

* feat: wip match column selection

* feat: match column

* feat: clean heading component & try to fix scroll in last step

* feat: validation step

* fix: small cleaning and remove unused component

* feat: clean folder architecture

* feat: remove translations

* feat: remove chackra theme

* feat: remove unused libraries

* feat: use option button to open spreadsheet & fix stories

* Fix lint and fix imports

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx

@@ -7,13 +7,15 @@ import { hoverBackground } from '@/ui/theme/constants/effects';
 
 import { DropdownMenuItem } from './DropdownMenuItem';
 
-type Props = {
+type Props = React.ComponentProps<'li'> & {
   selected?: boolean;
-  onClick: () => void;
   hovered?: boolean;
+  disabled?: boolean;
 };
 
-const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<Props>`
+const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
+  Pick<Props, 'hovered'>
+>`
   ${hoverBackground};
 
   align-items: center;
@@ -27,12 +29,15 @@ const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<Props>`
   width: calc(100% - ${({ theme }) => theme.spacing(2)});
 `;
 
-const StyledLeftContainer = styled.div`
+const StyledLeftContainer = styled.div<Pick<Props, 'disabled'>>`
   align-items: center;
+
   display: flex;
 
   gap: ${({ theme }) => theme.spacing(2)};
 
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+
   overflow: hidden;
 `;
 
@@ -45,9 +50,19 @@ export function DropdownMenuSelectableItem({
   onClick,
   children,
   hovered,
+  disabled,
+  ...restProps
 }: React.PropsWithChildren<Props>) {
   const theme = useTheme();
 
+  function handleClick(event: React.MouseEvent<HTMLLIElement>) {
+    if (disabled) {
+      return;
+    }
+
+    onClick?.(event);
+  }
+
   useEffect(() => {
     if (hovered) {
       window.scrollTo({
@@ -58,12 +73,12 @@ export function DropdownMenuSelectableItem({
 
   return (
     <DropdownMenuSelectableItemContainer
-      onClick={onClick}
-      selected={selected}
+      {...restProps}
+      onClick={handleClick}
       hovered={hovered}
       data-testid="dropdown-menu-item"
     >
-      <StyledLeftContainer>{children}</StyledLeftContainer>
+      <StyledLeftContainer disabled={disabled}>{children}</StyledLeftContainer>
       <StyledRightIcon>
         {selected && <IconCheck size={theme.icon.size.md} />}
       </StyledRightIcon>