299 lines
9.7 KiB
TypeScript
299 lines
9.7 KiB
TypeScript
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 Tabs from "@Front/Components/Elements/Tabs";
|
|
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
|
import { ArrowLongLeftIcon, ArrowLongRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
|
import { useCallback, useMemo, useState } from "react";
|
|
|
|
import classes from "./classes.module.scss";
|
|
import useOpenable from "@Front/Hooks/useOpenable";
|
|
import Modal from "@Front/Components/DesignSystem/Modal";
|
|
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
|
|
|
|
export default function DesignSystem() {
|
|
const { isOpen, open, close } = useOpenable();
|
|
const userDb = useMemo(
|
|
() => [
|
|
{
|
|
username: "Maxime",
|
|
id: 1,
|
|
},
|
|
{
|
|
username: "Vincent",
|
|
id: 2,
|
|
},
|
|
{
|
|
username: "Massi",
|
|
id: 3,
|
|
},
|
|
{
|
|
username: "Maxime",
|
|
id: 4,
|
|
},
|
|
{
|
|
username: "Arnaud",
|
|
id: 5,
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
const userDbArray = useMemo(
|
|
() =>
|
|
userDb.map((user) => ({
|
|
label: user.username,
|
|
key: user.id.toString(),
|
|
value: user,
|
|
})),
|
|
[userDb],
|
|
);
|
|
|
|
const [selectedTab, setSelectedTab] = useState<(typeof userDb)[number]>(userDb[0]!);
|
|
|
|
const onSelect = useCallback((value: (typeof userDb)[number]) => {
|
|
setSelectedTab(value);
|
|
}, []);
|
|
|
|
return (
|
|
<DefaultTemplate title={"DesignSystem"}>
|
|
<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
|
|
<Newsletter isOpen />
|
|
<div className={classes["root"]}>
|
|
<div className={classes["components"]}>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
|
|
<Button onClick={open}>Open Modal</Button>
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={close}
|
|
title={"Modal"}
|
|
firstButton={{ text: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
|
|
secondButton={{ text: "Confirmer", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}>
|
|
<Typography typo={ETypo.TEXT_LG_REGULAR}>Modal Content</Typography>
|
|
</Modal>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
|
|
<Tabs<(typeof userDb)[number]> tabs={userDbArray} onSelect={onSelect} />
|
|
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
|
{selectedTab.id} - {selectedTab.username}
|
|
</Typography>
|
|
|
|
<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 leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.PRIMARY}>
|
|
Primary
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.OUTLINED}>
|
|
Primary
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.TEXT}>
|
|
Primary
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SECONDARY}>
|
|
Secondary
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
styletype={EButtonstyletype.OUTLINED}>
|
|
Secondary
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
styletype={EButtonstyletype.TEXT}>
|
|
Secondary
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.NEUTRAL}>
|
|
Neutral
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
styletype={EButtonstyletype.OUTLINED}>
|
|
Neutral
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
styletype={EButtonstyletype.TEXT}>
|
|
Neutral
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.ERROR}>
|
|
Error
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
styletype={EButtonstyletype.OUTLINED}>
|
|
Error
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
styletype={EButtonstyletype.TEXT}>
|
|
Error
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.WARNING}>
|
|
Warning
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
styletype={EButtonstyletype.OUTLINED}>
|
|
Warning
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
styletype={EButtonstyletype.TEXT}>
|
|
Warning
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SUCCESS}>
|
|
Success
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
styletype={EButtonstyletype.OUTLINED}>
|
|
Success
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
styletype={EButtonstyletype.TEXT}>
|
|
Success
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.INFO}>
|
|
Info
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
styletype={EButtonstyletype.OUTLINED}>
|
|
Info
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
styletype={EButtonstyletype.TEXT}>
|
|
Info
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.DEFAULT} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.NEUTRAL} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.PRIMARY} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.ERROR} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.SUCCESS} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.WARNING} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} disabled />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultTemplate>
|
|
);
|
|
}
|