Uniformize folder structure (#693)

* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests

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

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

front/src/modules/ui/layout/components/DefaultLayout.tsx

@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { CommandMenu } from '@/command-menu/components/CommandMenu';
+import { NavbarAnimatedContainer } from '@/ui/navbar/components/NavbarAnimatedContainer';
+import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
+import { AppNavbar } from '~/AppNavbar';
+
+import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
+
+const StyledLayout = styled.div`
+  background: ${({ theme }) => theme.background.noisy};
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  position: relative;
+  width: 100vw;
+`;
+
+const NAVBAR_WIDTH = '236px';
+
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  width: ${() =>
+    useRecoilValue(isNavbarOpenedState)
+      ? `calc(100% - ${NAVBAR_WIDTH})`
+      : '100%'};
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')};
+  }
+`;
+
+type OwnProps = {
+  children: JSX.Element;
+};
+
+export function DefaultLayout({ children }: OwnProps) {
+  const currentUser = useRecoilState(currentUserState);
+  const userIsAuthenticated = !!currentUser;
+
+  return (
+    <StyledLayout>
+      {userIsAuthenticated ? (
+        <>
+          <CommandMenu />
+          <NavbarAnimatedContainer>
+            <AppNavbar />
+          </NavbarAnimatedContainer>
+          <MainContainer>{children}</MainContainer>
+        </>
+      ) : (
+        children
+      )}
+    </StyledLayout>
+  );
+}

front/src/modules/ui/layout/components/NoTopBarContainer.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+import { RightDrawerContainer } from './RightDrawerContainer';
+
+type OwnProps = {
+  children: JSX.Element | JSX.Element[];
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  padding-top: ${({ theme }) => theme.spacing(4)};
+  width: 100%;
+`;
+
+export function NoTopBarContainer({ children }: OwnProps) {
+  return (
+    <StyledContainer>
+      <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
+    </StyledContainer>
+  );
+}

front/src/modules/ui/layout/components/Panel.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const StyledPanel = styled.div`
+  background: ${({ theme }) => theme.background.primary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: auto;
+  width: 100%;
+`;
+
+export function Panel({ children }: { children: React.ReactNode }) {
+  return <StyledPanel>{children}</StyledPanel>;
+}

front/src/modules/ui/layout/components/RightDrawerContainer.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+import { RightDrawer } from '@/ui/right-drawer/components/RightDrawer';
+
+import { Panel } from './Panel';
+
+type OwnProps = {
+  children: JSX.Element | JSX.Element[];
+  topMargin?: number;
+};
+
+const StyledMainContainer = styled.div<{ topMargin: number }>`
+  background: ${({ theme }) => theme.background.noisy};
+  display: flex;
+
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: calc(100% - ${(props) => props.topMargin}px);
+
+  padding-bottom: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(3)};
+  width: calc(100% - ${({ theme }) => theme.spacing(3)});
+`;
+
+type LeftContainerProps = {
+  isRightDrawerOpen?: boolean;
+};
+
+const StyledLeftContainer = styled.div<LeftContainerProps>`
+  display: flex;
+  position: relative;
+  width: 100%;
+`;
+
+export function RightDrawerContainer({ children, topMargin }: OwnProps) {
+  return (
+    <StyledMainContainer topMargin={topMargin ?? 0}>
+      <StyledLeftContainer>
+        <Panel>{children}</Panel>
+      </StyledLeftContainer>
+      <RightDrawer />
+    </StyledMainContainer>
+  );
+}

front/src/modules/ui/layout/components/WithTopBarContainer.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { TopBarHotkeys } from '../top-bar/components/TableTopBarHotkeys';
+import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/components/TopBar';
+
+import { RightDrawerContainer } from './RightDrawerContainer';
+
+type OwnProps = {
+  children: JSX.Element | JSX.Element[];
+  title: string;
+  icon: ReactNode;
+  onAddButtonClick?: () => void;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export function WithTopBarContainer({
+  children,
+  title,
+  icon,
+  onAddButtonClick,
+}: OwnProps) {
+  return (
+    <StyledContainer>
+      <TopBarHotkeys onAddButtonClick={onAddButtonClick} />
+      <TopBar title={title} icon={icon} onAddButtonClick={onAddButtonClick} />
+      <RightDrawerContainer topMargin={TOP_BAR_MIN_HEIGHT + 16 + 16}>
+        {children}
+      </RightDrawerContainer>
+    </StyledContainer>
+  );
+}