5htp-core 0.5.0 → 0.5.1

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

@@ -1,45 +1,50 @@
 export type TSide = "left" | "top" | "right" | "bottom";
 
-const debug = false;
+// Margin from container
+const containerMargin = 8;
+
+// Margin from the screen/edges
+const screenMargin = 10;
 
 export type TPosition = ReturnType<typeof corrigerPosition>;
 
 export default function corrigerPosition(
     container: HTMLElement, // button
-    popover: HTMLElement, // popover
+    popover: HTMLElement,   // popover
     preferredSide: TSide = "bottom",
-    frame?: HTMLElement // body
+    frame?: HTMLElement | null // body or closest positioned ancestor
 ) {
-    // Dimensions and bounding rectangles
-    const popoverDims = { width: popover.offsetWidth, height: popover.offsetHeight };
+    // Dimensions
+    const popoverDims = {
+        width: popover.offsetWidth,
+        height: popover.offsetHeight,
+    };
     const containerRect = container.getBoundingClientRect();
 
-    // Find the frame if not provided
+    // Find frame if not provided
     if (!frame) {
-        // Find the closest relative-positioned parent
+        // Find the closest relative-positioned or sticky-positioned parent
         frame = container.parentElement;
         while (frame && !["relative", "sticky"].includes(getComputedStyle(frame).position)) {
             frame = frame.parentElement;
         }
-
         if (!frame) frame = document.body;
     }
 
-    if (debug) console.log("frame", frame);
-
     const frameRect = frame.getBoundingClientRect();
+    const frameContRect = document.body.getBoundingClientRect();
     const frameOffsetTop = frame.scrollTop;
     const frameOffsetLeft = frame.scrollLeft;
 
-    // Calculate available space in each direction relative to the frame
+    // Calculate available space (relative to the document body) around the container
     const space = {
-        top: containerRect.top - frameRect.top,
-        bottom: frameRect.bottom - containerRect.bottom,
-        left: containerRect.left - frameRect.left,
-        right: frameRect.right - containerRect.right,
+        top: containerRect.top - frameContRect.top,
+        bottom: frameContRect.bottom - containerRect.bottom,
+        left: containerRect.left - frameContRect.left,
+        right: frameContRect.right - containerRect.right,
     };
 
-    // Helper function to check if there's enough space
+    // Helper to check if the popover can fit on a given side without clipping
     const canFit = (side: TSide) => {
         switch (side) {
             case "top":
@@ -53,7 +58,7 @@ export default function corrigerPosition(
         }
     };
 
-    // Try preferred side first, then fallback
+    // Start with the preferred side; if it doesn't fit, pick the first side that fits
     let side: TSide = preferredSide;
     if (!canFit(preferredSide)) {
         if (canFit("top")) side = "top";
@@ -62,14 +67,17 @@ export default function corrigerPosition(
         else if (canFit("right")) side = "right";
     }
 
-    // Calculate position based on side
+    // Calculate initial position (without screen-margin clamping)
     const position = { top: 0, left: 0 };
+
     if (side === "top") {
         position.top =
             containerRect.top -
             frameRect.top -
             popoverDims.height +
-            frameOffsetTop;
+            frameOffsetTop -
+            containerMargin; // gap above container
+
         position.left =
             containerRect.left -
             frameRect.left +
@@ -79,7 +87,9 @@ export default function corrigerPosition(
         position.top =
             containerRect.bottom -
             frameRect.top +
-            frameOffsetTop;
+            frameOffsetTop +
+            containerMargin; // gap below container
+
         position.left =
             containerRect.left -
             frameRect.left +
@@ -91,34 +101,44 @@ export default function corrigerPosition(
             frameRect.top +
             (containerRect.height - popoverDims.height) / 2 +
             frameOffsetTop;
+
         position.left =
             containerRect.left -
             frameRect.left -
             popoverDims.width +
-            frameOffsetLeft;
+            frameOffsetLeft -
+            containerMargin; // gap to the left of container
     } else if (side === "right") {
         position.top =
             containerRect.top -
             frameRect.top +
             (containerRect.height - popoverDims.height) / 2 +
             frameOffsetTop;
+
         position.left =
             containerRect.right -
             frameRect.left +
-            frameOffsetLeft;
+            frameOffsetLeft +
+            containerMargin; // gap to the right of container
     }
 
-    // Adjust for overflow
+    // Clamp the final position to ensure a screenMargin from edges
     position.top = Math.max(
-        frameOffsetTop,
-        Math.min(frameRect.height - popoverDims.height + frameOffsetTop, position.top)
+        frameOffsetTop + screenMargin,
+        Math.min(
+            frameContRect.height - popoverDims.height + frameOffsetTop - screenMargin,
+            position.top
+        )
     );
     position.left = Math.max(
-        frameOffsetLeft,
-        Math.min(frameRect.width - popoverDims.width + frameOffsetLeft, position.left)
+        frameOffsetLeft + screenMargin,
+        Math.min(
+            frameContRect.width - popoverDims.width + frameOffsetLeft - screenMargin,
+            position.left
+        )
     );
 
-    // Return result
+    // Return the final side and position
     return {
         side,
         css: {

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

@@ -77,15 +77,21 @@ export default (props: Props) => {
                 )
             );
 
-            // Autofocus elements
-            focusContent( refContent.current );
-
             // Close when the user clicks elsewere tha the popover
             return blurable([ refCont.current, () => show(false) ])
         }
 
     }, [shown]);
 
+    React.useEffect(() => {
+        if (position !== undefined) {
+
+            // Autofocus elements once the final position has been set
+            focusContent( refContent.current );
+
+        }
+    }, [position]);
+
     /*----------------------------------
     - ATTRIBUTES
     ----------------------------------*/

package/src/client/components/inputv3/Rte/Editor.tsx

@@ -84,10 +84,6 @@ export const EMPTY_STATE = '{"root":{"children":[{"children":[],"direction":null
 - TYPES
 ----------------------------------*/
 
-export type Props = {
-    preview?: boolean,
-}
-
 const ValueControlPlugin = ({ props, value }) => {
 
     const [editor] = useLexicalComposerContext();
@@ -111,6 +107,69 @@ export default ({ value, setValue, props }: {
     setValue: (value: string) => void,
     props: TRteProps
 }) => {
+    
+    let {
+        // Decoration
+        title,
+        // Actions
+        preview = true
+    } = props;
+
+    /*----------------------------------
+    - PREVIEW
+    ----------------------------------*/
+
+    const [isPreview, setIsPreview] = React.useState(preview);
+    const [html, setHTML] = React.useState(null);
+
+    React.useEffect(() => {
+        if (isPreview) {
+            renderPreview(value).then(setHTML);
+        }
+    }, [value, isPreview]);
+
+    // When isPreview changes, close the active editor
+    React.useEffect(() => {
+        if (!isPreview) {
+
+            // Close active editor
+            if (RichEditorUtils.active && RichEditorUtils.active?.title !== title)
+                RichEditorUtils.active.close();
+
+            // Set active Editor
+            RichEditorUtils.active = {
+                title,
+                close: () => preview ? setIsPreview(true) : null
+            }
+
+        }
+    }, [isPreview]);
+
+    const renderPreview = async (value: {} | undefined) => {
+
+        if (!value)
+            return '';
+
+        if (typeof document === 'undefined')
+            throw new Error("HTML preview disabled in server side.");
+
+        const html = await RichEditorUtils.jsonToHtml(value);
+
+        return html;
+    }
+
+    if (isPreview)
+        return (
+            html === null ? (
+                <div class="col al-center h-2">
+                    <i src="spin" />
+                </div>
+            ) : (
+                <div class="preview reading h-1-4 scrollable col clickable" 
+                    onClick={() => setIsPreview(false)}
+                    dangerouslySetInnerHTML={{ __html: html }} />
+            )
+        )
 
     /*----------------------------------
     - INIT
@@ -185,7 +244,7 @@ export default ({ value, setValue, props }: {
                 <div className="editor-inner">
                     <RichTextPlugin
                         contentEditable={
-                            <div className="editor pdh-2" ref={onRef}>
+                            <div className="editor" ref={onRef}>
                                 <ContentEditable
                                     className="editor-input reading col"
                                     aria-placeholder={"Type text here ..."}

package/src/client/components/inputv3/Rte/ToolbarPlugin/BlockFormat.tsx

@@ -206,7 +206,7 @@ export default function BlockFormatDropDown({
 
     return (
         <DropDown disabled={disabled} icon={currentBlockType ? currentBlockType.icon : 'question'} size="s"
-            label={currentBlockType ? currentBlockType.label : 'Unknown Block Type'}
+            //label={currentBlockType ? currentBlockType.label : 'Unknown Block Type'}
             popover={{ tag: 'li' }}
         >
             {blockTypes.map((block) => (

package/src/client/components/inputv3/Rte/index.tsx

@@ -21,6 +21,7 @@ import './style.less';
 
 export type Props = {
     preview?: boolean,
+    title: string,
 } 
 
 /*----------------------------------
@@ -28,22 +29,14 @@ export type Props = {
 ----------------------------------*/
 export default (props: Props & InputBaseProps<string>) => {
 
-    let {
-        // Decoration
-        required, size, title, className = '',
-        // State
-        errors,
-        // Actions
-        preview = true
-    } = props;
+    let { className = '' } = props;
 
     /*----------------------------------
     - INIT
     ----------------------------------*/
 
     const [Editor, setEditor] = React.useState<{ default: typeof TEditor }>(null);
-    const [isPreview, setIsPreview] = React.useState(preview);
-    const [html, setHTML] = React.useState(null);
+
     const [{ value }, setValue] = useInput(props, undefined, true);
 
     className += ' input rte';
@@ -53,46 +46,13 @@ export default (props: Props & InputBaseProps<string>) => {
     ----------------------------------*/
 
     React.useEffect(() => {
-        if (isPreview) {
-            renderPreview(value).then(setHTML);
-        }
-    }, [value, isPreview]);
-
-    // When isPreview changes, close the active editor
-    React.useEffect(() => {
-        if (!isPreview) {
-
-            // Close active editor
-            if (RichEditorUtils.active && RichEditorUtils.active?.title !== title)
-                RichEditorUtils.active.close();
-
-            // Set active Editor
-            RichEditorUtils.active = {
-                title,
-                close: () => preview ? setIsPreview(true) : null
-            }
+        if (!Editor) {
 
             // Load editor component if not alreayd done
             // We lazy load since it's heavy and needs to be loade donly on client side
-            if (!Editor) {
-                import('./Editor').then(setEditor);
-            }
-
+            import('./Editor').then(setEditor);
         }
-    }, [isPreview]);
-
-    const renderPreview = async (value: {} | undefined) => {
-
-        if (!value)
-            return '';
-
-        if (typeof document === 'undefined')
-            throw new Error("HTML preview disabled in server side.");
-
-        const html = await RichEditorUtils.jsonToHtml(value);
-
-        return html;
-    }
+    }, []);
 
     /*----------------------------------
     - RENDER
@@ -101,40 +61,15 @@ export default (props: Props & InputBaseProps<string>) => {
         <InputWrapper {...props}>
             <div class={className}>
 
-                {isPreview ? (
+                {Editor === null ? (
 
-                    html === null ? (
-                        <div class="col al-center h-2">
-                            <i src="spin" />
-                        </div>
-                    ) : (
-                        <div class="preview reading h-1-4 scrollable col clickable" 
-                            onClick={() => setIsPreview(false)}
-                            dangerouslySetInnerHTML={{ __html: html }} />
-                    )
+                    <div class="col al-center h-2">
+                        <i src="spin" />
+                    </div>
 
-                ) : Editor !== null && (
+                ) : (
                     <Editor.default value={value} setValue={setValue} props={props} />
                 )}
-
-                {/* <Tag {...fieldProps}
-
-                    placeholder={props.title}
-
-                    // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
-                    ref={refInput}
-                    value={value}
-                    onFocus={() => setState({ focus: true })}
-                    onBlur={() => setState({ focus: false })}
-                    onChange={(e) => updateValue(e.target.value)}
-                    onKeyDown={(e: KeyboardEvent) => {
-
-                        if (onPressEnter && e.key === 'Enter' && value !== undefined) {
-                            commitValue();
-                            onPressEnter(value)
-                        }
-                    }}
-                /> */}
             </div>
         </InputWrapper>
     )

package/src/client/components/inputv3/Rte/plugins/DraggableBlockPlugin/index.css

@@ -4,7 +4,7 @@
     cursor: grab;
     opacity: 0;
     position: absolute;
-    left: 0;
+    left: -20px;
     top: 0;
     will-change: transform;
 }

package/src/client/components/inputv3/Rte/style.less

@@ -2,31 +2,7 @@
 
     .preview {
         position: relative;
-
-        &:before {
-
-            content: 'Click here to edit';
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-
-            background: fade(#FFF, 50%);
-            pointer-events: none;
-            z-index: 1;
-            opacity: 0;
-            transition: all 0.3s linear;
-        }
-
-        &:hover:before {
-           opacity: 1;
-        }
+        cursor: text;
     }
 
     .other h2 {

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

@@ -41,7 +41,7 @@ export type TInputState<TValue> = {
 - HOOKS
 ----------------------------------*/
 export function useInput<TValue>(
-    { value: externalValue, onChange, ...otherProps }: InputBaseProps<TValue>, 
+    { value: externalValue, onChange, className, hint, ...otherProps }: InputBaseProps<TValue>, 
     defaultValue: TValue,
     autoCommit: boolean = false
 ): [

package/src/client/components/inputv3/index.tsx

@@ -173,7 +173,13 @@ export default (props: Props & InputBaseProps<string> & TInputElementProps) => {
     ----------------------------------*/
     return (
         <InputWrapper {...props}>
-            <div class={className} onClick={() => refInput.current?.focus()}>
+            <div class={className} onClick={(e) => {
+
+                const shouldFocus = props.onClick ? props.onClick() !== false : true;
+                if (shouldFocus)
+                    refInput.current?.focus()
+
+            }}>
 
                 {prefix}
 

package/src/client/services/router/components/router.tsx

@@ -147,12 +147,12 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
             if (newLayout && curLayout && newLayout.path !== curLayout.path) {
 
                 // TEMPORARY FIX: reload everything when we change layout
-                //  Because layout can have a different theme
+                //  Because layout can have a different CSS theme
                 //  But when we call setLayout, the style of the previous layout are still oaded and applied
                 //  Find a way to unload the  previous layout / page resources before to load the new one
                 console.log(LogPrefix, `Changing layout. Before:`, curLayout, 'New layout:', newLayout);
-                window.location.replace( request ? request.url : location.href );
-                return { ...page }
+                window.location.replace( request ? request.url : window.location.href );
+                return page; // Don't spread since it's an instance
 
                 context.app.setLayout(newLayout);
             }
@@ -191,6 +191,7 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
         // Reset scroll
         window.scrollTo(0, 0);
         // Should be called AFTER rendering the page (so after the state change)
+        console.log("CHANGE PAGE", currentPage);
         currentPage?.updateClient();
         // Scroll to the selected content via url hash
         restoreScroll(currentPage);

package/src/client/services/router/index.tsx

@@ -124,7 +124,7 @@ export type TRoutesLoaders = {
 
 export type THookCallback<TRouter extends ClientRouter> = (request: ClientRequest<TRouter>) => void;
 
-type THookName = 'page.change' | 'page.changed'
+type THookName = 'page.change' | 'page.changed' | 'page.rendered'
 
 type Config<TAdditionnalContext extends {} = {}> = {
     preload: string[], // List of globs
@@ -428,6 +428,7 @@ export default class ClientRouter<
 
             console.log(`Render complete`);
 
+            this.runHook('page.rendered', request);
         });
     }
 

package/src/client/utils/dom.ts

@@ -71,7 +71,7 @@ export const focusContent = ( container: HTMLElement ) => {
 
     const toFocus = container.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement>(
         'input, textarea, button.btn.primary, footer > button.btn'
-    ) || container;
+    ) || container;  // Is it useful ? Creating unwanted scroll issue on showing popover
 
     toFocus?.focus();
 }

package/src/common/errors/index.tsx

@@ -17,9 +17,13 @@ type TJsonError = {
     message: string,
     // Form fields
     errors?: TListeErreursSaisie
-} & TDetailsErreur
+} & TErrorDetails
 
-type TDetailsErreur = {
+type TErrorDetails = {
+    // Allow to identify the error catched (ex: displaying custop content, running custom actions, ...)
+    id?: string,
+    data?: {},
+    // For debugging
     stack?: string,
     origin?: string,
 }
@@ -66,13 +70,13 @@ export abstract class CoreError extends Error {
     public abstract http: number;
     public title: string = "Uh Oh ...";
     public message: string;
-    public details: TDetailsErreur = {};
+    public details: TErrorDetails = {};
 
     // Note: On ne le redéfini pas ici, car déjà présent dans Error
     //      La redéfinition reset la valeur du stacktrace
     //public stack?: string;
 
-    public constructor(message?: string, details?: TDetailsErreur) {
+    public constructor(message?: string, details?: TErrorDetails) {
 
         super(message);
 
@@ -120,7 +124,7 @@ export class InputErrorSchema extends CoreError {
         return chaines.join('; ');
     }
 
-    public constructor( public errors: TListeErreursSaisie, details?: TDetailsErreur) {
+    public constructor( public errors: TListeErreursSaisie, details?: TErrorDetails) {
 
         super( InputErrorSchema.listeToString(errors), details );
 
@@ -162,6 +166,12 @@ export class NotFound extends CoreError {
     public static msgDefaut = "The resource you asked for was not found.";
 }
 
+export class RateLimit extends CoreError {
+    public http = 429;
+    public title = "You're going too fast";
+    public static msgDefaut = "Please slow down a bit and retry again later.";
+}
+
 export class Anomaly extends CoreError {
 
     public http = 500;
@@ -193,7 +203,7 @@ export class NetworkError extends Error {
 export const viaHttpCode = (
     code: number, 
     message: string, 
-    details?: TDetailsErreur
+    details?: TErrorDetails
 ): CoreError => {
     return fromJson({
         code,
@@ -229,6 +239,8 @@ export const fromJson = ({ code, message, ...details }: TJsonError) => {
 
         case 404: return new NotFound( message, details );
 
+        case 429: return new RateLimit( message, details );
+
         default: return new Anomaly( message, details );
     }
 

package/src/common/router/index.ts

@@ -78,7 +78,9 @@ export type TRouteOptions = {
     // Resolving
     domain?: string,
     accept?: string,
+    raw?: boolean, // true to return raw data
     auth?: TUserRole | boolean,
+    canonicalParams?: string[],
 
     // Rendering
     static?: boolean,

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

@@ -43,15 +43,6 @@ export type TConfig = {
         key: string,
         expiration: string,
     },
-    google?: {
-        web: {
-            clientId: string,
-            secret: string,
-        },
-        android: {
-            clientId: string
-        }
-    }
 }
 
 export type THooks = {

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

@@ -143,7 +143,7 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
         query.then = (cb: (data: any) => void) => query().then(cb);
 
         query.first = <TRowData extends TObjetDonnees = {}>(opts: TSelectQueryOptions = {}) => this.first<TRowData>(string, opts);
-        query.firstOrFail = (message?: string, opts: TQueryOptions = {}) => this.firstOrFail<TRowData>(string, message, opts);
+        query.firstOrFail = (message: string, opts: TQueryOptions = {}) => this.firstOrFail<TRowData>(string, message, opts);
 
         query.value = <TValue extends any = number>(opts: TQueryOptions = {}) => this.selectVal<TValue>(string, opts);
         
@@ -283,7 +283,7 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
             return resultatRequetes[0] || null;
         });
 
-    public firstOrFail = <TRowData extends TObjetDonnees = {}>(query: string, message?: string, opts: TSelectQueryOptions = {}): Promise<TRowData> =>
+    public firstOrFail = <TRowData extends TObjetDonnees = {}>(query: string, message: string, opts: TSelectQueryOptions = {}): Promise<TRowData> =>
         this.select(query, opts).then((resultatRequetes: any) => {
 
             if (resultatRequetes.length === 0)

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)