5htp-core 0.4.2 → 0.4.3

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.2",
+	"version": "0.4.3",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -18,12 +18,10 @@
 		"ansi-to-html": "^0.7.1",
 		"array-move": "^3.0.1",
 		"aws-sdk": "^2.1415.0",
-		"axios": "^1.2.1",
 		"bowser": "^2.11.0",
 		"chart.js": "^3.6.2",
 		"cli-highlight": "^2.1.11",
 		"compression": "^1.7.4",
-		"connect-redis": "^6.0.0",
 		"cookie-parser": "^1.4.5",
 		"core-js": "^3.18.1",
 		"cors": "^2.8.5",
@@ -34,11 +32,9 @@
 		"express": "^4.17.1",
 		"express-csp-header": "^5.0.0",
 		"express-fileupload": "^1.2.1",
-		"express-static-gzip": "^2.1.1",
 		"fast-safe-stringify": "^2.1.1",
 		"formattor": "^0.0.2",
 		"fs-extra": "^10.1.0",
-		"google-auth-library": "^7.11.0",
 		"got": "^11.8.3",
 		"handlebars": "^4.7.7",
 		"helmet": "^4.6.0",
@@ -47,7 +43,6 @@
 		"human-interval": "^2.0.1",
 		"intl": "^1.2.5",
 		"iso-639-1": "^2.1.9",
-		"javascript-time-ago": "^2.3.9",
 		"js-cookie": "^3.0.1",
 		"jsonwebtoken": "^8.5.1",
 		"load-script": "^2.0.0",
@@ -58,17 +53,15 @@
 		"module-alias": "^2.2.2",
 		"morgan": "^1.10.0",
 		"mysql2": "^2.3.0",
-		"nodemailer": "^6.6.3",
 		"object-sizeof": "^1.6.3",
 		"path-to-regexp": "^6.2.0",
 		"picomatch": "^2.3.1",
-		"preact": "^10.5.15",
-		"preact-render-to-string": "^5.1.19",
+		"preact": "^10.22.1",
+		"preact-render-to-string": "^6.5.5",
 		"react-datetime-picker": "^5.6.0",
 		"react-scrollbars-custom": "^4.0.27",
 		"react-slider": "^2.0.1",
 		"react-textarea-autosize": "^8.3.3",
-		"redis": "^3.1.2",
 		"regenerator-runtime": "^0.13.9",
 		"request": "^2.88.2",
 		"sharp": "^0.29.1",
