5htp-core 0.2.2 → 0.2.3

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.3",
 	"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

@@ -116,7 +116,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 #f5f5f5;
+
+    &:hover {
+        border-color: #eee;
+    }
+    
+    &.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/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/Form.ts

@@ -0,0 +1,123 @@
+/*----------------------------------
+- 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>,
+}
+
+/*----------------------------------
+- 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({
+        isLoading: false,
+        errorsCount: 0,
+        errors: {},
+        validated: false
+    });
+
+    React.useEffect(() => {
+        state.validated && validate(data);
+    }, [data]);
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+    const validate = (allData: TFormData) => {
+
+        const validated = schema.validate(allData, allData);
+
+        // Update errors
+        if (validated.nbErreurs !== state.errorsCount) {
+            fields.current = null; // Update the fields definition
+            setState( old => ({ 
+                ...old,
+                errorsCount: validated.nbErreurs, 
+                errors: validated.erreurs,
+                validated: true
+            }));
+        }
+        
+        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);
+    }
+
+    if (fields.current === null){
+        fields.current = {}
+        for (const fieldName in schema.fields) {
+            fields.current[fieldName] = {
+
+                // Value control
+                value: data[fieldName],
+                onChange: (val) => setData( old => ({ ...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
+            }
+        }
+    }
+
+    /*----------------------------------
+    - EXPOSE
+    ----------------------------------*/
+
+    const form = {
+        data,
+        set: setData,
+        submit,
+        fields: fields.current,
+        ...state
+    }
+    
+    return [form, fields.current]
+}

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

@@ -5,6 +5,7 @@
 // Npm
 import React, { JSX } from 'react';
 import { ComponentChild } from 'preact';
+import type { StateUpdater } from 'preact/hooks';
 
 // Composants
 import Bouton, { Props as PropsBouton } from '@client/components/button';
@@ -24,34 +25,17 @@ import useContexte from '@/client/context';
 export type Props = {
     id?: string,
 
-    children: JSX.Element | [JSX.Element],
-    afficher?: boolean,
-    fermer?: (funcFermer: () => void) => void,
-    position?: TSide,
-    frame?: HTMLElement,
-
+    // Display
     content?: JSX.Element,
-    menu?: { actions: TAction<any>[], data: any },
-
-    tag?: string,
+    state: [boolean, StateUpdater<boolean>],
     width?: number | string,
-    desactiver?: boolean
-}
-
-export type TAction<TDonnee> = {
-    icone?: TIcons,
-    label: ComponentChild,
-    multi?: boolean,
-
-    onClick?: (donnees: TDonnee, index: number) => void,
-    lien?: (donnees: TDonnee, index: number) => string,
-    bouton?: (donnees: TDonnee, index: number) => PropsBouton
-}
-
-export type TActionsPopover = {
-    show: () => void,
-    hide: () => void,
-    toggle: () => void
+    disable?: boolean
+    // Position
+    frame?: HTMLElement,
+    side?: TSide,
+    // Tag
+    children: JSX.Element | [JSX.Element],
+    tag?: string,
 }
 
 /*----------------------------------
@@ -64,116 +48,58 @@ export default (props: Props) => {
 
     let {
         id,
-        children, content, menu, tag, width, onVisibleChange, interactions, desactiver, fermer, frame,
-        position, afficher,
+
+        content, state, width, disable,
+
+        frame, side,
+
+        children, tag,
+
         ...autresProps
     } = props;
 
-    const [state, setState] = React.useState({
-        aff: false,
-        position: undefined
-    });
-
+    const [position, setPosition] = React.useState(undefined);
     const refCont = React.useRef<HTMLElement>(null);
     const refPop = React.useRef<HTMLElement>(null);
 
-    const controleViaProps = 'afficher' in props;
-    if (!controleViaProps) {
-        afficher = state.aff;
-        fermer = () => setState((stateA) => ({ ...stateA, aff: false }));
-    }
-
-    // L'assignement d'un id à une popover permet de controler l'affichage de ce dernier depuis n'importe quel autre composant
-    if (id !== undefined) {
-        ctx.popovers[ id ] = {
-            show: () => setState(s => ({ ...s, aff: true })),
-            hide: () => setState(s => ({ ...s, aff: false })),
-            toggle: () => setState(s => ({ ...s, aff: !s.aff })),
-        }
-    }
+    const [shown, show] = state;
 
     // Màj visibilite
     React.useEffect(() => {
-        if (afficher === true) {
-
+        if (shown === true) {
             // Positionnement si affichage
-            setState((stateA) => ({
-                ...stateA,
-                position: getPosition(
+            setPosition(
+                getPosition(
                     refCont.current, 
                     refPop.current, 
                     false, 
                     position, 
                     frame || document.getElementById('page')
                 )
-            }));
-
-            const isPageElement = deepContains([document.getElementById('page')], refPop.current);
-            if (!isPageElement)
-                document.body.classList.add('focus-popup');
-
-        } else {
-             
-            document.body.classList.remove('focus-popup');
+            );
 
+            //return blurable([refCont, () => show(false)])
         }
 
-        if (onVisibleChange)
-            onVisibleChange(afficher);
-
-        if (afficher === true)
-            return blurable([refCont, () => fermer()])
-
-    }, [afficher]);
+    }, [shown]);
 
     if (!autresProps.className)
         autresProps.className = '';
 
     autresProps.className += ' contPopover';
 
-    const active = afficher && !desactiver;
+    const active = shown && !disable;
     if (active) {
         autresProps.className += ' active';
     }
 
-    /*if (props.nom === 'destType')
-        console.log('AFFICHER POPOVER', afficher, 'controleViaProps', controleViaProps, 'autresProps.className', autresProps.className);*/
-
     const Tag = tag || 'div';
 
