proteum 1.0.0-1

package/cli/utils/keyboard.ts

@@ -0,0 +1,78 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// npm
+import readline, { Key } from 'readline';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+type TKeyboardCommand = {
+    remove?: boolean,
+    run: (str: string, chunk: string, key: Key) => void
+}
+
+/*----------------------------------
+- METHODS
+----------------------------------*/
+class KeyboardCommands {
+
+    private commands: { [input: string]: TKeyboardCommand } = {}
+
+    public constructor() {
+        this.listen();
+    }
+
+    private listen() {
+
+        readline.emitKeypressEvents(process.stdin);
+        process.stdin.setRawMode(true);
+        process.stdin.on('keypress', async (chunk: string, key: Key) => {
+
+            let str = key.name;
+            if (!str) return;
+            if (str === 'return') str = 'enter';
+
+            if (key.ctrl) str = 'ctrl+' + str;
+            if (key.shift) str = 'shift+' + str;
+            if (key.meta) str = 'meta+' + str;
+
+            const kCommand = this.commands[str] || this.commands.fallback;
+            if (kCommand) {
+
+                kCommand.run(str, chunk, key);
+
+                if (kCommand.remove)
+                    delete this.commands[str];
+            }
+
+            if (str === 'ctrl+c') {
+
+                console.log(`Exiting ...`);
+                process.exit(0);
+
+            } 
+
+
+        });
+    }
+
+
+    public input(str: string, run: TKeyboardCommand["run"], options: Omit<TKeyboardCommand, 'run'> = {}) {
+        this.commands[str] = { run, ...options }
+    }
+
+    public waitForInput(str: string): Promise<void> {
+        return new Promise((resolve) => {
+            this.commands[str] = {
+                run: () => resolve(),
+                remove: true
+            }
+        });
+    }
+
+}
+
+export default new KeyboardCommands

package/client/app/component.tsx

@@ -0,0 +1,54 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import type { Layout } from '@common/router';
+import { ReactClientContext } from '@/client/context';
+import DialogManager from '@client/components/Dialog/Manager'
+
+// Core components
+import RouterComponent from '@client/services/router/components/router';
+import type { TClientOrServerContextForPage } from '@common/router';
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default function App({ context }: {
+    context: TClientOrServerContextForPage,
+}) {
+
+    const curLayout = context.page?.layout;
+    const [layout, setLayout] = React.useState<Layout | false | undefined>(curLayout);
+    const [apiData, setApiData] = React.useState<{ [k: string]: any } | null>(context.page?.data || {});
+
+    // TODO: context.page is always provided in the context on the client side
+    if (context.app.side === "client")
+        context.app.setLayout = setLayout;
+
+    return (
+        <ReactClientContext.Provider value={context}>
+
+            <DialogManager context={context} />
+
+            {!layout ? <>
+                {/* TODO: move to app, because here, we're not aware that the router service has been defined */}
+                <RouterComponent service={context.Router} />
+            </> : <> {/* Same as router/components/Page.tsx */}
+                <layout.Component
+                    // Services
+                    {...context}
+                    // API data & URL params
+                    data={{
+                        ...apiData,
+                        ...context.request.data
+                    }}
+                />
+            </>}
+
+        </ReactClientContext.Provider>
+    )
+}

package/client/app/index.ts

@@ -0,0 +1,142 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+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 type { Layout } from '@common/router';
+import { createDialog } from '@client/components/Dialog/Manager';
+
+// Local
+import type { AnyService } from './service';
+
+export { default as Service } from './service';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+declare global {
+    interface Window {
+        dev: boolean,
+        /*context: ClientContext,
+        user: User,*/
+        /*context: ClientContext,
+        user: User,*/
+    }
+}
+
+export type TBugReportInfos = {
+    stacktrace?: string,
+    observation?: string,
+    before?: 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];
+  } & {};
+
+export type ApplicationProperties = Prettify<keyof Application>;
+
+/*----------------------------------
+- CLASS
+----------------------------------*/
+export default abstract class Application {
+
+    public side = 'client' as 'client';
+
+    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 registerService( service: AnyService ) {
+        console.log(`[app] Register service`, service.constructor?.name);
+        this.servicesList.push(service);
+    }
+
+    public start() {
+        this.bindErrorHandlers();
+        this.startServices();
+        this.boot();
+    }
+
+    public abstract boot(): void;
+
+    public startServices() {
+
+        console.log(`[app] Starting ${this.servicesList.length} services.`);
+
+        for (const service of this.servicesList) {
+            console.log(`[app] Start service`, service);
+            service.start();
+        }
+
+        console.log(`[app] All ${this.servicesList.length} services were started.`);
+    }
+
+    public bindErrorHandlers() {
+
+        // Impossible de recup le stacktrace ...
+        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", 
+                    "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 );
+
+    // 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) {
+        throw new Error(`page.setLayout has been called before the function is assigned from the <App /> component.`);
+    };
+}   

