5htp-core 0.3.7 → 0.3.9

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.3.7",
+	"version": "0.3.9",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -80,7 +80,9 @@
 		"validator": "^13.7.0",
 		"ws": "^8.2.2",
 		"yaml": "^1.10.2",
-		"yargs-parser": "^21.1.1"
+		"yargs-parser": "^21.1.1",
+		"youch": "^3.3.3",
+		"youch-terminal": "^2.2.3"
 	},
 	"devDependencies": {
 		"@types/cookie": "^0.4.1",
@@ -97,6 +99,6 @@
 		"babel-plugin-glob-import": "^0.0.7"
 	},
 	"peerDependencies": {
-		"5htp": "0.3.1"
+		"5htp": "0.3.8"
 	}
 }

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

@@ -25,7 +25,7 @@
 
     // Text
     text-decoration: none;
-    font-weight: 600;
+    font-weight: 500;
 
     // Colors
     background: var(--cBg);
@@ -90,12 +90,6 @@
 
     }
 
-    > .pastille {
-        position: absolute;
-        right: 10px;
-        bottom: 10px;
-    }
-
     /*----------------------------------
     - THEME
     ----------------------------------*/
@@ -230,9 +224,12 @@ ul.row {
             color: var(--cTxtImportant);
         }
 
-        // All the list items label must be aligned
         > .label {
+            // All the list items label must be aligned
             justify-content: flex-start;
+            // Since they're all horizontally aligned,
+            // Label = max width, so icon right are also aligned to right
+            flex: 1;
         }
 
         &.icon {
@@ -244,8 +241,7 @@ ul.row {
                 display: none;
                 position: absolute;
                 
-                background: fade(@cDark, 90%);
-                backdrop-filter: blur(20px) saturate(180%);
+                background: #111;
                 
                 height: @sizeComponent;
                 line-height: @sizeComponent;

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

@@ -77,7 +77,7 @@
         }
     }
 
-    &.selected {
+    &.active {
 
         box-shadow: 0 0 0 3px @c1;
 
@@ -86,12 +86,6 @@
         }
     }
 
-    &.minimal {
-        background:transparent;
-        box-shadow: none;
-        border: solid 1px var(--cLine);
-    }
-
     /*----------------------------------
     - VARIANTS
     ----------------------------------*/

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

@@ -33,11 +33,14 @@ i {
 
     &.solid {
         color: var(--cAccent2);
-
-        width: @sizeComponent;
-        flex: 0 0 @sizeComponent;
-        height: @sizeComponent;
-        line-height: @sizeComponent;
+        background: var(--cBg);
+        border-radius: @radius;
+
+        // Normla size must fit inside a normal fit element
+        width: @sizeComponent * 0.75;
+        flex: 0 0 @sizeComponent * 0.75;
+        height: @sizeComponent * 0.75;
+        line-height: @sizeComponent * 0.75;
         //font-size: 0.9em;
     }
 

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

@@ -103,8 +103,7 @@ strong {
     }
 }
 
