5htp-core 0.4.5 → 0.4.6

package/package.json

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

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

@@ -41,7 +41,7 @@
         //transition: all .1s linear;
         
         > i {
-            color: var(--cAccent)
+            color: var(--cTxtAccent)
         }
     }
 
@@ -352,7 +352,8 @@ ul.col {
             top: @sizeComponent;
             margin-top: @spacing / 2;
 
-            &::before {
+            // C'est quoi ?
+            /*&::before {
                 content: ' ';
                 display: block;
                 position: absolute;
@@ -362,7 +363,7 @@ ul.col {
                 right: calc(0em - @spacing);
 
                 height: 100%;
-            }
+            }*/
             
         }
     }

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

@@ -2,7 +2,7 @@
 - CONFIG
 ----------------------------------*/
 
-@sizeStep: 2.2em;
+@sizeStep: 1.8em;
 @itemLineHeight: 1.5em;
 
 /*----------------------------------
@@ -22,8 +22,10 @@ ul, ol {
 
 ul.liste, 
 ol.steps {
-    // Doit hériter des parents
-    //line-height: 1.5em;
+    
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
     text-align: left;
 
     > li {
@@ -48,7 +50,7 @@ ul.liste {
         &:before {
             content: '➜';
             font-size: 1.4em;
-            color: var(--cAccent);
+            color: var(--cTxtAccent);
         }
     }
 
@@ -87,17 +89,12 @@ ol.steps {
 
         &:before {
             content: counter(step-counter);
-            font-size: 0.8em;
-        }
-
-        &.active::before {
-            background-color: var(--cAccent);
         }
 
         // Stepnumber = at the left
         &:not(.col) {
     
-            padding-left: @sizeStep + (@spacing / 2);
+            padding-left: /*@sizeStep + */(@spacing);
             padding-top: (@sizeStep - @itemLineHeight) / 2;
             line-height: @itemLineHeight;
             margin: 5px 0;
