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/modal/components/Modal.tsx

@@ -7,20 +7,42 @@ import {
   useListenClickOutside,
 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-const StyledContainer = styled.div`
-  align-items: center;
+const ModalDiv = styled(motion.div)`
   display: flex;
   flex-direction: column;
-  padding: ${({ theme }) => theme.spacing(10)};
-  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
-`;
-
-const ModalDiv = styled(motion.div)`
   background: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.md};
+  overflow: hidden;
+  max-height: 90vh;
   z-index: 10000; // should be higher than Backdrop's z-index
 `;
 
+const StyledHeader = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(5)};
+`;
+
+const StyledContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.spacing(10)};
+`;
+
+const StyledFooter = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(5)};
+`;
+
 const BackDrop = styled(motion.div)`
   align-items: center;
   background: ${({ theme }) => theme.background.overlay};
@@ -34,7 +56,31 @@ const BackDrop = styled(motion.div)`
   z-index: 9999;
 `;
 
-type Props = React.PropsWithChildren &
+/**
+ * Modal components
+ */
+type ModalHeaderProps = React.PropsWithChildren & React.ComponentProps<'div'>;
+
+function ModalHeader({ children, ...restProps }: ModalHeaderProps) {
+  return <StyledHeader {...restProps}>{children}</StyledHeader>;
+}
+
+type ModalContentProps = React.PropsWithChildren & React.ComponentProps<'div'>;
+
+function ModalContent({ children, ...restProps }: ModalContentProps) {
+  return <StyledContent {...restProps}>{children}</StyledContent>;
+}
+
+type ModalFooterProps = React.PropsWithChildren & React.ComponentProps<'div'>;
+
+function ModalFooter({ children, ...restProps }: ModalFooterProps) {
+  return <StyledFooter {...restProps}>{children}</StyledFooter>;
+}
+
+/**
+ * Modal
+ */
+type ModalProps = React.PropsWithChildren &
   React.ComponentProps<'div'> & {
     isOpen?: boolean;
     onOutsideClick?: () => void;
@@ -51,8 +97,8 @@ export function Modal({
   children,
   onOutsideClick,
   ...restProps
-}: Props) {
-  const modalRef = useRef(null);
+}: ModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
 
   useListenClickOutside({
     refs: [modalRef],
@@ -67,15 +113,23 @@ export function Modal({
   return (
     <BackDrop>
       <ModalDiv
-        layout
+        // framer-motion seems to have typing problems with refs
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ref={modalRef}
         initial="hidden"
         animate="visible"
         exit="exit"
+        layout
         variants={modalVariants}
-        ref={modalRef}
+        {...restProps}
       >
-        <StyledContainer {...restProps}>{children}</StyledContainer>
+        {children}
       </ModalDiv>
     </BackDrop>
   );
 }
+
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Footer = ModalFooter;

front/src/modules/ui/modal/components/__stories__/Modal.stories.tsx

@@ -22,7 +22,11 @@ const StyledContentContainer = styled.div`
 
 const args = {
   isOpen: true,
-  children: <StyledContentContainer>Lorem ipsum</StyledContentContainer>,
+  children: (
+    <Modal.Content>
+      <StyledContentContainer>Lorem ipsum</StyledContentContainer>
+    </Modal.Content>
+  ),
 };
 
 export const Default: Story = {