diff --git a/.vscode/settings.json b/.vscode/settings.json index 11ce1ece..4b5c7184 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,6 +4,9 @@ "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, @@ -13,6 +16,9 @@ "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, + "[scss]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, "terminal.integrated.env.linux": { "PATH": "${env:HOME}/elrondsdk/vendor-rust/bin:${env:HOME}/elrondsdk/erdpy-venv/bin:${env:HOME}/elrondsdk/vmtools:${env:HOME}/elrondsdk/nodejs/latest/bin:${env:PATH}", "VIRTUAL_ENV": "${env:HOME}/elrondsdk/erdpy-venv", diff --git a/package-lock.json b/package-lock.json index 9c4db16e..50dda645 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,7 +42,8 @@ "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", "@types/uuid": "^9.0.0", - "nodemon": "^2.0.20" + "nodemon": "^2.0.20", + "prettier": "2.8.4" } }, "node_modules/@cspotcode/source-map-support": { @@ -1439,6 +1440,21 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prettier": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz", + "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/prisma": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.9.0.tgz", @@ -3437,6 +3453,12 @@ "source-map-js": "^1.0.2" } }, + "prettier": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz", + "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==", + "dev": true + }, "prisma": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.9.0.tgz", diff --git a/package.json b/package.json index ce7b5cef..9b47a0ce 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "@Front": "./dist/front/*", "@Assets": "./dist/front/Assets/*", "@Components": "./dist/front/Components/*", - "@Themes": "./dist/front/Themes/*", - "@Stores": "./dist/front/Stores/*", - "@FrontServices": "./dist/front/Services/*", + "@Themes": "./dist/front/Themes/*", + "@Stores": "./dist/front/Stores/*", + "@FrontServices": "./dist/front/Services/*", "@Pages": "./dist/pages", "@Common": "./dist/common", "@Services": "./dist/common/services", @@ -74,7 +74,8 @@ "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", "@types/uuid": "^9.0.0", - "nodemon": "^2.0.20" + "nodemon": "^2.0.20", + "prettier": "2.8.4" }, "prisma": { "schema": "src/common/databases/schema.prisma" diff --git a/prettier.config.js b/prettier.config.js index 2b1f577c..951346b2 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -7,7 +7,7 @@ module.exports = { useTabs: true, singleQuote: false, trailingComma: "all", - printWidth: 240, + printWidth: 140, semi: true, bracketSameLine: true, }, diff --git a/src/api/controllers/ProjectController.ts b/src/api/controllers/ProjectController.ts index 7987d438..031cac84 100644 --- a/src/api/controllers/ProjectController.ts +++ b/src/api/controllers/ProjectController.ts @@ -61,4 +61,3 @@ export default class ProjectController extends ApiController { this.httpCreated(res, await this.projectService.create(projectEntity)); } } - diff --git a/src/api/controllers/index.ts b/src/api/controllers/index.ts index c0dc0129..463ebb48 100644 --- a/src/api/controllers/index.ts +++ b/src/api/controllers/index.ts @@ -2,7 +2,7 @@ import { Container } from "typedi"; import ProjectController from "./ProjectController"; export default { - start: () => { - Container.get(ProjectController); - } -} + start: () => { + Container.get(ProjectController); + }, +}; diff --git a/src/api/middlewares/ErrorHandler.ts b/src/api/middlewares/ErrorHandler.ts index ac0b0f4d..274f5923 100644 --- a/src/api/middlewares/ErrorHandler.ts +++ b/src/api/middlewares/ErrorHandler.ts @@ -10,7 +10,7 @@ export default function errorHandler(error: any, req: Request, response: Respons if (error instanceof SyntaxError && errorStatus === 400 && "body" in error) { response.status(HttpCodes.BAD_REQUEST).send({ body: error["body"], - type: error as any ["type"], + type: error as any["type"], }); return; } @@ -22,4 +22,3 @@ export default function errorHandler(error: any, req: Request, response: Respons next(error); } - diff --git a/src/common/config/IDatabaseConfig.ts b/src/common/config/IDatabaseConfig.ts index 24796543..2b03000e 100644 --- a/src/common/config/IDatabaseConfig.ts +++ b/src/common/config/IDatabaseConfig.ts @@ -1,4 +1,4 @@ -export default interface IDatabaseConfig { - name: string; - url?: string; -} +export default interface IDatabaseConfig { + name: string; + url?: string; +} diff --git a/src/common/databases/TezosLink.ts b/src/common/databases/TezosLink.ts index 3ad33c72..9455894d 100644 --- a/src/common/databases/TezosLink.ts +++ b/src/common/databases/TezosLink.ts @@ -26,4 +26,3 @@ export default class TezosLink { return name; } } - diff --git a/src/common/helpers/ObjectHydrate.ts b/src/common/helpers/ObjectHydrate.ts index 880d1cef..7efbc7db 100644 --- a/src/common/helpers/ObjectHydrate.ts +++ b/src/common/helpers/ObjectHydrate.ts @@ -1,7 +1,7 @@ -import { plainToClassFromExist } from "class-transformer"; - -export default abstract class ObjectHydrate { - public static hydrate(object: { [key: string]: any }, from: { [key: string]: any }): T { - return plainToClassFromExist(object, from) as T; - } -} +import { plainToClassFromExist } from "class-transformer"; + +export default abstract class ObjectHydrate { + public static hydrate(object: { [key: string]: any }, from: { [key: string]: any }): T { + return plainToClassFromExist(object, from) as T; + } +} diff --git a/src/common/repositories/MetricsRepository.ts b/src/common/repositories/MetricsRepository.ts index 9f5bbb9d..32d651ce 100644 --- a/src/common/repositories/MetricsRepository.ts +++ b/src/common/repositories/MetricsRepository.ts @@ -64,7 +64,7 @@ export default class MetricRepository { const data = { ...metricEntity }; const result: MetricEntity[] = []; - this.instanceDb.$transaction(async(transaction: Prisma.TransactionClient) => { + this.instanceDb.$transaction(async (transaction: Prisma.TransactionClient) => { for (const item of data) { if (!item) continue; result.push( @@ -135,7 +135,7 @@ export default class MetricRepository { const response = this.model.groupBy({ by: ["date_requested"], _count: { - date_requested: true, + date_requested: true, }, where: { projectId: projectId, @@ -187,4 +187,3 @@ export default class MetricRepository { } } } - diff --git a/src/common/repositories/ProjectRepository.ts b/src/common/repositories/ProjectRepository.ts index 1b2b610f..a90b4ccb 100644 --- a/src/common/repositories/ProjectRepository.ts +++ b/src/common/repositories/ProjectRepository.ts @@ -24,14 +24,13 @@ export default class ProjectRepository { const data = { ...projectEntity }; return this.model.findUnique({ where: data, - + include: { // Include metrics & count Metrics: true, _count: { select: { Metrics: true }, - }, - + }, }, }); } catch (error) { @@ -59,4 +58,3 @@ export default class ProjectRepository { } } } - diff --git a/src/common/ressources/MetricEntity.ts b/src/common/ressources/MetricEntity.ts index ca8e40dd..7a5cc526 100644 --- a/src/common/ressources/MetricEntity.ts +++ b/src/common/ressources/MetricEntity.ts @@ -4,28 +4,28 @@ import ProjectEntity from "./ProjectEntity"; export default class MetricEntity { @IsNotEmpty() public id!: number; - - @IsNotEmpty(({groups: ["create"]})) + + @IsNotEmpty({ groups: ["create"] }) public path!: string; - @IsNotEmpty(({groups: ["create"]})) + @IsNotEmpty({ groups: ["create"] }) public uuid!: string; - @IsNotEmpty(({groups: ["create"]})) + @IsNotEmpty({ groups: ["create"] }) public remote_address!: string; - @IsNotEmpty(({groups: ["create"]})) + @IsNotEmpty({ groups: ["create"] }) public date_requested!: Date; - @IsNotEmpty(({groups: ["create"]})) + @IsNotEmpty({ groups: ["create"] }) public projectId!: number; - @IsNotEmpty(({groups: ["create"]})) + @IsNotEmpty({ groups: ["create"] }) public project!: ProjectEntity; @IsDate() public createdAt?: Date; - @IsDate() + @IsDate() public updatedAt?: Date; } diff --git a/src/common/ressources/ProjectEntity.ts b/src/common/ressources/ProjectEntity.ts index 8bfc5e01..5b3c4166 100644 --- a/src/common/ressources/ProjectEntity.ts +++ b/src/common/ressources/ProjectEntity.ts @@ -5,21 +5,21 @@ export default class ProjectEntity { @IsNotEmpty() public id!: number; - @IsNotEmpty({groups: ["create"]}) + @IsNotEmpty({ groups: ["create"] }) public title!: string; - @IsNotEmpty() + @IsNotEmpty() public uuid!: string; @IsDate() public createdAt!: Date; - @IsDate() + @IsDate() public updatedAt!: Date; - @IsNotEmpty({groups: ["create"]}) + @IsNotEmpty({ groups: ["create"] }) public network!: string; @IsOptional() public metrics?: MetricEntity[]; -} \ No newline at end of file +} diff --git a/src/common/ressources/index.ts b/src/common/ressources/index.ts index 75171740..823a7e15 100644 --- a/src/common/ressources/index.ts +++ b/src/common/ressources/index.ts @@ -1,4 +1,4 @@ -import ProjectEntity from "./ProjectEntity"; -import MetricEntity from "./MetricEntity"; - -export { ProjectEntity, MetricEntity}; +import ProjectEntity from "./ProjectEntity"; +import MetricEntity from "./MetricEntity"; + +export { ProjectEntity, MetricEntity }; diff --git a/src/common/services/BaseService.ts b/src/common/services/BaseService.ts index fb2c5ab3..12ec929f 100644 --- a/src/common/services/BaseService.ts +++ b/src/common/services/BaseService.ts @@ -1,2 +1 @@ export default class BaseService {} - diff --git a/src/common/services/metric/MetricService.ts b/src/common/services/metric/MetricService.ts index 76e9770b..497be266 100644 --- a/src/common/services/metric/MetricService.ts +++ b/src/common/services/metric/MetricService.ts @@ -35,18 +35,18 @@ export default class MetricService { } /** - * - * @throws {Error} If metric is undefined - * @returns - */ - public async getCountRpcPath(metricEntity: Partial, from: Date, to: Date) { - const pathsCount = await this.metricRepository.countRpcPathUsage(metricEntity.projectId!,from,to); - if (!pathsCount) return null; - return pathsCount; - } + * + * @throws {Error} If metric is undefined + * @returns + */ + public async getCountRpcPath(metricEntity: Partial, from: Date, to: Date) { + const pathsCount = await this.metricRepository.countRpcPathUsage(metricEntity.projectId!, from, to); + if (!pathsCount) return null; + return pathsCount; + } /** - * - * @throws {Error} If metric is undefined + * + * @throws {Error} If metric is undefined * @returns */ public async getCountAllMetrics(metricEntity: Partial) { @@ -56,27 +56,27 @@ export default class MetricService { } /** - * + * * @throws {Error} If metric is undefined * @returns */ - public async getLastMetrics(metricEntity: Partial, limit: number){ - const lastMetric = await this.metricRepository.findLastRequests(metricEntity.projectId!,limit); + public async getLastMetrics(metricEntity: Partial, limit: number) { + const lastMetric = await this.metricRepository.findLastRequests(metricEntity.projectId!, limit); return ObjectHydrate.hydrate>(new MetricEntity(), lastMetric); } /** - * + * * @throws {Error} If metric is undefined * @returns */ - public async getRequestsByDay(metricEntity: Partial, from: Date, to: Date){ - const requestByDay = await this.metricRepository.findRequestsByDay(metricEntity.projectId!,from,to); + public async getRequestsByDay(metricEntity: Partial, from: Date, to: Date) { + const requestByDay = await this.metricRepository.findRequestsByDay(metricEntity.projectId!, from, to); return ObjectHydrate.hydrate>(new MetricEntity(), requestByDay); } /** - * + * * @throws {Error} If metric is undefined * @returns */ @@ -85,4 +85,3 @@ export default class MetricService { await this.metricRepository.removeOldMetricsBymonths(months); } } - diff --git a/src/common/services/project/ProjectService.ts b/src/common/services/project/ProjectService.ts index 40025318..6f220833 100644 --- a/src/common/services/project/ProjectService.ts +++ b/src/common/services/project/ProjectService.ts @@ -4,8 +4,6 @@ import { ProjectEntity } from "@Common/ressources"; import { type processFindManyQuery } from "prisma-query"; import { Service } from "typedi"; - - @Service() export default class ProjectService { constructor(private projectRepository: ProjectRepository) {} @@ -17,7 +15,7 @@ export default class ProjectService { const projects = await this.projectRepository.findMany(query); return ObjectHydrate.hydrate>(new ProjectEntity(), projects); } - /** + /** * @throws {Error} If project is undefined */ public async getByUUID(projectEntity: Partial) { @@ -25,15 +23,14 @@ export default class ProjectService { if (!project) return null; return ObjectHydrate.hydrate>(new ProjectEntity(), project); } - /** - * - * @throws {Error} If project cannot be created - * @returns - */ + /** + * + * @throws {Error} If project cannot be created + * @returns + */ public async create(projectEntity: Partial) { const project = await this.projectRepository.create(projectEntity); if (!project) return null; return ObjectHydrate.hydrate>(new ProjectEntity(), project); } } - diff --git a/src/common/system/ExpressServer.ts b/src/common/system/ExpressServer.ts index 8f381907..ec8e217b 100644 --- a/src/common/system/ExpressServer.ts +++ b/src/common/system/ExpressServer.ts @@ -31,4 +31,3 @@ export default class ExpressServer implements ServerInterface { return this; } } - diff --git a/src/common/system/ServerInterface.ts b/src/common/system/ServerInterface.ts index 15ea57f2..e3962a03 100644 --- a/src/common/system/ServerInterface.ts +++ b/src/common/system/ServerInterface.ts @@ -14,4 +14,3 @@ export default interface ServerInterface { init(config: IConfig): this; } - diff --git a/src/common/system/controller-pattern/ApiController.ts b/src/common/system/controller-pattern/ApiController.ts index f1159f3e..3f8458c7 100644 --- a/src/common/system/controller-pattern/ApiController.ts +++ b/src/common/system/controller-pattern/ApiController.ts @@ -6,4 +6,3 @@ import HttpCodes from "@Common/system/controller-pattern/HttpCodes"; export default abstract class ApiController extends BaseController {} export { HttpCodes as ResponseStatusCodes }; - diff --git a/src/common/system/controller-pattern/BaseController.ts b/src/common/system/controller-pattern/BaseController.ts index 516b7e66..3b128b1f 100644 --- a/src/common/system/controller-pattern/BaseController.ts +++ b/src/common/system/controller-pattern/BaseController.ts @@ -2,10 +2,8 @@ import { StRoute } from "./StRoute"; import { Response } from "express"; import HttpCodes from "@Common/system/controller-pattern/HttpCodes"; - type IResponseData = {} | string | number | boolean | null | unknown; - export default abstract class BaseController { public expressRoutes!: StRoute[]; public httpCode: typeof HttpCodes = HttpCodes; diff --git a/src/common/system/controller-pattern/Controller.ts b/src/common/system/controller-pattern/Controller.ts index 9a5c8d2e..91d5789f 100644 --- a/src/common/system/controller-pattern/Controller.ts +++ b/src/common/system/controller-pattern/Controller.ts @@ -34,4 +34,3 @@ function createRoute(controller: any, route: StRoute) { } export default Controller; - diff --git a/src/common/system/controller-pattern/ErrorCatch.ts b/src/common/system/controller-pattern/ErrorCatch.ts index d6bed57c..8dc0aea4 100644 --- a/src/common/system/controller-pattern/ErrorCatch.ts +++ b/src/common/system/controller-pattern/ErrorCatch.ts @@ -12,4 +12,3 @@ export default class ErrorCatch { next(args[args.length - 1] ?? "Unknown Error"); } } - diff --git a/src/common/system/controller-pattern/HttpCodes.ts b/src/common/system/controller-pattern/HttpCodes.ts index 433b5525..8ca2500b 100644 --- a/src/common/system/controller-pattern/HttpCodes.ts +++ b/src/common/system/controller-pattern/HttpCodes.ts @@ -1,10 +1,10 @@ -enum HttpCodes { - SUCCESS = 200, - CREATED = 201, - BAD_REQUEST = 400, - INTERNAL_ERROR = 500, - UNKNOWN_ERROR = 520, - NOT_IMPLEMENTED = 501, - NOT_FOUND = 404, -} -export default HttpCodes; +enum HttpCodes { + SUCCESS = 200, + CREATED = 201, + BAD_REQUEST = 400, + INTERNAL_ERROR = 500, + UNKNOWN_ERROR = 520, + NOT_IMPLEMENTED = 501, + NOT_FOUND = 404, +} +export default HttpCodes; diff --git a/src/common/system/controller-pattern/Methods.ts b/src/common/system/controller-pattern/Methods.ts index b0dd3729..43c0f6f0 100644 --- a/src/common/system/controller-pattern/Methods.ts +++ b/src/common/system/controller-pattern/Methods.ts @@ -1,7 +1,12 @@ import BaseController from "./BaseController"; import { StRoute } from "./StRoute"; -function MethodsAny(type: StRoute["type"], path: string, frontMiddlewares: StRoute["frontMiddlewares"] = [], backMiddlewares: StRoute["backMiddlewares"] = []) { +function MethodsAny( + type: StRoute["type"], + path: string, + frontMiddlewares: StRoute["frontMiddlewares"] = [], + backMiddlewares: StRoute["backMiddlewares"] = [], +) { return (target: any, memberName: string, propertyDescriptor: PropertyDescriptor) => { const func = propertyDescriptor.value; const constructor: typeof BaseController = target.constructor; @@ -29,4 +34,3 @@ export const Delete = MethodsAny.bind(null, "delete"); * @description Decorator Method PUT */ export const Put = MethodsAny.bind(null, "put"); - diff --git a/src/common/system/controller-pattern/StRoute.ts b/src/common/system/controller-pattern/StRoute.ts index f216112f..fe6ae78d 100644 --- a/src/common/system/controller-pattern/StRoute.ts +++ b/src/common/system/controller-pattern/StRoute.ts @@ -7,4 +7,3 @@ export interface StRoute { frontMiddlewares: ((requests: Request, response: Response, next: NextFunction) => void)[]; backMiddlewares: ((requests: Request, response: Response, next: NextFunction) => void)[]; } - diff --git a/src/common/system/controller-pattern/exceptions/HttpException.ts b/src/common/system/controller-pattern/exceptions/HttpException.ts index ceb49fa7..62a485b7 100644 --- a/src/common/system/controller-pattern/exceptions/HttpException.ts +++ b/src/common/system/controller-pattern/exceptions/HttpException.ts @@ -1,7 +1,7 @@ -import HttpCodes from "../HttpCodes"; - -export default class HttpException extends Error { - constructor(message: string, public httpCode: HttpCodes = HttpCodes.UNKNOWN_ERROR) { - super(message); - } -} +import HttpCodes from "../HttpCodes"; + +export default class HttpException extends Error { + constructor(message: string, public httpCode: HttpCodes = HttpCodes.UNKNOWN_ERROR) { + super(message); + } +} diff --git a/src/common/system/database/DbProvider.ts b/src/common/system/database/DbProvider.ts index 82a15a81..9df45a56 100644 --- a/src/common/system/database/DbProvider.ts +++ b/src/common/system/database/DbProvider.ts @@ -1,32 +1,31 @@ -import dotenv from "dotenv"; -import { PrismaClient } from "@prisma/client"; -import IDatabaseConfig from "../../config/IDatabaseConfig"; - -dotenv.config(); - -export default class DbProvider { - protected client = new PrismaClient({ - datasources: { - db: { - url: `postgres://${process.env["DATABASE_USER"]}:${process.env["DATABASE_PASSWORD"]}@${process.env["DATABASE_HOSTNAME"]}:${process.env["DATABASE_PORT"]}/${process.env["DATABASE_NAME"]}`, - }, - }, - }); - - constructor(protected config: IDatabaseConfig) { - } - - public async connect(): Promise { - await this.client.$connect(); - console.info(`⚡️[Prisma]: Connected to ${this.config.name}`);// A Logger middleware is to be added here - } - - public getClient() { - return this.client; - } - - public async disconnect(): Promise { - await this.client.$disconnect(); - console.info(`⚡️[Prisma]: Disconnected from ${this.config.name}`); // A Logger middleware is to be added here - } -} +import dotenv from "dotenv"; +import { PrismaClient } from "@prisma/client"; +import IDatabaseConfig from "../../config/IDatabaseConfig"; + +dotenv.config(); + +export default class DbProvider { + protected client = new PrismaClient({ + datasources: { + db: { + url: `postgres://${process.env["DATABASE_USER"]}:${process.env["DATABASE_PASSWORD"]}@${process.env["DATABASE_HOSTNAME"]}:${process.env["DATABASE_PORT"]}/${process.env["DATABASE_NAME"]}`, + }, + }, + }); + + constructor(protected config: IDatabaseConfig) {} + + public async connect(): Promise { + await this.client.$connect(); + console.info(`⚡️[Prisma]: Connected to ${this.config.name}`); // A Logger middleware is to be added here + } + + public getClient() { + return this.client; + } + + public async disconnect(): Promise { + await this.client.$disconnect(); + console.info(`⚡️[Prisma]: Disconnected from ${this.config.name}`); // A Logger middleware is to be added here + } +} diff --git a/src/common/system/database/exceptions/ORMBadQueryError.ts b/src/common/system/database/exceptions/ORMBadQueryError.ts index b61c4d15..89255e6a 100644 --- a/src/common/system/database/exceptions/ORMBadQueryError.ts +++ b/src/common/system/database/exceptions/ORMBadQueryError.ts @@ -2,4 +2,4 @@ export class ORMBadQueryError extends Error { constructor(message: string, public error: Error) { super(message); } -} \ No newline at end of file +} diff --git a/src/common/system/database/index.ts b/src/common/system/database/index.ts index 6fa84a21..744d3d62 100644 --- a/src/common/system/database/index.ts +++ b/src/common/system/database/index.ts @@ -2,4 +2,4 @@ import IDatabaseConfig from "@Common/config/IDatabaseConfig"; import DbProvider from "./DbProvider"; export type { IDatabaseConfig }; -export default DbProvider; \ No newline at end of file +export default DbProvider; diff --git a/src/entries/Api.ts b/src/entries/Api.ts index 0545c9d1..39470ab1 100644 --- a/src/entries/Api.ts +++ b/src/entries/Api.ts @@ -22,15 +22,8 @@ Container.get(ExpressServer).init({ label, port: parseInt(port), rootUrl, - middlwares: [ - cors({ origin: "*" }), - bodyParser.urlencoded({ extended: true }), - bodyParser.json(), - ], + middlwares: [cors({ origin: "*" }), bodyParser.urlencoded({ extended: true }), bodyParser.json()], errorHandler, }); routes.start(); - - - diff --git a/src/entries/Web.ts b/src/entries/Web.ts index d1ee8274..8edd92b9 100644 --- a/src/entries/Web.ts +++ b/src/entries/Web.ts @@ -15,7 +15,7 @@ if (!rootUrl) throw new Error(`process.env RootUrl is undefined`); Container.get(NextServer).init({ label, - isDev: process.env.NODE_ENV !== 'production', + isDev: process.env.NODE_ENV !== "production", port: parseInt(port), rootUrl, -}); \ No newline at end of file +}); diff --git a/src/front/Api/BaseApiService.ts b/src/front/Api/BaseApiService.ts index 3306dd92..a1803bf1 100644 --- a/src/front/Api/BaseApiService.ts +++ b/src/front/Api/BaseApiService.ts @@ -1,14 +1,17 @@ - export enum ContentType { JSON = "application/json", FORM_DATA = "multipart/form-data;", } - export default abstract class BaseApiService { - protected readonly backUrl = process.env["NEXT_PUBLIC_API_HOSTNAME"] + ':' + process.env['NEXT_PUBLIC_API_PORT'] + process.env['NEXT_PUBLIC_API_ROOT_URL']; - protected readonly proxyUrl = process.env["NEXT_PUBLIC_RPC_GATEWAY_HOSTNAME"] + ':' + process.env['NEXT_PUBLIC_RPC_GATEWAY_PORT'] + process.env['NEXT_PUBLIC_RPC_GATEWAY_ROOT_URL']; - + protected readonly backUrl = + process.env["NEXT_PUBLIC_API_HOSTNAME"] + ":" + process.env["NEXT_PUBLIC_API_PORT"] + process.env["NEXT_PUBLIC_API_ROOT_URL"]; + protected readonly proxyUrl = + process.env["NEXT_PUBLIC_RPC_GATEWAY_HOSTNAME"] + + ":" + + process.env["NEXT_PUBLIC_RPC_GATEWAY_PORT"] + + process.env["NEXT_PUBLIC_RPC_GATEWAY_ROOT_URL"]; + // eslint-disable-next-line @typescript-eslint/no-empty-function protected constructor() {} @@ -114,7 +117,6 @@ export default abstract class BaseApiService { protected onError(error: unknown) { console.error(error); } - } export interface IResponse { diff --git a/src/front/Api/Project/index.ts b/src/front/Api/Project/index.ts index 059e5f27..abe2819a 100644 --- a/src/front/Api/Project/index.ts +++ b/src/front/Api/Project/index.ts @@ -1,55 +1,55 @@ -import BaseApiService from "src/front/Api/BaseApiService" -import { IProject } from "src/front/interfaces" +import BaseApiService from "src/front/Api/BaseApiService"; +import { IProject } from "src/front/interfaces"; import { Service } from "typedi"; type IPostProject = { - title: string, - network: string -} + title: string; + network: string; +}; @Service() export default class Project extends BaseApiService { - private static instance: Project; - private readonly baseURl = this.backUrl.concat('/projects'); + private static instance: Project; + private readonly baseURl = this.backUrl.concat("/projects"); - private constructor() { - super(); - } + private constructor() { + super(); + } - public static getInstance() { - if (!this.instance) { - return new Project(); - } else { - return this.instance; - } - } + public static getInstance() { + if (!this.instance) { + return new Project(); + } else { + return this.instance; + } + } - public async getAllProject(): Promise { - const url = new URL(this.baseURl); - try { - return await this.getRequest(url); - } catch (err) { - this.onError(err); - return Promise.reject(err); - } - } + public async getAllProject(): Promise { + const url = new URL(this.baseURl); + try { + return await this.getRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } - public async getOneProject(uuid: string): Promise { - const url = new URL(this.baseURl.concat('/').concat(uuid)); - try { - return await this.getRequest(url); - } catch (err) { - this.onError(err); - return Promise.reject(err); - } - } + public async getOneProject(uuid: string): Promise { + const url = new URL(this.baseURl.concat("/").concat(uuid)); + try { + return await this.getRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } - public async postProject(params: IPostProject): Promise { - const url = new URL(this.baseURl); - try { - return await this.postRequest(url, params); - } catch (err) { - this.onError(err); - return Promise.reject(err); - } - } -} \ No newline at end of file + public async postProject(params: IPostProject): Promise { + const url = new URL(this.baseURl); + try { + return await this.postRequest(url, params); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } +} diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss index c9233c45..a5ff580e 100644 --- a/src/front/Components/DesignSystem/Button/classes.module.scss +++ b/src/front/Components/DesignSystem/Button/classes.module.scss @@ -1,101 +1,101 @@ @import "@Themes/constants.scss"; .root { - display: inline-flex; - justify-content: center; - border: 1px solid; - gap: 12px; - box-sizing: border-box; - height: fit-content; - align-items: center; - gap: 6px; - background: transparent; - font-style: normal; - font-weight: 500; - white-space: nowrap; - user-select: none; - cursor: pointer; + display: inline-flex; + justify-content: center; + border: 1px solid; + gap: 12px; + box-sizing: border-box; + height: fit-content; + align-items: center; + gap: 6px; + background: transparent; + font-style: normal; + font-weight: 500; + white-space: nowrap; + user-select: none; + cursor: pointer; - svg { - width: 18px; - height: 18px; - } + svg { + width: 18px; + height: 18px; + } - &[variant="primary"] { - color: $white; - background-color: $purple-flash; - border-color: $purple-flash; - padding: 24px 48px; - font-weight: 400; - font-size: 18px; - line-height: 22px; + &[variant="primary"] { + color: $white; + background-color: $purple-flash; + border-color: $purple-flash; + padding: 24px 48px; + font-weight: 400; + font-size: 18px; + line-height: 22px; - &:hover { - border-color: $purple-hover; - background-color: $purple-hover; - } + &:hover { + border-color: $purple-hover; + background-color: $purple-hover; + } - &:disabled { - border-color: $purple-soft; - background-color: $purple-soft; - pointer-events: none; - } - } + &:disabled { + border-color: $purple-soft; + background-color: $purple-soft; + pointer-events: none; + } + } - &[variant="secondary"] { - color: $white; - background-color: $red-flash; - border-color: $red-flash; - padding: 24px 48px; - font-weight: 400; - font-size: 18px; - line-height: 22px; + &[variant="secondary"] { + color: $white; + background-color: $red-flash; + border-color: $red-flash; + padding: 24px 48px; + font-weight: 400; + font-size: 18px; + line-height: 22px; - &:hover { - border-color: $re-hover; - background-color: $re-hover; - } + &:hover { + border-color: $re-hover; + background-color: $re-hover; + } - &:disabled { - border-color: $red-soft; - background-color: $red-soft; - pointer-events: none; - } - } + &:disabled { + border-color: $red-soft; + background-color: $red-soft; + pointer-events: none; + } + } - &[variant="ghost"] { - color: $pink-flash; - background-color: transparent; - border-color: $pink-flash; - padding: 24px 48px; - font-weight: 400; - font-size: 18px; - line-height: 22px; + &[variant="ghost"] { + color: $pink-flash; + background-color: transparent; + border-color: $pink-flash; + padding: 24px 48px; + font-weight: 400; + font-size: 18px; + line-height: 22px; - svg { - path { - stroke: $white; - } - } + svg { + path { + stroke: $white; + } + } - &:hover { - border-color: $pink-hover; - color: $pink-hover; - } + &:hover { + border-color: $pink-hover; + color: $pink-hover; + } - &:disabled { - border-color: $pink-soft; - background-color: $pink-soft; - pointer-events: none; - } - } + &:disabled { + border-color: $pink-soft; + background-color: $pink-soft; + pointer-events: none; + } + } - &[fullwidth="true"] { - width: 100%; - flex: 1; - } + &[fullwidth="true"] { + width: 100%; + flex: 1; + } - &[touppercase="false"] { - text-transform: inherit; - } + &[touppercase="false"] { + text-transform: inherit; + } } diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx index 98b6f3b4..86ca3248 100644 --- a/src/front/Components/DesignSystem/Button/index.tsx +++ b/src/front/Components/DesignSystem/Button/index.tsx @@ -2,49 +2,44 @@ import React from "react"; import classes from "./classes.module.scss"; export enum EButtonVariant { - PRIMARY = "primary", - SECONDARY = "secondary", - GHOST = "ghost", - LINE = "line", + PRIMARY = "primary", + SECONDARY = "secondary", + GHOST = "ghost", + LINE = "line", } type IProps = { - onClick?: React.MouseEventHandler | undefined; - children?: React.ReactNode; - variant?: EButtonVariant; - fullwidth?: "true" | "false"; - icon?: React.ReactNode; - disabled?: boolean; - type: "button" | "submit"; - isloading: string; + onClick?: React.MouseEventHandler | undefined; + children?: React.ReactNode; + variant?: EButtonVariant; + fullwidth?: "true" | "false"; + icon?: React.ReactNode; + disabled?: boolean; + type: "button" | "submit"; + isloading: string; }; type IState = {}; export default class Button extends React.Component { - static defaultProps: IProps = { - variant: EButtonVariant.PRIMARY, - disabled: false, - type: "button", - isloading: "false", - fullwidth: "false", - }; + static defaultProps: IProps = { + variant: EButtonVariant.PRIMARY, + disabled: false, + type: "button", + isloading: "false", + fullwidth: "false", + }; - public override render(): JSX.Element { - const attributes = { ...this.props }; - delete attributes.icon; - // let icon = this.props.isloading === "true" ? : this.props.icon; // Notion de loader - let icon = this.props.icon; - return ( - - ); - } + public override render(): JSX.Element { + const attributes = { ...this.props }; + delete attributes.icon; + // let icon = this.props.isloading === "true" ? : this.props.icon; // Notion de loader + let icon = this.props.icon; + return ( + + ); + } } diff --git a/src/front/Components/DesignSystem/CheckBox/classes.module.scss b/src/front/Components/DesignSystem/CheckBox/classes.module.scss index a85dba00..d595f2dc 100644 --- a/src/front/Components/DesignSystem/CheckBox/classes.module.scss +++ b/src/front/Components/DesignSystem/CheckBox/classes.module.scss @@ -1,39 +1,38 @@ @import "@Themes/constants.scss"; .root { - cursor: pointer; - display: flex; - align-items: center; + cursor: pointer; + display: flex; + align-items: center; - input[type="checkbox"] { - appearance: none; - background-color: transparent; - width: 16px; - height: 16px; - border: 1px solid $green-flash; - border-radius: 2px; - margin-right: 16px; - display: grid; - place-content: center; - } + input[type="checkbox"] { + appearance: none; + background-color: transparent; + width: 16px; + height: 16px; + border: 1px solid $green-flash; + border-radius: 2px; + margin-right: 16px; + display: grid; + place-content: center; + } - input[type="checkbox"]::before { - content: url("../../../assets/icons/check.svg"); - place-content: center; - display: grid; - width: 16px; - height: 16px; - background-color: $green-flash; - border-radius: 2px; - transform: scale(0); - } + input[type="checkbox"]::before { + content: url("../../../assets/icons/check.svg"); + place-content: center; + display: grid; + width: 16px; + height: 16px; + background-color: $green-flash; + border-radius: 2px; + transform: scale(0); + } - input[type="checkbox"]:checked::before { - transform: scale(1); - } - - .tooltip { - margin-left: 16px; - } + input[type="checkbox"]:checked::before { + transform: scale(1); + } + .tooltip { + margin-left: 16px; + } } diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx index a59949ac..fcf3bb9b 100644 --- a/src/front/Components/DesignSystem/CheckBox/index.tsx +++ b/src/front/Components/DesignSystem/CheckBox/index.tsx @@ -4,27 +4,24 @@ import Typography, { ITypo, ITypoColor } from "../Typography"; import classes from "./classes.module.scss"; type IProps = { - name: string; - toolTip?: string; + name: string; + toolTip?: string; }; export default class CheckBox extends React.Component { - static defaultProps = { - toolTip: "", - }; + static defaultProps = { + toolTip: "", + }; - public override render(): JSX.Element { - return ( - - - - ); - } + public override render(): JSX.Element { + return ( + + + + ); + } } diff --git a/src/front/Components/DesignSystem/Form/Elements/BaseField.tsx b/src/front/Components/DesignSystem/Form/Elements/BaseField.tsx index 66df1b38..4c2f40e8 100644 --- a/src/front/Components/DesignSystem/Form/Elements/BaseField.tsx +++ b/src/front/Components/DesignSystem/Form/Elements/BaseField.tsx @@ -1,154 +1,154 @@ -import { ChangeEvent, Component, createRef } from "react"; - -import { FormContext, IFormContext } from ".."; -// elements -import Validators, { IValidationTypes } from "../Validators/Validators"; - -export type IError = { - message: string; - validator: string; - value: string | number | readonly string[]; - args: any[]; - isErrored?: (hasError: boolean) => void; -}; - -export type INewBasefieldProps = { - onChange?: (event: ChangeEvent) => void; - name: string; - regex?: RegExp; - onCancel?: () => void; - disableValidation?: boolean; - onErrors?: (errors: IError[]) => void; - fieldRef?: React.RefObject; -}; - -export type IProps = IValidationTypes & React.InputHTMLAttributes & INewBasefieldProps; - -type IState = { - value?: string | number | readonly string[] ; - errors: IError[]; -}; - -export default abstract class BaseField

extends Component { - public static override contextType = FormContext; - public override context: IFormContext | null = null; - public fieldRef: React.RefObject = createRef(); - - static defaultProps: Partial = { - disableValidation: false, - }; - - constructor(props: P) { - super(props); - this.onChange = this.onChange.bind(this); - this.validate = this.validate.bind(this); - - this.state = { - value: this.props.value ?? this.props.defaultValue ?? "", - errors: [], - }; - } - - public override componentDidMount() { - this.context?.setField(this.props.name, this); - } - - public override componentDidUpdate(prevProps: P) { - if (prevProps.value !== this.props.value || prevProps.defaultValue !== this.props.defaultValue) { - this.setState({ value: this.props.value ?? this.props.defaultValue ?? "" }); - } - } - - public override componentWillUnmount() { - this.context?.unSetField(this.props.name); - } - - public async onBlur(event: React.FocusEvent) { - // this.validate(); - // if (this.props.onBlur) { - // this.props.onBlur(event); - // } - } - - public async validate(isOnSubmit?: boolean) { - if (this.props.disableValidation) return; - if (this.props.readOnly) return; - - const errorArray: IError[] = []; - const props: { [key: string]: any } = this.props; - const validators = Object.entries(Validators).filter(([key]) => props[key]); - - const isValidable = isOnSubmit - ? this.props.required || (this.state.value && this.state.value !== "") - : this.state.value && this.state.value !== ""; - - if (isValidable) { - const validations = await Promise.all( - validators.map(async ([key, validator]) => { - const validation = await (validator.validate as any)(this.state.value, ...(props[key].args ?? [])); - if (props[key].isErrored) { - props[key].isErrored(!validation); - } - return [key, validator, validation]; - }), - ); - - const unValidateds = validations.filter(([key, validator, validation]) => !validation); - const errors: IError[] = unValidateds.map(([key, unValidated]) => { - let message = unValidated.message; - if (typeof props[key] === "object" && props[key].message) message = props[key].message; - return { message, validator: key, value: this.state.value!, args: props[key].args ?? [] }; - }); - - errorArray.push(...errors); - } else { - validators.forEach(async ([key]) => { - if (props[key].isErrored) { - props[key].isErrored(false); - } - }); - } - - this.setState({ errors: errorArray }); - this.onErrors(errorArray); - return errorArray; - } - - public setErrors(errors: IError[]) { - this.setState({ ...this.state, errors }); - } - - /** - * It is automatically called by the parent form when the user cancelled the - * form and all of its changes. - * - * Override the method for custom cancelling logic, or pass a custom onCancel - * callback. - */ - public cancel() { - if (this.props.onCancel) { - this.props.onCancel(); - } - } - - public onErrors(errors: IError[]) { - if (this.props.onErrors) { - this.props.onErrors(errors); - } - } - - protected onChange(event: ChangeEvent) { - if (this.props.regex) { - if (!this.props.regex.test(event.currentTarget.value)) { - event.currentTarget.value = event.currentTarget.value.substring(0, event.currentTarget.value.length - 1); - } - } - this.setState({ value: event.currentTarget.value }, () => { - this.validate(); - this.context?.onFieldChange(this.props.name, this); - }); - if (this.props.onChange) { - this.props.onChange(event); - } - } -} +import { ChangeEvent, Component, createRef } from "react"; + +import { FormContext, IFormContext } from ".."; +// elements +import Validators, { IValidationTypes } from "../Validators/Validators"; + +export type IError = { + message: string; + validator: string; + value: string | number | readonly string[]; + args: any[]; + isErrored?: (hasError: boolean) => void; +}; + +export type INewBasefieldProps = { + onChange?: (event: ChangeEvent) => void; + name: string; + regex?: RegExp; + onCancel?: () => void; + disableValidation?: boolean; + onErrors?: (errors: IError[]) => void; + fieldRef?: React.RefObject; +}; + +export type IProps = IValidationTypes & React.InputHTMLAttributes & INewBasefieldProps; + +type IState = { + value?: string | number | readonly string[]; + errors: IError[]; +}; + +export default abstract class BaseField

extends Component { + public static override contextType = FormContext; + public override context: IFormContext | null = null; + public fieldRef: React.RefObject = createRef(); + + static defaultProps: Partial = { + disableValidation: false, + }; + + constructor(props: P) { + super(props); + this.onChange = this.onChange.bind(this); + this.validate = this.validate.bind(this); + + this.state = { + value: this.props.value ?? this.props.defaultValue ?? "", + errors: [], + }; + } + + public override componentDidMount() { + this.context?.setField(this.props.name, this); + } + + public override componentDidUpdate(prevProps: P) { + if (prevProps.value !== this.props.value || prevProps.defaultValue !== this.props.defaultValue) { + this.setState({ value: this.props.value ?? this.props.defaultValue ?? "" }); + } + } + + public override componentWillUnmount() { + this.context?.unSetField(this.props.name); + } + + public async onBlur(event: React.FocusEvent) { + // this.validate(); + // if (this.props.onBlur) { + // this.props.onBlur(event); + // } + } + + public async validate(isOnSubmit?: boolean) { + if (this.props.disableValidation) return; + if (this.props.readOnly) return; + + const errorArray: IError[] = []; + const props: { [key: string]: any } = this.props; + const validators = Object.entries(Validators).filter(([key]) => props[key]); + + const isValidable = isOnSubmit + ? this.props.required || (this.state.value && this.state.value !== "") + : this.state.value && this.state.value !== ""; + + if (isValidable) { + const validations = await Promise.all( + validators.map(async ([key, validator]) => { + const validation = await (validator.validate as any)(this.state.value, ...(props[key].args ?? [])); + if (props[key].isErrored) { + props[key].isErrored(!validation); + } + return [key, validator, validation]; + }), + ); + + const unValidateds = validations.filter(([key, validator, validation]) => !validation); + const errors: IError[] = unValidateds.map(([key, unValidated]) => { + let message = unValidated.message; + if (typeof props[key] === "object" && props[key].message) message = props[key].message; + return { message, validator: key, value: this.state.value!, args: props[key].args ?? [] }; + }); + + errorArray.push(...errors); + } else { + validators.forEach(async ([key]) => { + if (props[key].isErrored) { + props[key].isErrored(false); + } + }); + } + + this.setState({ errors: errorArray }); + this.onErrors(errorArray); + return errorArray; + } + + public setErrors(errors: IError[]) { + this.setState({ ...this.state, errors }); + } + + /** + * It is automatically called by the parent form when the user cancelled the + * form and all of its changes. + * + * Override the method for custom cancelling logic, or pass a custom onCancel + * callback. + */ + public cancel() { + if (this.props.onCancel) { + this.props.onCancel(); + } + } + + public onErrors(errors: IError[]) { + if (this.props.onErrors) { + this.props.onErrors(errors); + } + } + + protected onChange(event: ChangeEvent) { + if (this.props.regex) { + if (!this.props.regex.test(event.currentTarget.value)) { + event.currentTarget.value = event.currentTarget.value.substring(0, event.currentTarget.value.length - 1); + } + } + this.setState({ value: event.currentTarget.value }, () => { + this.validate(); + this.context?.onFieldChange(this.props.name, this); + }); + if (this.props.onChange) { + this.props.onChange(event); + } + } +} diff --git a/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss b/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss index 12e0306b..713ab8d2 100644 --- a/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss +++ b/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss @@ -1,87 +1,87 @@ @import "@Themes/constants.scss"; .root { - position: relative; + position: relative; - .input { - z-index: 1; - display: flex; - flex-direction: row; - align-items: center; - padding: 24px; - gap: 10px; + .input { + z-index: 1; + display: flex; + flex-direction: row; + align-items: center; + padding: 24px; + gap: 10px; - width: 530px; - height: 70px; - border: 1px solid $grey-medium; + width: 530px; + height: 70px; + border: 1px solid $grey-medium; - &:focus { - ~ .fake-placeholder { - transform: translateY(-35px); - transition: transform 0.5s ease; - } - } - &:not([value=""]) { - ~ .fake-placeholder { - transform: translateY(-35px); - transition: transform; - } - } + &:focus { + ~ .fake-placeholder { + transform: translateY(-35px); + transition: transform 0.5s ease; + } + } + &:not([value=""]) { + ~ .fake-placeholder { + transform: translateY(-35px); + transition: transform; + } + } - &[type="number"] { - &:focus { - ~ .fake-placeholder { - transform: translateY(-35px); - transition: transform 0.5s ease; - } - } - &:not([value=""]) { - ~ .fake-placeholder { - transform: translateY(-35px); - transition: transform; - } - } - } + &[type="number"] { + &:focus { + ~ .fake-placeholder { + transform: translateY(-35px); + transition: transform 0.5s ease; + } + } + &:not([value=""]) { + ~ .fake-placeholder { + transform: translateY(-35px); + transition: transform; + } + } + } - &:not([value=""]) { - ~ .fake-placeholder { - transform: translateY(-35px); - transition: transform 0.5s ease; - } - } + &:not([value=""]) { + ~ .fake-placeholder { + transform: translateY(-35px); + transition: transform 0.5s ease; + } + } - ~ .fake-placeholder { - z-index: 2; - top: 35%; - margin-left: 8px; - padding: 0 16px; - pointer-events: none; - position: absolute; - background: $white; - } - } + ~ .fake-placeholder { + z-index: 2; + top: 35%; + margin-left: 8px; + padding: 0 16px; + pointer-events: none; + position: absolute; + background: $white; + } + } } .textarea { - z-index: 1; - display: flex; - flex-direction: row; - align-items: center; - padding: 24px; - gap: 10px; + z-index: 1; + display: flex; + flex-direction: row; + align-items: center; + padding: 24px; + gap: 10px; - width: 530px; - height: 70px; - border: 1px solid $grey-medium; + width: 530px; + height: 70px; + border: 1px solid $grey-medium; - ~ .fake-placeholder { - z-index: 2; - top: -12px; - margin-left: 8px; - padding: 0 16px; - pointer-events: none; - position: absolute; - background: $white; - // transform: translateY(-35px); - } + ~ .fake-placeholder { + z-index: 2; + top: -12px; + margin-left: 8px; + padding: 0 16px; + pointer-events: none; + position: absolute; + background: $white; + // transform: translateY(-35px); + } } diff --git a/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx b/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx index 3e101395..3647a2db 100644 --- a/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx +++ b/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx @@ -43,7 +43,9 @@ export default class InputField extends BaseField { value={value} onChange={this.onChange} data-has-validation-errors={this.state.errors.length > 0} - className={this.props.className ? [classes["textarea"], classes[this.props.className]].join(" ") : classes["textarea"]} + className={ + this.props.className ? [classes["textarea"], classes[this.props.className]].join(" ") : classes["textarea"] + } />

{this.props.fakeplaceholder}
@@ -61,7 +63,9 @@ export default class InputField extends BaseField { onBlur={this.onBlur} value={value} data-has-validation-errors={this.state.errors.length > 0} - className={this.props.className ? [classes["input"], classes[this.props.className]].join(" ") : classes["input"]} + className={ + this.props.className ? [classes["input"], classes[this.props.className]].join(" ") : classes["input"] + } />
{this.props.fakeplaceholder}
diff --git a/src/front/Components/DesignSystem/Form/Validators/Validators.ts b/src/front/Components/DesignSystem/Form/Validators/Validators.ts index c01db512..f11c2a21 100644 --- a/src/front/Components/DesignSystem/Form/Validators/Validators.ts +++ b/src/front/Components/DesignSystem/Form/Validators/Validators.ts @@ -1,180 +1,180 @@ -import { isEmail, isNotEmpty, isNumberString, isString, max, maxLength, min, minLength } from "class-validator"; - -const Validators = { - /** - * **Parameters** : boolean - * - * This validator verifies the value is not empty - */ - required: { validate: isNotEmpty, message: "validation_messages.field_required" }, - - /** - * **Parameters** : boolean - * - * This validator verifies the value is a number - */ - numbersOnly: { validate: isNumberString, message: "validation_messages.only_numbers" }, - - /** - * **Parameters** : boolean - * - * This validator verifies the value is a number - */ - intOnly: { - validate: function (value: string) { - const regex = /^[0-9]*$/; - return regex.test(value); - }, - message: "validation_messages.only_integers", - }, - - /** - * **Parameters** : number - * - * This validator verifies the number is not below the parameter - */ - minNumber: { validate: (value: string, minVal: number) => min(Number(value), minVal), message: "validation_messages.below_min" }, - - /** - * **Parameters** : number - * - * This validator verifies the number is not above the parameter - */ - maxNumber: { validate: (value: string, maxVal: number) => max(Number(value), maxVal), message: "validation_messages.above_max" }, - - /** - * **Parameters** : number - * - * This validator verifies the string minimum length is conform to the parameter - */ - minLength: { - validate: minLength, - message: "validation_messages.min_string_length", - }, - - /** - * **Parameters** : number - * - * This validator verifies the string maximum length is conform to the parameter - */ - maxLength: { - validate: maxLength, - message: "validation_messages.max_string_length", - }, - /** - * **Parameters** : boolean - * - * This validator verifies the input's value is a string. - */ - isString: { validate: (value: string) => isString(value), message: "validation_messages.only_letters" }, - - /** - * **Parameters** : boolean - * - * This validator verifies the input's value is conform to the tag regex. - */ - isTag: { - validate: function (value: string) { - const regex = /^[a-zA-Z0-9][a-zA-Z0-9 ]*(,[a-zA-Z0-9][a-zA-Z0-9 ]*)*$/; - const isValid = regex.test(value); - if (!isValid) return false; - - const splittedTag = value.split(","); - if (splittedTag.length !== new Set(splittedTag).size) { - return false; - } - - return true; - }, - message: "validation_messages.not_valid_tag", - }, - /** - * **Parameters** : boolean - * - * This validator verifies the input's value is a valid email. - * - * If the **input is empty, it is considered valid**. If you do not wish this - * to happen please refer to the `required` validator. - */ - isEmail: { - validate: (value: string) => (Boolean(value) ? isEmail(value) : true), - message: "validation_messages.invalid_email", - }, - - isPseudo: { - validate: (value: string) => { - const pseudoRegex = /^[a-zA-Z][a-zA-Z0-9_-]{2,19}$/; - return pseudoRegex.test(value); - }, - message: "validation_messages.is_pseudo", - }, - - noSpaceInString: { - validate: (value: string) => { - const regex = /^\S*$/; - return regex.test(value); - }, - message: "validation_messages.no_space_in_string", - }, - - isPositiveNumber: { - validate: (value: string) => { - let nbr = parseFloat(value); - return !(isNaN(nbr) || nbr <= 0); - }, - message: "validation_messages.positive_number", - }, - - floatPrecision: { - validate: (value: string, precision: number) => { - // If value is not a float - if (isNaN(parseFloat(value))) return false; - let splittedValue = value.split("."); - // If there is no decimals - if (!splittedValue[1]) return true; - // If there is more decimals than the required precision - if (splittedValue[1].length > precision) return false; - return true; - }, - message: "validation_messages.float_precision", - }, - - isUrl: { - validate: (value: string, root: string | string[]) => { - try { - const url = new URL(value); - if (root) { - if (typeof root === "string") { - return url.hostname === root || url.hostname === `www.${root}`; - } else { - return root.some((r) => url.hostname === r || url.hostname === `www.${r}`); - } - } - return true; - } catch (e) { - return false; - } - }, - message: "validation_messages.invalid_url", - }, - - // isUniqueEmail: { TODO : uncomment and implement DB request - // validate: async (value: string, actual: string) => { - // try { - // const users = await AppUser.getInstance().getUsers({email: value}); - // if (!users.metadata.count) return true; - // if (users.data.length > 1) return false; - // if (users.data[0]?.email === actual) return true; - // return false; - // } catch { - // return true; - // } - // }, - // message: "validation_messages.unique_email", - // }, -}; - -export default Validators; -export type IValidationTypes = Partial< - Record void }>> ->; +import { isEmail, isNotEmpty, isNumberString, isString, max, maxLength, min, minLength } from "class-validator"; + +const Validators = { + /** + * **Parameters** : boolean + * + * This validator verifies the value is not empty + */ + required: { validate: isNotEmpty, message: "validation_messages.field_required" }, + + /** + * **Parameters** : boolean + * + * This validator verifies the value is a number + */ + numbersOnly: { validate: isNumberString, message: "validation_messages.only_numbers" }, + + /** + * **Parameters** : boolean + * + * This validator verifies the value is a number + */ + intOnly: { + validate: function (value: string) { + const regex = /^[0-9]*$/; + return regex.test(value); + }, + message: "validation_messages.only_integers", + }, + + /** + * **Parameters** : number + * + * This validator verifies the number is not below the parameter + */ + minNumber: { validate: (value: string, minVal: number) => min(Number(value), minVal), message: "validation_messages.below_min" }, + + /** + * **Parameters** : number + * + * This validator verifies the number is not above the parameter + */ + maxNumber: { validate: (value: string, maxVal: number) => max(Number(value), maxVal), message: "validation_messages.above_max" }, + + /** + * **Parameters** : number + * + * This validator verifies the string minimum length is conform to the parameter + */ + minLength: { + validate: minLength, + message: "validation_messages.min_string_length", + }, + + /** + * **Parameters** : number + * + * This validator verifies the string maximum length is conform to the parameter + */ + maxLength: { + validate: maxLength, + message: "validation_messages.max_string_length", + }, + /** + * **Parameters** : boolean + * + * This validator verifies the input's value is a string. + */ + isString: { validate: (value: string) => isString(value), message: "validation_messages.only_letters" }, + + /** + * **Parameters** : boolean + * + * This validator verifies the input's value is conform to the tag regex. + */ + isTag: { + validate: function (value: string) { + const regex = /^[a-zA-Z0-9][a-zA-Z0-9 ]*(,[a-zA-Z0-9][a-zA-Z0-9 ]*)*$/; + const isValid = regex.test(value); + if (!isValid) return false; + + const splittedTag = value.split(","); + if (splittedTag.length !== new Set(splittedTag).size) { + return false; + } + + return true; + }, + message: "validation_messages.not_valid_tag", + }, + /** + * **Parameters** : boolean + * + * This validator verifies the input's value is a valid email. + * + * If the **input is empty, it is considered valid**. If you do not wish this + * to happen please refer to the `required` validator. + */ + isEmail: { + validate: (value: string) => (Boolean(value) ? isEmail(value) : true), + message: "validation_messages.invalid_email", + }, + + isPseudo: { + validate: (value: string) => { + const pseudoRegex = /^[a-zA-Z][a-zA-Z0-9_-]{2,19}$/; + return pseudoRegex.test(value); + }, + message: "validation_messages.is_pseudo", + }, + + noSpaceInString: { + validate: (value: string) => { + const regex = /^\S*$/; + return regex.test(value); + }, + message: "validation_messages.no_space_in_string", + }, + + isPositiveNumber: { + validate: (value: string) => { + let nbr = parseFloat(value); + return !(isNaN(nbr) || nbr <= 0); + }, + message: "validation_messages.positive_number", + }, + + floatPrecision: { + validate: (value: string, precision: number) => { + // If value is not a float + if (isNaN(parseFloat(value))) return false; + let splittedValue = value.split("."); + // If there is no decimals + if (!splittedValue[1]) return true; + // If there is more decimals than the required precision + if (splittedValue[1].length > precision) return false; + return true; + }, + message: "validation_messages.float_precision", + }, + + isUrl: { + validate: (value: string, root: string | string[]) => { + try { + const url = new URL(value); + if (root) { + if (typeof root === "string") { + return url.hostname === root || url.hostname === `www.${root}`; + } else { + return root.some((r) => url.hostname === r || url.hostname === `www.${r}`); + } + } + return true; + } catch (e) { + return false; + } + }, + message: "validation_messages.invalid_url", + }, + + // isUniqueEmail: { TODO : uncomment and implement DB request + // validate: async (value: string, actual: string) => { + // try { + // const users = await AppUser.getInstance().getUsers({email: value}); + // if (!users.metadata.count) return true; + // if (users.data.length > 1) return false; + // if (users.data[0]?.email === actual) return true; + // return false; + // } catch { + // return true; + // } + // }, + // message: "validation_messages.unique_email", + // }, +}; + +export default Validators; +export type IValidationTypes = Partial< + Record void }>> +>; diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss b/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss index 5bbc5d29..c8bb6f28 100644 --- a/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss @@ -1,22 +1,22 @@ @import "@Themes/constants.scss"; .root { - display: flex; - position: relative; - width: fit-content; - margin: auto; - height: 83px; - padding: 10px 16px; + display: flex; + position: relative; + width: fit-content; + margin: auto; + height: 83px; + padding: 10px 16px; - .content{ - margin: auto; - } - .underline{ - width: 100%; - height: 3px; - background-color: $black; - position: absolute; - bottom: 0; - left: 0; - } -} \ No newline at end of file + .content { + margin: auto; + } + .underline { + width: 100%; + height: 3px; + background-color: $black; + position: absolute; + bottom: 0; + left: 0; + } +} diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx index 193cac47..c8e108f9 100644 --- a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx +++ b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx @@ -4,33 +4,32 @@ import Link from "next/link"; import Typography, { ITypo } from "../../Typography"; import classNames from "classnames"; import router from "next/router"; -import { useEffect, useState } from 'react' +import { useEffect, useState } from "react"; type IPropsClass = { - text: string | JSX.Element; - path?: string; - isActive?: boolean; + text: string | JSX.Element; + path?: string; + isActive?: boolean; }; type IStateClass = {}; class HeaderLinkClass extends React.Component { - public override render(): JSX.Element { - return -
- - {this.props.text} - -
- {this.props.isActive &&
} - ; - } + public override render(): JSX.Element { + return ( + +
+ {this.props.text} +
+ {this.props.isActive &&
} + + ); + } } export default function HeaderLink(props: IPropsClass) { - const [url, setUrl] = useState("") - useEffect(() => setUrl(router?.asPath), []) - const isActive = url === props.path; - return ; + const [url, setUrl] = useState(""); + useEffect(() => setUrl(router?.asPath), []); + const isActive = url === props.path; + return ; } diff --git a/src/front/Components/DesignSystem/Header/Navigation/classes.module.scss b/src/front/Components/DesignSystem/Header/Navigation/classes.module.scss index ba0e4863..1a02a0fc 100644 --- a/src/front/Components/DesignSystem/Header/Navigation/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/Navigation/classes.module.scss @@ -1,8 +1,8 @@ @import "@Themes/constants.scss"; .root { - display: inline-flex; - @media screen and (max-width: $screen-ls) { - display: none; - } + display: inline-flex; + @media screen and (max-width: $screen-ls) { + display: none; + } } diff --git a/src/front/Components/DesignSystem/Header/Navigation/index.tsx b/src/front/Components/DesignSystem/Header/Navigation/index.tsx index b5d8402d..73e5db27 100644 --- a/src/front/Components/DesignSystem/Header/Navigation/index.tsx +++ b/src/front/Components/DesignSystem/Header/Navigation/index.tsx @@ -6,13 +6,15 @@ type IProps = {}; type IState = {}; export default class Navigation extends React.Component { - public override render(): JSX.Element { - return
- - - - - -
; - } + public override render(): JSX.Element { + return ( +
+ + + + + +
+ ); + } } diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss index 3e6a2797..a1f1ffc5 100644 --- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss @@ -1,37 +1,37 @@ @import "@Themes/constants.scss"; .root { - display: flex; - flex-direction: column; - width: 300px; - max-height: 80%; - background-color: $white; - box-shadow: $shadow-nav; - padding: 24px; - position: absolute; - top: 107px; - right:56px; - - .notification-header{ - width: 100%; - display: inline-flex; - justify-content: space-between; - .close-icon{ - cursor: pointer; - } - } - .notification-body{ - margin-top: 24px; - overflow: hidden; - overflow-y: auto; - } + display: flex; + flex-direction: column; + width: 300px; + max-height: 80%; + background-color: $white; + box-shadow: $shadow-nav; + padding: 24px; + position: absolute; + top: 107px; + right: 56px; + + .notification-header { + width: 100%; + display: inline-flex; + justify-content: space-between; + .close-icon { + cursor: pointer; + } + } + .notification-body { + margin-top: 24px; + overflow: hidden; + overflow-y: auto; + } } -.background{ - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: transparent; -} \ No newline at end of file +.background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; +} diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx index 648fba49..444611eb 100644 --- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx +++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx @@ -7,63 +7,64 @@ import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler"; import Toasts, { IToast } from "@Front/Stores/Toasts"; type IProps = { - isOpen: boolean; - closeModal: () => void; + isOpen: boolean; + closeModal: () => void; }; type IState = { - toastList: IToast[] | null; + toastList: IToast[] | null; }; export default class NotificationModal extends React.Component { - private removeOnToastChange: () => void = () => { }; + private removeOnToastChange: () => void = () => {}; - constructor(props: IProps) { - super(props); - this.state = { - toastList: Toasts.getInstance().toasts, - }; - this.handleToastChange = this.handleToastChange.bind(this); - } + constructor(props: IProps) { + super(props); + this.state = { + toastList: Toasts.getInstance().toasts, + }; + this.handleToastChange = this.handleToastChange.bind(this); + } - public override render(): JSX.Element | null { - if (!this.props.isOpen) return null; - return <> -
-
-
- - Notifications - -
- Close notification modal -
-
; + public override render(): JSX.Element | null { + if (!this.props.isOpen) return null; + return ( + <> +
+
+
+ Notifications +
+ Close notification modal +
+
+ ; +
+ <> + {Toasts.getInstance().toasts.length === 0 ? ( +
+ No notification yet +
+ ) : ( + + )} + +
+
+ + ); + } -
- <> - {Toasts.getInstance().toasts.length === 0 - ? -
- No notification yet -
- : } - -
-
- - } + public override componentDidMount() { + this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange); + } - public override componentDidMount() { - this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange); - } + public override componentWillUnmount() { + this.removeOnToastChange(); + } - public override componentWillUnmount() { - this.removeOnToastChange(); - } - - private handleToastChange(toastList: IToast[] | null) { - this.setState({ - toastList, - }); - } + private handleToastChange(toastList: IToast[] | null) { + this.setState({ + toastList, + }); + } } diff --git a/src/front/Components/DesignSystem/Header/Notifications/classes.module.scss b/src/front/Components/DesignSystem/Header/Notifications/classes.module.scss index 48a60e0a..f93076cb 100644 --- a/src/front/Components/DesignSystem/Header/Notifications/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/Notifications/classes.module.scss @@ -1,18 +1,18 @@ @import "@Themes/constants.scss"; .root { - .icon-container{ - position: relative; - cursor: pointer; - - .notification-icon{ - height: 24px; - width: 24px; - } - .notification-dot{ - position: absolute; - top: 0; - right: 0; - } - } + .icon-container { + position: relative; + cursor: pointer; + + .notification-icon { + height: 24px; + width: 24px; + } + .notification-dot { + position: absolute; + top: 0; + right: 0; + } + } } diff --git a/src/front/Components/DesignSystem/Header/Notifications/index.tsx b/src/front/Components/DesignSystem/Header/Notifications/index.tsx index 55e95151..6ca96b84 100644 --- a/src/front/Components/DesignSystem/Header/Notifications/index.tsx +++ b/src/front/Components/DesignSystem/Header/Notifications/index.tsx @@ -8,60 +8,61 @@ import InfoIcon from "@Assets/icons/info.svg"; type IProps = {}; type IState = { - hasNotifications: boolean; - isModalOpen: boolean; - toastList: IToast[] | null; + hasNotifications: boolean; + isModalOpen: boolean; + toastList: IToast[] | null; }; export default class Notifications extends React.Component { - private removeOnToastChange: () => void = () => { }; + private removeOnToastChange: () => void = () => {}; - constructor(props: IProps) { - super(props); - this.state = { - isModalOpen: false, - toastList: Toasts.getInstance().toasts, //TODO : Get from bbd - hasNotifications: Toasts.getInstance().toasts.length > 0, // TODO: Change this when we have notification stored in bbd, unread notifications - }; - this.openModal = this.openModal.bind(this); - this.closeModal = this.closeModal.bind(this); - this.handleToastChange = this.handleToastChange.bind(this); + constructor(props: IProps) { + super(props); + this.state = { + isModalOpen: false, + toastList: Toasts.getInstance().toasts, //TODO : Get from bbd + hasNotifications: Toasts.getInstance().toasts.length > 0, // TODO: Change this when we have notification stored in bbd, unread notifications + }; + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + this.handleToastChange = this.handleToastChange.bind(this); + } - } + public override render(): JSX.Element { + return ( +
+
+ notifications + {this.state.hasNotifications && ( + Unread notification + )} +
- public override render(): JSX.Element { - return
-
- notifications - {this.state.hasNotifications && - Unread notification - } -
+ {this.state.isModalOpen && } +
+ ); + } - {this.state.isModalOpen && } -
; - } + public override componentDidMount() { + this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange); + } - public override componentDidMount() { - this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange); - } + public override componentWillUnmount() { + this.removeOnToastChange(); + } - public override componentWillUnmount() { - this.removeOnToastChange(); - } + private handleToastChange(toastList: IToast[] | null) { + this.setState({ + toastList, + hasNotifications: toastList ? toastList.length > 0 : false, + }); + } - private handleToastChange(toastList: IToast[] | null) { - this.setState({ - toastList, - hasNotifications: toastList ? toastList.length > 0 : false - }); - } + private openModal() { + this.setState({ isModalOpen: true }); + } - private openModal() { - this.setState({ isModalOpen: true }); - }; - - private closeModal() { - this.setState({ isModalOpen: false }); - }; -} \ No newline at end of file + private closeModal() { + this.setState({ isModalOpen: false }); + } +} diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss b/src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss index d8d4c9a3..27c75060 100644 --- a/src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss @@ -1,12 +1,12 @@ @import "@Themes/constants.scss"; .root { - display: flex; - position: relative; - width: fit-content; - margin: auto; + display: flex; + position: relative; + width: fit-content; + margin: auto; - .content{ - align-content: center; - } -} \ No newline at end of file + .content { + align-content: center; + } +} diff --git a/src/front/Components/DesignSystem/Header/Profile/classes.module.scss b/src/front/Components/DesignSystem/Header/Profile/classes.module.scss index b02c7865..faf25134 100644 --- a/src/front/Components/DesignSystem/Header/Profile/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/Profile/classes.module.scss @@ -1,9 +1,9 @@ @import "@Themes/constants.scss"; .root { - .profile-icon{ - cursor: pointer; - height: 24px; - width: 24px; - } + .profile-icon { + cursor: pointer; + height: 24px; + width: 24px; + } } diff --git a/src/front/Components/DesignSystem/Header/Profile/index.tsx b/src/front/Components/DesignSystem/Header/Profile/index.tsx index 2483c9fa..6a3cc824 100644 --- a/src/front/Components/DesignSystem/Header/Profile/index.tsx +++ b/src/front/Components/DesignSystem/Header/Profile/index.tsx @@ -6,33 +6,33 @@ import ProfileModal from "./ProfileModal"; type IProps = {}; type IState = { - isModalOpen: boolean; + isModalOpen: boolean; }; export default class Profile extends React.Component { + constructor(props: IProps) { + super(props); + this.state = { + isModalOpen: false, + }; + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + } - constructor(props: IProps) { - super(props); - this.state = { - isModalOpen: false, - }; - this.openModal = this.openModal.bind(this); - this.closeModal = this.closeModal.bind(this); + public override render(): JSX.Element { + return ( +
+ profile + {this.state.isModalOpen && } +
+ ); + } - } + private openModal() { + this.setState({ isModalOpen: true }); + } - public override render(): JSX.Element { - return
- profile - {this.state.isModalOpen && } -
; - } - - private openModal() { - this.setState({ isModalOpen: true }); - }; - - private closeModal() { - this.setState({ isModalOpen: false }); - }; + private closeModal() { + this.setState({ isModalOpen: false }); + } } diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss index 2a9c9778..097f1290 100644 --- a/src/front/Components/DesignSystem/Header/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/classes.module.scss @@ -1,26 +1,26 @@ @import "@Themes/constants.scss"; .root { - display: flex; - align-items: center; - justify-content: space-between; - height: 83px; - background-color: $white; - box-shadow: $shadow-nav; - padding: 0 48px; - position: relative; + display: flex; + align-items: center; + justify-content: space-between; + height: 83px; + background-color: $white; + box-shadow: $shadow-nav; + padding: 0 48px; + position: relative; - .logo-container { - .logo { - width: 174px; - height: 39px; - } - } + .logo-container { + .logo { + width: 174px; + height: 39px; + } + } - .right-section { - display: inline-flex; - >:first-child{ - margin-right: 32px; - } - } -} \ No newline at end of file + .right-section { + display: inline-flex; + > :first-child { + margin-right: 32px; + } + } +} diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx index 63ba97f6..4eaa8d6a 100644 --- a/src/front/Components/DesignSystem/Header/index.tsx +++ b/src/front/Components/DesignSystem/Header/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import classes from "./classes.module.scss"; import Image from "next/image"; -import LogoIcon from "@Assets/logo.svg" +import LogoIcon from "@Assets/logo.svg"; import Link from "next/link"; import Navigation from "./Navigation"; import Notifications from "./Notifications"; @@ -11,18 +11,20 @@ type IProps = {}; type IState = {}; export default class Header extends React.Component { - public override render(): JSX.Element { - return
-
- - logo - -
- -
- - -
-
; - } + public override render(): JSX.Element { + return ( +
+
+ + logo + +
+ +
+ + +
+
+ ); + } } diff --git a/src/front/Components/DesignSystem/Loader/index.tsx b/src/front/Components/DesignSystem/Loader/index.tsx index 8e4dbaf3..70f1206c 100644 --- a/src/front/Components/DesignSystem/Loader/index.tsx +++ b/src/front/Components/DesignSystem/Loader/index.tsx @@ -8,7 +8,7 @@ interface IProps { export default class Loader extends React.Component { public override render(): JSX.Element { - return + return ; // ; } } diff --git a/src/front/Components/DesignSystem/LogIn/index.tsx b/src/front/Components/DesignSystem/LogIn/index.tsx index 05520628..ea25a506 100644 --- a/src/front/Components/DesignSystem/LogIn/index.tsx +++ b/src/front/Components/DesignSystem/LogIn/index.tsx @@ -3,11 +3,11 @@ import classes from "./classes.module.scss"; type IProps = {}; type IState = { - logged: boolean; + logged: boolean; }; export default class Login extends React.Component { - public override render(): JSX.Element { - return
; - } + public override render(): JSX.Element { + return
; + } } diff --git a/src/front/Components/DesignSystem/LogOutButton/classes.module.scss b/src/front/Components/DesignSystem/LogOutButton/classes.module.scss index 684f1bec..b3226726 100644 --- a/src/front/Components/DesignSystem/LogOutButton/classes.module.scss +++ b/src/front/Components/DesignSystem/LogOutButton/classes.module.scss @@ -11,4 +11,4 @@ width: 24px; height: 24px; } -} \ No newline at end of file +} diff --git a/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss b/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss index c9a8155b..c0af8ca9 100644 --- a/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss +++ b/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss @@ -1,10 +1,10 @@ @import "Themes/constants.scss"; -.sub-container{ +.sub-container { padding: 40px; } -.button-container{ +.button-container { display: flex; - justify-content:flex-start; + justify-content: flex-start; } diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx index 3e266c80..7a429b5d 100644 --- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx +++ b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx @@ -49,10 +49,7 @@ export default class Confirm extends Modal { )} -
diff --git a/src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss b/src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss index 39e121ff..4a2a22bd 100644 --- a/src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss +++ b/src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss @@ -10,4 +10,3 @@ color: var(--color-neutral-900); } } - diff --git a/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx b/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx index addbaecf..3001462d 100644 --- a/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx +++ b/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx @@ -10,9 +10,7 @@ export default class Header extends React.Component { public override render(): JSX.Element { return (
- - {this.props.content} - + {this.props.content}
); } diff --git a/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx b/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx index 0c29ec04..1e220d7a 100644 --- a/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx +++ b/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx @@ -13,9 +13,7 @@ export default class PopUpLoader extends React.Component {
{/* */} TODO: INTEGRER LOARDER ISLOADING - - {this.props.text && this.props.text} - + {this.props.text && this.props.text}
); } diff --git a/src/front/Components/DesignSystem/Modal/classes.module.scss b/src/front/Components/DesignSystem/Modal/classes.module.scss index 8bc21419..435a9a5c 100644 --- a/src/front/Components/DesignSystem/Modal/classes.module.scss +++ b/src/front/Components/DesignSystem/Modal/classes.module.scss @@ -95,4 +95,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx index bfdaec0d..71536dc1 100644 --- a/src/front/Components/DesignSystem/Modal/index.tsx +++ b/src/front/Components/DesignSystem/Modal/index.tsx @@ -5,7 +5,7 @@ import Header from "./Elements/Header"; import Loader from "./Elements/Loader"; import Typography, { ITypo } from "../Typography"; -import CrossIcon from "@Assets/icons/cross.svg" +import CrossIcon from "@Assets/icons/cross.svg"; import Image from "next/image"; export type IModalProps = { @@ -29,7 +29,7 @@ export default class Modal

ext constructor(props: P) { super(props); this.close = this.close.bind(this); - + (this.state as any) = { isOpen: props.isOpen ?? true, }; @@ -45,17 +45,15 @@ export default class Modal

ext className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")} onClick={this.props.hasContainerClosable && this.close}> {this.props.closeBtn && ( -

- Unplugged +
+ Unplugged
)}
{this.props.header &&
} - <> - {this.props.children ? this.props.children : } - + <>{this.props.children ? this.props.children : } {this.props.children && this.props.footer &&
}
diff --git a/src/front/Components/DesignSystem/RadioBox/classes.module.scss b/src/front/Components/DesignSystem/RadioBox/classes.module.scss index 2e7e0db7..2790b0ab 100644 --- a/src/front/Components/DesignSystem/RadioBox/classes.module.scss +++ b/src/front/Components/DesignSystem/RadioBox/classes.module.scss @@ -1,39 +1,39 @@ @import "@Themes/constants.scss"; .root { - cursor: pointer; - user-select: none; - display: flex; - align-items: center; + cursor: pointer; + user-select: none; + display: flex; + align-items: center; - input[type="radio"] { - appearance: none; - background-color: transparent; - width: 16px; - height: 16px; - border: 1px solid $green-flash; - border-radius: 100px; - margin-right: 16px; - display: grid; - place-content: center; - margin-top: auto; - margin-bottom: auto; - } + input[type="radio"] { + appearance: none; + background-color: transparent; + width: 16px; + height: 16px; + border: 1px solid $green-flash; + border-radius: 100px; + margin-right: 16px; + display: grid; + place-content: center; + margin-top: auto; + margin-bottom: auto; + } - input[type="radio"]::before { - content: ""; - width: 10px; - height: 10px; - background-color: $green-flash; - border-radius: 100px; - transform: scale(0); - } + input[type="radio"]::before { + content: ""; + width: 10px; + height: 10px; + background-color: $green-flash; + border-radius: 100px; + transform: scale(0); + } - input[type="radio"]:checked::before { - transform: scale(1); - } + input[type="radio"]:checked::before { + transform: scale(1); + } - .tooltip { - margin-left: 16px; -} + .tooltip { + margin-left: 16px; + } } diff --git a/src/front/Components/DesignSystem/RadioBox/index.tsx b/src/front/Components/DesignSystem/RadioBox/index.tsx index f2621c92..96cff62b 100644 --- a/src/front/Components/DesignSystem/RadioBox/index.tsx +++ b/src/front/Components/DesignSystem/RadioBox/index.tsx @@ -4,25 +4,21 @@ import Typography, { ITypo, ITypoColor } from "../Typography"; import classes from "./classes.module.scss"; type IProps = { -children: React.ReactNode; - name: string; - toolTip?: string; + children: React.ReactNode; + name: string; + toolTip?: string; }; export default class RadioBox extends React.Component { - - public override render(): JSX.Element { - return ( - - - - ); - } + public override render(): JSX.Element { + return ( + + + + ); + } } diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss index 45b567a8..25705e51 100644 --- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss +++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss @@ -1,96 +1,96 @@ -@import "@Themes/constants.scss"; - -@keyframes slide-left { - from { - opacity: 0; - transform: translateX(120%); - } - to { - opacity: 1; - transform: translate(0%); - } -} - -@keyframes slide-right { - from { - opacity: 1; - transform: translateX(0); - } - to { - opacity: 0; - transform: translate(120%); - } -} - -.root { - pointer-events: all; - position: relative; - padding: 24px; - background: $orange-soft; - box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11); - border-radius: 5px; - - animation-name: slide-left; - animation-duration: 400ms; - animation-timing-function: $custom-easing; - animation-fill-mode: forwards; - - &[data-will-close="true"] { - animation-duration: 200ms; - animation-name: slide-right; - animation-timing-function: $custom-easing; - animation-fill-mode: forwards; - } - - .loadbar { - position: absolute; - top: 0; - right: 0; - left: 0; - height: 2px; - background: var(--color-neutral-500); - border-radius: 5px; - transform-origin: right; - transform: scaleX(0); - animation: loadbar-animation var(--data-duration) linear; - } - - .header { - font-family: var(--font-primary); - font-style: normal; - font-weight: 600; - font-size: 16px; - line-height: 24px; - color: var(--color-neutral-900); - display: flex; - align-items: center; - justify-content: space-between; - - .cross { - cursor: pointer; - } - } - - .text-icon_row { - display: flex; - flex-direction: row; - align-items: center; - p { - padding-left: 14px; - width: 150%; - } - } - - .text-container { - font-family: var(--font-primary); - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 20px; - color: var(--color-neutral-500); - } - - a { - text-decoration: none; - } -} +@import "@Themes/constants.scss"; + +@keyframes slide-left { + from { + opacity: 0; + transform: translateX(120%); + } + to { + opacity: 1; + transform: translate(0%); + } +} + +@keyframes slide-right { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translate(120%); + } +} + +.root { + pointer-events: all; + position: relative; + padding: 24px; + background: $orange-soft; + box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11); + border-radius: 5px; + + animation-name: slide-left; + animation-duration: 400ms; + animation-timing-function: $custom-easing; + animation-fill-mode: forwards; + + &[data-will-close="true"] { + animation-duration: 200ms; + animation-name: slide-right; + animation-timing-function: $custom-easing; + animation-fill-mode: forwards; + } + + .loadbar { + position: absolute; + top: 0; + right: 0; + left: 0; + height: 2px; + background: var(--color-neutral-500); + border-radius: 5px; + transform-origin: right; + transform: scaleX(0); + animation: loadbar-animation var(--data-duration) linear; + } + + .header { + font-family: var(--font-primary); + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: var(--color-neutral-900); + display: flex; + align-items: center; + justify-content: space-between; + + .cross { + cursor: pointer; + } + } + + .text-icon_row { + display: flex; + flex-direction: row; + align-items: center; + p { + padding-left: 14px; + width: 150%; + } + } + + .text-container { + font-family: var(--font-primary); + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: var(--color-neutral-500); + } + + a { + text-decoration: none; + } +} diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx index 56b6b13a..6f2eee86 100644 --- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx +++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx @@ -1,102 +1,98 @@ -import React from "react"; - -// Components - -// Stores - -// Styles -import classes from "./classes.module.scss"; -import Toasts, { IToast } from "@Front/Stores/Toasts"; -import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; - -type IProps = { - toast: IToast; -}; - -type IState = { - willClose: boolean; -}; - -export default class ToastElement extends React.Component { - private closeTimeout = 0; - constructor(props: IProps) { - super(props); - - this.state = { - willClose: false, - }; - - this.onClose = this.onClose.bind(this); - } - - public override render(): JSX.Element { - const toast = this.props.toast; - const style = { - "--data-duration": `${toast.time}ms`, - } as React.CSSProperties; - return ( -
- {toast.time !== 0 &&
} -
-
- {toast.icon && toast.icon} -
- {this.getToastTitle(toast.title)} - {this.getToastText(toast.text)} -
-
- {/* {toast.closable && } */} -
- {toast.button} -
- ); - } - - public override componentDidMount() { - if (this.props.toast.time === 0) return; - - this.closeTimeout = window.setTimeout(() => { - this.close(); - }, this.props.toast.time); - } - - private getToastTitle(title: string | React.ReactNode) { - if (typeof title === "string") { - return ( - - {title} - - ); - } - return title; - } - - private getToastText(text: React.ReactNode) { - if (typeof text === "string") { - return ( -
- - {text} - -
- ); - } - return text; - } - - private onClose(e: React.MouseEvent) { - e.preventDefault(); - e.stopPropagation(); - this.close(); - } - - private close() { - window.clearTimeout(this.closeTimeout); - this.setState({ - willClose: true, - }); - setTimeout(() => { - Toasts.getInstance().close(this.props.toast); - }, 200); - } -} +import React from "react"; + +// Components + +// Stores + +// Styles +import classes from "./classes.module.scss"; +import Toasts, { IToast } from "@Front/Stores/Toasts"; +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; + +type IProps = { + toast: IToast; +}; + +type IState = { + willClose: boolean; +}; + +export default class ToastElement extends React.Component { + private closeTimeout = 0; + constructor(props: IProps) { + super(props); + + this.state = { + willClose: false, + }; + + this.onClose = this.onClose.bind(this); + } + + public override render(): JSX.Element { + const toast = this.props.toast; + const style = { + "--data-duration": `${toast.time}ms`, + } as React.CSSProperties; + return ( +
+ {toast.time !== 0 &&
} +
+
+ {toast.icon && toast.icon} +
+ {this.getToastTitle(toast.title)} + {this.getToastText(toast.text)} +
+
+ {/* {toast.closable && } */} +
+ {toast.button} +
+ ); + } + + public override componentDidMount() { + if (this.props.toast.time === 0) return; + + this.closeTimeout = window.setTimeout(() => { + this.close(); + }, this.props.toast.time); + } + + private getToastTitle(title: string | React.ReactNode) { + if (typeof title === "string") { + return {title}; + } + return title; + } + + private getToastText(text: React.ReactNode) { + if (typeof text === "string") { + return ( +
+ + {text} + +
+ ); + } + return text; + } + + private onClose(e: React.MouseEvent) { + e.preventDefault(); + e.stopPropagation(); + this.close(); + } + + private close() { + window.clearTimeout(this.closeTimeout); + this.setState({ + willClose: true, + }); + setTimeout(() => { + Toasts.getInstance().close(this.props.toast); + }, 200); + } +} diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss b/src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss index 4ca947d3..35e9428e 100644 --- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss +++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss @@ -1,18 +1,18 @@ -@import "@Themes/constants.scss"; - -.root { - display: flex; - flex-direction: column; - overflow-y: auto; - overflow-x: hidden; - - & > *:not(:first-child) { - margin-top: 16px; - } - - @media (max-width: 444px) { - width: unset; - left: 0; - padding: 8px; - } -} +@import "@Themes/constants.scss"; + +.root { + display: flex; + flex-direction: column; + overflow-y: auto; + overflow-x: hidden; + + & > *:not(:first-child) { + margin-top: 16px; + } + + @media (max-width: 444px) { + width: unset; + left: 0; + padding: 8px; + } +} diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/index.tsx b/src/front/Components/DesignSystem/Toasts/ToastsContainer/index.tsx index 23663ce4..dc5edd46 100644 --- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/index.tsx +++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/index.tsx @@ -1,46 +1,46 @@ -import React from "react"; -import classes from "./classes.module.scss"; -import ToastElement from "./ToastElement"; -import classNames from "classnames"; -import Toasts, { IToast } from "@Front/Stores/Toasts"; - -type IProps = {}; -type IState = { - toastList: IToast[]; -}; -export default class ToastsContainer extends React.Component { - private removeOnChange = () => { }; - - public constructor(props: IProps) { - super(props); - this.state = { - toastList: Toasts.getInstance().toasts, - }; - - this.updateToasts = this.updateToasts.bind(this); - } - - public override render(): JSX.Element { - return ( -
0 && classes["open"])}> - <> - {this.state.toastList.map((toast) => { - return ; - })} - -
- ); - } - - public override componentDidMount() { - this.removeOnChange = Toasts.getInstance().onChange(this.updateToasts); - } - - public override componentWillUnmount() { - this.removeOnChange(); - } - - private updateToasts(toastList: IToast[]) { - this.setState({ toastList }); - } -} +import React from "react"; +import classes from "./classes.module.scss"; +import ToastElement from "./ToastElement"; +import classNames from "classnames"; +import Toasts, { IToast } from "@Front/Stores/Toasts"; + +type IProps = {}; +type IState = { + toastList: IToast[]; +}; +export default class ToastsContainer extends React.Component { + private removeOnChange = () => {}; + + public constructor(props: IProps) { + super(props); + this.state = { + toastList: Toasts.getInstance().toasts, + }; + + this.updateToasts = this.updateToasts.bind(this); + } + + public override render(): JSX.Element { + return ( +
0 && classes["open"])}> + <> + {this.state.toastList.map((toast) => { + return ; + })} + +
+ ); + } + + public override componentDidMount() { + this.removeOnChange = Toasts.getInstance().onChange(this.updateToasts); + } + + public override componentWillUnmount() { + this.removeOnChange(); + } + + private updateToasts(toastList: IToast[]) { + this.setState({ toastList }); + } +} diff --git a/src/front/Components/DesignSystem/Toasts/ToastsHandler/index.tsx b/src/front/Components/DesignSystem/Toasts/ToastsHandler/index.tsx index 32837fb4..b15c467b 100644 --- a/src/front/Components/DesignSystem/Toasts/ToastsHandler/index.tsx +++ b/src/front/Components/DesignSystem/Toasts/ToastsHandler/index.tsx @@ -6,8 +6,6 @@ type IState = {}; export default class ToastHandler extends React.Component { public override render(): JSX.Element { - return ( - - ); + return ; } } diff --git a/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss b/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss index 9f515231..c860f23b 100644 --- a/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss +++ b/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss @@ -30,4 +30,4 @@ right: 20px; margin-top: -4px; fill: $white; -} \ No newline at end of file +} diff --git a/src/front/Components/DesignSystem/ToolTip/Content/index.tsx b/src/front/Components/DesignSystem/ToolTip/Content/index.tsx index de95a856..ceeb0a41 100644 --- a/src/front/Components/DesignSystem/ToolTip/Content/index.tsx +++ b/src/front/Components/DesignSystem/ToolTip/Content/index.tsx @@ -13,12 +13,12 @@ export default class TooltipContent extends React.Component { public override render(): JSX.Element { const mousePositionX = this.props.event?.clientX; const mousePositionY = this.props.event?.clientY; - let right = 0; - let bottom = 0; - if (typeof window !== "undefined") { - right = window.innerWidth - (mousePositionX ?? 0) - 35; - bottom = window.innerHeight - (mousePositionY ?? 0) + 15; - } + let right = 0; + let bottom = 0; + if (typeof window !== "undefined") { + right = window.innerWidth - (mousePositionX ?? 0) - 35; + bottom = window.innerHeight - (mousePositionY ?? 0) + 15; + } return (
{
); } -} \ No newline at end of file +} diff --git a/src/front/Components/DesignSystem/ToolTip/index.tsx b/src/front/Components/DesignSystem/ToolTip/index.tsx index f0a97db1..82a3f987 100644 --- a/src/front/Components/DesignSystem/ToolTip/index.tsx +++ b/src/front/Components/DesignSystem/ToolTip/index.tsx @@ -40,13 +40,13 @@ export default class Tooltip extends React.Component { onMouseEnter={this.togglePopup} onMouseLeave={this.togglePopup} onMouseMove={this.moovePopup}> - toolTip icon + toolTip icon - - - {this.props.text} - - + + + {this.props.text} + + ); } diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss index 37639d78..54b3c942 100644 --- a/src/front/Components/DesignSystem/Typography/classes.module.scss +++ b/src/front/Components/DesignSystem/Typography/classes.module.scss @@ -2,126 +2,126 @@ @import "@Themes/modes.scss"; .root { - color: $black; - font-family: 'Inter', sans-serif; - &.H1-60 { - font-style: normal; - font-weight: 500; - font-size: 50px; - line-height: 61px; - } + color: $black; + font-family: "Inter", sans-serif; + &.H1-60 { + font-style: normal; + font-weight: 500; + font-size: 50px; + line-height: 61px; + } - &.H1-bis-40 { - font-style: normal; - font-weight: 500; - font-size: 40px; - line-height: 48px; - } + &.H1-bis-40 { + font-style: normal; + font-weight: 500; + font-size: 40px; + line-height: 48px; + } - &.H2-30 { - font-style: normal; - font-weight: 500; - font-size: 30px; - line-height: 36px; - } + &.H2-30 { + font-style: normal; + font-weight: 500; + font-size: 30px; + line-height: 36px; + } - &.H3-24 { - font-style: normal; - font-weight: 600; - font-size: 24px; - line-height: 29px; - } + &.H3-24 { + font-style: normal; + font-weight: 600; + font-size: 24px; + line-height: 29px; + } - &.Paragraphe-semibold-18 { - font-style: normal; - font-weight: 600; - font-size: 18px; - line-height: 22px; - letter-spacing: 0.5px; - } + &.Paragraphe-semibold-18 { + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 22px; + letter-spacing: 0.5px; + } - &.Paragraphe-simple-18 { - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 22px; - } + &.Paragraphe-simple-18 { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + } - &.Paragraphe-MAJ-18 { - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 22px; - text-transform: uppercase; - } + &.Paragraphe-MAJ-18 { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + } - &.Nav-header-off-18 { - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 22px; - letter-spacing: 0.5px; - } + &.Nav-header-off-18 { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + letter-spacing: 0.5px; + } - &.Paragraphe-18-error { - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 22px; - letter-spacing: 0.5px; - } + &.Paragraphe-18-error { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + letter-spacing: 0.5px; + } - &.Paragraphe-semibold-16 { - font-style: normal; - font-weight: 600; - font-size: 16px; - line-height: 22px; - letter-spacing: 0.5px; - } + &.Paragraphe-semibold-16 { + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 22px; + letter-spacing: 0.5px; + } - &.Nav-input-off-16 { - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 22px; - letter-spacing: 0.5px; - color: $grey; - } + &.Nav-input-off-16 { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + letter-spacing: 0.5px; + color: $grey; + } - &.Paragraphe-simple-16 { - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 22px; - letter-spacing: 0.005em - } + &.Paragraphe-simple-16 { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + letter-spacing: 0.005em; + } - &.Paragraphe-16-error { - color: $re-hover; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 22px; - letter-spacing: 0.5px; - } + &.Paragraphe-16-error { + color: $re-hover; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + letter-spacing: 0.5px; + } - &.Caption_14 { - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 22px; - letter-spacing: 0.5px; - } + &.Caption_14 { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 22px; + letter-spacing: 0.5px; + } - &.re-hover { - color: $re-hover; - } + &.re-hover { + color: $re-hover; + } - &.grey { - color: $grey; - } + &.grey { + color: $grey; + } - &.black { - color: $black; - } -} \ No newline at end of file + &.black { + color: $black; + } +} diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx index 700e181a..44e95082 100644 --- a/src/front/Components/DesignSystem/Typography/index.tsx +++ b/src/front/Components/DesignSystem/Typography/index.tsx @@ -3,50 +3,44 @@ import classes from "./classes.module.scss"; import classNames from "classnames"; type IProps = { - typo: ITypo; - children: React.ReactNode; - color?: ITypoColor; + typo: ITypo; + children: React.ReactNode; + color?: ITypoColor; }; type IState = {}; export enum ITypo { - H1 = "H1-60", - H1Bis = "H1-bis-40", - H2 = "H2-30", - H3 = "H3-24", + H1 = "H1-60", + H1Bis = "H1-bis-40", + H2 = "H2-30", + H3 = "H3-24", - P_SB_18 = "Paragraphe-semibold-18", - P_18 = "Paragraphe-simple-18", - P_MAJ_18 = "Paragraphe-MAJ-18", - NAV_HEADER_18 = "Nav-header-off-18", - P_ERR_18 = "Paragraphe-18-error", + P_SB_18 = "Paragraphe-semibold-18", + P_18 = "Paragraphe-simple-18", + P_MAJ_18 = "Paragraphe-MAJ-18", + NAV_HEADER_18 = "Nav-header-off-18", + P_ERR_18 = "Paragraphe-18-error", - P_SB_16 = "Paragraphe-semibold-16", - P_16 = "Paragraphe-simple-16", - NAV_INPUT_16 = "Nav-input-off-16", - P_ERR_16 = "Paragraphe-16-error", + P_SB_16 = "Paragraphe-semibold-16", + P_16 = "Paragraphe-simple-16", + NAV_INPUT_16 = "Nav-input-off-16", + P_ERR_16 = "Paragraphe-16-error", - CAPTION_14 = "Caption_14", + CAPTION_14 = "Caption_14", } export enum ITypoColor { - RE_HOVER = "re-hover", - GREY = "grey", - BLACK = 'black' + RE_HOVER = "re-hover", + GREY = "grey", + BLACK = "black", } export default class Typography extends React.Component { - public override render(): JSX.Element { - return ( -
- {this.props.children} -
- ); - } + public override render(): JSX.Element { + return ( +
+ {this.props.children} +
+ ); + } } diff --git a/src/front/Components/DesignSystem/Version/classes.module.scss b/src/front/Components/DesignSystem/Version/classes.module.scss index 10dc5ca8..4519ae69 100644 --- a/src/front/Components/DesignSystem/Version/classes.module.scss +++ b/src/front/Components/DesignSystem/Version/classes.module.scss @@ -1,7 +1,7 @@ @import "@Themes/constants.scss"; .root { - position: fixed; - bottom: 16px; - right: 24px; + position: fixed; + bottom: 16px; + right: 24px; } diff --git a/src/front/Components/DesignSystem/Version/index.tsx b/src/front/Components/DesignSystem/Version/index.tsx index d860f71e..1f145ccc 100644 --- a/src/front/Components/DesignSystem/Version/index.tsx +++ b/src/front/Components/DesignSystem/Version/index.tsx @@ -7,13 +7,13 @@ type IProps = {}; type IState = {}; export default class Version extends React.Component { - public override render(): JSX.Element { - return
- -
- {VersionFile.version} -
- -
; - } + public override render(): JSX.Element { + return ( +
+ +
{VersionFile.version}
+ +
+ ); + } } diff --git a/src/front/Components/DesignSystem/_Template/index.tsx b/src/front/Components/DesignSystem/_Template/index.tsx index 8a4b305d..5a958c0b 100644 --- a/src/front/Components/DesignSystem/_Template/index.tsx +++ b/src/front/Components/DesignSystem/_Template/index.tsx @@ -5,7 +5,7 @@ type IProps = {}; type IState = {}; export default class _Template extends React.Component { - public override render(): JSX.Element { - return
; - } + public override render(): JSX.Element { + return
; + } } diff --git a/src/front/Components/Elements/Burger/animation.scss b/src/front/Components/Elements/Burger/animation.scss index f32d03ab..8665e2df 100644 --- a/src/front/Components/Elements/Burger/animation.scss +++ b/src/front/Components/Elements/Burger/animation.scss @@ -1,39 +1,39 @@ @keyframes BurgerTopForward { - 0% { - transform: translate3d(0px, 0px, 0) rotate(0deg) scaleX(1); - } + 0% { + transform: translate3d(0px, 0px, 0) rotate(0deg) scaleX(1); + } - 100% { - transform: translate3d(-8.000023662749896px, 2.000005915687474px, 0) rotate(-45.000133102968164deg) scaleX(0.4999985210781315) - } + 100% { + transform: translate3d(-8.000023662749896px, 2.000005915687474px, 0) rotate(-45.000133102968164deg) scaleX(0.4999985210781315); + } } @keyframes BurgerTopBackward { - 0% { - transform: translate3d(-8.000023662749896px, 2.000005915687474px, 0) rotate(-45.000133102968164deg) scaleX(0.4999985210781315) - } + 0% { + transform: translate3d(-8.000023662749896px, 2.000005915687474px, 0) rotate(-45.000133102968164deg) scaleX(0.4999985210781315); + } - 100% { - transform: translate3d(0px, 0px, 0) rotate(0deg) scaleX(1); - } + 100% { + transform: translate3d(0px, 0px, 0) rotate(0deg) scaleX(1); + } } @keyframes BurgerBottomForward { - 0% { - transform: translate3d(0px, 0px, 0) rotate(0deg) scaleX(1); - } + 0% { + transform: translate3d(0px, 0px, 0) rotate(0deg) scaleX(1); + } - 100% { - transform: translate3d(-8.000023662749896px, -2.000005915687474px, 0) rotate(45.000133102968164deg) scaleX(0.4999985210781315); - } + 100% { + transform: translate3d(-8.000023662749896px, -2.000005915687474px, 0) rotate(45.000133102968164deg) scaleX(0.4999985210781315); + } } @keyframes BurgerBottomBackward { - 0% { - transform: translate3d(-8.000023662749896px, -2.000005915687474px, 0) rotate(45.000133102968164deg) scaleX(0.4999985210781315); - } + 0% { + transform: translate3d(-8.000023662749896px, -2.000005915687474px, 0) rotate(45.000133102968164deg) scaleX(0.4999985210781315); + } - 100% { - transform: translate3d(0px, 0px, 0) rotate(0deg) scaleX(1); - } -} \ No newline at end of file + 100% { + transform: translate3d(0px, 0px, 0) rotate(0deg) scaleX(1); + } +} diff --git a/src/front/Components/Elements/Burger/classes.module.scss b/src/front/Components/Elements/Burger/classes.module.scss index f7ca96fd..15698393 100644 --- a/src/front/Components/Elements/Burger/classes.module.scss +++ b/src/front/Components/Elements/Burger/classes.module.scss @@ -1,9 +1,7 @@ @import "@Themes/constants.scss"; @import "./animation.scss"; - .root { - position: fixed; left: 18px; top: 23px; @@ -30,18 +28,16 @@ background-color: $textColor; } - - .inner-top { top: 0; &.true { - animation: BurgerTopForward 0.2s cubic-bezier(.43,1.89,.68,.28); + animation: BurgerTopForward 0.2s cubic-bezier(0.43, 1.89, 0.68, 0.28); animation-fill-mode: forwards; } &.false { - animation: BurgerTopBackward 0.2s cubic-bezier(.43,1.89,.68,.28); + animation: BurgerTopBackward 0.2s cubic-bezier(0.43, 1.89, 0.68, 0.28); animation-fill-mode: forwards; } } @@ -59,14 +55,13 @@ bottom: 1px; &.true { - animation: BurgerBottomForward 0.2s cubic-bezier(.43,1.89,.68,.28); + animation: BurgerBottomForward 0.2s cubic-bezier(0.43, 1.89, 0.68, 0.28); animation-fill-mode: forwards; } &.false { - animation: BurgerBottomBackward 0.2s cubic-bezier(.43,1.89,.68,.28); + animation: BurgerBottomBackward 0.2s cubic-bezier(0.43, 1.89, 0.68, 0.28); animation-fill-mode: forwards; } } - -} \ No newline at end of file +} diff --git a/src/front/Components/Elements/Burger/index.tsx b/src/front/Components/Elements/Burger/index.tsx index 3af3e9c3..52c5c8f0 100644 --- a/src/front/Components/Elements/Burger/index.tsx +++ b/src/front/Components/Elements/Burger/index.tsx @@ -2,14 +2,14 @@ import classes from "./classes.module.scss"; import classNames from "classnames"; type IProps = { - state: boolean, - callback: () => void + state: boolean; + callback: () => void; }; export default function Burger({ state, callback }: IProps) { return (
callback()}> -
+
diff --git a/src/front/Components/Elements/InputField/classes.module.scss b/src/front/Components/Elements/InputField/classes.module.scss index 411a3298..923bc81b 100644 --- a/src/front/Components/Elements/InputField/classes.module.scss +++ b/src/front/Components/Elements/InputField/classes.module.scss @@ -2,122 +2,121 @@ @import "@Themes/animation.scss"; .root { - padding: 15px 0; - width: 100%; - height: 100%; - will-change: transform, opacity; - animation: fadeInFromLeft 500ms; + padding: 15px 0; + width: 100%; + height: 100%; + will-change: transform, opacity; + animation: fadeInFromLeft 500ms; - >h1 { - margin-top: 0; - } + > h1 { + margin-top: 0; + } - button { - margin-top: 10px; - } + button { + margin-top: 10px; + } - .component { - width: 100%; - display: block; - position: relative; - height: 40px; - padding: 12px 16px 12px 40px; - border-width: 1px; - border-style: solid; - border-color: $borderColor; - border-radius: 4px; - transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; - will-change: border-color, box-shadow; - background-color: $backgroundColor; + .component { + width: 100%; + display: block; + position: relative; + height: 40px; + padding: 12px 16px 12px 40px; + border-width: 1px; + border-style: solid; + border-color: $borderColor; + border-radius: 4px; + transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; + will-change: border-color, box-shadow; + background-color: $backgroundColor; - &:hover { - border-color: $primaryColor; - } + &:hover { + border-color: $primaryColor; + } - &:focus { - box-shadow: 0 0 0 2px $primaryColor; - border-color: $primaryColor; - } + &:focus { + box-shadow: 0 0 0 2px $primaryColor; + border-color: $primaryColor; + } - &.error { - border-color: $downColor; + &.error { + border-color: $downColor; - &:focus { - box-shadow: 0 0 0 2px rgba(237, 29, 37, 0.1); - } - } + &:focus { + box-shadow: 0 0 0 2px rgba(237, 29, 37, 0.1); + } + } - &.success { - border-color: $upColor; + &.success { + border-color: $upColor; - &:focus { - box-shadow: 0 0 0 2px rgba(0, 201, 167, 0.1); - } - } - } + &:focus { + box-shadow: 0 0 0 2px rgba(0, 201, 167, 0.1); + } + } + } - @keyframes zoomIn { - from { - transform: scale(.2); - opacity: 0 - } + @keyframes zoomIn { + from { + transform: scale(0.2); + opacity: 0; + } - to { - transform: scale(1); - opacity: 1 - } - } + to { + transform: scale(1); + opacity: 1; + } + } - .status { - display: block; - position: absolute; - top: 50%; - right: 10px; - z-index: 1; - width: 20px; - height: 20px; - margin-top: -10px; - font-size: 14px; - line-height: 20px; - text-align: center; - visibility: visible; - pointer-events: none; - will-change: transform, opacity; + .status { + display: block; + position: absolute; + top: 50%; + right: 10px; + z-index: 1; + width: 20px; + height: 20px; + margin-top: -10px; + font-size: 14px; + line-height: 20px; + text-align: center; + visibility: visible; + pointer-events: none; + will-change: transform, opacity; - &.error { - animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46); - } + &.error { + animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46); + } - &.success { - animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46); - } - } - - .icon { - display: block; - position: absolute; - top: 50%; - left: 10px; - z-index: 1; - width: 20px; - height: 20px; - margin-top: -10px; - font-size: 14px; - line-height: 20px; - text-align: center; - visibility: visible; - pointer-events: none; - } + &.success { + animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46); + } + } + .icon { + display: block; + position: absolute; + top: 50%; + left: 10px; + z-index: 1; + width: 20px; + height: 20px; + margin-top: -10px; + font-size: 14px; + line-height: 20px; + text-align: center; + visibility: visible; + pointer-events: none; + } } .errorMsg { - color: $downColor; - margin: -15px 0 15px 0; - line-height: 24px; - will-change: transform, opacity; - animation: slideDown 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} \ No newline at end of file + color: $downColor; + margin: -15px 0 15px 0; + line-height: 24px; + will-change: transform, opacity; + animation: slideDown 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/front/Components/Elements/InputField/index.tsx b/src/front/Components/Elements/InputField/index.tsx index 11d6f742..2674589b 100644 --- a/src/front/Components/Elements/InputField/index.tsx +++ b/src/front/Components/Elements/InputField/index.tsx @@ -1,50 +1,50 @@ import React, { RefObject } from "react"; import classes from "./classes.module.scss"; -import classNames from "classnames" -import Image from "next/image" -import ErrorIcon from "@Assets/icons/input-error.svg" -import SuccessIcon from "@Assets/icons/input-success.svg" +import classNames from "classnames"; +import Image from "next/image"; +import ErrorIcon from "@Assets/icons/input-error.svg"; +import SuccessIcon from "@Assets/icons/input-success.svg"; type IProps = { - inputRef?: RefObject, - icon?: string, - placeholder?: string, - name?: string, - value?: string, - onChange: any, - onBlur?: any, - inputStatus: 'success' | 'error' | 'neutral', - errorMsg?: string - type: string + inputRef?: RefObject; + icon?: string; + placeholder?: string; + name?: string; + value?: string; + onChange: any; + onBlur?: any; + inputStatus: "success" | "error" | "neutral"; + errorMsg?: string; + type: string; }; export default class InputField extends React.Component { - public constructor(props: IProps) { - super(props); - } - public override render(): JSX.Element { - return <> -
- {this.props.icon && {this.props.icon}} - -
- {this.props.inputStatus === "success" && - success icon} - {this.props.inputStatus === "error" && - error icon - } -
-
- {this.props.errorMsg &&
{this.props.errorMsg}
} - - } -} \ No newline at end of file + public constructor(props: IProps) { + super(props); + } + public override render(): JSX.Element { + return ( + <> +
+ {this.props.icon && {this.props.icon}} + +
+ {this.props.inputStatus === "success" && success icon} + {this.props.inputStatus === "error" && error icon} +
+
+ {this.props.errorMsg &&
{this.props.errorMsg}
} + + ); + } +} diff --git a/src/front/Components/LayoutTemplates/DefaultLayout.tsx b/src/front/Components/LayoutTemplates/DefaultLayout.tsx index c862295b..66445bd6 100644 --- a/src/front/Components/LayoutTemplates/DefaultLayout.tsx +++ b/src/front/Components/LayoutTemplates/DefaultLayout.tsx @@ -1,17 +1,16 @@ -import Head from 'next/head'; -import { ReactNode } from 'react'; +import Head from "next/head"; +import { ReactNode } from "react"; type DefaultLayoutProps = { children: ReactNode }; export const DefaultLayout = ({ children }: DefaultLayoutProps) => { - return ( - <> - - LECoffre - - -
{children}
- - ); + return ( + <> + + LECoffre + + +
{children}
+ + ); }; - diff --git a/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx b/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx index 23a8600b..d639f9c8 100644 --- a/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx @@ -27,7 +27,6 @@ export default class DefaultTemplate extends React.Component {
- ); } @@ -37,4 +36,4 @@ export default class DefaultTemplate extends React.Component { window.scrollTo(0, this.props.scrollTop); } } -} \ No newline at end of file +} diff --git a/src/front/Components/Layouts/Base/index.tsx b/src/front/Components/Layouts/Base/index.tsx index d8a26763..8e0e41a9 100644 --- a/src/front/Components/Layouts/Base/index.tsx +++ b/src/front/Components/Layouts/Base/index.tsx @@ -3,4 +3,4 @@ import React from "react"; type _IProps = {}; type _IState = {}; -export default class BasePage extends React.Component {} \ No newline at end of file +export default class BasePage extends React.Component {} diff --git a/src/front/Components/Layouts/DesignSystem/classes.module.scss b/src/front/Components/Layouts/DesignSystem/classes.module.scss index c89f20e6..0d45d86d 100644 --- a/src/front/Components/Layouts/DesignSystem/classes.module.scss +++ b/src/front/Components/Layouts/DesignSystem/classes.module.scss @@ -1,14 +1,14 @@ .root { - margin-left: 35px; - margin-right: 35px; - .section { - margin-bottom: 32px; - } - .sub-section { - margin-bottom: 24px; - } + margin-left: 35px; + margin-right: 35px; + .section { + margin-bottom: 32px; + } + .sub-section { + margin-bottom: 24px; + } - .inline-flex{ - display: inline-flex; - } + .inline-flex { + display: inline-flex; + } } diff --git a/src/front/Components/Layouts/Home/classes.module.scss b/src/front/Components/Layouts/Home/classes.module.scss index c6d429b9..c3a2af63 100644 --- a/src/front/Components/Layouts/Home/classes.module.scss +++ b/src/front/Components/Layouts/Home/classes.module.scss @@ -1,2 +1,2 @@ .root { -} \ No newline at end of file +} diff --git a/src/front/Components/Layouts/Home/index.tsx b/src/front/Components/Layouts/Home/index.tsx index 58ef5ea1..ea575b11 100644 --- a/src/front/Components/Layouts/Home/index.tsx +++ b/src/front/Components/Layouts/Home/index.tsx @@ -4,13 +4,13 @@ import BasePage from "../Base"; import classes from "./classes.module.scss"; export default class Home extends BasePage { - public override render(): JSX.Element { - return ( - -
- HomePage -
- - ); - } + public override render(): JSX.Element { + return ( + +
+ HomePage +
+ + ); + } } diff --git a/src/front/Components/Layouts/PageNotFound/classes.module.scss b/src/front/Components/Layouts/PageNotFound/classes.module.scss index bcafd9fc..c02020a1 100644 --- a/src/front/Components/Layouts/PageNotFound/classes.module.scss +++ b/src/front/Components/Layouts/PageNotFound/classes.module.scss @@ -2,20 +2,20 @@ @import "@Themes/animation.scss"; .root { - margin: 100px auto 20px auto; - font-size: 4em; - text-align: center; - will-change: opacity, transform; - animation: fadeInFromTop 500ms; + margin: 100px auto 20px auto; + font-size: 4em; + text-align: center; + will-change: opacity, transform; + animation: fadeInFromTop 500ms; - .text { - margin: 20px auto 20px auto; - font-size: 0.5em; - text-align: center; - } + .text { + margin: 20px auto 20px auto; + font-size: 0.5em; + text-align: center; + } - .home-button { - margin: 50px auto; - max-width: 150px; - } -} \ No newline at end of file + .home-button { + margin: 50px auto; + max-width: 150px; + } +} diff --git a/src/front/Components/Layouts/PageNotFound/index.tsx b/src/front/Components/Layouts/PageNotFound/index.tsx index d99171bf..ac9b7c8d 100644 --- a/src/front/Components/Layouts/PageNotFound/index.tsx +++ b/src/front/Components/Layouts/PageNotFound/index.tsx @@ -4,30 +4,21 @@ import BasePage from "../Base"; import classes from "./classes.module.scss"; export default class PageNotFound extends BasePage { - public override render(): JSX.Element { - return ( - -
- {/* Unplugged Oops */} -
There isn't anything here...
-
- - {/*
+ public override render(): JSX.Element { + return ( + +
+ {/* Unplugged Oops */} +
There isn't anything here...
+
+ {/*
- - - - - -
- - ); - } + +
+ + ); + } } - - - diff --git a/src/front/Components/Materials/Header/index.tsx b/src/front/Components/Materials/Header/index.tsx index 703721a2..5eec49eb 100644 --- a/src/front/Components/Materials/Header/index.tsx +++ b/src/front/Components/Materials/Header/index.tsx @@ -8,51 +8,45 @@ import Burger from "@Front/Components/Elements/Burger"; type IProps = {}; type IState = { - status: boolean; + status: boolean; }; export default class Header extends React.Component { - public constructor(props: IProps) { - super(props); - this.state = { - status: false, - }; + public constructor(props: IProps) { + super(props); + this.state = { + status: false, + }; - this.switchStatus = this.switchStatus.bind(this); - } + this.switchStatus = this.switchStatus.bind(this); + } - public override render(): JSX.Element { - return ( - <> -
- -
- - TEZOS LINK - -
-
-
- - entire stack - -
-
- - {/*
-
- - ); - } + public override render(): JSX.Element { + return ( + <> +
+ +
+ + TEZOS LINK + +
+
+
+ + entire stack + +
+
+ {/*
+
+ + ); + } - private switchStatus() { - this.state.status - ? this.setState({ status: false }) - : this.setState({ status: true }); - } + private switchStatus() { + this.state.status ? this.setState({ status: false }) : this.setState({ status: true }); + } } diff --git a/src/front/Stores/BaseStore.ts b/src/front/Stores/BaseStore.ts index 45d84403..a8e77340 100644 --- a/src/front/Stores/BaseStore.ts +++ b/src/front/Stores/BaseStore.ts @@ -1,6 +1,5 @@ import EventEmitter from "@Front/Services/EventEmitter"; - export default abstract class BaseStore { protected readonly event = new EventEmitter(); diff --git a/src/front/Stores/Toasts.tsx b/src/front/Stores/Toasts.tsx index dab7d33b..651a55dd 100644 --- a/src/front/Stores/Toasts.tsx +++ b/src/front/Stores/Toasts.tsx @@ -1,106 +1,106 @@ -import EventEmitter from "@Front/Services/EventEmitter"; -// import I18n from "Components/Elements/I18n"; - -export enum EToastPriority { - HIGH = "high", - LOW = "low", -} - -export interface IToast { - id?: number; - title: string | React.ReactNode; - icon?: React.ReactNode; - text?: string | React.ReactNode; - button?: React.ReactNode; - time?: number; - closable?: boolean; - priority?: EToastPriority; -} - -export default class Toasts { - private static ctx: Toasts; - private readonly event = new EventEmitter(); - private toastList: IToast[] = []; - private uid: number = 0; - - private defaultTime: IToast["time"] = 10000; - private defaultClosable: IToast["closable"] = true; - private defaultPriority: IToast["priority"] = EToastPriority.LOW; - - private constructor() { - Toasts.ctx = this; - } - - public static getInstance() { - if (!Toasts.ctx) new this(); - return Toasts.ctx; - } - - public get toasts() { - return this.toastList; - } - - /** - * @returns removelistener callback - */ - public onChange(callback: (toastList: IToast[]) => void) { - this.event.on("change", callback); - return () => this.event.off("change", callback); - } - - public open(toast: IToast): () => void { - const index = this.toastList.indexOf(toast); - if (index !== -1) return () => this.close(toast); - - toast.id = toast.id ?? this.uid++; - toast.time = toast.time ?? this.defaultTime; - toast.closable = toast.closable ?? this.defaultClosable; - toast.priority = toast.priority ?? this.defaultPriority; - - const highToasts = this.toastList.filter((toast) => { - return toast.priority === EToastPriority.HIGH; - }); - - const lowToasts = this.toastList.filter((toast) => { - return toast.priority === EToastPriority.LOW; - }); - - if (toast.priority === EToastPriority.HIGH) { - highToasts.unshift(toast); - } else { - lowToasts.unshift(toast); - } - - this.toastList.splice(0); - this.toastList.unshift(...lowToasts); - this.toastList.unshift(...highToasts); - - this.event.emit("change", this.toastList); - - return () => this.close(toast); - } - - public close(toast: IToast) { - const index = this.toastList.indexOf(toast); - if (index === -1) return; - this.toastList.splice(index, 1); - this.event.emit("change", this.toastList); - } - - /** - * An utility static method you can use to quickly display an error toast - * with a custom error message. - * - * @param message_key a key to a l18n message. - */ - public static errorToast(message_key: string) { - Toasts.getInstance().open({ - text: "Toast text", - title: "Toast title", - // text: , - // title: , - closable: true, - priority: EToastPriority.HIGH, - }); - } -} +import EventEmitter from "@Front/Services/EventEmitter"; +// import I18n from "Components/Elements/I18n"; + +export enum EToastPriority { + HIGH = "high", + LOW = "low", +} + +export interface IToast { + id?: number; + title: string | React.ReactNode; + icon?: React.ReactNode; + text?: string | React.ReactNode; + button?: React.ReactNode; + time?: number; + closable?: boolean; + priority?: EToastPriority; +} + +export default class Toasts { + private static ctx: Toasts; + private readonly event = new EventEmitter(); + private toastList: IToast[] = []; + private uid: number = 0; + + private defaultTime: IToast["time"] = 10000; + private defaultClosable: IToast["closable"] = true; + private defaultPriority: IToast["priority"] = EToastPriority.LOW; + + private constructor() { + Toasts.ctx = this; + } + + public static getInstance() { + if (!Toasts.ctx) new this(); + return Toasts.ctx; + } + + public get toasts() { + return this.toastList; + } + + /** + * @returns removelistener callback + */ + public onChange(callback: (toastList: IToast[]) => void) { + this.event.on("change", callback); + return () => this.event.off("change", callback); + } + + public open(toast: IToast): () => void { + const index = this.toastList.indexOf(toast); + if (index !== -1) return () => this.close(toast); + + toast.id = toast.id ?? this.uid++; + toast.time = toast.time ?? this.defaultTime; + toast.closable = toast.closable ?? this.defaultClosable; + toast.priority = toast.priority ?? this.defaultPriority; + + const highToasts = this.toastList.filter((toast) => { + return toast.priority === EToastPriority.HIGH; + }); + + const lowToasts = this.toastList.filter((toast) => { + return toast.priority === EToastPriority.LOW; + }); + + if (toast.priority === EToastPriority.HIGH) { + highToasts.unshift(toast); + } else { + lowToasts.unshift(toast); + } + + this.toastList.splice(0); + this.toastList.unshift(...lowToasts); + this.toastList.unshift(...highToasts); + + this.event.emit("change", this.toastList); + + return () => this.close(toast); + } + + public close(toast: IToast) { + const index = this.toastList.indexOf(toast); + if (index === -1) return; + this.toastList.splice(index, 1); + this.event.emit("change", this.toastList); + } + + /** + * An utility static method you can use to quickly display an error toast + * with a custom error message. + * + * @param message_key a key to a l18n message. + */ + public static errorToast(message_key: string) { + Toasts.getInstance().open({ + text: "Toast text", + title: "Toast title", + // text: , + // title: , + closable: true, + priority: EToastPriority.HIGH, + }); + } +} diff --git a/src/front/assets/docs/README.md b/src/front/assets/docs/README.md index 71238eb2..9d77fbef 100644 --- a/src/front/assets/docs/README.md +++ b/src/front/assets/docs/README.md @@ -1,3 +1,3 @@ # Documentation -This is the documentation served at `https:///documentation` +This is the documentation served at `https:///documentation` diff --git a/src/front/assets/docs/content.md b/src/front/assets/docs/content.md index 12e9f565..56b19c99 100644 --- a/src/front/assets/docs/content.md +++ b/src/front/assets/docs/content.md @@ -5,18 +5,21 @@ Once sign up, a `Project ID` is generated for your project, to use within your a Then, add the tezoslink.net RPC endpoint to your prefered Tezos JS library. > i.e with [Sotez](https://github.com/AndrewKishino/sotez) : ->```js -> const sotez = new Sotez('https://.tezoslink.net/v1/'); +> +> ```js +> const sotez = new Sotez( +> "https://.tezoslink.net/v1/" +> ); > ``` ## Networks Use one of these endpoints as your Tezos client provider. -|NETWORK|DESCRIPTION|URL | -|-------|-----------|-------------------------------------------------| -|Mainnet| JSON/RPC |https://mainnet.tezoslink.net/v1/| -|Testnet| JSON/RPC |https://testnet.tezoslink.net/v1/| +| NETWORK | DESCRIPTION | URL | +| ------- | ----------- | -------------------------------------------------- | +| Mainnet | JSON/RPC | https://mainnet.tezoslink.net/v1/ | +| Testnet | JSON/RPC | https://testnet.tezoslink.net/v1/ | ## Make requests @@ -37,26 +40,29 @@ The `Project ID` authorize requests. All requests of type `/chains/main/blocks(.*?)` are accepted. ->Example of valid paths: ->- `/chains/main/blocks/head/context/contracts/
/balance` ->- `/chains/main/blocks/head/context/contracts/
/delegate` ->- `/chains/main/blocks/head/context/contracts/
/manager_key` ->- `/chains/main/blocks/head/context/contracts/
/counter` ->- `/chains/main/blocks/head/context/delegates/
` ->- `/chains/main/blocks/head/header` ->- `/chains/main/blocks/head/votes/proposals` ->- `/chains/main/blocks/head/votes/current_quorum` +> Example of valid paths: +> +> - `/chains/main/blocks/head/context/contracts/
/balance` +> - `/chains/main/blocks/head/context/contracts/
/delegate` +> - `/chains/main/blocks/head/context/contracts/
/manager_key` +> - `/chains/main/blocks/head/context/contracts/
/counter` +> - `/chains/main/blocks/head/context/delegates/
` +> - `/chains/main/blocks/head/header` +> - `/chains/main/blocks/head/votes/proposals` +> - `/chains/main/blocks/head/votes/current_quorum` -[More about the Tezos `JSON/RPC` endpoints](https://tezos.gitlab.io/api/rpc.html) +[More about the Tezos `JSON/RPC` endpoints](https://tezos.gitlab.io/api/rpc.html) ## Nodes Tezos has three types of nodes: + - Full mode (default mode) - **Rolling mode** - **Archive mode** We use two types of mode: + - **Archive** to store the whole blockchain. Archive is the heaviest mode as it keeps the whole chain data to be able to query any information stored on the chain since the genesis. It is particularly suitable for indexers or block explorer, that is why we use archive nodes. - **Rolling** to store last blocks (and scale them faster) diff --git a/src/front/assets/docs/menu.md b/src/front/assets/docs/menu.md index c1127b93..369f47e6 100644 --- a/src/front/assets/docs/menu.md +++ b/src/front/assets/docs/menu.md @@ -4,4 +4,3 @@ - [Security](##security) - [RPC Endpoints](#rpc-endpoints) - [Nodes](#nodes) - diff --git a/src/front/components/Layouts/DesignSystem/index.tsx b/src/front/components/Layouts/DesignSystem/index.tsx index 660d68fc..c86a194f 100644 --- a/src/front/components/Layouts/DesignSystem/index.tsx +++ b/src/front/components/Layouts/DesignSystem/index.tsx @@ -37,9 +37,11 @@ export default class DesignSystem extends BasePage {
- 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. + 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.
@@ -69,8 +71,15 @@ export default class DesignSystem extends BasePage { Show Modal - - Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit. + + Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. + Elementum malesuada at sit elit.
@@ -87,14 +96,16 @@ export default class DesignSystem extends BasePage {
CheckBox component
- +
RadioBox component
- Radio Box 1 + + Radio Box 1 + Radio Box 2
diff --git a/src/front/index.scss b/src/front/index.scss index a1fbced5..ef522e58 100644 --- a/src/front/index.scss +++ b/src/front/index.scss @@ -1,42 +1,41 @@ @import "@Themes/constants.scss"; @import "@Themes/fonts.scss"; - * { - box-sizing: border-box; + box-sizing: border-box; } body { - margin: 0; - padding: 0; - background-size: inherit; - background-position: top center; - font-size: 0px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + padding: 0; + background-size: inherit; + background-position: top center; + font-size: 0px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } input { - font-size: 14px; + font-size: 14px; } ::placeholder { - font-size: 14px; + font-size: 14px; } *:focus { - outline: none; + outline: none; } a, a:visited { - color: initial; - text-decoration: none !important; - opacity: 1; - transition: opacity 0.15s ease-in-out; - will-change: opacity; + color: initial; + text-decoration: none !important; + opacity: 1; + transition: opacity 0.15s ease-in-out; + will-change: opacity; } a:hover { - opacity: 0.9; -} \ No newline at end of file + opacity: 0.9; +} diff --git a/src/front/interfaces.ts b/src/front/interfaces.ts index d358c155..8dd39d45 100644 --- a/src/front/interfaces.ts +++ b/src/front/interfaces.ts @@ -1,13 +1,12 @@ export interface IMockInterface { - id: number, - path: string, + id: number; + path: string; } export interface IProject { - id: number, - title: string, - uuid: string, - createdAt: Date, - updatedAt: Date, - network: string, + id: number; + title: string; + uuid: string; + createdAt: Date; + updatedAt: Date; + network: string; } - diff --git a/src/front/themes/constants.scss b/src/front/themes/constants.scss index 0c032f7c..e344cb10 100644 --- a/src/front/themes/constants.scss +++ b/src/front/themes/constants.scss @@ -26,7 +26,7 @@ $pink-hover: #e34ba9; // Soft colors $green-soft: #baf2cd; $blue-soft: #a7c6d4; -$orange-soft: #FFDC99; +$orange-soft: #ffdc99; $turquoise-soft: #c3eae6; $purple-soft: #c5b2d4; $orange-soft: #ffdc99; diff --git a/src/front/themes/fonts.scss b/src/front/themes/fonts.scss index 0e5e7576..9cd5291d 100644 --- a/src/front/themes/fonts.scss +++ b/src/front/themes/fonts.scss @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"); diff --git a/src/front/themes/modes.scss b/src/front/themes/modes.scss index 3bbcb5ed..c5a412e1 100644 --- a/src/front/themes/modes.scss +++ b/src/front/themes/modes.scss @@ -1,28 +1,28 @@ @import "@Themes/constants.scss"; -body.body{ - // --black: #000000; +body.body { + // --black: #000000; - --green-flash: #{green-flash}; - // --blue-flash: #005176; - // --turquoise-flash: #3fa79e; - // --purple-flash: #320756; - // --purple-hover: #4e1480; - // --orange-flash: #ffb017; - // --red-flash: #a63a23; - // --re-hover: #cc4c31; - // --pink-flash: #bd4b91; - // --pink-hover: #e34ba9; + --green-flash: #{green-flash}; + // --blue-flash: #005176; + // --turquoise-flash: #3fa79e; + // --purple-flash: #320756; + // --purple-hover: #4e1480; + // --orange-flash: #ffb017; + // --red-flash: #a63a23; + // --re-hover: #cc4c31; + // --pink-flash: #bd4b91; + // --pink-hover: #e34ba9; - // --green-soft: #baf2cd; - // --blue-soft: #a7c6d4; - // --turquoise-soft: #c3eae6; - // --purple-soft: #c5b2d4; - // --orange-soft: #ffdc99; - // --red-soft: #f08771; - // --pink-soft: #f8b9df; + // --green-soft: #baf2cd; + // --blue-soft: #a7c6d4; + // --turquoise-soft: #c3eae6; + // --purple-soft: #c5b2d4; + // --orange-soft: #ffdc99; + // --red-soft: #f08771; + // --pink-soft: #f8b9df; - // --grey: #939393; - // --grey-medium: #e7e7e7; - // --grey-soft: #f9f9f9; + // --grey: #939393; + // --grey-medium: #e7e7e7; + // --grey-soft: #f9f9f9; } diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 2952cdfa..12b69a5b 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,5 +1,5 @@ -import PageNotFound from "@Front/Components/Layouts/PageNotFound" +import PageNotFound from "@Front/Components/Layouts/PageNotFound"; export default function Route() { - return -} \ No newline at end of file + return ; +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 40cbf0d3..de0c6b71 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -4,23 +4,18 @@ import type { NextPage } from "next"; import type { AppType, AppProps } from "next/app"; import type { ReactElement, ReactNode } from "react"; -export type NextPageWithLayout< - TProps = Record, - TInitialProps = TProps -> = NextPage & { - getLayout?: (page: ReactElement) => ReactNode; +export type NextPageWithLayout, TInitialProps = TProps> = NextPage & { + getLayout?: (page: ReactElement) => ReactNode; }; type AppPropsWithLayout = AppProps & { - Component: NextPageWithLayout; + Component: NextPageWithLayout; }; const MyApp = (({ Component, pageProps }: AppPropsWithLayout) => { - const getLayout = - Component.getLayout ?? - ((page) => ); + const getLayout = Component.getLayout ?? ((page) => ); - return getLayout(); + return getLayout(); }) as AppType; export default MyApp; diff --git a/src/pages/design-system.tsx b/src/pages/design-system.tsx index a9da129d..d3835570 100644 --- a/src/pages/design-system.tsx +++ b/src/pages/design-system.tsx @@ -1,5 +1,5 @@ import DesignSystem from "@Front/Components/Layouts/DesignSystem"; export default function Route() { - return ; + return ; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8ccb4e35..39cca774 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,5 @@ import Home from "@Front/Components/Layouts/Home"; export default function Route() { - return ; + return ; }