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/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;