312 lines
11 KiB
TypeScript
312 lines
11 KiB
TypeScript
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
|
||
import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
|
||
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
|
||
import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
|
||
import FolderList from "@Front/Components/DesignSystem/FolderListContainer";
|
||
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
|
||
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
|
||
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
|
||
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
|
||
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
||
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
|
||
import Select, { IOption } from "@Front/Components/DesignSystem/Select";
|
||
import ToolTip from "@Front/Components/DesignSystem/ToolTip";
|
||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
|
||
import BasePage from "@Front/Components/Layouts/Base";
|
||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||
import Toasts, { IToast } from "@Front/Stores/Toasts";
|
||
|
||
import classes from "./classes.module.scss";
|
||
import { customer2, document, documentDeposited, documentPending, folder, folders, folderWithPendingDocument } from "./dummyData";
|
||
|
||
import "reflect-metadata";
|
||
|
||
type IState = {
|
||
isModalDisplayed: boolean;
|
||
selectedOption?: IOption;
|
||
};
|
||
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);
|
||
this.onSelectedOption = this.onSelectedOption.bind(this);
|
||
}
|
||
|
||
public override render(): JSX.Element {
|
||
const selectOptions: IOption[] = [
|
||
{ value: "1", label: "Divorce" },
|
||
{ value: "2", label: "Succession" },
|
||
{ value: "3", label: "Vente immobilière" },
|
||
];
|
||
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
|
||
toolTip="Mon super tooltip"
|
||
option={{
|
||
label: "Check Box 1",
|
||
value: "box_1",
|
||
}}
|
||
/>
|
||
<CheckBox
|
||
option={{
|
||
label: "Check Box 2",
|
||
value: "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" value="box_1">
|
||
Radio Box 1
|
||
</RadioBox>
|
||
<RadioBox name="RadioBox" value="box_2">
|
||
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 className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>Progress bar component</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<QuantityProgressBar currentNumber={10} total={100} title={"Complétion du dossier client"} />
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<QuantityProgressBar currentNumber={30} total={100} title={"Complétion du dossier client"} />
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<QuantityProgressBar currentNumber={70} total={100} title={"Complétion du dossier client"} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>Folder container component</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.P_16}>Folder with no document to validate</Typography>
|
||
<div className={classes["folder-conatainer"]}>
|
||
<FolderContainer folder={folder} />
|
||
</div>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.P_16}>Folder with document waiting for being validate</Typography>
|
||
<div className={classes["folder-conatainer"]}>
|
||
<FolderContainer folder={folderWithPendingDocument} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>Select component</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<div className={classes["folder-conatainer"]}>
|
||
<Select
|
||
options={selectOptions}
|
||
onChange={this.onSelectedOption}
|
||
placeholder={"Type d’acte"}
|
||
selectedOption={this.state.selectedOption}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>Notary Documents</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.P_16}>Documents ASKED</Typography>
|
||
<div className={classes["folder-conatainer"]}>
|
||
<DocumentNotary document={document} />
|
||
</div>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.P_16}>Documents PENDING</Typography>
|
||
<div className={classes["folder-conatainer"]}>
|
||
<DocumentNotary document={documentPending} />
|
||
</div>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.P_16}>Documents VALIDATED</Typography>
|
||
|
||
<div className={classes["folder-conatainer"]}>
|
||
<DocumentNotary document={documentDeposited} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>Notary Documents</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<UserFolder customer={customer2} folder={folder} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>MultiSelect</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<MultiSelect options={selectOptions} placeholder="Numéro CRPCEN" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>Document SearchBar</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<SearchBar folders={folders} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>Folder List</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<FolderList folders={folders} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className={classes["section"]}>
|
||
<div className={classes["sub-section"]}>
|
||
<Typography typo={ITypo.H3}>Preview Image/Pdf</Typography>
|
||
</div>
|
||
<div className={classes["sub-section"]}>
|
||
<div style={{ height: "500px" }}>
|
||
<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf" />
|
||
</div>
|
||
<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Vgs_Vr_Mt_TDY_Xme8qhw8quiin_Co_Bo_FBA_Vc9k6_H2d1_Bh_UU_162d84281d.jpeg" />
|
||
</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);
|
||
}
|
||
|
||
private onSelectedOption(option: IOption) {
|
||
this.setState({
|
||
selectedOption: option,
|
||
});
|
||
}
|
||
}
|