feat: onboarding ui flow (#464)

* feat: onboarding ui flow

* fix: route naming and auth

* fix: clean unused imports

* fix: remove react.fc

* fix: infra dev remove package.json

* fix: remove usefull memoization

* fix: button stories

* fix: use type instead of interface

* fix: remove debug

front/src/modules/ui/layout/AuthLayout.tsx

@@ -0,0 +1,11 @@
+import { Companies } from '~/pages/companies/Companies';
+
+export function AuthLayout({ children }: React.PropsWithChildren) {
+  return (
+    <>
+      {/** Mocked data */}
+      <Companies />
+      {children}
+    </>
+  );
+}

front/src/modules/ui/layout/navbar/NavCollapseButton.tsx

@@ -34,11 +34,11 @@ const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
     `}
 `;
 
-interface CollapseButtonProps {
+type CollapseButtonProps = {
   hideIfOpen?: boolean;
   hideIfClosed?: boolean;
   hideOnDesktop?: boolean;
-}
+};
 
 export default function NavCollapseButton({
   hideIfOpen,

front/src/modules/ui/layout/navbar/NavbarContainer.tsx

@@ -7,34 +7,32 @@ import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 
 const StyledNavbarContainer = styled.div`
   flex-direction: column;
-  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
-  padding: ${({ theme }) => theme.spacing(2)};
   flex-shrink: 0;
   overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(2)};
+  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: ${(props) =>
       useRecoilValue(isNavbarOpenedState)
         ? `calc(100% - ` + props.theme.spacing(4) + `)`
         : '0'};
+  }
 `;
 
 const NavbarContent = styled.div`
   display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
 `;
 
-interface NavbarProps {
+type NavbarProps = {
   children: React.ReactNode;
   layout?: string;
-}
+};
 
-export const NavbarContainer: React.FC<NavbarProps> = ({
-  children,
-  layout,
-}) => {
+export function NavbarContainer({ children, layout }: NavbarProps) {
   return (
     <StyledNavbarContainer>
       <NavbarContent>{children}</NavbarContent>
     </StyledNavbarContainer>
   );
-};
+}