From db6d4e029383ae2b56d369d4e26b0b285e0a0771 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 16:39:28 +0200
Subject: [PATCH 1/2] :sparkles: every button on design system

---
 .../Components/Layouts/DesignSystem/index.tsx | 482 ++++++++++++++++--
 1 file changed, 440 insertions(+), 42 deletions(-)

diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 880e89ba..813921d7 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -161,136 +161,534 @@ export default function DesignSystem() {
 
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.PRIMARY}>
-							Primary
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							size={EButtonSize.SM}>
+							Primary SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.PRIMARY}
-							styletype={EButtonstyletype.OUTLINED}>
-							Primary
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.SM}>
+							Primary SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.PRIMARY}
-							styletype={EButtonstyletype.TEXT}>
-							Primary
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}>
+							Primary SM
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SECONDARY}>
-							Secondary
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							size={EButtonSize.MD}>
+							Primary MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Primary MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Primary MD
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							size={EButtonSize.LG}>
+							Primary LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Primary LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.PRIMARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Primary LG
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							size={EButtonSize.SM}>
+							Secondary SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SECONDARY}
-							styletype={EButtonstyletype.OUTLINED}>
-							Secondary
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.SM}>
+							Secondary SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SECONDARY}
-							styletype={EButtonstyletype.TEXT}>
-							Secondary
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}>
+							Secondary SM
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.NEUTRAL}>
-							Neutral
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							size={EButtonSize.MD}>
+							Secondary MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Secondary MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Secondary MD
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							size={EButtonSize.LG}>
+							Secondary LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Secondary LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SECONDARY}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Secondary LG
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							size={EButtonSize.SM}>
+							Neutral SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.NEUTRAL}
-							styletype={EButtonstyletype.OUTLINED}>
-							Neutral
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.SM}>
+							Neutral SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.NEUTRAL}
-							styletype={EButtonstyletype.TEXT}>
-							Neutral
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}>
+							Neutral SM
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.ERROR}>
-							Error
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							size={EButtonSize.MD}>
+							Neutral MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Neutral MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Neutral MD
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							size={EButtonSize.LG}>
+							Neutral LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Neutral LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.NEUTRAL}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Neutral LG
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							size={EButtonSize.SM}>
+							Error SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.ERROR}
-							styletype={EButtonstyletype.OUTLINED}>
-							Error
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.SM}>
+							Error SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.ERROR}
-							styletype={EButtonstyletype.TEXT}>
-							Error
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}>
+							Error SM
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.WARNING}>
-							Warning
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							size={EButtonSize.MD}>
+							Error MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Error MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Error MD
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							size={EButtonSize.LG}>
+							Error LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Error LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.ERROR}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Error LG
+						</Button>
+					</div>
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							size={EButtonSize.SM}>
+							Warning SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.WARNING}
-							styletype={EButtonstyletype.OUTLINED}>
-							Warning
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.SM}>
+							Warning SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.WARNING}
-							styletype={EButtonstyletype.TEXT}>
-							Warning
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}>
+							Warning SM
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							size={EButtonSize.MD}>
+							Warning MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Warning MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Warning MD
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							size={EButtonSize.LG}>
+							Warning LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Warning LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.WARNING}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Warning LG
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SUCCESS}>
-							Success
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							size={EButtonSize.SM}>
+							Success SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SUCCESS}
-							styletype={EButtonstyletype.OUTLINED}>
-							Success
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.SM}>
+							Success SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SUCCESS}
-							styletype={EButtonstyletype.TEXT}>
-							Success
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}>
+							Success SM
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							size={EButtonSize.MD}>
+							Success MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Success MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Success MD
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							size={EButtonSize.LG}>
+							Success LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Success LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.SUCCESS}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Success LG
 						</Button>
 					</div>
 					<div className={classes["rows"]}>
-						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.INFO}>
-							Info
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							size={EButtonSize.SM}>
+							Info SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.INFO}
-							styletype={EButtonstyletype.OUTLINED}>
-							Info
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.SM}>
+							Info SM
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.INFO}
-							styletype={EButtonstyletype.TEXT}>
-							Info
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.SM}>
+							Info SM
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							size={EButtonSize.MD}>
+							Info MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.MD}>
+							Info MD
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.MD}>
+							Info MD
+						</Button>
+					</div>
+
+					<div className={classes["rows"]}>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							size={EButtonSize.LG}>
+							Info LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styletype={EButtonstyletype.OUTLINED}
+							size={EButtonSize.LG}>
+							Info LG
+						</Button>
+						<Button
+							leftIcon={<ArrowLongLeftIcon />}
+							rightIcon={<ArrowLongRightIcon />}
+							variant={EButtonVariant.INFO}
+							styletype={EButtonstyletype.TEXT}
+							size={EButtonSize.LG}>
+							Info LG
 						</Button>
 					</div>
 					<div className={classes["rows"]}>

From 1dc2738ee0a6f943d62f38268b1671c931f7a4ff Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 16:42:54 +0200
Subject: [PATCH 2/2] :sparkles: Add number picker to design system

---
 src/front/Components/Layouts/DesignSystem/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 813921d7..3e5eb232 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -16,6 +16,7 @@ import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/I
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
+import NumberPicker from "@Front/Components/Elements/NumberPicker";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -68,6 +69,8 @@ export default function DesignSystem() {
 			<div className={classes["root"]}>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
+					<Typography typo={ETypo.TEXT_SM_REGULAR}>Number picker avec min à 1 et max à 10</Typography>
+					<NumberPicker defaultValue={1} onChange={() => {}} min={1} max={10} />
 					<Form className={classes["inputs"]}>
 						<TextField label="Label" placeholder="Placeholder" canCopy />
 						<TextField label="Without copy" placeholder="Placeholder" />