@@ -94,8 +87,7 @@
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7",
-		"@types/yargs-parser": "^21.0.0",
-		"babel-plugin-glob-import": "^0.0.7"
+		"@types/yargs-parser": "^21.0.0"
 	},
 	"peerDependencies": {
 		"5htp": "0.3.9"

package/src/client/app/component.tsx

@@ -26,6 +26,7 @@ export default function App ({ context }: {
 
     const curLayout = context.page?.layout;
     const [layout, setLayout] = React.useState<Layout | false | undefined>(curLayout);
+    const [apiData, setApiData] = React.useState<{[k: string]: any} | null>( context.page?.data || {});
 
     // TODO: context.page is always provided in the context on the client side
     if (context.app.side === "client")
@@ -39,8 +40,16 @@ export default function App ({ context }: {
             {!layout ? <>
                 {/* TODO: move to app, because here, we're not aware that the router service has been defined */}
                 <RouterComponent service={context.Router} />
-            </> : <>
-                <layout.Component context={context} />
+            </> : <> {/* Same as router/components/Page.tsx */}
+                <layout.Component 
+                    // Services
+                    {...context} 
+                    // API data & URL params
+                    data={{
+                        ...apiData,
+                        ...context.request.data
+                    }} 
+                />
             </>}
             
         </ReactClientContext.Provider>

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

@@ -34,7 +34,7 @@
     // Hover
     //transition: all .5s linear;
     &:hover,
-    &.selected,
+    &.active,
     li:hover > & {
 
         color: var(--cTxtImportant);
@@ -123,7 +123,7 @@
 
     cursor: pointer;
 
-    &:not(.primary).selected {
+    &:not(.primary).active {
 
         &.col {
             box-shadow: 0 0 0 0.2em @c2;
@@ -229,7 +229,7 @@ ul.row {
         //width: 100%;
         background: transparent;
 
-        &.selected,
+        &.active,
         &:hover {
             background: var(--cBgActive);
             color: var(--cTxtImportant);
@@ -280,8 +280,8 @@ ul.row {
         position: relative;
 
         // Submenu
-        &:not(.contPopover):not(:hover) > .btn + .menu,
-        > .btn[disabled] + .menu {
+        &:not(.contPopover):not(:hover) > .btn + .submenu,
+        > .btn[disabled] + .submenu {
             visibility: hidden;
         }
     }
@@ -332,7 +332,7 @@ ul.col {
     }
 
     .btn.icon > .label,
-    > li > .btn + .menu {
+    > li > .btn + .submenu {
         left: 100%;
         margin-left: @spacing;
     }
@@ -340,7 +340,7 @@ ul.col {
     > li {
 
         // Sous le label quand bouton = icone seulement
-        > .btn + ul {
+        > .btn + .menu {
 
             top: @sizeComponent;
             margin-top: @spacing / 2;
@@ -365,7 +365,7 @@ ul.col {
     &.bubble-left {
 
         .btn.icon > .label,
-        > li > .btn + .menu {
+        > li > .btn + .submenu {
             left: auto;
             margin-left: 0;
             right: 100%;
@@ -378,12 +378,12 @@ ul.col {
 ul.row {
 
     .btn.icon > .label,
-    > li > .btn + .menu {
+    > li > .btn + .submenu {
         bottom: 100%;
         margin-bottom: 0; // User's mouse shouldnt go outside the li so the hover state is not lost
     }
 
-    > li > .btn + .menu.pos-bottom {
+    > li > .btn + .submenu.pos-bottom {
         bottom: auto;
         top: 100%;
         margin-top: 0; // User's mouse shouldnt go outside the li so the hover state is not lost

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

@@ -19,7 +19,6 @@
     border-radius: @radius;
 
     line-height: 1.5;
-    font-weight: 600;
     text-align: left;
     
     padding: 0.4em @spacing;

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

@@ -5,10 +5,6 @@
 @import './utils/spacing.less';
 @import (reference) "./theme.less";
 
-// Fonts
-@import '../fonts/Inter/index.less';
-@import '../fonts/Rubik/index.less';
-
 // Apply the theme class
 .bg {
     background: var(--cBg);

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

@@ -172,8 +172,7 @@ pre {
 
     &,
     p {
-        font-family: 'Lato', sans-serif;
-        font-size: 1.1rem;
+        font-size: 1.2rem;
         line-height: 2em;
         color: var(--cTxtBase);
         text-align: justify;

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

@@ -26,11 +26,6 @@ h3 {
     }
 }
 
-h1,
-h2 {
-    font-family: "Rubik";
-}
-
 // sans input.h1, .h1 seul ne peut pas override le style par défaut des champs
 h1, .h1 {
     font-size: @h1Size;

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

@@ -69,7 +69,7 @@
                 position: relative;
             }
 
-            > a.selected {
+            > a.active {
                 color: var(--cTxtImportant  );
 
                 @indicatorSize: 5px;
@@ -114,7 +114,7 @@
 
     &.inline { display: inline-flex; }
 
-    &.al-left { justify-content: flex-start; }
+    &.wrap, &.al-left { justify-content: flex-start; }
     &, 
     &.al-center { justify-content: center; }
     &.al-right { justify-content: flex-end; }
@@ -137,8 +137,8 @@
         }
     }
 
-    &.al-top { justify-content: flex-start; }
-    &, &.al-middle { justify-content: center; }
+    &, &.al-top { justify-content: flex-start; }
+    &.al-middle { justify-content: center; }
     &.al-bottom { justify-content: flex-end; }
 
     &.al-left { align-items: flex-start; }
@@ -238,7 +238,7 @@
         border-radius: @radius;
     }
 
-    &.bi-1 { // Bordure interne
+    &.sep-1 { // Bordure interne
 
         background-color: var(--cLine2);
         gap: 1px;

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

@@ -1,9 +1,9 @@
-.xs { font-size: 0.6em !important; line-height: 1em; }
-.s { font-size: 0.8em !important; line-height: 1em; }
-.m { font-size: 1em !important; line-height: 1em; }
-.l { font-size: 1.3em !important; line-height: 1em; }
-.xl { font-size: 2em !important; line-height: 1em; }
-.xxl { font-size: 2.5em !important; line-height: 1em; }
+.xs { font-size: 0.6em !important; line-height: 1.5em; }
+.s { font-size: 0.8em !important; line-height: 1.5em; }
+.m { font-size: 1em !important; line-height: 1.5em; }
+.l { font-size: 1.25em !important; line-height: 1.5em; }
+.xl { font-size: 2em !important; line-height: 1.5em; }
+.xxl { font-size: 2.5em !important; line-height: 1.5em; }
 
 /*----------------------------------
 - FONCTIONS

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

@@ -133,7 +133,7 @@ export default ({
         }, []);
 
     let render = isToast ? (
-        <div class="card row bg dark glass" onClick={() => isToast && !prison && close(true)}>
+        <div class="card row bg dark" onClick={() => isToast && !prison && close(true)}>
 
             {icon}
 

package/src/client/components/button.tsx

@@ -151,7 +151,7 @@ export default ({
         className += ' pressed';
 
     if (active || isActive === true)
-        className += ' selected';
+        className += ' active';
 
     // Icon
     if (prefix === undefined && icon !== undefined)

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

@@ -4,7 +4,7 @@
 
 // Npm
 import React from 'react';
-import { JSX, ComponentChild, VNode } from 'preact';
+import { JSX, ComponentChild } from 'preact';
 import type { StateUpdater } from 'preact/hooks';
 
 // Libs
@@ -20,7 +20,7 @@ export type Props = JSX.HTMLAttributes<HTMLDivElement> & {
     id?: string,
 
     // Display
-    content?: ComponentChild,
+    content?: JSX.Element,
     state?: [boolean, StateUpdater<boolean>],
     width?: number | string,
     disable?: boolean

package/src/client/components/index.ts

@@ -12,14 +12,12 @@ export { default as Row } from './Row';
 export { default as Logo } from './logo';
 export { default as Video } from './Video';
 
-// Input
-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';
+// Input (OLD, TO ADAPT)
+//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';
 export { default as Time } from './data/Time';
 export { default as SpinText } from './data/spintext';
 export { default as Progressbar } from './data/progressbar';
@@ -29,13 +27,4 @@ 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';
-//export { default as Periode } from './input/Periode';
-
-// TODO: adapt
-//export { default as Couleur } from './input/Couleur';
-//export { default as Code } from './input/Code';
-//export { default as Rte } from './input/Rte';
+export { default as DateRangeInput } from './inputv3/date';

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

@@ -44,7 +44,7 @@ export type Props = {
 ----------------------------------*/
 export default ({ 
     // Decoration
-    icon, prefix, suffix, iconR, required, size,
+    icon, prefix, suffix, iconR, required, size, className = '',
     // State
     inputRef, errors,
     // Behavior
@@ -103,7 +103,7 @@ export default ({
     - ATTRIBUTES
     ----------------------------------*/
 
-    let className: string = 'input text';
+    className += ' input text';
 
     // Auto prefix
     if (prefix === undefined && icon !== undefined)
@@ -147,9 +147,6 @@ export default ({
     if (errors?.length)
         className += ' error';
 
-    if (props.className !== undefined)
-        className += ' ' + props.className;
-
     /*----------------------------------
     - VALIDATION
     ----------------------------------*/

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

@@ -51,8 +51,7 @@ export default ({ page }: { page: Page }) => {
                 ...apiData,
                 ...context.request.data
             }}
-            context={context}
         />
         
-    ) : 'Renderer missing'
+    ) : <>Renderer missing</>
 }

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

@@ -36,11 +36,11 @@ const PageLoading = ({ clientRouter }: { clientRouter?: ClientRouter }) => {
     if (clientRouter)
         clientRouter.setLoading = setLoading;
 
-    return isLoading ? (
-        <div id="loading">
+    return (
+        <div id="loading" class={isLoading ? 'display' : ''}>
             <i src="spin" />
         </div>
-    ) : null
+    )
 
 }
 
@@ -85,7 +85,7 @@ 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 && request.hash !== currentRequest.hash) {
+        if (request.path === currentRequest.path && request.hash !== currentRequest.hash && request.hash !== undefined) {
             scrollToElement(request.hash);
             return;
         }
@@ -183,10 +183,6 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
     ----------------------------------*/
     // Render the page component
     return <>
-        {/*pages.previous && (
-            <Page page={pages.previous} key={pages.previous.id === undefined ? undefined : 'page_' + pages.previous.id} />
-        )*/}
-
         {pages.current && (
             <PageComponent page={pages.current} 
                 /* Create a new instance of the Page component every time the page change 

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

@@ -2,9 +2,6 @@
 - DEPENDANCES
 ----------------------------------*/
 
-// Npm
-import axios, { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
-
 // Core
 import type { TApiResponseData } from '@server/services/router';
 import ApiClientService, { 
@@ -190,83 +187,65 @@ export default class ApiClient implements ApiClientService {
         return { ...alreadyLoadedData, ...fetchedData }
     }
 
-    public configure = (...[method, path, data, options]: TFetcherArgs): AxiosRequestConfig => {
-
+    public configure = (...[method, path, data, options]: TFetcherArgs) => {
         const { onProgress, captcha } = options || {};
-
-        const url = this.router.url( path, {}, false );
     
-        debug && console.log(`[api] Sending request`, method, url, data);
+        const url = this.router.url(path, {}, false);
     
-        // Create AXIOS config
-        const config: AxiosRequestConfig = {
+        debug && console.log(`[api] Sending request`, method, url, data);
     
-            url,
+        // Create Fetch config
+        const config = {
             method: method,
             headers: {
                 'Content-Type': "application/json",
                 'Accept': "application/json",
-            },
-    
-            validateStatus: function (status: number) {
-                return status === 200;
-            },
-    
-            onUploadProgress: onProgress === undefined ? undefined : (e) => {
-                const percentCompleted = Math.round((e.loaded * 100) / e.total);
-                onProgress(percentCompleted);
             }
-    
         };
     
         // Format request data
         if (data) {
-            // URL params
             if (method === "GET") {
-                config.params = data;
-            // Post form data
+                const params = new URLSearchParams(data).toString();
+                config.url = `${url}?${params}`;
             } else if (options?.encoding === 'multipart') {
                 config.headers["Content-Type"] = 'multipart/form-data';
-                config.data = toMultipart(data);
-            // Post JSON
+                const formData = new FormData();
+                Object.keys(data).forEach(key => formData.append(key, data[key]));
+                config.body = formData;
             } else {
-                config.data = data;
+                config.body = JSON.stringify(data);
             }
         }
     
-        return config;
+        return { url, config };
     }
     
     public execute<TData = unknown>(...args: TFetcherArgs): Promise<TData> {
+        const { url, config } = this.configure(...args);
     
-        const config = this.configure(...args);
-        
-        return axios.request(config)
-            .then((res: AxiosResponse<TApiResponseData>) => {
-    
-                debug && console.log(`[api] Success:`, res);
-                return res.data as TData;
-    
-            })
-            .catch((e: AxiosError) => {
-
-                if (e.response !== undefined) {
-    
-                    // Transmiss error
-                    console.warn(`[api] Failure:`, e);
-                    const error = viaHttpCode(
-                        e.response.status || 500,
-                        e.response.data
-                    );
-
+        return fetch(url, config)
+            .then(async (response) => {
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    console.warn(`[api] Failure:`, response.status, errorData);
+                    const error = viaHttpCode(response.status || 500, errorData);
                     throw error;
-    
-                // Erreur réseau: l'utilisateur n'ets probablement plus connecté à internet
+                }
+                debug && console.log(`[api] Success:`, response);
+                return response.json() as Promise<TData>;
+            })
+            .catch((error) => {
+                if (error instanceof TypeError) {
+                    // Network error
+                    console.warn(`[api] Network Failure:`, error);
+                    const networkError = new NetworkError(error.message);
+                    this.app.handleError(networkError);
+                    throw networkError;
                 } else {
-                    const error = new NetworkError(e.message);
-                    this.app.handleError(error);
                     throw error;
                 }
             });
     }
+    
 }

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

@@ -95,6 +95,8 @@ export default class ClientPageResponse<
             ...this.request.router.config.context( basicContext, this.request.router )
         }
 
+        newContext.context = newContext;
+
         // Update context object if already exists
         // NOTE: we don't create a nex instance of context because we don't want to rereder the full page (inc layout) to update the context given by thr react context provider
         const existingContext = this.request.router.context;

package/src/common/data/dates.ts

@@ -1,9 +1,53 @@
-import TimeAgo from 'javascript-time-ago';
-import en from 'javascript-time-ago/locale/en'
-TimeAgo.addLocale(en)
-const timeAgo = new TimeAgo('en-US')
-
 import dayjs from 'dayjs';
+/*
+// Function to calculate the difference in the specified unit
+function dateDiffInUnits(date1, date2) {
+  const msPerSecond = 1000;
+  const msPerMinute = msPerSecond * 60;
+  const msPerHour = msPerMinute * 60;
+  const msPerDay = msPerHour * 24;
+  const msPerMonth = msPerDay * 30; // Approximation
+  const msPerYear = msPerDay * 365; // Approximation
+
+  const diffInMs = date2 - date1;
+  
+  return {
+    years: diffInMs / msPerYear,
+    months: diffInMs / msPerMonth,
+    days: diffInMs / msPerDay,
+    hours: diffInMs / msPerHour,
+    minutes: diffInMs / msPerMinute,
+    seconds: diffInMs / msPerSecond,
+  };
+}
+
+// Function to determine the best unit based on the differences
+function chooseBestUnit(diffs) {
+  if (Math.abs(diffs.years) >= 1) return 'year';
+  if (Math.abs(diffs.months) >= 1) return 'month';
+  if (Math.abs(diffs.days) >= 1) return 'day';
+  if (Math.abs(diffs.hours) >= 1) return 'hour';
+  if (Math.abs(diffs.minutes) >= 1) return 'minute';
+  return 'second';
+}
+
+// Function to format the relative time between two dates
+function formatRelativeTime(date1, date2, locale = 'en') {
+  const diffs = dateDiffInUnits(date1, date2);
+  const bestUnit = chooseBestUnit(diffs);
+  const diff = diffs[bestUnit];
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+  return rtf.format(Math.round(diff), bestUnit);
+}
+
+// Example dates
+const date1 = new Date('2023-07-01');
+const date2 = new Date('2024-07-13');
+
+// Format the relative time automatically choosing the best unit
+console.log(formatRelativeTime(date1, date2)); // Output: "in 1 year"
+
+*/
 
 export type TDateInfo = {
     isPast: boolean,
@@ -30,7 +74,7 @@ export const timeSince = (date: Date | number | string): TDateInfo | null => {
     const isPast = now > timestamp;
 
     return {
-        text: timeAgo.format(date),
+        text: date,//timeAgo.format(date),
         isPast,
         delta: deltaSeconds
     };