5htp-core 0.2.1 → 0.2.2-1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.2.1",
+	"version": "0.2.2-1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -35,6 +35,7 @@
 		"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",
@@ -52,10 +53,12 @@
 		"locale": "^0.1.0",
 		"markdown-it": "^13.0.1",
 		"md5": "^2.3.0",
+		"mime-types": "^2.1.35",
 		"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",
@@ -73,17 +76,21 @@
 		"uuid-by-string": "^3.0.4",
 		"validator": "^13.7.0",
 		"ws": "^8.2.2",
-		"yaml": "^1.10.2"
+		"yaml": "^1.10.2",
+		"yargs-parser": "^21.1.1"
 	},
 	"devDependencies": {
 		"@types/cookie": "^0.4.1",
 		"@types/express": "^4.17.13",
 		"@types/fs-extra": "^9.0.12",
+		"@types/markdown-it": "^12.2.3",
+		"@types/mime-types": "^2.1.1",
 		"@types/node": "^16.9.1",
 		"@types/nodemailer": "^6.4.4",
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7",
-		"babel-plugin-glob-import": "^0.0.3"
+		"@types/yargs-parser": "^21.0.0",
+		"babel-plugin-glob-import": "^0.0.6-2"
 	}
 }

package/src/client/app/index.ts

@@ -8,7 +8,7 @@ if (typeof window === 'undefined')
 window.dev && require('preact/debug');
 
 // Core
-import { Erreur } from '@common/errors';
+import { CoreError } from '@common/errors';
 import type { Layout } from '@common/router';
 import { createDialog } from '@client/components/Dialog/Manager';
 
@@ -102,7 +102,7 @@ export default abstract class Application {
             })
     }
 
