5htp-core 0.2.6 → 0.2.7

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.2.6",
+	"version": "0.2.7",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,6 +13,7 @@
 		"framework"
 	],
 	"dependencies": {
+		"@wojtekmaj/react-daterange-picker": "^4.2.0",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -93,7 +94,7 @@
 		"@types/yargs-parser": "^21.0.0",
 		"babel-plugin-glob-import": "^0.0.6-2"
 	},
-    "peerDependencies": {
-        "5htp": "0.2.3"
-    }
+	"peerDependencies": {
+		"5htp": "0.2.3"
+	}
 }

package/src/client/app/index.ts

@@ -24,8 +24,8 @@ export { default as Service } from './service';
 declare global {
     interface Window {
         dev: boolean,
-        // Defined by loading gtag.js
-        gtag: (action: string, name: string, params?: any) => void,
+        /*context: ClientContext,
+        user: User,*/
         /*context: ClientContext,
         user: User,*/
     }

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

@@ -64,6 +64,7 @@ img.icon {
     object-position: center;
 }
 
+img.logo,
 i.logo {
     /*width: 3.2em;
     height: 3.2em;
@@ -75,11 +76,16 @@ i.logo {
     line-height: 2em;
     flex: 0 0 2em;
 
+    background-color: var(--cBg2);
+    border-radius: @radius;
+    border: none; // For img
+}
+
+i.logo {
+
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
-    background-color: var(--cBg2);
-    border-radius: 50%;
 
     &.contain {
         background-color: transparent;

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

@@ -118,6 +118,7 @@
     &.al-bottom { align-items: flex-end; }
     &.al-fill { align-items: stretch; }
     
+    > .row-1 { align-self: stretch; }
 }
 
 .col {
@@ -134,6 +135,8 @@
     &, &.al-fill { align-items: stretch; }
 
     &.sep-1 > * + * { border-top: solid 1px var(--cLine); }
+
+    > .col-1 { align-self: stretch; }
 }
 
 .row, 

package/src/client/components/Form.ts

@@ -86,7 +86,7 @@ export default function useForm<TFormData extends {}>(
 
         // Autosave
         if (options.autoSave !== undefined)
-            saveLocally(data, options.autoSave);
+            saveLocally(data, options.autoSave.id);
 
     }, [data]);
 
@@ -134,7 +134,7 @@ export default function useForm<TFormData extends {}>(
 
         // Reset autosaved data
         if (options.autoSave)
-            localStorage.removeItem(options.autoSave.id);
+            localStorage.removeItem('form.' + options.autoSave.id);
 
         return submitResult;
     }

package/src/client/components/index.ts

@@ -16,6 +16,7 @@ export { default as Video } from './Video';
 export { default as Number } from './input/Number';
 export { default as Slider } from './input/Slider';
 export { default as Radio } from './input/Radio';
+export { default as Checkbox } from './input/Checkbox';
 
 // Data
 export { default as Amount } from './Amount';
@@ -28,6 +29,7 @@ export { default as CircularProgressbar } from './data/progressbar/circular';
 export { default as Select } from './Select';
 export { default as Input } from './inputv3';
 export { default as File } from './inputv3/file';
+export { default as DateRangeInput } from './inputv3/date';
 
 // TOD: fix popover component
 //export { default as Date } from './input/Date';

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

@@ -1,74 +1,82 @@
 /*----------------------------------
 - DEPENDANCES
 ----------------------------------*/
+
+// Npm
 import React from 'react';
-import Champ from '../Base';
-import { ComponentChild } from 'preact';
+import { JSX, ComponentChild } from 'preact';
 
-import uid from '@common/data/id';
+// Core libs
+import { useInput, InputBaseProps } from '../../inputv3/base';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
-type TValeur = boolean;
-const valeurDefaut = false as boolean;
-type TValeurDefaut = typeof valeurDefaut;
-type TValeurOut = string;
-
 export type Props = {
-    valeur: TValeur,
-    switch?: boolean,
-    children?: ComponentChild
+    id: string,
+    label: ComponentChild,
+    // State
+    inputRef?: React.Ref<HTMLInputElement>
 }
 
 /*----------------------------------
-- COMPOSANTS
+- COMPOSANT
 ----------------------------------*/
-import './index.less';
-export default Champ<Props, TValeurDefaut, TValeurOut>('checkbox', { valeurDefaut }, ({
-    label, titre, children, switch: isSwitch, attrsContChamp, attrsChamp, nom, description, 
-    readOnly
-}, { valeur, state, setState }, rendre) => {
+export default ({ 
+    id,
+    // Decoration
+    required,
+    label: labelText,
+    // State
+    inputRef, errors,
+    ...props 
+}: Props & InputBaseProps<boolean> & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'onChange'>) => {
 
-    if (label === undefined)
-        label = true;
-    if (!titre && children)
-        titre = children;
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
 
-    if (isSwitch) {
-        attrsContChamp.className += ' switch';
-        if (label)
-            attrsContChamp.className += ' avecLabel';
-    } else
-        attrsContChamp.className += ' classique';
+    const [{ value, focus, fieldProps }, setValue, commitValue, setState] = useInput(props, false, true);
 
-    if (state.chargement)
-        attrsContChamp.disabled = true;
+    const refInput = inputRef || React.useRef<HTMLInputElement>();
+    
+    /*----------------------------------
+    - ATTRIBUTES
+    ----------------------------------*/
 
-    attrsChamp.id = 'check_' + (nom || uid());
+    let className: string = 'input checkbox row';
 
-    if (readOnly)
-        return rendre(valeur ? 'Yes' : 'No', {});
+    if (focus)
+        className += ' focus';
+    if (errors?.length)
+        className += ' error';
 
-    return rendre(<>
+    if (props.className !== undefined)
+        className += ' ' + props.className;
 
-        <input type="checkbox" {...attrsChamp}
-            onChange={() => {
-                setState({ valeur: !valeur });
-            }}
-            checked={valeur}
-        />
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return <>
+        <div class={className} onClick={() => refInput.current?.focus()}>
 
-        {/* On ne peut pas rendre le switch + le texte du label dans le même <label> */}
-        {(true || (isSwitch && label)) && (
-            <label htmlFor={attrsChamp.id} />
-        )}
+            <input type="checkbox" 
+                onChange={() => {
+                    setValue( !value );
+                }}
+                checked={value}
+            />
 
-        <div className="contLabel">
-            <label htmlFor={attrsChamp.id}>{titre}</label>   
-             
-            {description && <p className="desc">{description}</p>}
+            <label htmlFor={id} class="col-1 txt-left">
+                {labelText}
+            </label>
+            
         </div>
-
-    </>, { ecraser: true });
-})
+        
+        {errors?.length && (
+            <div class="fg error txt-left">
+                {errors.join('. ')}
+            </div>
+        )}
+    </>
+}

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

@@ -0,0 +1,74 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+import React from 'react';
+import Champ from '../Base';
+import { ComponentChild } from 'preact';
+
+import uid from '@common/data/id';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+type TValeur = boolean;
+const valeurDefaut = false as boolean;
+type TValeurDefaut = typeof valeurDefaut;
+type TValeurOut = string;
+
+export type Props = {
+    valeur: TValeur,
+    switch?: boolean,
+    children?: ComponentChild
+}
+
+/*----------------------------------
+- COMPOSANTS
+----------------------------------*/
+import './index.less';
+export default Champ<Props, TValeurDefaut, TValeurOut>('checkbox', { valeurDefaut }, ({
+    label, titre, children, switch: isSwitch, attrsContChamp, attrsChamp, nom, description, 
+    readOnly
+}, { valeur, state, setState }, rendre) => {
+
+    if (label === undefined)
+        label = true;
+    if (!titre && children)
+        titre = children;
+
+    if (isSwitch) {
+        attrsContChamp.className += ' switch';
+        if (label)
+            attrsContChamp.className += ' avecLabel';
+    } else
+        attrsContChamp.className += ' classique';
+
+    if (state.chargement)
+        attrsContChamp.disabled = true;
+
+    attrsChamp.id = 'check_' + (nom || uid());
+
+    if (readOnly)
+        return rendre(valeur ? 'Yes' : 'No', {});
+
+    return rendre(<>
+
+        <input type="checkbox" {...attrsChamp}
+            onChange={() => {
+                setState({ valeur: !valeur });
+            }}
+            checked={valeur}
+        />
+
+        {/* On ne peut pas rendre le switch + le texte du label dans le même <label> */}
+        {(true || (isSwitch && label)) && (
+            <label htmlFor={attrsChamp.id} />
+        )}
+
+        <div className="contLabel">
+            <label htmlFor={attrsChamp.id}>{titre}</label>   
+             
+            {description && <p className="desc">{description}</p>}
+        </div>
+
+    </>, { ecraser: true });
+})

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

@@ -37,6 +37,7 @@ export type TInputState<TValue> = {
 export function useInput<TValue>(
     { value: externalValue, onChange }: InputBaseProps<TValue>, 
     defaultValue: TValue,
+    autoCommit: boolean = false
 ): [
     state: TInputState<TValue>,
     setValue: (value: TValue) => void,
@@ -52,7 +53,12 @@ export function useInput<TValue>(
         changed: false
     });
 
-    const setValue = (value: TValue) => setState({ value, valueSource: 'internal', changed: true });
+    const setValue = (value: TValue) => {
+        setState({ value, valueSource: 'internal', changed: true });
+
+        if (autoCommit)
+            commitValue(value);
+    };
 
     const commitValue = () => {
 
@@ -75,6 +81,12 @@ export function useInput<TValue>(
         
     }, [externalValue]);
 
+    React.useEffect(() => {
+        if (state.valueSource === 'internal') {
+            commitValue();
+        } 
+    }, [state.value]);
+
     return [state, setValue, commitValue, setState]
 }
 

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

@@ -0,0 +1,49 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { StateUpdater } from 'preact/hooks';
+import DateRangePicker from '@wojtekmaj/react-daterange-picker/dist/entry.nostyle';
+
+// Core
+
+// App
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+type TValue = [Date, Date]
+export type Props = {
+    value: TValue,
+    onChange: StateUpdater<TValue>,
+    placeholder?: string,
+    min?: string,
+    max?: string
+}
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+import './react-calendar.less';
+import './react-daterange-picker.less';
+export default ({ value, Props, min, max, onChange }) => {
+
+    const state = React.useState(false);
+
+    /*----------------------------------
+    - CONSTRUCTION CHAMP
+    ----------------------------------*/
+    
+    
+    /*----------------------------------
+    - RENDU DU CHAMP
+    ----------------------------------*/
+    return (
+        <div>
+            <DateRangePicker onChange={onChange} value={value || [null, null]} />
+        </div>
+    )
+}

package/src/client/components/inputv3/date/react-calendar.less

@@ -0,0 +1,143 @@
+.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-weight: bold;
+    font-size: 0.75em;
+  }
+  
+  .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-size: 0.75em;
+    font-weight: bold;
+  }
+  
+  .react-calendar__month-view__days__day--weekend {
+    color: #d10000;
+  }
+  
+  .react-calendar__month-view__days__day--neighboringMonth {
+    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;
+  }
+  
+  .react-calendar__tile:disabled {
+    background-color: #f0f0f0;
+  }
+  
+  .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;
+  }

