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/input/text/components/TextInput.tsx

@@ -1,6 +1,8 @@
 import {
   ChangeEvent,
   FocusEventHandler,
+  ForwardedRef,
+  forwardRef,
   InputHTMLAttributes,
   useRef,
   useState,
@@ -13,6 +15,7 @@ import { IconAlertCircle } from '@/ui/icon';
 import { IconEye, IconEyeOff } from '@/ui/icon/index';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 
 import { InputHotkeyScope } from '../types/InputHotkeyScope';
 
@@ -95,22 +98,26 @@ const StyledTrailingIcon = styled.div`
 
 const INPUT_TYPE_PASSWORD = 'password';
 
-export function TextInput({
-  label,
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  fullWidth,
-  error,
-  required,
-  type,
-  disableHotkeys = false,
-  ...props
-}: OwnProps): JSX.Element {
+function TextInputComponent(
+  {
+    label,
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    fullWidth,
+    error,
+    required,
+    type,
+    disableHotkeys = false,
+    ...props
+  }: OwnProps,
+  ref: ForwardedRef<HTMLInputElement>,
+): JSX.Element {
   const theme = useTheme();
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const combinedRef = useCombinedRefs(ref, inputRef);
 
   const {
     goBackToPreviousHotkeyScope,
@@ -151,7 +158,7 @@ export function TextInput({
       <StyledInputContainer>
         <StyledInput
           autoComplete="off"
-          ref={inputRef}
+          ref={combinedRef}
           tabIndex={props.tabIndex ?? 0}
           onFocus={handleFocus}
           onBlur={handleBlur}
@@ -189,3 +196,5 @@ export function TextInput({
     </StyledContainer>
   );
 }
+
+export const TextInput = forwardRef(TextInputComponent);