-    public handleError( error: Erreur | Error, httpCode?: number ) {
+    public handleError( error: CoreError | Error, httpCode?: number ) {
     
         /*console.error(`[api] Network error:`, e);
         context.toast.error("Please check your internet connection and try again.", undefined, null, { autohide: false });*/

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

@@ -3,9 +3,6 @@
 ----------------------------------*/
 @import (reference) "../theme.less";
 
-@cardPadding: @spacing * 1.5;
-@cardPaddingLong: @spacing * 2;
-
 /*----------------------------------
 - COMPONENTS
 ----------------------------------*/

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

@@ -20,13 +20,11 @@
 
     line-height: 1.5;
     font-weight: 600;
+    text-align: left;
     
-    padding: 0px @spacing;
+    padding: 0.4em @spacing;
 
     background: var(--cBgAccent);
-
-    height: 2em;
-    line-height: 2em;
 }
 
 .bg-cover {

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

@@ -17,11 +17,10 @@ table {
     td, th {
 
         padding: 1em 1em;
-        text-align: center;
+        text-align: left;
 
         &:first-child {
             padding-left: 2em;
-            text-align: left;
         }
 
         &:last-child:not(:first-child) {

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

@@ -4,7 +4,10 @@
 @import './text/icons.less';
 @import './text/titres.less';
 
+// TODO: move all less files to component folder
+
 // Components
+@import '@client/components/Video/index.less';
 @import './components/input.less';
 @import './components/button.less';
 @import './components/lists.less';
@@ -18,6 +21,7 @@
 // Les classes utilitaires override les classes de composant
 @import './utils/borders.less';
 @import './utils/layouts.less';
+@import './utils/medias.less';
 
 .white-card() {
     background: white;

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

@@ -1,5 +1,4 @@
 // Utils
-@import './utils/medias.less';
 @import './utils/sizing.less';
 @import './utils/spacing.less';
 @import (reference) "./theme.less";

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

@@ -41,9 +41,9 @@
     // Childrens
     & when (@apply = true) {
         background: var(--cBg);
-        .input {
+        /*.input.text {
             border: if(@bg = #ffffff, solid 2px var(--cLine), none);
-        }
+        }*/
     }
 
     .overlay {

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

@@ -41,6 +41,27 @@ img {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+
+    &.colorize {
+        position: relative;
+
+        &::after {
+            content: ' ';
+            display: block;
+            background-color: inherit;
+            opacity: 0.5;
+            border-radius: inherit;
+
+            position: absolute;
+            top: 0; right: 0; bottom: 0; left: 0;
+            z-index: 1;
+        }
+
+        > * {
+            z-index: 2;
+            position: relative;
+        }
+    }
 }
 
 img.img {

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

@@ -24,7 +24,7 @@ type TMeta = {
 }
 
 export type Props = {
-    title: string,
+    title: ComponentChild,
     link?: string,
     cover?: {
         color?: string,
@@ -32,14 +32,15 @@ export type Props = {
         title?: string,
         logo?: ComponentChild
     },
-    metas: TMeta[],
+    metas?: TMeta[],
     class?: string,
+    footer?: ComponentChild
 }
 
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default ({ title, link, cover, metas, class: className = '' }: Props) => {
+export default ({ title, link, cover, metas, class: className = '', footer }: Props) => {
 
     if (link)
         className += ' clickable';
@@ -49,8 +50,8 @@ export default ({ title, link, cover, metas, class: className = '' }: Props) =>
         <article class={"card col " + className}>
     
             {cover && (
-                <header class="bg img row al-left cover pdb-1" style={{
-                    backgroundColor: cover.color,
+                <header class="bg img colorize row al-left cover pdb-1" style={{
+                    backgroundColor: '#' + cover.color,
                     backgroundImage: cover.image
                         ? 'url(' + cover.image + ')'
                         : undefined
@@ -87,6 +88,8 @@ export default ({ title, link, cover, metas, class: className = '' }: Props) =>
                     ))}
                 </ul>
             )}
+
+            {footer}
     
         </article>
     )

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

@@ -13,7 +13,7 @@
 
     &,
     > .modal {
-        position: absolute;
+        position: fixed;
         top: 0px; 
         left: 0px; 
         right: 0px; 
@@ -82,8 +82,8 @@
         gap: @spacing;
         z-index: @modal-zindex;
 
-        background: fade(#000, 30%);
-        backdrop-filter: blur(50px) saturate(2);
+        background: fade(#fff, 20%);
+        backdrop-filter: blur(30px) saturate(2);
         border-radius: @radius;
 
         // Desktop = vertically center the modal

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

@@ -9,8 +9,10 @@
         overflow: hidden;
         position: relative;
         left: 0;
+        z-index: 0;
 
         > .row {
+            transition: left .2s ease-out;
             justify-content: flex-start;
             padding: 0 @spacing;
         }

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

@@ -17,18 +17,24 @@ import './index.less';
 ----------------------------------*/
 
 export type Props = {
-    children: ComponentChild
+    children: ComponentChild,
+    elevator?: React.HTMLAttributes<HTMLDivElement>
 }
 
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default ({ children }: Props) => {
+export default ({  children, elevator = {} }: Props) => {
 
     const containerRef = React.useRef<HTMLDivElement>();
-    const [leftPos, setLeftPos] = React.useState<number>(0);
+    const [containerHeight, setContainerHeight] = React.useState<number>(undefined);
+    const [scroll, setScroll] = React.useState({
+        pos: 0,
+        left: false,
+        right: true
+    });
 
-    const moveTo = (sens: number) => {
+    const moveTo = (direction: number) => {
 
         const container = containerRef.current;
         if (container === null)
@@ -41,25 +47,53 @@ export default ({ children }: Props) => {
         const containerWidth = container.getBoundingClientRect().width;
         const rowWidth = row.getBoundingClientRect().width;
 
-        console.log({ containerWidth, rowWidth });
+        setScroll( curPos => {
+
+            const newPos = {
+                pos: curPos.pos + (-1 * direction * containerWidth),
+                left: true,
+                right: true
+            };
+
+            // Scroll Left limit
+            const leftPosLim = 0 - rowWidth + containerWidth;
+            if (newPos.pos < leftPosLim) {
+                newPos.pos = leftPosLim;
+                newPos.right = false;
+            }
+
+            // Scroll Left limit
+            if (newPos.pos > 0) {
+                newPos.pos = 0;
+                newPos.left = false;
+            }
+
+            return newPos;
+        });
 
     }
 
     React.useEffect(() => {
 
         // If row oveflow, show horizontal arroxs
-        console.log({ containerRef });
-
+        setContainerHeight( containerRef.current.getBoundingClientRect().height );
 
     }, []);
 
     return (
-        <div class="scrollable-row stopLeft">
+        <div class={"scrollable-row" + (scroll.left ? '' : ' stopLeft') + (scroll.right ? '' : ' stopRight')}>
 
             <Button class="left" shape="pill" icon="arrow-left" onClick={() => moveTo(-1)} />
 
-            <div class="container" ref={containerRef}>
-                <div class="row" style={{ left: leftPos + 'px' }}>
+            <div class="container" ref={containerRef} style={{
+                height: containerHeight ? containerHeight + 'px' : undefined
+            }}>
+                <div {...elevator} class={"row " + (elevator.class || '')} style={{ 
+                    left: scroll.pos + 'px', 
+                    position: containerHeight === undefined 
+                        ? 'relative' 
+                        : 'absolute' 
+                }}>
                     {children}
                 </div>
             </div>

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

@@ -0,0 +1,39 @@
+.video {
+    .build-theme-bg(#000, #fff);
+
+    position: relative;
+    text-shadow: 0 0 10px fade(#000, 20%);
+    border-radius: @radius;
+
+    --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.preview,
+    > .actions {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+    }
+
+    > img.preview {
+        object-fit: cover;
+    }
+
+    > .actions {
+
+    }
+}

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

@@ -0,0 +1,69 @@
+/*----------------------------------
+- DEPS
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import { ComponentChild } from 'preact';
+
+// Core
+import Button from '../button';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type Config = {
+    src: string,
+    previewImg: string,
+    color?: string
+}
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+export default ({ src, previewImg, color = '000000' }: Config) => {
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    const [state, setState] = React.useState<'inactive'|'loading'|'paused'|'playing'>('inactive');
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+
+    const play = () => {
+        setState('loading');
+    }
+
+    const VideoPlayer = 'video';
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return (
+        <section class={"video h-4 " + state}>
+
+            {(state === 'inactive' || state === 'loading') ? (
+                <img class="preview" src={previewImg} />
+            ) : (
+                <VideoPlayer src={src} />
+            )}
+
+            <div class="actions col al-center" style={{
+                backgroundColor: '#' + color + 'aa'
+            }}>
+                {(state === 'inactive' || state === 'paused') ? (
+                    <Button icon="play" shape="pill" onClick={play} />
+                ) : state === 'loading' ? (
+                    <i src="spin" />
+                ) : state === 'playing' ? (
+                    <Button icon="pause" shape="pill" onClick={play} />
+                ) : null}
+            </div>
+
+        </section>
+    )
+}

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

@@ -154,12 +154,12 @@ export default (props: Props) => {
                                 ? bouton([menu.data], [menu.index])
                                 : bouton(menu.data, menu.index)
                             ) : {})}
-                            icone={icone}
+                            icon={icone}
                             onClick={onClick && (() => multi 
                                 ? onClick([menu.data], [menu.index])
                                 : onClick(menu.data, menu.index)
                             )}
-                            lien={lien && lien(menu.data, menu.index)}
+                            link={lien && lien(menu.data, menu.index)}
                             forme="lien"
                         >
                             {label}

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

@@ -22,7 +22,7 @@ import { timeSince } from '@common/data/dates';
 - COMPOSANT
 ----------------------------------*/
 export default ({ since }: {
-    since: Date
+    since: Parameters<typeof timeSince>[0]
 }) => {
 
     const [text, setDisplay] = React.useState(timeSince(since));

package/src/client/components/data/progressbar/circular/index.tsx

@@ -19,7 +19,7 @@ import {
 - TYPES
 ----------------------------------*/
 
-import { TTailleComposant } from '@client/components/_base/types';
+//import { TTailleComposant } from '@client/components/_base/types';
 
 type TEtape = {
     val: number,

package/src/client/components/index.ts

@@ -1,18 +1,34 @@
+
+export { Link } from '../services/router/components/Link';
 export { default as Button } from './button';
-export { default as Row } from './row';
-export { default as Card } from './card';
+
+// Containers
+export { default as Card } from './Card';
+export { default as Popover } from './containers/Popover';
 export { default as Table } from './Table';
-export { default as Select } from './Select';
-export { default as Amount } from './Amount';
-export { default as Logo } from './Logo';
+export { default as Row } from './Row';
+
+// Media
+export { default as Logo } from './logo';
+export { default as Video } from './Video';
 
-export { default as Input } from './input';
-export { default as Textarea } from './input/Textarea';
+// Input
 export { default as Number } from './input/Number';
 export { default as Slider } from './input/Slider';
-export { default as Upload } from './input/Upload';
 export { default as Radio } from './input/Radio';
 
+// 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';
+export { default as CircularProgressbar } from './data/progressbar/circular';
+
+// Input V3
+export { default as Select } from './Select';
+export { default as String } from './inputv3/string';
+export { default as File } from './inputv3/file';
+
 // TOD: fix popover component
 //export { default as Date } from './input/Date';
 //export { default as Periode } from './input/Periode';

package/src/client/components/input/BaseV2/index.tsx

@@ -70,4 +70,3 @@ export function useInput<TValue>(
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-import './index.less';

package/src/client/components/{input/BaseV2/index.less → inputv3/base.less}

@@ -58,7 +58,7 @@
         label {
             height: 100%;
             font-size: 1em;
-            color: var(--cTxtImportant);
+            //color: var(--cTxtImportant);
         }
     }
 

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

@@ -0,0 +1,73 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import { ComponentChild } from 'preact';
+
+// Core libs
+import { useState } from '@client/hooks';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type InputBaseProps<TValue> = {
+    value: TValue,
+    title: string, // Now mandatory
+    onChange?: (newValue: TValue) => void,
+}
+
+export type TInputState<TValue> = {
+    value: TValue,
+    fieldProps: {[key: string]: any},
+    valueSource: 'internal'|'external',
+    focus: boolean,
+}
+
+/*----------------------------------
+- HOOKS
+----------------------------------*/
+export function useInput<TValue>(
+    { value: externalValue, onChange }: InputBaseProps<TValue>, 
+    defaultValue: TValue,
+): [
+    state: TInputState<TValue>,
+    setValue: (value: TValue) => void,
+    commitValue: () => void,
+    setState: (state: Partial<TInputState<TValue>>) => void,
+] {
+
+    const [state, setState] = useState<TInputState<TValue>>({
+        value: externalValue !== undefined ? externalValue : defaultValue,
+        valueSource: 'external',
+        fieldProps: {},
+        focus: false
+    });
+
+    const setValue = (value: TValue) => setState({ value, valueSource: 'internal' });
+
+    const commitValue = () => {
+        console.log(`[input] Commit value:`, state.value);
+        if (onChange !== undefined)
+            onChange(state.value);
+    }
+
+    // External value change
+    React.useEffect(() => {
+
+        if (externalValue !== undefined && externalValue !== state.value) {
+            console.log("External value change", externalValue);
+            setState({ value: externalValue, valueSource: 'external' })
+        }
+        
+    }, [externalValue]);
+
+    return [state, setValue, commitValue, setState]
+}
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+import './base.less';

package/src/client/components/inputv3/file/FileToUpload.ts

@@ -0,0 +1,34 @@
+// Normalize file between browser and nodejs side
+export default class FileToUpload {
+
+    public name: string;
+    public size: number;
+    public type: string;
+
+    public data: File;
+
+    // Retrieved on backend only
+    public md5?: string;
+    public ext?: string;
+
+    public constructor(opts: {
+        name: string,
+        size: number,
+        type: string,
+
+        data: File,
+        
+        md5?: string,
+        ext?: string,
+    }) {
+
+        this.name = opts.name;
+        this.size = opts.size;
+        this.type = opts.type;
+
+        this.data = opts.data;
+
+        this.md5 = opts.md5;
+        this.ext = opts.ext;
+    }
+}