lecoffre-front/src/front/Components/Layouts/DesignSystem/index.tsx

import BasePage from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import ToolTip from "@Front/Components/DesignSystem/ToolTip";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";

type IState = {
	isModalDisplayed: boolean;
};
type IProps = {};

export default class DesignSystem extends BasePage<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			isModalDisplayed: false,
		};
		this.openModal = this.openModal.bind(this);
		this.closeModal = this.closeModal.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<DefaultTemplate title={"HomePage"}>
				<div className={classes["root"]}>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H1}>Website design System</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.P_18}>
								This page allows to gather all the design system of the site. A Design System is a library of components,
								visuals and principles with reusable code. This evolving kit offers a UX and UI repository for designers and
								developers of digital products and services. The construction of a design system offers many advantages.
								This solution facilitates the work of the teams and reduces the "design debt" and the "technical debt". The
								result is a coherent ecosystem and therefore a better experience for users and customers.
							</Typography>
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Button components</Typography>
						</div>
						<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
						<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
						<Button variant={EButtonVariant.GHOST}>Ghost</Button>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Toaster component</Typography>
						</div>
						<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>
							Spawn a toast
						</Button>
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Modal components</Typography>
						</div>
						<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>
							Show Modal
						</Button>

						<Confirm
							isOpen={this.state.isModalDisplayed}
							onClose={this.closeModal}
							closeBtn
							header={"Title"}
							cancelText={"Cancel"}
							confirmText={"Confirmer"}>
							Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat.
							Elementum malesuada at sit elit.
						</Confirm>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>HeaderLink components</Typography>
						</div>
						<div className={classes["inline-flex"]}>
							<HeaderLink text={"Home"} path={"/"} />
							<HeaderLink text={"Design-system"} path={"/design-system"} />
						</div>
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>CheckBox component</Typography>
						</div>
						<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip" />
						<CheckBox name="Check Box 2" />
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>RadioBox component</Typography>
						</div>
						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">
							Radio Box 1
						</RadioBox>
						<RadioBox name="RadioBox">Radio Box 2</RadioBox>
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Tool tip component</Typography>
						</div>
						<ToolTip title="toolTip" text="tooltip content" isNotFlex={true} />
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Input component</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<InputField name="input field" fakeplaceholder="input place hodler" />
						</div>
						<div className={classes["sub-section"]}>
							<InputField name="input field" fakeplaceholder="text area place hodler" textarea />
						</div>
						<div className={classes["sub-section"]}>
							<InputField name="input field" fakeplaceholder="number place hodler" type="number" />
						</div>
					</div>
				</div>
			</DefaultTemplate>
		);
	}
	private openModal() {
		this.setState({
			isModalDisplayed: true,
		});
	}
	private closeModal() {
		this.setState({
			isModalDisplayed: false,
		});
	}
	private spawnToast() {
		const toast: IToast = {
			title: "Un collaborateur veut rejoindre votre office",
			text: "12:00 - 1 fev 2023",
		};
		Toasts.getInstance().open(toast);
	}
}