5htp-core 0.2.6 → 0.2.7-10

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.2.6",
+	"version": "0.2.7-10",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,6 +13,7 @@
 		"framework"
 	],
 	"dependencies": {
+		"@wojtekmaj/react-daterange-picker": "^4.2.0",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -93,7 +94,7 @@
 		"@types/yargs-parser": "^21.0.0",
 		"babel-plugin-glob-import": "^0.0.6-2"
 	},
-    "peerDependencies": {
-        "5htp": "0.2.3"
-    }
+	"peerDependencies": {
+		"5htp": "0.2.3"
+	}
 }

package/src/client/app/index.ts

@@ -24,8 +24,8 @@ export { default as Service } from './service';
 declare global {
     interface Window {
         dev: boolean,
-        // Defined by loading gtag.js
-        gtag: (action: string, name: string, params?: any) => void,
+        /*context: ClientContext,
+        user: User,*/
         /*context: ClientContext,
         user: User,*/
     }

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

@@ -64,6 +64,7 @@ img.icon {
     object-position: center;
 }
 
+img.logo,
 i.logo {
     /*width: 3.2em;
     height: 3.2em;
@@ -75,11 +76,16 @@ i.logo {
     line-height: 2em;
     flex: 0 0 2em;
 
+    background-color: var(--cBg2);
+    border-radius: @radius;
+    border: none; // For img
+}
+
+i.logo {
+
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-    background-color: var(--cBg2);
-    border-radius: 50%;
 
     &.contain {
         background-color: transparent;

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

@@ -118,6 +118,7 @@
     &.al-bottom { align-items: flex-end; }
     &.al-fill { align-items: stretch; }
     
+    > .row-1 { align-self: stretch; }
 }
 
 .col {
@@ -134,6 +135,8 @@
     &, &.al-fill { align-items: stretch; }
 
     &.sep-1 > * + * { border-top: solid 1px var(--cLine); }
+
+    > .col-1 { align-self: stretch; }
 }
 
 .row, 

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

@@ -46,6 +46,7 @@ export type TDialogControls = {
 type DialogActions = {
 
     setToasts: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
+    setModals: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
 
     show: (
         // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
@@ -81,9 +82,13 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
         let onClose: TOnCloseCallback<TReturnType>;
         const id = idA++;
 
+        const setDialog = isToast
+            ? instance.setToasts
+            : instance.setModals;
+
         const close = (retour: TReturnType) => {
 
-            instance.setToasts(q => q.filter(m => m.id !== id))
+            setDialog(q => q.filter(m => m.id !== id))
 
             if (onClose !== undefined)
                 onClose(retour);
@@ -145,7 +150,7 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
 
             render["id"] = id;
 
-            instance.setToasts(q => [...q, render]);
+            setDialog(q => [...q, render]);
         });
 
         return {
@@ -159,6 +164,7 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
         show: show,
 
         setToasts: undefined as unknown as DialogActions["setToasts"],
+        setModals: undefined as unknown as DialogActions["setModals"],
 
         confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No' = 'No') => show<boolean>(({ close }) => (
             <div class="card col">
@@ -228,16 +234,19 @@ export default () => {
 
     const app = useContext();
 
-    const [rendered, setRendered] = React.useState<ComponentChild[]>([]);
+    const [modals, setModals] = React.useState<ComponentChild[]>([]);
+    const [toasts, setToasts] = React.useState<ComponentChild[]>([]);
 
-    if (app.side === 'client')
-        app.modal.setToasts = app.toast.setToasts = setRendered;
+    if (app.side === 'client') {
+        app.modal.setModals = setModals;
+        app.toast.setToasts = setToasts;
+    }
 
     React.useEffect(() => {
 
         console.log('Updated toast list');
 
-        const modals = document.querySelectorAll("#dialog > .modal");
+        const modals = document.querySelectorAll("#modals > .modal");
         if (modals.length === 0)
             return;
 
@@ -259,10 +268,18 @@ export default () => {
 
     });
     
-    return rendered.length !== 0 ? (
-        <div id="dialog">
-            {rendered}
-        </div>
-    ) : null;
+    return <>
+        {modals.length !== 0 ? (
+            <div id="modals">
+                {modals}
+            </div>
+        ) : null}
+
+        {toasts.length !== 0 ? (
+            <div id="toasts">
+                {toasts}
+            </div>
+        ) : null}
+    </>
 
 }

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

@@ -169,7 +169,6 @@ export default ({
                     ) : title}
 
                     {(!prison && close) && (
-
                         <Button class="close" icon="solid/times" size="s" shape="pill" onClick={async () => {
                             if (typeof close === "function") {
 
@@ -179,7 +178,6 @@ export default ({
                                     close(false);
                             }
                         }} />
-
                     )}
 
                 </header>

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

@@ -1,6 +1,6 @@
 @toast-zindex: 999;
 
-#dialog {
+#modals, #toasts {
 
     z-index: @toast-zindex;
 
@@ -10,11 +10,10 @@
     justify-content: flex-end;
     gap: @spacing;
     padding: @spacing;
-
+    
     &,
     > .modal {
         position: fixed;
-        top: 0px; 
         left: 0px; 
         right: 0px; 
         bottom: 0px;
@@ -35,40 +34,13 @@
             margin-top: 0;
         }        
     }
+}
 
-    // Toast
-    > .card {
-
-        text-align: left;
-        max-width: 450px;
-        z-index: 999;
-        cursor: pointer;
-        padding-right: @spacing * 1.5;
-
-        animation: aff-toast 0.1s ease;
-        @keyframes aff-toast {
-            0% {
-                opacity: 0.5;
-                transform: scale(0.5);
-            }
-            100% {
-                opacity: 1;
-                transform: scale(1);
-            }
-        }    
-        
-        > i {
-            color: @c1;
-            flex: 0 0 1em;
-        }
-
-        h2 {
-            font-size: 1em;
-        }
+#modals {
 
-        p {
-            text-align: left;
-        }
+    &,
+    > .modal {
+        top: 0px; 
     }
 
     > .modal {
@@ -136,6 +108,43 @@
     }
 }
 
+#toasts {
+    // Toast
+    > .card {
+
+        text-align: left;
+        max-width: 450px;
+        z-index: 999;
+        cursor: pointer;
+        padding-right: @spacing * 1.5;
+
+        animation: aff-toast 0.1s ease;
+        @keyframes aff-toast {
+            0% {
+                opacity: 0.5;
+                transform: scale(0.5);
+            }
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }    
+        
+        > i {
+            color: @c1;
+            flex: 0 0 1em;
+        }
+
+        h2 {
+            font-size: 1em;
+        }
+
+        p {
+            text-align: left;
+        }
+    }
+}
+
 // Selecteur moins profond pour que les clases utilitaires (w-a-x) soient prioritaires
 .modal > .card {
     max-width: 500px;

package/src/client/components/Form.ts

@@ -86,7 +86,7 @@ export default function useForm<TFormData extends {}>(
 
         // Autosave
         if (options.autoSave !== undefined)
-            saveLocally(data, options.autoSave);
+            saveLocally(data, options.autoSave.id);
 
     }, [data]);
 
@@ -134,7 +134,7 @@ export default function useForm<TFormData extends {}>(
 
         // Reset autosaved data
         if (options.autoSave)
-            localStorage.removeItem(options.autoSave.id);
+            localStorage.removeItem('form.' + options.autoSave.id);
 
         return submitResult;
     }
@@ -158,6 +158,9 @@ export default function useForm<TFormData extends {}>(
     if (fields.current === null || Object.keys(schema).join(',') !== Object.keys(fields.current).join(',')) {
         fields.current = {}
         for (const fieldName in schema.fields) {
+
+            const validator = schema.fields[fieldName];
+
             fields.current[fieldName] = {
 
                 // Value control
@@ -182,8 +185,8 @@ export default function useForm<TFormData extends {}>(
 
                 // Error
                 errors: state.errors[fieldName],
-                required: schema.fields[fieldName].options?.opt !== true,
-                validator: schema.fields[fieldName]
+                required: validator.options?.opt !== true,
+                validator: validator,
             }
         }
     }

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

@@ -4,12 +4,13 @@
 
 // Npm
 import React from 'react';
-import type { ComponentChild, RefObject } from 'preact';
+import type { JSX, ComponentChild, RefObject } from 'preact';
 import type { StateUpdater } from 'preact/hooks';
 
 // Core
 import Button from '@client/components/button';
 import Input from '@client/components/inputv3';
+import type { TDialogControls } from '@client/components/dropdown';
 
 /*----------------------------------
 - TYPES
@@ -42,7 +43,7 @@ export type Props = (
     required?: boolean,
     noneSelection?: false | string,
     currentList: Choice[],
-    refPopover?: RefObject<HTMLElement>
+    refDropdown?: RefObject<TDialogControls>
 }
 
 /*----------------------------------
@@ -53,7 +54,7 @@ export type Props = (
     - we don't want the selector to be rendered before the dropdown content is dhown
     - this component is called multiple time
 */
-export default ({
+export default React.forwardRef<HTMLDivElement, Props>(({
     choices: initChoices, 
     validator, 
     required, 
@@ -64,8 +65,9 @@ export default ({
     inline, 
     multiple, 
     currentList,
-    refPopover
-}: Props) => {
+    refDropdown,
+    ...otherProps
+}: Props, ref) => {
 
     /*----------------------------------
     - INIT
@@ -102,7 +104,7 @@ export default ({
     - RENDER
     ----------------------------------*/
     return (
-        <div class={(inline ? '' : 'card ') + "col al-top"} ref={refPopover}>
+        <div {...otherProps} className={(inline ? '' : 'card ') + "col al-top " + (otherProps.className || '')} ref={ref}>
 
            {enableSearch && (
                <Input icon="search" 
@@ -113,21 +115,6 @@ export default ({
                />
            )}
 
-           {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" />
@@ -136,15 +123,28 @@ export default ({
                <ul class="col menu">
                    {choices.map( choice => {
                        const isCurrent = currentList.some(c => c.value === choice.value);
-                       return !isCurrent && (
+                       return (
                            <li>
                                <Button size="s" onClick={() => {
-                                   onChange( current => {
-                                       return multiple 
-                                           ? [...(current || []), choice] 
-                                           : choice
-                                   });
-                               }}>
+                                    onChange( current => {
+
+                                        console.log("click select", current, multiple, choice);
+
+                                        return multiple 
+                                            ? (isCurrent
+                                                ? current.filter(c => c.value !== choice.value)
+                                                : [...(current || []), choice] 
+                                            )
+                                            : (isCurrent
+                                                ? undefined
+                                                : [choice]
+                                            )
+                                    });
+
+                                    if (!multiple)
+                                        refDropdown?.current?.close(true);
+
+                               }} suffix={ isCurrent && <i src="check" class="fg primary" /> }>
                                    {/*search.keywords ? (
                                        <span>
                                        
@@ -169,4 +169,4 @@ export default ({
            )}
        </div>
    )
-}
+})

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

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import Dropdown, { TDialogControls, Props as DropdownProps } from '@client/components/dropdown';
+import Dropdown, { TDropdownControl, Props as DropdownProps } from '@client/components/dropdown';
 
 // Specific
 import ChoiceSelector, { 
@@ -36,7 +36,7 @@ export default ({
     - INIT
     ----------------------------------*/
 
-    const refModal = React.useRef<TDialogControls>(null);
+    const refDropdown = React.useRef<TDropdownControl>(null);
 
     /*----------------------------------
     - ACTIONS
@@ -56,9 +56,9 @@ export default ({
         {props.inline ? (
             <ChoiceSelector {...props} currentList={currentList} />
         ) : (
-            <Dropdown {...props} content={(() =>
-                <ChoiceSelector {...props} currentList={currentList} />
-            )} iconR="chevron-down" refModal={refModal}>
+            <Dropdown {...props} content={(
+                <ChoiceSelector {...props} currentList={currentList} refDropdown={refDropdown} />
+            )} iconR="chevron-down" refDropdown={refDropdown}>
 
                 {currentList.length === 0
                     ? title

package/src/client/components/containers/Popover/getPosition.ts

@@ -1,6 +1,6 @@
 export type TSide = "left"|"top"|"right"|"bottom";
 
-const debug = true;
+const debug = false;
 
 export type TPosition = ReturnType<typeof corrigerPosition>
 
@@ -129,7 +129,7 @@ export default function corrigerPosition(
         debug && console.log(`[popover] Left: Conservation`, posFinale.left);
     }
 
-    console.log({ posInit, dimsPop, frontieres }, { posFinale });
+    debug && console.log({ posInit, dimsPop, frontieres }, { posFinale });
 
     return {
         css: posFinale,

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

@@ -3,7 +3,8 @@
 ----------------------------------*/
 
 // Npm
-import React, { JSX, ComponentChild } from 'react';
+import React from 'react';
+import { JSX, ComponentChild } from 'preact';
 import type { StateUpdater } from 'preact/hooks';
 
 // Libs
@@ -15,11 +16,11 @@ import useContexte from '@/client/context';
 - TYPES
 ----------------------------------*/
 
-export type Props = {
+export type Props = JSX.HTMLAttributes<HTMLDivElement> & {
     id?: string,
 
     // Display
-    content?: JSX.Element | (() => JSX.Element),
+    content?: JSX.Element,
     state: [boolean, StateUpdater<boolean>],
     width?: number | string,
     disable?: boolean
@@ -53,7 +54,7 @@ export default (props: Props) => {
         ...autresProps
     } = props;
 
-    const [position, setPosition] = React.useState<TPosition>(undefined);
+    const [position, setPosition] = React.useState<TPosition | undefined>(undefined);
     const refCont = React.useRef<HTMLElement>(null);
     const refContent = React.useRef<HTMLElement>(null);
 
@@ -61,7 +62,7 @@ export default (props: Props) => {
 
     // Màj visibilite
     React.useEffect(() => {
-        if (shown === true) {
+        if (shown === true && refContent.current !== null && refCont.current !== null) {
 
             // Positionnement si affichage
             setPosition(
@@ -70,7 +71,7 @@ export default (props: Props) => {
                     refContent.current, 
                     false, 
                     side, 
-                    frame || document.getElementById('page')
+                    frame || document.getElementById('page') || undefined
                 )
             );
 
@@ -100,17 +101,20 @@ export default (props: Props) => {
 
     let renderedContent: ComponentChild;
     if (active) {
-        content = typeof content === 'function' ? React.createElement(content) : content;
+        //content = typeof content === 'function' ? React.createElement(content) : content;
+        console.log("render content", content);
         renderedContent = React.cloneElement( 
             content, 
             {
                 className: (content.props.className || '') 
                     + ' card white popover pd-1' 
                     + (position ? ' pos_' + position.cote : ''),
+
                 ref: (ref: any) => {
                     if (ref !== null)
                         refContent.current = ref
                 },
+
                 style: {
                     ...(content.props.style || {}),
                     ...(position ? {

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

@@ -8,18 +8,19 @@ import { ComponentChild, RefObject } from 'preact';
 
 // Core
 import Button, { Props as ButtonProps } from '../button';
-import { TDialogControls } from '../Dialog/Manager';
 import Popover from '../containers/Popover';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-export type { TDialogControls } from '../Dialog/Manager';
-
 export type Props = ButtonProps & {
     content: ComponentChild | (() => ComponentChild),
-    refModal?: RefObject<TDialogControls>
+    refDropdown?: RefObject<TDropdownControl>
+}
+
+export type TDropdownControl = {
+    close: () => void
 }
 
 /*----------------------------------
@@ -29,7 +30,7 @@ export default (props: Props) => {
 
     let {
         content,
-        refModal,
+        refDropdown,
         ...buttonProps
     } = props;
 
@@ -37,6 +38,11 @@ export default (props: Props) => {
 
     const refButton = React.useRef<HTMLElement>(null);
 
+    if (refDropdown)
+        refDropdown.current = {
+            close: () => popoverState[1]( false )
+        }
+
     return (
         <Popover content={content} state={popoverState}>
             <Button {...buttonProps} refElem={refButton} />

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

@@ -10,7 +10,7 @@ import { ComponentChild } from 'preact';
 import Button, { Props as ButtonProps } from '../button';
 
 // Libs
-import { TPopoverControls, PopoverProps } from './Manager';
+import { TPopover, PopoverProps } from './Manager';
 import useContexte from '@client/context';
 
 /*----------------------------------
@@ -77,7 +77,7 @@ export default (props: Props) => {
     }
 
     const refButton = React.useRef<HTMLElement>(null);
-    const refPopover = React.useRef<TPopoverControls>(null);
+    const refPopover = React.useRef<TPopover>(null);
 
     let classe = buttonProps.class === undefined
         ? "dropdown"

package/src/client/components/index.ts

@@ -16,6 +16,7 @@ export { default as Video } from './Video';
 export { default as Number } from './input/Number';
 export { default as Slider } from './input/Slider';
 export { default as Radio } from './input/Radio';
+export { default as Checkbox } from './input/Checkbox';
 
 // Data
 export { default as Amount } from './Amount';
@@ -28,6 +29,7 @@ export { default as CircularProgressbar } from './data/progressbar/circular';
 export { default as Select } from './Select';
 export { default as Input } from './inputv3';
 export { default as File } from './inputv3/file';
+export { default as DateRangeInput } from './inputv3/date';
 
 // TOD: fix popover component
 //export { default as Date } from './input/Date';