5htp-core 0.1.2 → 0.2.1

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

@@ -13,7 +13,7 @@ import { propsDefautChampForm, TBasePropsChamp } from '@client/components/input/
 import { TSchema, TRetourValidation, initDonnees, validate as validerSchema, TSchemaChampComplet } from '@common/data/input/validate';
 import { simpleDeepCopy, chemin } from '@common/data/objets';
 import { ContexteOnglets } from '@client/components/containers/tabs';
-import useContext from '@client/context';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES ENTREE

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

@@ -1,5 +1,3 @@
-@import (reference) "~@/client/assets/theme.less";
-
 @hideeWidth: 10em;
 
 .scrollable-row {

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

@@ -1,3 +1,4 @@
+
 /*----------------------------------
 - DEPENDANCES
 ----------------------------------*/
@@ -22,7 +23,7 @@ export type Props<TRow> = {
     columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
 
     setData?: (rows: TRow[]) => void,
-    vide?: ComponentChild,
+    empty?: ComponentChild,
     className?: string,
 
     actions?: TAction<TRow>[]
@@ -39,7 +40,7 @@ export type TColumn = {
 - COMPOSANTS
 ----------------------------------*/
 export default function Liste<TRow extends TDonneeInconnue>({
-    data: rows, setData, vide ,
+    data: rows, setData, empty ,
     columns, actions, ...props
 }: Props<TRow>) {
 

package/src/client/components/button.tsx

@@ -7,8 +7,8 @@ import React from 'react';
 import { VNode, RefObject,ComponentChild } from 'preact';
 
 // Core
-import { history } from '@client/router/request/history';
-import useContext from '@client/context';
+import { history } from '@client/services/router/request/history';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES

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

@@ -15,7 +15,7 @@ import Bouton, { Props as PropsBouton } from '@client/components/button';
 // Libs
 import getPosition, { TSide } from './getPosition';
 import { blurable, deepContains } from '@client/utils/dom';
-import useContexte from '@client/context';
+import useContexte from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/components/containers/champs.less

@@ -1,5 +1,3 @@
-@import '~@/general/client/assets/css/vars.less';
-
 @plugin "~@client/components/_base/plugin-less.js";
 
 /*----------------------------------

package/src/client/components/data/spintext/index.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { ComponentChild } from 'preact';
 
 // Core
-import { useState } from '@client/context';
+import { useState } from '@/client/context';
 
 /*----------------------------------
 - TYPES

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

@@ -12,7 +12,7 @@ import { TDialogControls } from '../Dialog/Manager';
 export type { TDialogControls } from '../Dialog/Manager';
 
 // Libs
-import useContexte from '@client/context';
+import useContexte from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/components/index.ts

@@ -0,0 +1,23 @@
+export { default as Button } from './button';
+export { default as Row } from './row';
+export { default as Card } from './card';
+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 Input } from './input';
+export { default as Textarea } from './input/Textarea';
+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';
+
+// TOD: fix popover component
+//export { default as Date } from './input/Date';
+//export { default as Periode } from './input/Periode';
+
+// TODO: adapt
+//export { default as Couleur } from './input/Couleur';
+//export { default as Code } from './input/Code';
+//export { default as Rte } from './input/Rte';

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

@@ -1,5 +1,3 @@
-@import (reference) '~@/client/assets/theme.less';
-
 @hInput: @sizeComponent;
 
 // TODO: Adapter textarea à input/basev2

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

@@ -7,7 +7,7 @@ import React from 'react';
 import { ComponentChild } from 'preact';
 
 // Core libs
-import { useState } from '@client/context';
+import { useState } from '@client/hooks';
 
 /*----------------------------------
 - TYPES

package/src/client/components/input/Date/index.less

@@ -1,5 +1,3 @@
-@import (reference) '~@/general/client/assets/css/vars.less';
-
 .champ.periode {
 
     display: flex;

package/src/client/components/input/Periode/index.less

@@ -1,5 +1,3 @@
-@import (reference) '~@/general/client/assets/css/vars.less';
-
 .champ.periode {
 
     display: flex;

package/src/client/components/input/Radio/index.less

@@ -1,5 +1,3 @@
-@import '~@/general/client/assets/css/vars.less';
-
 @hRadio: 40px;
 @margeRadio: 5px;
 

package/src/client/components/input/UploadImage/index.less

@@ -1,5 +1,3 @@
-@import (reference) '~@/client/assets/theme.less';
-
 .uploadImg {
     position: relative;
     overflow: hidden;

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

@@ -9,7 +9,7 @@ import { ComponentChild } from 'preact';
 import Bouton from '@client/components/button';
 
 // Libs
-import useContext, { useState } from '@client/context';
+import useContext, { useState } from '@/client/context';
 import NormalisedFile from '@common/data/file';
 
 // Ressources

package/src/client/hooks/index.ts

@@ -0,0 +1,5 @@
+export { default as useState } from './useState';
+export { default as useActivity } from './useActivity';
+export { default as useComponent } from './useComponent';
+export { default as useScript } from './useScript';
+export { default as useVisible } from './useVisible';

package/src/client/hooks/useState/index.tsx

@@ -6,7 +6,7 @@
 import { useState as reactUseState, useEffect as reactUseEffect } from 'preact/hooks';
 
 // Libs
-import useContexte from '@client/context';
+import useContexte from '@/client/context';
 
 // Libs spécifiques
 import { execFetchersState, initStateAsync } from './fetchers';
@@ -18,7 +18,7 @@ import { execFetchersState, initStateAsync } from './fetchers';
 
 import TRequeteApi, { TOptionsRequete } from '@common/api';
 
-import { TDataResolved } from '@client/router';
+import { TDataResolved } from '@client/services/router';
 
 /*----------------------------------
 - TYPES: DEFINITIONS

package/src/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/src/client/index.ts

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

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

@@ -6,8 +6,6 @@
 import React from 'react';
 
 // Core
-import route from '@router';
-import { useState } from '@client/context';
 
 // Core components
 import Button, { Props as ButtonProps } from '@client/components/button';

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

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -15,7 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error(400, {}, ({ message }, { modal }) => {
+router.error(400, {}, ({ message, modal }) => {
 
     if (!message)
         message = "The request you made is incorrect.";

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

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -18,7 +18,7 @@ import Button from '@client/components/button';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error(401, {  }, ({ }, { api, toast, modal, request, page }) => {
+router.error(401, {  }, ({ api, toast, modal, request, page }) => {
 
     request.response?.redirect('/');
 

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

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -15,7 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error( 403, {}, ({ message }, { modal }) => {
+router.error( 403, {}, ({ message, modal }) => {
 
     if (!message)
         message = "You do not have sufficient permissions to access this content.";

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

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -15,7 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error( 404, {}, ({ message }, { modal }) => {
+router.error( 404, {}, ({ message, modal }) => {
 
     if (!message)
         message = "The content you asked for was not found.";

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

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -15,7 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error( 500, {}, ({ message }) => {
+router.error( 500, {}, ({ message }) => {
 
     if (!message)
         message = "A technical error occurred.";

package/src/client/pages/bug.tsx

@@ -10,7 +10,7 @@ import Textarea from '@client/components/input/Textarea';
 import Card, { Props as CardProps } from '@client/components/Dialog/card';
 
 // Core libs
-import useContext from '@client/context';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/pages/useHeader.tsx

@@ -3,7 +3,7 @@
 ----------------------------------*/
 
 // Core
-import useContext from '@client/context';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/services/metrics/index.ts

@@ -0,0 +1,37 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+
+// Core
+import type ClientApplication from '@client/app';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+
+
+/*----------------------------------
+- SERVICE
+----------------------------------*/
+export default class ClientMetrics {
+
+    public constructor( public app: ClientApplication ) {
+
+    }
+
+    public start() {
+        
+    }
+
+    // Tracking
+    public event( name: string, params?: object ) {
+        if (!window.gtag) return;
+        if (name === 'pageview')
+            window.gtag('send', name);
+        else
+            window.gtag('event', name, params);
+    }
+}

package/src/client/{router → services/router/components}/Link.tsx

@@ -5,7 +5,7 @@
 // Npm
 import React from 'react';
 import type { ComponentChild } from 'preact';
-import { history } from './request/history';
+import { history } from '../request/history';
 
 /*----------------------------------
 - COMPONENT

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

@@ -0,0 +1,59 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+// Npm
+import React from 'react';
+
+// Core
+import useContext from '@/client/context';
+
+// Specific
+import type Page from '../response/page';
+
+/*----------------------------------
+- PAGE STATE
+----------------------------------*/
+
+export default ({ page, isCurrent }: { page: Page, isCurrent?: boolean }) => {
+
+    const context = useContext();
+
+    const [apiData, setApiData] = React.useState<{[k: string]: any} | null>( 
+        page.loading  ? null : page.data 
+    );
+    page.setAllData = setApiData;
+ 
+    React.useEffect(() => {
+
+        // Fetch the data asynchronously for the first time
+        if (/*apiData === null && */isCurrent)
+            page.fetchData().then( loadedData => {
+                page.loading  = false;
+                setApiData(loadedData);
+            })
+
+    }, [page]);
+
+    return (
+        <div 
+            class={"page" + (isCurrent ? ' current' : '')} 
+            id={page.chunkId === undefined ? undefined : 'page_' + page.chunkId}
+        >
+
+            {/* Make request parameters and api data accessible from the page component */}
+            {page.renderer ? (
+
+                <page.renderer 
+                    // Services
+                    {...context} 
+                    // URL params
+                    {...context.request.data} 
+                    // API data
+                    {...apiData} 
+                />
+                
+            ) : null}
+
+        </div>
+    )
+}