5htp-core 0.2.5-2 → 0.2.6

package/package.json

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

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

@@ -6,10 +6,11 @@
 import React from 'react';
 import { ComponentChild } from 'preact';
 
-// Libs
+// Core
 import useContext from '@/client/context';
+import { blurable, deepContains, focusContent } from '@client/utils/dom';
 
-// Métier
+// Specific
 import type Application from '../../app';
 import Card, { Props as CardInfos } from './card';
 import Button from '../button';
@@ -242,9 +243,7 @@ export default () => {
 
         // Focus
         const lastToast = modals[ modals.length - 1 ];
-        const toFocus = lastToast.querySelector('input, textarea, button.btn.primary, footer > button.btn') || lastToast;
-        console.log('Element to focus', toFocus);
-        toFocus.focus();
+        focusContent( lastToast );
 
         // Backdrop color
         const header = lastToast.querySelector('header');

package/src/client/components/Form.ts

@@ -6,14 +6,21 @@
 import React from 'react';
 
 // Core
+import { InputError } from '@common/errors';
 import type { Schema } from '@common/validation';
+import type { TValidationResult } from '@common/validation/schema';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 type TFormOptions<TFormData extends {}> = {
     data?: Partial<TFormData>,
-    submit?: (data: TFormData) => Promise<void>
+    submit?: (data: TFormData) => Promise<void>,
+    autoValidateOnly?: (keyof TFormData)[],
+    autoSave?: {
+        id: string
+    }
 }
 
 type FieldsAttrs<TFormData extends {}> = {
@@ -21,87 +28,134 @@ type FieldsAttrs<TFormData extends {}> = {
 }
 
 export type Form<TFormData extends {} = {}> = {
+    fields: FieldsAttrs<TFormData>,
     data: TFormData,
+    options: TFormOptions<TFormData>,
+    validate: (data: TFormData) => TValidationResult<{}>,
     set: (data: Partial<TFormData>) => void,
     submit: (additionnalData?: Partial<TFormData>) => Promise<any>,
-    fields: FieldsAttrs<TFormData>,
 } & FormState
 
 type FormState = {
     isLoading: boolean,
     errorsCount: number,
-    errors: {[fieldName: string]: string[]},
-    changed: boolean
+    errors: { [fieldName: string]: string[] },
 }
 
 /*----------------------------------
 - HOOK
 ----------------------------------*/
-export default function useForm<TFormData extends {}>( schema: Schema<TFormData>, options: TFormOptions<TFormData> ) {
+export default function useForm<TFormData extends {}>(
+    schema: Schema<TFormData>,
+    options: TFormOptions<TFormData>
+) {
+
+    const context = useContext();
 
     /*----------------------------------
     - INIT
     ----------------------------------*/
-    const fields = React.useRef<FieldsAttrs<TFormData>>(null);
+    let initialData: any;
+    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);
+            } catch (error) {
+                console.error('[form] Failed to decode autosaved data from json:', autosaved);
+            }
+        }
+    }
+    if (initialData === undefined)
+        initialData = options.data || {};
 
-    const [data, setData] = React.useState<TFormData>( options.data || {} );
+    const fields = React.useRef<FieldsAttrs<TFormData>>(null);
+    const [data, setData] = React.useState<TFormData>(initialData);
     const [state, setState] = React.useState<FormState>({
         isLoading: false,
         errorsCount: 0,
-        errors: {},
-        changed: false
+        errors: {}
     });
 
     // Validate data when it changes
     React.useEffect(() => {
-        state.changed && validate(data);
+
+        // Validate
+        validate(data, false);
+
+        // Autosave
+        if (options.autoSave !== undefined)
+            saveLocally(data, options.autoSave);
+
     }, [data]);
 
     /*----------------------------------
     - ACTIONS
     ----------------------------------*/
