proteum 1.0.3 → 2.0.0

package/client/app/index.ts

@@ -3,15 +3,12 @@
 ----------------------------------*/
 
 // Npm
-import React from 'react';
-
-if (typeof window === 'undefined')
-    throw new Error(`This file shouldn't be loaded on server side !!!!`);
+if (typeof window === 'undefined') throw new Error(`This file shouldn't be loaded on server side !!!!`);
 
 window.dev && require('preact/debug');
 
 // Core
-import { CoreError, InputErrorSchema } from '@common/errors';
+import { CoreError } from '@common/errors';
 import type { Layout } from '@common/router';
 import { createDialog } from '@client/components/Dialog/Manager';
 
@@ -26,7 +23,8 @@ export { default as Service } from './service';
 
 declare global {
     interface Window {
-        dev: boolean,
+        dev: boolean;
+        app?: Application;
         /*context: ClientContext,
         user: User,*/
         /*context: ClientContext,
@@ -34,22 +32,12 @@ declare global {
     }
 }
 
-export type TBugReportInfos = {
-    stacktrace?: string,
-    observation?: string,
-    before?: string,
-}
+export type TBugReportInfos = { stacktrace?: string; observation?: string; before?: string };
 
-export type TClientBugReportInfos = TBugReportInfos & {
-    context?: string,
-    guiVersion: string,
-    url: string,
-}
+export type TClientBugReportInfos = TBugReportInfos & { context?: string; guiVersion: string; url: string };
 
 // Without prettify, we don't get a clear list of the class properties
-type Prettify<T> = {
-    [K in keyof T]: T[K];
-  } & {};
+type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
 export type ApplicationProperties = Prettify<keyof Application>;
 
@@ -57,20 +45,17 @@ export type ApplicationProperties = Prettify<keyof Application>;
 - CLASS
 ----------------------------------*/
 export default abstract class Application {
-
     public side = 'client' as 'client';
 
-    private servicesList: AnyService[] = []
+    private servicesList: AnyService[] = [];
 
     // TODO: merge modal and toast in the same instance
     public modal = createDialog(this, false);
     public toast = createDialog(this, true);
 
-    public constructor() {
+    public constructor() {}
 
-    }
-
-    public registerService( service: AnyService ) {
+    public registerService(service: AnyService) {
         console.log(`[app] Register service`, service.constructor?.name);
         this.servicesList.push(service);
     }
@@ -84,7 +69,6 @@ export default abstract class Application {
     public abstract boot(): void;
 
     public startServices() {
-
         console.log(`[app] Starting ${this.servicesList.length} services.`);
 
         for (const service of this.servicesList) {
@@ -96,49 +80,44 @@ export default abstract class Application {
     }
 
     public bindErrorHandlers() {
-
         // Impossible de recup le stacktrace ...
-        window.addEventListener("unhandledrejection", (e) => {
+        window.addEventListener('unhandledrejection', (e) => {
             const error = new Error(e.reason); // How to get stacktrace ?
             this.handleError(error);
         });
-        
+
         window.onerror = (message, file, line, col, stacktrace) => {
             console.error(`Exception catched by method B`, message);
-            this.reportBug({
-                stacktrace: stacktrace?.stack || JSON.stringify({ message, file, line, col })
-            }).then(() => {
-
-                // TODO in toas service: app.on('bug', () => toast.warning( ... ))
-                /*context?.toast.warning("Bug detected", 
+            this.reportBug({ stacktrace: stacktrace?.stack || JSON.stringify({ message, file, line, col }) }).then(
+                () => {
+                    // TODO in toas service: app.on('bug', () => toast.warning( ... ))
+                    /*context?.toast.warning("Bug detected", 
                     "A bug report has been sent, because I've detected a bug on the interface. I'm really sorry for the interruption.",
                     null,
                 { autohide: false });*/
-
-            })
-        }
+                },
+            );
+        };
     }
 
-    public abstract handleError( error: CoreError | Error );
-    
+    public abstract handleError(error: CoreError | Error): void;
+
     public abstract handleUpdate(): void;
 
     // TODO: move on app side
-    public reportBug = (infos: TBugReportInfos) => fetch('/feedback/bug/ui', {
-        method: 'POST',
-        headers: {
-            'Accept': "application/json",
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            url: window.location.pathname,
-            context: JSON.stringify(window["ssr"]),
-            guiVersion: BUILD_DATE,
-            ...infos
-        })
-    })
-
-    public setLayout(layout: Layout) {
+    public reportBug = (infos: TBugReportInfos) =>
+        fetch('/feedback/bug/ui', {
+            method: 'POST',
+            headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                url: window.location.pathname,
+                context: JSON.stringify((window as Window & { ssr?: unknown }).ssr),
+                guiVersion: BUILD_DATE,
+                ...infos,
+            }),
+        });
+
+    public setLayout(_layout: Layout) {
         throw new Error(`page.setLayout has been called before the function is assigned from the <App /> component.`);
-    };
-}   
+    }
+}

package/client/app/service.ts

@@ -2,33 +2,28 @@
 - DEPENDANCES
 ----------------------------------*/
 
-import type Application from ".";
+import type Application from '.';
 
 /*----------------------------------
 - TYPES: OPTIONS
 ----------------------------------*/
 
-export type AnyService = Service<{}, Application>
+export type AnyService = Service<{}, Application>;
 
 /*----------------------------------
 - CLASS
 ----------------------------------*/
-export default abstract class Service<
-    TConfig extends {}, 
-    TApplication extends Application
-> {
-    public constructor( 
-        public app: TApplication, 
+export default abstract class Service<TConfig extends {}, TApplication extends Application> {
+    public constructor(
+        public app: TApplication,
         public config: TConfig,
     ) {
-
         // No client service should be loaded from server side
-        if (typeof window === 'undefined')
-            throw new Error(`Client services shouldn't be loaded on server side.`);
+        if (typeof window === 'undefined') throw new Error(`Client services shouldn't be loaded on server side.`);
 
         // Make the app aware of his services
         app.registerService(this);
     }
 
     public abstract start(): void;
-}
+}

package/client/app.tsconfig.json

@@ -9,7 +9,7 @@
             "@common/*": ["../node_modules/proteum/common/*"],
 
             // Only used for typings (ex: ServerResponse)
-            // Removed before webpack compilation
+            // Removed before bundling
             "@server/*": ["../node_modules/proteum/server/*"],
             "@/*": ["./*"],
 
@@ -25,4 +25,4 @@
         ".",
         "../../node_modules/proteum/types/global"
     ]
-}
+}

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

