proteum 1.0.0-1

package/client/components/Dialog/Manager.tsx

@@ -0,0 +1,309 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import { ComponentChild } from 'preact';
+
+// Core
+import useContext from '@/client/context';
+import { blurable, deepContains, focusContent } from '@client/utils/dom';
+
+// Specific
+import type Application from '../../app';
+import Card, { Props as CardInfos } from './card';
+import Button from '../Button';
+
+/*----------------------------------
+- TYPES: IMPORTATIONS
+----------------------------------*/
+
+/*----------------------------------
+- TYPES: DECLARATIONS
+----------------------------------*/
+
+type TParams = { [cle: string]: unknown }
+
+type ComposantToast = React.FunctionComponent<{ close?: any }> & { 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"],
+    options?: TOptsToast,
+]
+
+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 DialogActions = {
+
+    setToasts: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
+    setModals: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
+
+    show: (...args: TDialogShowArgs ) => TDialogControls,
+
+    confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No') => TDialogControls,
+
+    loading: (title: string) => TDialogControls,
+
+    info: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+
+    success: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+
+    warning: (...[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 => {
+
+        let onClose: TOnCloseCallback<TReturnType>;
+        const id = idA++;
+
+        // Parse args
+        let title: string | undefined; 
+        let Content: TDialogContentArg;
+        let paramsInit: TParams = {};
+        if (typeof args[0] === 'string') {
+            [title, Content, paramsInit] = args;
+        } else {
+            [Content, paramsInit] = args;
+        }
+
+        // Set instance management function
+        const setDialog = isToast
+            ? instance.setToasts
+            : instance.setModals;
+
+        // Close function
+        const close = (retour: TReturnType) => {
+
+            setDialog(q => q.filter(m => m.id !== id))
+
+            if (onClose !== undefined)
+                onClose(retour);
+        };
+
+        const promise = new Promise(async (resolve: TOnCloseCallback<TReturnType>) => {
+            onClose = resolve
+
+            let render: ComponentChild;
+            let propsRendu: CardInfos = {
+                ...paramsInit,
+                close: close
+            }; 
+            
+            // modal.show( import('./modalSupprimer') )
+            //  -> Fetch component
+            if (Content.constructor === Promise)
+                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
+                }
+            }
+
+            // modal.show({ title: 'supprimer', content: <>...</> })
+            if (Content.constructor === Object) {
+
+                const { content: CardContent, data = {}, ...propsToast } = Content as TOptsToast;
+                
+                let cardContent: ComponentChild;
+                if (typeof CardContent === 'function') {
+                    cardContent = <CardContent {...propsRendu} {...data} />
+                    propsToast.boutons = null; // Component content = advanced content = should include buttons
+                } else {
+                    cardContent = CardContent;
+                }
+                
+                render = (
+                    <Card {...propsRendu} {...propsToast} isToast={isToast}>
+                        {cardContent}
+                    </Card>
+                )
+
+            // modal.show( ToastSupprimer )
+            //  -> Content is a component rendering a Card
+            } else {
+
+                render = (
+                    <Content {...propsRendu} isToast={isToast} />
+                )
+            }
+
+            // Chargeur de données
+            /*if (('data' in ComposantCharge) && typeof ComposantCharge.data === 'function') {
+     
+                propsRendu.data = await ComposantCharge.data(app, paramsInit);
+     
+                const { fetchersStateA } = initStateAsync(propsRendu.data, {}, false);
+     
+                await execFetchersState(fetchersStateA);
+     
+            }*/
+            
+            if (!isToast)
+                render = (
+                    <div class="modal">
+                        {render}
+                    </div>
+                )
+
+            render["id"] = id;
+
+            setDialog(q => [...q, render]);
+        });
+
+        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"],
+
+        confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No' = 'No') => show<boolean>(({ close }) => (
+            <div class="card col">
+                <header>
+                    <h2>{title}</h2>
+                </header>
+                {typeof content === 'string' ? <p>{content}</p> : content}
+                <footer class="row fill">
+                    <Button type={defaultBtn === 'Yes' ? 'primary' : undefined}
+                        onClick={() => close(true)}>
+                        Yes
+                    </Button>
+                    <Button type={defaultBtn === 'No' ? 'primary' : undefined}
+                        onClick={() => close(false)}>
+                        No
+                    </Button>
+                </footer>
+            </div>
+        )),
+
+        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;
+    }
+
+    React.useEffect(() => {
+
+        console.log('Updated toast list');
+
+        const modals = document.querySelectorAll("#modals > .modal");
+        if (modals.length === 0)
+            return;
+
+        // Focus
+        const lastToast = modals[ modals.length - 1 ];
+        focusContent( lastToast );
+
+    });
+    
+    return <>
+        {modals.length !== 0 ? (
+            <div id="modals">
+                {modals}
+            </div>
+        ) : null}
+
+        {toasts.length !== 0 ? (
+            <div id="toasts">
+                {toasts}
+            </div>
+        ) : null}
+    </>
+
+}