-    const validate = (allData: TFormData) => {
+    const validate = (allData: TFormData = data, validateAll: boolean = true) => {
 
-        const validated = schema.validate(allData, allData);
+        const validated = schema.validate(allData, allData, {}, {
+            // Ignore the fields where the vlaue has not been changed
+            //  if the validation was triggered via onChange
+            ignoreMissing: !validateAll,
+            // The list of fields we should only validate
+            only: options.autoValidateOnly
+        });
 
         // Update errors
-        if (validated.nbErreurs !== state.errorsCount) {
-            rebuildFieldsAttrs({ 
-                errorsCount: validated.nbErreurs, 
+        if (validated.errorsCount !== state.errorsCount) {
+            rebuildFieldsAttrs({
+                errorsCount: validated.errorsCount,
                 errors: validated.erreurs,
             });
         }
-        
+
         return validated;
     }
 
-    const submit = (additionnalData: Partial<TFormData> = {}) => {
+    const submit = async (additionnalData: Partial<TFormData> = {}) => {
 
         const allData = { ...data, ...additionnalData }
 
         // Validation
         const validated = validate(allData);
-        if (validated.nbErreurs !== 0)
+        if (validated.errorsCount !== 0) {
+            context.app.handleError(
+                new InputError("You have " + validated.errorsCount + " errors in the form.")
+            );
             return;
+        }
 
         // Callback
+        let submitResult: any;
         if (options.submit)
-            return options.submit(validated.values);
+            submitResult = await options.submit(allData);
+
+        // Reset autosaved data
+        if (options.autoSave)
+            localStorage.removeItem(options.autoSave.id);
+
+        return submitResult;
     }
 
     const rebuildFieldsAttrs = (newState: Partial<FormState> = {}) => {
         // Force rebuilding the fields definition on the next state change
-        fields.current = null; 
+        fields.current = null;
         // Force state change
-        setState( old => ({ 
+        setState(old => ({
             ...old,
-            ...newState,
-            changed: true
+            ...newState
         }));
     }
 
+    const saveLocally = (data: 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(',')){
+    if (fields.current === null || Object.keys(schema).join(',') !== Object.keys(fields.current).join(',')) {
         fields.current = {}
         for (const fieldName in schema.fields) {
             fields.current[fieldName] = {
@@ -109,13 +163,9 @@ export default function useForm<TFormData extends {}>( schema: Schema<TFormData>
                 // Value control
                 value: data[fieldName],
                 onChange: (val) => {
-                    setState( old => ({ 
-                        ...old,
-                        changed: true
-                    }));
-                    setData( old => {
-                        return { 
-                            ...old, 
+                    setData(old => {
+                        return {
+                            ...old,
                             [fieldName]: typeof val === 'function'
                                 ? val(old[fieldName])
                                 : val
@@ -131,9 +181,9 @@ export default function useForm<TFormData extends {}>( schema: Schema<TFormData>
                 },
 
                 // Error
-                errors: state.errors[ fieldName ],
-                required: schema.fields[ fieldName ].options?.opt !== true,
-                validator: schema.fields[ fieldName ]
+                errors: state.errors[fieldName],
+                required: schema.fields[fieldName].options?.opt !== true,
+                validator: schema.fields[fieldName]
             }
         }
     }
@@ -143,12 +193,14 @@ export default function useForm<TFormData extends {}>( schema: Schema<TFormData>
     ----------------------------------*/
 
     const form = {
+        fields: fields.current,
         data,
         set: setData,
+        validate,
         submit,
-        fields: fields.current,
+        options,
         ...state
     }
-    
+
     return [form, fields.current]
 }

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

@@ -85,13 +85,13 @@ export const useForm = <TDonnees extends TObjetDonnees>(
     const [state, setState] = React.useState<{
         donnees: Partial<TDonnees>,
         erreurs: TListeErreursSaisie,
-        nbErreurs: number,
+        errorsCount: number,
         progression: false | number,
         changed: Partial<TDonnees> // Nom des champs changés depuis le dernier enregistrement
     }>({
         donnees: props.donnees || {},
         erreurs: {},
-        nbErreurs: 0,
+        errorsCount: 0,
         progression: false,
         changed: {}
     });
@@ -129,7 +129,7 @@ export const useForm = <TDonnees extends TObjetDonnees>(
     async function onChange(
         valeursInit: Partial<TDonnees>,
         newState: Partial<typeof state> = {},
-    ): Promise<{ erreurs: TListeErreursSaisie, nbErreurs: number }> {
+    ): Promise<{ erreurs: TListeErreursSaisie, errorsCount: number }> {
 
         // RAPPEL: donnees = anciennes données
 
@@ -142,7 +142,7 @@ export const useForm = <TDonnees extends TObjetDonnees>(
 
         if (debug) console.log(`[form][saisie] onChange`, changees);
 
-        let nbErreurs: number = 0;
+        let errorsCount: number = 0;
         let erreurs: TListeErreursSaisie = {}
         if (Object.keys(changees).length !== 0) {
 
@@ -151,14 +151,14 @@ export const useForm = <TDonnees extends TObjetDonnees>(
             let nouvellesDonnees: Partial<TDonnees>;
             ({
                 valeurs: nouvellesDonnees,
-                nbErreurs,
+                errorsCount,
                 erreurs
             } = await valider(valeursInit));
 
-            if (debug && nbErreurs !== 0) console.log(`[form][saisie] erreurs`, erreurs);
+            if (debug && errorsCount !== 0) console.log(`[form][saisie] erreurs`, erreurs);
 
             newState.erreurs = erreurs;
-            newState.nbErreurs = nbErreurs;
+            newState.errorsCount = errorsCount;
 
             // Validation & mapping personnalisé
             /*if (props.filtres?.after)
@@ -177,8 +177,8 @@ export const useForm = <TDonnees extends TObjetDonnees>(
                 ...newState
             }));
 
-            if (props.onChange && nbErreurs === 0)
-                props.onChange(donneesCompletes, { valeurs: nouvellesDonnees, nbErreurs, erreurs, changed });
+            if (props.onChange && errorsCount === 0)
+                props.onChange(donneesCompletes, { valeurs: nouvellesDonnees, errorsCount, erreurs, changed });
 
             /*if (valider && props.autosave === true) {
 
@@ -191,7 +191,7 @@ export const useForm = <TDonnees extends TObjetDonnees>(
             }*/
         }
 
-        return { erreurs, nbErreurs };
+        return { erreurs, errorsCount };
     }
 
     async function valider(
@@ -206,7 +206,7 @@ export const useForm = <TDonnees extends TObjetDonnees>(
         });
 
         // Focus sur le premier champ ayant déclenché une erreur
-        if (retour.nbErreurs !== 0) {
+        if (retour.errorsCount !== 0) {
 
             const cheminChamp = Object.keys(retour.erreurs)[0]
             const champ = chemin.get(schema, cheminChamp);
@@ -233,15 +233,15 @@ export const useForm = <TDonnees extends TObjetDonnees>(
         if (props.progression !== undefined && props.progression !== false)
             return false;
 
-        if (state.nbErreurs !== 0)
+        if (state.errorsCount !== 0)
             return false;
 
         console.log(`[form][saisie] Envoyer`, donnees);
 
         // Validation de l'ensemble des champs
-        const { erreurs, nbErreurs, valeurs } = await valider(donnees);
-        if (nbErreurs !== 0) {
-            setState((stateA) => ({ ...stateA, erreurs, nbErreurs }));
+        const { erreurs, errorsCount, valeurs } = await valider(donnees);
+        if (errorsCount !== 0) {
+            setState((stateA) => ({ ...stateA, erreurs, errorsCount }));
             console.error('Erreurs formulaire', erreurs);
             return false;
         }
@@ -369,10 +369,10 @@ export const useForm = <TDonnees extends TObjetDonnees>(
                     });
 
                 // Application des changements
-                const { nbErreurs } = await onChange(nouvellesDonnees, {});
+                const { errorsCount } = await onChange(nouvellesDonnees, {});
 
                 // Si aucune erreur, onChange propre au champ + gestion erreurs
-                if (propsChamp.onChange !== undefined && nbErreurs === 0)
+                if (propsChamp.onChange !== undefined && errorsCount === 0)
                     await propsChamp.onChange(nouvelleValeur).catch((e) => {
                         setState((stateA) => ({
                             ...stateA,

package/src/client/components/Form_old/index.tsx.old

@@ -78,13 +78,13 @@ export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonne
     const [state, setState] = React.useState<{
         donnees: Partial<TDonnees>,
         erreurs: TListeErreursSaisie,
-        nbErreurs: number,
+        errorsCount: number,
         progression: false | number,
         changed: Partial<TDonnees> // Nom des champs changés depuis le dernier enregistrement
     }>({
         donnees: props.donnees || {},
         erreurs: {},
-        nbErreurs: 0,
+        errorsCount: 0,
         progression: false,
         changed: {}
     });
@@ -109,7 +109,7 @@ export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonne
         valeursInit: Partial<TDonnees>,
         newState: Partial<typeof state> = {},
         validerMaintenant: boolean = true
-    ): Promise<{ erreurs: TListeErreursSaisie, nbErreurs: number }> {
+    ): Promise<{ erreurs: TListeErreursSaisie, errorsCount: number }> {
 
         // RAPPEL: donnees = anciennes données
 
@@ -118,20 +118,20 @@ export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonne
         // Validation des données changées
         // TODO: conserver erreurs des champs n'ayant pas été changés
         let nouvellesDonnees: Partial<TDonnees>;
-        let nbErreurs: number = 0;
+        let errorsCount: number = 0;
         let erreurs: TListeErreursSaisie = {}
         if (validerMaintenant) {
 
             ({
                 valeurs: nouvellesDonnees,
-                nbErreurs,
+                errorsCount,
                 erreurs
             } = await valider(valeursInit));
 
-            if (debug && nbErreurs !== 0) console.log(`[form][saisie] erreurs`, erreurs);
+            if (debug && errorsCount !== 0) console.log(`[form][saisie] erreurs`, erreurs);
 
             newState.erreurs = erreurs;
-            newState.nbErreurs = nbErreurs;
+            newState.errorsCount = errorsCount;
 
         } else
             nouvellesDonnees = valeursInit;
@@ -152,8 +152,8 @@ export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonne
             ...newState
         }));
 
-        if (props.onChange && nbErreurs === 0)
-            props.onChange(donneesCompletes, validerMaintenant ? { valeurs: nouvellesDonnees, nbErreurs, erreurs } : false);
+        if (props.onChange && errorsCount === 0)
+            props.onChange(donneesCompletes, validerMaintenant ? { valeurs: nouvellesDonnees, errorsCount, erreurs } : false);
 
         /*if (valider && props.autosave === true) {
 
@@ -165,7 +165,7 @@ export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonne
 
         }*/
 
-        return { erreurs, nbErreurs };
+        return { erreurs, errorsCount };
     }
 
     async function valider(
@@ -180,7 +180,7 @@ export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonne
         });
 
         // Focus sur le premier champ ayant déclenché une erreur
-        if (retour.nbErreurs !== 0) {
+        if (retour.errorsCount !== 0) {
 
             const cheminChamp = Object.keys(retour.erreurs)[0]
             const champ = schema.get(cheminChamp);
@@ -215,15 +215,15 @@ export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonne
         if (props.progression !== undefined && props.progression !== false)
             return false;
 
-        if (state.nbErreurs !== 0)
+        if (state.errorsCount !== 0)
             return false;
 
         console.log(`[form][saisie] Envoyer`, donnees);
 
         // Validation de l'ensemble des champs
-        const { erreurs, nbErreurs, valeurs } = await valider(donnees);
-        if (nbErreurs !== 0) {
-            setState((stateA) => ({ ...stateA, erreurs, nbErreurs }));
+        const { erreurs, errorsCount, valeurs } = await valider(donnees);
+        if (errorsCount !== 0) {
+            setState((stateA) => ({ ...stateA, erreurs, errorsCount }));
             console.error('Erreurs formulaire', erreurs);
             return false;
         }
@@ -361,10 +361,10 @@ export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonne
                             });
 
                         // Application des changements
-                        const { nbErreurs } = await onChange(nouvellesDonnees, {}, validerMaintenant);
+                        const { errorsCount } = await onChange(nouvellesDonnees, {}, validerMaintenant);
 
                         // Si aucune erreur, onChange propre au champ + gestion erreurs
-                        if (propsChamp.onChange !== undefined && nbErreurs === 0)
+                        if (propsChamp.onChange !== undefined && errorsCount === 0)
                             await propsChamp.onChange(nouvelleValeur, true).catch((e) => {
                                 if (validerMaintenant)
                                     setState((stateA) => ({

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

@@ -0,0 +1,172 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild, RefObject } from 'preact';
+import type { StateUpdater } from 'preact/hooks';
+
+// Core
+import Button from '@client/components/button';
+import Input from '@client/components/inputv3';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type Choice = { label: ComponentChild, value: string }
+
+export type Choices = Choice[]
+
+type ChoicesFunc = (search: string) => Promise<Choices>
+
+export type Props = (
+    {
+        multiple: true,
+        value?: Choice[],
+        onChange: StateUpdater<Choice[]>,
+        validator?: ArrayValidator
+    }
+    |
+    {
+        multiple?: false,
+        value?: Choice,
+        onChange: StateUpdater<Choice>,
+        validator?: StringValidator
+    }
+) & {
+    choices: Choices | ChoicesFunc,
+    enableSearch?: boolean,
+    inline?: boolean,
+    required?: boolean,
+    noneSelection?: false | string,
+    currentList: Choice[],
+    refPopover?: RefObject<HTMLElement>
+}
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+/*
+    We crezte the ChoiceSelector separately from the Selector component because:
+    - we don't want the selector to be rendered before the dropdown content is dhown
+    - this component is called multiple time
+*/
+export default ({
+    choices: initChoices, 
+    validator, 
+    required, 
+    noneSelection, 
+    enableSearch, 
+    value: current, 
+    onChange, 
+    inline, 
+    multiple, 
+    currentList,
+    refPopover
+}: Props) => {
+
+    /*----------------------------------
+    - 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
+    ----------------------------------*/
+    return (
+        <div class={(inline ? '' : 'card ') + "col al-top"} ref={refPopover}>
+
+           {enableSearch && (
+               <Input icon="search" 
+                   title="Search"
+                   value={search.keywords} 
+                   onChange={keywords => setSearch(s => ({ ...s, loading: true, keywords }))} 
+                   iconR={'spin'}
+               />
+           )}
+
+           {currentList.length !== 0 && (
+               <ul class="col menu">
+                   {currentList.map(choice => (
+                       <Button size="s" onClick={() => {
+                           onChange( current => multiple 
+                               ? current.filter(c => c.value !== choice.value)
+                               : undefined
+                           );
+                       }} suffix={<i src="check" class="fg primary" />}>
+                           {choice.label}
+                       </Button>
+                   ))}
+               </ul>
+           )}
+
+           {choices === null ? (
+               <div class="row h-3 al-center">
+                   <i src="spin" />
+               </div>
+           ) : (
+               <ul class="col menu">
+                   {choices.map( choice => {
+                       const isCurrent = currentList.some(c => c.value === choice.value);
+                       return !isCurrent && (
+                           <li>
+                               <Button size="s" onClick={() => {
+                                   onChange( current => {
+                                       return multiple 
+                                           ? [...(current || []), choice] 
+                                           : choice
+                                   });
+                               }}>
+                                   {/*search.keywords ? (
+                                       <span>
+                                       
+                                           <strong>{search.keywords}</strong>{choice.label.slice( search.keywords.length )}
+   
+                                       </span>
+                                   ) : */choice.label}
+                               </Button>
+                           </li>
+                       )
+                   })}
+
+                   {((!required || !validator?.options.min) && noneSelection) && (
+                       <li>
+                            <Button size="s" onClick={() => onChange(multiple ? [] : undefined)}
+                                suffix={(current === undefined || (multiple && current.length === 0)) && <i src="check" class="fg primary" />}>
+                               {noneSelection}
+                           </Button>
+                       </li>
+                   )}
+               </ul>
+           )}
+       </div>
+   )
+}