5htp-core 0.4.1 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,7 +13,6 @@
 		"framework"
 	],
 	"dependencies": {
-		"@wojtekmaj/react-daterange-picker": "^5.0.2",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -65,7 +64,7 @@
 		"picomatch": "^2.3.1",
 		"preact": "^10.5.15",
 		"preact-render-to-string": "^5.1.19",
-		"react-datetime-picker": "^5.0.3",
+		"react-datetime-picker": "^5.6.0",
 		"react-scrollbars-custom": "^4.0.27",
 		"react-slider": "^2.0.1",
 		"react-textarea-autosize": "^8.3.3",

package/src/client/app/index.ts

@@ -88,13 +88,13 @@ export default abstract class Application {
     public bindErrorHandlers() {
 
         // Impossible de recup le stacktrace ...
-        /*window.addEventListener("unhandledrejection", (e) => {
-            clientBug(JSON.stringify(e))
-            console.log("unhandledrejection", e.stack);
-            
-        });*/
+        window.addEventListener("unhandledrejection", (e) => {
+            const error = new Error(e.reason); // How to get stacktrace ?
+            this.handleError(error);
+        });
         
-        window.onerror = (message, file, line, col, stacktrace) =>
+        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(() => {
@@ -106,9 +106,10 @@ export default abstract class Application {
                 { autohide: false });*/
 
             })
+        }
     }
 
-    public abstract handleError( error: CoreError | Error, httpCode?: number );
+    public abstract handleError( error: CoreError | Error );
 
     // TODO: move on app side
     public reportBug = (infos: TBugReportInfos) => fetch('/feedback/bug/ui', {

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

@@ -69,7 +69,7 @@
         z-index: 1; // Make the label on top of ::before for example
 
         // Handle overflow
-        white-space: nowrap;
+        //white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
 
@@ -169,6 +169,9 @@
 
         > .label {
             flex-direction: column;
+
+            white-space: normal;
+            text-align: center;
         }
     }
 
@@ -246,7 +249,7 @@ ul.row {
 
             > .label {
 
-                display: none;
+                visibility: hidden;
                 position: absolute;
                 
                 background: #111;
@@ -261,7 +264,7 @@ ul.row {
             }
     
             &:not([disabled]):hover > .label {
-                display: block;
+                visibility: visible;
             }
         }
     }
@@ -277,15 +280,15 @@ ul.row {
         position: relative;
 
         // Submenu
-        &:not(:hover) > .btn + .menu,
+        &:not(.contPopover):not(:hover) > .btn + .menu,
         > .btn[disabled] + .menu {
-            display: none;
+            visibility: hidden;
         }
     }
 
     &.menu > li {
         &:hover > .btn:not([disabled]):hover > .label {
-            display: block;
+            visibility: visible;
         }
     }
 
@@ -319,7 +322,7 @@ ul.col {
             }
     
             &:not([disabled]):hover > .label {
-                display: block;
+                visibility: visible;
             }
         }
     }
