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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Max S 2024-07-18 19:37:42 +02:00
commit 328c95ecf4
42 changed files with 912 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
src/front/Components/DesignSystem/Button/classes.module.scss
View File

@ -14,6 +14,7 @@
user-select: none;
cursor: pointer;
font-family: var(--font-text-family);
border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0));
svg {
width: 18px;
@ -26,36 +27,72 @@
&[variant="primary"] {
color: var(--color-primary-500);
border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0));
background: var(--button-contained-primary-default-background, #005bcb);
border-color: var(--button-contained-primary-default-border);
svg {
stroke: var(--button-contained-primary-default-contrast);
}
&:hover {
border: 1px solid var(--button-contained-primary-hovered-border, rgba(0, 0, 0, 0));
border-color: var(--button-contained-primary-hovered-border);
background: var(--button-contained-primary-hovered-background, #0040a4);
svg {
stroke: var(--button-contained-primary-hovered-contrast);
}
}
&:focus,
&:active {
border: 1px solid var(--button-contained-primary-pressed-border, rgba(0, 0, 0, 0));
border-color: var(--button-contained-primary-pressed-border);
background: var(--button-contained-primary-pressed-background, #013391);
svg {
stroke: var(--button-contained-primary-pressed-contrast);
}
}
&[styleType="outlined"] {
border-color: var(--button-outlined-primary-default-border);
svg {
stroke: var(--button-outlined-primary-default-contrast);
}
&:hover {
background-color: var(--color-primary-50);
border-color: var(--button-outlined-primary-hovered-border);
svg {
stroke: var(--button-outlined-primary-hovered-contrast);
}
}
&:focus,
&:active {
background-color: var(--color-primary-100);
color: var(--color-primary-700);
border-color: var(--color-primary-700);
border-color: var(--button-outlined-primary-pressed-border);
svg {
stroke: var(--button-outlined-primary-pressed-contrast);
}
}
}
&[styleType="text"] {
svg {
stroke: var(--button-text-primary-default-contrast);
}
&:hover {
background-color: transparent;
border-color: var(--button-outlined-primary-hovered-border);
svg {
stroke: var(--button-text-primary-hovered-contrast);
}
}
&:focus,
@ -63,6 +100,10 @@
background-color: transparent;
color: var(--color-primary-800);
border-color: var(--color-primary-800);
svg {
stroke: var(--button-text-primary-pressed-contrast);
}
}
}
}
@ -72,20 +113,40 @@
background: var(--color-secondary-500);
border-color: var(--color-secondary-500);
svg {
stroke: var(--button-contained-secondary-default-contrast);
}
&:hover {
background: var(--color-secondary-700);
border-color: var(--color-secondary-700);
svg {
stroke: var(--button-contained-secondary-hovered-contrast);
}
}
&:focus,
&:active {
background: var(--color-secondary-800);
border-color: var(--color-secondary-800);
svg {
stroke: var(--button-contained-secondary-pressed-contrast);
}
}
&[styleType="outlined"] {
svg {
stroke: var(--button-outlined-secondary-default-contrast);
}
&:hover {
background-color: var(--color-secondary-50);
svg {
stroke: var(--button-outlined-secondary-hovered-contrast);
}
}
&:focus,
@ -93,12 +154,24 @@
background-color: var(--color-secondary-100);
color: var(--color-secondary-700);
border-color: var(--color-secondary-700);
svg {
stroke: var(--button-outlined-secondary-pressed-contrast);
}
}
}
&[styleType="text"] {
svg {
stroke: var(--button-text-secondary-default-contrast);
}
&:hover {
background-color: transparent;
svg {
stroke: var(--button-text-secondary-hovered-contrast);
}
}
&:focus,
@ -106,6 +179,10 @@
background-color: transparent;
color: var(--color-secondary-800);
border-color: var(--color-secondary-800);
svg {
stroke: var(--button-text-secondary-pressed-contrast);
}
}
}
}
@ -115,20 +192,40 @@
background: var(--color-neutral-500);
border-color: var(--color-neutral-500);
svg {
stroke: var(--button-contained-neutral-default-contrast);
}
&:hover {
background: var(--color-neutral-700);
border-color: var(--color-neutral-700);
svg {
stroke: var(--button-contained-neutral-hovered-contrast);
}
}
&:focus,
&:active {
background: var(--color-neutral-800);
border-color: var(--color-neutral-800);
svg {
stroke: var(--button-contained-neutral-pressed-contrast);
}
}
&[styleType="outlined"] {
svg {
stroke: var(--button-outlined-neutral-default-contrast);
}
&:hover {
background-color: var(--color-neutral-50);
svg {
stroke: var(--button-outlined-neutral-hovered-contrast);
}
}
&:focus,
@ -136,12 +233,24 @@
background-color: var(--color-neutral-100);
color: var(--color-neutral-700);
border-color: var(--color-neutral-700);
svg {
stroke: var(--button-outlined-neutral-pressed-contrast);
}
}
}
&[styleType="text"] {
svg {
stroke: var(--button-text-neutral-default-contrast);
}
&:hover {
background-color: transparent;
svg {
stroke: var(--button-text-neutral-hovered-contrast);
}
}
&:focus,
@ -149,6 +258,10 @@
background-color: transparent;
color: var(--color-neutral-800);
border-color: var(--color-neutral-800);
svg {
stroke: var(--button-text-neutral-pressed-contrast);
}
}
}
}
@ -158,21 +271,41 @@
background: var(--color-error-600);
border-color: var(--color-error-600);
svg {
stroke: var(--button-contained-error-default-contrast);
}
&:hover {
background: var(--color-error-800);
border-color: var(--color-error-800);
svg {
stroke: var(--button-contained-error-hovered-contrast);
}
}
&:focus,
&:active {
background: var(--color-error-900);
border-color: var(--color-error-900);
svg {
stroke: var(--button-contained-error-pressed-contrast);
}
}
&[styleType="outlined"] {
svg {
stroke: var(--button-outlined-error-default-contrast);
}
&:hover {
background-color: var(--color-error-50);
border-color: var(--color-secondary-700);
svg {
stroke: var(--button-outlined-error-hovered-contrast);
}
}
&:focus,
@ -180,14 +313,26 @@
background-color: var(--color-error-100);
color: var(--color-secondary-700);
border-color: var(--color-secondary-700);
svg {
stroke: var(--button-outlined-error-pressed-contrast);
}
}
}
&[styleType="text"] {
svg {
stroke: var(--button-text-error-default-contrast);
}
&:hover {
background-color: transparent;
color: var(--color-error-800);
border-color: var(--color-error-800);
svg {
stroke: var(--button-text-error-hovered-contrast);
}
}
&:focus,
@ -195,6 +340,10 @@
background-color: transparent;
color: var(--color-error-900);
border-color: var(--color-error-900);
svg {
stroke: var(--button-text-error-pressed-contrast);
}
}
}
}
@ -204,22 +353,42 @@
background: var(--color-warning-600);
border-color: var(--color-warning-600);
svg {
stroke: var(--button-contained-warning-default-contrast);
}
&:hover {
background: var(--color-warning-800);
border-color: var(--color-warning-800);
svg {
stroke: var(--button-contained-warning-hovered-contrast);
}
}
&:focus,
&:active {
background: var(--color-warning-900);
border-color: var(--color-warning-900);
svg {
stroke: var(--button-contained-warning-pressed-contrast);
}
}
&[styleType="outlined"] {
svg {
stroke: var(--button-outlined-warning-default-contrast);
}
&:hover {
background-color: var(--color-warning-50);
border-color: var(--color-warning-700);
color: var(--color-warning-700);
svg {
stroke: var(--button-outlined-warning-hovered-contrast);
}
}
&:focus,
@ -227,14 +396,26 @@
background-color: var(--color-warning-100);
color: var(--color-warning-700);
border-color: var(--color-warning-700);
svg {
stroke: var(--button-outlined-warning-pressed-contrast);
}
}
}
&[styleType="text"] {
svg {
stroke: var(--button-text-warning-default-contrast);
}
&:hover {
background-color: transparent;
color: var(--color-warning-800);
border-color: var(--color-warning-800);
svg {
stroke: var(--button-text-warning-hovered-contrast);
}
}
&:focus,
@ -242,6 +423,10 @@
background-color: transparent;
color: var(--color-warning-900);
border-color: var(--color-warning-900);
svg {
stroke: var(--button-text-warning-pressed-contrast);
}
}
}
}
@ -251,22 +436,42 @@
background: var(--color-success-600);
border-color: var(--color-success-600);
svg {
stroke: var(--button-contained-success-default-contrast);
}
&:hover {
background: var(--color-success-800);
border-color: var(--color-success-800);
svg {
stroke: var(--button-contained-success-hovered-contrast);
}
}
&:focus,
&:active {
background: var(--color-success-900);
border-color: var(--color-success-900);
svg {
stroke: var(--button-contained-success-pressed-contrast);
}
}
&[styleType="outlined"] {
svg {
stroke: var(--button-outlined-success-default-contrast);
}
&:hover {
background-color: var(--color-success-50);
border-color: var(--color-success-700);
color: var(--color-success-700);
svg {
stroke: var(--button-outlined-success-hovered-contrast);
}
}
&:focus,
@ -274,14 +479,26 @@
background-color: var(--color-success-100);
color: var(--color-success-700);
border-color: var(--color-success-700);
svg {
stroke: var(--button-outlined-success-pressed-contrast);
}
}
}
&[styleType="text"] {
svg {
stroke: var(--button-text-success-default-contrast);
}
&:hover {
background-color: transparent;
color: var(--color-success-800);
border-color: var(--color-success-800);
svg {
stroke: var(--button-text-success-hovered-contrast);
}
}
&:focus,
@ -289,6 +506,10 @@
background-color: transparent;
color: var(--color-success-900);
border-color: var(--color-success-900);
svg {
stroke: var(--button-text-success-pressed-contrast);
}
}
}
}
@ -298,22 +519,41 @@
background: var(--color-info-700);
border-color: var(--color-info-700);
svg {
stroke: var(--button-contained-info-default-contrast);
}
&:hover {
background: var(--color-info-900);
border-color: var(--color-info-900);
svg {
stroke: var(--button-contained-info-hovered-contrast);
}
}
&:focus,
&:active {
background: var(--color-info-950);
border-color: var(--color-info-950);
svg {
stroke: var(--button-contained-info-pressed-contrast);
}
}
&[styleType="outlined"] {
svg {
stroke: var(--button-outlined-info-default-contrast);
}
&:hover {
background-color: var(--color-info-50);
border-color: var(--color-info-700);
color: var(--color-info-700);
svg {
stroke: var(--button-outlined-info-hovered-contrast);
}
}
&:focus,
@ -321,14 +561,26 @@
background-color: var(--color-info-100);
color: var(--color-info-700);
border-color: var(--color-info-700);
svg {
stroke: var(--button-outlined-info-pressed-contrast);
}
}
}
&[styleType="text"] {
svg {
stroke: var(--button-text-info-default-contrast);
}
&:hover {
background-color: transparent;
color: var(--color-info-900);
border-color: var(--color-info-900);
svg {
stroke: var(--button-text-info-hovered-contrast);
}
}
&:focus,
@ -336,6 +588,10 @@
background-color: transparent;
color: var(--color-info-950);
border-color: var(--color-info-950);
svg {
stroke: var(--button-text-info-pressed-contrast);
}
}
}
}

