proteum 1.0.0-1

package/client/components/Dialog/status.less

@@ -0,0 +1,176 @@
+// https://github.com/Kamonlojn/svg-icons-animate
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.svg-box {
+    display:block;
+    position: relative;
+    width:14.15rem;
+    margin: 0 auto;
+
+    > svg {
+        stroke: #fff;
+    }
+}
+
+/*.green-stroke {
+    stroke:#7CB342;
+}
+
+.red-stroke {
+    stroke: #FF6245;
+}
+
+.yellow-stroke {
+    stroke: #FFC107;
+}*/
+
+
+.circular circle.path {
+    stroke-dasharray: 330;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    opacity: 0.4;
+    animation: 0.7s draw-circle ease-out;
+}
+
+/*------- Checkmark ---------*/
+.checkmark{
+	stroke-width: 6.25;
+    stroke-linecap: round;
+	position:absolute;
+    top: 56px;
+    left: 49px;
+    width: 52px;
+    height: 40px;
+}
+
+.checkmark path {
+    animation: 1s draw-check ease-out;
+}
+
+@keyframes draw-circle {
+    0% {
+        stroke-dasharray: 0,330;
+        stroke-dashoffset: 0;
+        opacity: 1;
+    }
+
+    80% {
+        stroke-dasharray: 330,330;
+        stroke-dashoffset: 0;
+        opacity: 1;
+    }
+
+    100%{
+        opacity: 0.4;
+    }
+}
+
+@keyframes draw-check {
+    0% {
+        stroke-dasharray: 49,80;
+        stroke-dashoffset: 48;
+        opacity: 0;
+    }
+
+    50% {
+        stroke-dasharray: 49,80;
+        stroke-dashoffset: 48;
+        opacity: 1;
+    }
+
+    100% {
+        stroke-dasharray: 130,80;
+        stroke-dashoffset: 48;
+    }
+}
+
+/*---------- Cross ----------*/
+
+.cross {
+    stroke-width:6.25;
+    stroke-linecap: round;
+    position: absolute;
+    top: 54px;
+    left: 54px;
+    width: 40px;
+    height: 40px;
+}
+
+.cross .first-line {
+    animation: 0.7s draw-first-line ease-out;
+}
+
+.cross .second-line {
+    animation: 0.7s draw-second-line ease-out;
+}
+
+@keyframes draw-first-line {
+    0% {
+        stroke-dasharray: 0,56;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 0,56;
+        stroke-dashoffset: 0;
+    }
+
+    100% {
+        stroke-dasharray: 56,330;
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes draw-second-line {
+    0% {
+        stroke-dasharray: 0,55;
+        stroke-dashoffset: 1;
+    }
+
+    50% {
+        stroke-dasharray: 0,55;
+        stroke-dashoffset: 1;
+    }
+
+    100% {
+        stroke-dasharray: 55,0;
+        stroke-dashoffset: 70;
+    }
+}
+
+.alert-sign {
+    stroke-width:6.25;
+    stroke-linecap: round;
+    position: absolute;
+    top: 40px;
+    left: 68px;
+    width: 1.25rem;
+    height: 70px;
+    animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.alert-sign .dot {
+    stroke:none;
+    fill: #FFC107;
+}
+
+@keyframes alert-sign-bounce {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+
+    50% {
+        transform: scale(0);
+        opacity: 1;
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}

package/client/components/Dialog/status.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+export const SuccessAnimation = (
+    <div class="svg-box">
+        <svg class="circular green-stroke">
+            <circle class="path" cx="75" cy="75" r="50" fill="none" stroke-width="5" stroke-miterlimit="10" />
+        </svg>
+        <svg class="checkmark green-stroke">
+            <g transform="matrix(0.79961,8.65821e-32,8.39584e-32,0.79961,-489.57,-205.679)">
+                <path class="checkmark__check" fill="none" d="M616.306,283.025L634.087,300.805L673.361,261.53" />
+            </g>
+        </svg>
+    </div>
+)
+
+export const WarningAnimation = (
+    <div class="svg-box">
+        <svg class="circular yellow-stroke">
+            <circle class="path" cx="75" cy="75" r="50" fill="none" stroke-width="5" stroke-miterlimit="10" />
+        </svg>
+        <svg class="alert-sign yellow-stroke">
+            <g transform="matrix(1,0,0,1,-615.516,-257.346)">
+                <g transform="matrix(0.56541,-0.56541,0.56541,0.56541,93.7153,495.69)">
+                    <path class="line" d="M634.087,300.805L673.361,261.53" fill="none" />
+                </g>
+                <g transform="matrix(2.27612,-2.46519e-32,0,2.27612,-792.339,-404.147)">
+                    <circle class="dot" cx="621.52" cy="316.126" r="1.318" />
+                </g>
+            </g>
+        </svg>
+    </div>
+)
+
+export const ErrorAnimation = (
+    <div class="svg-box">
+        <svg class="circular red-stroke">
+            <circle class="path" cx="75" cy="75" r="50" fill="none" stroke-width="5" stroke-miterlimit="10" />
+        </svg>
+        <svg class="cross red-stroke">
+            <g transform="matrix(0.79961,8.65821e-32,8.39584e-32,0.79961,-502.652,-204.518)">
+                <path class="first-line" d="M634.087,300.805L673.361,261.53" fill="none" />
+            </g>
+            <g transform="matrix(-1.28587e-16,-0.79961,0.79961,-1.28587e-16,-204.752,543.031)">
+                <path class="second-line" d="M634.087,300.805L673.361,261.53" />
+            </g>
+        </svg>
+    </div>
+)

package/client/components/index.ts

@@ -0,0 +1,2 @@
+export { Link } from '../services/router/components/Link';
+export { default as Button } from './Button';

package/client/components/types.d.ts

@@ -0,0 +1,3 @@
+
+
+declare type TComponentSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'

package/client/data/input.ts

@@ -0,0 +1,32 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Libs métier
+import buildValidators, { champ } from '@common/data/input/validators/build';
+import { validateurFichier, TOptsValidateurFichier } from '@common/data/input/validators/basic';
+
+/*----------------------------------
+- VALIDATEURS
+----------------------------------*/
+
+export default buildValidators({
+
+    file: ({ ...opts }: TOptsValidateurFichier & {}) => champ<object>('fichier', {
+        ...opts,
+        valider: async (val: any, donneesSaisie: TObjetDonnees, donneesRetour: TObjetDonnees) => {
+
+            console.log('VALIDER FICHIER COTÉ CLIENT', val);
+
+            // Chaine = url ancien fichier = conservation = sera ignoré coté serveur
+            if (typeof val === 'string')
+                return val;
+
+            // Validation universelle
+            val = await validateurFichier(opts, val, donneesSaisie, donneesRetour);
+
+            return opts.valider ? await opts.valider(val, donneesSaisie, donneesRetour) : val;
+        }
+    })
+
+});

package/client/global.d.ts

@@ -0,0 +1,5 @@
+declare global {
+    interface Window {
+        dev?: boolean
+    }
+}

package/client/hooks.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+// Hooks
+/*export { default as useState } from '@client/hooks/useState';
+export type { TActions as TActionsState } from '@client/hooks/useState';
+export { default as useComponent } from '@client/hooks/useComponent';
+export { default as useScript } from '@client/hooks/useScript';*/
+
+// Utils
+export const Switch = (val: string | number, options: { [cle: string]: ComponentChild }) => {
+    return (val in options) ? options[val] : null;
+}
+
+export const useState = <TData extends TObjetDonnees>(initial: TData): [
+    TData,
+    (data: Partial<TData>) => void
+] => {
+    const [state, setState] = React.useState<TData>(initial);
+    const setPartialState = (data: Partial<TData>) => setState(current => ({ ...current, ...data }));
+    return [state, setPartialState]
+}

package/client/index.ts

@@ -0,0 +1,6 @@
+import Application from '@/client';
+
+const app = new Application();
+app.app = app;
+
+app.start();

package/client/pages/_layout/index.less

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

package/client/pages/_layout/index.tsx

@@ -0,0 +1,43 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+// Core
+import RouterComponent 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">
+
+                <RouterComponent service={Router} />
+                
+            </div>
+        </div>
+    )
+}

package/client/pages/bug.tsx.old

@@ -0,0 +1,60 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+// Npm
+import React from 'react';
+
+// Core components
+import { Button, Input } from '@client/components';
+import Card, { Props as CardProps } from '@client/components/Dialog/card';
+
+// Core libs
+import useContext from '@/client/context';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export default ({ ...self }: {} & CardProps) => {
+
+    const { api, modal, clientBug } = useContext();
+
+    const [observation, setObservation] = React.useState("");
+    const [before, setBefore] = React.useState("");
+
+    const send = () => clientBug({ observation, before }).then(() =>
+        modal.success("Thanks You !", `Your bug report will be review in the next 12 hours.`).then(() =>
+            self.close(true)
+        )
+    );
+
+    const close = () => modal.confirm("Cancel your report ?", "All your changes will not be saved.").then(close =>
+        close && self.close(true)
+    );
+
+    self.onClose = close
+
+    return (
+        <Card {...self} title="Report a problem" footer={<>
+
+            <Button onClick={() => close()}>
+                Cancel
+            </Button>
+
+            <Button type="primary" onClick={send}>
+                Send Report
+            </Button>
+
+        </>}>
+
+            <p>What's the problem ?</p>
+
+            <Input type="longtext" title="Description of the problem" value={observation} onChange={setObservation} />
+
+            <p>What did you do just before the problem occurs ?</p>
+
+            <Input type="longtext" title="How the problem occured ?" value={before} onChange={setBefore} />
+
+        </Card>
+    )
+}

package/client/pages/useHeader.tsx

@@ -0,0 +1,50 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Core
+import useContext from '@/client/context';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+export type Props = {
+    id?: string,
+    focus?: boolean,
+    jail?: boolean,
+    error?: boolean,
+
+    title: string,
+    subtitle?: string,
+    description?: string,
+}
+
+/*----------------------------------
+- HOOK
+----------------------------------*/
+export default ({ id, title, subtitle, focus, jail, description }: Props) => {
+
+    let { page } = useContext();
+
+    // page est supposé ne pas être undefined
+    if (!page)
+        return;
+
+    // SEO Title
+    page.title = title;
+    if (subtitle !== undefined)
+        page.title += ' | ' + subtitle;
+
+    // SEO Description
+    if (description !== undefined)
+        page.description = description;
+
+    page.bodyId = page.bodyId || id || '';
+
+    if (focus)
+        page.bodyClass.add('focus');
+
+    if (jail)
+        page.bodyClass.add('jail');
+    
+}

package/client/services/captcha/index.ts

@@ -0,0 +1,67 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import loadScript from 'load-script';
+
+/*----------------------------------
+- SERVICE
+----------------------------------*/
+export default class Recaptcha {
+
+    private idClientCaptcha: string | null = null;
+    public init(): Promise<void> {
+        const idConteneurBadge = 'badge-recaptcha';
+        return new Promise((resolve: Function, reject: Function) => {
+
+            // Déjà chargé
+            if (this.idClientCaptcha !== null)
+                return resolve();
+
+            loadScript('https://www.google.com/recaptcha/api.js?render=explicit', (err/*, script*/) => {
+                
+                if (err) {
+                    reject(err);
+                    return;
+                }
+
+                grecaptcha.ready(() => {
+
+                    const conteneur = document.getElementById(idConteneurBadge);
+
+                    if (!conteneur)
+                        throw new Error("Conteneur badge recaptcha pas trouvé");
+
+                    if (this.idClientCaptcha === null) {
+                        if (conteneur.dataset.flottant)
+                            this.idClientCaptcha = grecaptcha.render(idConteneurBadge, {
+                                'sitekey': this.app.apis.recaptcha.pub,
+                                'size': 'invisible'
+                            });
+                        else
+                            this.idClientCaptcha = grecaptcha.render(idConteneurBadge, {
+                                'sitekey': this.app.apis.recaptcha.pub,
+                                'badge': 'inline',
+                                'size': 'invisible'
+                            });
+                    }
+
+                    if (this.idClientCaptcha !== null)
+                        resolve();
+                    else
+                        reject("Attendez que la page soit complètement chargée. Si c'est déjà le cas, rechargez la page.");
+                });
+            })
+        });
+    }
+
+    public async check(action: string): Promise<string> {
+
+        await this.init();
+
+        const token = grecaptcha.execute(this.idClientCaptcha, { action: action });
+
+        return token;
+    }
+}

package/client/services/router/components/Link.tsx

@@ -0,0 +1,46 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+import { history } from '../request/history';
+
+export const shouldOpenNewTab = (url: string, target?: string) => url && (
+    target !== undefined
+    ||
+    !['/', '#'].includes(url[0])
+    || 
+    url.startsWith('//')
+)
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+// Simple link
+export const Link = ({ to, ...props }: { 
+    to: string,
+    children?: ComponentChild,
+    class?: string,
+    className?: string
+} & React.HTMLProps<HTMLAnchorElement>) => {
+
+    const openNewTab = shouldOpenNewTab(to, props.target);
+
+    // External = open in new tab by default
+    if (openNewTab)
+        props.target = '_blank';
+    // Otherwise, propagate to the router
+    else 
+        props.onClick = (e) => {
+            history?.push(to);
+            e.preventDefault();
+            return false
+        }
+
+    return (
+        <a {...props} href={to} />
+    )
+
+}

package/client/services/router/components/Page.tsx

@@ -0,0 +1,55 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+// Npm
+import React from 'react';
+
+// Core
+import useContext from '@/client/context';
+
+// Specific
+import type Page from '../response/page';
+
+/*----------------------------------
+- PAGE STATE
+----------------------------------*/
+
+export default ({ page }: { page: Page }) => {
+
+    /*----------------------------------
+    - CONTEXT
+    ----------------------------------*/
+    const context = useContext();
+
+    // Bind data
+    const [apiData, setApiData] = React.useState<{[k: string]: any} | null>( page.data || {});
+    page.setAllData = setApiData;
+    const fullData = {
+        ...context.data,
+        ...apiData
+    }
+
+    // Temporary fix: context.page may not be updated at this stage
+    //  Seems to be the case when we change page, but still same page component with different data
+    // TODO: ensure these updated are made every tume we change page / context
+    context.page = page;
+    context.data = fullData;
+    context.context = context;
+
+    // Page component has not changed, but data were updated (ex: url parameters change)
+    React.useEffect(() => {
+
+        setApiData(page.data);
+
+    }, [page.data]);
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    //  Make request parameters and api data accessible from the page component
+    return page.renderer ? (
+
+        <page.renderer {...context} />
+        
+    ) : <>Renderer missing</>
+}