5htp-core 0.4.9 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.9",
+	"version": "0.5.0",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,7 +13,6 @@
 		"framework"
 	],
 	"dependencies": {
-		"@excalidraw/excalidraw": "^0.17.6",
 		"@lexical/file": "^0.19.0",
 		"@lexical/headless": "^0.18.0",
 		"@lexical/html": "^0.18.0",
@@ -34,6 +33,7 @@
 		"dayjs": "^1.11.5",
 		"deep-extend": "^0.6.0",
 		"dottie": "^2.0.2",
+		"escape-regexp": "^0.0.1",
 		"express": "^4.17.1",
 		"express-csp-header": "^5.0.0",
 		"express-fileupload": "^1.2.1",
@@ -74,7 +74,9 @@
 		"regenerator-runtime": "^0.13.9",
 		"request": "^2.88.2",
 		"sharp": "^0.29.1",
+		"slugify": "^1.6.6",
 		"sql-formatter": "^4.0.2",
+		"stopword": "^3.1.1",
 		"tslog": "^4.9.1",
 		"uuid": "^8.3.2",
 		"uuid-by-string": "^3.0.4",
@@ -96,9 +98,10 @@
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7",
-		"@types/yargs-parser": "^21.0.0"
+		"@types/yargs-parser": "^21.0.0",
+		"schema-dts": "^1.1.2"
 	},
 	"peerDependencies": {
-		"5htp": "0.3.9"
+		"5htp": "0.4.5"
 	}
 }

package/src/client/app/component.tsx

@@ -12,7 +12,7 @@ import DialogManager from '@client/components/Dialog/Manager'
 
 // Core components
 import RouterComponent from '@client/services/router/components/router';
-import type { TClientOrServerContext } from '@common/router';
+import type { TClientOrServerContextForPage } from '@common/router';
 
 // Resources
 import '@client/assets/css/core.less';
@@ -21,7 +21,7 @@ import '@client/assets/css/core.less';
 - COMPOSANT
 ----------------------------------*/
 export default function App ({ context }: { 
-    context: TClientOrServerContext,
+    context: TClientOrServerContextForPage,
 }) {
 
     const curLayout = context.page?.layout;

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

@@ -11,8 +11,8 @@
 
     // Layout
     position: relative;
-    gap: @spacing;
-    min-width: 0/*fit-content*/; // Fit content, even when flexbox parent width < content width
+    gap: @spacing / 2;
+    min-width: @sizeComponent; // Wdth should be < height
  
     // Dimensions
     font-size: 1em;
@@ -29,8 +29,7 @@
 
     // Colors
     // NOTE: transparent by default (menu items, etc..)
-    background: transparent;
-    color: var(--cTxtAccent);  
+    background: var(--cBg);
         
     // Hover
     //transition: all .5s linear;
@@ -38,6 +37,7 @@
     li:hover > & {
 
         color: var(--cTxtImportant);
+        background: var(--cBgActive);
         //transition: all .1s linear;
         
         > i {
@@ -77,9 +77,14 @@
         }
     }
 
+    &.selected {
+        background: var(--cBgSelected);
+        color: #fff;
+    }
+
     // Click
     &.pressed {
-        transform: scale(0.9);
+        background: var(--cBgPressed) !important;
     }
 
     &,
@@ -149,6 +154,11 @@
 
     }
 
+    &:not(.bg) {
+
+        color: var(--cTxtAccent);
+    }
+
     /*----------------------------------
     - STATE
     ----------------------------------*/
@@ -231,7 +241,7 @@
     // Give less imortance to buttons which are in lists
     color: var(--cTxtBase);  
     box-shadow: none;
-    //width: 100%;
+    padding: 0 1em; // Row display = more condensed
 
     &.active,
     &:hover {
@@ -239,14 +249,6 @@
         color: var(--cTxtImportant);
     }
 
-    > .label {
-        // All the list items label must be aligned
-        justify-content: flex-start;
-        // Since they're all horizontally aligned,
-        // Label = max width, so icon right are also aligned to right
-        flex: 1;
-    }
-
     &.icon {
 
         color: var(--cTxtDesc);
@@ -273,6 +275,20 @@
     }
 }
 
