313 lines
12 KiB
TypeScript
313 lines
12 KiB
TypeScript
import "reflect-metadata";
|
|
|
|
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 { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
|
|
|
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 as IDashBoardFolder} />
|
|
</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 as IDashBoardFolder} />
|
|
</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 as IDashBoardFolder} isOpened={true} onClose={() => {return}} onOpen={() => {return}}/>
|
|
</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 as IDashBoardFolder[]} />
|
|
</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 as IDashBoardFolder[]} isArchived={false} />
|
|
</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,
|
|
});
|
|
}
|
|
}
|