package/client/app/service.ts

@@ -0,0 +1,34 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+import type Application from ".";
+
+/*----------------------------------
+- TYPES: OPTIONS
+----------------------------------*/
+
+export type AnyService = Service<{}, Application>
+
+/*----------------------------------
+- CLASS
+----------------------------------*/
+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.`);
+
+        // Make the app aware of his services
+        app.registerService(this);
+    }
+
+    public abstract start(): void;
+}

package/client/app.tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "extends": "../../node_modules/proteum/tsconfig.common.json",
+    "compilerOptions": {
+        "rootDir": "..",
+        "baseUrl": "..",
+        "paths": {
+            
+            "@client/*": ["../node_modules/proteum/client/*"],
+            "@common/*": ["../node_modules/proteum/common/*"],
+
+            // Only used for typings (ex: ServerResponse)
+            // Removed before webpack compilation
+            "@server/*": ["../node_modules/proteum/server/*"],
+            "@/*": ["./*"],
+
+            // ATTENTION: Les références à preact doivent toujours pointer vers la même instance
+            "react": ["preact/compat"],
+            "react-dom/test-utils": ["preact/test-utils"],
+            "react-dom": ["preact/compat"], // Must be below test-utils
+            "react/jsx-runtime": ["preact/jsx-runtime"],
+            "preact/jsx-runtime": ["preact/jsx-runtime"]
+        }
+    },
+    "include": [
+        ".",
+        "../../node_modules/proteum/types/global"
+    ]
+}

package/client/components/Button.tsx

@@ -0,0 +1,298 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import { VNode, RefObject,ComponentChild } from 'preact';
+
+// Core
+import { shouldOpenNewTab } from '@client/services/router/components/Link';
+import { history } from '@client/services/router/request/history';
+import useContext from '@/client/context';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type Props = {
+
+    id?: string,
+    refElem?: RefObject<HTMLElement>,
+
+    icon?: ComponentChild,
+    iconR?: ComponentChild,
+
+    prefix?: ComponentChild,
+    suffix?: ComponentChild,
+    
+    tag?: "a" | "button",
+    type?: 'guide' | 'primary' | 'secondary' | 'link',
+    shape?: 'default' | 'icon' | 'tile' | 'pill' | 'custom',
+    size?: TComponentSize,
+    class?: string,
+
+    state?: [string, React.StateUpdater<string>],
+    active?: boolean,
+    selected?: boolean,
+    disabled?: boolean,
+    loading?: boolean,
+    autoFocus?: boolean,
+    onClick?: (e: MouseEvent) => any,
+    async?: boolean,
+
+    submenu?: ComponentChild,
+    nav?: boolean | 'exact'
+
+// SEO: if icon only, should provinde a hint (aria-label)
+} & ({ 
+    hint: string,
+    children?: ComponentChild | ComponentChild[],
+} | { 
+    children: ComponentChild | ComponentChild[],
+    hint?: string,
+}) & (TButtonProps | TLinkProps)
+
+export type TButtonProps = React.JSX.HTMLAttributes<HTMLButtonElement>
+
+export type TLinkProps = React.JSX.HTMLAttributes<HTMLAnchorElement>
+
+/*----------------------------------
+- HELPERS
+----------------------------------*/
+const trimSlash = (str: string): string => {
+    return str.endsWith('/') ? str.slice(0, -1) : str;
+}
+
+const isCurrentUrl = (currentUrl: string, url: string, exact?: boolean) => {
+    return (
+        (exact && (url === currentUrl || trimSlash(url) === currentUrl))
+        ||
+        (!exact && currentUrl.startsWith(url))
+    )
+}
+
+/*----------------------------------
+- CONTROLEUR
+----------------------------------*/
+export default ({
+
+    id,
+
+    // Content
+    icon, prefix, 
+    children, 
+    iconR, suffix,
+    submenu,
+    nav,
+    hint,
+
+    // Style
+    class: className,
+    shape,
+    size,
+    type,
+
+    // Interactions
+    active,
+    selected,
+    state: stateUpdater,
+    disabled,
+    loading,
+    //autoFocus,
+    async,
+
+    // HTML attributes
+    tag: Tag,
+    refElem,
+    ...props
+
+}: Props) => {
+
+    const ctx = useContext();
+    let [isSelected, setIsSelected] = React.useState(false);
+    let [isActive, setIsActive] = React.useState(false);
+    const [isLoading, setLoading] = React.useState(false);
+
+    if (isLoading || loading) {
+        icon = <i src="spin" />
+        iconR = undefined;
+        disabled = true;
+    }
+
+    if (stateUpdater && id !== undefined) {
+        const [active, setActive] = stateUpdater;
+        if (id === active)
+            isSelected = true;
+        props.onClick = () => setActive(id);
+    }
+
+    // Hint
+    if (hint !== undefined) {
+        props['aria-label'] = hint;
+        props.title = hint;
+    }
+
+    // Shape classes
+    const classNames: string[] = ['btn'];
+    if (className)
+        classNames.push(className);
+
+    if (shape !== undefined) {
+        if (shape === 'tile')
+            classNames.push('col');
+        else
+            classNames.push(shape);
+    }
+
+    if (size !== undefined)
+        classNames.push(size);
+
+    if (icon) {
+        if (children === undefined)
+            classNames.push('icon');
+    }
+
+    // state classes
+    const [isMouseDown, setMouseDown] = React.useState(false);
+    props.onMouseDown = () => setMouseDown(true);
+    props.onMouseUp = () => setMouseDown(false);
+    props.onMouseLeave = () => setMouseDown(false);
+
+    // Theming & state
+    if (isMouseDown)
+        classNames.push('pressed');
+    else if (selected || isSelected === true)
+        classNames.push('bg accent');
+    else if (type !== undefined)
+        classNames.push(type === 'link' ? type : (' bg ' + type));
+    
+    if (active || isActive === true)
+        classNames.push('active');
+
+    // Icon
+    if (prefix === undefined && icon !== undefined)
+        prefix = typeof icon === "string" ? <i class={"svg-" + icon} /> : icon;
+    if (suffix === undefined && iconR !== undefined)
+        suffix = typeof iconR === "string" ? <i class={"svg-" + iconR} /> : iconR;
+
+    // Render
+    if ('link' in props || Tag === "a") {
+
+        // Link (only if enabled)
+        if (!disabled) {
+
+            props.href = props.link;
+            
+            // External = open in new tab by default
+            if (shouldOpenNewTab( props.href, props.target ))
+                props.target = '_blank';
+        }
+
+        // Nav
+        if (nav && props.target === undefined) {
+
+            const checkIfCurrentUrl = (url: string) => 
+                isCurrentUrl(url, props.link, nav === 'exact');
+
+            React.useEffect(() => {
+
+                // Init
+                if (checkIfCurrentUrl(ctx.request.path))
+                    setIsActive(true);
+
+                // On location change
+                return history?.listen(({ location }) => {
+
+                    setIsActive( checkIfCurrentUrl(location.pathname) );
+
+                })
+
+            }, []);
+        }
+
+        Tag = 'a';
+
+    } else {
+        Tag = 'button';
+
+        // Avoid to trigget onclick when presing enter
+        if (type !== 'primary')
+            props.type = 'button';
+        else
+            props.type = 'submit';
+    }
+
+    let render: VNode = (
+        <Tag {...props} id={id} class={classNames.join(' ')} disabled={disabled} ref={refElem} onClick={(e: MouseEvent) => {
+
+            // annulation si:
+            // - Pas clic gauche
+            // - Event annulé
+            if (e.button !== 0)
+                return;
+
+            // Disabled
+            if (disabled)
+                return false;
+
+            // Custom event
+            if (props.onClick !== undefined) {
+
+                const returned = props.onClick(e);
+                if (async && returned?.then) {
+                    setLoading(true);
+                    returned.finally(() => setLoading(false));
+                }
+            }
+
+            // Link
+            let nativeEvent: boolean = false;
+            if (('link' in props) && !e.defaultPrevented) {
+
+                // Nouvelle fenetre = event par defaut
+                if (props.target === '_blank') {
+
+                    nativeEvent = true;
+
+                // Page change = loading indicator
+                } else if (props.target === "_self") {
+
+                    setLoading(true);
+                    window.location.href = props.link;
+
+                } else {
+
+                    history?.push(props.link);
+                }
+            }
+
+            if (!nativeEvent) {
+                e.preventDefault();
+                return false;
+            }       
+        }}>
+            {prefix}
+            {children === undefined 
+                ? null 
+                : shape === 'custom' 
+                ? children : (
+                    <span class={"label"}>
+                        {children}
+                    </span>
+                )}
+            {suffix}
+        </Tag>
+    )
+
+    if (Tag === "li" || submenu) {
+        render = (
+            <li>
+                {render}
+                {submenu}
+            </li>
+        )
+    }
+
+    return render;
+}