5htp-core 0.5.0-2 → 0.5.0-6

package/package.json

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

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

@@ -1,8 +1,6 @@
 @import (reference) '@/client/assets/vars.less';
 
 // Utils
-@import './utils/sizing.less';
-@import './utils/spacing.less';
 @import (reference) "./theme.less";
 
 // Apply the theme class
@@ -120,4 +118,8 @@ body {
 // Import components style (always after variables declaration)
 @import "@client/assets/css/components.less";
 
+// Make utilisy classes priority compared to components
+@import './utils/sizing.less';
+@import './utils/spacing.less';
+
 @import '@/client/assets/theme.less';

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

@@ -87,6 +87,10 @@ i.logo {
     border: none; // For img``
 
     background-color: var(--cBg);
+
+    &.circle {
+        border-radius: 50%;
+    }
 }
 
 i.logo {

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

@@ -89,7 +89,7 @@ p, .p {
 .txt-base { color: var(--cTxtBase); }
 .txt-contenu { color: var(--cTxtPost); }
 
-strong, 
+//strong, 
 .active,
 .txtImportant {
     color: var(--cTxtImportant);

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

@@ -20,9 +20,10 @@ h3 {
         color: var(--cTxtAccent);
         font-weight: inherit;
 
-        .bg.img & {
-            color: var(--cTxtImportant);
-        }
+        // Targets the whte card inside bg images, which makes no sense
+        // .bg.img & {
+        //     color: var(--cTxtImportant);
+        // }
     }
 }
 

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

@@ -47,52 +47,52 @@
 
     // Fixes
     .w-@{taille1} { 
-        width: @taille1 * @sizingUnit; 
+        width: @taille1 * @sizingUnit !important; 
     }
     .h-@{taille1} { 
-        height: @taille1 * @sizingUnit; 
+        height: @taille1 * @sizingUnit !important; 
     }
 
     .row > .w-@{taille1},
     .col > .h-@{taille1} {
-        flex: 0 0 @taille1 * @sizingUnit;
+        flex: 0 0 @taille1 * @sizingUnit !important;
     }
 
     // Min - max
     .w-@{taille1}-a {
-        min-width: @taille1 * @sizingUnit;
+        min-width: @taille1 * @sizingUnit !important;
     }
 
     .w-a-@{taille1} {
-        max-width: @taille1 * @sizingUnit;
-        width: 100%; // We take the maximum space wecan
+        max-width: @taille1 * @sizingUnit !important;
+        width: 100% !important; // We take the maximum space wecan
     }
 
     .h-@{taille1}-a {
-        min-height: @taille1 * @sizingUnit;
+        min-height: @taille1 * @sizingUnit !important;
     }
 
     .h-a-@{taille1} {
-        max-height: @taille1 * @sizingUnit;
-        height: 100%; // We take the maximum space wecan
+        max-height: @taille1 * @sizingUnit !important;
+        height: 100% !important; // We take the maximum space wecan
     }
 
     // Ranges
     .taillesMax(@tailleMax2, @taille2: 0) when (@taille2 <= @tailleMax2) {
 
         .w-@{taille1}-@{taille2} {
-            min-width: @taille1 * @sizingUnit;
-            max-width: @taille2 * @sizingUnit;
-            width: 100%; // We take the maximum space wecan
+            min-width: @taille1 * @sizingUnit !important;
+            max-width: @taille2 * @sizingUnit !important;
+            width: 100% !important; // We take the maximum space wecan
 
             .row > & {
                 flex: 1;
             }
         }
         .h-@{taille1}-@{taille2} {
-            min-height: @taille1 * @sizingUnit;
-            max-height: @taille2 * @sizingUnit;
-            height: 100%; // We take the maximum space wecan
+            min-height: @taille1 * @sizingUnit !important;
+            max-height: @taille2 * @sizingUnit !important;
+            height: 100% !important; // We take the maximum space wecan
 
             .col > & {
                 flex: 1;

package/src/client/components/Dialog/Manager.tsx

@@ -179,9 +179,7 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
             
             if (!isToast)
                 render = (
-                    <div class="modal" onClick={e => 
-                        e.target.classList.contains('modal') && close(false)
-                    }>
+                    <div class="modal">
                         {render}
                     </div>
                 )

package/src/client/components/Form.ts

@@ -8,7 +8,7 @@ import React from 'react';
 // Core
 import { InputErrorSchema } from '@common/errors';
 import type { Schema } from '@common/validation';
-import type { TValidationResult } from '@common/validation/schema';
+import type { TValidationResult, TValidateOptions } from '@common/validation/schema';
 import useContext from '@/client/context';
 
 // Exports
@@ -36,19 +36,22 @@ export type Form<TFormData extends {} = {}> = {
     fields: FieldsAttrs<TFormData>,
     data: TFormData,
     options: TFormOptions<TFormData>,
+    backup?: Partial<TFormData>,
 
     // Actions
-    validate: (data: Partial<TFormData>) => TValidationResult<{}>,
-    set: (data: Partial<TFormData>) => void,
+    setBackup: (backup: Partial<TFormData>) => void,
+    validate: (data: Partial<TFormData>, validateAll?: boolean) => TValidationResult<{}>,
+    set: (data: Partial<TFormData>, merge?: boolean) => void,
     submit: (additionnalData?: Partial<TFormData>) => Promise<any>,
     
 } & FormState
 
-type FormState = {
+type FormState<TFormData extends {} = {}> = {
     isLoading: boolean,
     hasChanged: boolean,
     errorsCount: number,
     errors: { [fieldName: string]: string[] },
+    backup?: Partial<TFormData>,
 }
 
 /*----------------------------------
@@ -57,7 +60,7 @@ type FormState = {
 export default function useForm<TFormData extends {}>(
     schema: Schema<TFormData>,
     options: TFormOptions<TFormData> = {}
-): [ Form, FieldsAttrs<TFormData> ] {
+): [ Form<TFormData>, FieldsAttrs<TFormData> ] {
 
     const context = useContext();
 
@@ -65,11 +68,12 @@ export default function useForm<TFormData extends {}>(
     - INIT
     ----------------------------------*/
 
-    const [state, setState] = React.useState<FormState>({
-        hasChanged: options.data !== undefined,
+    const [state, setState] = React.useState<FormState<TFormData>>({
+        hasChanged: false,//options.data !== undefined,
         isLoading: false,
         errorsCount: 0,
-        errors: {}
+        errors: {},
+        backup: undefined
     });
 
     const initialData: Partial<TFormData> = options.data || {};
@@ -78,43 +82,54 @@ export default function useForm<TFormData extends {}>(
     const fields = React.useRef<FieldsAttrs<TFormData> | null>(null);
     const [data, setData] = React.useState< Partial<TFormData> >(initialData);
 
-    // Validate data when it changes
+    // When typed data changes
     React.useEffect(() => {
 
         // Validate
-        validate(data, false);
+        validate(data, { ignoreMissing: true });
 
         // Autosave
-        if (options.autoSave !== undefined) {
-
-            if (state.hasChanged)
-                saveLocally(data, options.autoSave.id);
-            else {
-                const autosaved = localStorage.getItem('form.' + options.autoSave.id);
-                if (autosaved !== null) {
-                    try {
-                        console.log('[form] Parse autosaved from json:', autosaved);
-                        setData( JSON.parse(autosaved) );
-                    } catch (error) {
-                        console.error('[form] Failed to decode autosaved data from json:', autosaved);
-                    }
+        if (options.autoSave !== undefined && state.hasChanged) {
+            saveLocally(data, options.autoSave.id);
+        }
+
+    }, [data]);
+
+    // On start
+    React.useEffect(() => {
+
+        // Restore backup
+        if (options.autoSave !== undefined && !state.hasChanged) {
+
+            const autosaved = localStorage.getItem('form.' + options.autoSave.id);
+            if (autosaved !== null) {
+                try {
+                    console.log('[form] Parse autosaved from json:', autosaved);
+                    setState(c => ({
+                        ...c,
+                        backup: JSON.parse(autosaved)
+                    }));
+                } catch (error) {
+                    console.error('[form] Failed to decode autosaved data from json:', autosaved);
                 }
             }
         }
 
-    }, [data]);
+    }, []);
 
     /*----------------------------------
     - ACTIONS
     ----------------------------------*/
-    const validate = (allData: Partial<TFormData> = data, validateAll: boolean = true) => {
+    const validate = (allData: Partial<TFormData> = data, opts: TValidateOptions<TFormData> = {}) => {
 
         const validated = schema.validateWithDetails(allData, allData, {}, {
             // Ignore the fields where the vlaue has not been changed
             //  if the validation was triggered via onChange
-            ignoreMissing: !validateAll,
+            ignoreMissing: false,
             // The list of fields we should only validate
-            only: options.autoValidateOnly
+            only: options.autoValidateOnly,
+            // Custom options
+            ...opts
         });
 
         // Update errors
@@ -224,19 +239,35 @@ export default function useForm<TFormData extends {}>(
     - EXPOSE
     ----------------------------------*/
 
-    const form = {
+    const form: Form<TFormData> = {
+
         fields: fields.current,
         data,
-        set: data => {
-            setState(current => ({
+        set: (data, merge = true) => {
+
+            setState( current => ({
                 ...current,
                 hasChanged: true
             }));
-            setData(data);
+
+            setData( merge 
+                ? c => ({ ...c, ...data }) 
+                : data
+            );
         },
+
         validate,
         submit,
         options,
+
+        setBackup: (backup: Partial<TFormData>) => {
+            
+            setState(c => ({ ...c, backup }));
+
+            if (options.autoSave)
+                localStorage.setItem('form.' + options.autoSave.id, JSON.stringify(backup));
+        },
+
         ...state
     }
 

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

@@ -249,7 +249,7 @@ export default (props: Props) => {
 
                     {Search}  
 
-                    <ul class="row al-left wrap sp-05 scrollable mgt-1" style={{
+                    <ul class="row al-left wrap sp-05 scrollable" style={{
                         maxHeight: '30vh',
                     }}>
                         {selectedItems.map( choice => (

package/src/client/components/button.tsx

@@ -171,35 +171,36 @@ export default ({
     // Render
     if ('link' in props || Tag === "a") {
 
-        props.href = props.link;
-        
-        // External = open in new tab by default
-        if (props.href && (props.href[0] !== '/' || props.href.startsWith('//')))
-            props.target = '_blank';
-
-        if (props.target === undefined) {
+        // Link (only if enabled)
+        if (!disabled) {
+
+            props.href = props.link;
+            
+            // External = open in new tab by default
+            if (props.href && (props.href[0] !== '/' || props.href.startsWith('//')))
+                props.target = '_blank';
+        }
 
-            if (nav) {
+        // Nav
+        if (nav && props.target === undefined) {
 
-                const checkIfCurrentUrl = (url: string) => 
-                    isCurrentUrl(url, props.link, nav === 'exact');
+            const checkIfCurrentUrl = (url: string) => 
+                isCurrentUrl(url, props.link, nav === 'exact');
 
-                React.useEffect(() => {
+            React.useEffect(() => {
 
-                    // Init
-                    if (checkIfCurrentUrl(ctx.request.path))
-                        setIsActive(true);
+                // Init
+                if (checkIfCurrentUrl(ctx.request.path))
+                    setIsActive(true);
 
-                    // On location change
-                    return history?.listen(({ location }) => {
+                // On location change
+                return history?.listen(({ location }) => {
 
-                        setIsActive( checkIfCurrentUrl(location.pathname) );
-    
-                    })
+                    setIsActive( checkIfCurrentUrl(location.pathname) );
 
-                }, []);
-            }
+                })
 
+            }, []);
         }
 
         Tag = 'a';

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/inputv3/Rte/Editor.tsx

@@ -185,7 +185,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/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, ...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/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

@@ -162,6 +162,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;
@@ -229,6 +235,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/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/index.ts

@@ -438,7 +438,7 @@ declare type Routes = {
             res.header(response.headers);
             // Data
             res.send(response.data);
-            
+
         });
     }
 
@@ -558,9 +558,14 @@ declare type Routes = {
             if (this.app.env.profile === 'prod')
                 e.message = "We encountered an internal error, and our team has just been notified. Sorry for the inconvenience.";
 
-        // Pour déboguer les erreurs HTTP
-        } else if (code !== 404 && this.app.env.profile === "dev")
-            console.warn(e);
+        } else {
+
+            // For debugging HTTP errors
+            if (this.app.env.profile === "dev")
+                console.warn(e);
+
+            await this.app.runHook('error.' + code, e, request);
+        }
 
         // Return error based on the request format
         if (request.accepts("html")) {

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

@@ -135,6 +135,17 @@ export default class ServerRequest<
         return locale ? locale.toUpperCase() : 'EN'
     }
 
+    public cookie( key: string, consume: boolean = false ) {
+
+        const value = this.req.cookies[ key ];
+
+        if (consume)
+            this.res.clearCookie(key);
+
+        return value;
+
+    }
+
     /*----------------------------------
    - TESTS
    ----------------------------------*/

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

@@ -81,6 +81,7 @@ export default class ServerResponse<
     public statusCode: number = 200;
     public headers: {[cle: string]: string} = {}
     public cookie: express.Response["cookie"];
+    public clearCookie: express.Response["clearCookie"];
 
     // If data was provided by at lead one controller
     public wasProvided = false;
@@ -90,6 +91,7 @@ export default class ServerResponse<
         super(request);
 
         this.cookie = this.request.res.cookie.bind(this.request.res);
+        this.clearCookie = this.request.res.clearCookie.bind(this.request.res);
 
         this.router = request.router;
         this.app = this.router.app;

package/src/server/services/router/response/page/index.tsx

@@ -120,8 +120,12 @@ export default class ServerPage<TRouter extends Router = Router> extends PageRes
 
     private buildMetas() {
 
+        const shouldIndex = this.context.response.statusCode < 300;
+
         const metas = {
 
+            robots: shouldIndex ? 'index' : 'noindex',
+
             'og:type': 'website',
             'og:locale': this.app.identity.locale,
             'og:site_name': this.app.identity.web.title,