5htp-core 0.1.2 → 0.2.1

package/changelog.md

@@ -0,0 +1,5 @@
+# 01/01/2023:
+
+* Redesigned systems service. Pass app instance servces list through constructor attribute instead of importing instance
+* Update babel-plugn-glob-import
+* 

package/doc/TODO.md

@@ -0,0 +1,71 @@
+* Fix erreurs type Client / Server context
+    * Server side: ServerContext
+    * Client side: ClientContext | ServerContext
+    * PageResponse extends Response
+* Toast service
+* ClientApplication hooks
+    app.on('bug')
+    app.on('error')
+
+
+# Dependancies injection
+
+# Full stack Pages
+
+```typescript
+import Router from '@server/services/router';
+import { TRouterContext as ServerServices } from '@server/services/router/response';
+import { TRouterContext as ClientServices } from '@client/services/router/response';
+
+abstract class Controller< 
+    TRouter extends Router, 
+    TData extends any = any,
+    TUserAccess extends string = string
+> {
+
+    abstract auth: TUserAccess;
+
+    abstract get( services: ServerServices<TRouter> ): Promise<TData>;
+
+    abstract render( context: TData, services: ClientServices<TRouter> ): ComponentChild;
+
+}
+```
+
+```typescript
+//? /headhunter/missions/suggested'
+class Missions extends Controller<CrossPath["router"]> {
+
+    auth = 'USER';
+
+    async get({ headhunting, response, auth  }) {
+
+        const user = await auth.check('USER');
+
+        const suggested =  await headhunting.missions.Suggest( user );
+    
+        return { suggested }
+    }
+
+    render({ page, api, suggested }) {
+        return (
+            <Page title="App title here" subtitle="SEO description here">{page.loading || <>
+    
+                <section class="col">
+    
+                    <header class="row">
+                        <h2 class="col-1">Suggested Missions</h2>
+                    </header>
+    
+                    <div class="grid xa3">
+                        {suggested.map( mission => (
+                            <MissionCard mission={mission} />
+                        ))}
+                    </div>
+                </section>
+    
+            </>}</Page>
+        )
+    }
+}
+```

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
-	"description": "5-HTP, scientifically called 5-Hydroxytryptophan, is the precursor of happiness neurotransmitter.",
-	"version": "0.1.2",
+	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
+	"version": "0.2.1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,11 +13,11 @@
 		"framework"
 	],
 	"dependencies": {
-		"@sendgrid/mail": "^7.4.6",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
 		"array-move": "^3.0.1",
+		"axios": "^1.2.1",
 		"bowser": "^2.11.0",
 		"chart.js": "^3.6.2",
 		"cli-highlight": "^2.1.11",
@@ -83,6 +83,7 @@
 		"@types/nodemailer": "^6.4.4",
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
-		"@types/ws": "^7.4.7"
+		"@types/ws": "^7.4.7",
+		"babel-plugin-glob-import": "^0.0.3"
 	}
 }

package/src/client/{App.tsx → app/component.tsx}

@@ -6,33 +6,37 @@
 import React from 'react';
 
 // Core
-import { ReactClientContext, ClientContext } from '@client/context';
-import DialogManager from '@client/components/Dialog/Manager'
 import type { Layout } from '@common/router';
+import { ReactClientContext } from '@/client/context';
+import DialogManager from '@client/components/Dialog/Manager'
 
 // Core components