+.col {
+    &.menu > .btn, 
+    &.menu > li > .btn {
+
+        > .label {
+            // All the list items label must be aligned
+            justify-content: flex-start;
+            // Since they're all horizontally aligned,
+            // Label = max width, so icon right are also aligned to right
+            flex: 1;
+        }
+    }
+}
+
 ul.col,
 ul.row {
 

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

@@ -94,9 +94,9 @@ ol.steps {
         // Stepnumber = at the left
         &:not(.col) {
     
-            padding-left: /*@sizeStep + */(@spacing);
+            padding-left: /*@sizeStep + */1.5em;
             padding-top: (@sizeStep - @itemLineHeight) / 2;
-            line-height: @itemLineHeight;
+            //line-height: @itemLineHeight;
             margin: 5px 0;
     
             &:before {
@@ -124,7 +124,7 @@ strong.step {
     font-weight: bold;
 
     font-size: 1em;
-    line-height: 1.8em;
+    line-height: 2.2em;
 }
 
 /*----------------------------------

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

@@ -131,6 +131,7 @@ strong.placeholder {
 hr {
 
     border: none;
+    text-align: center;
 
     &::before {
         display: block;

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

@@ -32,6 +32,7 @@ table {
     th {
         font-weight: 500;
         color: var(--cTxtDesc);
+        white-space: break-spaces;
     }
 
     td, th {

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

@@ -15,6 +15,11 @@ i {
     text-align: center;
     font-style: normal;
 
+    // Avoid the flexbox to crush the icon
+    .row > & {
+        flex: 0 0 1em;
+    }
+
     &.spin {
         animation-name: spin;
         animation-iteration-count: infinite;

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

@@ -26,6 +26,10 @@ a {
             position: relative;
         }
     }
+
+    &.discrete:not(:hover) {
+        text-decoration: none;
+    }
 }
 
 [contenteditable]:focus {
@@ -182,7 +186,7 @@ pre {
     }
 
     code {
-        padding: @spacing @readingMargin;
+        //padding: @spacing @readingMargin;
         text-align: left;
         font-size: 1rem;
         line-height: 2em;
@@ -206,7 +210,7 @@ pre {
         }
 
         figcaption {
-            margin-top: @spacing;
+            margin-top: @spacing / 2;
             font-style: italic;
             text-align: center;
         }

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

@@ -19,9 +19,7 @@
         // Default theming for the children components
         @{componentsSelector} {
             // Don't apply the default theme to already themed components
-            &:not(.bg) {
-                .apply-theme-style( @componentsTheme, false, false );
-            }
+            .apply-theme-style( @componentsTheme, false, false );
         }
     }
 }
@@ -35,15 +33,23 @@
     @bgActive: if( (@theme[alpha]) or (alpha(@bg) < 1),
         fadeout( @bg, 90%),
         if( @isLight, 
-            @bg - #040404, 
+            @bg - #0A0A0A, 
             @bg + #111, 
         )
     );
+    @bgPressed: if( (@theme[alpha]) or (alpha(@bg) < 1),
+        fadeout( @bg, 80%),
+        if( @isLight, 
+            @bg - #1A1A1A, 
+            @bg + #222, 
+        )
+    );
     @fg: @theme[foreground];
 
     // Background
     --cBg: @bg; 
     --cBgActive: @bgActive;
+    --cBgPressed: @bgPressed;
     & when (@apply = true) {
         background: var(--cBg);
     }
@@ -51,6 +57,7 @@
     // Accent
     & when (@theme[accent1]) {
         --cTxtAccent: @theme[accent1];
+        --cBgSelected: @@theme[accent1];
     }
     & when (@theme[accent2]) {
         --cTxtAccent2: @theme[accent2];

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

@@ -6,5 +6,10 @@
 .bb-1, .bv-1 { border-bottom: solid 1px var(--cLine); }
 .bl-1, .bh-1 { border-left: solid 1px var(--cLine); }
 
+.bt-2, .bv-2 { border-top: solid 2px var(--cLine); }
+.br-2, .bh-2 { border-right: solid 2px var(--cLine); }
+.bb-2, .bv-2 { border-bottom: solid 2px var(--cLine); }
+.bl-2, .bh-2 { border-left: solid 1px var(--cLine); }
+
 .b-0 { border: none; }
 .b-1 { border-top: solid 1px var(--cLine); }

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

@@ -140,8 +140,11 @@
         }
     }
 
+    // Put this one at first because high possibilities we need to override
+    &.al-middle, 
+    &.al-center { justify-content: center; }
+
     &, &.al-top { justify-content: flex-start; }
-    &.al-middle, &.al-center { justify-content: center; }
     &.al-bottom { justify-content: flex-end; }
 
     &.al-left { align-items: flex-start; }

package/src/client/components/Form.ts

@@ -17,7 +17,7 @@ export type { TValidationResult, TSchemaData } from '@common/validation/schema';
 /*----------------------------------
 - TYPES
 ----------------------------------*/
-type TFormOptions<TFormData extends {}> = {
+export type TFormOptions<TFormData extends {}> = {
     data?: Partial<TFormData>,
     submit?: (data: TFormData) => Promise<void>,
     autoValidateOnly?: (keyof TFormData)[],
@@ -128,36 +128,38 @@ export default function useForm<TFormData extends {}>(
         return validated;
     }
 
-    const submit = async (additionnalData: Partial<TFormData> = {}) => {
+    const submit = (additionnalData: Partial<TFormData> = {}) => {
 
         const allData = { ...data, ...additionnalData }
 
         // Validation
         const validated = validate(allData);
         if (validated.errorsCount !== 0) {
-            context.app.handleError(
-                new InputErrorSchema(validated.erreurs)
-            );
-            console.log("validated", validated.erreurs);
-            return;
+            throw new InputErrorSchema(validated.erreurs);
         }
 
-        // Callback
-        let submitResult: any;
-        if (options.submit)
-            submitResult = await options.submit(allData as TFormData);
+        const afterSubmit = (responseData?: any) => {
 
-        // Reset autosaved data
-        if (options.autoSave)
-            localStorage.removeItem('form.' + options.autoSave.id);
+            // Reset autosaved data
+            if (options.autoSave)
+                localStorage.removeItem('form.' + options.autoSave.id);
+    
+            // Update state
+            setState( current => ({
+                ...current,
+                hasChanged: false
+            }));
 
-        // Update state
-        setState( current => ({
-            ...current,
-            hasChanged: false
-        }));
+            return responseData;
+        }
 
-        return submitResult;
+        // Callback
+        if (options.submit)
+            return options.submit(allData as TFormData).then(afterSubmit);
+        else {
+            afterSubmit();
+            return undefined;
+        }
     }
 
     const rebuildFieldsAttrs = (newState: Partial<FormState> = {}) => {

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

@@ -20,7 +20,7 @@ import type { Props } from '.';
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default ({ choice, currentList, onChange, multiple, includeCurrent, format = 'badge' }: {
+export default ({ choice, currentList, onChange, multiple, required, includeCurrent, format = 'badge' }: {
     choice: Choice,
     currentList: Choice[],
     includeCurrent?: boolean,
@@ -30,48 +30,50 @@ export default ({ choice, currentList, onChange, multiple, includeCurrent, forma
     const isCurrent = currentList.some(c => c.value === choice.value);
     if (isCurrent && !includeCurrent) return null;
 
-    const showRemoveButton = multiple;
+    const canUnselect = !required || currentList.length > 1;
+
+    const onClick = () => {
+
+        if (isCurrent && !canUnselect)
+            return;
+
+        onChange( current => multiple 
+            ? (isCurrent 
+                ? currentList.filter(item => item.value !== choice.value) 
+                : [...(current || []), choice]
+            )
+            : isCurrent ? undefined : choice
+        );
+    }
+
+    const btnProps = {
+        selected: isCurrent,
+        onClick,
+        icon: choice.color ? (
+            <span class="pastille" style={{ background: '#' + choice.color }} />
+        ) : choice.icon ? (
+            <i src={choice.icon} />
+        ) : undefined
+    }
 
     return format === 'list' ? (
         <li>
-            <Button icon={isCurrent ? 'check-circle' : undefined} onClick={() => onChange( current => multiple 
-                ? (isCurrent 
-                    ? currentList.filter(item => item.value !== choice.value) 
-                    : [...(current || []), choice]
-                )
-                : isCurrent ? undefined : choice
-            )}>
+            <Button {...btnProps}>
                 {choice.label} 
             </Button>
         </li>
-    ) : isCurrent ? (
-        <li class={"badge bg primary"+  (showRemoveButton ? ' pdr-05' : '')}>
-            {choice.label}
-
-            {showRemoveButton && (
-                <span class="badge xs clickable" onClick={(e) => {
-                    e.stopPropagation();
-                    onChange( current => current.filter( c => c.value !== choice.value))
-                    return false;
-                }}>
-                    x
-                </span>
-            )}
-        </li>
     ) : (
-        <li class={"badge clickable"} onClick={() => {
-            onChange( current => multiple 
-                ? [...(current || []), choice] 
-                : choice
-            );
-        }}>
-            {/*search.keywords ? (
-                <span>
-                
-                    <strong>{search.keywords}</strong>{choice.label.slice( search.keywords.length )}
+        <li>
+            <Button type="secondary" {...btnProps}>
 
-                </span>
-            ) : */choice.label}
+                {choice.label}
+
+                {(isCurrent && canUnselect) && (
+                    <span class="badge xs clickable">
+                        x
+                    </span>
+                )}
+            </Button>
         </li>
     )
 }

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

@@ -16,7 +16,12 @@ import type { TDialogControls } from '@client/components/dropdown';
 - TYPES
 ----------------------------------*/
 
-export type Choice = { label: ComponentChild, value: string }
+export type Choice = { 
+    label: ComponentChild, 
+    value: string,
+    color?: string,
+    icon?: string,
+}
 
 type ChoicesFunc = (search: string) => Promise<Choice[]>
 

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

@@ -165,6 +165,7 @@ export default (props: Props) => {
     ----------------------------------*/
 
     const selectedItems = enableSearch ? currentList : []
+    const selectedItemsValue = selectedItems.map( c => c.value);
 
     const Search = enableSearch && (
         <Input  
@@ -197,6 +198,7 @@ export default (props: Props) => {
                                         currentList={currentList}
                                         onChange={onChange}
                                         multiple={multiple}
+                                        required={required}
                                         includeCurrent 
                                     />
                                 ))}
@@ -214,6 +216,7 @@ export default (props: Props) => {
                                         currentList={currentList}
                                         onChange={onChange}
                                         multiple={multiple}
+                                        required={required}
                                         includeCurrent
                                     />
                                 ))} 
@@ -229,7 +232,7 @@ export default (props: Props) => {
                         )}
                     </div>
                 )} state={popoverState}>
-                    <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>
+                    <Button icon={icon} iconR="angle-down" {...otherProps}>
 
                         {currentList.length === 0 ? <>
                             {title}
@@ -239,69 +242,37 @@ export default (props: Props) => {
                             {currentList[0].label}
                         </>}
 
-                        {errors?.length && (
-                            <div class="bubble bg error bottom">
-                                {errors.join('. ')}
-                            </div>
-                        )}
-
                     </Button>
                 </Popover>
             ) : (
-                <div class="col sp-05">
-                    <div class={className} onMouseDown={() => refInputSearch.current?.focus()}>
-                            
-                        <div class="row al-left wrap pd-1">
-                            
-                            {icon !== undefined && (
-                                <i src={icon} />
-                            )}
-
-                            <div class="col al-left sp-05">
-                                
-                                <label>{title}{isRequired && (
-                                    <span class="fg error">&nbsp;*</span>
-                                )}</label>
-
-                                <div class="row al-left wrap sp-05">
-
-                                    {selectedItems.map( choice => (
-                                        <ChoiceElement format='badge' choice={choice} 
-                                            currentList={currentList}
-                                            onChange={onChange}
-                                            multiple={multiple}
-                                            includeCurrent 
-                                        />
-                                    ))} 
-
-                                    {Search}  
-                                </div>
-                            </div>
-
-                        </div>
-
-                        <div class="pd-1">
-                            <ul class="row al-left wrap sp-05" style={{
-                                maxHeight: '30vh',
-                                overflowY: 'auto'
-                            }}>
-                                {choices.map( choice => (
-                                    <ChoiceElement format='badge' choice={choice} 
-                                        currentList={currentList}
-                                        onChange={onChange}
-                                        multiple={multiple}
-                                        includeCurrent
-                                    />
-                                ))}
-                            </ul>
-                        </div>
-                        
-                    </div>
-                    {errors?.length && (
-                        <div class="bubble bg error bottom">
-                            {errors.join('. ')}
-                        </div>
-                    )}
+                <div class={className} onMouseDown={() => refInputSearch.current?.focus()}>
+
+                    {Search}  
+
+                    <ul class="row al-left wrap sp-05 scrollable mgt-1" style={{
+                        maxHeight: '30vh',
+                    }}>
+                        {selectedItems.map( choice => (
+                            <ChoiceElement format='badge' choice={choice} 
+                                currentList={currentList}
+                                onChange={onChange}
+                                multiple={multiple}
+                                required={required}
+                                includeCurrent 
+                            />
+                        ))}
+
+                        {choices.map( choice => !selectedItemsValue.includes(choice.value) && (
+                            <ChoiceElement format='badge' choice={choice} 
+                                currentList={currentList}
+                                onChange={onChange}
+                                multiple={multiple}
+                                required={required}
+                                includeCurrent
+                            />
+                        ))}
+                    </ul>
+                    
                 </div>
             )}
         </InputWrapper>