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/spreadsheet-import/hooks/useRsi.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { SetRequired } from 'type-fest';
+
+import { RsiContext } from '@/spreadsheet-import/components/core/Providers';
+import { defaultRSIProps } from '@/spreadsheet-import/components/SpreadsheetImport';
+import { RsiProps } from '@/spreadsheet-import/types';
+
+export const useRsi = <T extends string>() =>
+  useContext<SetRequired<RsiProps<T>, keyof typeof defaultRSIProps>>(
+    RsiContext,
+  );

front/src/modules/spreadsheet-import/hooks/useRsiInitialStep.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+
+import { StepType } from '@/spreadsheet-import/components/steps/UploadFlow';
+
+export const useRsiInitialStep = (initialStep?: StepType) => {
+  const steps = ['uploadStep', 'matchColumnsStep', 'validationStep'] as const;
+
+  const initialStepNumber = useMemo(() => {
+    switch (initialStep) {
+      case StepType.upload:
+        return 0;
+      case StepType.selectSheet:
+        return 0;
+      case StepType.selectHeader:
+        return 0;
+      case StepType.matchColumns:
+        return 2;
+      case StepType.validateData:
+        return 3;
+      default:
+        return -1;
+    }
+  }, [initialStep]);
+
+  return { steps, initialStep: initialStepNumber };
+};

front/src/modules/spreadsheet-import/hooks/useSpreadsheetImport.ts

@@ -0,0 +1,19 @@
+import { useSetRecoilState } from 'recoil';
+
+import { spreadsheetImportState } from '@/spreadsheet-import/states/spreadsheetImportState';
+import { RsiProps } from '@/spreadsheet-import/types';
+
+export function useSpreadsheetImport() {
+  const setSpreadSheetImport = useSetRecoilState(spreadsheetImportState);
+
+  const openSpreadsheetImport = (
+    options: Omit<RsiProps<string>, 'isOpen' | 'onClose'>,
+  ) => {
+    setSpreadSheetImport({
+      isOpen: true,
+      options,
+    });
+  };
+
+  return { openSpreadsheetImport };
+}