5htp-core 0.2.1 → 0.2.2-1

package/src/client/components/inputv3/file/index.less

@@ -0,0 +1,59 @@
+.input.upload {
+
+    position: relative;
+    overflow: hidden;
+
+    border-radius: @radius;
+    border: dashed 3px var(--cLine);
+    background: @cBgPage + #090909;
+
+    padding: @spacing;
+    width: 100%;
+    min-height: 200px;
+    height: 14.15rem;
+
+    .preview,
+    .indication,
+    input[type="file"] {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; 
+        height: 100%;
+    }
+
+    input[type="file"] {
+        cursor: pointer;
+        opacity: 0;
+        z-index: 2;
+    }
+
+    .indication {
+        transition: all .1s linear;
+        background: inherit;
+        opacity: 0;
+        z-index: 1;
+    }
+
+    .actions {
+        position: absolute;
+        right: @spacing;
+        bottom: @spacing;
+        z-index: 3;
+    }
+
+    // When no file selected, or when hover
+    .indication:first-child,
+    &:hover .indication {
+        opacity: 0.9;
+    }
+
+    // Image preview
+    > img {
+        border-radius: @radius;
+        max-width: 100%;
+        height: 100%;
+        
+        display: block;
+        margin: 0 auto;
+    }
+}

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

@@ -0,0 +1,157 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+// Npm
+import React from 'react';
+import { ComponentChild } from 'preact';
+
+// Composants généraux
+import Bouton from '@client/components/button';
+
+// Libs
+import useContext from '@/client/context';
+
+// specific
+import FileToUpload from './FileToUpload';
+
+// Ressources
+import './index.less';
+
+/*----------------------------------
+- OUTILS
+----------------------------------*/
+export { default as FileToUpload } from './FileToUpload';
+
+export const createImagePreview = (file: Blob) => new Promise((resolve, reject) => {
+
+    // Conversion de l'image en base24 pour l'afficher
+    const reader = new FileReader();
+    let imageBase64: string | null = null;
+    reader.addEventListener('load', () => {
+
+        var enc = new TextDecoder("utf-8");
+
+        // reader.result pout être une chaine ou un arraybuffer
+        imageBase64 = reader.result instanceof ArrayBuffer
+            ? enc.decode(reader.result) // ArrayBuffer => Chaine
+            : reader.result;
+
+        // Affichage
+        resolve(imageBase64);
+    });
+
+    reader.readAsDataURL(file);
+});
+
+// Instanciate FileToUpload from browser side File
+const normalizeFile = (file: File) => new FileToUpload({
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    data: file,
+    //original: file
+})
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type Props = {
+
+    // Input
+    title: ComponentChild,
+    value?: FileToUpload,    
+
+    // Display
+    emptyText?: ComponentChild,
+    className?: string,
+    previewUrl?: string,
+
+    // Actions
+    onChange: (file: FileToUpload | undefined) => void
+    remove?: () => Promise<void>,
+}
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default ({
+
+    // Input
+    title,
+    value: file, 
+    className, 
+
+    // Display
+    emptyText = 'Click here to select a File',
+    previewUrl: previewUrlInit,
+
+    // Actions
+    onChange
+}: Props) => {
+
+    /*----------------------------------
+    - INITIALIZE
+    ----------------------------------*/
+
+    const [previewUrl, setPreviewUrl] = React.useState<string | undefined>(previewUrlInit);
+
+    className = 'input upload ' + (className === undefined ? '' : ' ' + className)
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+
+    const selectFile = (fileSelectEvent: any) => {
+        const selectedfile = fileSelectEvent.target.files[0] as File;
+        if (selectedfile) {
+
+            const fileToUpload = normalizeFile(selectedfile);
+
+            onChange(fileToUpload);
+        }
+    }
+
+    React.useEffect(() => {
+
+        // Image = decode & display preview
+        if (file !== undefined && file.type.startsWith('image/'))
+            createImagePreview(file.data).then(setPreviewUrl);
+        else 
+            setPreviewUrl(undefined);
+
+    }, [file]);
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return <>
+        <label>{title}</label>
+
+        <div class={className}>
+
+            {file && <>
+                <div class="preview">
+
+                    {previewUrl ? (
+                        <img src={previewUrl} />
+                    ) : file ? <>
+                        <strong>{file.name}</strong>
+                    </> : null}
+                </div>
+
+                <div class="row actions sp-05">
+                    
+                    <Bouton class='fg error' icon="trash" shape="pill" size="s"  
+                        async onClick={() => onChange(undefined)} />
+                </div>
+            </>}
+
+            <div class="indication col al-center">
+                {emptyText}
+            </div>
+
+            <input type="file" onChange={selectFile} />
+        </div>
+    </>
+}