@@ -0,0 +1,40 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+type TDialogControls = { close: (returnedValue?: unknown) => void; then: (cb: (value: unknown) => void) => void };
+
+type TDialogActions = {
+    setToasts: (setter: (old: ComponentChild[]) => ComponentChild[]) => void;
+    setModals: (setter: (old: ComponentChild[]) => ComponentChild[]) => void;
+    show: (...args: unknown[]) => TDialogControls;
+    loading: (title: string) => TDialogControls;
+    info: (...args: unknown[]) => TDialogControls;
+    success: (...args: unknown[]) => TDialogControls;
+    warning: (...args: unknown[]) => TDialogControls;
+    error: (...args: unknown[]) => TDialogControls;
+};
+
+const noopControls = (): TDialogControls => ({ close: () => undefined, then: () => undefined });
+
+export const createDialog = (_app?: unknown, _isToast?: boolean): TDialogActions => ({
+    setToasts: () => undefined,
+    setModals: () => undefined,
+    show: () => noopControls(),
+    loading: () => noopControls(),
+    info: () => noopControls(),
+    success: () => noopControls(),
+    warning: () => noopControls(),
+    error: () => noopControls(),
+});
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default function DialogManager() {
+    return null;
+}

package/client/components/Dialog/Manager.tsx

@@ -8,7 +8,7 @@ import { ComponentChild } from 'preact';
 
 // Core
 import useContext from '@/client/context';
-import { blurable, deepContains, focusContent } from '@client/utils/dom';
+import { focusContent } from '@client/utils/dom';
 
 // Specific
 import type Application from '../../app';