package/src/client/components/inputv3/date/react-daterange-picker.less

@@ -0,0 +1,112 @@
+.react-daterange-picker {
+    display: inline-flex;
+    position: relative;
+  }
+  
+  .react-daterange-picker,
+  .react-daterange-picker *,
+  .react-daterange-picker *:before,
+  .react-daterange-picker *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  
+  .react-daterange-picker--disabled {
+    background-color: #f0f0f0;
+    color: #6d6d6d;
+  }
+  
+  .react-daterange-picker__wrapper {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    align-items: center;
+    border: thin solid gray;
+  }
+  
+  .react-daterange-picker__inputGroup {
+    min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
+    height: 100%;
+    flex-grow: 1;
+    padding: 0 2px;
+    box-sizing: content-box;
+  }
+  
+  .react-daterange-picker__inputGroup__divider {
+    padding: 1px 0;
+    white-space: pre;
+  }
+  
+  .react-daterange-picker__inputGroup__divider,
+  .react-daterange-picker__inputGroup__leadingZero {
+    display: inline-block;
+  }
+  
+  .react-daterange-picker__inputGroup__input {
+    min-width: 0.54em;
+    height: 100%;
+    position: relative;
+    padding: 0 1px;
+    border: 0;
+    background: none;
+    font: inherit;
+    box-sizing: content-box;
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+  
+  .react-daterange-picker__inputGroup__input::-webkit-outer-spin-button,
+  .react-daterange-picker__inputGroup__input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+  
+  .react-daterange-picker__inputGroup__input:invalid {
+    background: rgba(255, 0, 0, 0.1);
+  }
+  
+  .react-daterange-picker__inputGroup__input--hasLeadingZero {
+    margin-left: -0.54em;
+    padding-left: calc(1px + 0.54em);
+  }
+  
+  .react-daterange-picker__button {
+    border: 0;
+    background: transparent;
+    padding: 4px 6px;
+  }
+  
+  .react-daterange-picker__button:enabled {
+    cursor: pointer;
+  }
+  
+  .react-daterange-picker__button:enabled:hover .react-daterange-picker__button__icon,
+  .react-daterange-picker__button:enabled:focus .react-daterange-picker__button__icon {
+    stroke: #0078d7;
+  }
+  
+  .react-daterange-picker__button:disabled .react-daterange-picker__button__icon {
+    stroke: #6d6d6d;
+  }
+  
+  .react-daterange-picker__button svg {
+    display: inherit;
+  }
+  
+  .react-daterange-picker__calendar {
+    width: 350px;
+    max-width: 100vw;
+    z-index: 1;
+  }
+  
+  .react-daterange-picker__calendar--closed {
+    display: none;
+  }
+  
+  .react-daterange-picker__calendar .react-calendar {
+    border-width: thin;
+  }

package/src/client/pages/useHeader.tsx

@@ -29,10 +29,11 @@ export default ({ id, title, subtitle, focus, jail, error }: Props) => {
     if (!page)
         return;
 
-    const fullTitle = title + ' | ' + subtitle;
+    page.title = title;
+    if (subtitle !== undefined)
+        page.title += ' | ' + subtitle;
 
     page.bodyId = page.bodyId || id || '';
-    page.title = fullTitle;
 
     if (focus)
         page.bodyClass.add('focus');