5htp-core 0.2.4 → 0.2.5-1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.2.4",
+	"version": "0.2.5-1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -92,5 +92,8 @@
 		"@types/ws": "^7.4.7",
 		"@types/yargs-parser": "^21.0.0",
 		"babel-plugin-glob-import": "^0.0.6-2"
-	}
+	},
+    "peerDependencies": {
+        "5htp": "0.2.3"
+    }
 }

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

@@ -54,32 +54,6 @@ p, .p {
   	text-overflow: ellipsis;
 }
 
-/*----------------------------------
-- COULEURS
-----------------------------------*/
-.txtSuccess {
-    color: var(--cSuccess) !important;
-}
-.txtError {
-    color: var(--cError) !important;
-}
-.txt-gold {
-    /*color: #cef57a;
-    text-shadow: 0 0 0.80rem fade(#cef57a, 80%);*/
-    color: #c80;
-}
-.txtWarn {
-    color: var(--orange) !important;
-}
-
-.txt-blanc { color: #fff !important; }
-
-.txtPrimary, .txtC1 {
-    color: var(--cAccent);
-}
-
-.txtC2 { color: var(--cAccent2); }
-
 /*----------------------------------
 - TAILLE
 ----------------------------------*/

package/src/client/components/Amount.tsx

@@ -24,7 +24,7 @@ export default ({ amount, unit, sign, decimals, ...props }: {
     sign?: '+' | '-'
 } & JSX.HTMLAttributes<HTMLDivElement>) => {
 
-    const className = 'number row sp-05 ' + (props.class ? props.class + ' ' : '');//sign === undefined ? 'txtPrimary' : (sign === '+' ? 'txtSuccess' : 'txtError');
+    const className = 'number row sp-05 ' + (props.class ? props.class + ' ' : '');//sign === undefined ? 'txtPrimary' : (sign === '+' ? 'fg success' : 'fg error');
     if (unit === 'credits')
         return <strong {...props} class={className}>{sign} {Format.credits(amount, decimals)} Credits</strong>;
     else if (unit === 'dollars')

package/src/client/pages/_layout/index.less

@@ -0,0 +1,6 @@
+#internalLayout {
+    min-height: 80vh;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}

package/src/client/pages/_layout/index.tsx

@@ -0,0 +1,43 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+// Core
+import Router from '@client/services/router/components/router';
+import { ClientContext } from '@/client/context';
+
+// Core components
+
+// Resources
+import "./index.less";
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default function App ({ context, menu }: { 
+    context: ClientContext,
+    menu: ComponentChild
+}) {
+
+    const { router, page, toast } = context;
+
+    return (
+        <div id="internaLlayout">
+
+            <div class="center row al-fill">
+
+                <Router service={router} />
+                
+            </div>
+        </div>
+    )
+}

package/src/client/pages/_messages/400.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
 import useHeader from '@client/pages/useHeader';
@@ -15,10 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error(400, {}, ({ message, modal }) => {
-
-    if (!message)
-        message = "The request you made is incorrect.";
+router.error( 400, ({ message, modal }) => {
 
     useHeader({
         title: 'Bad request',
@@ -26,13 +23,15 @@ router.error(400, {}, ({ message, modal }) => {
     });
 
     return (
-        <div class="col pd-2">
-            <i src="times-circle" class="txtPrimary xxl" />
+        <div class="card w-3-4 col al-center pd-2">
+
+            <i src="times-circle" class="fg error xxl" />
 
-            <h1>Bad request</h1>
+            <h1>Bad Request</h1>
 
             <p>{message}</p>
+
+            <Button type="primary" link="/">Go Home</Button>
         </div>
     )
-
 });

package/src/client/pages/_messages/401.tsx

@@ -7,9 +7,10 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
+import useHeader from '@client/pages/useHeader';
 
 /*----------------------------------
 - RESSOURCES
@@ -18,10 +19,15 @@ import Button from '@client/components/button';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error(401, {  }, ({ api, toast, modal, request, page }) => {
+router.error( 401, ({ message, request, page }) => {
 
     request.response?.redirect('/');
 
+    useHeader({
+        title: 'Authentication Required',
+        subtitle: message
+    });
+
     React.useEffect(() => {
 
         page?.go('/');
@@ -29,5 +35,16 @@ router.error(401, {  }, ({ api, toast, modal, request, page }) => {
 
     }, []);
 
-    return '';
+    return (
+        <div class="card w-3-4 col al-center pd-2">
+
+            <i src="times-circle" class="fg error xxl" />
+
+            <h1>Authentication Required</h1>
+
+            <p>{message}</p>
+
+            <Button type="primary" link="/">Go Home</Button>
+        </div>
+    )
 });

package/src/client/pages/_messages/403.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
 import useHeader from '@client/pages/useHeader';
@@ -15,10 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error( 403, {}, ({ message, modal }) => {
-
-    if (!message)
-        message = "You do not have sufficient permissions to access this content.";
+router.error( 403, ({ message, modal }) => {
 
     useHeader({
         title: 'Access Denied.',
@@ -27,11 +24,14 @@ router.error( 403, {}, ({ message, modal }) => {
 
     return (
         <div class="col pd-2">
-            <i src="times-circle" class="txtPrimary xxl" />
+
+            <i src="times-circle" class="fg error xxl" />
 
             <h1>Access Denied.</h1>
 
             <p>{message}</p>
+
+            <Button type="primary" link="/">Go Home</Button>
         </div>
     )
 });

package/src/client/pages/_messages/404.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
 import useHeader from '@client/pages/useHeader';
@@ -15,10 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error( 404, {}, ({ message, modal }) => {
-
-    if (!message)
-        message = "The content you asked for was not found.";
+router.error( 404, ({ message, modal }) => {
 
     useHeader({
         title: 'Page Not Found',
@@ -26,12 +23,15 @@ router.error( 404, {}, ({ message, modal }) => {
     });
 
     return (
-        <div class="col pd-2">
-            <i src="times-circle" class="txtPrimary xxl" />
+        <div class="card w-3-4 col al-center pd-2">
+
+            <i src="times-circle" class="fg error xxl" />
 
             <h1>Page Not Found</h1>
 
             <p>{message}</p>
+
+            <Button type="primary" link="/">Go Home</Button>
         </div>
     )
 });

package/src/client/pages/_messages/500.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 // Core
 import { router } from '@app';
-import Button from '@client/components/button';
+import { Button } from '@client/components';
 
 // App
 import useHeader from '@client/pages/useHeader';
@@ -15,10 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-router.error( 500, {}, ({ message }) => {
-
-    if (!message)
-        message = "A technical error occurred.";
+router.error( 500, ({ message }) => {
 
     useHeader({
         title: 'Technical Error',
@@ -27,11 +24,14 @@ router.error( 500, {}, ({ message }) => {
 
     return (
         <div class="col pd-2">
-            <i src="times-circle" class="txtPrimary xxl" />
+
+            <i src="times-circle" class="fg error xxl" />
 
             <h1>Technical Error</h1>
 
             <p>{message}</p>
+
+            <Button type="primary" link="/">Go Home</Button>
         </div>
     )
 });

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

@@ -17,6 +17,7 @@ import type { TBasicSSrData } from '@server/services/router/response';
 import BaseRouter, {
     defaultOptions, TRoute, TErrorRoute, TClientOrServerContext, TRouteModule
 } from '@common/router'
+import { getLayout } from '@common/router/layouts';
 import { getRegisterPageArgs, buildRegex } from '@common/router/register';
 import { TFetcherList } from '@common/router/request/api';
 import type { TFrontRenderer, TDataProvider } from '@common/router/response/page';
@@ -243,9 +244,12 @@ export default class ClientRouter<
 
     public error(code: number, options: TRoute["options"], renderer: TFrontRenderer<{}, { message: string }>) {
 
+        // Automatic layout form the nearest _layout folder
+        const layout = getLayout('Error ' + code, options);
+
         const route: TErrorRoute = {
             code,
-            controller: (context: TClientOrServerContext) => new ClientPage(null, renderer, context),
+            controller: (context: TClientOrServerContext) => new ClientPage(null, renderer, context, layout),
             options
         };
 

package/src/common/errors/index.ts

@@ -112,7 +112,7 @@ export class AuthRequired extends CoreError {
 export class Forbidden extends CoreError {
     public http = 403;
     public title = "Access Denied";
-    public static msgDefaut = "You're not allowed to access to this resource.";
+    public static msgDefaut = "You do not have sufficient permissions to access this content.";
 }
 
 export class NotFound extends CoreError {

package/src/common/router/layouts.ts

@@ -8,6 +8,7 @@ import type { ComponentChild } from 'preact';
 import type { ClientContext } from '@/client/context';
 import type { TRouteOptions } from '.';
 // App
+import internalLayout from '@client/pages/_layout';
 import layouts from '@/client/pages/**/_layout/index.tsx';
 
 /*----------------------------------
@@ -43,8 +44,6 @@ export const getLayout = (routePath: string, routeOptions?: TRouteOptions): Layo
     const chunkId = routeOptions["id"];
     if (chunkId === undefined)
         throw new Error(`ID has not injected for the following page route: ${routePath}`);
-
-    let layout: Layout | undefined;
     
     // Layout via name
     if (routeOptions.layout !== undefined) {
@@ -53,30 +52,30 @@ export const getLayout = (routePath: string, routeOptions?: TRouteOptions): Layo
         if (LayoutComponent === undefined)
             throw new Error(`No layout found with ID: ${routeOptions.layout}. registered layouts: ${Object.keys(layouts)}`);
 
-        layout = { 
+        return { 
             path: routeOptions.layout, 
             Component: layouts[routeOptions.layout] 
         }
-
-    } else {
+    } 
             
-        // Automatic layout via the nearest _layout folder
-        for (const layoutPath in layouts)
-            if (
-                // The layout is nammed index when it's at the root (@/client/pages/_layout)
-                layoutPath === 'index' 
-                // Exact match
-                || chunkId === layoutPath 
-                // Parent
-                || chunkId.startsWith( layoutPath + '_' )
-            )
-                layout = { 
-                    path: layoutPath, 
-                    Component: layouts[layoutPath] 
-                };
-    }
-    
-    //console.log(`[router][layouts] Get layout for "${routePath}". Found:`, layout);
+    // Automatic layout via the nearest _layout folder
+    for (const layoutPath in layouts)
+        if (
+            // The layout is nammed index when it's at the root (@/client/pages/_layout)
+            layoutPath === 'index' 
+            // Exact match
+            || chunkId === layoutPath 
+            // Parent
+            || chunkId.startsWith( layoutPath + '_' )
+        )
+            return { 
+                path: layoutPath, 
+                Component: layouts[layoutPath] 
+            };
 
-    return layout;
+    // Internal layout
+    return {
+        path: '/',
+        Component: internalLayout
+    }
 }

package/src/common/validation/index.ts

@@ -1,3 +1,4 @@
-export { default as Schema, TSchemaFields } from './schema';
+export { default as Schema } from './schema';
+export type { TSchemaFields } from './schema';
 export { default as Validators } from './validators';
 export { default as Validator } from './validator';

package/src/server/app/index.ts

@@ -65,11 +65,13 @@ export default abstract class Application extends Service<Config, Hooks, /* TODO
 
     public path = {
         root: process.cwd(),
+        public: process.cwd() + '/public',
+
+        // TODO: move to disk
         typings: process.cwd() + '/var/typings',
         cache: process.cwd() + '/var/cache',
         data: process.cwd() + '/var/data',
         log: process.cwd() + '/var/log',
-        public: process.cwd() + '/public',
     }
 
     public pkg = fs.readJSONSync(this.path.root + '/package.json');
@@ -136,10 +138,15 @@ export default abstract class Application extends Service<Config, Hooks, /* TODO
     
     public async start() {
 
-        console.info(`[boot] Waiting for all services to be ready ...`);
+        console.log(`5HTP Core`, process.env.npm_package_version);
+
+        console.info(`[boot] Connect disk`);
+        await this.initDisk();
+
+        console.info(`[boot] Start services`);
         await this.startServices()
 
-        console.info(`[boot] Launching application ...`);
+        console.info(`[boot] App ready`);
         await this.runHook('ready');
 
         console.info(`[boot] Run application-specific boot instructions ...`);
@@ -150,6 +157,15 @@ export default abstract class Application extends Service<Config, Hooks, /* TODO
 
     }
 
+    private async initDisk() {
+        console.info(`[boot] Ensure runtime dirs ...`);
+        await Promise.all([
+            fs.ensureDir( this.path.cache ),
+            fs.ensureDir( this.path.log ),
+            fs.ensureDir( this.path.data ),
+        ]);
+    }
+
     public registerService( service: AnyService ) {
         console.log(`[app] Register service`, service.constructor?.name);
         this.servicesList.push(service);

package/src/server/app/service.ts

@@ -92,6 +92,8 @@ export default abstract class Service<
             callbacks.map(
                 cb => cb(...args).catch(e => {
                     console.error(`[hook] Error while executing hook ${name}:`, e);
+                    if (name !== 'error')
+                        this.runHook('error', e);
                 })
             ) 
         ).then(() => {