@@ -21,123 +21,135 @@ import type Application from '../../app';
 - TYPES: DECLARATIONS
 ----------------------------------*/
 
-type TParams = { [cle: string]: unknown }
+type TParams = { [cle: string]: unknown };
 
-type ComposantToast = React.FunctionComponent<{ close?: any }> & { data?: object };
+type CardInfos = TParams & {
+    title?: string;
+    content?: ComponentChild;
+    boutons?: ComponentChild;
+    type?: string;
+    close?: (returnedValue?: unknown) => void;
+    isToast?: boolean;
+};
 
-type TOptsToast = (CardInfos & { 
-    content?: ComponentChild,
-    data?: {},
-    className?: string,
-})
+type TDialogRendererProps = CardInfos & { isToast?: boolean };
 
-type TOnCloseCallback<TReturnType extends any> = (returnedValue: TReturnType) => void
+type ComposantToast = React.ComponentType<TDialogRendererProps> & { data?: object };
+
+type TOptsToast = CardInfos & { content?: ComponentChild; data?: {}; className?: string };
+
+type TOnCloseCallback<TReturnType extends any> = (returnedValue: TReturnType) => void;
 
 type TToastShortcutArgs = [
-    title: TOptsToast["title"], 
-    content?: TOptsToast["content"], 
-    boutons?: TOptsToast["boutons"],
+    title: TOptsToast['title'],
+    content?: TOptsToast['content'],
+    boutons?: TOptsToast['boutons'],
     options?: TOptsToast,
-]
+];
 
-export type TDialogControls = {
-    close: TOnCloseCallback<any>,
-    then: (cb: TOnCloseCallback<any>) => any
-}
+export type TDialogControls = { close: TOnCloseCallback<any>; then: (cb: TOnCloseCallback<any>) => any };
 
 type TDialogContentArg = ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast;
 
-type TDialogShowArgs = [
-    // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
-    Content: TDialogContentArg,
-    paramsInit?: TParams
-] | [
-    title: string,
-    // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
-    Content: TDialogContentArg,
-    paramsInit?: TParams
-]
+type TDialogShowArgs =
+    | [
+          // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
+          Content: TDialogContentArg,
+          paramsInit?: TParams,
+      ]
+    | [
+          title: string,
+          // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
+          Content: TDialogContentArg,
+          paramsInit?: TParams,
+      ];
 
 type DialogActions = {
+    setToasts: (setter: (old: ComponentChild[]) => ComponentChild[]) => void;
+    setModals: (setter: (old: ComponentChild[]) => ComponentChild[]) => void;
 
-    setToasts: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
-    setModals: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
+    show: (...args: TDialogShowArgs) => TDialogControls;
 
-    show: (...args: TDialogShowArgs ) => TDialogControls,
+    loading: (title: string) => TDialogControls;
 
-    loading: (title: string) => TDialogControls,
+    info: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls;
 
-    info: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+    success: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls;
 
-    success: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+    warning: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls;
 
-    warning: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
-
-    error: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
-}
+    error: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls;
+};
 
 /*----------------------------------
 - SERVICE CONTEXTE
 ----------------------------------*/
 let idA: number = 0;