@@ -373,15 +376,16 @@ ul.col {
 
 // Submenu
 ul.row {
+
     .btn.icon > .label,
     > li > .btn + .menu {
         bottom: 100%;
-        margin-bottom: @spacing / 2;
+        margin-bottom: 0; // User's mouse shouldnt go outside the li so the hover state is not lost
     }
 
     > li > .btn + .menu.pos-bottom {
         bottom: auto;
         top: 100%;
-        margin-bottom: @spacing / 2;
+        margin-top: 0; // User's mouse shouldnt go outside the li so the hover state is not lost
     }
 }

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

@@ -9,7 +9,7 @@ table {
     width: 100%;
     padding: 0;
     border-collapse: separate; 
-    border-spacing: 0 0.5em;
+    border-spacing: 0 0; // must be fully managed by padding
 
     // By default, chrome disables text inherits
     line-height: inherit;
@@ -25,6 +25,10 @@ table {
         padding: 1em 1em;
         text-align: left;
 
+        + td, th {
+            border-left: solid 1px #F5F5F5
+        }
+
         &:first-child {
             padding-left: 2em;
         }
@@ -48,6 +52,14 @@ table {
         }
     }
 
+    // Size
+    &.s, .table.s & {
+        td, th {
+            padding: 0.7em 1em;
+            font-size: 1rem;
+        }
+    }
+
     // Tableua responsive
     //  Utilisation déconseillée (lauvaise utilisation de l'espace, ergonomie horrible
     /*@media (max-width: @responsive2) {

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

@@ -8,7 +8,6 @@
 // Fonts
 @import '../fonts/Inter/index.less';
 @import '../fonts/Rubik/index.less';
-@import '../fonts/Lato/index.less';
 
 // Apply the theme class
 .bg {

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

@@ -4,8 +4,7 @@
 a {
     color: inherit;
     cursor: pointer;
-    text-decoration: underline;
-    text-decoration: none;
+    text-decoration: underline; // Make simple text links visible
 
     &:not([disabled]):hover, 
     &.active {

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

@@ -28,6 +28,14 @@
 
 .scrollable {
     overflow: auto;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+
+    /* For Chrome, Safari, and other WebKit-based browsers */
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
 }
 
 .row {

package/src/client/components/Form.ts

@@ -225,7 +225,13 @@ export default function useForm<TFormData extends {}>(
     const form = {
         fields: fields.current,
         data,
-        set: setData,
+        set: data => {
+            setState(current => ({
+                ...current,
+                hasChanged: true
+            }));
+            setData(data);
+        },
         validate,
         submit,
         options,

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

@@ -64,7 +64,7 @@ export default ({
     noneSelection, 
     enableSearch, 
     value: current, 
-    onChange, 
+    onChange: onChangeCallback, 
     multiple, 
     dropdown,
     ...otherProps
@@ -136,6 +136,18 @@ export default ({
         typeof initChoices === 'function' ? true : initChoices
     ]);
 
+    const onChange = (...args) => {
+        
+        if (onChangeCallback) {
+            onChangeCallback(...args);
+        }
+
+        // Close the popover
+        if (popoverState[1] && !multiple) {
+            popoverState[1](false);
+        }
+    }
+
     /*----------------------------------
     - RENDER
     ----------------------------------*/
@@ -168,7 +180,7 @@ export default ({
 
     return dropdown ? (
         <Popover content={(
-            <div class="card col">
+            <div class="card col al-top">
 
                 <div class="col">
 

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

@@ -7,15 +7,15 @@ import React from 'react';
 import { ComponentChild } from 'preact';
 
 // Composants
-import Button, { Props as PropsBouton } from '@client/components/button';
-import Dropdown from '@client/components/dropdown.old';
-//import Checkbox from '@client/components/Champs/Checkbox';
+import Button, { Props as TButtonProps } from '@client/components/button';
+import Popover from '../containers/Popover';
+import Checkbox from '../input/Checkbox';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-export type TDonneeInconnue = {[cle: string]: any};
+export type TDonneeInconnue = { id: any } &  {[cle: string]: any};
 
 export type Props<TRow> = {
     
@@ -36,6 +36,13 @@ export type TColumn = {
     class?: string
 }
 
+export type TAction<TRow> = Omit<TButtonProps, 'onClick'> & {
+    onClick: (row: TRow) => void,
+    label: ComponentChild,
+    multi?: boolean,
+    default?: boolean,
+}
+
 /*----------------------------------
 - COMPOSANTS
 ----------------------------------*/
@@ -55,101 +62,77 @@ export default function Liste<TRow extends TDonneeInconnue>({
         );
 
     const [selection, setSelection] = React.useState<number[]>([]);
-    const [sort, setSort] = React.useState<{ col: number, dir: 1 | -1 } | null>(null);
-
-    const trier = (colonne: TColumn, iColonne: number) => {
-
-        if (!setData) 
-            return console.warn(`[ui][table] Please specify a setData function to enable sorting features.`);
-
-        const ordre = sort && iColonne === sort.col
-            ? -1 * sort.dir as (1 | -1) // Inversement ordre
-            : 1;
-            
-        setData([
-            ...rows.sort((a: TRow, b: TRow) => {
-
-                const valA = colonne.valeur(a);
-                const valB = colonne.valeur(b);
-
-                const typeA = typeof valA;
-                const typeB = typeof valB;
-
-                if (typeA === 'number' && typeB === 'number')
-                    return ordre === 1 ? (valA as number) - (valB as number) : (valB as number) - (valA as number)
-                else if (typeA === 'string' && typeB === 'string')
-                    return ordre === 1
-                        ? (valA as string).localeCompare(valB as string)
-                        : (valB as string).localeCompare(valA as string)
-                else
-                    throw new Error(`Type de données incompatible entre deux lignes: ${valA}:${typeA} vs ${valB}:${typeB}.`);
-
-
-            })
-        ]);
-
-        setSort({ col: iColonne, dir: ordre });
-    }
-
     const selectionMultiple = actions && actions.some((action) => action.multi);
 
+    const defaultAction = actions && actions.find((action) => action.default);
+
     /*----------------------------------
     - RENDU COLONNES / LIGNES
     ----------------------------------*/
     let renduColonnes: ComponentChild[] = [];
     
     const renduLignes = rows.map((row: TRow, iDonnee: number) => (
-        <tr>
-            {/*selectionMultiple && (
+        <tr {...defaultAction ? {
+            onClick: () => defaultAction.onClick(row),
+            class: 'clickable'
+        } : {}}>
+            {selectionMultiple && (
                 <td>
                     <Checkbox
-                        nom={"selectionner" + iDonnee}
-                        label={false}
-                        valeur={selection.includes(iDonnee)}
+                        id={"selectionner" + iDonnee}
+                        value={selection.includes(row.id)}
                         onChange={(selectionner: boolean) => {
-                            setSelection(selectionner
+                            setSelection(current => selectionner
                                 // Ajoute
-                                ? [...selection, iDonnee]
+                                ? [...current, row.id]
                                 // Retire
-                                : selection.filter((e, i) => i !== iDonnee))
+                                : current.filter((currentId, i) => currentId !== row.id))
                         }}
                     />
                 </td>
-                    )*/}
-
-            {columns(row, rows, iDonnee).map((colonne, iColonne) => {
+            )}
 
-                const triable = colonne.raw !== undefined;
+            {columns(row, rows, iDonnee).map((col) => {
 
                 if (iDonnee === 0) renduColonnes.push(
-                    <th
-                        onClick={triable !== undefined ? () => trier(colonne, iColonne) : undefined}
-                        className={triable !== undefined ? 'cliquable' : undefined}
-                    >
-                        {colonne.label}
+                    <th>
+                        {col.label}
                     </th>
                 );
 
-                const affichageBrut = ['number', 'string'].includes(typeof colonne.cell) || React.isValidElement(colonne.cell);
+                const affichageBrut = ['number', 'string'].includes(typeof col.cell) || React.isValidElement(col.cell);
 
-                let classe = colonne.class || '';
-                if (typeof colonne.raw === 'number')
+                let classe = col.class || '';
+                if (typeof col.raw === 'number')
                     classe += 'txtRight';
 
                 return (
                     <td class={classe}>
-                        {affichageBrut ? colonne.cell : JSON.stringify(colonne.cell)}
+                        {affichageBrut ? col.cell : JSON.stringify(col.cell)}
                     </td>
                 )
             })}
 
-            {/*actions !== undefined && (
+            {actions !== undefined && (
                 <td>
-                    <Popover menu={{ actions, rows: row }}>
-                        <Button taille="s" icone="solid/ellipsis-h" />
+                    <Popover content={(
+                        <ul class="col menu card bg white">
+                            {actions.map(({ label, onClick, ...props }: TAction<TRow>) => (
+                                <li>
+                                    <Button {...props}
+                                        onClick={() => onClick && onClick(row)}
+                                        
+                                    >
+                                        {label}
+                                    </Button>
+                                </li>
+                            ))}
+                        </ul>
+                    )}>
+                        <Button size="s" icon="solid/ellipsis-h" />
                     </Popover>
                 </td>
-            )*/}
+            )}
         </tr>
     ));
 
@@ -170,11 +153,9 @@ export default function Liste<TRow extends TDonneeInconnue>({
                         {selectionMultiple && (
                             <th>
                                 <Checkbox
-                                    nom="toutSelectionner"
-                                    label={false}
-                                    valeur={selection.length >= rows.length}
+                                    value={selection.length >= rows.length}
                                     onChange={(status: boolean) => {
-                                        setSelection(status ? Object.keys(rows) : []);
+                                        setSelection(status ? rows.map(r => r.id) : []);
                                     }}
                                 />
                             </th>
@@ -197,24 +178,19 @@ export default function Liste<TRow extends TDonneeInconnue>({
                     <div className="card pdv-05 row inline pos_bottom">
                         <strong>{selection.length} selected items</strong>
 
-                        {actions.map((action: TAction<TRow>) => {
+                        {actions.map(({ label, multi, onClick, ...props }: TAction<TRow>) => {
 
-                            if (!action.multi)
+                            if (!multi)
                                 return;
 
-                            const donneesSelection = selection.map((index: number) => rows[index]);
+                            const selectedRows = selection.map((index: number) => rows[index]);
 
                             return (
                                 <Button
-                                    {...(action.bouton ? (action.multi
-                                        ? action.bouton([row], [iDonnee])
-                                        : action.bouton(row, iDonnee)
-                                    ) : {})}
-                                    icone={action.icone}
-                                    onClick={() => action.onClick && action.onClick(donneesSelection, selection)}
-                                    lien={action.lien && action.lien(donneesSelection, selection)}
+                                    {...props}
+                                    onClick={() => onClick && onClick(selectedRows)}
                                 >
-                                    {action.label}
+                                    {label}
                                 </Button>
                             )
                         })}

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

@@ -4,7 +4,7 @@
 
 // Npm
 import React from 'react';
-import { JSX, ComponentChild } from 'preact';
+import { JSX, ComponentChild, VNode } from 'preact';
 import type { StateUpdater } from 'preact/hooks';
 
 // Libs
@@ -20,7 +20,7 @@ export type Props = JSX.HTMLAttributes<HTMLDivElement> & {
     id?: string,
 
     // Display
-    content?: JSX.Element,
+    content?: ComponentChild,
     state?: [boolean, StateUpdater<boolean>],
     width?: number | string,
     disable?: boolean

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

@@ -14,7 +14,7 @@ import { useInput, InputBaseProps } from '../../inputv3/base';
 ----------------------------------*/
 export type Props = {
     id: string,
-    label: ComponentChild,
+    label?: ComponentChild,
     // State
     inputRef?: React.Ref<HTMLInputElement>
 }
@@ -68,9 +68,11 @@ export default ({
                 {...fieldProps}
             />
 
-            <label htmlFor={id} class="col-1 txt-left">
-                {labelText}
-            </label>
+            {labelText !== undefined && (
+                <label htmlFor={id} class="col-1 txt-left">
+                    {labelText}
+                </label>
+            )}
             
         </div>
         

package/src/client/components/inputv3/date/Calendar.css

@@ -0,0 +1,156 @@
+.react-calendar {
+  width: 350px;
+  max-width: 100%;
+  background: white;
+  border: 1px solid #a0a096;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.125em;
+}
+
+.react-calendar--doubleView {
+  width: 700px;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer {
+  display: flex;
+  margin: -0.5em;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer > * {
+  width: 50%;
+  margin: 0.5em;
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.react-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+}
+
+.react-calendar__navigation button:disabled {
+  background-color: #f0f0f0;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__month-view__weekdays {
+  text-align: center;
+  text-transform: uppercase;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.react-calendar__month-view__weekNumbers .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.react-calendar__month-view__days__day--weekend {
+  color: #d10000;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth,
+.react-calendar__decade-view__years__year--neighboringDecade,
+.react-calendar__century-view__decades__decade--neighboringCentury {
+  color: #757575;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+}
+
+.react-calendar__tile {
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  background: none;
+  text-align: center;
+  line-height: 16px;
+  font: inherit;
+  font-size: 0.833em;
+}
+
+.react-calendar__tile:disabled {
+  background-color: #f0f0f0;
+  color: #ababab;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth:disabled,
+.react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+  color: #cdcdcd;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__tile--now {
+  background: #ffff76;
+}
+
+.react-calendar__tile--now:enabled:hover,
+.react-calendar__tile--now:enabled:focus {
+  background: #ffffa9;
+}
+
+.react-calendar__tile--hasActive {
+  background: #76baff;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+  background: #a9d4ff;
+}
+
+.react-calendar__tile--active {
+  background: #006edc;
+  color: white;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #1087ff;
+}
+
+.react-calendar--selectRange .react-calendar__tile--hover {
+  background-color: #e6e6e6;
+}