From 5d57e594187a5eaf91a3f2a6d36031d3504176de Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Wed, 17 Jul 2024 10:56:36 +0200
Subject: [PATCH] add page design system

---
 .../Table/MuiTable/classes.module.scss        |   2 +
 .../DesignSystem/Table/MuiTable/index.tsx     |   2 +-
 .../Layouts/DesignSystem/classes.module.scss  |  19 ++
 .../Components/Layouts/DesignSystem/index.tsx | 152 +++++++++++++++
 .../Layouts/Folder/classes.module.scss        |  86 --------
 src/front/Components/Layouts/Folder/index.tsx | 183 ++----------------
 src/front/Config/Module/development.json      |   2 +-
 src/front/Config/Module/preprod.json          |   2 +-
 src/front/Config/Module/production.json       |   2 +-
 src/front/Config/Module/staging.json          |   2 +-
 src/pages/design-system/index.tsx             |   5 +
 11 files changed, 195 insertions(+), 262 deletions(-)
 create mode 100644 src/front/Components/Layouts/DesignSystem/classes.module.scss
 create mode 100644 src/front/Components/Layouts/DesignSystem/index.tsx
 create mode 100644 src/pages/design-system/index.tsx

diff --git a/src/front/Components/DesignSystem/Table/MuiTable/classes.module.scss b/src/front/Components/DesignSystem/Table/MuiTable/classes.module.scss
index 472bb094..18596177 100644
--- a/src/front/Components/DesignSystem/Table/MuiTable/classes.module.scss
+++ b/src/front/Components/DesignSystem/Table/MuiTable/classes.module.scss
@@ -32,7 +32,9 @@
 				width: 80%;
 			}
 		}
+	}
 