package/client/components/Dialog/card.tsx

@@ -0,0 +1,208 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Composants globaux
+import Button from '@client/components/Button';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+import { ComponentChild } from 'preact';
+
+type funcBtns = () => void
+
+type Boutons = { [label: string]: funcBtns }
+
+/*----------------------------------
+- CONTENU
+----------------------------------*/
+export type Props = {
+
+    // Informations modale
+    type?: 'primary' | 'success' | 'warning' | 'error' | 'loading' | 'info',
+    cover?: string,
+    icon?: ComponentChild,
+    title?: string | ComponentChild,
+    className?: string,
+
+    children?: ComponentChild,
+    isToast?: boolean,
+    width?: number,
+
+    footer?: ComponentChild,
+    boutons?: Boutons | null, // nul = pas de footer
+    defaultBtn?: string,
+
+    prison?: boolean,
+    /* Hide after x seconds */autohide?: number | false,
+    close?: funcBtns,
+    onClose?: () => Promise<any>,
+}
+
+export default ({
+
+    // Content
+    type,
+    cover,
+    icon, 
+    title, 
+    className = '',
+
+    children, 
+    isToast,
+    width,
+
+    footer,
+    boutons,
+    defaultBtn,
+
+    onClose, 
+    close,
+    autohide,
+    prison,
+
+}: Props) => {
+
+    // Boutons
+    if (footer === undefined && boutons !== null) {
+
+        // Default buttons
+        if (boutons === undefined || !Object.keys(boutons).length) {
+
+            // Toast: by default, if no buttons, we autohide after 3 seconds
+            if (autohide === undefined)
+                autohide = 3;
+
+            // If isToast, we show a default OK button
+            if (close && !isToast)
+                boutons = { 'Ok': () => close(true) };
+            else
+                boutons = null;
+
+        }
+
+        if (boutons !== null) {
+
+            const nbBtns = Object.keys(boutons).length;
+
+            footer = Object.entries(boutons).map(([texte, action]: [string, Function], index: number) => {
+                const dernier = nbBtns > 1 && index === nbBtns - 1;
+                return (
+                    <Button
+                        async
+                        onClick={() => action()}
+                        type={(defaultBtn === undefined ? dernier : (defaultBtn === texte)) ? 'primary' : undefined}
+                    >
+                        {texte}
+                    </Button>
+                )
+            });
+        }
+    }
+
+    if (typeof icon === 'string')
+        icon = <i class={"svg-" + icon} />
+    else if (icon === undefined)
+        switch (type) {
+            case 'info':
+                icon = <i src="info-circle" />
+                break;
+            case 'success':
+                icon = <i src="check-circle" />
+                break;
+            case 'warning':
+                icon = <i src="exclamation-circle" />
+                break;
+            case 'error':
+                icon = <i src="times-circle" />
+                break;
+            case 'loading':
+                icon = <i src="spin" />
+                break;
+        }
+        
+    // Autohide
+    if (isToast)
+        React.useEffect(() => {
+            if (autohide) {
+                const timeout = setTimeout(() => close(true), autohide * 1000);
+                return () => clearTimeout(timeout);
+            }
+        }, []);
+
+    let render = isToast ? (
+        <div class="card row bg dark" onClick={() => isToast && !prison && close(true)}>
+
+            {icon}
+
+            <div>
+
+                {typeof title === "string" ? (
+                    <strong>{title}</strong>
+                ) : title}
+
+                {children}
+
+            </div>
+            
+        </div>
+    ) : (
+        <div class={"card pd-2 col al-top " + className} style={width === undefined 
+            ? {}
+            : { minWidth: width + "px", maxWidth: width + "px" }
+        }>
+
+            {(title || icon) && (
+                <header {...{
+                    class: ('col ' + type),
+                    style: cover ? {
+                        backgroundImage: 'url(' + cover + ')'
+                    } : undefined
+                }}>
+
+                    {icon}
+
+                    {typeof title === "string" ? (
+                        <strong>{title}</strong>
+                    ) : title}
+
+                    {(!prison && close) && (
+                        <Button class="close" icon="times" size="s" shape="pill" onClick={async () => {
+                            if (typeof close === "function") {
+
+                                if (onClose !== undefined)
+                                    onClose(false);
+                                else
+                                    close(false);
+                            }
+                        }} />
+                    )}
+
+                </header>
+            )}
+
+            {children && (
+                <div class="col content">
+
+                    {children}
+
+                </div>
+            )}
+
+            {footer && (
+                <footer class="row fill actions">
+
+                    {footer}
+
+                </footer>
+            )}
+
+        </div>
+    )
+
+    return render;
+}

