5htp-core 0.6.0 → 0.6.1

package/client/components/Select.tsx

@@ -22,7 +22,8 @@ import Popover, { Props as PopoverProps } from '@client/components/containers/Po
 ----------------------------------*/
 
 export type Props = SelectProps & InputBaseProps<ComboboxItem> & {
-    popoverProps?: PopoverProps
+    popoverProps?: PopoverProps,
+    buttonProps?: ButtonProps,
 }
 
 export type Choice = ComboboxItem;
@@ -63,7 +64,7 @@ export default (initProps: Props) => {
         onChange, value: current,
         required
     }, {
-        multiple, choices: initChoices, enableSearch, popoverProps,
+        multiple, choices: initChoices, enableSearch, popoverProps, buttonProps,
         ...props
     }] = useMantineInput<Props, string|number>(initProps);
 
@@ -95,7 +96,8 @@ export default (initProps: Props) => {
     /*----------------------------------
     - ACTIONS
     ----------------------------------*/
-
+    
+    // Load search results
     React.useEffect(() => {
 
         if (choicesViaFunc && opened) {
@@ -113,12 +115,16 @@ export default (initProps: Props) => {
 
     }, [
         opened,
-        search.keywords,
-        // When initChoices is a function, React considers it's always different
-        // It avoids the choices are fetched everytimle the parent component is re-rendered
-        typeof initChoices === 'function' ? true : initChoices
+        search.keywords
     ]);
 
+    // When initChoices is not a function and has changed
+    React.useEffect(() => {
+        if (!choicesViaFunc) {
+            setChoices(initChoices);
+        }
+    }, [initChoices]);
+
     /*----------------------------------
     - RENDER
     ----------------------------------*/
@@ -172,16 +178,22 @@ export default (initProps: Props) => {
                             <Button key={choice.value} 
                                 size="s"
                                 suffix={isSelected ? <i src="check" /> : null}
-                                onClick={() => onChange( multiple 
-                                    ? (isSelected 
-                                        ? current.filter(c => c.value !== choice.value)
-                                        : [...(current || []), choice]
-                                    )
-                                    : ((isSelected && !required) 
-                                        ? null 
-                                        : choice
+                                onClick={() => {
+                                    onChange( multiple 
+                                        ? (isSelected 
+                                            ? current.filter(c => c.value !== choice.value)
+                                            : [...(current || []), choice]
+                                        )
+                                        : ((isSelected && !required) 
+                                            ? null 
+                                            : choice
+                                        )
                                     )
-                                )}>
+
+                                    if (!multiple)
+                                        setOpened(false);
+                                    
+                                }}>
                                     {choice.label}
                             </Button>
                         )
@@ -189,6 +201,7 @@ export default (initProps: Props) => {
                 </div>
             )}>
                 <Button
+                    {...buttonProps}
                     prefix={(
                         (multiple && current?.length) ? (
                             <span class="badge bg info s">

package/client/components/Table/index.tsx

@@ -32,8 +32,7 @@ export type Props<TRow> = {
     empty?: ComponentChild | false,
 
     // Interactions
-    sort?: TSortOptions,
-    onSort?: (columnId: string | null, order: TSortOptions["order"]) => void,
+    sortState?: [TSortOptions, React.SetStateAction<TSortOptions>],
     onCellClick?: (row: TRow) => void,
 
     selection?: [TRow[], React.SetStateAction<TRow[]>],
@@ -57,7 +56,7 @@ type TSortOptions = {
 - COMPOSANTS
 ----------------------------------*/
 export default function Liste<TRow extends TDonneeInconnue>({
-    stickyHeader, onSort, sort: sorted,
+    stickyHeader, sortState,
     data: rows, setData, empty,
     onCellClick,
     selection: selectionState, maxSelection,
@@ -84,6 +83,23 @@ export default function Liste<TRow extends TDonneeInconnue>({
             </div>
         );
 
+    const sortBy = (columnId: string | null, defaultOrder: 'asc' | 'desc') => {
+
+        if (!sortState) return;
+
+        const [sort, setSort] = sortState;
+
+        if (columnId === sort.id) {
+            setSort({
+                id: columnId,
+                order: defaultOrder === 'asc' ? 'desc' : 'asc'
+            });
+        } else {
+            setSort({ columnId, order: defaultOrder });
+        }
+
+    }
+
     /*----------------------------------
     - RENDU COLONNES / LIGNES
     ----------------------------------*/
@@ -99,7 +115,7 @@ export default function Liste<TRow extends TDonneeInconnue>({
                 <td>
                     <Checkbox
                         id={"selectionner" + iDonnee}
-                        value={selection.current.some(s => s.id === row.id)}
+                        value={selection.current.some(s => s?.id === row?.id)}
                         onChange={(isSelected: boolean) => {
                             selection.set(current => isSelected
                                 // Ajoute
@@ -141,15 +157,15 @@ export default function Liste<TRow extends TDonneeInconnue>({
                 if (iDonnee === 0) {
 
                     const headerProps = { className: '', ...cellProps };
-                    const isCurrentlySorted = sort && sorted && sorted.id === sort.id;
-                    const isSortable = sort && onSort;
-                    if (isSortable) {
+                    const isCurrentlySorted = sort && sort.id === sort.id;
+                    const isSortable = sort;
+                    if (isSortable && sortState[1]) {
                         headerProps.className += ' clickable';
                         headerProps.onClick = () => {
                             if (isCurrentlySorted)
-                                onSort(null, sort.order);
+                                sortBy(null, sort.order);
                             else
-                                onSort(sort.id, sort.order);
+                                sortBy(sort.id, sort.order);
                         }
                     }
                     
@@ -203,7 +219,7 @@ export default function Liste<TRow extends TDonneeInconnue>({
                     render = JSON.stringify(cell);
 
                 return (
-                    <td class={classe} {...cellProps}>
+                    <td {...cellProps} className={classe}>
                         {render}
                     </td>
                 )
@@ -230,7 +246,7 @@ export default function Liste<TRow extends TDonneeInconnue>({
                                 <Checkbox
                                     value={selection.current.length >= rows.length}
                                     onChange={(status: boolean) => {
-                                        selection.set(status ? rows : []);
+                                        selection.set(status ? rows.filter(r => r?.id) : []);
                                     }}
                                 />
                             </th>

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

@@ -20,13 +20,16 @@ export type Props = JSX.HTMLAttributes<HTMLDivElement> & {
     id?: string,
 
     // Display
+    mode: 'hide' | 'remove',
     content?: ComponentChild | JSX.Element
     state?: [boolean, StateUpdater<boolean>],
     width?: number | string,
     disable?: boolean
+    
     // Position
     frame?: HTMLElement,
     side?: TSide,
+
     // Tag
     children: JSX.Element | [JSX.Element],
     tag?: string,
@@ -45,7 +48,7 @@ export default (props: Props) => {
     let {
         id,
 
-        content, state, width, disable,
+        mode = 'remove', content, state, width, disable,
 
         frame, side = 'bottom',
 
@@ -108,7 +111,7 @@ export default (props: Props) => {
     const Tag = tag || 'div';
 
     let renderedContent: ComponentChild;
-    if (active) {
+    if (active || mode === 'hide') {
         //content = typeof content === 'function' ? React.createElement(content) : content;
         renderedContent = React.cloneElement( 
             content, 
@@ -124,13 +127,24 @@ export default (props: Props) => {
 
                 style: {
                     ...(content.props.style || {}),
+
+                    ...(!active && mode === 'hide' ? {
+                        display: 'none'
+                    } : {}),
+
+                    // Positionning
                     ...(position ? {
                         top: position.css.top,
                         left: position.css.left,
                         right: position.css.right,
                         bottom: position.css.bottom,
-                    } : {}),
-                    ...(width !== undefined ? { width: typeof width === 'number' ? width + 'rem' : width } : {})
+                    } :  {}),
+
+                    ...(width !== undefined ? { 
+                        width: typeof width === 'number' 
+                            ? width + 'rem' 
+                            : width 
+                    } : {})
                 }
             }
         )
@@ -156,6 +170,9 @@ export default (props: Props) => {
             {React.cloneElement( children, {
                 onClick: (e) => {
                     show(isShown => !isShown);
+                    e.stopPropagation();
+                    e.preventDefault();
+                    return false;
                 }
             })}
 

package/client/components/index.ts

@@ -22,7 +22,9 @@ export { default as Date } from './Date';
 export { default as Select } from './Select';
 export { default as Checkbox } from './Checkbox';
 export { InputWrapper } from './utils';
-export { default as DropDown } from './DropDown';   
+export { default as DropDown } from './DropDown';  
+
+export { default as ConnectedInput } from './ConnectedInput';
 
 // Mantine
 export {
@@ -59,7 +61,7 @@ export {
     //Button,
     //Card,
     Center,
-    //Checkbox,
+    Checkbox as CheckboxMantine,
     Chip,
     Code,
     ColorPicker,

package/client/services/router/index.tsx

@@ -168,7 +168,7 @@ export default class ClientRouter<
 
         // Error code
         if (typeof url === 'number') {
-            this.createResponse( this.errors[url], this.context.request ).then(( page ) => {
+            this.createResponse( this.errors[url], this.context.request, data ).then(( page ) => {
                 this.navigate(page, data);
             })
             return;
@@ -335,10 +335,10 @@ export default class ClientRouter<
 
         };
 
-        console.log("404 error page not found.", this.errors, this.routes);
-
         const notFoundRoute = this.errors[404];
-        return await this.createResponse(notFoundRoute, request);
+        return await this.createResponse(notFoundRoute, request, {
+            error: new Error("Page not found")
+        });
     }
 
     private async load(route: TUnresolvedNormalRoute): Promise<TRoute>;
@@ -504,7 +504,9 @@ export default class ClientRouter<
         // Listener remover
         return () => {
             debug && console.info(LogPrefix, `De-register hook ${hookName} (index ${cbIndex})`);
-            delete (callbacks as THookCallback<this>[])[cbIndex];
+            this.hooks[hookName] = this.hooks[hookName]?.filter(
+                (_, index) => index !== cbIndex
+            );
         }
 
     }

package/common/errors/index.tsx

@@ -20,9 +20,16 @@ export type TJsonError = {
 } & TErrorDetails
 
 type TErrorDetails = {
+
     // Allow to identify the error catched (ex: displaying custop content, running custom actions, ...)
     id?: string,
     data?: {},
+
+    cta?: {
+        label: string,
+        link: string,
+    },
+
     // For debugging
     stack?: string,
     origin?: string,
@@ -55,11 +62,13 @@ export type ServerBug = {
     },
     
     // Error
-    error: Error,
-    stacktrace: string,
-    logs: TJsonLog[],
+    title?: string,
+    stacktraces: string[],
+    context: object[],
 }
 
+export type TCatchedError = Error | CoreError | Anomaly;
+
 /*----------------------------------
 - ERREURS
 ----------------------------------*/
@@ -152,6 +161,21 @@ export class AuthRequired extends CoreError {
     public http = 401;
     public title = "Authentication Required";
     public static msgDefaut = "Please Login to Continue.";
+
+    public constructor( 
+        message: string, 
+        public motivation?: string,
+        details?: TErrorDetails
+    ) {
+        super(message, details);
+    }
+
+    public json(): TJsonError & { motivation?: string } {
+        return {
+            ...super.json(),
+            motivation: this.motivation,
+        }
+    }
 }
 
 export class UpgradeRequired extends CoreError {

package/common/router/index.ts

@@ -98,7 +98,10 @@ export type TRouteOptions = {
     redirectLogged?: string, // Redirect to this route if auth: false and user is logged
 
     // Rendering
-    static?: boolean,
+    static?: { 
+        refresh?: string, 
+        urls: string[] 
+    },
     canonicalParams?: string[], // For SEO + unique ID for static cache
     layout?: false | string, // The nale of the layout
 

package/common/utils/rte.ts

@@ -0,0 +1,183 @@
+
+import type Driver from '@server/services/disks/driver';
+import { Anomaly } from '@common/errors';
+
+export type LexicalNode = {
+    version: number,
+    type: string,
+    children?: LexicalNode[],
+    // Attachement
+    src?: string;
+    // Headhing
+    text?: string;
+    anchor?: string;
+    tag?: string;
+}
+
+export type LexicalState = {
+    root: LexicalNode
+}
+
+export type TRenderOptions = {
+
+    format?: 'html' | 'text', // Default = html
+    transform?: RteUtils["transformNode"],
+
+    render?: (
+        node: LexicalNode, 
+        parent: LexicalNode | null, 
+        options: TRenderOptions
+    ) => Promise<LexicalNode>,
+
+    attachements?: {
+        disk: Driver,
+        directory: string,
+        prevVersion?: string | LexicalState | null,
+    }
+}
+
+export type TSkeleton = { 
+    id: string,
+    title: string, 
+    level: number, 
+    childrens: TSkeleton 
+}[];
+
+export type TContentAssets = {
+    attachements: string[],
+    skeleton: TSkeleton
+}
+
+export default abstract class RteUtils {
+
+    public async render( 
+        content: string | LexicalState, 
+        options: TRenderOptions = {}
+    ): Promise<TContentAssets & {
+        html: string | null,
+        json: string | LexicalState,
+    }> {
+
+        // Transform content
+        const assets: TContentAssets = {
+            attachements: [],
+            skeleton: []
+        }
+
+        // Parse content if string
+        let json = this.parseState(content);
+        if (json === false)
+            return { html: '', json: content, ...assets }
+
+        // Parse prev version if string
+        if (typeof options?.attachements?.prevVersion === 'string') {
+            try {
+                options.attachements.prevVersion = JSON.parse(options.attachements.prevVersion) as LexicalState;
+            } catch (error) {
+                throw new Anomaly("Invalid JSON format for the given JSON RTE prev version.");
+            }
+        }
+
+        const root = await this.processContent(json.root, null, async (node, parent) => {
+            return await this.transformNode(node, parent, assets, options);
+        });
+
+        json = { ...json, root };
+
+        // Delete unused attachements
+        const attachementOptions = options?.attachements;
+        if (attachementOptions && attachementOptions.prevVersion !== undefined) {
+
+            await this.processContent(root, null, async (node) => {
+                return await this.deleteUnusedFile(node, assets, attachementOptions);
+            });
+        }
+
+        // Convert json to HTML
+        let html: string | null;
+        if (options.format === 'text')
+            html = await this.jsonToText( json.root );
+        else
+            html = await this.jsonToHtml( json, options );
+
+        return { html, json: content, ...assets };
+    }
+
+    private parseState( content: string | LexicalState ): LexicalState | false {
+
+        if (typeof content === 'string' && content.trim().startsWith('{')) {
+            try {
+                return JSON.parse(content) as LexicalState;
+            } catch (error) { 
+                throw new Anomaly("Invalid JSON format for the given JSON RTE content.");
+            }
+        } else if (content && typeof content === 'object' && content.root)
+            return content;
+        else
+            return false;
+        
+    }
+
+    protected jsonToText(root: LexicalNode): string {
+        let result = '';
+
+        function traverse(node: LexicalNode) {
+            switch (node.type) {
+                case 'text':
+                    // Leaf text node
+                    result += node.text ?? '';
+                    break;
+                case 'linebreak':
+                    // Explicit line break node
+                    result += '\n';
+                    break;
+                default:
+                    // Container or block node: dive into children if any
+                    if (node.children) {
+                        node.children.forEach(traverse);
+                    }
+                    // After finishing a block-level node, append newline
+                    if (isBlockNode(node.type)) {
+                        result += '\n';
+                    }
+                    break;
+            }
+        }
+
+        // Heuristic: treat these as blocks
+        function isBlockNode(type: string): boolean {
+            return [
+                'root',
+                'paragraph',
+                'heading',
+                'listitem',
+                'unorderedlist',
+                'orderedlist',
+                'quote',
+                'codeblock',
+                'table',
+            ].includes(type);
+        }
+
+        traverse(root);
+
+        // Trim trailing whitespace/newlines
+        return result.replace(/\s+$/, '');
+    }
+    
+    public abstract jsonToHtml( json: LexicalState, options: TRenderOptions ): Promise<string | null>;
+
+    protected abstract processContent( 
+        node: LexicalNode, 
+        parent: LexicalNode | null, 
+        callback: (node: LexicalNode, parent: LexicalNode | null) => Promise<LexicalNode>
+    ): Promise<LexicalNode>;
+
+    protected abstract transformNode( node: LexicalNode, parent: LexicalNode | null, assets: TContentAssets, options: TRenderOptions ): Promise<LexicalNode>;
+
+    protected abstract deleteUnusedFile( 
+        node: LexicalNode, 
+        assets: TContentAssets, 
+        options: NonNullable<TRenderOptions["attachements"]>
+    ): Promise<LexicalNode>;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.6.0",
+	"version": "0.6.1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -63,7 +63,6 @@
 		"md5": "^2.3.0",
 		"mime-types": "^2.1.35",
 		"module-alias": "^2.2.2",
-		"morgan": "^1.10.0",
 		"mysql2": "^2.3.0",
 		"object-sizeof": "^1.6.3",
 		"path-to-regexp": "^6.2.0",
@@ -73,9 +72,11 @@
 		"prettier": "^3.3.3",
 		"react-scrollbars-custom": "^4.0.27",
 		"react-slider": "^2.0.1",
+		"react-textarea-autosize": "^8.5.9",
 		"regenerator-runtime": "^0.13.9",
 		"request": "^2.88.2",
 		"slugify": "^1.6.6",
+		"source-map-support": "^0.5.21",
 		"sql-formatter": "^4.0.2",
 		"stopword": "^3.1.1",
 		"tslog": "^4.9.1",