5htp-core 0.4.9-99 → 0.5.0-1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.9-99",
+	"version": "0.5.0-1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/assets/css/text/icons.less

@@ -15,6 +15,11 @@ i {
     text-align: center;
     font-style: normal;
 
+    // Avoid the flexbox to crush the icon
+    .row > & {
+        flex: 0 0 1em;
+    }
+
     &.spin {
         animation-name: spin;
         animation-iteration-count: infinite;

package/src/client/assets/css/text/text.less

@@ -26,6 +26,10 @@ a {
             position: relative;
         }
     }
+
+    &.discrete:not(:hover) {
+        text-decoration: none;
+    }
 }
 
 [contenteditable]:focus {

package/src/client/assets/css/utils/borders.less

@@ -6,5 +6,10 @@
 .bb-1, .bv-1 { border-bottom: solid 1px var(--cLine); }
 .bl-1, .bh-1 { border-left: solid 1px var(--cLine); }
 
+.bt-2, .bv-2 { border-top: solid 2px var(--cLine); }
+.br-2, .bh-2 { border-right: solid 2px var(--cLine); }
+.bb-2, .bv-2 { border-bottom: solid 2px var(--cLine); }
+.bl-2, .bh-2 { border-left: solid 1px var(--cLine); }
+
 .b-0 { border: none; }
 .b-1 { border-top: solid 1px var(--cLine); }

package/src/client/assets/css/utils/layouts.less

@@ -253,6 +253,7 @@
 
     &.sep-1 { // Bordure interne
 
+        align-items: stretch;
         background-color: var(--cLine2);
         gap: 1px;
         &.card {

package/src/client/components/Dialog/index.less

@@ -148,5 +148,6 @@
 
 // Selecteur moins profond pour que les clases utilitaires (w-a-x) soient prioritaires
 .modal > .card {
-    max-width: 500px;
+    // Modal content should always be whiteys adapt from content width
+    //max-width: 500px;
 }

package/src/client/components/containers/Popover/getPosition.ts

@@ -1,138 +1,129 @@
-export type TSide = "left"|"top"|"right"|"bottom";
+export type TSide = "left" | "top" | "right" | "bottom";
 
 const debug = false;
 
-export type TPosition = ReturnType<typeof corrigerPosition>
+export type TPosition = ReturnType<typeof corrigerPosition>;
 
 export default function corrigerPosition(
-    conteneur: HTMLElement,
-    popover: HTMLElement,
-    absolu: boolean | undefined,
-    cote: TSide = "bottom",
-    frame?: HTMLElement
+    container: HTMLElement, // button
+    popover: HTMLElement, // popover
+    preferredSide: TSide = "bottom",
+    frame?: HTMLElement // body
 ) {
-    // RAPPEL: L'élement sera positionnée relativement à son conteneur
-    //      Tous les calculs ici donnent donc des valeurs relatives au conteneur
-
-    const margeX = 5;
-    const margeY = 5;
+    // Dimensions and bounding rectangles
+    const popoverDims = { width: popover.offsetWidth, height: popover.offsetHeight };
+    const containerRect = container.getBoundingClientRect();
+
+    // Find the frame if not provided
+    if (!frame) {
+        // Find the closest relative-positioned parent
+        frame = container.parentElement;
+        while (frame && !["relative", "sticky"].includes(getComputedStyle(frame).position)) {
+            frame = frame.parentElement;
+        }
 
-    const dimsPop = {
-        width: popover.offsetWidth,
-        height: popover.offsetHeight
+        if (!frame) frame = document.body;
     }
 
-    debug && console.log(`[popover] Conteneur =`, conteneur, `Popover =`, popover, `Coté =`, cote);
+    if (debug) console.log("frame", frame);
 
-    if (dimsPop.width === undefined || dimsPop.height === undefined)
-        console.error("Unable to get the dimensions of the popover element. Did you pass a react element as content of popover ?");
+    const frameRect = frame.getBoundingClientRect();
+    const frameOffsetTop = frame.scrollTop;
+    const frameOffsetLeft = frame.scrollLeft;
 
-    /*----------------------------------
-    - POSITIONNEMENT INITIAL
-    ----------------------------------*/
-    let posInit = {
-        top: 0,
-        left: 0
+    // Calculate available space in each direction relative to the frame
+    const space = {
+        top: containerRect.top - frameRect.top,
+        bottom: frameRect.bottom - containerRect.bottom,
+        left: containerRect.left - frameRect.left,
+        right: frameRect.right - containerRect.right,
     };
 
-    // Position & dimensions des élements
-    const posCont = conteneur.getBoundingClientRect();
-
-    // Placement
-    debug && console.log(`[popover] Placement = ${cote}`, posCont.height, margeY);
-    switch (cote) {
-        case 'top':
-            posInit.top = -dimsPop.height - margeY;
-            break;
-        case 'bottom':
-            posInit.top = posCont.height + margeY;
-            break;
-        case 'left':
-            posInit.left = -dimsPop.width - margeX;
-            break;
-        case 'right':
-            posInit.left = posCont.width + margeX;
-            break;
-    }
-
-    // Centrage Horizontal
-    if (cote === 'top' || cote === 'bottom') {
-        debug && console.log(`[popover] Centrage horizontal`);
-        posInit.left = posCont.width / 2 - dimsPop.width / 2;
-    }
-    // Centrage Vertical
-    if (cote === 'left' || cote === 'right') {
-        debug && console.log(`[popover] Centrage vertical`);
-        posInit.top = posCont.height / 2 - dimsPop.height / 2;
-    }
-    
-    /*----------------------------------
-    - CORRECTION
-    ----------------------------------*/
-    let frontieres;
-    if (frame) { // Via conteneur spécifique
-        const posFrame = frame.getBoundingClientRect();
-        frontieres = {
-            top: Math.max(posFrame.top , 0) + margeY,
-            left: Math.max(posFrame.left, 0) + margeX,
-            right: Math.min(posFrame.right, window.innerWidth) - margeX,
-            bottom: Math.min(posFrame.bottom, window.innerHeight) - margeY
-        }
-    } else // Via fenêtre
-        frontieres = {
-            top: margeY,
-            left: margeX,
-            right: window.innerWidth - margeX,
-            bottom: window.innerHeight - margeY
+    // Helper function to check if there's enough space
+    const canFit = (side: TSide) => {
+        switch (side) {
+            case "top":
+                return space.top >= popoverDims.height;
+            case "bottom":
+                return space.bottom >= popoverDims.height;
+            case "left":
+                return space.left >= popoverDims.width;
+            case "right":
+                return space.right >= popoverDims.width;
         }
-
-    // Position finale de la popover
-    let posFinale: {
-        top: string,
-        left: string,
-        bottom: string,
-        right: string
-    } = {
-        top: 'auto',
-        left: 'auto',
-        right: 'auto',
-        bottom: 'auto'
     };
 
-    debug && console.log(`[popover] Position initiale =`, posInit, `Frontières =`, frame, '=', frontieres);
-
-    // Extrémité Haut
-    if (posCont.top + posInit.top < frontieres.top) {
-        posFinale.top = (frontieres.top - posCont.top) + 'px';
-        debug && console.log(`[popover] Top: Extremité haut`, posFinale.top);
-    // Extrémité Bas
-    } else if (posCont.top + posInit.top + dimsPop.height >= frontieres.bottom) {
-        posFinale.top = 'auto';
-        posFinale.bottom = (posCont.bottom - frontieres.bottom) + 'px';
-        debug && console.log(`[popover] Top: Extremité bas`, posFinale.bottom);
-    } else {
-        posFinale.top = posInit.top + 'px';
-        debug && console.log(`[popover] Top: Conservation`, posFinale.top);
+    // Try preferred side first, then fallback
+    let side: TSide = preferredSide;
+    if (!canFit(preferredSide)) {
+        if (canFit("top")) side = "top";
+        else if (canFit("bottom")) side = "bottom";
+        else if (canFit("left")) side = "left";
+        else if (canFit("right")) side = "right";
     }
 
-    // Extrémité Gauche
-    if (posCont.left + posInit.left < frontieres.left) {
-        posFinale.left = (frontieres.left - posCont.left) + 'px';
-        debug && console.log(`[popover] Left: Extremité gauche`, posFinale.left);
-    // Extrémité Droite
-    } else if (posCont.left + posInit.left + dimsPop.width >= frontieres.right) {
-        posFinale.left = 'auto';
-        posFinale.right = (posCont.right - frontieres.right) + 'px';
-        debug && console.log(`[popover] Left: Extremité droite`, posFinale.right);
-    } else {
-        posFinale.left = posInit.left + 'px';
-        debug && console.log(`[popover] Left: Conservation`, posFinale.left);
+    // Calculate position based on side
+    const position = { top: 0, left: 0 };
+    if (side === "top") {
+        position.top =
+            containerRect.top -
+            frameRect.top -
+            popoverDims.height +
+            frameOffsetTop;
+        position.left =
+            containerRect.left -
+            frameRect.left +
+            (containerRect.width - popoverDims.width) / 2 +
+            frameOffsetLeft;
+    } else if (side === "bottom") {
+        position.top =
+            containerRect.bottom -
+            frameRect.top +
+            frameOffsetTop;
+        position.left =
+            containerRect.left -
+            frameRect.left +
+            (containerRect.width - popoverDims.width) / 2 +
+            frameOffsetLeft;
+    } else if (side === "left") {
+        position.top =
+            containerRect.top -
+            frameRect.top +
+            (containerRect.height - popoverDims.height) / 2 +
+            frameOffsetTop;
+        position.left =
+            containerRect.left -
+            frameRect.left -
+            popoverDims.width +
+            frameOffsetLeft;
+    } else if (side === "right") {
+        position.top =
+            containerRect.top -
+            frameRect.top +
+            (containerRect.height - popoverDims.height) / 2 +
+            frameOffsetTop;
+        position.left =
+            containerRect.right -
+            frameRect.left +
+            frameOffsetLeft;
     }
 
-    debug && console.log({ posInit, dimsPop, frontieres }, { posFinale });
-
+    // Adjust for overflow
+    position.top = Math.max(
+        frameOffsetTop,
+        Math.min(frameRect.height - popoverDims.height + frameOffsetTop, position.top)
+    );
+    position.left = Math.max(
+        frameOffsetLeft,
+        Math.min(frameRect.width - popoverDims.width + frameOffsetLeft, position.left)
+    );
+
+    // Return result
     return {
-        css: posFinale,
-        cote: cote
+        side,
+        css: {
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+        },
     };
 }

package/src/client/components/containers/Popover/index.tsx

@@ -47,7 +47,7 @@ export default (props: Props) => {
 
         content, state, width, disable,
 
-        frame, side,
+        frame, side = 'bottom',
 
         children, tag,
 
@@ -72,7 +72,6 @@ export default (props: Props) => {
                 getPosition(
                     refCont.current, 
                     refContent.current, 
-                    false, 
                     side, 
                     /*frame || document.getElementById('page') || */undefined
                 )
@@ -137,7 +136,7 @@ export default (props: Props) => {
     return (
         <Tag
             style={{
-                position: 'relative',
+                //position: 'relative',
                 ...(shown ? {
                     zIndex: 11
                 } : {})

package/src/client/components/containers/Popover/popover.less

@@ -4,6 +4,7 @@
 // contPopover doit envelopper le bouton sans aucun espace
 .contPopover {
     display: inline-block;
+    position: static !important; // Allow popvers to go outside of the container which cna be potentially scrollable
 
     > .btn {
         width: 100%;
@@ -32,16 +33,10 @@
 
     overflow: auto;
 
-    &.pos_bottom { transform: translateY(-1.65rem); }
-    &.pos_top { transform: translateY(1.65rem); }
-    &.pos_left { transform: translateX(1.65rem); }
-    &.pos_right { transform: translateX(-1.65rem); }
-
     top: 100%;
     max-height: 40rem;
 
     min-width: 15rem;
-    width: 100%;
     max-width: 90vw;
 
     & {

package/src/client/components/inputv3/base.less

@@ -16,6 +16,7 @@
     flex-direction: column;
     gap: 0.5em;
     align-items: stretch;
+    position: relative;
 
     > label {
         font-weight: 700;

package/src/server/services/router/http/index.ts

@@ -162,16 +162,12 @@ export default class HttpServer {
 
             // Décodage des données post
             express.json({
-
-                // NOTE: Encore nécessaire ? Les webhooks stripe & bitgo n'étant plus utilisés
-                // Because Stripe needs the raw body, we compute it but only when hitting the Stripe callback URL.
-                /*verify: function (req: Request, res: Response, buf: Buffer) {
-                    if (req.originalUrl.startsWith('/api/paiement/impact/stripe'))
-                        //req.rawBody = buf.toString();
-                },*/
-
                 // TODO: prendre en considération les upload de fichiers
-                limit: '2mb'
+                limit: '2mb',
+                verify: (req, res, buf, encoding) => {
+                    // Store the raw request body so we can access it later
+                    req.rawBody = buf;
+                }
             }),
 
             // Permet de receptionner les données multipart (req.body + req.files)

package/src/server/services/router/index.ts

@@ -414,22 +414,6 @@ declare type Routes = {
         // Hook
         await this.runHook('request', request);
 
-        // TODO: move to tracking
-        /*const now = new Date;
-
-        // Identify Guest & create log entry
-        const username = request.user?.name;
-        let clientId: string = request.cookies.clientId;
-        const newClient = !(typeof clientId === 'string' && clientId.length <= 39)
-        if (newClient) {
-            clientId = uuid();
-            res.cookie('clientId', clientId, { expires: new Date(253402300000000) }); // Never expires
-        }
-
-        const keepLogs = request.ip !== '86.76.176.80';
-        if (!keepLogs)  
-            requestId = 'admin';*/
-
         // Create request context so we can access request context across all the request-triggered libs
         context.run({ channelType: 'request', channelId: requestId }, async () => {
 
@@ -454,34 +438,7 @@ declare type Routes = {
             res.header(response.headers);
             // Data
             res.send(response.data);
-
-            // TODO: move to tracking
-            /*if (newClient)
-                console.client({
-                    id: clientId,
-                    ip: request.ip,
-                    user: username,
-                    device: request.deviceString(),
-                    meet: now,
-                    activity: now,
-                });
-
-            console.request({
-
-                id: requestId,
-                date: now,
-
-                method: request.method,
-                url: request.path,
-                data: request.data,
-
-                ip: request.ip,
-                user: request.user?.name,
-                clientId,
-
-                statusCode: response.statusCode,
-                time: Date.now() - now.valueOf()
-            });*/
+            
         });
     }