5htp-core 0.2.2 → 0.2.4

package/package.json

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

package/src/client/app/component.tsx

@@ -21,8 +21,7 @@ export default function App ({ context }: {
     context: TClientOrServerContext,
 }) {
 
-    const route = context.route;
-    const curLayout = route.options.layout;
+    const curLayout = context.page?.layout;
     const [layout, setLayout] = React.useState<Layout | false | undefined>(curLayout);
 
     // TODO: context.page is always provided in the context on the client side

package/src/client/app/index.ts

@@ -102,11 +102,7 @@ export default abstract class Application {
             })
     }
 
-    public handleError( error: CoreError | Error, httpCode?: number ) {
-    
-        /*console.error(`[api] Network error:`, e);
-        context.toast.error("Please check your internet connection and try again.", undefined, null, { autohide: false });*/
-    }
+    public abstract handleError( error: CoreError | Error, httpCode?: number );
 
     public reportBug = (infos: TBugReportInfos) => fetch('/help/bug/gui', {
         method: 'POST',
@@ -116,7 +112,7 @@ export default abstract class Application {
         },
         body: JSON.stringify({
             url: window.location.pathname,
-            ssrData: JSON.stringify(window["ssr"]),
+            context: JSON.stringify(window["ssr"]),
             guiVersion: BUILD_DATE,
             ...infos
         })

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

@@ -94,9 +94,6 @@
     ----------------------------------*/
 
     &.bg {
-
-        background: var(--cBg);
-        color: var(--cTxtBase);
         
         &:not(:disabled) {
             &:hover,
@@ -316,6 +313,10 @@ ul.col {
         }
     }
 
+    &.menu > li > .btn {
+        width: 100%;
+    }
+
     .btn.icon > .label,
     > li > .btn + ul {
         left: 100%;

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

@@ -20,23 +20,38 @@
 
     &.row {
         padding: @cardPadding @cardPaddingLong;
+
+        // TODO: rename & move elsewere
+        &.inside {
+
+            padding: 0;
+            gap: 0;
+            align-items: stretch;
+
+            > * {
+                padding: @cardPadding @cardPaddingLong;
+                &:first-child {
+                    border-top-left-radius: inherit;
+                    border-bottom-left-radius: inherit;
+                }
+                &:last-child {
+                    border-top-right-radius: inherit;
+                    border-bottom-right-radius: inherit;
+                }
+            }
+        }
+
+        &.sep {
+            > * + * {
+                border-left: solid 1px #eee;
+            }
+        }
     }
 
     &.col {
         padding: @cardPaddingLong @cardPadding;
     }
 
-    &.bg {
-        --cBg: difference(@cBgPage, #0a0a0a);
-        --cBg2: difference(@cBgPage, #111);
-        background: var(--cBg);
-
-        &.img {
-            background-position: center;
-            background-size: cover;
-        }
-    }
-
     &.selected {
 
         box-shadow: 0 0 0 3px @c1;

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

@@ -123,7 +123,7 @@ ol.steps {
 ol.steps > li:before,
 strong.step {
     
-    background: @c1SuperLight;
+    background: @c1 + #666;
     color: @c1;
 
     text-align: center;

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

@@ -27,17 +27,6 @@
     background: var(--cBgAccent);
 }
 
-.bg-cover {
-    background-color: #000;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-}
-
-img.bg-cover {
-    object-fit: cover;
-}
-
 .clickable {
     cursor: pointer;
 }

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

@@ -31,7 +31,6 @@
 }
 
 .card,
-.input.text,
 .btn,
 .table,
 i.solid {
@@ -48,9 +47,24 @@ i.solid {
     }
 }
 
+.input.text {
+    border: solid 0.25em #eee;
+
+    &:hover {
+        border-color: #ddd;
+    }
+    
+    &.focus {
+        border-color: @c1;
+    }
+
+    &.error {
+        border-color: @cError;
+    }
+}
+
 //.card.clickable:hover,
 .btn:hover,
 .input.text.focus {
-    z-index: 5;
-    box-shadow: 0 10px 50px fade(#000, 15%);
+    
 }

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

@@ -12,6 +12,61 @@
 .bg {
     background: var(--cBg);
     color: var(--cTxtBase);    
+
+    &.img {
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        .build-theme-bg(#000, #fff);
+        text-shadow: 0 0 10px fade(#000, 20%);
+
+        --cTxtDiscret: fade(#fff, 40%)
+        --cTxtDesc: fade(#fff, 60%);
+        --cTxtBase: fade(#fff, 80%);
+        --cTxtImportant: fade(#fff, 100%);
+        --cTxtAccent: fade(#fff, 20%);
+
+        &.light {
+            --cTxtDiscret: fade(#000, 40%)
+            --cTxtDesc: fade(#000, 60%);
+            --cTxtBase: fade(#000, 80%);
+            --cTxtImportant: fade(#000, 100%);
+            --cTxtAccent: fade(#000, 20%);
+        }
+        
+        &.colorize {
+            position: relative;
+
+            &::after {
+                content: ' ';
+                display: block;
+                background-color: inherit;
+                opacity: 0.5;
+                border-radius: inherit;
+
+                position: absolute;
+                top: 0; right: 0; bottom: 0; left: 0;
+                z-index: 1;
+            }
+
+            > * {
+                z-index: 2;
+                position: relative;
+            }
+        }
+    }
+
+    &.bg-cover {
+        background-color: #000;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+    &img.bg-cover {
+        object-fit: cover;
+    }
 }
 
 html {

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

@@ -45,10 +45,6 @@
             border: if(@bg = #ffffff, solid 2px var(--cLine), none);
         }*/
     }
-
-    .overlay {
-        background: fade(@bg, 50%);
-    }
 }
 
 .build-theme-fg( @cTxtBase, @bg: @cBgPage, @apply: true ) {

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

@@ -151,7 +151,7 @@
     &-3 { flex: 3; }
 
     &.menu {
-        gap: @spacing / 2;
+        gap: 1px;
     }
 }
 

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

@@ -4,25 +4,6 @@ img.img,
     background: @cBgPage - #101010;
 }
 
-.bg.img {
-    .build-theme-bg(#000, #fff);
-    text-shadow: 0 0 10px fade(#000, 20%);
-
-    --cTxtDiscret: fade(#fff, 40%)
-    --cTxtDesc: fade(#fff, 60%);
-    --cTxtBase: fade(#fff, 80%);
-    --cTxtImportant: fade(#fff, 100%);
-    --cTxtAccent: fade(#fff, 20%);
-
-    &.light {
-        --cTxtDiscret: fade(#000, 40%)
-        --cTxtDesc: fade(#000, 60%);
-        --cTxtBase: fade(#000, 80%);
-        --cTxtImportant: fade(#000, 100%);
-        --cTxtAccent: fade(#000, 20%);
-    }
-}
-
 img {
     max-width: 100%;
     display: block;
@@ -36,34 +17,6 @@ img {
 - IMAGE CONFIG
 ----------------------------------*/
 
-// Default: cover
-.bg.img {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-
-    &.colorize {
-        position: relative;
-
-        &::after {
-            content: ' ';
-            display: block;
-            background-color: inherit;
-            opacity: 0.5;
-            border-radius: inherit;
-
-            position: absolute;
-            top: 0; right: 0; bottom: 0; left: 0;
-            z-index: 1;
-        }
-
-        > * {
-            z-index: 2;
-            position: relative;
-        }
-    }
-}
-
 img.img {
     object-fit: cover;
     object-position: center;

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

@@ -137,10 +137,7 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
             
             if (!isToast)
                 render = (
-                    <div class="modal" onClick={(e) => {
-                        if (e.target === e.currentTarget && !paramsInit?.prison)
-                            close(false);
-                    }}>
+                    <div class="modal">
                         {render}
                     </div>
                 )

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

@@ -149,7 +149,7 @@ export default ({
             
         </div>
     ) : (
-        <div class={"card pd-2 col"} style={width === undefined 
+        <div class={"card pd-2 col al-top"} style={width === undefined 
             ? {}
             : { minWidth: width + "px", maxWidth: width + "px" }
         }>

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

@@ -82,8 +82,7 @@
         gap: @spacing;
         z-index: @modal-zindex;
 
-        background: fade(#fff, 20%);
-        backdrop-filter: blur(30px) saturate(2);
+        background: fade(#000, 20%);
         border-radius: @radius;
 
         // Desktop = vertically center the modal
@@ -109,6 +108,7 @@
             max-height: 100vh;
             box-shadow: none;
             padding: @spacing * 2;
+            overflow-y: auto;
 
             // Pas d'anim quand pas card, 
             // Car peut contenir bcp d'elemnts => performance

package/src/client/components/Form.ts

@@ -0,0 +1,154 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// npm
+import React from 'react';
+
+// Core
+import type { Schema } from '@common/validation';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+type TFormOptions<TFormData extends {}> = {
+    data?: Partial<TFormData>,
+    submit?: (data: TFormData) => Promise<void>
+}
+
+type FieldsAttrs<TFormData extends {}> = {
+    [fieldName in keyof TFormData]: {}
+}
+
+export type Form<TFormData extends {} = {}> = {
+    data: TFormData,
+    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
+}
+
+/*----------------------------------
+- HOOK
+----------------------------------*/
+export default function useForm<TFormData extends {}>( schema: Schema<TFormData>, options: TFormOptions<TFormData> ) {
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+    const fields = React.useRef<FieldsAttrs<TFormData>>(null);
+
+    const [data, setData] = React.useState<TFormData>( options.data || {} );
+    const [state, setState] = React.useState<FormState>({
+        isLoading: false,
+        errorsCount: 0,
+        errors: {},
+        changed: false
+    });
+
+    // Validate data when it changes
+    React.useEffect(() => {
+        state.changed && validate(data);
+    }, [data]);
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+    const validate = (allData: TFormData) => {
+
+        const validated = schema.validate(allData, allData);
+
+        // Update errors
+        if (validated.nbErreurs !== state.errorsCount) {
+            rebuildFieldsAttrs({ 
+                errorsCount: validated.nbErreurs, 
+                errors: validated.erreurs,
+            });
+        }
+        
+        return validated;
+    }
+
+    const submit = (additionnalData: Partial<TFormData> = {}) => {
+
+        const allData = { ...data, ...additionnalData }
+
+        // Validation
+        const validated = validate(allData);
+        if (validated.nbErreurs !== 0)
+            return;
+
+        // Callback
+        if (options.submit)
+            return options.submit(validated.values);
+    }
+
+    const rebuildFieldsAttrs = (newState: Partial<FormState> = {}) => {
+        // Force rebuilding the fields definition on the next state change
+        fields.current = null; 
+        // Force state change
+        setState( old => ({ 
+            ...old,
+            ...newState,
+            changed: true
+        }));
+    }
+
+    // Rebuild the fields attrs when the schema changes
+    if (fields.current === null || Object.keys(schema).join(',') !== Object.keys(fields.current).join(',')){
+        fields.current = {}
+        for (const fieldName in schema.fields) {
+            fields.current[fieldName] = {
+
+                // Value control
+                value: data[fieldName],
+                onChange: (val) => {
+                    setState( old => ({ 
+                        ...old,
+                        changed: true
+                    }));
+                    setData( old => {
+                        return { 
+                            ...old, 
+                            [fieldName]: typeof val === 'function'
+                                ? val(old[fieldName])
+                                : val
+                        }
+                    })
+                },
+
+                // Submit on press enter
+                onKeyDown: e => {
+                    if (e.key === 'Enter') {
+                        submit({ [fieldName]: e.target.value } as Partial<TFormData>);
+                    }
+                },
+
+                // Error
+                errors: state.errors[ fieldName ],
+                required: schema.fields[ fieldName ].options?.opt !== true,
+                validator: schema.fields[ fieldName ]
+            }
+        }
+    }
+
+    /*----------------------------------
+    - EXPOSE
+    ----------------------------------*/
+
+    const form = {
+        data,
+        set: setData,
+        submit,
+        fields: fields.current,
+        ...state
+    }
+    
+    return [form, fields.current]
+}