@@ -122,15 +119,12 @@ ol.steps {
 
 ol.steps > li:before,
 strong.step {
-    
-    background: @c1 + #666;
-    color: @c1;
-
+    color: var(--cTxtAccent);
     text-align: center;
-    width: @sizeStep * 1.2;
-    height: @sizeStep * 1.2;
-    line-height: @sizeStep * 1.2;
-    border-radius: 50%;
+    font-weight: bold;
+
+    font-size: 1em;
+    line-height: 1.8em;
 }
 
 /*----------------------------------

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

@@ -32,7 +32,7 @@ i {
     }
 
     &.solid {
-        color: var(--cAccent2);
+        color: var(--cTxtAccent2);
         background: var(--cBg);
         border-radius: @radius;
 
@@ -74,10 +74,10 @@ i.logo {
     line-height: 3.2em;
     flex: 0 0 3.2em;*/
 
-    width: 2em;
-    height: 2em;
-    line-height: 2em;
-    flex: 0 0 2em;
+    width: @sizeComponent * 0.9;
+    height: @sizeComponent * 0.9;
+    line-height: @sizeComponent * 0.9;
+    flex: 0 0 @sizeComponent * 0.9;
 
     border-radius: @radius;
     border: none; // For img``

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

@@ -122,7 +122,7 @@ em {
         display: block;
         height: 0.5em;
         border-radius: 0.25em;
-        background: var(--cAccent2);
+        background: var(--cTxtAccent2);
 
         position: absolute;
         z-index: -1;
@@ -148,22 +148,9 @@ pre {
 @readingMargin: 2.4rem;
 .reading {
 
-    --cTxtBase: #555;
-
     display: flex;
     flex-direction: column;
     gap: 1em;
-    
-    p,
-    figcaption,
-    h2,
-    h3,
-    > ul {
-        max-width: var(--focusWidth);
-        margin: 0 auto;
-        width: 100%;
-        //padding: 0 @readingMargin;
-    }
 
     &,
     p {
@@ -175,7 +162,7 @@ pre {
 
     h2, h3, h4 {
         text-align: left;
-        margin: 1em 0;
+        margin: 0.5em 0;
     }
 
     h2 {
@@ -215,6 +202,7 @@ pre {
             cursor: default;
             display: block;
             margin: 0 auto;
+            border-radius: @radius;
         }
 
         figcaption {

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

@@ -17,7 +17,7 @@ h3 {
     }
 
     strong {
-        color: var(--cAccent);
+        color: var(--cTxtAccent);
         font-weight: inherit;
 
         .bg.img & {

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

@@ -50,10 +50,10 @@
 
     // Accent
     & when (@theme[accent1]) {
-        --cAccent: @theme[accent1];
+        --cTxtAccent: @theme[accent1];
     }
     & when (@theme[accent2]) {
-        --cAccent2: @theme[accent2];
+        --cTxtAccent2: @theme[accent2];
     }
 
     // Lines

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

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

package/src/client/components/Form.ts

@@ -36,7 +36,6 @@ export type Form<TFormData extends {} = {}> = {
     fields: FieldsAttrs<TFormData>,
     data: TFormData,
     options: TFormOptions<TFormData>,
-    autosavedData?: Partial<TFormData>,
 
     // Actions
     validate: (data: Partial<TFormData>) => TValidationResult<{}>,
@@ -57,7 +56,7 @@ type FormState = {
 ----------------------------------*/
 export default function useForm<TFormData extends {}>(
     schema: Schema<TFormData>,
-    options: TFormOptions<TFormData>
+    options: TFormOptions<TFormData> = {}
 ): [ Form, FieldsAttrs<TFormData> ] {
 
     const context = useContext();
@@ -66,31 +65,18 @@ export default function useForm<TFormData extends {}>(
     - INIT
     ----------------------------------*/
 
-    // Autosaving data
-    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);
-                autosavedData = JSON.parse(autosaved);
-            } catch (error) {
-                console.error('[form] Failed to decode autosaved data from json:', autosaved);
-            }
-        }
-    }
+    const [state, setState] = React.useState<FormState>({
+        hasChanged: options.data !== undefined,
+        isLoading: false,
+        errorsCount: 0,
+        errors: {}
+    });
 
     const initialData: Partial<TFormData> = options.data || {};
 
     // States
     const fields = React.useRef<FieldsAttrs<TFormData> | null>(null);
     const [data, setData] = React.useState< Partial<TFormData> >(initialData);
-    const [state, setState] = React.useState<FormState>({
-        hasChanged: false,
-        isLoading: false,
-        errorsCount: 0,
-        errors: {}
-    });
 
     // Validate data when it changes
     React.useEffect(() => {
@@ -99,8 +85,22 @@ export default function useForm<TFormData extends {}>(
         validate(data, false);
 
         // Autosave
-        if (options.autoSave !== undefined)
-            saveLocally(data, options.autoSave.id);
+        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);
+                    }
+                }
+            }
+        }
 
     }, [data]);
 
@@ -235,7 +235,6 @@ export default function useForm<TFormData extends {}>(
         validate,
         submit,
         options,
-        autosavedData,
         ...state
     }
 

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('--cAccent');
+                    dataset.colonne.color = css.getPropertyValue('--cTxtAccent');
 
                 return {
                     label: dataset.colonne.label,

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

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

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

@@ -14,7 +14,7 @@ div.progressbar {
     }
 
     > .progress {
-        --cBg: var(--cAccent);
+        --cBg: var(--cTxtAccent);
         background: var(--cBg);
         width: 0%;
         max-width: 100%;

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(--cAccent)', 
-        couleur2: 'var(--cAccent)',
-        couleurTxt: 'var(--cAccent)'
+        couleur1: 'var(--cTxtAccent)', 
+        couleur2: 'var(--cTxtAccent)',
+        couleurTxt: 'var(--cTxtAccent)'
     }
     const [couleurMin, couleurMax] = couleurs;
     const couleur = couleurMin + (pc * (couleurMax - couleurMin));

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

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

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

@@ -39,6 +39,11 @@ export type Props = {
     validator?: ReturnType< SchemaValidators["number"] >,
 })
 
+type TInputElementProps = Omit<(
+    JSX.HTMLAttributes<HTMLInputElement> & 
+    JSX.HTMLAttributes<HTMLTextAreaElement>
+), 'onChange'>
+
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
@@ -52,7 +57,7 @@ export default ({
     // Actions
     onPressEnter,
     ...props 
-}: Props & InputBaseProps<string> & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'onChange'>) => {
+}: Props & InputBaseProps<string> & TInputElementProps) => {
 
     /*----------------------------------
     - INIT

package/src/client/services/router/components/Page.tsx

@@ -21,14 +21,20 @@ export default ({ page }: { page: Page }) => {
     ----------------------------------*/
     const context = useContext();
 
-    // Temporary fix: context.page may not be updated at this stage
-    //  Seems to be the case when we change page, but still same page component with different data
-    context.page = page;
-
     // Bind data
     const [apiData, setApiData] = React.useState<{[k: string]: any} | null>( page.data || {});
     page.setAllData = setApiData;
-    context.data = apiData;
+    const fullData = {
+        ...context.data,
+        ...apiData
+    }
+
+    // Temporary fix: context.page may not be updated at this stage
+    //  Seems to be the case when we change page, but still same page component with different data
+    // TODO: ensure these updated are made every tume we change page / context
+    context.page = page;
+    context.data = fullData;
+    context.context = context;
 
     // Page component has not changed, but data were updated (ex: url parameters change)
     React.useEffect(() => {
@@ -43,15 +49,7 @@ export default ({ page }: { page: Page }) => {
     //  Make request parameters and api data accessible from the page component
     return page.renderer ? (
 
-        <page.renderer 
-            // Services
-            {...context} 
-            // API data & URL params
-            data={{
-                ...apiData,
-                ...context.request.data
-            }}
-        />
+        <page.renderer {...context} />
         
     ) : <>Renderer missing</>
 }

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

@@ -23,6 +23,7 @@ import { getLayout } from '@common/router/layouts';
 import { getRegisterPageArgs, buildRegex } from '@common/router/register';
 import { TFetcherList } from '@common/router/request/api';
 import type { TFrontRenderer } from '@common/router/response/page';
+import Button from '../../components/button';
 
 import App from '@client/app/component';
 import type ClientApplication from '@client/app';
@@ -359,8 +360,20 @@ export default class ClientRouter<
 
             } catch (e) {
                 console.error(`Failed to fetch the route ${route.chunk}`, e);
-                this.app.handleError(new Error("Failed to load content. Please reload the page and try again."));
-                throw e;
+                try {
+                    this.context.modal.show(() => (
+                        <div class="card col bg white w-3">
+                            <h2>New Update Available!</h2>
+                            <p>
+                                A new version of the website is available. Please refresh the page to continue.
+                            </p>
+                            <Button type="primary" onClick={() => window.location.reload()}>
+                                Reload
+                            </Button>
+                        </div>
+                    ));
+                } catch (error) {}
+                throw new Error("A new version of the website is available. Please refresh the page.");
             }
 
         } else {

package/src/client/services/router/request/api.ts

@@ -238,8 +238,9 @@ export default class ApiClient implements ApiClientService {
                     const error = errorFromJson(errorData);
                     throw error;
                 }
-                debug && console.log(`[api] Success:`, response);
-                return response.json() as Promise<TData>;
+                const json = await response.json() as TData;
+                debug && console.log(`[api] Success:`, json);
+                return json;
             })
             .catch((error) => {
                 if (error instanceof TypeError) {

package/src/common/data/markdown.ts

@@ -56,6 +56,15 @@ md.block.ruler.after('list', 'test', (state, startLine, endLine, silent) => {
                 token.attrs[ aIndex ][1] = 'liste';    // replace value of existing attr
             }
 
+        } else if (token.type === 'ordered_list_open') {
+            
+            const aIndex = token.attrIndex('class');
+            if (aIndex < 0) {
+                token.attrPush(['class', 'steps']); // add new attribute
+            } else {
+                token.attrs[ aIndex ][1] = 'steps';    // replace value of existing attr
+            }
+
         }
     }
 

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

@@ -442,7 +442,7 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
         // Upsert
         let upsertStatement: string = '';
         if (opts.upsert !== undefined)
-            upsertStatement = ' ' + this.buildUpsertStatement<TData>(table, opts as With<TInsertQueryOptions<TData>, 'upsert'>);
+            upsertStatement = ' ' + this.buildUpsertStatement<TData>(table, data, opts as With<TInsertQueryOptions<TData>, 'upsert'>);
     
         let okPacket: mysql.OkPacket = { ...emptyOkPacket }
 
@@ -501,10 +501,11 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
 
     private buildUpsertStatement<TData extends TObjetDonnees>( 
         table: TMetasTable, 
+        data: TData[],
         opts: With<TInsertQueryOptions<TData>, 'upsert'> 
     ): string {
 
-        const valuesToUpdate = this.getValuesToUpdate(table, opts.upsert);
+        const valuesToUpdate = this.getValuesToUpdate(table, data, opts.upsert);
 
         // All columns are ps
         const valuesToUpdatesEntries = Object.entries(valuesToUpdate);
@@ -519,35 +520,39 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
     // TODO: Fix typings
     private getValuesToUpdate<TData extends TObjetDonnees>(
         table: TMetasTable,
+        data: TData[],
         colsToUpdate: TColsToUpsert<TData>
     ) {
 
         // Column name => SQL
         let valuesToUpdate: Partial<TData> = {};
-
         // Define which columns to update when the record already exists
         let valuesNamesToUpdate: (keyof TData)[] = [];
-        if (colsToUpdate === '*') {
+        let updateAll: boolean | undefined;
+        
+        if (Array.isArray( colsToUpdate )) {
 
-            valuesNamesToUpdate = Object.keys(table.colonnes);// table.columnNamesButPk;
-            console.log(LogPrefix, `Automatic upsert into ${table.chemin} using ${table.pk.join(', ')} as pk: ${valuesNamesToUpdate.join(', ')}`);
-            // We don't take columnNamesButPk, because if all the columns are pks, we don't have yny value for the ON DUPLICATE KEY
-            //  Meaning
+            valuesNamesToUpdate = colsToUpdate;
 
-        } else if (Array.isArray( colsToUpdate )) {
+        } else if (colsToUpdate === '*') {
 
-            valuesNamesToUpdate = colsToUpdate;
+            updateAll = true;
 
         } else {
 
-            const { '*': updateAll, ...customValuesToUpdate } = colsToUpdate;
+            let customValuesToUpdate: Partial<TData>;
+            ({ '*': updateAll, ...customValuesToUpdate } = colsToUpdate);
 
             for (const colKey in customValuesToUpdate)
                 valuesToUpdate[ colKey ] = this.esc(customValuesToUpdate[ colKey ], true);
 
-            if (updateAll)
-                valuesNamesToUpdate = Object.keys(table.colonnes);//table.columnNamesButPk;
+        }
 
+        if (updateAll) {
+            for (const record of data)
+                for (const key in record)
+                    if (!valuesNamesToUpdate.includes( key ))
+                        valuesNamesToUpdate.push( key );
         }
 
         for (const colToUpdate of valuesNamesToUpdate)   

package/src/server/services/disks/driver.ts

@@ -59,6 +59,11 @@ export default abstract class FsDriver<
 > extends Service<Config, {}, Application, Services> {
 
     public abstract mount(): Promise<void>;
+
+    public abstract getFileUrl(
+        bucketName: TBucketName, 
+        filename: string
+    ): string;
     
     public abstract readDir( bucketName: TBucketName, dirname?: string ): Promise<SourceFile[]>;
 

package/src/server/services/disks/drivers/local/index.ts

@@ -72,6 +72,13 @@ export default class LocalFS<
     - ACTIONS
     ----------------------------------*/
 
+    public getFileUrl(
+        bucketName: TBucketName, 
+        filename: string
+    ) {
+        throw new Error("Method not available for local files.");
+    }
+
     public async readDir( bucketName: TBucketName, dirname?: string ) {
 
         const bucketDir = this.config.buckets[bucketName];

package/src/server/services/disks/drivers/s3/index.ts

@@ -99,6 +99,16 @@ export default class S3Driver<
     - ACTIONS
     ----------------------------------*/
 
+    public getFileUrl(
+        bucketName: TBucketName, 
+        filename: string
+    ) {
+        const bucket = this.config.buckets[bucketName];
+        if (bucket === undefined)
+            throw new Error(`Bucket "${bucketName}" not found in configuration`);
+        return `https://${bucket}.s3.${this.config.region}.amazonaws.com/${filename}`
+    }
+
     public readDir( bucketName: TBucketName, dirname?: string ) {
         const bucket = this.config.buckets[bucketName];
         return new Promise<SourceFile[]>((resolve, reject) => {