-    if (!Array.isArray( children ))
-        children = [children];
-
-    if (menu !== undefined)
-        content = (
-            <ul className="menu v">
-                {menu.actions.map(({ multi, bouton, lien, label, icone, onClick }: TAction<TDonnee>) => (
-                    <li>
-                        <Bouton
-                            {...(bouton ? (multi
-                                ? bouton([menu.data], [menu.index])
-                                : bouton(menu.data, menu.index)
-                            ) : {})}
-                            icon={icone}
-                            onClick={onClick && (() => multi 
-                                ? onClick([menu.data], [menu.index])
-                                : onClick(menu.data, menu.index)
-                            )}
-                            link={lien && lien(menu.data, menu.index)}
-                            forme="lien"
-                        >
-                            {label}
-                        </Bouton>
-                    </li>
-                ))}
-            </ul>
-        )
-
     return (
         <Tag
             style={{
                 position: 'relative',
-                ...(afficher ? {
+                ...(shown ? {
                     zIndex: 11
                 } : {})
             }}
@@ -183,33 +109,25 @@ export default (props: Props) => {
             }}
             {...autresProps}
         >
-            {controleViaProps
-                ? children // Les events de clic sont controlés par les props afficher et fermer
-                : children.map(child => React.cloneElement(child, {
-                    onClick: () => {
-                        const nouvEtat = !afficher;
-
-                        setState({ aff: nouvEtat, position: state.position });
-                    },
-                }))}
+            {React.cloneElement( children, {
+                onClick: (e) => {
+                    show(isShown => !isShown);
+                }
+            })}
 
             {active && React.cloneElement(content, {
-                className: (content.props.className || '') + ' card white popover' + (state.position ? ' pos_' + state.position.cote : ''),
-                onClick: () => {
-                    if (fermer && !interactions)
-                        fermer();
-                },
+                className: (content.props.className || '') + ' card white popover' + (position ? ' pos_' + position.cote : ''),
                 ref: (ref: any) => {
                     if (ref !== null)
                         refPop.current = ref
                 },
                 style: {
                     ...(content.props.style || {}),
-                    ...(state.position ? {
-                        top: state.position.css.top,
-                        left: state.position.css.left,
-                        right: state.position.css.right,
-                        bottom: state.position.css.bottom,
+                    ...(position ? {
+                        top: position.css.top,
+                        left: position.css.left,
+                        right: position.css.right,
+                        bottom: position.css.bottom,
                     } : {}),
                     ...(width !== undefined ? { width: typeof width === 'number' ? width + 'rem' : width } : {})
                 }

package/src/client/components/data/progressbar/circular/index.tsx

@@ -19,8 +19,6 @@ import {
 - TYPES
 ----------------------------------*/
 
-//import { TTailleComposant } from '@client/components/_base/types';
-
 type TEtape = {
     val: number,
     label?: string
@@ -44,7 +42,7 @@ export default ({
     ratioCercle: number,
     epaisseur: number,
     etapes?: TEtape[],
-    taille?: TTailleComposant
+    taille?: TComponentSize
 }) => {
 
     const refCont = React.useRef<HTMLDivElement>(null);