package/src/client/components/{input → inputv3/string}/index.tsx

@@ -8,41 +8,43 @@ import { ComponentChild, JSX } from 'preact';
 import TextareaAutosize from 'react-textarea-autosize';
 
 // Core libs
-import { useInput, InputBaseProps } from './BaseV2';
+import { useInput, InputBaseProps } from '../base';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 export type Props = {
 
-    type?: 'email' | 'password',
-    multiline?: boolean, // true = textarea
-    onPressEnter?: (value: string) => void,
-
     // Decoration
     icon?: string,
-    prefix?: ComponentChild,
-    suffix?: ComponentChild,
+    prefix?: React.VNode,
+    suffix?: React.VNode,
     iconR?: string,
 
+    // Behavior
+    type?: 'email' | 'password' | 'longtext',
+    choice?: string[] | ((input: string) => Promise<string[]>),
+    multiple?: boolean,
+
+    // Actions
+    onPressEnter?: (value: string) => void,
     inputRef?: React.Ref<HTMLInputElement>
-    
 }
 
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
 export default ({ 
+    // Behavoir
     type, 
     icon, prefix, suffix, iconR,
-    multiline, 
     onPressEnter,
     inputRef,
     ...props 
 }: Props & InputBaseProps<string> & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'onChange'>) => {
 
     /*----------------------------------
-    - STATE
+    - INIT
     ----------------------------------*/
 
     const [{ value, focus, fieldProps }, setValue, commitValue, setState] = useInput(props, '');
@@ -61,26 +63,37 @@ export default ({
     const refInput = inputRef || React.useRef<HTMLInputElement>();
     
     /*----------------------------------
-    - RENDER
+    - ATTRIBUTES
     ----------------------------------*/
 
+    let className: string = 'input text';
+
     // Auto prefix
-    if (prefix === undefined) {
-        if (icon !== undefined)
-            prefix = <i src={icon} />
-        else if (type === 'password')
-            prefix = <i src="key" />;
-        else if (type === 'email')
-            prefix = <i src="at" />;
-    }
+    if (prefix === undefined && icon !== undefined)
+        prefix = <i src={icon} />
+
+    // Type
+    let Tag = 'input';
+    if (type === 'password') {
+
+        prefix = prefix || <i src="key" />;
+        fieldProps.type = 'password';
+
+    } else if (type === 'email') {
+
+        prefix = prefix || <i src="at" />;
+        fieldProps.type = 'email';
+
+    } else if (type === 'longtext') {
+
+        prefix = prefix || <i src="text" />;
+        Tag = TextareaAutosize;
 
-    // Auto suffix
-    if (suffix === undefined) {
-        if (iconR !== undefined)
-            suffix = <i src={iconR} />
     }
 
-    let className: string = 'input text';
+    // Auto suffix
+    if (suffix === undefined && iconR !== undefined)
+        suffix = <i src={iconR} />
 
     // When no value, show the lable as a placeholder
     if (value === '')
@@ -91,8 +104,9 @@ export default ({
     if (props.className !== undefined)
         className += ' ' + props.className;
 
-    const Tag = multiline ? TextareaAutosize : 'input';
-
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
     return (
         <div class={className} onClick={() => refInput.current?.focus()}>
 
@@ -101,8 +115,8 @@ export default ({
             <div class="contValue">
 
                 <Tag {...fieldProps}
+                    // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
                     ref={refInput}
-                    type={type}
                     value={value}
 
                     onFocus={() => setState({ focus: true })}

package/src/client/pages/bug.tsx

@@ -5,8 +5,7 @@
 import React from 'react';
 
 // Core components
-import Button from '@client/components/button';
-import Textarea from '@client/components/input/Textarea';
+import { Button, String } from '@client/components';
 import Card, { Props as CardProps } from '@client/components/Dialog/card';
 
 // Core libs
@@ -50,11 +49,11 @@ export default ({ ...self }: {} & CardProps) => {
 
             <p>What's the problem ?</p>
 
-            <Textarea valeur={observation} onChange={setObservation} />
+            <String type="longtext" title="Description of the problem" value={observation} onChange={setObservation} />
 
             <p>What did you do just before the problem occurs ?</p>
 
-            <Textarea valeur={before} onChange={setBefore} />
+            <String type="longtext" title="How the problem occured ?" value={before} onChange={setBefore} />
 
         </Card>
     )

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

@@ -14,7 +14,6 @@ import type {
 } from '@server/services/router';
 import type { TBasicSSrData } from '@server/services/router/response';
 
-import { Erreur } from '@common/errors';
 import BaseRouter, {
     defaultOptions, TRoute, TErrorRoute, TClientOrServerContext, TRouteModule
 } from '@common/router'

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

@@ -8,11 +8,14 @@ import axios, { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
 // Core
 import type { TApiResponseData } from '@server/services/router';
 import ApiClientService, { 
+    TPostData,
     TApiFetchOptions, TFetcherList, TFetcherArgs, TFetcher 
 } from '@common/router/request/api';
 import { instancierViaCode, NetworkError } from '@common/errors';
 import type ClientApplication from '@client/app';
 
+import { toMultipart } from './multipart';
+
 // Specific
 import type { default as Router, Request } from '..';
 
@@ -34,7 +37,8 @@ export default class ApiClient implements ApiClientService {
     // APO Client needs to know the current request so we can monitor which api request is made from which page
     public constructor( 
         public app: ClientApplication, 
-        public request: Request<Router> 
+        public request: Request,
+        public router = request.router
     ) {
 
     }
@@ -42,16 +46,16 @@ export default class ApiClient implements ApiClientService {
     /*----------------------------------
     - HIGH LEVEL
     ----------------------------------*/
-    public get = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
+    public get = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) => 
         this.createFetcher<TData>('GET', path, data, opts);
 
-    public post = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
+    public post = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) => 
         this.createFetcher<TData>('POST', path, data, opts);
 
-    public put = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
+    public put = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) => 
         this.createFetcher<TData>('PUT', path, data, opts);
 
-    public delete = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
+    public delete = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) => 
         this.createFetcher<TData>('DELETE', path, data, opts);
 
     
@@ -108,9 +112,9 @@ export default class ApiClient implements ApiClientService {
             method, path, data, options,
             // For async calls: api.post(...).then((data) => ...)
             then: (callback: (data: any) => void) => this.fetchAsync<TData>(...args).then(callback),
-            catch: (callback: (data: any) => void) => this.fetchAsync(...args).catch(callback),
-            finally: (callback: () => void) => this.fetchAsync(...args).finally(callback),
-            run: () => this.fetchAsync(...args)
+            catch: (callback: (data: any) => void) => this.fetchAsync<TData>(...args).catch(callback),
+            finally: (callback: () => void) => this.fetchAsync<TData>(...args).finally(callback),
+            run: () => this.fetchAsync<TData>(...args)
         };
     }
 
@@ -183,12 +187,16 @@ export default class ApiClient implements ApiClientService {
         };
     
         if (data) {
-            if (method === "GET")
+            // URL params
+            if (method === "GET") {
                 config.params = data;
-            else {
+            // Post form data
+            } else if (options?.encoding === 'multipart') {
+                config.headers["Content-Type"] = 'multipart/form-data';
+                config.data = toMultipart(data);
+            // Post JSON
+            } else {
                 config.data = data;
-                if (data instanceof FormData)
-                    config.headers["Content-Type"] = 'multipart/form-data';
             }
         }
     

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

@@ -0,0 +1,27 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Core
+import { TPostData } from '@common/router/request/api';
+import { FileToUpload } from '@client/components/inputv3/file';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+/*----------------------------------
+- UTILS
+----------------------------------*/
+export const toMultipart = (postData: TPostData) => {
+
+    const formData = new FormData();
+    for (const key in postData) {
+        let data = postData[key];
+        if (typeof data === 'object' && (data instanceof FileToUpload))
+            data = data.data;
+        formData.append(key, data);
+    }
+
+    return formData;
+}

package/src/common/data/chaines/greetings.ts

@@ -24,4 +24,4 @@ const howareyou = () => {
     return howareyou_list[ index ];
 }
 
-export default (username: string) => hello() + ', ' + username + '. ' + howareyou();
+export default (username: string, withHowAreYou: boolean = true) => hello() + ', ' + username + '. ' + (withHowAreYou ? howareyou() : '');

package/src/common/data/dates.ts

@@ -5,7 +5,7 @@ const timeAgo = new TimeAgo('en-US')
 
 import dayjs from 'dayjs';
 
-export const timeSince = (date: Date | number | string, prefixe: boolean = false) => {
+export const timeSince = (date: Date | number | string) => {
 
     if (date === undefined)
         return 'Inconnu';

package/src/common/data/input/validate.ts

@@ -3,15 +3,6 @@
 /*----------------------------------
 - DEPENDANCES
 ----------------------------------*/
-
-// Npm
-import { ComponentChild } from 'preact'
-
-// Libs
-import { Erreur, TListeErreursSaisie, InputErrorSchema } from '@common/errors';
-
-import { EXCLURE_VALEUR } from './validators/build';
-
 /*----------------------------------
 - CONSTANTES
 ----------------------------------*/

package/src/common/data/markdown.ts

@@ -61,4 +61,4 @@ md.block.ruler.after('list', 'test', (state, startLine, endLine, silent) => {
 
 }, { alt: ['paragraph', 'reference', 'blockquote'] })
 
-export default (markdown: string) => md.render(markdown)
+export default md;

package/src/common/errors/index.ts

@@ -19,7 +19,7 @@ type TDetailsErreur = {
 /*----------------------------------
 - ERREURS
 ----------------------------------*/
-export abstract class Erreur extends Error {
+export abstract class CoreError extends Error {
     
     public static msgDefaut: string;
 
@@ -38,7 +38,7 @@ export abstract class Erreur extends Error {
 
         super(message);
 
-        this.message = message || (this.constructor as typeof Erreur).msgDefaut;
+        this.message = message || (this.constructor as typeof CoreError).msgDefaut;
 
         if (details !== undefined) {
             this.idRapport = details.idRapport;
@@ -66,13 +66,13 @@ export abstract class Erreur extends Error {
     }
 }
 
-export class InputError extends Erreur {
+export class InputError extends CoreError {
     public http = 400;
     public title = "Bad Request";
     public static msgDefaut = "Bad Request.";
 }
 
-export class InputErrorSchema extends Erreur {
+export class InputErrorSchema extends CoreError {
 
     public http = 400;
     public title = "Bad Request";
@@ -103,36 +103,40 @@ export class InputErrorSchema extends Erreur {
     }
 }
 
-export class AuthRequired extends Erreur {
+export class AuthRequired extends CoreError {
     public http = 401;
     public title = "Authentication Required";
     public static msgDefaut = "Please Login to Continue.";
 }
 
-export class Forbidden extends Erreur {
+export class Forbidden extends CoreError {
     public http = 403;
     public title = "Access Denied";
     public static msgDefaut = "You're not allowed to access to this resource.";
 }
 
-export class NotFound extends Erreur {
+export class NotFound extends CoreError {
     public http = 404;
     public title = "Not Found";
     public static msgDefaut = "The resource you asked for was not found.";
 }
 
-export class Anomaly extends Erreur {
+export class Anomaly extends CoreError {
 
     public http = 500;
     public title = "Technical Error";
     public static msgDefaut = "A technical error has occurred. A notification has just been sent to the admin.";
 
-    public constructor(message, public data: object) {
+    public constructor( 
+        message: string, 
+        public dataForDebugging?: object,
+        public originalError?: Error, 
+    ) {
         super(message);
     }
 }
 
-export class NotAvailable extends Erreur {
+export class NotAvailable extends CoreError {
 
     // TODO: page erreur pour code 503
     public http = 404;
@@ -149,7 +153,7 @@ export const instancierViaCode = (
     code: number, 
     message?: string | TListeErreursSaisie, 
     details?: TDetailsErreur
-): Erreur => {
+): CoreError => {
 
     if (typeof message === 'object')
         return new InputErrorSchema(message, details);
@@ -163,4 +167,4 @@ export const instancierViaCode = (
     }
 }
 
-export default Erreur;
+export default CoreError;

package/src/common/router/request/api.ts

@@ -4,12 +4,18 @@
 
 import type { HttpMethod } from '@server/services/router';
 
+import type { FileToUpload } from '@client/components/inputv3/file';
+
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
 export type TFetcherList = { [id: string]: TFetcher }
 
+export type TPostData = {[key: string]: PrimitiveValue}
+
+export type TPostDataWithFile = {[key: string]: PrimitiveValue | FileToUpload}
+
 export type TFetcher<TData extends unknown = unknown> = {
 
     // For async calls: api.post(...).then((data) => ...)
@@ -18,20 +24,22 @@ export type TFetcher<TData extends unknown = unknown> = {
     
     method: HttpMethod,
     path: string,
-    data?: object,
+    data?: TPostData,
     options?: TApiFetchOptions
 }
 
 export type TFetcherArgs = [
     method: HttpMethod,
     path: string,
-    data?: object,
+    data?: TPostData,
     options?: TApiFetchOptions
 ]
 
 export type TApiFetchOptions = {
     captcha?: string, // Action id (required by recaptcha)
-    onProgress?: (percent: number) => void
+    onProgress?: (percent: number) => void,
+    // Default: json
+    encoding?: 'json' | 'multipart'
 }
 
 // https://stackoverflow.com/questions/44851268/typescript-how-to-extract-the-generic-parameter-from-a-type