5htp-core 0.4.7 → 0.4.8-2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.7",
+	"version": "0.4.8-2",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,6 +13,9 @@
 		"framework"
 	],
 	"dependencies": {
+		"@lexical/headless": "^0.18.0",
+		"@lexical/html": "^0.18.0",
+		"@lexical/react": "^0.18.0",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -44,7 +47,9 @@
 		"intl": "^1.2.5",
 		"iso-639-1": "^2.1.9",
 		"js-cookie": "^3.0.1",
+		"jsdom": "^25.0.1",
 		"jsonwebtoken": "^8.5.1",
+		"lexical": "^0.18.0",
 		"load-script": "^2.0.0",
 		"locale": "^0.1.0",
 		"markdown-it": "^13.0.1",

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

@@ -88,6 +88,8 @@ table {
         td {
 
             cursor: default;
+            max-width: 25em;
+            overflow: hidden;
 
             &.extendable > .row {
 

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

@@ -3,7 +3,7 @@ h2,
 h3 {
 
     font-weight: 600;
-    text-align: inherit;
+    text-align: left; // Align all titles to the left by default
     color: var(--cTxtImportant);
 
     /*.img & {

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

@@ -57,7 +57,10 @@
         justify-content: flex-start;
     }
 
-    &.sep-1 > * + * { border-left: solid 1px var(--cLine); }
+    &.sep-1 {
+        gap: 0;
+        > * + * { border-left: solid 1px var(--cLine); }
+    }
 
     &.menu {
 
@@ -146,7 +149,10 @@
     &.al-right { align-items: flex-end; }
     &, &.al-fill { align-items: stretch; }
 
-    &.sep-1 > * + * { border-top: solid 1px var(--cLine); }
+    &.sep-1 {
+        gap: 0;
+        > * + * { border-top: solid 1px var(--cLine); }
+    }
 
     > .col-1 { align-self: stretch; }
 

package/src/client/components/Dialog/Manager.tsx

@@ -27,7 +27,11 @@ type TParams = { [cle: string]: unknown }
 
 type ComposantToast = React.FunctionComponent<{ close?: any }> & { data?: object };
 
-type TOptsToast = (CardInfos & { content?: ComponentChild })
+type TOptsToast = (CardInfos & { 
+    content?: ComponentChild,
+    data?: {},
+    className?: string,
+})
 
 type TOnCloseCallback<TReturnType extends any> = (returnedValue: TReturnType) => void
 
@@ -43,16 +47,25 @@ export type TDialogControls = {
     then: (cb: TOnCloseCallback<any>) => any
 }
 
+type TDialogContentArg = ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast;
+
+type TDialogShowArgs = [
+    // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
+    Content: TDialogContentArg,
+    paramsInit?: TParams
+] | [
+    title: string,
+    // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
+    Content: TDialogContentArg,
+    paramsInit?: TParams
+]
+
 type DialogActions = {
 
     setToasts: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
     setModals: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
 
-    show: (
-        // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
-        Content: ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast,
-        paramsInit?: TParams
-    ) => TDialogControls,
+    show: (...args: TDialogShowArgs ) => TDialogControls,
 
     confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No') => TDialogControls,
 
@@ -73,26 +86,33 @@ type DialogActions = {
 let idA: number = 0;
 export const createDialog = (app: Application, isToast: boolean): DialogActions => {
 
-    const show = <TReturnType extends any = true>(
-        // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
-        Content: ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast,
-        paramsInit?: TParams
-    ): TDialogControls => {
+    const show = <TReturnType extends any = true>( ...args: TDialogShowArgs ): TDialogControls => {
 
         let onClose: TOnCloseCallback<TReturnType>;
         const id = idA++;
 
+        // Parse args
+        let title: string | undefined; 
+        let Content: TDialogContentArg;
+        let paramsInit: TParams = {};
+        if (typeof args[0] === 'string') {
+            [title, Content, paramsInit] = args;
+        } else {
+            [Content, paramsInit] = args;
+        }
+
+        // Set instance management function
         const setDialog = isToast
             ? instance.setToasts
             : instance.setModals;
 
+        // Close function
         const close = (retour: TReturnType) => {
 
             setDialog(q => q.filter(m => m.id !== id))
 
             if (onClose !== undefined)
                 onClose(retour);
-
         };
 
         const promise = new Promise(async (resolve: TOnCloseCallback<TReturnType>) => {
@@ -101,33 +121,49 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
             let render: ComponentChild;
             let propsRendu: CardInfos = {
                 ...paramsInit,
-                close: close,
-                data: {}
-            };
+                close: close
+            }; 
+            
+            // modal.show( import('./modalSupprimer') )
+            //  -> Fetch component
+            if (Content.constructor === Promise)
+                Content = (await Content).default;
+
+            // modal.show('Supprimer', import('./modalSupprimer'))
+            //  -> Shortcut for modal.show({ title: 'Suoorimer', content: <Component> })
+            if (title !== undefined) {
+                Content = {
+                    title: title,
+                    content: Content
+                }
+            }
 
-            // toast.show({ title: 'supprimer', content: <>...</> })
+            // modal.show({ title: 'supprimer', content: <>...</> })
             if (Content.constructor === Object) {
 
-                const { content, ...propsToast } = Content as TOptsToast;
+                const { content: CardContent, data = {}, ...propsToast } = Content as TOptsToast;
+                
+                let cardContent: ComponentChild;
+                if (typeof CardContent === 'function') {
+                    cardContent = <CardContent {...propsRendu} {...data} />
+                    propsToast.boutons = null; // Component content = advanced content = should include buttons
+                } else {
+                    cardContent = CardContent;
+                }
+                
                 render = (
-                    <Card {...propsRendu} children={content} {...propsToast} isToast={isToast} />
+                    <Card {...propsRendu} {...propsToast} isToast={isToast}>
+                        {cardContent}
+                    </Card>
                 )
 
-            // toast.show( import('./modalSupprimer') )
-            // toast.show( ToastSupprimer )
+            // modal.show( ToastSupprimer )
+            //  -> Content is a component rendering a Card
             } else {
 
-                let DialogCard;
-                if (Content.constructor === Promise) {
-                    DialogCard = (await Content).default;
-                } else {
-                    DialogCard = Content as typeof Card;
-                }
-
                 render = (
-                    <DialogCard {...propsRendu} isToast={isToast} />
+                    <Content {...propsRendu} isToast={isToast} />
                 )
-
             }
 
             // Chargeur de données

package/src/client/components/Dialog/card.tsx

@@ -27,6 +27,7 @@ export type Props = {
     cover?: string,
     icon?: ComponentChild,
     title?: string | ComponentChild,
+    className?: string,
 
     children?: ComponentChild,
     isToast?: boolean,
@@ -49,6 +50,7 @@ export default ({
     cover,
     icon, 
     title, 
+    className = '',
 
     children, 
     isToast,
@@ -149,7 +151,7 @@ export default ({
             
         </div>
     ) : (
-        <div class={"card pd-2 col al-top"} style={width === undefined 
+        <div class={"card pd-2 col al-top " + className} style={width === undefined 
             ? {}
             : { minWidth: width + "px", maxWidth: width + "px" }
         }>

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

@@ -78,9 +78,8 @@
         > .card {
 
             position: relative;
-            max-height: 80vh;
             min-width: 300px;
-            max-height: 100vh;
+            max-height: 90vh;
             box-shadow: none;
             overflow-y: auto;
 

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

@@ -18,9 +18,7 @@ import type { TDialogControls } from '@client/components/dropdown';
 
 export type Choice = { label: ComponentChild, value: string }
 
-export type Choices = Choice[]
-
-type ChoicesFunc = (search: string) => Promise<Choices>
+type ChoicesFunc = (search: string) => Promise<Choice[]>
 
 export type Props = (
     {
@@ -37,10 +35,14 @@ export type Props = (
         validator?: StringValidator
     }
 ) & {
-    choices: Choices | ChoicesFunc,
+    choices: Choice[] | ChoicesFunc | string[],
     enableSearch?: boolean,
     required?: boolean,
     noneSelection?: false | string,
+    addNew?: (search?: string) => Promise<Choice>
+}
+
+type SelectorProps = Props & {
     currentList: Choice[],
     refDropdown?: RefObject<TDialogControls>
 }
@@ -67,7 +69,7 @@ export default React.forwardRef<HTMLDivElement, Props>(({
     currentList,
     refDropdown,
     ...otherProps
-}: Props, ref) => {
+}: SelectorProps, ref) => {
 
    
 

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

@@ -8,6 +8,7 @@ import React from 'react';
 // Core
 import { Props as DropdownProps } from '@client/components/dropdown';
 import { Popover, Button, Input } from '@client/components';
+import { InputWrapper, InputBaseProps } from '@client/components/inputv3/base';
 
 // Specific
 import { 
@@ -21,10 +22,8 @@ import ChoiceElement from './ChoiceElement';
 - TYPES
 ----------------------------------*/
 
-export type Props = SelectorProps & {
-    dropdown: boolean | DropdownProps,
-    title: string,
-    errors?: string[],
+export type Props = SelectorProps & Omit<InputBaseProps<Choice>, 'value'> & {
+    dropdown?: boolean | DropdownProps,
 }
 
 export type { Choice } from './ChoiceSelector';
@@ -51,24 +50,28 @@ const ensureChoice = (choice: Choice | string, choices: Choice[]): Choice => {
 /*----------------------------------
 - COMONENT
 ----------------------------------*/
-export default ({ 
-    // Input basics
-    title, 
-    errors,
-    icon,
-    required,
-    validator, 
-
-    // Choice selection
-    choices: initChoices, 
-    noneSelection, 
-    enableSearch, 
-    value: current, 
-    onChange: onChangeCallback, 
-    multiple, 
-    dropdown,
-    ...otherProps
-}: Props) => {
+export default (props: Props) => {
+
+    let {
+        // Input basics
+        title,
+        errors,
+        icon,
+        required,
+        validator,
+        wrapper = true,
+
+        // Choice selection
+        choices: initChoices,
+        noneSelection,
+        enableSearch,
+        value: current,
+        onChange: onChangeCallback,
+        multiple,
+        dropdown,
+        addNew,
+        ...otherProps
+    } = props;
 
     /*----------------------------------
     - INIT
@@ -77,8 +80,10 @@ export default ({
     const popoverState = React.useState(false);
 
     const choicesViaFunc = typeof initChoices === 'function';
-    if (choicesViaFunc && enableSearch === undefined)
+    if (choicesViaFunc)
         enableSearch = true;
+    else if (typeof initChoices[0] === 'string')
+        initChoices = initChoices.map( c => ({ label: c, value: c }));
 
     const refInputSearch = React.useRef<HTMLInputElement | null>(null);
 
@@ -144,6 +149,17 @@ export default ({
         }
     }
 
+    const clickAddNew = () => addNew(search.keywords).then( newItem => {
+
+        if (!newItem)
+            return;
+
+        onChange( current => multiple
+            ? [...(current || []), newItem]
+            : newItem
+        )
+    })
+
     /*----------------------------------
     - RENDER
     ----------------------------------*/
@@ -152,126 +168,142 @@ export default ({
 
     const Search = enableSearch && (
         <Input  
+            icon="search"
             placeholder="Type your search here"
             value={search.keywords} 
             onChange={keywords => setSearch(s => ({ ...s, loading: true, keywords }))} 
             inputRef={refInputSearch}
+            wrapper={false}
+            className="bg white"
         />
     )
 
-    return dropdown ? (
-        <Popover {...(dropdown === true ? {
-            width: '200px'
-        } : dropdown)} content={(
-            <div class="card bg white col al-top">
-
-                {Search} 
-
-                {selectedItems.length !== 0 && (
-                    <ul class="row al-left wrap sp-05">
-                        {selectedItems.map( choice => (
-                            <ChoiceElement format='badge' choice={choice} 
-                                currentList={currentList}
-                                onChange={onChange}
-                                multiple={multiple}
-                                includeCurrent 
-                            />
-                        ))}
-                    </ul>
-                )}
-
-                {search.loading ? (
-                    <div class="row al-center h-2">
-                        <i src="spin" />
-                    </div>
-                ) : (
-                   <ul class="menu col">
-                        {choices.map( choice => (
-                            <ChoiceElement format='list' choice={choice} 
-                                currentList={currentList}
-                                onChange={onChange}
-                                multiple={multiple}
-                                includeCurrent
-                            />
-                        ))} 
-                    </ul>
-                )} 
-            </div>
-        )} state={popoverState}>
-            <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>
-
-                {currentList.length === 0 ? <>
-                    {title}
-                </> : multiple ? <>
-                    {title} <span class="badge s bg accent">{currentList.length}</span> 
-                </> : <>
-                    {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} />
-                    )}
+    return (
+        <InputWrapper {...props}>
+            {dropdown ? (
+                <Popover {...(dropdown === true ? {
+                    width: '200px',
+                } : dropdown)} content={(
+                    <div class="bg white col al-top">
 
-                    <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 class="bb-1" style={{ position: 'sticky', top: 0, zIndex: 5 }}>
+                            {Search}
                         </div>
+
+                        {(multiple && selectedItems.length !== 0) && (
+                            <ul class="row al-left wrap sp-05">
+                                {selectedItems.map( choice => (
+                                    <ChoiceElement format='badge' choice={choice} 
+                                        currentList={currentList}
+                                        onChange={onChange}
+                                        multiple={multiple}
+                                        includeCurrent 
+                                    />
+                                ))}
+                            </ul>
+                        )}
+
+                        {search.loading ? (
+                            <div class="row al-center h-2">
+                                <i src="spin" />
+                            </div>
+                        ) : (
+                            <ul class="menu col">
+                                {choices.map( choice => (
+                                    <ChoiceElement format='list' choice={choice} 
+                                        currentList={currentList}
+                                        onChange={onChange}
+                                        multiple={multiple}
+                                        includeCurrent
+                                    />
+                                ))} 
+                            </ul>
+                        )} 
+
+                        {addNew && (
+                            <div class="col" style={{ position: 'sticky', bottom: '0px', zIndex: 5 }}>
+                                <Button type="primary" icon="plus" onClick={clickAddNew}>
+                                    Add new
+                                </Button> 
+                            </div>   
+                        )}
                     </div>
+                )} state={popoverState}>
+                    <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>
+
+                        {currentList.length === 0 ? <>
+                            {title}
+                        </> : multiple ? <>
+                            {title} <span class="badge s bg accent">{currentList.length}</span> 
+                        </> : <>
+                            {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>
 
-                <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 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>
             )}
-        </div>
+        </InputWrapper>
     )
 }

package/src/client/components/index.ts

@@ -27,4 +27,5 @@ export { default as Select } from './Select';
 export { default as Input } from './inputv3';
 export { default as Checkbox } from './inputv3/Checkbox';
 export { default as File } from './inputv3/file';
-export { default as DateRangeInput } from './inputv3/Date';
+export { default as DateRangeInput } from './inputv3/Date';
+export { default as Rte } from './inputv3/Rte';