5htp-core 0.5.1 → 0.5.9-2

package/client/app/component.tsx

@@ -0,0 +1,96 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
+
+// Core
+import type { Layout } from '@common/router';
+import { ReactClientContext } from '@/client/context';
+import DialogManager from '@client/components/Dialog/Manager'
+
+// Core components
+import RouterComponent from '@client/services/router/components/router';
+import type { TClientOrServerContextForPage } from '@common/router';
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default function App({ context }: {
+    context: TClientOrServerContextForPage,
+}) {
+
+    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")
+        context.app.setLayout = setLayout;
+
+    return (
+        <ReactClientContext.Provider value={context}>
+
+            <MantineProvider theme={{
+                cursorType: 'pointer',
+                
+                // TODO: fill with var.less variables
+                defaultRadius: 'md',
+                radius: { md: '0.75rem', /* @radius */ },
+                primaryColor: 'primary',
+
+                colors: {
+                    primary: [
+                        '#6C5DD3',
+                        '#6C5DD3',
+                        '#6C5DD3',
+                        '#6C5DD3',
+                        '#6C5DD3',
+                        '#6C5DD3',
+                        '#6C5DD3',
+                        '#6C5DD3',
+                        '#6C5DD3',
+                        '#6C5DD3',
+                    ],
+                },
+                components: {
+                    // Set the default size to "md" for each component:
+                    Button: { defaultProps: { size: 'md' } },
+                    TextInput: { defaultProps: { size: 'md' } },
+                    PasswordInput: { defaultProps: { size: 'md' } },
+                    NumberInput: { defaultProps: { size: 'md' } },
+                    Select: { defaultProps: { size: 'md' } },
+                    MultiSelect: { defaultProps: { size: 'md' } },
+                    Checkbox: { defaultProps: { size: 'md' } },
+                    Radio: { defaultProps: { size: 'md' } },
+                    Switch: { defaultProps: { size: 'md' } },
+                    SegmentedControl: { defaultProps: { size: 'md' } },
+                    Menu: { defaultProps: { size: 'md' } },
+                    MenuItem: { defaultProps: { size: 'md' } },
+                    // Add any others you use...
+                },
+            }} withGlobalStyles withNormalizeCSS>
+
+                <DialogManager context={context} />
+
+                {!layout ? <>
+                    {/* TODO: move to app, because here, we're not aware that the router service has been defined */}
+                    <RouterComponent service={context.Router} />
+                </> : <> {/* Same as router/components/Page.tsx */}
+                    <layout.Component
+                        // Services
+                        {...context}
+                        // API data & URL params
+                        data={{
+                            ...apiData,
+                            ...context.request.data
+                        }}
+                    />
+                </>}
+            </MantineProvider>
+
+        </ReactClientContext.Provider>
+    )
+}

package/client/app/index.ts

