5htp-core 0.5.0 → 0.5.1

package/package.json

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

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

@@ -1,13 +1,11 @@
 @import (reference) '@/client/assets/vars.less';
 
 // Utils
-@import './utils/sizing.less';
-@import './utils/spacing.less';
 @import (reference) "./theme.less";
 
 // Apply the theme class
 .bg {
-    background: var(--cBg);
+    background-color: var(--cBg);
     color: var(--cTxtBase);    
 
     &.img {
@@ -120,4 +118,8 @@ body {
 // Import components style (always after variables declaration)
 @import "@client/assets/css/components.less";
 
+// Make utilisy classes priority compared to components
+@import './utils/sizing.less';
+@import './utils/spacing.less';
+
 @import '@/client/assets/theme.less';

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

@@ -46,7 +46,6 @@ i {
         flex: 0 0 @sizeComponent * 0.75;
         height: @sizeComponent * 0.75;
         line-height: @sizeComponent * 0.75;
-        //font-size: 0.9em;
     }
 
     &.unit {
@@ -88,6 +87,10 @@ i.logo {
     border: none; // For img``
 
     background-color: var(--cBg);
+
+    &.circle {
+        border-radius: 50%;
+    }
 }
 
 i.logo {

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

@@ -89,7 +89,7 @@ p, .p {
 .txt-base { color: var(--cTxtBase); }
 .txt-contenu { color: var(--cTxtPost); }
 
-strong, 
+//strong, 
 .active,
 .txtImportant {
     color: var(--cTxtImportant);

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

@@ -20,9 +20,10 @@ h3 {
         color: var(--cTxtAccent);
         font-weight: inherit;
 
-        .bg.img & {
-            color: var(--cTxtImportant);
-        }
+        // Targets the whte card inside bg images, which makes no sense
+        // .bg.img & {
+        //     color: var(--cTxtImportant);
+        // }
     }
 }
 

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

@@ -51,7 +51,8 @@
     --cBgActive: @bgActive;
     --cBgPressed: @bgPressed;
     & when (@apply = true) {
-        background: var(--cBg);
+        // Don't overflow the other background image props with background:
+        background-color: var(--cBg);
     }
 
     // Accent

package/src/client/assets/css/utils/layouts.less

@@ -253,6 +253,7 @@
 
     &.sep-1 { // Bordure interne
 
+        align-items: stretch;
         background-color: var(--cLine2);
         gap: 1px;
         &.card {

package/src/client/assets/css/utils/sizing.less

@@ -47,52 +47,52 @@
 
     // Fixes
     .w-@{taille1} { 
-        width: @taille1 * @sizingUnit; 
+        width: @taille1 * @sizingUnit !important; 
     }
     .h-@{taille1} { 
-        height: @taille1 * @sizingUnit; 
+        height: @taille1 * @sizingUnit !important; 
     }
 
     .row > .w-@{taille1},
     .col > .h-@{taille1} {
-        flex: 0 0 @taille1 * @sizingUnit;
+        flex: 0 0 @taille1 * @sizingUnit !important;
     }
 
     // Min - max
     .w-@{taille1}-a {
-        min-width: @taille1 * @sizingUnit;
+        min-width: @taille1 * @sizingUnit !important;
     }
 
     .w-a-@{taille1} {
-        max-width: @taille1 * @sizingUnit;
-        width: 100%; // We take the maximum space wecan
+        max-width: @taille1 * @sizingUnit !important;
+        width: 100% !important; // We take the maximum space wecan
     }
 
     .h-@{taille1}-a {
-        min-height: @taille1 * @sizingUnit;
+        min-height: @taille1 * @sizingUnit !important;
     }
 
     .h-a-@{taille1} {
-        max-height: @taille1 * @sizingUnit;
-        height: 100%; // We take the maximum space wecan
+        max-height: @taille1 * @sizingUnit !important;
+        height: 100% !important; // We take the maximum space wecan
     }
 
     // Ranges
     .taillesMax(@tailleMax2, @taille2: 0) when (@taille2 <= @tailleMax2) {
 
         .w-@{taille1}-@{taille2} {
-            min-width: @taille1 * @sizingUnit;
-            max-width: @taille2 * @sizingUnit;
-            width: 100%; // We take the maximum space wecan
+            min-width: @taille1 * @sizingUnit !important;
+            max-width: @taille2 * @sizingUnit !important;
+            width: 100% !important; // We take the maximum space wecan
 
             .row > & {
                 flex: 1;
             }
         }
         .h-@{taille1}-@{taille2} {
-            min-height: @taille1 * @sizingUnit;
-            max-height: @taille2 * @sizingUnit;
-            height: 100%; // We take the maximum space wecan
+            min-height: @taille1 * @sizingUnit !important;
+            max-height: @taille2 * @sizingUnit !important;
+            height: 100% !important; // We take the maximum space wecan
 
             .col > & {
                 flex: 1;

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

@@ -179,9 +179,7 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
             
             if (!isToast)
                 render = (
-                    <div class="modal" onClick={e => 
-                        e.target.classList.contains('modal') && close(false)
-                    }>
+                    <div class="modal">
                         {render}
                     </div>
                 )

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

@@ -53,19 +53,13 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: flex-end;
+        justify-content: center;
         gap: @spacing;
         z-index: @modal-zindex;
 
         background: fade(#000, 20%);
         border-radius: @radius;
 
-        // Desktop = vertically center the modal
-        @media (min-width: 900px) {
-            justify-content: center;
-            //padding: @spacing;
-        }
-
         // Pour les animations (ex: conffetis
         > canvas {
             position: absolute;
@@ -79,7 +73,9 @@
 
             position: relative;
             min-width: 300px;
-            max-height: 90vh;
+            max-height: 99vh;
+            max-width: 99vw;
+            width: 400px; // Default width
             box-shadow: none;
             overflow-y: auto;
 
@@ -148,5 +144,6 @@
 
 // Selecteur moins profond pour que les clases utilitaires (w-a-x) soient prioritaires
 .modal > .card {
-    max-width: 500px;
+    // Modal content should always be whiteys adapt from content width
+    //max-width: 500px;
 }

package/src/client/components/Form.ts

@@ -8,7 +8,7 @@ import React from 'react';
 // Core
 import { InputErrorSchema } from '@common/errors';
 import type { Schema } from '@common/validation';
-import type { TValidationResult } from '@common/validation/schema';
+import type { TValidationResult, TValidateOptions } from '@common/validation/schema';
 import useContext from '@/client/context';
 
 // Exports
@@ -36,19 +36,22 @@ export type Form<TFormData extends {} = {}> = {
     fields: FieldsAttrs<TFormData>,
     data: TFormData,
     options: TFormOptions<TFormData>,
+    backup?: Partial<TFormData>,
 
     // Actions
-    validate: (data: Partial<TFormData>) => TValidationResult<{}>,
-    set: (data: Partial<TFormData>) => void,
+    setBackup: (backup: Partial<TFormData>) => void,
+    validate: (data: Partial<TFormData>, validateAll?: boolean) => TValidationResult<{}>,
+    set: (data: Partial<TFormData>, merge?: boolean) => void,
     submit: (additionnalData?: Partial<TFormData>) => Promise<any>,
     
 } & FormState
 
-type FormState = {
+type FormState<TFormData extends {} = {}> = {
     isLoading: boolean,
     hasChanged: boolean,
     errorsCount: number,
     errors: { [fieldName: string]: string[] },
+    backup?: Partial<TFormData>,
 }
 
 /*----------------------------------
@@ -57,7 +60,7 @@ type FormState = {
 export default function useForm<TFormData extends {}>(
     schema: Schema<TFormData>,
     options: TFormOptions<TFormData> = {}
-): [ Form, FieldsAttrs<TFormData> ] {
+): [ Form<TFormData>, FieldsAttrs<TFormData> ] {
 
     const context = useContext();
 
@@ -65,11 +68,12 @@ export default function useForm<TFormData extends {}>(
     - INIT
     ----------------------------------*/
 
-    const [state, setState] = React.useState<FormState>({
-        hasChanged: options.data !== undefined,
+    const [state, setState] = React.useState<FormState<TFormData>>({
+        hasChanged: false,//options.data !== undefined,
         isLoading: false,
         errorsCount: 0,
-        errors: {}
+        errors: {},
+        backup: undefined
     });
 
     const initialData: Partial<TFormData> = options.data || {};
@@ -78,43 +82,54 @@ export default function useForm<TFormData extends {}>(
     const fields = React.useRef<FieldsAttrs<TFormData> | null>(null);
     const [data, setData] = React.useState< Partial<TFormData> >(initialData);
 
-    // Validate data when it changes
+    // When typed data changes
     React.useEffect(() => {
 
         // Validate
-        validate(data, false);
+        validate(data, { ignoreMissing: true });
 
         // Autosave
-        if (options.autoSave !== undefined) {
-
-            if (state.hasChanged)
-                saveLocally(data, options.autoSave.id);
-            else {
-                const autosaved = localStorage.getItem('form.' + options.autoSave.id);
-                if (autosaved !== null) {
-                    try {
-                        console.log('[form] Parse autosaved from json:', autosaved);
-                        setData( JSON.parse(autosaved) );
-                    } catch (error) {
-                        console.error('[form] Failed to decode autosaved data from json:', autosaved);
-                    }
+        if (options.autoSave !== undefined && state.hasChanged) {
+            saveLocally(data, options.autoSave.id);
+        }
+
+    }, [data]);
+
+    // On start
+    React.useEffect(() => {
+
+        // Restore backup
+        if (options.autoSave !== undefined && !state.hasChanged) {
+
+            const autosaved = localStorage.getItem('form.' + options.autoSave.id);
+            if (autosaved !== null) {
+                try {
+                    console.log('[form] Parse autosaved from json:', autosaved);
+                    setState(c => ({
+                        ...c,
+                        backup: JSON.parse(autosaved)
+                    }));
+                } catch (error) {
+                    console.error('[form] Failed to decode autosaved data from json:', autosaved);
                 }
             }
         }
 
-    }, [data]);
+    }, []);
 
     /*----------------------------------
     - ACTIONS
     ----------------------------------*/
-    const validate = (allData: Partial<TFormData> = data, validateAll: boolean = true) => {
+    const validate = (allData: Partial<TFormData> = data, opts: TValidateOptions<TFormData> = {}) => {
 
         const validated = schema.validateWithDetails(allData, allData, {}, {
             // Ignore the fields where the vlaue has not been changed
             //  if the validation was triggered via onChange
-            ignoreMissing: !validateAll,
+            ignoreMissing: false,
             // The list of fields we should only validate
-            only: options.autoValidateOnly
+            only: options.autoValidateOnly,
+            // Custom options
+            ...opts
         });
 
         // Update errors
@@ -224,19 +239,35 @@ export default function useForm<TFormData extends {}>(
     - EXPOSE
     ----------------------------------*/
 
-    const form = {
+    const form: Form<TFormData> = {
+
         fields: fields.current,
         data,
-        set: data => {
-            setState(current => ({
+        set: (data, merge = true) => {
+
+            setState( current => ({
                 ...current,
                 hasChanged: true
             }));
-            setData(data);
+
+            setData( merge 
+                ? c => ({ ...c, ...data }) 
+                : data
+            );
         },
+
         validate,
         submit,
         options,
+
+        setBackup: (backup: Partial<TFormData>) => {
+            
+            setState(c => ({ ...c, backup }));
+
+            if (options.autoSave)
+                localStorage.setItem('form.' + options.autoSave.id, JSON.stringify(backup));
+        },
+
         ...state
     }
 

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

@@ -249,7 +249,7 @@ export default (props: Props) => {
 
                     {Search}  
 
-                    <ul class="row al-left wrap sp-05 scrollable mgt-1" style={{
+                    <ul class="row al-left wrap sp-05 scrollable" style={{
                         maxHeight: '30vh',
                     }}>
                         {selectedItems.map( choice => (

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

@@ -20,14 +20,20 @@ import Checkbox from '../inputv3/Checkbox';
 export type TDonneeInconnue = { id: any } &  {[cle: string]: any};
 
 export type Props<TRow> = {
-    
-    data: TRow[],
-    columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
+
+    // Appearence
     stickyHeader?: boolean,
+    className?: string,
 
+    // Data
+    data: TRow[],
     setData?: (rows: TRow[]) => void,
+    columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
     empty?: ComponentChild | false,
-    className?: string,
+
+    // Interactions
+    sort?: TSortOptions,
+    onSort?: (columnId: string | null, order: TSortOptions["order"]) => void,
 
     selection?: [TRow[], React.SetStateAction<TRow[]>],
     maxSelection?: number,
@@ -38,13 +44,19 @@ export type TColumn = JSX.HTMLAttributes<HTMLElement> & {
     cell: ComponentChild,
     raw?: number | string | boolean,
     stick?: boolean,
+    sort?: TSortOptions
+}
+
+type TSortOptions = {
+    id: string,
+    order: 'desc' | 'asc'
 }
 
 /*----------------------------------
 - COMPOSANTS
 ----------------------------------*/
 export default function Liste<TRow extends TDonneeInconnue>({
-    stickyHeader,
+    stickyHeader, onSort, sort: sorted,
     data: rows, setData, empty,
     selection: selectionState, maxSelection,
     columns, ...props
@@ -99,6 +111,7 @@ export default function Liste<TRow extends TDonneeInconnue>({
 
             {columns(row, rows, iDonnee).map(({ 
                 label, cell, class: className, raw, 
+                sort,
                 stick, width, ...cellProps 
             }) => {
 
@@ -123,9 +136,30 @@ export default function Liste<TRow extends TDonneeInconnue>({
                     }
                 }
 
+                const isCurrentlySorted = sort && sorted && sorted.id === sort.id;
+                const isSortable = sort && onSort;
+                if (isSortable) {
+                    classe += ' clickable';
+                    cellProps.onClick = () => {
+                        if (isCurrentlySorted)
+                            onSort(null, sort.order);
+                        else
+                            onSort(sort.id, sort.order);
+                    }
+                }
+
                 if (iDonnee === 0) renduColonnes.push(
                     <th class={classe} {...cellProps}>
-                        {label}
+                        <div class="row sp-btw">
+                            
+                            {isSortable ? (
+                                <a>{label}</a>
+                            ) : label}
+
+                            {isCurrentlySorted && (
+                                <i src={sort.order === "asc" ? "caret-up" : "caret-down"} />
+                            )}
+                        </div>
                     </th>
                 );
 

package/src/client/components/button.tsx

@@ -23,7 +23,6 @@ export type Props = {
     iconR?: ComponentChild,
 
     prefix?: ComponentChild,
-    children?: ComponentChild | ComponentChild[],
     suffix?: ComponentChild,
     
     tag?: "a" | "button",
@@ -31,7 +30,6 @@ export type Props = {
     shape?: 'default' | 'icon' | 'tile' | 'pill',
     size?: TComponentSize,
     class?: string,
-    title?: string,
 
     state?: [string, React.StateUpdater<string>],
     active?: boolean,
@@ -45,7 +43,14 @@ export type Props = {
     submenu?: ComponentChild,
     nav?: boolean | 'exact'
 
-} & (TButtonProps | TLinkProps)
+// SEO: if icon only, should provinde a hint (aria-label)
+} & ({ 
+    hint: string,
+    children?: ComponentChild | ComponentChild[],
+} | { 
+    children: ComponentChild | ComponentChild[],
+    hint?: string,
+}) & (TButtonProps | TLinkProps)
 
 export type TButtonProps = {
     
@@ -84,6 +89,7 @@ export default ({
     iconR, suffix,
     submenu,
     nav,
+    hint,
 
     // Style
     class: className,
@@ -125,6 +131,12 @@ export default ({
         props.onClick = () => setActive(id);
     }
 
+    // Hint
+    if (hint !== undefined) {
+        props['aria-label'] = hint;
+        props.title = hint;
+    }
+
     // Shape classes
     const classNames: string[] = ['btn'];
     if (className)
@@ -171,35 +183,36 @@ export default ({
     // Render
     if ('link' in props || Tag === "a") {
 
-        props.href = props.link;
-        
-        // External = open in new tab by default
-        if (props.href && (props.href[0] !== '/' || props.href.startsWith('//')))
-            props.target = '_blank';
+        // Link (only if enabled)
+        if (!disabled) {
 
-        if (props.target === undefined) {
+            props.href = props.link;
+            
+            // External = open in new tab by default
+            if (props.href && (props.href[0] !== '/' || props.href.startsWith('//')))
+                props.target = '_blank';
+        }
 
-            if (nav) {
+        // Nav
+        if (nav && props.target === undefined) {
 
-                const checkIfCurrentUrl = (url: string) => 
-                    isCurrentUrl(url, props.link, nav === 'exact');
+            const checkIfCurrentUrl = (url: string) => 
+                isCurrentUrl(url, props.link, nav === 'exact');
 
-                React.useEffect(() => {
+            React.useEffect(() => {
 
-                    // Init
-                    if (checkIfCurrentUrl(ctx.request.path))
-                        setIsActive(true);
+                // Init
+                if (checkIfCurrentUrl(ctx.request.path))
+                    setIsActive(true);
 
-                    // On location change
-                    return history?.listen(({ location }) => {
+                // On location change
+                return history?.listen(({ location }) => {
 
-                        setIsActive( checkIfCurrentUrl(location.pathname) );
-    
-                    })
+                    setIsActive( checkIfCurrentUrl(location.pathname) );
 
-                }, []);
-            }
+                })
 
+            }, []);
         }
 
         Tag = 'a';