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/step-bar/components/Step.tsx

@@ -0,0 +1,117 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+import { AnimatedCheckmark } from '@/ui/checkmark/components/AnimatedCheckmark';
+
+const Container = styled.div<{ isLast: boolean }>`
+  align-items: center;
+  display: flex;
+  flex-grow: ${({ isLast }) => (isLast ? '0' : '1')};
+`;
+
+const StepCircle = styled(motion.div)<{ isCurrent: boolean }>`
+  align-items: center;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 1px;
+  display: flex;
+  flex-basis: auto;
+  flex-shrink: 0;
+  height: 20px;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 20px;
+`;
+
+const StepIndex = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StepLabel = styled.span<{ isActive: boolean }>`
+  color: ${({ theme, isActive }) =>
+    isActive ? theme.font.color.primary : theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+  white-space: nowrap;
+`;
+
+const StepLine = styled(motion.div)<{ isActive: boolean }>`
+  height: 2px;
+  margin-left: ${({ theme }) => theme.spacing(2)};
+  margin-right: ${({ theme }) => theme.spacing(2)};
+  overflow: hidden;
+  width: 100%;
+`;
+
+export type StepProps = React.PropsWithChildren &
+  React.ComponentProps<'div'> & {
+    isActive?: boolean;
+    isLast?: boolean;
+    index?: number;
+    label: string;
+  };
+
+export const Step = ({
+  isActive = false,
+  isLast = false,
+  index = 0,
+  label,
+  children,
+}: StepProps) => {
+  const theme = useTheme();
+
+  const variantsCircle = {
+    active: {
+      backgroundColor: theme.font.color.primary,
+      borderColor: theme.font.color.primary,
+      transition: { duration: 0.5 },
+    },
+    inactive: {
+      backgroundColor: theme.background.transparent.lighter,
+      borderColor: theme.border.color.medium,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  const variantsLine = {
+    active: {
+      backgroundColor: theme.font.color.primary,
+      transition: { duration: 0.5 },
+    },
+    inactive: {
+      backgroundColor: theme.border.color.medium,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <Container isLast={isLast}>
+      <StepCircle
+        isCurrent={isActive}
+        variants={variantsCircle}
+        animate={isActive ? 'active' : 'inactive'}
+      >
+        {isActive && (
+          <AnimatedCheckmark isAnimating={isActive} color={theme.color.gray0} />
+        )}
+        {!isActive && <StepIndex>{index + 1}</StepIndex>}
+      </StepCircle>
+      <StepLabel isActive={isActive}>{label}</StepLabel>
+      {!isLast && (
+        <StepLine
+          isActive={isActive}
+          variants={variantsLine}
+          animate={isActive ? 'active' : 'inactive'}
+        />
+      )}
+      {isActive && children}
+    </Container>
+  );
+};
+
+Step.displayName = 'StepBar/Step';

front/src/modules/ui/step-bar/components/StepBar.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { Step, StepProps } from './Step';
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+`;
+
+export type StepsProps = React.PropsWithChildren &
+  React.ComponentProps<'div'> & {
+    activeStep: number;
+  };
+
+export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
+  return (
+    <Container {...restProps}>
+      {React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        // If the child is not a Step, return it as-is
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        if (child.type?.displayName !== Step.displayName) {
+          return child;
+        }
+
+        return React.cloneElement<StepProps>(child as any, {
+          index,
+          isActive: index <= activeStep,
+          isLast: index === React.Children.count(children) - 1,
+        });
+      })}
+    </Container>
+  );
+};
+
+StepBar.Step = Step;