-import Router from '@client/router/component';
-
-// Resources
-import "@client/assets/css/core.less";
+import Router from '@client/services/router/components/router';
+import type { TClientOrServerContext } from '@common/router';
 
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-export default function App ({ context }: { context: ClientContext }) {
+export default function App ({ context }: { 
+    context: TClientOrServerContext,
+}) {
 
-    const route = context.page?.route;
+    const route = context.route;
     const curLayout = route.options.layout;
     const [layout, setLayout] = React.useState<Layout | false | undefined>(curLayout);
-    context.setLayout = setLayout;
+
+    // TODO: context.page is always provided in the context on the client side
+    if (context.app.side === "client")
+        context.app.setLayout = setLayout;
 
     return (
         <ReactClientContext.Provider value={context}>
 
-            <DialogManager />
+            <DialogManager context={context} />
             
             {!layout ? <>
-                <Router />
+                {/* TODO: move to app, because here, we're not aware that the router service has been defined */}
+                <Router service={context.router} />
             </> : <>
                 <layout.Component context={context} />
             </>}

package/src/client/app/index.ts

@@ -0,0 +1,128 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+if (typeof window === 'undefined')
+    throw new Error(`This file shouldn't be loaded on server side !!!!`);
+
+window.dev && require('preact/debug');
+
+// Core
+import { Erreur } from '@common/errors';
+import type { Layout } from '@common/router';
+import { createDialog } from '@client/components/Dialog/Manager';
+
+// Local
+import type { AnyService } from './service';
+
+export { default as Service } from './service';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+declare global {
+    interface Window {
+        dev: boolean,
+        // Defined by loading gtag.js
+        gtag: (action: string, name: string, params?: any) => void,
+        /*context: ClientContext,
+        user: User,*/
+    }
+}
+
+export type TBugReportInfos = {
+    stacktrace?: string,
+    observation?: string,
+    before?: string,
+}
+
+/*----------------------------------
+- CLASS
+----------------------------------*/
+export default abstract class Application {
+
+    public side = 'client' as 'client';
+
+    private servicesList: AnyService[] = []
+
+    // TODO: merge modal and toast in the same instance
+    public modal = createDialog(this, false);
+    public toast = createDialog(this, true);
+
+    public constructor() {
+
+    }
+
+    public registerService( service: AnyService ) {
+        console.log(`[app] Register service`, service.constructor?.name);
+        this.servicesList.push(service);
+    }
+
+    public start() {
+        this.bindErrorHandlers();
+        this.startServices();
+        this.boot();
+    }
+
+    public abstract boot(): void;
+
+    public startServices() {
+
+        console.log(`[app] Starting ${this.servicesList.length} services.`);
+
+        for (const service of this.servicesList) {
+            console.log(`[app] Start service`, service);
+            service.start();
+        }
+
+        console.log(`[app] All ${this.servicesList.length} services were started.`);
+    }
+
+    public bindErrorHandlers() {
+
+        // Impossible de recup le stacktrace ...
+        /*window.addEventListener("unhandledrejection", (e) => {
+            clientBug(JSON.stringify(e))
+            console.log("unhandledrejection", e.stack);
+            
+        });*/
+        
+        window.onerror = (message, file, line, col, stacktrace) =>
+            this.reportBug({
+                stacktrace: stacktrace?.stack || JSON.stringify({ message, file, line, col })
+            }).then(() => {
+
+                // TODO in toas service: app.on('bug', () => toast.warning( ... ))
+                /*context?.toast.warning("Bug detected", 
+                    "A bug report has been sent, because I've detected a bug on the interface. I'm really sorry for the interruption.",
+                    null,
+                { autohide: false });*/
+
+            })
+    }
+
+    public handleError( error: Erreur | 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 reportBug = (infos: TBugReportInfos) => fetch('/help/bug/gui', {
+        method: 'POST',
+        headers: {
+            'Accept': "application/json",
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            url: window.location.pathname,
+            ssrData: JSON.stringify(window["ssr"]),
+            guiVersion: BUILD_DATE,
+            ...infos
+        })
+    })
+
+    public setLayout(layout: Layout) {
+        throw new Error(`page.setLayout has been called before the function is assigned from the <App /> component.`);
+    };
+}   

package/src/client/app/service.ts

@@ -0,0 +1,34 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+import type Application from ".";
+
+/*----------------------------------
+- TYPES: OPTIONS
+----------------------------------*/
+
+export type AnyService = Service<{}, Application>
+
+/*----------------------------------
+- CLASS
+----------------------------------*/
+export default abstract class Service<
+    TConfig extends {}, 
+    TApplication extends Application
+> {
+    public constructor( 
+        public app: TApplication, 
+        public config: TConfig,
+    ) {
+
+        // No client service should be loaded from server side
+        if (typeof window === 'undefined')
+            throw new Error(`Client services shouldn't be loaded on server side.`);
+
+        // Make the app aware of his services
+        app.registerService(this);
+    }
+
+    public abstract start(): void;
+}

package/src/client/app.tsconfig.json

@@ -11,10 +11,6 @@
             // Only used for typings (ex: ServerResponse)
             // Removed before webpack compilation
             "@server/*": ["../node_modules/5htp-core/src/server/*"],
-            "@validator": ["../node_modules/5htp-core/src/client/data/input"],
-            "@router": ["../node_modules/5htp-core/src/client/router"],
-            "@errors": ["../node_modules/5htp-core/src/common/errors"],
-            "@models": ["../.cache/client/models"],
             "@/*": ["./*"],
 
             // ATTENTION: Les références à preact doivent toujours pointer vers la même instance

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

@@ -0,0 +1,52 @@
+// Text
+@import './text/text.less';
+@import './text/icons.less';
+@import './text/icons.less';
+@import './text/titres.less';
+
+// Components
+@import './components/input.less';
+@import './components/button.less';
+@import './components/lists.less';
+@import './components/card.less';
+@import './components/logo.less';
+@import './components/table.less';
+@import './components/other.less';
+@import '@client/components/chart/chart.less';
+@import '@client/components/data/progressbar/index.less';
+
+// Les classes utilitaires override les classes de composant
+@import './utils/borders.less';
+@import './utils/layouts.less';
+
+.white-card() {
+    background: white;
+    box-shadow: 0 3px 2px fade(#000, 10%);
+    border: solid 1px fade(#000, 10%);
+    border-radius: @radius;
+}
+
+.card,
+.input.text,
+.btn,
+.table,
+i.solid {
+
+    .build-theme-bg( #fff, #8E8E8E);
+
+    &:not(.bg) {
+        .white-card();
+    }
+
+    .bg & {
+        box-shadow: none;
+        border: none;
+    }
+}
+
+//.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

@@ -1,35 +1,14 @@
+// Utils
+@import './utils/medias.less';
+@import './utils/sizing.less';
+@import './utils/spacing.less';
+@import (reference) "./theme.less";
+
+// Fonts
 @import '../fonts/Inter/index.less';
 @import '../fonts/Rubik/index.less';
 @import '../fonts/Lato/index.less';
 
-@import './text/text.less';
-@import './text/icons.less';
-@import './text/icons.less';
-@import './text/titres.less';
-
-@import './components/components.less';
-@import './components/input.less';
-@import './components/button.less';
-@import './components/lists.less';
-@import './components/card.less';
-@import './components/logo.less';
-@import './components/table.less';
-@import './components/other.less';
-
-// Les classes utilitaires override les classes de composant
-@import './borders.less';
-@import './spacing.less';
-@import './layouts.less';
-
-@import './medias.less';
-@import './sizing.less';
-
-@import '@client/components/chart/chart.less';
-@import '@client/components/data/progressbar/index.less';
-
-@import (reference) "./theme.less";
-@import "~@/client/assets/theme.less";
-
 // Apply the theme class
 .bg {
     background: var(--cBg);

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

@@ -17,7 +17,7 @@
     // Background
     // TODO: Nettoyer
     @bg2: darken(@bg, 8%);
-    @bgDark: darken(@bg, 5%);
+    @bgDark: darken(@bg, 7%);
     @bgDarkPlus: darken(@bg, 10%);
     --cBg: @bg; 
     --cBg2: @bg2;

package/src/client/assets/css/{medias.less → utils/medias.less}

@@ -1,4 +1,3 @@
-@import (reference) "~@/client/assets/theme.less";
 
 img.img,
 .bg.img {
@@ -8,6 +7,20 @@ img.img,
 .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 {

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

@@ -7,8 +7,8 @@ import React from 'react';
 import type { ComponentChild } from 'preact';
 
 // Core components
-import Button from '@client/components/button';
-import { Link } from '@client/router';
+import { Logo } from '@client/components';
+import { Link } from '@client/services/router';
 
 // Resources
 import './index.less';
@@ -28,8 +28,9 @@ export type Props = {
     link?: string,
     cover?: {
         color?: string,
+        image?: string,
         title?: string,
-        logo?: string
+        logo?: ComponentChild
     },
     metas: TMeta[],
     class?: string,
@@ -49,10 +50,15 @@ export default ({ title, link, cover, metas, class: className = '' }: Props) =>
     
             {cover && (
                 <header class="bg img row al-left cover pdb-1" style={{
-                    backgroundColor: cover.color
+                    backgroundColor: cover.color,
+                    backgroundImage: cover.image
+                        ? 'url(' + cover.image + ')'
+                        : undefined
                 }}>
         
-                    {cover?.logo}
+                    {typeof cover.logo === 'string' 
+                        ? <Logo src={cover.logo} size="xl" /> 
+                        : cover.logo}
         
                     {cover.title && (
                         <strong>
@@ -72,9 +78,9 @@ export default ({ title, link, cover, metas, class: className = '' }: Props) =>
             )}
     
             {metas && (
-                <ul class="row fill">
+                <ul class="row fill al-top">
                     {metas.map(({ label, value, class: className }) => (
-                        <li class={"col al-left sp-05"}>
+                        <li class={"col al-left txt-left sp-05"}>
                             {label}
                             <strong class={className}>{value}</strong>
                         </li>

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

@@ -7,11 +7,10 @@ import React from 'react';
 import { ComponentChild } from 'preact';
 
 // Libs
-import useContext, { ClientContext } from '@client/context';
-import { ClientResponse } from '@client/router';
-import { initStateAsync, execFetchersState } from '@client/hooks/useState/fetchers';
+import useContext from '@/client/context';
 
 // Métier
+import type Application from '../../app';
 import Card, { Props as CardInfos } from './card';
 import Button from '../button';
 
@@ -43,11 +42,34 @@ export type TDialogControls = {
     then: (cb: TOnCloseCallback<any>) => any
 }
 
+type DialogActions = {
+
+    setToasts: ( 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
+        Content: ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast,
+        paramsInit?: TParams
+    ) => TDialogControls,
+
+    confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No') => TDialogControls,
+
+    loading: (title: string) => TDialogControls,
+
+    info: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+
+    success: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+
+    warning: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+
+    error: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+}
+
 /*----------------------------------
 - SERVICE CONTEXTE
 ----------------------------------*/
 let idA: number = 0;
-export const createDialog = (ctx: ClientContext, isToast: boolean) => {
+export const createDialog = (app: Application, isToast: boolean): DialogActions => {
 
     const show = <TReturnType extends any = true>(
         // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
@@ -60,7 +82,7 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
 
         const close = (retour: TReturnType) => {
 
-            ctx.bridges.setToasts(q => q.filter(m => m.id !== id))
+            instance.setToasts(q => q.filter(m => m.id !== id))
 
             if (onClose !== undefined)
                 onClose(retour);
@@ -105,7 +127,7 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
             // Chargeur de données
             /*if (('data' in ComposantCharge) && typeof ComposantCharge.data === 'function') {
      
-                propsRendu.data = await ComposantCharge.data(ctx, paramsInit);
+                propsRendu.data = await ComposantCharge.data(app, paramsInit);
      
                 const { fetchersStateA } = initStateAsync(propsRendu.data, {}, false);
      
@@ -125,7 +147,7 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
 
             render["id"] = id;
 
-            ctx.bridges.setToasts(q => [...q, render]);
+            instance.setToasts(q => [...q, render]);
         });
 
         return {
@@ -134,13 +156,16 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
         }
     };
 
-    return {
+    const instance: DialogActions = {
+
         show: show,
 
+        setToasts: undefined as unknown as DialogActions["setToasts"],
+
         confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No' = 'No') => show<boolean>(({ close }) => (
-            <div class="col">
+            <div class="card col">
                 <header>
-                    <h1>{title}</h1>
+                    <h2>{title}</h2>
                 </header>
                 {typeof content === 'string' ? <p>{content}</p> : content}
                 <footer class="row fill">
@@ -156,7 +181,7 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
             </div>
         )),
 
-        loading: (title: string) => ctx.loadIndicator = show({
+        loading: (title: string) => app.loading  = show({
             title: title,
             type: 'loading'
         }),
@@ -193,6 +218,8 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
             ...options
         }),
     }
+
+    return instance;
 }
 
 /*----------------------------------
@@ -201,12 +228,12 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
 import './index.less';
 export default () => {
 
-    const ctx = useContext();
+    const app = useContext();
 
     const [rendered, setRendered] = React.useState<ComponentChild[]>([]);
 
-    ctx.bridges.setToasts = setRendered;
-    //ctx.register({}, { setToasts: setRendered });
+    if (app.side === 'client')
+        app.modal.setToasts = app.toast.setToasts = setRendered;
 
     React.useEffect(() => {
 

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

@@ -1,5 +1,3 @@
-@import (reference) "~@/client/assets/theme.less";
-
 @toast-zindex: 999;
 
 #dialog {
@@ -89,10 +87,10 @@
         border-radius: @radius;
 
         // Desktop = vertically center the modal
-        /*@media (min-width: @responsive1) {
+        @media (min-width: 900px) {
             justify-content: center;
             padding: @spacing;
-        }*/
+        }
 
         // Pour les animations (ex: conffetis
         > canvas {