4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add page design system

Browse Source
This commit is contained in:
Max S 2024-07-17 10:56:36 +02:00
parent cd293467ef
commit 5d57e59418
11 changed files with 195 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/front/Components/DesignSystem/Table/MuiTable/classes.module.scss
View File

@ -32,7 +32,9 @@
width: 80%; width: 80%;
} }
} }
}
.row {
&:hover { &:hover {
background-color: var(--background-elevation-1); background-color: var(--background-elevation-1);
} }

2
src/front/Components/DesignSystem/Table/MuiTable/index.tsx
View File

@ -76,7 +76,7 @@ export default function MuiTable(props: IProps) {
<TableBody> <TableBody>
{rows.map((row) => { {rows.map((row) => {
return ( return (
<TableRow key={row.key} sx={{ verticalAlign: "middle" }}> <TableRow key={row.key} sx={{ verticalAlign: "middle" }} className={classes["row"]}>
{Object.values(row.content).map((cell) => ( {Object.values(row.content).map((cell) => (
<TableCell <TableCell
className={classes["cell"]} className={classes["cell"]}

19
src/front/Components/Layouts/DesignSystem/classes.module.scss Normal file
View File

@ -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;
}
}

152
src/front/Components/Layouts/DesignSystem/index.tsx Normal file
View File

@ -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>
);
}

86
src/front/Components/Layouts/Folder/classes.module.scss
View File

@ -1,91 +1,5 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .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;
}

183
src/front/Components/Layouts/Folder/index.tsx
View File

@ -1,179 +1,20 @@
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { useCallback, useState } from "react";
import BasePage from "../Base";
import classes from "./classes.module.scss"; 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 = {}; export default function Folder() {
type IState = { const [_selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
selectedFolder: OfficeFolder | null; const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
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);
}
// TODO: Message if the user has not created any folder yet const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
public override render(): JSX.Element { setSelectedFolder(folder);
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>
<Typography typo={ETypo.TEXT_LG_BOLD}>Table Tags</Typography> return (
<div className={classes["rows"]}> <DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={onSelectedFolder} mobileBackText={"Liste des dossiers"}>
<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" /> <div className={classes["root"]}></div>
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" /> </DefaultNotaryDashboard>
<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 });
}
} }

2
src/front/Config/Module/development.json
View File

@ -21,7 +21,7 @@
"enabled": true, "enabled": true,
"props": { "props": {
"path": "/login", "path": "/login",
"labelKey": "design_system" "labelKey": "login"
} }
}, },
"CustomersLogin": { "CustomersLogin": {

2
src/front/Config/Module/preprod.json
View File

@ -21,7 +21,7 @@
"enabled": true, "enabled": true,
"props": { "props": {
"path": "/login", "path": "/login",
"labelKey": "design_system" "labelKey": "login"
} }
}, },
"CustomersLogin": { "CustomersLogin": {

2
src/front/Config/Module/production.json
View File

@ -21,7 +21,7 @@
"enabled": true, "enabled": true,
"props": { "props": {
"path": "/login", "path": "/login",
"labelKey": "design_system" "labelKey": "login"
} }
}, },
"CustomersLogin": { "CustomersLogin": {

2
src/front/Config/Module/staging.json
View File

@ -21,7 +21,7 @@
"enabled": true, "enabled": true,
"props": { "props": {
"path": "/login", "path": "/login",
"labelKey": "design_system" "labelKey": "login"
} }
}, },
"CustomersLogin": { "CustomersLogin": {

5
src/pages/design-system/index.tsx Normal file
View File

@ -0,0 +1,5 @@
import DesignSystem from "@Front/Components/Layouts/DesignSystem";
export default function Route() {
return <DesignSystem />;
}