5htp-core 0.5.9 → 0.6.0

package/client/components/Rte/ToolbarPlugin/BlockFormat.tsx

@@ -33,7 +33,7 @@ import {
 
 // Core
 import Button from '@client/components/Button';
-import DropDown from '@client/components/dropdown';
+import DropDown from '@client/components/DropDown';
 
 /*----------------------------------
 - TYPES

package/client/components/Rte/ToolbarPlugin/ElementFormat.tsx

@@ -14,7 +14,7 @@ import {
 
 // Core
 import Button from '@client/components/Button';
-import DropDown from '@client/components/dropdown';
+import DropDown from '@client/components/DropDown';
 
 /*----------------------------------
 - TYPES
@@ -85,8 +85,10 @@ export default function ElementFormatDropdown({
     const formatOption = FormatOptions.find((option) => option.value === currentValue) || FormatOptions[0];
 
     return (
-        <DropDown disabled={disabled} icon={isRTL ? formatOption.iconRTL : formatOption.icon} size="s" 
-            label={formatOption.label}
+        <DropDown disabled={disabled} 
+            icon={isRTL ? formatOption.iconRTL : formatOption.icon} 
+            size="s" 
+            hint={formatOption.label}
             popover={{ tag: 'li' }}
         >
             {FormatOptions.map((option) => (

package/client/components/Rte/ToolbarPlugin/index.tsx

@@ -510,7 +510,7 @@ export default function ToolbarPlugin({
             )}
             
             {blockType === 'code' ? (
-                <DropDown label={getLanguageFriendlyName(codeLanguage)}
+                <DropDown size="s" label={getLanguageFriendlyName(codeLanguage)}
                     disabled={!isEditable}
                     icon="code"
                 >
@@ -591,7 +591,7 @@ export default function ToolbarPlugin({
 
                     <DropDown popover={{ tag: 'li' }} icon="font" size="s"
                         disabled={!isEditable}
-                        label="Formatting options for additional text styles"
+                        hint="Formatting options for additional text styles"
                     >
 
                         <Button icon="strikethrough" size="s"
@@ -640,8 +640,8 @@ export default function ToolbarPlugin({
                             <DropDown popover={{ tag: 'li' }}
                                 disabled={!isEditable}
                                 size="s"
-                                label="Insert"
-                                title="Insert specialized editor node"
+                                icon="plus-circle"
+                                hint="Insert specialized editor node"
                             >
 
                                 <Button icon="horizontal-rule" size="s" onClick={() => {

package/client/components/Select.tsx

@@ -5,41 +5,44 @@
 // Npm
 import React from 'react';
 import { 
-    Select as MantineSelect, 
     SelectProps, 
     MultiSelect as MantineMultiSelect, 
     ComboboxItem,
-
-    Menu,
-    Button
+    Menu
 } from '@mantine/core';
 import Input from '@client/components/Input';
 
 // Core
-import { Props as DropdownProps } from '@client/components/dropdown';
 import { useMantineInput, InputBaseProps } from '@client/components/utils';
+import Button, { Props as ButtonProps } from '@client/components/Button';
+import Popover, { Props as PopoverProps } from '@client/components/containers/Popover';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
 export type Props = SelectProps & InputBaseProps<ComboboxItem> & {
-    
+    popoverProps?: PopoverProps
 }
 
 export type Choice = ComboboxItem;
 
-const ensureChoice = (choice: ComboboxItem | string, choices: ComboboxItem[]): ComboboxItem => {
+const ensureChoice = (
+    choice: ComboboxItem | string, 
+    choices: ComboboxItem[],
+    current: ComboboxItem[]
+): ComboboxItem => {
 
     // Allready a choice
-    if (typeof choice === 'object' && choice.label) {
+    if (typeof choice === 'object')
         return choice;
-    }
+
+    // Ensure current is an array of choices
+    const allChoices = [...choices, ...current];
 
     // Find the choice
-    const found = choices.find( c => c.value === choice);
-    if (found)
-        return found;
+    const found = allChoices.find( c => c.value === choice );
+    if (found) return found;
 
     // Create a new choice
     return {
@@ -60,28 +63,23 @@ export default (initProps: Props) => {
         onChange, value: current,
         required
     }, {
-        multiple, choices: initChoices, enableSearch,
+        multiple, choices: initChoices, enableSearch, popoverProps,
         ...props
     }] = useMantineInput<Props, string|number>(initProps);
 
-    const initRef = React.useRef<boolean>();
+    const currentArray = (Array.isArray(current) 
+        ? current 
+        : current ? [current] : []
+    ).map(c => ensureChoice(c, [], []));
 
     const choicesViaFunc = typeof initChoices === 'function';
     if (choicesViaFunc)
         enableSearch = true;
     else 
-        initChoices = initChoices?.map( c => ensureChoice(c, []) ) || [];
-
-    if (enableSearch)
-        props.searchable = true;
+        initChoices = initChoices?.map( c => ensureChoice(c, [], currentArray) ) || [];
 
     let [choices, setChoices] = React.useState<ComboboxItem[]>( choicesViaFunc 
-        ? (Array.isArray(current) 
-            ? current.map( c => ensureChoice(c, []) )
-            : current 
-                ? [ensureChoice(current, [])]
-                : []
-        ) || []
+        ? currentArray.map( c => ensureChoice(c, [], currentArray) )
         : initChoices
     );
 
@@ -98,71 +96,70 @@ export default (initProps: Props) => {
     - ACTIONS
     ----------------------------------*/
 
-    const valueToChoice = (value: string) => choices.find(c => c.value === value);
-
     React.useEffect(() => {
 
         if (choicesViaFunc && opened) {
+
+            const keywords = search.keywords === current?.label 
+                ? undefined 
+                : search.keywords;
+
             //setSearch(s => ({ ...s, loading: true }));
-            initChoices(search.keywords).then((searchResults) => {
+            initChoices(keywords).then((searchResults) => {
                 //setSearch(s => ({ ...s, loading: false }))
                 setChoices(searchResults);
             })
         }
 
-        initRef.current = true;
-
     }, [
         opened,
-        //search.keywords,
+        search.keywords,
         // When initChoices is a function, React considers it's always different
         // It avoids the choices are fetched everytimle the parent component is re-rendered
         typeof initChoices === 'function' ? true : initChoices
     ]);
 
-    let Component: typeof MantineSelect | typeof MantineMultiSelect;
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+
     if (multiple) {
-        Component = MantineMultiSelect;
-        props.value = current ? current.map( c => ensureChoice(c, choices).value ) : [];
-        props.onChange = (value: string[]) => onChange( value.map(valueToChoice) );
+
+        props.value = current 
+            ? current.map( c => ensureChoice(c, choices, currentArray).value ) 
+            : [];
+
+        props.onChange = (value: string[]) => {
+            onChange( value.map(value => ensureChoice(value, choices, currentArray)) )
+        };
+
     } else {
-        Component = MantineSelect;
-        props.value = current ? ensureChoice(current, choices).value : '';
-        props.onChange = (value: string) => onChange( valueToChoice(value) );
+
+        props.value = current 
+            ? [ensureChoice(current, choices, currentArray).value] 
+            : [];
+
+        props.onChange = (value: string[]) => {
+
+            setOpened(false);
+
+            onChange( value.length > 0 
+                ? ensureChoice(value[value.length - 1], choices, currentArray) 
+                : undefined 
+            )
+        };
     }   
 
-    /*----------------------------------
-    - RENDER
-    ----------------------------------*/
     if (minimal) {
         return (
-            <Menu width={300} opened={opened} onChange={setOpened} 
-                trapFocus withArrow shadow='lg' 
-                closeOnItemClick={!multiple}>
-                <Menu.Target>
-                    <Button variant="subtle" 
-                        leftSection={(
-                            (current && multiple) ? (
-                                <span class="badge bg info s">
-                                    {current.length}
-                                </span>
-                            ) : null
-                        )} 
-                        rightSection={<i src="angle-down" />} 
-                        onClick={() => setOpened((o) => !o)} >
-                            
-                        {props.label || props.placeholder}
-
-                    </Button>
-                </Menu.Target>
-                <Menu.Dropdown>
-
+            <Popover {...(popoverProps || {})} state={[opened, setOpened]} content={(
+                <div class="card col menu floating">
                     {enableSearch && <>
+
                         <Input title="Search" value={search.keywords} 
                             wrapper={false} minimal icon="search"
                             onChange={v => setSearch(s => ({ ...s, keywords: v }))} />
 
-                        <Menu.Divider />
                     </>}
 
                     {choices.map(choice => {
@@ -172,8 +169,9 @@ export default (initProps: Props) => {
                             : props.value === choice.value;
 
                         return (
-                            <Menu.Item key={choice.value} 
-                                rightSection={isSelected ? <i src="check" /> : null}
+                            <Button key={choice.value} 
+                                size="s"
+                                suffix={isSelected ? <i src="check" /> : null}
                                 onClick={() => onChange( multiple 
                                     ? (isSelected 
                                         ? current.filter(c => c.value !== choice.value)
@@ -185,28 +183,56 @@ export default (initProps: Props) => {
                                     )
                                 )}>
                                     {choice.label}
-                            </Menu.Item>
+                            </Button>
                         )
                     })}
-                </Menu.Dropdown>
-            </Menu>
+                </div>
+            )}>
+                <Button
+                    prefix={(
+                        (multiple && current?.length) ? (
+                            <span class="badge bg info s">
+                                {current.length}
+                            </span>
+                        ) : icon ? <i src={icon} /> : null
+                    )} 
+                    suffix={iconR ? <i src={iconR} /> : <i src="angle-down" />} 
+                    onClick={() => setOpened((o) => !o)}>
+                        
+                    {props.label || props.placeholder}
+
+                </Button>
+            </Popover>
         )
 
     } else {
         return (
-            <Component 
+            <MantineMultiSelect 
                 {...props} 
     
-                data={choices}
+                data={[
+                    {
+                        group: 'Search results',
+                        // Exclude the choices that are already selected
+                        items: choices.filter(c => !props.value.includes(c.value))
+                    },
+                    {
+                        group: 'Selected',
+                        items: currentArray
+                    }
+                ]}
                 nothingFound={search.loading ? 'Loading...' : props || 'No options found'}
                 comboboxProps={{
                     withArrow: false
                 }}
     
+                searchable={enableSearch}
                 clearable={!required}
                 required={required}
                 allowDeselect={!required}
+                checkIconPosition="right"
     
+                dropdownOpened={opened}
                 onDropdownOpen={() => setOpened(true)}
                 onDropdownClose={() => setOpened(false)}
                 onSearchChange={(keywords) => setSearch(s => ({ ...s, keywords }))}

package/client/components/Table/index.tsx

@@ -34,6 +34,7 @@ export type Props<TRow> = {
     // Interactions
     sort?: TSortOptions,
     onSort?: (columnId: string | null, order: TSortOptions["order"]) => void,
+    onCellClick?: (row: TRow) => void,
 
     selection?: [TRow[], React.SetStateAction<TRow[]>],
     maxSelection?: number,
@@ -58,6 +59,7 @@ type TSortOptions = {
 export default function Liste<TRow extends TDonneeInconnue>({
     stickyHeader, onSort, sort: sorted,
     data: rows, setData, empty,
+    onCellClick,
     selection: selectionState, maxSelection,
     columns, ...props
 }: Props<TRow>) {
@@ -136,32 +138,41 @@ export default function Liste<TRow extends TDonneeInconnue>({
                     }
                 }
 
-                const isCurrentlySorted = sort && sorted && sorted.id === sort.id;
-                const isSortable = sort && onSort;
-                if (isSortable) {
-                    classe += ' clickable';
-                    cellProps.onClick = () => {
-                        if (isCurrentlySorted)
-                            onSort(null, sort.order);
-                        else
-                            onSort(sort.id, sort.order);
+                if (iDonnee === 0) {
+
+                    const headerProps = { className: '', ...cellProps };
+                    const isCurrentlySorted = sort && sorted && sorted.id === sort.id;
+                    const isSortable = sort && onSort;
+                    if (isSortable) {
+                        headerProps.className += ' clickable';
+                        headerProps.onClick = () => {
+                            if (isCurrentlySorted)
+                                onSort(null, sort.order);
+                            else
+                                onSort(sort.id, sort.order);
+                        }
                     }
+                    
+                    renduColonnes.push(
+                        <th {...headerProps}>
+                            <div class="row sp-btw">
+                                
+                                {isSortable ? (
+                                    <a>{label}</a>
+                                ) : label}
+    
+                                {isCurrentlySorted && (
+                                    <i src={sort.order === "asc" ? "caret-up" : "caret-down"} />
+                                )}
+                            </div>
+                        </th>
+                    );
                 }
 
-                if (iDonnee === 0) renduColonnes.push(
-                    <th class={classe} {...cellProps}>
-                        <div class="row sp-btw">
-                            
-                            {isSortable ? (
-                                <a>{label}</a>
-                            ) : label}
-
-                            {isCurrentlySorted && (
-                                <i src={sort.order === "asc" ? "caret-up" : "caret-down"} />
-                            )}
-                        </div>
-                    </th>
-                );
+                if (onCellClick) {
+                    cellProps.onClick = () => onCellClick(row);
+                    classe += ' clickable';
+                }
 
                 let render: ComponentChild;
                 if (Array.isArray(cell)) {

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

@@ -113,7 +113,7 @@ export default (props: Props) => {
         renderedContent = React.cloneElement( 
             content, 
             {
-                className: 'card popover pd-1' 
+                className: 'card popover' 
                     + (position ? ' pos_' + position.cote : '')
                     + ' ' + (content.props.className || ''),
 

package/client/components/containers/Popover/popover.less

@@ -29,7 +29,7 @@
 
     list-style: none;
     text-align: left;
-    line-height: 2rem;
+    //line-height: 2rem;  Why ?
 
     overflow: auto;
 

package/client/components/index.ts

@@ -31,7 +31,7 @@ export {
     UnstyledButton,
     VisuallyHidden,
     Paper,
-    //Popover,
+    Popover as PopoverMantine,
     ActionIcon,
     CloseButton,
     Group,
@@ -103,9 +103,10 @@ export {
     Progress,
     Radio,
     Rating,
+    RangeSlider,
     RingProgress,
     SegmentedControl,
-    //Select,
+    Select as SelectMantine,
     SemiCircleProgress,
     SimpleGrid,
     Skeleton,

package/client/components/utils.tsx

@@ -57,7 +57,7 @@ const sizeAdapter = {
 }
 
 export function useMantineInput<TProps extends __BaseInputProps & InputBaseProps<any>, TValue>({
-    title, wrapper, hint, errors, icon, iconR, minimal, onChange, value, ...props
+    title, wrapper, hint, errors, icon, iconR, prefix, suffix, minimal, onChange, value, ...props
 }: InputBaseProps<TValue> & TProps): [
     InputBaseProps<any>,
     TProps
@@ -74,11 +74,11 @@ export function useMantineInput<TProps extends __BaseInputProps & InputBaseProps
         props.description = hint;
     } 
     // Prefix
-    if (props.leftSection === undefined && icon !== undefined)
-        props.leftSection = <i src={icon} />;
+    if (props.leftSection === undefined)
+        props.leftSection = icon !== undefined ? <i src={icon} /> : prefix;
     // Suffix
-    if (props.rightSection === undefined && iconR !== undefined)
-        props.rightSection = <i src={iconR} />;
+    if (props.rightSection === undefined)
+        props.rightSection = iconR !== undefined ? <i src={iconR} /> : suffix;
     
     // Errors
     if (errors?.length)

package/client/index.ts

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

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

@@ -191,7 +191,6 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
         // Reset scroll
         window.scrollTo(0, 0);
         // Should be called AFTER rendering the page (so after the state change)
-        console.log("CHANGE PAGE", currentPage);
         currentPage?.updateClient();
         // Scroll to the selected content via url hash
         restoreScroll(currentPage);

package/client/services/router/index.tsx

@@ -55,7 +55,6 @@ const LogPrefix = '[router]'
 
 // Client router can handle Client requests AND Server requests (for pages only)
 export type { default as ClientResponse, TRouterContext } from "./response";
-export { Link } from './components/Link';
 
 export type Router = ClientRouter | ServerRouter;
 
@@ -128,7 +127,7 @@ type THookName = 'page.change' | 'page.changed' | 'page.rendered'
 
 type Config<TAdditionnalContext extends {} = {}> = {
     preload: string[], // List of globs
-    context: (context: ClientContext, router: ClientRouter) => TAdditionnalContext,
+    context: (context: {}, router: ClientRouter) => TAdditionnalContext,
 }
 
 /*----------------------------------

package/client/services/router/request/api.ts

@@ -21,7 +21,7 @@ import FileToUpload from '@client/components/File/FileToUpload';
 - TYPES
 ----------------------------------*/
 
-const debug = true;
+const debug = false;
 
 export type Config = {
 
@@ -86,7 +86,7 @@ export default class ApiClient implements ApiClientService {
         else if (typeof ids === 'string')   
             ids = [ids];
 
-        console.log("[api] Reload data", ids, params, page.fetchers);
+        debug && console.log("[api] Reload data", ids, params, page.fetchers);
 
         for (const id of ids) {
 
@@ -97,7 +97,7 @@ export default class ApiClient implements ApiClientService {
             if (params !== undefined)
                 fetcher.data = { ...(fetcher.data || {}), ...params };
 
-            console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
+            debug && console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
 
             this.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
 
@@ -227,7 +227,7 @@ export default class ApiClient implements ApiClientService {
 
             } else if (options.encoding === 'multipart') {
 
-                console.log("[api] Multipart request", data);
+                debug && console.log("[api] Multipart request", data);
                 // Browser will automatically choose the right headers
                 config.body = toMultipart(data);
 

package/common/errors/index.tsx

@@ -187,6 +187,12 @@ export class NotFound extends CoreError {
     public static msgDefaut = "The resource you asked for was not found.";
 }
 
+export class Gone extends CoreError {
+    public http = 410;
+    public title = "Gone";
+    public static msgDefaut = "The resource you asked for has been removed.";
+}
+
 export class RateLimit extends CoreError {
     public http = 429;
     public title = "You're going too fast";

package/common/router/index.ts

@@ -2,6 +2,9 @@
 - DEPENDANCES
 ----------------------------------*/
 
+// Npm
+import zod from 'zod';
+
 // types
 import type {
     default as ClientRouter,
@@ -42,6 +45,7 @@ export type TRoute<RouterContext extends TClientOrServerContextForPage = TClient
     path: string,
 
     // Execute
+    schema?: zod.ZodSchema,
     controller: TRouteController<RouterContext>,
     options: TRouteOptions
 } & (
@@ -67,7 +71,8 @@ export type TErrorRoute<RouterContext extends TClientOrServerContextForPage = TC
 export type TAnyRoute<RouterContext extends TClientOrServerContextForPage = TClientOrServerContextForPage> =
     TRoute<RouterContext> | TErrorRoute<RouterContext>
 
-export type TClientOrServerContext = ClientRouterContext | ServerRouterContext;
+// ClientRouterContext already includes server context
+export type TClientOrServerContext = ClientRouterContext;// | ServerRouterContext;
 
 export type TClientOrServerContextForPage = With<TClientOrServerContext, 'page'>
 
@@ -90,10 +95,11 @@ export type TRouteOptions = {
     accept?: string,
     raw?: boolean, // true to return raw data
     auth?: TUserRole | boolean,
-    canonicalParams?: string[],
+    redirectLogged?: string, // Redirect to this route if auth: false and user is logged
 
     // Rendering
     static?: boolean,
+    canonicalParams?: string[], // For SEO + unique ID for static cache
     layout?: false | string, // The nale of the layout
 
     // To cleanup

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.5.9",
+	"version": "0.6.0",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -73,7 +73,6 @@
 		"prettier": "^3.3.3",
 		"react-scrollbars-custom": "^4.0.27",
 		"react-slider": "^2.0.1",
-		"react-textarea-autosize": "^8.3.3",
 		"regenerator-runtime": "^0.13.9",
 		"request": "^2.88.2",
 		"slugify": "^1.6.6",

package/server/app/commands.ts

@@ -48,31 +48,12 @@ export type Services = {
 /*----------------------------------
 - SERVICE
 ----------------------------------*/
-export default class CommandsManager extends Service<Config, Hooks, Application, Services> {
+export default class CommandsManager extends Service<Config, Hooks, Application> {
 
     public priority = 2 as 2;
 
     public commandsIndex: CommandsList = {}
-
-    /*----------------------------------
-    - LIFECYCLE
-    ----------------------------------*/
-
-    protected async start() {
-        
-    }
-
-    protected async ready() {
-
-    }
-
-    protected async shutdown() {
-
-    }
-
-    /*----------------------------------
-    - DEFINITIONS
-    ----------------------------------*/
+    
     public command<TArgs extends any[]>( 
         ...args: (
             [name: string, description: string, childrens: Command[]]