package/client/components/Dialog/index.less

@@ -0,0 +1,151 @@
+
+@c1: #6c5dd3; // Should be darker than c1
+@spacing: 1.2em;
+@toast-zindex: 200;
+@radius: 1rem;
+
+#modals, 
+#toasts {
+
+    z-index: @toast-zindex;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    gap: @spacing;
+    padding: @spacing;
+    
+    &,
+    > .modal {
+        position: fixed;
+        left: 0px; 
+        right: 0px; 
+        bottom: 0px;
+        max-height: 100vh;
+    }
+
+    // Toast
+    > .card,
+    // Modal (pas forcément une card quand bcp de contenu. Ex: inventory)
+    > .modal > div {
+
+        .btn.close {
+            position: absolute;
+            top: @spacing;
+            right: @spacing;
+
+            // Vire le margin-top créé par .col > *
+            margin-top: 0;
+        }        
+    }
+}
+
+#modals {
+
+    &,
+    > .modal {
+        top: 0px; 
+    }
+
+    > .modal {
+
+        @modal-zindex: 9;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: @spacing;
+        z-index: @modal-zindex;
+
+        background: fade(#000, 20%);
+        border-radius: @radius;
+
+        // Pour les animations (ex: conffetis
+        > canvas {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }  
+
+        > .card {
+
+            position: relative;
+            min-width: 300px;
+            max-height: 99vh;
+            max-width: 99vw;
+            width: 400px; // Default width
+            box-shadow: none;
+            overflow-y: auto;
+
+            // Pas d'anim quand pas card, 
+            // Car peut contenir bcp d'elemnts => performance
+            animation: aff-modale 0.1s ease;
+            @keyframes aff-modale {
+                0% {
+                    opacity: 0;
+                    transform: scale(0.8);
+                }
+                100% {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+            }
+
+            > header {
+                > i {
+                    color: @c1;
+                    font-size: 3em;
+                }
+            }
+
+            z-index: 1; // Au dessus de l'animation canvas
+        }
+    }
+}
+
+#toasts {
+    // Toast
+    > .card {
+
+        text-align: left;
+        max-width: 450px;
+        z-index: 999;
+        cursor: pointer;
+        padding-right: @spacing * 1.5;
+
+        animation: aff-toast 0.1s ease;
+        @keyframes aff-toast {
+            0% {
+                opacity: 0.5;
+                transform: scale(0.5);
+            }
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }    
+        
+        > i {
+            color: @c1;
+            flex: 0 0 1em;
+        }
+
+        h2 {
+            font-size: 1em;
+        }
+
+        p {
+            text-align: left;
+        }
+    }
+}
+
+// Selecteur moins profond pour que les clases utilitaires (w-a-x) soient prioritaires
+.modal > .card {
+    // Modal content should always be whiteys adapt from content width
+    //max-width: 500px;
+}