From c6b1eb12ccc2b9e8162499cabbb531ff82aa8938 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 19 Jun 2024 12:44:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(frontend)=20create=20PageLayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create PageLayout, a simple layout for pages
that don't need a sidebar and don't need to be
contains in the screen height.
- Moves the layouts in the layouts folder.
---
 src/frontend/apps/desk/src/components/Box.tsx     |  6 +++++-
 src/frontend/apps/desk/src/core/index.ts          |  1 -
 .../mail-domains/components/MailDomainsLayout.tsx |  2 +-
 .../src/features/teams/components/TeamLayout.tsx  |  2 +-
 .../desk/src/{core => layouts}/MainLayout.tsx     |  0
 src/frontend/apps/desk/src/layouts/PageLayout.tsx | 15 +++++++++++++++
 src/frontend/apps/desk/src/layouts/index.ts       |  2 ++
 src/frontend/apps/desk/src/pages/404.tsx          |  2 +-
 8 files changed, 25 insertions(+), 5 deletions(-)
 rename src/frontend/apps/desk/src/{core => layouts}/MainLayout.tsx (100%)
 create mode 100644 src/frontend/apps/desk/src/layouts/PageLayout.tsx
 create mode 100644 src/frontend/apps/desk/src/layouts/index.ts

diff --git a/src/frontend/apps/desk/src/components/Box.tsx b/src/frontend/apps/desk/src/components/Box.tsx
index 2dd8562f3..bc199f0c9 100644
--- a/src/frontend/apps/desk/src/components/Box.tsx
+++ b/src/frontend/apps/desk/src/components/Box.tsx
@@ -21,8 +21,10 @@ export interface BoxProps {
   $height?: CSSProperties['height'];
   $justify?: CSSProperties['justifyContent'];
   $overflow?: CSSProperties['overflow'];
-  $maxWidth?: CSSProperties['maxWidth'];
   $margin?: MarginPadding;
+  $maxHeight?: CSSProperties['maxHeight'];
+  $minHeight?: CSSProperties['minHeight'];
+  $maxWidth?: CSSProperties['maxWidth'];
   $minWidth?: CSSProperties['minWidth'];
   $padding?: MarginPadding;
   $position?: CSSProperties['position'];
@@ -52,5 +54,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
+  ${({ $maxHeight }) => $maxHeight && `max-height: ${$maxHeight};`}
+  ${({ $minHeight }) => $minHeight && `min-height: ${$minHeight};`}
   ${({ $css }) => $css && `${$css};`}
 `;
diff --git a/src/frontend/apps/desk/src/core/index.ts b/src/frontend/apps/desk/src/core/index.ts
index 6af296806..bd2c0cdcc 100644
--- a/src/frontend/apps/desk/src/core/index.ts
+++ b/src/frontend/apps/desk/src/core/index.ts
@@ -1,2 +1 @@
 export * from './AppProvider';
-export * from './MainLayout';
diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsLayout.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsLayout.tsx
index 7d1e14acc..be220f86d 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsLayout.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsLayout.tsx
@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
 
 import { Box } from '@/components';
-import { MainLayout } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
 import { Panel } from '@/features/mail-domains/components/panel';
+import { MainLayout } from '@/layouts';
 
 export function MailDomainsLayout({ children }: PropsWithChildren) {
   const { colorsTokens } = useCunninghamTheme();
diff --git a/src/frontend/apps/desk/src/features/teams/components/TeamLayout.tsx b/src/frontend/apps/desk/src/features/teams/components/TeamLayout.tsx
index ec818228e..36ee4f149 100644
--- a/src/frontend/apps/desk/src/features/teams/components/TeamLayout.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/TeamLayout.tsx
@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
 
 import { Box } from '@/components';
-import { MainLayout } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
 import { Panel } from '@/features/teams';
+import { MainLayout } from '@/layouts';
 
 export function TeamLayout({ children }: PropsWithChildren) {
   const { colorsTokens } = useCunninghamTheme();
diff --git a/src/frontend/apps/desk/src/core/MainLayout.tsx b/src/frontend/apps/desk/src/layouts/MainLayout.tsx
similarity index 100%
rename from src/frontend/apps/desk/src/core/MainLayout.tsx
rename to src/frontend/apps/desk/src/layouts/MainLayout.tsx
diff --git a/src/frontend/apps/desk/src/layouts/PageLayout.tsx b/src/frontend/apps/desk/src/layouts/PageLayout.tsx
new file mode 100644
index 000000000..df33e1bdc
--- /dev/null
+++ b/src/frontend/apps/desk/src/layouts/PageLayout.tsx
@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+
+import { Box } from '@/components';
+import { Header } from '@/features/header';
+
+export function PageLayout({ children }: PropsWithChildren) {
+  return (
+    <Box $minHeight="100vh">
+      <Header />
+      <Box as="main" $width="100%" $css="flex-grow:1;">
+        {children}
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/frontend/apps/desk/src/layouts/index.ts b/src/frontend/apps/desk/src/layouts/index.ts
new file mode 100644
index 000000000..eb143cc43
--- /dev/null
+++ b/src/frontend/apps/desk/src/layouts/index.ts
@@ -0,0 +1,2 @@
+export * from './MainLayout';
+export * from './PageLayout';
diff --git a/src/frontend/apps/desk/src/pages/404.tsx b/src/frontend/apps/desk/src/pages/404.tsx
index ac2e61eb0..c3a666304 100644
--- a/src/frontend/apps/desk/src/pages/404.tsx
+++ b/src/frontend/apps/desk/src/pages/404.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import Icon404 from '@/assets/icons/icon-404.svg';
 import { Box, StyledLink, Text } from '@/components';
-import { MainLayout } from '@/core';
+import { MainLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
 const StyledButton = styled(Button)`