5htp-core 0.0.8 → 0.1.0

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

@@ -133,7 +133,7 @@ export default ({
         }, []);
 
     let render = isToast ? (
-        <div class="card row color dark glass" onClick={() => isToast && !prison && close(true)}>
+        <div class="card row bg dark glass" onClick={() => isToast && !prison && close(true)}>
 
             {icon}
 

package/src/client/components/Dialog/index.less

@@ -61,6 +61,7 @@
         
         > i {
             color: @c1;
+            flex: 0 0 1em;
         }
 
         h2 {
@@ -85,13 +86,13 @@
 
         background: fade(#000, 30%);
         backdrop-filter: blur(50px) saturate(2);
-        border-radius: @layoutRadius;
+        border-radius: @radius;
 
         // Desktop = vertically center the modal
-        @media (min-width: @responsive1) {
+        /*@media (min-width: @responsive1) {
             justify-content: center;
             padding: @spacing;
-        }
+        }*/
 
         // Pour les animations (ex: conffetis
         > canvas {

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

@@ -8,7 +8,7 @@ import { ComponentChild, FunctionComponent } from 'preact';
 import dottie from 'dottie';
 
 // Libs
-import { TListeErreursSaisie, ErreurSaisieSchema } from '@common/errors';
+import { TListeErreursSaisie, InputErrorSchema } from '@common/errors';
 import { propsDefautChampForm, TBasePropsChamp } from '@client/components/input/Base';
 import { TSchema, TRetourValidation, initDonnees, validate as validerSchema, TSchemaChampComplet } from '@common/data/input/validate';
 import { simpleDeepCopy, chemin } from '@common/data/objets';
@@ -280,7 +280,7 @@ export const useForm = <TDonnees extends TObjetDonnees>(
 
                 if (debug) console.log("RETOUR ERREURS API", e);
 
-                if (e instanceof ErreurSaisieSchema) {
+                if (e instanceof InputErrorSchema) {
 
                     setState((stateA) => ({
                         ...stateA,

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

@@ -0,0 +1,58 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import Button from '@client/components/button';
+import Dropdown, { TDialogControls, Props as DropdownProps } from '@client/components/dropdown';
+
+/*----------------------------------
+- CONST
+----------------------------------*/
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+type Choices = string[]
+
+type SearchResultsFunction = (keywords: string) => Choices
+
+export type Props = DropdownProps & {
+    title: string,
+    choices: Choices,
+    value?: string,
+    onChange: (value: string) => void,
+    search?: true | SearchResultsFunction
+}
+
+/*----------------------------------
+- COMONENT
+----------------------------------*/
+
+export default ({ title, choices, value, onChange, ...dropDownProps }: Props) => {
+    const refModal = React.useRef<TDialogControls>(null);
+    return (
+        <Dropdown {...dropDownProps} content={(
+            <ul class="card col menu">
+                {choices.map( jt => (
+                    <li>
+                        <Button active={jt === value} onClick={() => {
+                            onChange(jt);
+                            refModal.current?.close();
+                        }}>
+                            {jt}
+                        </Button>
+                    </li>
+                ))}
+            </ul>
+        )} iconR="chevron-down" refModal={refModal}>
+
+            {value || title}
+
+        </Dropdown>
+    )
+}

package/src/client/components/button.tsx

@@ -135,7 +135,7 @@ export default ({
         className += ' ' + size;
 
     if (type !== undefined)
-        className += ' ' + type;
+        className += ' bg ' + type;
 
     if (icon) {
         if (children === undefined)

package/src/client/components/chart/base.tsx

@@ -382,7 +382,7 @@ export default function <TDonnee extends DonneesGraph, TTypeChartJs extends Char
                     
                 // Default color
                 if (!dataset.colonne.color) 
-                    dataset.colonne.color = css.getPropertyValue('--c1');
+                    dataset.colonne.color = css.getPropertyValue('--cAccent');
 
                 return {
                     label: dataset.colonne.label,

package/src/client/components/containers/Scrollbar/index.less

@@ -70,7 +70,7 @@
         }
 
         &.dragging {
-            background: var(--c1);
+            background: var(--cAccent);
             box-shadow: 0 0 8.3rem var(--cPrincipale);
         }
     }

package/src/client/components/containers/tabs/index.tsx

@@ -55,7 +55,7 @@ export const MenuOnglets = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
 
     const onglets = React.useContext(ContexteOnglets);
     if (onglets === null)
-        return <>Contexte onglets introuvable</>;
+        return <>Contexte onglets NotFound</>;
 
     return (
         <ul {...props} className={"row tabs" + (props.className ? ' ' + props.className : '')}>
@@ -76,7 +76,7 @@ export const Onglet = ({ id, children, asDiv, ...props }: {
 
     const onglets = React.useContext(ContexteOnglets);
     if (onglets === null)
-        return <>Contexte onglets introuvable</>;
+        return <>Contexte onglets NotFound</>;
 
     if (id !== onglets.actuel)
         return null;

package/src/client/components/data/progressbar/circular/index.tsx

@@ -33,7 +33,7 @@ export default ({
     ratioCercle = 1,
     className, 
     style = {},
-    epaisseur = 5,
+    epaisseur = 10,
     rotation,
     etapes,
     taille,

package/src/client/components/data/progressbar/index.less

@@ -12,7 +12,7 @@ div.progressbar {
     }
 
     > .progress {
-        --cBg: var(--c1);
+        --cBg: var(--cAccent);
         background: var(--cBg);
         width: 0%;
         max-width: 100%;
@@ -99,8 +99,8 @@ div.progressbar_old {
 .progressbar-svg {
 
     position: relative;
-    min-width: 100px;
-    min-height: 100px;
+    width: @sizeComponent;
+    height: @sizeComponent;
 
      > svg {
 
@@ -142,6 +142,8 @@ div.progressbar_old {
         left: 0;
         right: 0;
         bottom: 0;
+        // Text should fit inside the progressbar
+        font-size: 0.8em;
 
         > i,
         > img {

package/src/client/components/data/progressbar/index.tsx

@@ -39,9 +39,9 @@ const hsl = (h: number, s: number = 80, l: number = 70) => `hsl(${Math.floor(h)}
 export const couleurViaPc = (pc: number, couleurs: [number, number], ecart: number) => {
 
     return { 
-        couleur1: 'var(--c1)', 
-        couleur2: 'var(--c1)',
-        couleurTxt: 'var(--c1)'
+        couleur1: 'var(--cAccent)', 
+        couleur2: 'var(--cAccent)',
+        couleurTxt: 'var(--cAccent)'
     }
     const [couleurMin, couleurMax] = couleurs;
     const couleur = couleurMin + (pc * (couleurMax - couleurMin));

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

@@ -4,10 +4,12 @@
 
 // Npm
 import React from 'react';
-import { ComponentChild } from 'preact';
+import { ComponentChild, RefObject } from 'preact';
 
 // Core
 import Button, { Props as ButtonProps } from '../button';
+import { TDialogControls } from '../Dialog/Manager';
+export type { TDialogControls } from '../Dialog/Manager';
 
 // Libs
 import useContexte from '@client/context';
@@ -17,23 +19,8 @@ import useContexte from '@client/context';
 ----------------------------------*/
 
 export type Props = ButtonProps & {
-    content: ComponentChild
-}
-
-export type TAction<TDonnee> = {
-    icone?: TIcons,
-    label: ComponentChild,
-    multi?: boolean,
-
-    onClick?: (donnees: TDonnee, index: number) => void,
-    lien?: (donnees: TDonnee, index: number) => string,
-    bouton?: (donnees: TDonnee, index: number) => ButtonProps
-}
-
-export type TActionsPopover = {
-    show: () => void,
-    hide: () => void,
-    toggle: () => void
+    content: ComponentChild,
+    refModal?: RefObject<TDialogControls>
 }
 
 /*----------------------------------
@@ -45,15 +32,19 @@ export default (props: Props) => {
 
     let {
         content,
-        immutable,
+        refModal,
         ...buttonProps
     } = props;
 
     const refButton = React.useRef<HTMLElement>(null);
 
-    const open = () => modal.show(() => content);
+    const open = () => {
+        const modalInstance = modal.show(() => content);
+        if (refModal)
+            refModal.current = modalInstance;
+    }
 
     return (
-        <Button {...buttonProps} onClick={open} refElem={refButton} />
+        <Button {...buttonProps} onClick={(open)} refElem={refButton} />
     )
 }

package/src/client/components/input/BaseV2/index.less

@@ -1,6 +1,6 @@
 @import (reference) '~@/client/assets/theme.less';
 
-@hInput: @sizeComponent * 1.2;
+@hInput: @sizeComponent;
 
 // TODO: Adapter textarea à input/basev2
 .contChamp textarea {
@@ -24,11 +24,11 @@
     border-radius: @radius;
 
     --cBg2: #eee;
-    background: fade(#000, 5%);
     //box-shadow: 1px 3px 0 fade(#000,4%), 0 1px 2px 0 fade(#000,2%);
 
     > i {
         margin-left: 0.5em;
+        color: var(--cTxtDesc);
     }
 
     .contValue {
@@ -42,7 +42,7 @@
     @gapAround: (@hInput - @labelH) / 2;
     > .btn:first-child { margin-left: 0 - @gapAround / 2; }
 
-    @labelH: 1.2em;
+    @labelH: 0.6em;
     label {
         position: absolute;
         left: 0; width: 100%;
@@ -51,6 +51,7 @@
         align-items: center;
 
         height: @labelH;
+        font-size: 0.8em;
         color: var(--cTxtDesc);
         transition: all .1s ease-out;
     }

package/src/client/components/input/BaseV2/index.tsx

@@ -57,8 +57,10 @@ export function useInput<TValue>(
     // External value change
     React.useEffect(() => {
 
-        console.log("External value change", externalValue);
-        setState({ value: externalValue, valueSource: 'external' })
+        if (externalValue !== undefined && externalValue !== state.value) {
+            console.log("External value change", externalValue);
+            setState({ value: externalValue, valueSource: 'external' })
+        }
         
     }, [externalValue]);
 

package/src/client/components/input/Slider/index.less

@@ -15,7 +15,7 @@
         height: @hTrack;
 
         &-0 {
-            background: var(--c1);
+            background: var(--cAccent);
             border-radius: @hTrack / 2 0 0 @hTrack / 2;
         }
 

package/src/client/components/input/UploadImage/index.less

@@ -9,7 +9,7 @@
     background: @cBgPage + #090909;
 
     &:not(.enCours):hover {
-        border-color: var(--c1);
+        border-color: var(--cAccent);
     }
 
     // Encadré

package/src/client/context/index.ts

@@ -7,7 +7,6 @@ import React from 'react';
 import type { ComponentChild } from 'preact';
 
 // Core
-import { AuthRequise } from '@common/errors';
 import { createDialog } from '@client/components/Dialog/Manager';
 import BaseRequest from '@common/router/request';
 import router, { TClientRoute } from '@client/router';
@@ -112,42 +111,6 @@ export class ClientContext {
         this.request = request;
         this.user = this.request.user || { ...GuestUser };
 
-        this.api.reload = (ids?: string | string[], params?: TObjetDonnees) => {
-            
-            if (this.page === undefined)
-                throw new Error("context.page is missing");
-
-            if (ids === undefined)
-                ids = Object.keys(this.page.fetchers);
-            else if (typeof ids === 'string')   
-                ids = [ids];
-
-            console.log("[api] Reload data", ids, params, this.page.fetchers);
-
-            for (const id of ids) {
-
-                const fetcher = this.page.fetchers[id];
-                if (fetcher === undefined)
-                    return console.error(`Unable to reload ${id}: Request not found in fetchers list.`);
-
-                if (params !== undefined)
-                    fetcher.data = { ...(fetcher.data || {}), ...params };
-
-                console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
-                const indicator = this.toast.loading("Loading ...");
-
-                this.request.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
-
-                    this.api.set({ [id]: data });
-
-                }).finally(() => {
-
-                    indicator.close(true);
-
-                })
-            }
-        }
-
     }
 
     // Is overwrote by the native app
@@ -194,10 +157,51 @@ export class ClientContext {
 
     // fetch doit appartenir à response, et non clientcontxt
     // car la méthode varie selon client (http) ou serveur (router.resolve)
-    public api = this.request.api as this["request"]["api"] & {
-        reload: (id?: string, params?: TObjetDonnees) => void,
-        set: (data: TObjetDonnees) => void
-    };
+    public api = {
+        ...this.request.api,
+        set: (newData: TObjetDonnees) => {
+
+            console.log("[api] Update page data", newData);
+            if (this.page)
+                this.page.setAllData(curData => ({ ...curData, ...newData }));
+            
+        },
+        reload: (ids?: string | string[], params?: TObjetDonnees) => {
+            
+            if (this.page === undefined)
+                throw new Error("context.page is missing");
+
+            if (ids === undefined)
+                ids = Object.keys(this.page.fetchers);
+            else if (typeof ids === 'string')   
+                ids = [ids];
+
+            console.log("[api] Reload data", ids, params, this.page.fetchers);
+
+            for (const id of ids) {
+
+                const fetcher = this.page.fetchers[id];
+                if (fetcher === undefined)
+                    return console.error(`Unable to reload ${id}: Request not found in fetchers list.`);
+
+                if (params !== undefined)
+                    fetcher.data = { ...(fetcher.data || {}), ...params };
+
+                console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
+                const indicator = this.toast.loading("Loading ...");
+
+                this.request.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
+
+                    this.api.set({ [id]: data });
+
+                }).finally(() => {
+
+                    indicator.close(true);
+
+                })
+            }
+        }
+    }
 
     public handleError(e: Error) {
         switch (e.http) {

package/src/client/router/component.tsx

@@ -50,6 +50,7 @@ const Page = ({ page, isCurrent }: { page: PageResponse, isCurrent?: boolean })
             id={page.id === undefined ? undefined : 'page_' + page.id}
         >
 
+            {/* Make request parameters and api data accessible from the page component */}
             {page.component ? (
 
                 <page.component {...gui.request.data} {...data} />

package/src/client/router/index.tsx

@@ -94,12 +94,19 @@ export const Link = ({ to, ...props }: {
     className?: string
 }) => {
 
-    return (
-        <a {...props} href={to} onClick={(e) => {
+    // External = open in new tab by default
+    if (to[0] !== '/' || to.startsWith('//'))
+        props.target = '_blank';
+    // Otherwise, propagate to the router
+    else 
+        props.onClick = (e) => {
             history?.push(to);
             e.preventDefault();
             return false
-        }}/>
+        }
+
+    return (
+        <a {...props} href={to} />
     )
 
 }

package/src/common/data/input/validate.ts

@@ -8,7 +8,7 @@
 import { ComponentChild } from 'preact'
 
 // Libs
-import { Erreur, TListeErreursSaisie, ErreurSaisieSchema } from '@common/errors';
+import { Erreur, TListeErreursSaisie, InputErrorSchema } from '@common/errors';
 
 import { EXCLURE_VALEUR } from './validators/build';
 
@@ -216,7 +216,7 @@ export const validate = async <TSchemaA extends TSchema, TDonnees extends TObjet
     }
 
     if (nbErreurs !== 0 && opts.critique === true) {
-        throw new ErreurSaisieSchema(erreurs);
+        throw new InputErrorSchema(erreurs);
     }
 
     debug && console.log('[schema][valider]', inputAvalider, '=>', output);

package/src/common/data/input/validators/basic.ts

@@ -11,7 +11,7 @@ import {
 } from 'validator';
 
 // Libs
-import { ErreurSaisie } from '@common/errors';
+import { InputError } from '@common/errors';
 import File from '@common/data/file';
 
 // Libs métier
@@ -39,7 +39,7 @@ export const object = (opts: TSchemaChamp<object> & {} = {}) => champ<object>('o
             }*/
 
         if (typeof val !== 'object' || val.constructor !== Object)
-            throw new ErreurSaisie("This value must be an object.");
+            throw new InputError("This value must be an object.");
 
         return opts.valider ? await opts.valider(val, donneesSaisie, donneesRetour) : val;
     },
@@ -60,7 +60,7 @@ export const array = (subtype?: Schema<any> | TSchemaChamp<any[]>, { choix, ...o
             //console.log('VALIDER ARRAY', items, donneesSaisie);
 
             if (!Array.isArray(items))
-                throw new ErreurSaisie("This value must be an array.");
+                throw new InputError("This value must be an array.");
 
             // Verif items
             if (subtype !== undefined) {
@@ -86,7 +86,7 @@ export const choice = (values: any[], opts: TSchemaChamp<any> & {} = {}) => cham
     valider: async (val: any, donneesSaisie: TObjetDonnees, donneesRetour: TObjetDonnees) => {
 
         if (!values.includes(val))
-            throw new ErreurSaisie("Invalid value. Must be: " + values.join(', '));
+            throw new InputError("Invalid value. Must be: " + values.join(', '));
 
         return opts.valider ? await opts.valider(val, donneesSaisie, donneesRetour) : val;
     },
@@ -104,21 +104,21 @@ export const string = ({ min, max, ...opts }: TSchemaChamp<string> = {}) => cham
         else if (typeof val === 'number')
             return val.toString();
         else if (typeof val !== 'string')
-            throw new ErreurSaisie("This value must be a string.");
+            throw new InputError("This value must be a string.");
 
         // Espaces blancs
         val = trim(val);
 
         // Taille min
         if (val.length < min)
-            throw new ErreurSaisie(`Must be at least ` + min + ' characters');
+            throw new InputError(`Must be at least ` + min + ' characters');
 
         // Taille max
         if (val.length > max)
             if (corriger)
                 val = val.substring(0, max);
             else
-                throw new ErreurSaisie(`Must be up to ` + max + ' characters');
+                throw new InputError(`Must be up to ` + max + ' characters');
 
         return opts.valider ? await opts.valider(val, donneesSaisie, donneesRetour) : val;
     },
@@ -131,7 +131,7 @@ export const url = (opts: TSchemaChamp<string> & {} = {}) => string({
         if (!isURL(val, {
             // https://www.npmjs.com/package/validator
         }))
-            throw new ErreurSaisie(`Please provide a valid URL.`);
+            throw new InputError(`Please provide a valid URL.`);
 
         return opts.valider ? await opts.valider(val, donneesSaisie, donneesRetour, corriger) : val;
     },
@@ -142,7 +142,7 @@ export const email = (opts: TSchemaChamp<string> & {} = {}) => string({
     valider: async (val: any, donneesSaisie: TObjetDonnees, donneesRetour: TObjetDonnees, corriger?: boolean) => {
 
         if (!isEmail(val))
-            throw new ErreurSaisie("Please enter a valid email address.");
+            throw new InputError("Please enter a valid email address.");
 
         const retour = normalizeEmail(val);
 
@@ -177,7 +177,7 @@ const nombre = (float: boolean) => ({ ...opts }: TSchemaChamp<number> & {} = {})
                 if (corriger)
                     val = opts.min;
                 else
-                    throw new ErreurSaisie("This value must be a number.");
+                    throw new InputError("This value must be a number.");
             }
 
             // Minimum
@@ -185,14 +185,14 @@ const nombre = (float: boolean) => ({ ...opts }: TSchemaChamp<number> & {} = {})
                 if (corriger)
                     val = opts.min;
                 else
-                    throw new ErreurSaisie(`Must be at least ` + opts.min);
+                    throw new InputError(`Must be at least ` + opts.min);
 
             // Maximum
             if (opts.max !== undefined && val > opts.max)
                 if (corriger)
                     val = opts.max;
                 else
-                    throw new ErreurSaisie(`Must be up to ` + opts.max);
+                    throw new InputError(`Must be up to ` + opts.max);
 
         }
 
@@ -210,7 +210,7 @@ export const bool = (opts: TSchemaChamp<boolean> & {} = {}) => champ<boolean>('b
     valider: async (val: any, donneesSaisie: TObjetDonnees, donneesRetour: TObjetDonnees) => {
 
         if (typeof val !== 'boolean' && !['true', 'false'].includes(val))
-            throw new ErreurSaisie("This value must be a boolean.");
+            throw new InputError("This value must be a boolean.");
 
         val = !!val;
 
@@ -233,12 +233,12 @@ export const date = (opts: TSchemaChamp<Date> & {} = {}) => champ<Date>('date',
         if (chaine) {
 
             if (!isISO8601(val))
-                throw new ErreurSaisie("This value must be a date.");
+                throw new InputError("This value must be a date.");
 
             val = toDate(val);
 
         } else if (!(val instanceof Date))
-            throw new ErreurSaisie("This value must be a date.");
+            throw new InputError("This value must be a date.");
 
         return opts.valider ? await opts.valider(val, donneesSaisie, donneesRetour) : val;
 
@@ -265,7 +265,7 @@ export const validateurFichier = async (
     console.log('VALIDER FICHIER', type, val);
 
     if (!(val instanceof NormalizedFile))
-        throw new ErreurSaisie(`Must be a File (${typeof val} received)`);
+        throw new InputError(`Must be a File (${typeof val} received)`);
 
     // MIME
     if (type !== undefined) {
@@ -284,7 +284,7 @@ export const validateurFichier = async (
         // Vérification
         const mimeFichier = val.type;
         if (!mimetypes.includes(mimeFichier))
-            throw new ErreurSaisie('Only the following formats are allowed: ' + mimetypes.join(', ') + '. The file you gave is ' + mimeFichier + '.');
+            throw new InputError('Only the following formats are allowed: ' + mimetypes.join(', ') + '. The file you gave is ' + mimeFichier + '.');
 
     }
 
@@ -292,7 +292,7 @@ export const validateurFichier = async (
     if (taille) {
         const tailleFichier = val.size / 1024 / 1024; // Mo
         if (tailleFichier > taille)
-            throw new ErreurSaisie(`Le fichier ne doit pas faire plus de ${taille} Mo (taille reçue: ${tailleFichier} Mo)`);
+            throw new InputError(`Le fichier ne doit pas faire plus de ${taille} Mo (taille reçue: ${tailleFichier} Mo)`);
     }
 
     return opts.valider ? await opts.valider(val, donneesSaisie, donneesRetour) : val;