5htp-core 0.2.8 → 0.2.9

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.2.8",
+	"version": "0.2.9",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/assets/css/components/card.less

@@ -49,7 +49,32 @@
     }
 
     &.col {
-        padding: @cardPaddingLong @cardPadding;
+        padding: @cardPadding @cardPaddingLong;
+
+        &.inside {
+
+            padding: 0;
+            gap: 0;
+            align-items: stretch;
+
+            > * {
+                padding: @cardPaddingLong @cardPadding;
+                &:first-child {
+                    border-top-left-radius: inherit;
+                    border-top-right-radius: inherit;
+                }
+                &:last-child {
+                    border-bottom-left-radius: inherit;
+                    border-bottom-right-radius: inherit;
+                }
+            }
+        }
+
+        &.sep {
+            > * + * {
+                border-top: solid 1px #eee;
+            }
+        }
     }
 
     &.selected {

package/src/client/assets/css/components.less

@@ -32,7 +32,8 @@
 
 .card,
 .btn,
-.table,
+.input.text,
+.input.select,
 i.solid {
 
     .build-theme-bg( #fff, #8E8E8E);
@@ -48,16 +49,6 @@ i.solid {
 }
 
 .input.text {
-    border: solid 0.25em #eee;
-
-    &:hover {
-        border-color: #ddd;
-    }
-    
-    &.focus {
-        border-color: @c1;
-    }
-
     &.error {
         border-color: @cError;
     }

package/src/client/assets/css/text/text.less

@@ -111,7 +111,7 @@ header > strong {
 }
 
 em {
-    font-style: normal;
+    /*font-style: normal;
     position: relative;
     display: inline-block;
     color: inherit;
@@ -129,7 +129,7 @@ em {
         bottom: 0.05em;
         left: -0.1em;
         right: -0.1em;
-    }
+    }*/
 }
 
 pre {
@@ -148,6 +148,8 @@ pre {
 @readingMargin: 2.4rem;
 .reading {
 
+    --cTxtBase: #555;
+
     .card > & {
 
         padding: 3vh 0 !important;
@@ -165,20 +167,21 @@ pre {
         max-width: var(--focusWidth);
         margin: 0 auto;
         width: 100%;
-        padding: 0 @readingMargin;
+        //padding: 0 @readingMargin;
     }
 
     &,
     p {
         font-family: 'Lato', sans-serif;
         font-size: 1.1rem;
-        line-height: 1.8em;
+        line-height: 2em;
         color: var(--cTxtBase);
         text-align: justify;
     }
 
     h2, h3, h4 {
         text-align: left;
+        margin: @spacing * 2 0;
     }
 
     h2 {

package/src/client/components/Form.ts

@@ -28,10 +28,13 @@ type FieldsAttrs<TFormData extends {}> = {
 }
 
 export type Form<TFormData extends {} = {}> = {
+    
     fields: FieldsAttrs<TFormData>,
     data: TFormData,
     options: TFormOptions<TFormData>,
-    validate: (data: TFormData) => TValidationResult<{}>,
+    autosavedData?: Partial<TFormData>,
+
+    validate: (data: Partial<TFormData>) => TValidationResult<{}>,
     set: (data: Partial<TFormData>) => void,
     submit: (additionnalData?: Partial<TFormData>) => Promise<any>,
 } & FormState
@@ -48,30 +51,30 @@ type FormState = {
 export default function useForm<TFormData extends {}>(
     schema: Schema<TFormData>,
     options: TFormOptions<TFormData>
-) {
+): [ Form, FieldsAttrs<TFormData> ] {
 
     const context = useContext();
 
     /*----------------------------------
     - INIT
     ----------------------------------*/
-    let initialData: any;
+    let autosavedData: TFormData | undefined;
     if (options.autoSave && typeof window !== 'undefined') {
         const autosaved = localStorage.getItem('form.' + options.autoSave.id);
         if (autosaved !== null) {
             try {
                 console.log('[form] Parse autosaved from json:', autosaved);
-                initialData = JSON.parse(autosaved);
+                autosavedData = JSON.parse(autosaved);
             } catch (error) {
                 console.error('[form] Failed to decode autosaved data from json:', autosaved);
             }
         }
     }
-    if (initialData === undefined)
-        initialData = options.data || {};
 
-    const fields = React.useRef<FieldsAttrs<TFormData>>(null);
-    const [data, setData] = React.useState<TFormData>(initialData);
+    const initialData: Partial<TFormData> = options.data || {};
+
+    const fields = React.useRef<FieldsAttrs<TFormData> | null>(null);
+    const [data, setData] = React.useState< Partial<TFormData> >(initialData);
     const [state, setState] = React.useState<FormState>({
         isLoading: false,
         errorsCount: 0,
@@ -93,7 +96,7 @@ export default function useForm<TFormData extends {}>(
     /*----------------------------------
     - ACTIONS
     ----------------------------------*/
-    const validate = (allData: TFormData = data, validateAll: boolean = true) => {
+    const validate = (allData: Partial<TFormData> = data, validateAll: boolean = true) => {
 
         const validated = schema.validate(allData, allData, {}, {
             // Ignore the fields where the vlaue has not been changed
@@ -130,7 +133,7 @@ export default function useForm<TFormData extends {}>(
         // Callback
         let submitResult: any;
         if (options.submit)
-            submitResult = await options.submit(allData);
+            submitResult = await options.submit(allData as TFormData);
 
         // Reset autosaved data
         if (options.autoSave)
@@ -149,14 +152,14 @@ export default function useForm<TFormData extends {}>(
         }));
     }
 
-    const saveLocally = (data: TFormData, id: string) => {
+    const saveLocally = (data: Partial<TFormData>, id: string) => {
         console.log('[form] Autosave data for form:', id, ':', data);
         localStorage.setItem('form.' + id, JSON.stringify(data));
     }
 
     // Rebuild the fields attrs when the schema changes
     if (fields.current === null || Object.keys(schema).join(',') !== Object.keys(fields.current).join(',')) {
-        fields.current = {}
+        fields.current = {} as FieldsAttrs<TFormData>
         for (const fieldName in schema.fields) {
 
             const validator = schema.fields[fieldName];
@@ -202,6 +205,7 @@ export default function useForm<TFormData extends {}>(
         validate,
         submit,
         options,
+        autosavedData,
         ...state
     }
 

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

@@ -69,36 +69,7 @@ export default React.forwardRef<HTMLDivElement, Props>(({
     ...otherProps
 }: Props, ref) => {
 
-    /*----------------------------------
-    - INIT
-    ----------------------------------*/
-
-    const choicesViaFunc = typeof initChoices === 'function';
-    if (choicesViaFunc && enableSearch === undefined)
-        enableSearch = true;
-
-    const [search, setSearch] = React.useState<{
-        keywords: string,
-        loading: boolean
-    }>({
-        keywords: '',
-        loading: choicesViaFunc
-    });
-
-    const [choices, setChoices] = React.useState<Choices>( choicesViaFunc ? [] : initChoices );
-
-    /*----------------------------------
-    - ACTIONS
-    ----------------------------------*/
-
-    React.useEffect(() => {
-        if (choicesViaFunc) {
-            initChoices(search.keywords).then((searchResults) => {
-                setSearch(s => ({ ...s, loading: false }))
-                setChoices(searchResults);
-            })
-        }
-    }, [initChoices, search.keywords]);
+   
 
     /*----------------------------------
     - RENDER

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

@@ -7,6 +7,7 @@ import React from 'react';
 
 // Core
 import Dropdown, { TDropdownControl, Props as DropdownProps } from '@client/components/dropdown';
+import Input from '@client/components/inputv3';
 
 // Specific
 import ChoiceSelector, { 
@@ -23,60 +24,178 @@ export type Props = DropdownProps & SelectorProps & {
     errors?: string[],
 }
 
+const ChoiceElement = ({ choice, currentList, onChange, multiple, includeCurrent }: {
+    choice: Choice,
+    currentList: Choice[],
+    includeCurrent: boolean
+} & Pick<Props, 'onChange'|'multiple'>) => {
+
+    const isCurrent = currentList.some(c => c.value === choice.value);
+    if (isCurrent && !includeCurrent) return null;
+
+    return (
+        <li class={"badge clickable " + (isCurrent ? 'bg primary' : '')} onClick={() => {
+            onChange( current => {
+                
+                return multiple 
+                    ? (isCurrent
+                        ? current.filter(c => c.value !== choice.value)
+                        : [...(current || []), choice] 
+                    )
+                    : (isCurrent
+                        ? undefined
+                        : choice
+                    )
+            });
+
+        }}>
+            {/*search.keywords ? (
+                <span>
+                
+                    <strong>{search.keywords}</strong>{choice.label.slice( search.keywords.length )}
+
+                </span>
+            ) : */choice.label}
+        </li>
+    )
+}
+
 /*----------------------------------
 - COMONENT
 ----------------------------------*/
 export default ({ 
+    // Input basics
     title, 
     errors,
-    ...props 
+    icon,
+    required,
+    validator, 
+
+    // Choice selection
+    choices: initChoices, 
+    noneSelection, 
+    enableSearch, 
+    value: current, 
+    onChange, 
+    inline, 
+    multiple, 
+    ...otherProps
 }: Props) => {
 
     /*----------------------------------
     - INIT
     ----------------------------------*/
 
-    const refDropdown = React.useRef<TDropdownControl>(null);
+    const choicesViaFunc = typeof initChoices === 'function';
+    if (choicesViaFunc && enableSearch === undefined)
+        enableSearch = true;
+
+    const refInputSearch = React.useRef<HTMLInputElement | null>(null);
+
+    let className: string = 'input select txt-left';
+
+    const isRequired = required || validator?.options.min;
+
+    const [search, setSearch] = React.useState<{
+        keywords: string,
+        loading: boolean
+    }>({
+        keywords: '',
+        loading: choicesViaFunc
+    });
+
+    const [choices, setChoices] = React.useState<Choice[]>( choicesViaFunc ? [] : initChoices );
 
     /*----------------------------------
     - ACTIONS
     ----------------------------------*/
 
-    const currentList: Choice[] = props.value === undefined
+    React.useEffect(() => {
+        if (choicesViaFunc && (search.keywords || !enableSearch)) {
+            initChoices(search.keywords).then((searchResults) => {
+                setSearch(s => ({ ...s, loading: false }))
+                setChoices(searchResults);
+            })
+        }
+    }, [initChoices, search.keywords]);
+
+    const currentList: Choice[] = current === undefined
         ? []
-        : (Array.isArray(props.value) 
-            ? props.value 
-            : [props.value]
+        : (Array.isArray(current) 
+            ? current 
+            : [current]
         );
 
     /*----------------------------------
     - RENDER
     ----------------------------------*/
     return <>
-        {props.inline ? (
-            <ChoiceSelector {...props} currentList={currentList} />
-        ) : (
-            <Dropdown {...props} content={(
-                <ChoiceSelector {...props} currentList={currentList} refDropdown={refDropdown} />
-            )} iconR="chevron-down" refDropdown={refDropdown}>
-
-                {currentList.length === 0
-                    ? title
-                    : currentList.map(
-                        choice => (
-                            <span class="badge">
-                                {choice.label}
-                            </span>
-                        )
+
+        <div class="col sp-05">
+            <div class={className} onClick={() => refInputSearch.current?.focus()}>
+                    
+                <div class="row al-left wrap pd-1">
+                    
+                    {icon !== undefined && (
+                        <i src={icon} />
                     )}
 
-            </Dropdown>
-        )}
+                    <div class="col al-left sp-05">
+                        
+                        <label>{title}{required && (
+                            <span class="fg error">&nbsp;*</span>
+                        )}</label>
+
+                        <div class="row al-left wrap sp-05">
 
-        {errors?.length && (
-            <div class="fg error txt-left">
-                {errors.join('. ')}
+                            {/*!isRequired && (
+                                <span class={"badge clickable " + (currentList.length === 0 ? 'bg primary' : '')}
+                                    onClick={() => onChange(multiple ? [] : undefined)}>
+                                    {noneSelection || 'None'}
+                                </span>
+                            )*/}
+
+                            {( enableSearch ? currentList : choices ).map( choice => (
+                                <ChoiceElement choice={choice} 
+                                    currentList={currentList}
+                                    onChange={onChange}
+                                    multiple={multiple}
+                                    includeCurrent 
+                                />
+                            ))}
+
+                            {enableSearch && (
+                                <Input  
+                                    placeholder="Type your search here"
+                                    value={search.keywords} 
+                                    onChange={keywords => setSearch(s => ({ ...s, loading: true, keywords }))} 
+                                    inputRef={refInputSearch}
+                                />
+                            )}    
+                        </div>
+                    </div>
+
+                </div>
+
+                {(enableSearch && choices.length !== 0 && search.keywords.length !== 0) && (
+                    <ul class="row al-left wrap sp-05 pd-1">
+                        {choices.map( choice => (
+                            <ChoiceElement choice={choice} 
+                                currentList={currentList}
+                                onChange={onChange}
+                                multiple={multiple}
+                            />
+                        ))}
+                    </ul>
+                )}
+                
             </div>
-        )}
+            {errors?.length && (
+                <div class="fg error txt-left">
+                    {errors.join('. ')}
+                </div>
+            )}
+        </div>
+
     </>
 }

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

@@ -71,7 +71,7 @@ export default (props: Props) => {
                     refContent.current, 
                     false, 
                     side, 
-                    frame || document.getElementById('page') || undefined
+                    /*frame || document.getElementById('page') || */undefined
                 )
             );
 

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

@@ -65,6 +65,7 @@ export default ({
                     setValue( !value );
                 }}
                 checked={value}
+                {...fieldProps}
             />
 
             <label htmlFor={id} class="col-1 txt-left">

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

@@ -1,4 +1,4 @@
-.champ.slider {
+.input.slider {
     @hSlider: 2.5rem;
     @hTrack: 0.5rem;
 

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

@@ -1,9 +1,16 @@
 /*----------------------------------
 - DEPENDANCES
 ----------------------------------*/
+
+// Npm
 import React from 'react';
+import { VNode, JSX } from 'preact';
 import Slider from 'react-slider';
-import Champ from '../Base';
+
+// Core libs
+import { useInput, InputBaseProps } from '../../inputv3/base';
+import { default as Validator } from '@common/validation/validator';
+import type SchemaValidators from '@common/validation/validators';
 
 /*----------------------------------
 - TYPES
@@ -14,44 +21,78 @@ type TValeurDefaut = typeof valeurDefaut;
 type TValeurOut = string;
 
 export type Props = {
-    valeur: TValeur,
-    step?: number,
 
+    value: TValeur,
+
+    step?: number,
     min?: number,
     max?: number,
 
-    formater?: (valeur: number) => string
+    format?: (value: number) => string
 }
 
+
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
 import './index.less';
-export default Champ<Props, TValeurDefaut, TValeurOut>('slider', { valeurDefaut, saisieManuelle: false }, ({
-    suffixeLabel, attrsChamp, 
-    step, min, max, formater
-}, { valeur, state, setState }, rendre) => {
-
-    if (suffixeLabel === undefined)
-        suffixeLabel = <strong>{formater ? formater(valeur) : valeur}</strong>
-
-    // On copie les attributs pour ne pas modifer l'objet attrsChamp et provoquer des comportements imprévus
-    let attributs = { ...attrsChamp };
-
-    return rendre((
-        <Slider {...attributs}
-            step={step}
-            min={min} 
-            max={max} 
-
-            value={valeur}
-            onChange={(valeur: number) => {
-                setState({ valeur });
-            }}
-
-            className="champ slider"
-            thumbClassName="thumb"
-            trackClassName="track"
-        />
-    ), { suffixeLabel });
-});
+export default ({ 
+    // Decoration
+    icon, prefix, required,
+    step, min, max,
+    // State
+    errors,
+    // Behavior
+    type,
+    ...props 
+}: Props & InputBaseProps<number> & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'onChange'>) => {
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    const [{ value, focus, fieldProps }, setValue, commitValue, setState] = useInput(props, 0);
+
+    
+    /*----------------------------------
+    - ATTRIBUTES
+    ----------------------------------*/
+
+    let className: string = 'input slider';
+
+   
+
+    /*----------------------------------
+    - VALIDATION
+    ----------------------------------*/
+
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return <>
+        <div class={className}>
+            <div class="contValue">
+                <Slider
+                    step={step}
+                    min={min} 
+                    max={max} 
+
+                    value={value}
+                    onChange={(value: number) => {
+                        setValue(value)
+                    }}
+
+                    className="champ slider"
+                    thumbClassName="thumb"
+                    trackClassName="track"
+                />
+            </div>
+        </div>
+        {errors?.length && (
+            <div class="fg error txt-left">
+                {errors.join('. ')}
+            </div>
+        )}
+    </>
+}

package/src/client/components/inputv3/base.less

@@ -1,4 +1,5 @@
 @hInput: @sizeComponent;
+@labelH: 0.6em;
 
 // TODO: Adapter textarea à input/basev2
 .contChamp textarea {
@@ -9,56 +10,93 @@
     padding-top: @spacing * 2 !important;
 }
 
+.input {
+    &.text,
+    &.select {
+
+        > i {
+            color: var(--cTxtDesc);
+        }
+        
+        label {
+            display: flex;
+            align-items: center;
+            color: var(--cTxtImportant);
+            font-size: 0.9em;
+            font-weight: 600;
+            transition: all .1s ease-out;
+        }
+    }
+}
+
+.input.select {
+
+    padding: 0;
+
+    > * {
+        + * {
+            border-top: solid 1px var(--cLine);;
+        }
+    }
+
+    .input.text {
+        border: none;
+        box-shadow: none;
+        padding: 0;
+        height: auto;
+        width: 150px;
+    }
+}
+
 .input.text {
-    
+
     display: flex;
     align-items: center;
+    align-items: flex-start;
     padding: @spacing;
-    gap: @spacing;
+    gap: 1em;
 
     // Inputs don't have to have the same height as the buttons,
     // Since they are not supposed to be on the same row (mobile first design)
     height: @hInput;
-    border-radius: @radius;
+    align-items: center;
 
     --cBg2: #eee;
     //box-shadow: 1px 3px 0 fade(#000,4%), 0 1px 2px 0 fade(#000,2%);
 
-    > i {
-        color: var(--cTxtDesc);
-    }
-
-    .contValue {
-        position: relative;
-        flex: 1;
-        &, * {
-            cursor: text;
-        }
-    }
-
     @gapAround: (@hInput - @labelH) / 2;
     > .btn:first-child { margin-left: 0 - @gapAround / 2; }
 
-    @labelH: 0.6em;
     label {
         position: absolute;
         left: 0; width: 100%;
         top: 0;
-        display: flex;
-        align-items: center;
-
         height: @labelH;
         font-size: 0.8em;
         line-height: 0.8em;
-        color: var(--cTxtDesc);
-        transition: all .1s ease-out;
+
+        color: var(--cTxtImportant);
     }
 
     &.empty:not(.focus)  {
         label {
             height: 100%;
             font-size: 1em;
-            //color: var(--cTxtImportant);
+            color: var(--cTxtBase);
+        }
+    }
+
+    .contValue {
+        position: relative;
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: @spacing / 2;
+
+        &, * {
+            cursor: text;
         }
     }
 
@@ -69,10 +107,19 @@
         font-family: inherit;
         width: 100%;
         padding: @labelH 0 0 0;
+        font-size: 1rem;
+    }
+
+    input {
         height: 2.5em;
     }
 
+    &.multiline {
+        height: auto;
+    }
+
     textarea {
         padding: @labelH + @spacing 0 @spacing 0;
+        min-height: 4em;
     }
 }

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

@@ -20,7 +20,7 @@ export type InputBaseProps<TValue> = {
     errors?: string[],
 
     value: TValue,
-    onChange?: StateUpdater<TValue>,
+    onChange?: (value: TValue) => void,
 }
 
 export type TInputState<TValue> = {
@@ -35,7 +35,7 @@ export type TInputState<TValue> = {
 - HOOKS
 ----------------------------------*/
 export function useInput<TValue>(
-    { value: externalValue, onChange }: InputBaseProps<TValue>, 
+    { value: externalValue, onChange, ...otherProps }: InputBaseProps<TValue>, 
     defaultValue: TValue,
     autoCommit: boolean = false
 ): [
@@ -48,7 +48,7 @@ export function useInput<TValue>(
     const [state, setState] = useState<TInputState<TValue>>({
         value: externalValue !== undefined ? externalValue : defaultValue,
         valueSource: 'external',
-        fieldProps: {},
+        fieldProps: otherProps,
         focus: false,
         changed: false
     });
@@ -57,7 +57,7 @@ export function useInput<TValue>(
         setState({ value, valueSource: 'internal', changed: true });
 
         if (autoCommit)
-            commitValue(value);
+            commitValue();
     };
 
     const commitValue = () => {

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

@@ -71,6 +71,8 @@ export default ({
         
     }, [value]);
 
+    const updateValue = v => setValue( type === 'number' ? parseFloat(v) : v );
+
     const refInput = inputRef || React.useRef<HTMLInputElement>();
     
     /*----------------------------------
@@ -98,7 +100,8 @@ export default ({
     } else if (type === 'longtext') {
 
         prefix = prefix || <i src="text" />;
-        Tag = 'textarea'//TextareaAutosize;
+        Tag = 'textarea';
+        className += ' multiline';
 
     } else if (type === 'number') {
 
@@ -139,42 +142,44 @@ export default ({
     /*----------------------------------
     - RENDER
     ----------------------------------*/
-    return <>
-        <div class={className} onClick={() => refInput.current?.focus()}>
-
-            {prefix}
-
-            <div class="contValue">
-
-                <Tag {...fieldProps}
-                    // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
-                    ref={refInput}
-                    value={value}
-
-                    onFocus={() => setState({ focus: true })}
-                    onBlur={() => setState({ focus: false })}
-                    onChange={(e) => setValue(e.target.value)}
-
-                    onKeyDown={(e) => {
-                        if (onPressEnter && e.key === 'Enter' && value !== undefined) {
-                            commitValue();
-                            onPressEnter(value)
-                        }
-                    }}
-                />
-
-                <label>{props.title}{required && (
-                    <span class="fg error">&nbsp;*</span>
-                )}</label>
+    return (
+        <div class="col sp-05">
+            <div class={className} onClick={() => refInput.current?.focus()}>
+
+                {prefix}
+
+                <div class="contValue">
+
+                    <Tag {...fieldProps}
+                        // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
+                        ref={refInput}
+                        value={value}
+
+                        onFocus={() => setState({ focus: true })}
+                        onBlur={() => setState({ focus: false })}
+                        onChange={(e) => updateValue(e.target.value)}
+
+                        onKeyDown={(e) => {
+                            if (onPressEnter && e.key === 'Enter' && value !== undefined) {
+                                commitValue();
+                                onPressEnter(value)
+                            }
+                        }}
+                    />
+
+                    <label>{props.title}{required && (
+                        <span class="fg error">&nbsp;*</span>
+                    )}</label>
+                </div>
+
+                {suffix}
+                
             </div>
-
-            {suffix}
-            
+            {errors?.length && (
+                <div class="fg error txt-left">
+                    {errors.join('. ')}
+                </div>
+            )}
         </div>
-        {errors?.length && (
-            <div class="fg error txt-left">
-                {errors.join('. ')}
-            </div>
-        )}
-    </>
+    )
 }

package/src/client/services/router/index.tsx

@@ -147,6 +147,7 @@ export default class ClientRouter<
     }
 
     public go( url: string ) {
+        console.log( LogPrefix, "Go to", url);
         history?.replace(url);
     }
 

package/src/common/router/response/page.ts

@@ -17,8 +17,6 @@ import { history } from '@client/services/router/request/history';
 export type TDataProvider<TProvidedData extends TFetcherList = {}> = 
     (context: TClientOrServerContext/* & TUrlData */) => TProvidedData
 
-
-
 // The function that renders routes
 export type TFrontRenderer<
     TProvidedData extends TFetcherList = {}, 
@@ -43,6 +41,8 @@ export type TPageResource = {
     preload?: boolean
 })
 
+const debug = false;
+
 /*----------------------------------
 - CLASS
 ----------------------------------*/
@@ -81,7 +81,7 @@ export default class PageResponse<TRouter extends ClientOrServerRouter = ClientO
             this.fetchers = this.dataProvider({ ...this.context, ...this.context.request.data });
 
         // Execute the fetchers for missing data
-        console.log(`[router][page] Fetching api data:` + Object.keys(this.fetchers));
+        debug && console.log(`[router][page] Fetching api data:` + Object.keys(this.fetchers));
         this.data = await this.context.request.api.fetchSync( this.fetchers, this.data );
         return this.data;
     }

package/src/common/validation/validator.ts

@@ -23,9 +23,6 @@ export type TValidator<TValue> = {
     activer?: (donnees: TObjetDonnees) => boolean,
     onglet?: string, // Sert juste d'identifiant secondaire. Ex: nom onglet correspondant
 
-    // Restrict to a specific set of values
-    in?: TValue[],
-
     // Executé après le validateur propre au type
     dependances?: string[],
     opt?: true,

package/src/common/validation/validators.ts

@@ -15,6 +15,7 @@ import { InputError } from '@common/errors';
 import FileToUpload from '@client/components/inputv3/file/FileToUpload';
 
 // Speciific
+import Schema from './schema'
 import Validator, { TValidator } from './validator'
 
 // Components
@@ -63,15 +64,14 @@ export default class SchemaValidators {
             return val;
         }, opts)
 
-    public array = (subtype?: Validator<any>, { choice, min, max, ...opts }: TValidator<any[]> & {
+    public array = ( subtype?: Validator<any> | Schema<{}>, { 
+        choice, min, max, ...opts 
+    }: TValidator<any[]> & {
         choice?: any[],
         min?: number, 
         max?: number
     } = {}) => {
 
-        if (subtype !== undefined)
-            subtype.options.in = choice;
-
         return new Validator<any[]>('array', (items, input, output, corriger) => {
 
             // Type
@@ -86,32 +86,41 @@ export default class SchemaValidators {
 
             // Verif each item
             if (subtype !== undefined) {
-                if (false/*subtype instanceof Schema*/) {
+                if (subtype instanceof Schema) {
 
-                    console.log('TODO: VALIDER VIA SOUS SCHEMA');
+                    items = items.map( item =>
+                        subtype.validate( item, item, item, { }, []).values
+                    )
 
                 } else {
 
                     items = items.map( item =>
                         subtype.validate( item, items, items, corriger )
                     )
+
                 }
             }
 
             return items;
         }, {
             ...opts,
-            in: choice,
             //multiple: true, // Sélection multiple
             //subtype
         })
     }
 
-    public choice = (values: any[], opts: TValidator<any> & {} = {}) => 
+    public choice = (values?: any[], opts: TValidator<any> & {} = {}) => 
         new Validator<any>('choice', (val, input, output) => {
 
-            if (!values.includes(val))
-                throw new InputError("Invalid value. Must be: " + values.join(', '));
+            // Choice object
+            if (typeof val === 'object' && ('value' in val) && typeof val.value !== 'object')
+                val = val.value;
+
+            if (values !== undefined) {
+                const isValid = values.some(v => v.value === val);
+                if (!isValid)
+                    throw new InputError("Invalid value. Must be: " + values.map(v => v.value).join(', '));
+            }
 
             return val;
 
@@ -123,10 +132,6 @@ export default class SchemaValidators {
     public string = ({ min, max, ...opts }: TValidator<string> & { min?: number, max?: number } = {}) => 
         new Validator<string>('string', (val, input, output, corriger?: boolean) => {
 
-            // Choice value from Select component
-            if (typeof val === 'object' && val.value)
-                val = val.value;
-
             if (val === '')
                 return undefined;
             else if (typeof val === 'number')
@@ -173,9 +178,30 @@ export default class SchemaValidators {
             if (!isEmail(val))
                 throw new InputError("Please enter a valid email address.");
 
-            const retour = normalizeEmail(val);
-
-            return retour;
+            // Disable normalzation !!! We should keep the email as it was entered by the user
+            /*const normalizedEmail = normalizeEmail(val, {
+                all_lowercase: true,
+                gmail_lowercase: true,
+                gmail_remove_dots: false,
+                gmail_remove_subaddress: true,
+                gmail_convert_googlemaildotcom: true,
+              
+                outlookdotcom_lowercase: true,
+                outlookdotcom_remove_subaddress: true,
+              
+                yahoo_lowercase: true,
+                yahoo_remove_subaddress: true,
+              
+                yandex_lowercase: true,
+
+                icloud_lowercase: true,
+                icloud_remove_subaddress: true,
+            });*/
+
+            const normalizedEmail = val.toLowerCase();
+            console.log("validate email, inou", val, normalizedEmail);
+
+            return normalizedEmail;
         }, opts)
 
     /*----------------------------------

package/src/server/app/index.ts

@@ -94,8 +94,7 @@ export default abstract class Application extends Service<Config, Hooks, /* TODO
 
     public constructor() {
 
-        // @ts-ignore: can't pass this to super
-        super();
+        super({}, {});
 
         // Gestion crash
         process.on('unhandledRejection', (error: any, promise: any) => {

package/src/server/app/service.ts

@@ -24,6 +24,10 @@ type THookOptions = {
 
 export type TPriority = -2 | -1 | 0 | 1 | 2
 
+type TServiceConfig = {
+    debug?: boolean
+}
+
 /*----------------------------------
 - CONFIG
 ----------------------------------*/
@@ -34,7 +38,7 @@ const LogPrefix = '[service]';
 - CLASS
 ----------------------------------*/
 export default abstract class Service<
-    TConfig extends {}, 
+    TConfig extends TServiceConfig, 
     THooks extends THooksList,
     TApplication extends Application
 > {
@@ -88,7 +92,7 @@ export default abstract class Service<
         if (!callbacks)
             return console.info(LogPrefix, `No ${name} hook defined in the current service instance.`);
 
-        console.info(`[hook] Run all ${name} hook (${callbacks.length}).`);
+        this.config.debug && console.info(`[hook] Run all ${name} hook (${callbacks.length}).`);
         return Promise.all( 
             callbacks.map(
                 cb => cb(...args).catch(e => {
@@ -98,7 +102,7 @@ export default abstract class Service<
                 })
             ) 
         ).then(() => {
-            console.info(`[hook] Hooks ${name} executed with success.`);
+            this.config.debug && console.info(`[hook] Hooks ${name} executed with success.`);
         })
     }
 

package/src/server/services/database/connection.ts

@@ -37,6 +37,7 @@ type ConnectionConfig = {
 }
 
 export type DatabaseServiceConfig = {
+    debug: boolean,
     connections: ConnectionConfig[]
 }
 
@@ -207,7 +208,7 @@ export default class DatabaseManager extends Service<DatabaseServiceConfig, THoo
 
             let jsTypeName = mysqlToJs[ mysqlType.name ];
             if (jsTypeName === undefined) {
-                console.warn(`The mySQL data type « ${mysqlType.name} » has not been associated with a JS equivalent in mysqlToJs. Using any instead.`);
+                this.config.debug && console.warn(`Column "${field.table}.${field.name}": The mySQL data type « ${mysqlType.name} » has not been associated with a JS equivalent in mysqlToJs. Using any instead.`);
                 jsTypeName = mysqlToJs['UNKNOWN'];
             }
 

package/src/server/services/database/index.ts

@@ -201,9 +201,9 @@ export default class SQL extends Service<Config, Hooks, Application> {
 
                 // SQL query
                 } else if (typeof value === 'function' && value.string !== undefined)
-                    value = value.string;
+                    value = ' ' + value.string;
                 else
-                    value = mysql.escape(value);
+                    value = ' ' + mysql.escape(value);
 
                 stringBefore += value;
 
@@ -310,7 +310,7 @@ export default class SQL extends Service<Config, Hooks, Application> {
             return this.database.query(
                 data.map( record => 
                     this.update(tableName, record, where, { ...opts, returnQuery: true })
-                ).join(';\n')
+                ).join('\n')
             )
 
         // Automatic where based on pks

package/src/server/services/database/metas.ts

@@ -298,7 +298,7 @@ export default class MySQLMetasParser {
 
     }
 
-    private parseJsType( name: string, mysqlType: TMySQLType, comment: string | null, isOptional?: boolean ): TJsType {
+    private parseJsType( colName: string, mysqlType: TMySQLType, comment: string | null, isOptional?: boolean ): TJsType {
 
         let typeName: TJsType["name"] | undefined;
         let params: TJsType["params"];
@@ -324,7 +324,7 @@ export default class MySQLMetasParser {
 
             // Equivalent not found
             if (typeName === undefined) {
-                console.warn(`The mySQL data type « ${mysqlType.name} » has not been associated with a JS equivalent in mysqlToJs. Using any instead.`);
+                this.database.config.debug && console.warn(`Column "${colName}": The mySQL data type « ${mysqlType.name} » has not been associated with a JS equivalent in mysqlToJs. Using any instead.`);
                 typeName = mysqlToJs['UNKNOWN'];
             }
         }
@@ -334,7 +334,7 @@ export default class MySQLMetasParser {
         if (!jsTypeUtils)
             throw new Error(`Unable to find the typescript print funvction for js type "${typeName}"`);
 
-        const raw = name + (isOptional ? '?' : '') + ': ' + jsTypeUtils.print( mysqlType.params );
+        const raw = colName + (isOptional ? '?' : '') + ': ' + jsTypeUtils.print( mysqlType.params );
 
         return { name: typeName, params, raw }
     }

package/src/server/services/router/index.ts

@@ -564,7 +564,7 @@ declare type Routes = {
                 e.message = "We encountered an internal error, and our team has just been notified. Sorry for the inconvenience.";
 
         // Pour déboguer les erreurs HTTP
-        } else if (this.app.env.profile === "dev")
+        } else if (code !== 404 && this.app.env.profile === "dev")
             console.warn(e);
 
         if (request.accepts("html"))