@@ -0,0 +1,145 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+if (typeof window === 'undefined')
+    throw new Error(`This file shouldn't be loaded on server side !!!!`);
+
+window.dev && require('preact/debug');
+
+// Core
+import { CoreError, InputErrorSchema } 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';
+
+// Resources
+import '@client/assets/css/core.less';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+declare global {
+    interface Window {
+        dev: boolean,
+        /*context: ClientContext,
+        user: User,*/
+        /*context: ClientContext,
+        user: User,*/
+    }
+}
+
+export type TBugReportInfos = {
+    stacktrace?: string,
+    observation?: string,
+    before?: string,
+}
+
+export type TClientBugReportInfos = TBugReportInfos & {
+    context?: string,
+    guiVersion: string,
+    url: string,
+}
+
+// Without prettify, we don't get a clear list of the class properties
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+  } & {};
+
+export type ApplicationProperties = Prettify<keyof Application>;
+
+/*----------------------------------
+- 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) => {
+            const error = new Error(e.reason); // How to get stacktrace ?
+            this.handleError(error);
+        });
+        
+        window.onerror = (message, file, line, col, stacktrace) => {
+            console.error(`Exception catched by method B`, message);
+            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 abstract handleError( error: CoreError | Error );
+
+    // TODO: move on app side
+    public reportBug = (infos: TBugReportInfos) => fetch('/feedback/bug/ui', {
+        method: 'POST',
+        headers: {
+            'Accept': "application/json",
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            url: window.location.pathname,
+            context: 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/client/app.tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "extends": "../../node_modules/5htp-core/tsconfig.common.json",
+    "compilerOptions": {
+        "rootDir": "..",
+        "baseUrl": "..",
+        "paths": {
+            
+            "@client/*": ["../node_modules/5htp-core/client/*"],
+            "@common/*": ["../node_modules/5htp-core/common/*"],
+
+            // Only used for typings (ex: ServerResponse)
+            // Removed before webpack compilation
+            "@server/*": ["../node_modules/5htp-core/server/*"],
+            "@/*": ["./*"],
+
+            // ATTENTION: Les références à preact doivent toujours pointer vers la même instance
+            "react": ["preact/compat"],
+            "react-dom/test-utils": ["preact/test-utils"],
+            "react-dom": ["preact/compat"], // Must be below test-utils
+            "react/jsx-runtime": ["preact/jsx-runtime"],
+            "preact/jsx-runtime": ["preact/jsx-runtime"]
+        }
+    },
+    "include": [
+        ".",
+        "../../node_modules/5htp-core/types/global"
+    ]
+}

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

@@ -0,0 +1,414 @@
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+
+@sizeActiveIndicator: 0.3rem;
+
+/*----------------------------------
+- BUTTON
+----------------------------------*/
+.btn {
+
+    // Layout
+    position: relative;
+    gap: @spacing / 2;
+    min-width: @sizeComponent; // Wdth should be < height
+ 
+    // Dimensions
+    font-size: 1em;
+    padding: 0 1.5em;
+    height: @sizeComponent;
+
+    // Shape
+    border-radius: @radius;
+    border: none;
+
+    // Text
+    text-decoration: none;
+    font-weight: 500;
+
+    // Colors
+    // NOTE: transparent by default (menu items, etc..)
+    background: var(--cBg);
+        
+    // Hover
+    //transition: all .5s linear;
+    &:hover,
+    li:hover > & {
+
+        color: var(--cTxtImportant);
+        background: var(--cBgActive);
+        //transition: all .1s linear;
+        
+        > i {
+            color: var(--cTxtAccent)
+        }
+    }
+
+    &.active {
+        &::after {
+            content: ' ';
+            display: block;
+            position: absolute;
+
+            background: @c1;
+            height: @sizeActiveIndicator;
+            width: @sizeActiveIndicator;
+            border-radius: 50%;
+
+            // Default: bottom
+            left: 50%;
+            margin-left: -@sizeActiveIndicator / 2;
+            bottom: -@sizeActiveIndicator / 2;
+        }
+
+        .col > &::after,
+        .col > li > &::after {
+
+            // Reset potition
+            left: auto;
+            margin-left: auto;
+            bottom: auto;
+
+            // Position right
+            top: 50%;
+            margin-top: -@sizeActiveIndicator / 2;
+            right: -@sizeActiveIndicator / 2;
+        }
+    }
+
+    &.selected {
+        background: var(--cBgSelected);
+        color: #fff;
+    }
+
+    // Click
+    &.pressed {
+        background: var(--cBgPressed) !important;
+    }
+
+    &,
+    > .label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /*----------------------------------
+    - CONTENT
+    ----------------------------------*/
+
+    > .label {
+        text-align: left;
+        gap: @spacing / 2;
+        font-size: 1rem;
+        line-height: 1.5em;
+        z-index: 1; // Make the label on top of ::before for example
+
+        // Handle overflow
+        //white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        li > & {
+            flex: 1;
+        }
+    }
+
+    > i {
+        font-size: 1.2em;
+        color: inherit;
+    }
+
+    > img {
+
+        max-width: 100%;
+        max-height: 100%;
+
+    }
+
+    /*----------------------------------
+    - THEME
+    ----------------------------------*/
+
+    &.bg {
+        
+        &:not(:disabled) {
+            &:hover,
+            li:hover > & {
+                background: var(--cBgActive);
+            }
+        }
+
+        &:disabled {
+            opacity: 0.5;
+        }
+
+        strong {
+            color: var(--cTxtImportant);
+        }
+
+        > i {
+            color: inherit;
+        }
+
+    }
+
+    &:not(.bg) {
+
+        color: var(--cTxtAccent);
+    }
+
+    /*----------------------------------
+    - STATE
+    ----------------------------------*/
+
+    cursor: pointer;
+
+    &:not(.primary).active {
+
+        &.col {
+            box-shadow: 0 0 0 0.2em @c2;
+        }
+    }
+
+    &[disabled] {
+        cursor: default;
+        opacity: 0.5;
+    }
+
+    /*----------------------------------
+    - DISPLAY MODES
+    ----------------------------------*/
+
+    &.col {
+        height: auto;
+        padding: @spacing * 1.25 @spacing;
+        align-items: center;
+
+        > .label {
+            flex-direction: column;
+
+            white-space: normal;
+            text-align: center;
+        }
+    }
+
+    &.icon {
+
+        // La taille doit être autmatquement proportionnelle grace au padding
+        // WARN: Pourquoi au fait ?
+        padding: 0!important;
+        min-width: @sizeComponent;
+
+        &.round {
+            border-radius: 50%;
+        }
+    }
+
+    &.pill {
+        border-radius: @sizeComponent / 2;
+    }
+
+    &.link {
+        height: auto;
+        width: auto;
+        padding: 0;
+
+        &, 
+        &:hover {
+            background: none;
+            box-shadow: none;
+        }
+    }
+
+    &.h-a {
+        padding: 2em;
+
+        > .label {
+            white-space: normal;
+        }
+    }
+}
+
+/*----------------------------------
+- BUTTON IN LISTS
+----------------------------------*/
+
+.menu > .btn, 
+.menu > li > .btn {
+
+    // Give less imortance to buttons which are in lists
+    color: var(--cTxtBase);  
+    padding: 0 1em; // Row display = more condensed
+
+    &.active,
+    &:hover {
+        background: var(--cBgActive);
+        color: var(--cTxtImportant);
+    }
+
+    &.icon {
+
+        color: var(--cTxtDesc);
+
+        > .label {
+
+            visibility: hidden;
+            position: absolute;
+            
+            background: #111;
+            
+            height: @sizeComponent;
+            line-height: @sizeComponent;
+            padding: 0 @spacing * 2;
+            border-radius: @radius;
+            
+            color: #fff;
+            white-space: nowrap; // Autrement, si plusieurs mots, affiché sur plusieurs ligne
+        }
+
+        &:not([disabled]):hover > .label {
+            visibility: visible;
+        }
+    }
+}
+
+.col {
+    &.menu > .btn, 
+    &.menu > li > .btn {
+
+        > .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;
+        }
+    }
+}
+
+ul.col,
+ul.row {
+
+    .btn.icon > .label,
+    > li > .btn + .menu {
+        position: absolute;
+    }
+
+
+    > li {
+
+        position: relative;
+
+        // Submenu
+        &:not(.contPopover):not(:hover) > .btn + .submenu,
+        > .btn[disabled] + .submenu {
+            visibility: hidden;
+        }
+    }
+
+    &.menu > li {
+        &:hover > .btn:not([disabled]):hover > .label {
+            visibility: visible;
+        }
+    }
+
+}
+
+ul.col {
+
+    &.menu > .btn, 
+    &.menu > li > .btn {
+        
+        // Align items ver sla gauche
+        justify-content: flex-start;
+        
+        // Align all icons by giveing them the same width
+        > i {
+            flex: 0 0 24px;
+        }
+
+        &.icon {
+            width: @sizeComponent;
+            padding: 0;
+            justify-content: center;
+
+            > .label {
+                .row > li > & {
+                    bottom: 100%;
+                    left: 50%;
+                    margin-bottom: @spacing / 2;
+                    transform: translateX(-50%);
+                }
+            }
+    
+            &:not([disabled]):hover > .label {
+                visibility: visible;
+            }
+        }
+    }
+
+    &.menu > li > .btn {
+        width: 100%;
+    }
+
+    .btn.icon > .label,
+    > li > .btn + .submenu {
+        left: 100%;
+        margin-left: @spacing;
+    }
+
+    > li {
+
+        // Sous le label quand bouton = icone seulement
+        > .btn + .menu {
+
+            top: @sizeComponent;
+            margin-top: @spacing / 2;
+
+            // C'est quoi ?
+            /*&::before {
+                content: ' ';
+                display: block;
+                position: absolute;
+
+                top: -@sizeComponent;
+                left: calc(0em - @spacing);
+                right: calc(0em - @spacing);
+
+                height: 100%;
+            }*/
+            
+        }
+    }
+
+
+    // Put the hover buggle at the left, instead of the right
+    &.bubble-left {
+
+        .btn.icon > .label,
+        > li > .btn + .submenu {
+            left: auto;
+            margin-left: 0;
+            right: 100%;
+            margin-right: @spacing;
+        }
+    }
+}
+
+// Submenu
+ul.row {
+
+    .btn.icon > .label,
+    > 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 + .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
+    }
+}