-strong.number,
-header > strong {
+strong.number {
     //font-family: 'Montserrat';
     font-size: 1.3em;
     line-height: 1em;
@@ -181,7 +180,7 @@ pre {
 
     h2, h3, h4 {
         text-align: left;
-        margin: @spacing * 2 0;
+        margin: 1em 0;
     }
 
     h2 {

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

@@ -32,7 +32,7 @@
     // Flags
     @bg: @theme[background];
     @bgActive: if( @isLight, 
-        @bg - #111, 
+        @bg - #040404, 
         @bg + #111, 
     );
     @fg: @theme[foreground];

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

@@ -37,6 +37,10 @@
         > * {
             min-width: fit-content;
         }
+
+        &.menu {
+            min-height: @sizeComponent;
+        }
     }
 
     // Avec justify-content: center, les premiers élements sont cachés

package/src/client/components/Form.ts

@@ -109,7 +109,7 @@ export default function useForm<TFormData extends {}>(
     ----------------------------------*/
     const validate = (allData: Partial<TFormData> = data, validateAll: boolean = true) => {
 
-        const validated = schema.validate(allData, allData, {}, {
+        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,
@@ -138,6 +138,7 @@ export default function useForm<TFormData extends {}>(
             context.app.handleError(
                 new InputError("You have " + validated.errorsCount + " errors in the form.")
             );
+            console.log("validated", validated.erreurs);
             return;
         }
 

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

@@ -5,10 +5,11 @@
 // Npm
 import React from 'react';
 
+// Cpre
+import { Button } from '@client/components';
+
 // Specific
-import type { 
-    Choice,
-} from './ChoiceSelector';
+import type { Choice } from './ChoiceSelector';
 
 import type { Props } from '.';
 
@@ -19,10 +20,11 @@ import type { Props } from '.';
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default ({ choice, currentList, onChange, multiple, includeCurrent }: {
+export default ({ choice, currentList, onChange, multiple, includeCurrent, format = 'badge' }: {
     choice: Choice,
     currentList: Choice[],
-    includeCurrent: boolean
+    includeCurrent?: boolean,
+    format?: 'list' | 'badge'
 } & Pick<Props, 'onChange'|'multiple'>) => {
 
     const isCurrent = currentList.some(c => c.value === choice.value);
@@ -30,7 +32,19 @@ export default ({ choice, currentList, onChange, multiple, includeCurrent }: {
 
     const showRemoveButton = multiple;
 
-    return isCurrent ? (
+    return format === 'list' ? (
+        <li>
+            <Button icon={isCurrent ? 'check-circle' : undefined} onClick={() => onChange( current => multiple 
+                ? (isCurrent 
+                    ? currentList.filter(item => item.value !== choice.value) 
+                    : [...(current || []), choice]
+                )
+                : isCurrent ? undefined : choice
+            )}>
+                {choice.label} 
+            </Button>
+        </li>
+    ) : isCurrent ? (
         <li class={"badge bg primary"+  (showRemoveButton ? ' pdr-05' : '')}>
             {choice.label}
 

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

@@ -25,14 +25,14 @@ type ChoicesFunc = (search: string) => Promise<Choices>
 export type Props = (
     {
         multiple: true,
-        value?: Choice[],
+        value?: Choice[] | Choice["value"][],
         onChange: StateUpdater<Choice[]>,
         validator?: ArrayValidator
     }
     |
     {
         multiple?: false,
-        value?: Choice,
+        value?: Choice | Choice["value"],
         onChange: StateUpdater<Choice>,
         validator?: StringValidator
     }
@@ -53,6 +53,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
 */
+// ! OBSOLETE
 export default React.forwardRef<HTMLDivElement, Props>(({
     choices: initChoices, 
     validator, 

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

@@ -29,6 +29,25 @@ export type Props = DropdownProps & SelectorProps & {
 
 export type { Choice } from './ChoiceSelector';
 
+const ensureChoice = (choice: Choice | string, choices: Choice[]): Choice => {
+
+    // Allready a choice
+    if (typeof choice === 'object' && choice.label) {
+        return choice;
+    }
+
+    // Find the choice
+    const found = choices.find( c => c.value === choice);
+    if (found)
+        return found;
+
+    // Create a new choice
+    return {
+        label: choice,
+        value: choice
+    }
+}
+
 /*----------------------------------
 - COMONENT
 ----------------------------------*/
@@ -95,8 +114,8 @@ export default ({
     const currentList: Choice[] = current === undefined
         ? []
         : (Array.isArray(current) 
-            ? current 
-            : [current]
+            ? current.map( c => ensureChoice(c, choices))
+            : [ensureChoice(current, choices)]
         );
 
     /*----------------------------------
@@ -121,14 +140,7 @@ export default ({
     - RENDER
     ----------------------------------*/
 
-    const SelectedItems = ( enableSearch ? currentList : choices ).map( choice => (
-        <ChoiceElement choice={choice} 
-            currentList={currentList}
-            onChange={onChange}
-            multiple={multiple}
-            includeCurrent 
-        />
-    ))
+    const selectedItems = enableSearch ? currentList : choices
 
     const Search = enableSearch && (
         <Input  
@@ -145,7 +157,7 @@ export default ({
             overflowY: 'auto'
         }}>
             {choices.map( choice => (
-                <ChoiceElement choice={choice} 
+                <ChoiceElement format='badge' choice={choice} 
                     currentList={currentList}
                     onChange={onChange}
                     multiple={multiple}
@@ -156,14 +168,21 @@ export default ({
 
     return dropdown ? (
         <Popover content={(
-            <div class="card col" style={{ width: '300px' }}>
+            <div class="card col" style={{ width: '200px' }}>
 
                 <div class="col">
 
-                    {SelectedItems.length !== 0 && (
-                        <div class="row wrap">
-                            {SelectedItems}
-                        </div>
+                    {selectedItems.length !== 0 && (
+                        <ul class="menu col">
+                            {selectedItems.map( choice => (
+                                <ChoiceElement format='list' choice={choice} 
+                                    currentList={currentList}
+                                    onChange={onChange}
+                                    multiple={multiple}
+                                    includeCurrent 
+                                />
+                            ))} 
+                        </ul>
                     )}
 
                     {Search} 
@@ -173,10 +192,15 @@ export default ({
             </div>
         )} state={popoverState}>
             <Button icon={icon} iconR="chevron-down" {...otherProps}>
-                {title} {(multiple && currentList.length > 0) 
-                    ? <span class="badge s bg accent">{currentList.length}</span> 
-                    : null
-                }
+
+                {currentList.length === 0 ? <>
+                    {title}
+                </> : multiple ? <>
+                    {title} <span class="badge s bg accent">{currentList.length}</span> 
+                </> : <>
+                    {currentList[0].label}
+                </>}
+
             </Button>
         </Popover>
     ) : (
@@ -197,7 +221,15 @@ export default ({
                         )}</label>
 
                         <div class="row al-left wrap sp-05">
-                            {SelectedItems} 
+
+                            {selectedItems.map( choice => (
+                                <ChoiceElement format='badge' choice={choice} 
+                                    currentList={currentList}
+                                    onChange={onChange}
+                                    multiple={multiple}
+                                    includeCurrent 
+                                />
+                            ))} 
 
                             {Search}  
                         </div>

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

@@ -21,7 +21,7 @@ export type Props = JSX.HTMLAttributes<HTMLDivElement> & {
 
     // Display
     content?: JSX.Element,
-    state: [boolean, StateUpdater<boolean>],
+    state?: [boolean, StateUpdater<boolean>],
     width?: number | string,
     disable?: boolean
     // Position
@@ -58,6 +58,9 @@ export default (props: Props) => {
     const refCont = React.useRef<HTMLElement>(null);
     const refContent = React.useRef<HTMLElement>(null);
 
+    if (state === undefined)
+        state = React.useState(false);
+
     const [shown, show] = state;
 
     // Màj visibilite

package/src/client/components/data/Time.tsx

@@ -4,36 +4,40 @@
 
 // Npm
 import React from 'react';
+import { ComponentChild } from 'preact';
 
 // Libs
-import { timeSince } from '@common/data/dates';
+import { timeSince, TDateInfo } from '@common/data/dates';
 
 /*----------------------------------
-- TYPES: IMPORTATIONS
+- TYPES
 ----------------------------------*/
+export type { TDateInfo } from '@common/data/dates';
 
-
-
-/*----------------------------------
-- TYPES: DECLARATIONS
-----------------------------------*/
+export const interval = {
+    day: 24 * 60 * 60,
+    hour: 60 * 60,
+    minute: 60,
+    second: 1
+}
 
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-export default ({ since }: {
-    since: Parameters<typeof timeSince>[0]
+export default ({ since, render }: {
+    since: Parameters<typeof timeSince>[0],
+    render?: (dateInfo: TDateInfo) => ComponentChild
 }) => {
 
-    const [text, setDisplay] = React.useState(timeSince(since));
+    const [time, setTime] = React.useState<TDateInfo | null>( timeSince(since) );
 
     React.useEffect(() => {
 
-        const textUpdate = setInterval(() => setDisplay(timeSince(since)), 10000);
+        const textUpdate = setInterval(() => setTime(timeSince(since)), 10000);
         return () => clearInterval(textUpdate);
 
     }, []);
 
-    return <>{text}</>;
+    return <>{time === null ? "?" : render ? render(time) : time.text}</>;
 
 }

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

@@ -18,6 +18,7 @@ export type InputBaseProps<TValue> = {
     title: string, // Now mandatory
     required?: boolean,
     errors?: string[],
+    size?: TComponentSize,
 
     value: TValue,
     onChange?: (value: TValue) => void,

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

@@ -44,7 +44,7 @@ export type Props = {
 ----------------------------------*/
 export default ({ 
     // Decoration
-    icon, prefix, suffix, iconR, required,
+    icon, prefix, suffix, iconR, required, size,
     // State
     inputRef, errors,
     // Behavior
@@ -142,6 +142,8 @@ export default ({
         className += ' empty';
     if (focus)
         className += ' focus';
+    if (size !== undefined)
+        className += ' ' + size;
     if (errors?.length)
         className += ' error';
 

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

@@ -85,13 +85,8 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
         // WARNING: Don"t try to play with pages here, since the object will not be updated
         //  If needed to play with pages, do it in the setPages callback below
         // Unchanged path
-        if (request.path === currentRequest.path) {
-
-            // Scroll to component
-            if (request.hash) {
-                scrollToElement(request.hash);
-            }
-
+        if (request.path === currentRequest.path && request.hash !== currentRequest.hash) {
+            scrollToElement(request.hash);
             return;
         }
         
@@ -110,7 +105,14 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
         }
 
         // Fetch API data to hydrate the page
-        const newData = await newpage.fetchData();
+        let newData;
+        try {
+            newData = await newpage.fetchData();
+        } catch (error) {
+            console.error(LogPrefix, "Unable to fetch data:", error);
+            clientRouter.setLoading(false);
+            return;
+        }
 
         // Add page container
         setPages( pages => {

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

@@ -163,7 +163,7 @@ export default class ApiClient implements ApiClientService {
 
                 return data;
 
-            });
+            })
 
         // Errors will be catched in the caller
 
@@ -229,14 +229,20 @@ export default class ApiClient implements ApiClientService {
     
             })
             .catch((e: AxiosError) => {
-    
+
                 if (e.response !== undefined) {
     
+                    // Transmiss error
                     console.warn(`[api] Failure:`, e);
-                    throw viaHttpCode(
+                    const error = viaHttpCode(
                         e.response.status || 500,
                         e.response.data
                     );
+
+                    // API Error hook
+                    this.app.handleError(error, e.response.status);
+
+                    throw error;
     
                 // Erreur réseau: l'utilisateur n'ets probablement plus connecté à internet
                 } else {

package/src/common/data/dates.ts

@@ -5,19 +5,35 @@ const timeAgo = new TimeAgo('en-US')
 
 import dayjs from 'dayjs';
 
-export const timeSince = (date: Date | number | string) => {
+export type TDateInfo = {
+    isPast: boolean,
+    delta: number,
+    text: string
+}
+
+export const timeSince = (date: Date | number | string): TDateInfo | null => {
 
     if (date === undefined)
-        return 'Inconnu';
+        return null;
 
     // Timeago ne prend que des dates et des timestamp
     if (typeof date === 'string') {
         date = Date.parse(date);
         if (isNaN(date))
-            return "?";
+            return null;
     }
 
-    return timeAgo.format(date);
+    // Get metas
+    const now = Date.now()
+    const timestamp = date instanceof Date ? date.getTime() : date;
+    const deltaSeconds = Math.abs( Math.round( (now - timestamp) / 1000 ));
+    const isPast = now > timestamp;
+
+    return {
+        text: timeAgo.format(date),
+        isPast,
+        delta: deltaSeconds
+    };
 }
 
 export const tempsRelatif = (time: number, nbChiffresInit?: number) => {

package/src/common/data/objets.ts

@@ -117,4 +117,21 @@ export const chemin = {
         valA[ brancheVal ] = val;
         
     }
+}
+
+export const groupBy = <TObj extends TObjetDonnees>(
+    items: TObj[], 
+    key: keyof TObj
+): {[key: string]: TObj[]} => {
+    
+    const grouped: {[key: string]: TObj[]} = {};
+
+    for (const item of items) {
+        const  indexValue  = item[key] as any;
+        if (grouped[ indexValue ] === undefined)
+            grouped[ indexValue ] = [];
+        grouped[ indexValue ].push(item);
+    }
+
+    return grouped;
 }

package/src/common/router/index.ts

@@ -15,7 +15,7 @@ import type {
     TRouteHttpMethod 
 } from '@server/services/router';
 
-import type { TUserRole } from '@server/services/users';
+import type { TUserRole } from '@server/services/auth';
 
 import type { TAppArrowFunction } from '@common/app';