+	.row {
 		&:hover {
 			background-color: var(--background-elevation-1);
 		}
diff --git a/src/front/Components/DesignSystem/Table/MuiTable/index.tsx b/src/front/Components/DesignSystem/Table/MuiTable/index.tsx
index d9704e3b..8683422d 100644
--- a/src/front/Components/DesignSystem/Table/MuiTable/index.tsx
+++ b/src/front/Components/DesignSystem/Table/MuiTable/index.tsx
@@ -76,7 +76,7 @@ export default function MuiTable(props: IProps) {
 					<TableBody>
 						{rows.map((row) => {
 							return (
-								<TableRow key={row.key} sx={{ verticalAlign: "middle" }}>
+								<TableRow key={row.key} sx={{ verticalAlign: "middle" }} className={classes["row"]}>
 									{Object.values(row.content).map((cell) => (
 										<TableCell
 											className={classes["cell"]}
diff --git a/src/front/Components/Layouts/DesignSystem/classes.module.scss b/src/front/Components/Layouts/DesignSystem/classes.module.scss
new file mode 100644
index 00000000..2228c147
--- /dev/null
+++ b/src/front/Components/Layouts/DesignSystem/classes.module.scss
@@ -0,0 +1,19 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: 32px;
+	.components {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.rows {
+			display: flex;
+			gap: 16px;
+		}
+	}
+
+	.table {
+		max-width: 800px;
+	}
+}
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
new file mode 100644
index 00000000..c8d45fe9
--- /dev/null
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -0,0 +1,152 @@
+import Button, { EButtonSize, EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
+import Newsletter from "@Front/Components/DesignSystem/Newsletter";
+import Table from "@Front/Components/DesignSystem/Table";
+import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
+import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+
+import classes from "./classes.module.scss";
+
+export default function DesignSystem() {
+	return (
+		<DefaultTemplate title={"DesignSystem"}>
+			<Newsletter isOpen />
+			<div className={classes["root"]}>
+				<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
+				<div className={classes["components"]}>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
+					<div className={classes["rows"]}>
+						<CircleProgress percentage={0} />
+						<CircleProgress percentage={30} />
+						<CircleProgress percentage={60} />
+						<CircleProgress percentage={100} />
+					</div>
+
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Tags</Typography>
+					<div className={classes["rows"]}>
+						<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
+						<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
+						<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
+						<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
+					</div>
+
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Table Tags</Typography>
+					<div className={classes["rows"]}>
+						<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
+						<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
+						<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
+						<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
+					</div>
+
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Table</Typography>
+					<Table
+						className={classes["table"]}
+						header={[
+							{
+								key: "name",
+								title: "Nom",
+							},
+							{
+								key: "firstname",
+								title: "Prénom",
+							},
+							{
+								key: "button",
+							},
+						]}
+						rows={[
+							{
+								key: "1",
+								name: "Doe",
+								firstname: "John",
+								button: (
+									<Button size={EButtonSize.SM} variant={EButtonVariant.PRIMARY}>
+										Send email
+									</Button>
+								),
+							},
+							{
+								key: "2",
+								name: "Doe",
+								firstname: "Jane",
+								button: <Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="Actif" />,
+							},
+							{
+								key: "3",
+								name: "Doe",
+								firstname: "Jack",
+								button: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="Inactif" />,
+							},
+						]}
+					/>
+
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
+					<div className={classes["rows"]}>
+						<Button variant={EButtonVariant.PRIMARY}>PRIMARY</Button>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+							PRIMARY
+						</Button>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+							PRIMARY
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button variant={EButtonVariant.SECONDARY}>SECONDARY</Button>
+						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
+							SECONDARY
+						</Button>
+						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
+							SECONDARY
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button variant={EButtonVariant.NEUTRAL}>NEUTRAL</Button>
+						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
+							NEUTRAL
+						</Button>
+						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
+							NEUTRAL
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button variant={EButtonVariant.ERROR}>ERROR</Button>
+						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
+							ERROR
+						</Button>
+						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
+							ERROR
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button variant={EButtonVariant.WARNING}>WARNING</Button>
+						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
+							WARNING
+						</Button>
+						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
+							WARNING
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
+						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
+							SUCCESS
+						</Button>
+						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
+							SUCCESS
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button variant={EButtonVariant.INFO}>INFO</Button>
+						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
+							INFO
+						</Button>
+						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
+							INFO
+						</Button>
+					</div>
+				</div>
+			</div>
+		</DefaultTemplate>
+	);
+}
diff --git a/src/front/Components/Layouts/Folder/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss
index 0d8fab61..95a759ea 100644
--- a/src/front/Components/Layouts/Folder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/classes.module.scss
@@ -1,91 +1,5 @@
 @import "@Themes/constants.scss";
 
 .root {
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	min-height: 100%;
-
-	.no-folder-selected {
-		width: 100%;
-
-		.choose-a-folder {
-			margin-top: 96px;
-			text-align: center;
-			display: flex;
-			gap: 16px;
-			flex-direction: column;
-		}
-	}
-
-	.folder-informations {
-		width: 100%;
-		min-height: 100%;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		flex-direction: column;
-		flex-grow: 1;
-
-		.folder-header {
-			width: 100%;
-
-			.header {
-				margin-bottom: 32px;
-				width: 100%;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				flex-wrap: wrap;
-			}
-		}
-
-		.second-box {
-			margin-top: 24px;
-			margin-bottom: 32px;
-		}
-
-		.progress-bar {
-			margin-bottom: 32px;
-		}
-
-		.button-container {
-			width: 100%;
-			text-align: center;
-			:first-child {
-				margin-right: 12px;
-			}
-			> * {
-				margin: auto;
-			}
-			@media (max-width: $screen-m) {
-				:first-child {
-					margin-right: 0;
-					margin-bottom: 12px;
-				}
-				> * {
-					width: 100%;
-				}
-			}
-		}
-		.modal-title {
-			margin-bottom: 24px;
-		}
-	}
-
-	.components {
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-
-		.rows {
-			display: flex;
-			gap: 16px;
-		}
-	}
 }
 
-.buttons {
-	display: flex;
-	gap: 16px;
-}
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index 4e12f8c4..4a9ddf07 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -1,179 +1,20 @@
-import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
+import { useCallback, useState } from "react";
 
-import BasePage from "../Base";
 import classes from "./classes.module.scss";
-import Newletter from "@Front/Components/DesignSystem/Newsletter";
-import Button, { EButtonSize, EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
-import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
-import Table from "@Front/Components/DesignSystem/Table";
-import { EnvelopeIcon } from "@heroicons/react/20/solid";
 
-type IProps = {};
-type IState = {
-	selectedFolder: OfficeFolder | null;
-	isArchivedModalOpen: boolean;
-};
-export default class Folder extends BasePage<IProps, IState> {
-	public constructor(props: IProps) {
-		super(props);
-		this.state = {
-			selectedFolder: null,
-			isArchivedModalOpen: true,
-		};
-		this.onSelectedFolder = this.onSelectedFolder.bind(this);
-	}
+export default function Folder() {
+	const [_selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
+	const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
 
-	// TODO: Message if the user has not created any folder yet
-	public override render(): JSX.Element {
-		return (
-			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} mobileBackText={"Liste des dossiers"}>
-				<div className={classes["root"]}>
-					<div className={classes["components"]}>
-						<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
-						<div className={classes["rows"]}>
-							<CircleProgress percentage={0} />
-							<CircleProgress percentage={30} />
-							<CircleProgress percentage={60} />
-							<CircleProgress percentage={100} />
-						</div>
-						<Typography typo={ETypo.TEXT_LG_BOLD}>Tags</Typography>
-						<div className={classes["rows"]}>
-							<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
-							<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
-							<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
-							<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
-						</div>
+	const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
+		setSelectedFolder(folder);
+	}, []);
 
-						<Typography typo={ETypo.TEXT_LG_BOLD}>Table Tags</Typography>
-						<div className={classes["rows"]}>
-							<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
-							<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
-							<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
-							<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
-						</div>
-
-						<Table
-							header={[
-								{
-									key: "name",
-									title: "Nom",
-								},
-								{
-									key: "firstname",
-									title: "Prénom",
-								},
-								{
-									key: "button",
-								},
-							]}
-							rows={[
-								{
-									key: "1",
-									name: "Doe",
-									firstname: "John",
-									button: (
-										<Button size={EButtonSize.SM} variant={EButtonVariant.PRIMARY} >
-											Send email
-										</Button>
-									),
-								},
-								{
-									key: "2",
-									name: "Doe",
-									firstname: "Jane",
-									button: <Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="Actif" />,
-								},
-								{
-									key: "3",
-									name: "Doe",
-									firstname: "Jack",
-									button: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="Inactif" />,
-								},
-							]}
-						/>
-					</div>
-
-					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
-						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
-								Sélectionnez un dossier
-							</Typography>
-							<div className={classes["buttons"]}>
-								<Button variant={EButtonVariant.PRIMARY}>PRIMARY</Button>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
-									PRIMARY
-								</Button>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
-									PRIMARY
-								</Button>
-							</div>
-							<div className={classes["buttons"]}>
-								<Button variant={EButtonVariant.SECONDARY}>SECONDARY</Button>
-								<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
-									SECONDARY
-								</Button>
-								<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
-									SECONDARY
-								</Button>
-							</div>
-							<div className={classes["buttons"]}>
-								<Button variant={EButtonVariant.NEUTRAL}>NEUTRAL</Button>
-								<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
-									NEUTRAL
-								</Button>
-								<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
-									NEUTRAL
-								</Button>
-							</div>
-							<div className={classes["buttons"]}>
-								<Button variant={EButtonVariant.ERROR}>ERROR</Button>
-								<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
-									ERROR
-								</Button>
-								<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
-									ERROR
-								</Button>
-							</div>
-							<div className={classes["buttons"]}>
-								<Button variant={EButtonVariant.WARNING}>WARNING</Button>
-								<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
-									WARNING
-								</Button>
-								<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
-									WARNING
-								</Button>
-							</div>
-							<div className={classes["buttons"]}>
-								<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
-								<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
-									SUCCESS
-								</Button>
-								<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
-									SUCCESS
-								</Button>
-							</div>
-							<div className={classes["buttons"]}>
-								<Button variant={EButtonVariant.INFO}>INFO</Button>
-								<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
-									INFO
-								</Button>
-								<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
-									INFO
-								</Button>
-							</div>
-						</div>
-						<Newletter isOpen={false} />
-					</div>
-				</div>
-			</DefaultNotaryDashboard>
-		);
-	}
-
-	private onSelectedFolder(folder: OfficeFolder): void {
-		this.setState({ selectedFolder: folder });
-	}
+	return (
+		<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={onSelectedFolder} mobileBackText={"Liste des dossiers"}>
+			<div className={classes["root"]}></div>
+		</DefaultNotaryDashboard>
+	);
 }
diff --git a/src/front/Config/Module/development.json b/src/front/Config/Module/development.json
index 2e7e5c5c..1668208d 100644
--- a/src/front/Config/Module/development.json
+++ b/src/front/Config/Module/development.json
@@ -21,7 +21,7 @@
 				"enabled": true,
 				"props": {
 					"path": "/login",
-					"labelKey": "design_system"
+					"labelKey": "login"
 				}
 			},
 			"CustomersLogin": {
diff --git a/src/front/Config/Module/preprod.json b/src/front/Config/Module/preprod.json
index 2e7e5c5c..1668208d 100644
--- a/src/front/Config/Module/preprod.json
+++ b/src/front/Config/Module/preprod.json
@@ -21,7 +21,7 @@
 				"enabled": true,
 				"props": {
 					"path": "/login",
-					"labelKey": "design_system"
+					"labelKey": "login"
 				}
 			},
 			"CustomersLogin": {
diff --git a/src/front/Config/Module/production.json b/src/front/Config/Module/production.json
index 2e7e5c5c..1668208d 100644
--- a/src/front/Config/Module/production.json
+++ b/src/front/Config/Module/production.json
@@ -21,7 +21,7 @@
 				"enabled": true,
 				"props": {
 					"path": "/login",
-					"labelKey": "design_system"
+					"labelKey": "login"
 				}
 			},
 			"CustomersLogin": {
diff --git a/src/front/Config/Module/staging.json b/src/front/Config/Module/staging.json
index 2e7e5c5c..1668208d 100644
--- a/src/front/Config/Module/staging.json
+++ b/src/front/Config/Module/staging.json
@@ -21,7 +21,7 @@
 				"enabled": true,
 				"props": {
 					"path": "/login",
-					"labelKey": "design_system"
+					"labelKey": "login"
 				}
 			},
 			"CustomersLogin": {
diff --git a/src/pages/design-system/index.tsx b/src/pages/design-system/index.tsx
new file mode 100644
index 00000000..d3835570
--- /dev/null
+++ b/src/pages/design-system/index.tsx
@@ -0,0 +1,5 @@
+import DesignSystem from "@Front/Components/Layouts/DesignSystem";
+
+export default function Route() {
+	return <DesignSystem />;
+}