-export const createDialog = (app: Application, isToast: boolean): DialogActions => {
 
-    const show = <TReturnType extends any = true>( ...args: TDialogShowArgs ): TDialogControls => {
+const isPromiseContent = (value: TDialogContentArg): value is Promise<{ default: ComposantToast }> =>
+    typeof value === 'object' && value !== null && 'then' in value;
 
+const isDialogRenderer = (value: TDialogContentArg): value is ComposantToast => typeof value === 'function';
+
+const DefaultDialogContent = ({ title, content, boutons, type, isToast }: TDialogRendererProps) => (
+    <div class={`dialog-card${type ? ` ${type}` : ''}${isToast ? ' is-toast' : ''}`}>
+        {title ? <header>{title}</header> : null}
+        {content ? <div class="dialog-card__content">{content}</div> : null}
+        {boutons ? <footer>{boutons}</footer> : null}
+    </div>
+);
+
+export const createDialog = (app: Application, isToast: boolean): DialogActions => {
+    const show = <TReturnType extends any = true>(...args: TDialogShowArgs): TDialogControls => {
         let onClose: TOnCloseCallback<TReturnType>;
         const id = idA++;
 
         // Parse args
-        let title: string | undefined; 
+        let title: string | undefined;
         let Content: TDialogContentArg;
         let paramsInit: TParams = {};
         if (typeof args[0] === 'string') {
-            [title, Content, paramsInit] = args;
+            const [nextTitle, nextContent, nextParams] = args as [string, TDialogContentArg, TParams?];
+            title = nextTitle;
+            Content = nextContent;
+            paramsInit = nextParams || {};
         } else {
-            [Content, paramsInit] = args;
+            const [nextContent, nextParams] = args as [TDialogContentArg, TParams?];
+            Content = nextContent;
+            paramsInit = nextParams || {};
         }
 
         // Set instance management function
-        const setDialog = isToast
-            ? instance.setToasts
-            : instance.setModals;
+        const setDialog = isToast ? instance.setToasts : instance.setModals;
 
         // Close function
         const close = (retour: TReturnType) => {
+            setDialog((q) =>
+                (q as Array<ComponentChild & { id?: number }>).filter((m) => m && m.id !== id) as ComponentChild[],
+            );
 
-            setDialog(q => q.filter(m => m.id !== id))
-
-            if (onClose !== undefined)
-                onClose(retour);
+            if (onClose !== undefined) onClose(retour);
         };
 
         const promise = new Promise(async (resolve: TOnCloseCallback<TReturnType>) => {
-            onClose = resolve
+            onClose = resolve;
 
             let render: ComponentChild;
-            let propsRendu: CardInfos = {
-                ...paramsInit,
-                close: close
-            }; 
-            
+            let propsRendu: TDialogRendererProps = { ...paramsInit, close: close };
+
             // modal.show( import('./modalSupprimer') )
             //  -> Fetch component
-            if (Content.constructor === Promise)
-                Content = (await Content).default;
+            if (isPromiseContent(Content)) Content = (await Content).default;
 
             // modal.show('Supprimer', import('./modalSupprimer'))
-            //  -> Shortcut for modal.show({ title: 'Suoorimer', content: <Component> })
-            if (title !== undefined) {
-                Content = {
-                    title: title,
-                    content: Content
-                }
+            //  -> Shortcut for passing a title to the component or default card renderer.
+            if (title !== undefined) propsRendu.title = title;
+
+            if (isDialogRenderer(Content)) {
+                render = <Content {...propsRendu} isToast={isToast} />;
+            } else {
+                render = <DefaultDialogContent {...propsRendu} {...Content} isToast={isToast} />;
             }
-            // modal.show( ToastSupprimer )
-            //  -> Content is a component rendering a Card
-            render = (
-                <Content {...propsRendu} isToast={isToast} />
-            )
 
             // Chargeur de données
             /*if (('data' in ComposantCharge) && typeof ComposantCharge.data === 'function') {
@@ -149,115 +161,72 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
                 await execFetchersState(fetchersStateA);
      
             }*/
-            
-            if (!isToast)
-                render = (
-                    <div class="modal">
-                        {render}
-                    </div>
-                )
 
-            render["id"] = id;
+            if (!isToast) render = <div class="modal">{render}</div>;
 
-            setDialog(q => [...q, render]);
+            (render as ComponentChild & { id?: number }).id = id;
+
+            setDialog((q) => [...q, render]);
         });
 
-        return {
-            close,
-            then: (cb) => promise.then(cb)
-        }
+        return { close, then: (cb) => promise.then(cb) };
     };
 
     const instance: DialogActions = {
-
         show: show,
 
-        setToasts: undefined as unknown as DialogActions["setToasts"],
-        setModals: undefined as unknown as DialogActions["setModals"],
-
-        loading: (title: string) => show({
-            title: title,
-            type: 'loading'
-        }),
-
-        info: (...[title, content, boutons, options]: TToastShortcutArgs) => show({
-            title: title,
-            type: 'info',
-            content: content && <p>{content}</p>,
-            boutons,
-            ...options
-        }),
-
-        success: (...[title, content, boutons, options]: TToastShortcutArgs) => show({
-            title: title,
-            type: 'success',
-            content: content && <p>{content}</p>,
-            boutons,
-            ...options
-        }),
-
-        warning: (...[title, content, boutons, options]: TToastShortcutArgs) => show({
-            title: title,
-            type: 'warn',
-            content: content && <p>{content}</p>,
-            boutons,
-            ...options
-        }),
-
-        error: (...[title, content, boutons, options]: TToastShortcutArgs) => show({
-            title: title,
-            type: 'error',
-            content: content && <p>{content}</p>,
-            boutons,
-            ...options
-        }),
-    }
+        setToasts: () => undefined,
+        setModals: () => undefined,
+
+        loading: (title: string) => show({ title: title, type: 'loading' }),
+
+        info: (...[title, content, boutons, options]: TToastShortcutArgs) =>
+            show({ title: title, type: 'info', content: content && <p>{content}</p>, boutons, ...options }),
+
+        success: (...[title, content, boutons, options]: TToastShortcutArgs) =>
+            show({ title: title, type: 'success', content: content && <p>{content}</p>, boutons, ...options }),
+
+        warning: (...[title, content, boutons, options]: TToastShortcutArgs) =>
+            show({ title: title, type: 'warn', content: content && <p>{content}</p>, boutons, ...options }),
+
+        error: (...[title, content, boutons, options]: TToastShortcutArgs) =>
+            show({ title: title, type: 'error', content: content && <p>{content}</p>, boutons, ...options }),
+    };
 
     return instance;
-}
+};
 
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
 import './index.less';
 export default () => {
-
     const app = useContext();
 
     const [modals, setModals] = React.useState<ComponentChild[]>([]);
     const [toasts, setToasts] = React.useState<ComponentChild[]>([]);
 
-    if (app.side === 'client') {
-        app.modal.setModals = setModals;
-        app.toast.setToasts = setToasts;
+    if (app.side === 'client' && app.modal && app.toast) {
+        (app.modal as DialogActions).setModals = setModals;
+        (app.toast as DialogActions).setToasts = setToasts;
     }
 
     React.useEffect(() => {
-
         console.log('Updated toast list');
 
-        const modals = document.querySelectorAll("#modals > .modal");
-        if (modals.length === 0)
-            return;
+        const modals = document.querySelectorAll('#modals > .modal');
+        if (modals.length === 0) return;
 
         // Focus
-        const lastToast = modals[ modals.length - 1 ];
-        focusContent( lastToast );
-
+        const lastToast = modals[modals.length - 1];
+        focusContent(lastToast as HTMLElement);
     });
-    
-    return <>
-        {modals.length !== 0 ? (
-            <div id="modals">
-                {modals}
-            </div>
-        ) : null}
-
-        {toasts.length !== 0 ? (
-            <div id="toasts">
-                {toasts}
-            </div>
-        ) : null}
-    </>
-
-}
+
+    return (
+        <>
+            {modals.length !== 0 ? <div id="modals">{modals}</div> : null}
+
+            {toasts.length !== 0 ? <div id="toasts">{toasts}</div> : null}
+        </>
+    );
+};

package/client/components/Dialog/status.tsx

@@ -11,7 +11,7 @@ export const SuccessAnimation = (
             </g>
         </svg>
     </div>
-)
+);
 
 export const WarningAnimation = (
     <div class="svg-box">
@@ -29,7 +29,7 @@ export const WarningAnimation = (
             </g>
         </svg>
     </div>
-)
+);
 
 export const ErrorAnimation = (
     <div class="svg-box">
@@ -45,4 +45,4 @@ export const ErrorAnimation = (
             </g>
         </svg>
     </div>
-)
+);

package/client/components/index.ts

@@ -1 +1 @@
-export { Link } from '../services/router/components/Link';
+export { Link } from '../services/router/components/Link';

package/client/components/types.d.ts

@@ -1,3 +1 @@
-
-
-declare type TComponentSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'
+declare type TComponentSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';