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/dialog/components/Dialog.tsx

@@ -0,0 +1,125 @@
+import { useCallback } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+import { Button, ButtonVariant } from '@/ui/button/components/Button';
+
+const DialogOverlay = styled(motion.div)`
+  align-items: center;
+  background: ${({ theme }) => theme.background.overlay};
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 9999;
+`;
+
+const DialogContainer = styled(motion.div)`
+  background: ${({ theme }) => theme.background.primary};
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  max-width: 320px;
+  padding: 2em;
+  position: relative;
+  width: 100%;
+`;
+
+const DialogTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
+  text-align: center;
+`;
+
+const DialogMessage = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
+  text-align: center;
+`;
+
+const DialogButton = styled(Button)`
+  justify-content: center;
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+export type DialogButtonOptions = Omit<
+  React.ComponentProps<typeof Button>,
+  'fullWidth'
+>;
+
+export type DialogProps = React.ComponentPropsWithoutRef<typeof motion.div> & {
+  title?: string;
+  message?: string;
+  buttons?: DialogButtonOptions[];
+  allowDismiss?: boolean;
+  children?: React.ReactNode;
+  onClose?: () => void;
+};
+
+export function Dialog({
+  title,
+  message,
+  buttons = [],
+  allowDismiss = true,
+  children,
+  onClose,
+  ...rootProps
+}: DialogProps) {
+  const closeSnackbar = useCallback(() => {
+    onClose && onClose();
+  }, [onClose]);
+
+  const dialogVariants = {
+    open: { opacity: 1 },
+    closed: { opacity: 0 },
+  };
+
+  const containerVariants = {
+    open: { y: 0 },
+    closed: { y: '50vh' },
+  };
+
+  return (
+    <DialogOverlay
+      variants={dialogVariants}
+      initial="closed"
+      animate="open"
+      exit="closed"
+      onClick={(e) => {
+        if (allowDismiss) {
+          e.stopPropagation();
+          closeSnackbar();
+        }
+      }}
+    >
+      <DialogContainer
+        variants={containerVariants}
+        transition={{ damping: 15, stiffness: 100 }}
+        {...rootProps}
+      >
+        {title && <DialogTitle>{title}</DialogTitle>}
+        {message && <DialogMessage>{message}</DialogMessage>}
+        {children}
+        {buttons.map((button) => (
+          <DialogButton
+            key={button.title}
+            onClick={(e) => {
+              button?.onClick?.(e);
+              closeSnackbar();
+            }}
+            fullWidth={true}
+            variant={button.variant ?? ButtonVariant.Secondary}
+            {...button}
+          />
+        ))}
+      </DialogContainer>
+    </DialogOverlay>
+  );
+}

front/src/modules/ui/dialog/components/DialogProvider.tsx

@@ -0,0 +1,26 @@
+import { useRecoilState } from 'recoil';
+
+import { dialogInternalState } from '../states/dialogState';
+
+import { Dialog } from './Dialog';
+
+export function DialogProvider({ children }: React.PropsWithChildren) {
+  const [dialogState, setDialogState] = useRecoilState(dialogInternalState);
+
+  // Handle dialog close event
+  const handleDialogClose = (id: string) => {
+    setDialogState((prevState) => ({
+      ...prevState,
+      queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
+    }));
+  };
+
+  return (
+    <>
+      {children}
+      {dialogState.queue.map((dialog) => (
+        <Dialog {...dialog} onClose={() => handleDialogClose(dialog.id)} />
+      ))}
+    </>
+  );
+}

front/src/modules/ui/dialog/hooks/useDialog.ts

@@ -0,0 +1,17 @@
+import { useSetRecoilState } from 'recoil';
+import { v4 as uuidv4 } from 'uuid';
+
+import { DialogOptions, dialogSetQueueState } from '../states/dialogState';
+
+export function useDialog() {
+  const setDialogQueue = useSetRecoilState(dialogSetQueueState);
+
+  const enqueueDialog = (options?: Omit<DialogOptions, 'id'>) => {
+    setDialogQueue({
+      id: uuidv4(),
+      ...options,
+    });
+  };
+
+  return { enqueueDialog };
+}

front/src/modules/ui/dialog/states/dialogState.ts

@@ -0,0 +1,39 @@
+import { atom, selector } from 'recoil';
+
+import { DialogProps } from '../components/Dialog';
+
+export type DialogOptions = DialogProps & {
+  id: string;
+};
+
+export type DialogState = {
+  maxQueue: number;
+  queue: DialogOptions[];
+};
+
+export const dialogInternalState = atom<DialogState>({
+  key: 'dialog/internal-state',
+  default: {
+    maxQueue: 2,
+    queue: [],
+  },
+});
+
+export const dialogSetQueueState = selector<DialogOptions | null>({
+  key: 'dialog/queue-state',
+  get: ({ get: _get }) => null, // We don't care about getting the value
+  set: ({ set }, newValue) =>
+    set(dialogInternalState, (prev) => {
+      if (prev.queue.length >= prev.maxQueue) {
+        return {
+          ...prev,
+          queue: [...prev.queue.slice(1), newValue] as DialogOptions[],
+        };
+      }
+
+      return {
+        ...prev,
+        queue: [...prev.queue, newValue] as DialogOptions[],
+      };
+    }),
+});