24
src/front/Components/DesignSystem/Button/index.tsx
View File

@ -1,8 +1,7 @@
import Image from "next/image";
import React, { CSSProperties } from "react";
import classNames from "classnames";
import React from "react";
import classes from "./classes.module.scss";
import classNames from "classnames";
export enum EButtonVariant {
PRIMARY = "primary",
@ -33,12 +32,11 @@ type IProps = {
size?: EButtonSize;
styleType?: EButtonStyleType;
fullwidth?: boolean;
icon?: string;
iconstyle?: CSSProperties;
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
disabled?: boolean;
isLoading?: boolean;
type?: "button" | "submit";
iconposition?: "left" | "right";
className?: string;
};
@ -51,12 +49,11 @@ export default function Button(props: IProps) {
type = "button",
isLoading = false,
fullwidth = false,
iconposition = "right",
onClick,
children,
icon,
iconstyle,
className = "",
leftIcon,
rightIcon,
} = props;
const fullwidthattr = fullwidth.toString();
@ -64,15 +61,14 @@ export default function Button(props: IProps) {
const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType };
delete attributes.fullwidth;
delete attributes.icon;
delete attributes.iconstyle;
delete attributes.iconposition;
delete attributes.leftIcon;
delete attributes.rightIcon;
return (
<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
{leftIcon}
{children}
{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
{rightIcon}
</button>
);
}

4
src/front/Components/DesignSystem/DepositDocument/index.tsx
View File

@ -13,8 +13,8 @@ import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resou
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames";
import Confirm from "../Modal/Confirm";
import Alert from "../Modal/Alert";
import Confirm from "../OldModal/Confirm";
import Alert from "../OldModal/Alert";
import GreenCheckIcon from "@Assets/Icons/green-check.svg";
import Loader from "../Loader";
import TextAreaField from "../Form/TextareaField";

4
src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
View File

@ -13,10 +13,10 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
import classNames from "classnames";
import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Confirm from "../Modal/Confirm";
import Confirm from "../OldModal/Confirm";
import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
import Alert from "../Modal/Alert";
import Alert from "../OldModal/Alert";
type IProps = {
onChange?: (files: File[]) => void;

98
src/front/Components/DesignSystem/IconButton/classes.module.scss Normal file
View File

@ -0,0 +1,98 @@
@import "@Themes/constants.scss";
.root {
cursor: pointer;
border-radius: var(--button-icon-button-radius, 8px);
svg {
width: 24px;
min-width: 24px;
stroke: var(--button-icon-button-default-default);
}
&:hover {
svg {
stroke: var(--button-icon-button-default-hovered);
}
}
&.neutral {
background: var(--button-icon-button-neutral-default);
svg {
stroke: var(--button-icon-button-default-default);
}
&:hover {
background: var(--button-icon-button-neutral-hovered);
svg {
stroke: var(--button-icon-button-default-hovered);
}
}
}
&.primary {
background: var(--button-icon-button-primary-default);
svg {
stroke: var(--button-icon-button-primary-contrast);
}
&:hover {
background: var(--button-icon-button-primary-hovered);
}
}
&.error {
background: var(--button-icon-button-error-default);
svg {
stroke: var(--button-icon-button-error-contrast);
}
&:hover {
background: var(--button-icon-button-error-hovered);
}
}
&.success {
background: var(--button-icon-button-success-default);
svg {
stroke: var(--button-icon-button-success-contrast);
}
&:hover {
background: var(--button-icon-button-success-hovered);
}
}
&.warning {
background: var(--button-icon-button-warning-default);
svg {
stroke: var(--button-icon-button-warning-contrast);
}
&:hover {
background: var(--button-icon-button-warning-hovered);
}
}
&.info {
background: var(--button-icon-button-info-default);
svg {
stroke: var(--button-icon-button-info-contrast);
}
&:hover {
background: var(--button-icon-button-info-hovered);
}
}
&.disabled {
cursor: default;
opacity: var(--opacity-disabled, 0.3);
}
}

32
src/front/Components/DesignSystem/IconButton/index.tsx Normal file
View File

@ -0,0 +1,32 @@
import classNames from "classnames";
import React from "react";
import classes from "./classes.module.scss";
export enum EIconButtonVariant {
DEFAULT = "default",
NEUTRAL = "neutral",
PRIMARY = "primary",
ERROR = "error",
SUCCESS = "success",
WARNING = "warning",
INFO = "info",
}
type IProps = {
icon: React.ReactNode;
onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
variant?: EIconButtonVariant;
disabled?: boolean;
className?: string;
};
export default function IconButton(props: IProps) {
const { icon, onClick, className, variant = EIconButtonVariant.DEFAULT, disabled = false } = props;
return (
<span onClick={onClick} className={classNames(classes["root"], className, classes[variant], disabled && classes["disabled"])}>
{icon}
</span>
);
}

153
src/front/Components/DesignSystem/Modal/classes.module.scss
View File

@ -1,125 +1,60 @@
@import "@Themes/constants.scss";
@keyframes smooth-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes smooth-disappear {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.root {
position: fixed;
z-index: 6;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
z-index: 3;
.content {
position: fixed;
max-width: 600px;
max-height: 85vh;
border-radius: var(--modal-radius, 0px);
background: var(--modal-background, #fff);
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
overflow-y: auto;
.header {
display: flex;
align-items: center;
justify-content: center;
--animation-delay: 1ms;
animation: smooth-appear var(--animation-delay) $custom-easing;
&[data-will-close="true"] {
animation: smooth-disappear var(--animation-delay) $custom-easing;
opacity: 0;
justify-content: space-between;
padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
gap: var(--spacing-md, 16px);
}
.background {
.children {
padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
}
.footer {
display: flex;
padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
justify-content: center;
gap: var(--spacing-md, 16px);
}
&.fullwidth {
min-width: 85vw;
}
&.fullscreen {
min-width: 85vw;
padding: 0;
}
}
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $modal-background;
}
.container {
position: relative;
width: 610px;
max-height: 90%;
background: var(--color-generic-white);
box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
overflow: auto;
padding: 32px;
@media (max-width: $screen-s) {
width: 90%;
max-width: 493px;
}
.cross {
display: flex;
flex-direction: row-reverse;
.close-icon {
height: 24px;
width: 24px;
cursor: pointer;
}
}
}
.transparant-background {
background-color: transparent;
box-shadow: none;
}
&[data-side-background="true"] {
.container {
max-width: 711px;
.sub-container {
padding: 0;
display: flex;
p {
max-width: 711px;
}
@media (max-width: $screen-s) {
display: block;
}
.banner {
@media (max-width: $screen-s) {
background-color: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
}
}
}
.side-image {
height: 100%;
@media (max-width: $screen-s) {
display: none;
}
}
.top-image {
@media (min-width: $screen-s) {
display: none;
}
@media (max-width: $screen-s) {
width: 100%;
max-height: 82px;
min-height: 82px;
}
}
}
}

162
src/front/Components/DesignSystem/Modal/index.tsx
View File

@ -1,111 +1,79 @@
import CrossIcon from "@Assets/Icons/cross.svg";
import Image from "next/image";
import React from "react";
import Typography, { ETypo } from "../Typography";
import classNames from "classnames";
import classes from "./classes.module.scss";
import Footer from "./Elements/Footer";
import Header from "./Elements/Header";
import Loader from "./Elements/Loader";
import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import React from "react";
import Typography, { ETypo } from "../Typography";
export type IProps = {
closeBtn?: boolean;
header?: string | JSX.Element;
footer?: JSX.Element | null;
textLoader?: string | JSX.Element;
import { XMarkIcon } from "@heroicons/react/24/outline";
import IconButton, { EIconButtonVariant } from "../IconButton";
type IProps = {
className?: string;
isOpen: boolean;
onClose: () => void;
hasTransparentBackground?: boolean;
hasContainerClosable?: boolean;
withSideBackground?: boolean;
onClose?: () => void;
children?: React.ReactNode;
animationDelay?: number;
title?: string;
firstButton?: {
text: string;
onClick?: () => void;
rightIcon?: React.ReactNode;
leftIcon?: React.ReactNode;
};
secondButton?: {
text: string;
onClick?: () => void;
rightIcon?: React.ReactNode;
leftIcon?: React.ReactNode;
};
fullwidth?: boolean;
fullscreen?: boolean;
};
type IState = {
willClose: boolean;
isOpen: boolean;
};
export default function Modal(props: IProps) {
const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen } = props;
export default class Modal extends React.Component<IProps, IState> {
static defaultProps = {
animationDelay: 250,
};
public rootRefElement = React.createRef<HTMLDivElement>();
constructor(props: IProps) {
super(props);
this.close = this.close.bind(this);
this.state = {
willClose: false,
isOpen: this.props.isOpen,
};
}
public override render(): JSX.Element | null {
if (!this.state.isOpen) return null;
if (!isOpen) return null;
return (
<div
ref={this.rootRefElement}
className={classes["root"]}
data-side-background={this.props.withSideBackground}
data-will-close={this.state.willClose.toString()}>
<div className={classes["background"]} onClick={this.close} />
<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
{this.props.closeBtn && (
<div className={classes["cross"]}>
<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
</div>
)}
<div className={classes["sub-container"]}>
{this.props.header && <Header content={this.props.header} />}
<div className={classes["root"]}>
<div className={classes["backdrop"]} onClick={onClose} />
<Typography typo={ETypo.TEXT_MD_REGULAR}>
<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
</Typography>
{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
<div
className={classNames(
classes["content"],
className,
fullwidth && classes["fullwidth"],
fullscreen && classes["fullscreen"],
)}>
<div className={classes["header"]}>
{title && <Typography typo={ETypo.TITLE_H4}> {title}</Typography>}
<IconButton variant={EIconButtonVariant.NEUTRAL} onClick={onClose} icon={<XMarkIcon/>}/>
</div>
<div className={classNames(classes["children"], className)}>{children}</div>
<div className={classes["footer"]}>
{firstButton && (
<Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.OUTLINED}
leftIcon={firstButton.leftIcon}
rightIcon={firstButton.rightIcon}
onClick={firstButton.onClick}>
{firstButton.text}
</Button>
)}
{secondButton && (
<Button
variant={EButtonVariant.PRIMARY}
styleType={EButtonStyleType.CONTAINED}
leftIcon={secondButton.leftIcon}
rightIcon={secondButton.rightIcon}
onClick={secondButton.onClick}>
{secondButton.text}
</Button>
)}
</div>
</div>
</div>
);
}
public override componentDidUpdate(prevProps: IProps): void {
if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) {
this.setState({ willClose: true });
window.setTimeout(() => {
this.setState({
isOpen: false,
willClose: false,
});
}, this.props.animationDelay);
document.body.style.overflow = "auto";
}
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
this.setState({ isOpen: true });
document.body.style.overflow = "hidden";
}
this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
}
public override componentDidMount(): void {
document.addEventListener("keydown", this.handleKeyDown);
}
public override componentWillUnmount(): void {
document.body.style.overflow = "auto";
document.removeEventListener("keydown", this.handleKeyDown);
}
protected close() {
if (this.props.hasContainerClosable === false) return;
if (this.state.willClose) return;
this.props.onClose();
}
private handleKeyDown = (e: KeyboardEvent): void => {
if (e.key === "Escape" || e.key === "Esc") {
this.props.onClose();
}
};
}

0
src/front/Components/DesignSystem/Modal/Alert/classes.module.scss → src/front/Components/DesignSystem/OldModal/Alert/classes.module.scss
View File

8
src/front/Components/DesignSystem/Modal/Alert/index.tsx → src/front/Components/DesignSystem/OldModal/Alert/index.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import Modal, { IProps as IPropsModal } from "..";
import OldModal, { IProps as IPropsModal } from "..";
import Button, { EButtonVariant } from "../../Button";
import classes from "./classes.module.scss";
@ -13,7 +13,7 @@ type IState = {
export default class Alert extends React.Component<IProps, IState> {
static defaultProps = {
closeText: "Ok",
...Modal.defaultProps,
...OldModal.defaultProps,
};
constructor(props: IProps) {
@ -26,14 +26,14 @@ export default class Alert extends React.Component<IProps, IState> {
public override render(): JSX.Element | null {
return (
<Modal
<OldModal
closeBtn={this.props.closeBtn}
isOpen={this.state.isOpen}
onClose={this.onClose}
header={this.props.header}
footer={this.footer()}>
{this.props.children}
</Modal>
</OldModal>
);
}

0
src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss → src/front/Components/DesignSystem/OldModal/Confirm/classes.module.scss
View File

8
src/front/Components/DesignSystem/Modal/Confirm/index.tsx → src/front/Components/DesignSystem/OldModal/Confirm/index.tsx
View File

@ -1,7 +1,7 @@
import Link from "next/link";
import React from "react";
import Modal, { IProps as IPropsModal } from "..";
import OldModal, { IProps as IPropsModal } from "..";
import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
import classes from "./classes.module.scss";
@ -24,19 +24,19 @@ export default class Confirm extends React.Component<IProps, IState> {
confirmText: "Confirm",
canConfirm: true,
showButtons: true,
...Modal.defaultProps,
...OldModal.defaultProps,
};
public override render(): JSX.Element | null {
return (
<Modal
<OldModal
closeBtn={this.props.closeBtn}
header={this.props.header}
footer={this.footer()}
animationDelay={this.props.animationDelay}
{...this.props}>
{this.props.children}
</Modal>
</OldModal>
);
}

0
src/front/Components/DesignSystem/Modal/Elements/Footer/classes.module.scss → src/front/Components/DesignSystem/OldModal/Elements/Footer/classes.module.scss
View File

0
src/front/Components/DesignSystem/Modal/Elements/Footer/index.tsx → src/front/Components/DesignSystem/OldModal/Elements/Footer/index.tsx
View File

0
src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss → src/front/Components/DesignSystem/OldModal/Elements/Header/classes.module.scss
View File

0
src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx → src/front/Components/DesignSystem/OldModal/Elements/Header/index.tsx
View File

0
src/front/Components/DesignSystem/Modal/Elements/Loader/classes.module.scss → src/front/Components/DesignSystem/OldModal/Elements/Loader/classes.module.scss
View File

0
src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx → src/front/Components/DesignSystem/OldModal/Elements/Loader/index.tsx
View File

125
src/front/Components/DesignSystem/OldModal/classes.module.scss Normal file
View File

@ -0,0 +1,125 @@
@import "@Themes/constants.scss";
@keyframes smooth-appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes smooth-disappear {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.root {
position: fixed;
z-index: 6;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
--animation-delay: 1ms;
animation: smooth-appear var(--animation-delay) $custom-easing;
&[data-will-close="true"] {
animation: smooth-disappear var(--animation-delay) $custom-easing;
opacity: 0;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $modal-background;
}
.container {
position: relative;
width: 610px;
max-height: 90%;
background: var(--color-generic-white);
box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
overflow: auto;
padding: 32px;
@media (max-width: $screen-s) {
width: 90%;
max-width: 493px;
}
.cross {
display: flex;
flex-direction: row-reverse;
.close-icon {
height: 24px;
width: 24px;
cursor: pointer;
}
}
}
.transparant-background {
background-color: transparent;
box-shadow: none;
}
&[data-side-background="true"] {
.container {
max-width: 711px;
.sub-container {
padding: 0;
display: flex;
p {
max-width: 711px;
}
@media (max-width: $screen-s) {
display: block;
}
.banner {
@media (max-width: $screen-s) {
overflow: hidden;
}
}
}
}
.side-image {
height: 100%;
@media (max-width: $screen-s) {
display: none;
}
}
.top-image {
@media (min-width: $screen-s) {
display: none;
}
@media (max-width: $screen-s) {
width: 100%;
max-height: 82px;
min-height: 82px;
}
}
}
}

111
src/front/Components/DesignSystem/OldModal/index.tsx Normal file
View File

@ -0,0 +1,111 @@
import CrossIcon from "@Assets/Icons/cross.svg";
import Image from "next/image";
import React from "react";
import Typography, { ETypo } from "../Typography";
import classes from "./classes.module.scss";
import Footer from "./Elements/Footer";
import Header from "./Elements/Header";
import Loader from "./Elements/Loader";
export type IProps = {
closeBtn?: boolean;
header?: string | JSX.Element;
footer?: JSX.Element | null;
textLoader?: string | JSX.Element;
isOpen: boolean;
onClose: () => void;
hasTransparentBackground?: boolean;
hasContainerClosable?: boolean;
withSideBackground?: boolean;
children?: React.ReactNode;
animationDelay?: number;
};
type IState = {
willClose: boolean;
isOpen: boolean;
};
export default class OldModal extends React.Component<IProps, IState> {
static defaultProps = {
animationDelay: 250,
};
public rootRefElement = React.createRef<HTMLDivElement>();
constructor(props: IProps) {
super(props);
this.close = this.close.bind(this);
this.state = {
willClose: false,
isOpen: this.props.isOpen,
};
}
public override render(): JSX.Element | null {
if (!this.state.isOpen) return null;
return (
<div
ref={this.rootRefElement}
className={classes["root"]}
data-side-background={this.props.withSideBackground}
data-will-close={this.state.willClose.toString()}>
<div className={classes["background"]} onClick={this.close} />
<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
{this.props.closeBtn && (
<div className={classes["cross"]}>
<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
</div>
)}
<div className={classes["sub-container"]}>
{this.props.header && <Header content={this.props.header} />}
<Typography typo={ETypo.TEXT_MD_REGULAR}>
<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
</Typography>
{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
</div>
</div>
</div>
);
}
public override componentDidUpdate(prevProps: IProps): void {
if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) {
this.setState({ willClose: true });
window.setTimeout(() => {
this.setState({
isOpen: false,
willClose: false,
});
}, this.props.animationDelay);
document.body.style.overflow = "auto";
}
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
this.setState({ isOpen: true });
document.body.style.overflow = "hidden";
}
this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
}
public override componentDidMount(): void {
document.addEventListener("keydown", this.handleKeyDown);
}
public override componentWillUnmount(): void {
document.body.style.overflow = "auto";
document.removeEventListener("keydown", this.handleKeyDown);
}
protected close() {
if (this.props.hasContainerClosable === false) return;
if (this.state.willClose) return;
this.props.onClose();
}
private handleKeyDown = (e: KeyboardEvent): void => {
if (e.key === "Escape" || e.key === "Esc") {
this.props.onClose();
}
};
}

2
src/front/Components/DesignSystem/UserFolder/index.tsx
View File

@ -11,7 +11,7 @@ import Link from "next/link";
import React from "react";
import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import Confirm from "../Modal/Confirm";
import Confirm from "../OldModal/Confirm";
import QuantityProgressBar from "../QuantityProgressBar";
import classes from "./classes.module.scss";
import DocumentList from "./DocumentList";

2
src/front/Components/Layouts/ClientDashboard/index2.tsx
View File

@ -2,7 +2,7 @@
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Base from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";

2
src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
View File

@ -4,7 +4,7 @@ import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Switch from "@Front/Components/DesignSystem/Switch";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";

2
src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
View File

@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import Module from "@Front/Config/Module";

2
src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
View File

@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
import Module from "@Front/Config/Module";

2
src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
View File

@ -5,7 +5,7 @@ import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTy
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";

159
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -4,13 +4,18 @@ 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";
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(
() => [
{
@ -57,15 +62,25 @@ export default function DesignSystem() {
<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} />
<div className={classes["tab-content"]}>
<Typography typo={ETypo.TEXT_MD_REGULAR}>
{selectedTab.id} - {selectedTab.username}
</Typography>
</div>
<div className={classes["root"]}>
<div className={classes["components"]}>
<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
<div className={classes["rows"]}>
<CircleProgress percentage={0} />
@ -134,67 +149,147 @@ export default function DesignSystem() {
<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}>
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.PRIMARY}>
Primary
</Button>
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
<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 variant={EButtonVariant.SECONDARY}>Secondary</Button>
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SECONDARY}>
Secondary
</Button>
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
<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 variant={EButtonVariant.NEUTRAL}>Neutral</Button>
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.NEUTRAL}>
Neutral
</Button>
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
<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 variant={EButtonVariant.ERROR}>Error</Button>
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.ERROR}>
Error
</Button>
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
<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 variant={EButtonVariant.WARNING}>Warning</Button>
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.WARNING}>
Warning
</Button>
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
<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 variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
SUCCESS
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SUCCESS}>
Success
</Button>
<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
SUCCESS
<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 variant={EButtonVariant.INFO}>INFO</Button>
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
INFO
<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.INFO}>
Info
</Button>
<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
INFO
<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>

2
src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
View File

@ -1,4 +1,4 @@
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import classes from "./classes.module.scss";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";

2
src/front/Components/Layouts/Folder/FolderInformation/index.tsx
View File

@ -4,7 +4,7 @@ import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAncho
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";

2
src/front/Components/Layouts/Folder/UpdateClient/index.tsx
View File

@ -2,7 +2,7 @@ import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";

2
src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
View File

@ -3,7 +3,7 @@ import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";

2
src/front/Components/Layouts/Login/index.tsx
View File

@ -11,7 +11,7 @@ import classes from "./classes.module.scss";
import LandingImage from "./landing-connect.jpeg";
import { FrontendVariables } from "@Front/Config/VariablesFront";
import Link from "next/link";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
export default function Login() {
const router = useRouter();

2
src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx
View File

@ -5,7 +5,7 @@ import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { ValidationError } from "class-validator";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
type IProps = {
onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
validationErrors: ValidationError[];

2
src/front/Components/Layouts/LoginCustomer/index.tsx
View File

@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss";
import LandingImage from "./landing-connect.jpeg";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import StepEmail from "./StepEmail";
import StepTotp from "./StepTotp";
import Auth from "@Front/Api/Auth/Customer/Auth";

2
src/front/Components/Layouts/Rib/index.tsx
View File

@ -7,7 +7,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
import { useRouter } from "next/router";
import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
import DepositRib from "@Front/Components/DesignSystem/DepositRib";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Loader from "@Front/Components/DesignSystem/Loader";
export default function Rib() {

2
src/front/Components/Layouts/Roles/RolesCreate/index.tsx
View File

@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
import Module from "@Front/Config/Module";

2
src/front/Components/Layouts/Roles/RolesInformations/index.tsx
View File

@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
import Button from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Form from "@Front/Components/DesignSystem/Form";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
import { OfficeRole, Rule, RulesGroup } from "le-coffre-resources/dist/Admin";

2
src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
View File

@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
import Check from "@Front/Components/Elements/Icons/Check";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import useOpenable from "@Front/Hooks/useOpenable";
import { EType } from "le-coffre-resources/dist/Admin/Subscription";
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";

2
src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
View File

@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
import Check from "@Front/Components/Elements/Icons/Check";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import useOpenable from "@Front/Hooks/useOpenable";
// import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
// import { EType } from "le-coffre-resources/dist/Admin/Subscription";

2
src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
View File

@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { useCallback, useEffect, useState } from "react";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import useOpenable from "@Front/Hooks/useOpenable";
import MessageBox from "@Front/Components/Elements/MessageBox";
import Link from "next/link";

2
src/front/Components/Layouts/Users/UserInformations/index.tsx
View File

@ -4,7 +4,7 @@ import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
import LiveVotes from "@Front/Api/LeCoffreApi/SuperAdmin/LiveVotes/LiveVotes";
import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import Switch from "@Front/Components/DesignSystem/Switch";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultUserDashboard from "@Front/Components/LayoutTemplates/DefaultUserDashboard";

2
src/front/Themes/variables.scss
View File

@ -565,7 +565,7 @@
--modal-spacing: var(--spacing-md);
--navigation-radius: var(--radius-none);
--notification-radius: var(--radius-minimal);
--opacity-disabled: 1.875rem;
--opacity-disabled: 0.3;
--radius-none: 0px;
--radius-minimal: var(--radius-md);
--radius-rounded: var(--radius-lg);