5htp-core 0.5.9-6 → 0.5.9-7

package/client/app/component.tsx

@@ -69,6 +69,7 @@ export default function App({ context }: {
                     SegmentedControl: { defaultProps: { size: 'md' } },
                     Menu: { defaultProps: { size: 'md' } },
                     MenuItem: { defaultProps: { size: 'md' } },
+                    Autocomplete: { defaultProps: { size: 'md' } },
                     // Add any others you use...
                 },
             }} withGlobalStyles withNormalizeCSS>

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

@@ -18,6 +18,7 @@
     font-size: 1em;
     padding: 0 1.5em;
     height: @sizeComponent;
+    min-height: @sizeComponent;
 
     // Shape
     border-radius: @radius;

package/client/assets/css/components/input.less

@@ -49,10 +49,6 @@ form {
     label {
         font-weight: 500;
         color: var(--cTxtBase);
-
-        + p.desc {
-            margin: 0;
-        }
     }
 
     .row.champs,

package/client/assets/css/components/mantine.less

@@ -29,7 +29,11 @@
     --mantine-SegmentedControl-height: @sizeComponent;
 }
 
-
+.mantine-TextInput-wrapper textarea {
+    --input-line-height: 1.5;
+    --input-padding-y: @spacing;
+    --input-padding-x: @spacing;
+}
 
 
 

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

@@ -47,6 +47,7 @@
 
     line-height: 1.5;
     text-align: left;
+    white-space: nowrap; // Don't line break in badges
     
     padding: 0.4em 0.8em;
 

package/client/assets/css/core.less

@@ -78,23 +78,25 @@
 html {
 	font-size: @sTxtPage;
     line-height: 1.25em;
-	font-weight: 400;
 }
 
 * {
     box-sizing: border-box;
     outline: none;
     font-size: 1em;
+	font-weight: 500;
     padding: 0;
     margin: 0;
-    // Avoids flexbox childrens to overflw parent
-    min-width: 0;
     
     &, &:hover, &:focus {
         -webkit-tap-highlight-color: transparent;
     }
 }
 
+p {
+    font-weight: 400;
+}
+
 body {
     // Pas propre. A eviter (ex: perturbation smooth scroll
     //overflow-x: hidden;

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

@@ -42,15 +42,6 @@ p, .p {
     margin: 0; // Overwrite browser defaults
 }
 
-.desc {
-    font-size: 0.8rem;
-    color: var(--cTxtDesc);
-
-    i {
-        height: 1.16rem;
-    }
-}
-
 // Gestion des dépassements
 //.bouton, // Empêche le label d'être affiché en mode icone only
 .bouton > .label /* <Select /> */ {

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

@@ -177,6 +177,11 @@
 .row, 
 .col {
 
+    > * {
+        // Avoids flexbox childrens to overflw parent
+        min-width: 0;
+    }
+
     &.sp-btw { justify-content: space-between; }
     &.sp-ar { justify-content: space-around; }
     &.wrap { flex-wrap: wrap; }

package/client/components/Select.tsx

@@ -8,21 +8,21 @@ import {
     SelectProps, 
     MultiSelect as MantineMultiSelect, 
     ComboboxItem,
-
-    Menu,
-    Button
+    Menu
 } from '@mantine/core';
 import Input from '@client/components/Input';
 
 // Core
 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;
@@ -37,8 +37,11 @@ const ensureChoice = (
     if (typeof choice === 'object')
         return choice;
 
+    // Ensure current is an array of choices
+    const allChoices = [...choices, ...current];
+
     // Find the choice
-    const found = [...choices, ...current].find( c => c.value === choice );
+    const found = allChoices.find( c => c.value === choice );
     if (found) return found;
 
     // Create a new choice
@@ -60,11 +63,14 @@ export default (initProps: Props) => {
         onChange, value: current,
         required
     }, {
-        multiple, choices: initChoices, enableSearch,
+        multiple, choices: initChoices, enableSearch, popoverProps,
         ...props
     }] = useMantineInput<Props, string|number>(initProps);
 
-    const currentArray = Array.isArray(current) ? current : current ? [current] : [];
+    const currentArray = (Array.isArray(current) 
+        ? current 
+        : current ? [current] : []
+    ).map(c => ensureChoice(c, [], []));
 
     const choicesViaFunc = typeof initChoices === 'function';
     if (choicesViaFunc)
@@ -146,33 +152,14 @@ export default (initProps: Props) => {
 
     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 => {
@@ -182,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)
@@ -195,11 +183,26 @@ 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 {

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>) {
@@ -167,6 +169,11 @@ export default function Liste<TRow extends TDonneeInconnue>({
                     );
                 }
 
+                if (onCellClick) {
+                    cellProps.onClick = () => onCellClick(row);
+                    classe += ' clickable';
+                }
+
                 let render: ComponentChild;
                 if (Array.isArray(cell)) {
 

package/client/components/index.ts

@@ -31,7 +31,7 @@ export {
     UnstyledButton,
     VisuallyHidden,
     Paper,
-    //Popover,
+    Popover as PopoverMantine,
     ActionIcon,
     CloseButton,
     Group,
@@ -106,7 +106,7 @@ export {
     RangeSlider,
     RingProgress,
     SegmentedControl,
-    //Select,
+    Select as SelectMantine,
     SemiCircleProgress,
     SimpleGrid,
     Skeleton,

package/client/services/router/index.tsx

@@ -127,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/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'>
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.5.9-6",
+	"version": "0.5.9-7",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/server/app/index.ts

@@ -16,7 +16,7 @@ import ServicesContainer, {
 import type { ServerBug } from './container/console';
 
 // Built-in
-import type { default as Router, Request as ServerRequest } from '@server/services/router';
+import type { default as Router, Request as ServerRequest, TRoute } from '@server/services/router';
 
 export { default as Services } from './service/container';
 export type { TEnvConfig as Environment } from './container/config';
@@ -187,7 +187,7 @@ export abstract class Application<
             console.log('-' + '-'.repeat(level * 1), propKey + ': ' + service.constructor.name);
 
             // Routes
-            const routes = service.__routes;
+            const routes = service.__routes as TRoute[];
             if (routes) for (const route of routes) { 
 
                 console.log('Attached service', service.constructor.name, 'to route', route.path);
@@ -196,9 +196,9 @@ export abstract class Application<
                 route.controller = (context: RouterContext) => {
 
                     // Filter data
-                    const data = route.options.validate 
-                        ? route.options.validate( context.schema )
-                        : context.request.data;
+                    const data = route.schema 
+                        ? route.schema.parse( context.request.data )
+                        : {};
 
                     // Run controller
                     return origController.bind( service )(

package/server/app/service/index.ts

@@ -8,6 +8,8 @@ import type { Command } from "../commands";
 import type { TServiceMetas } from './container';
 import type { TControllerDefinition, TRoute } from '../../services/router';
 
+export { default as schema } from 'zod';
+
 /*----------------------------------
 - TYPES: OPTIONS
 ----------------------------------*/
@@ -71,6 +73,7 @@ export function Route(options: Omit<TControllerDefinition, 'controller'> = {}) {
             method: 'POST',
             path: '/api/' + options.path,
             controller: originalMethod,
+            schema: options.schema,
             options: {
                 priority: options.priority || 0
             }

package/server/services/auth/index.ts

@@ -71,7 +71,7 @@ export default abstract class AuthService<
     TRequest extends ServerRequest<Router> = ServerRequest<Router>,
 > extends Service<TConfig, THooks, TApplication> {
 
-    public abstract login( ...args: any[] ): Promise<{ user: TUser, token: string }>;
+    //public abstract login( ...args: any[] ): Promise<{ user: TUser, token: string }>;
     public abstract decodeSession( jwt: TJwtSession, req: THttpRequest ): Promise<TUser | null>;
 
     // https://beeceptor.com/docs/concepts/authorization-header/#examples

package/server/services/router/index.ts

@@ -14,6 +14,7 @@
 import type express from 'express';
 import type { Request, Response, NextFunction } from 'express';
 import { v4 as uuid } from 'uuid';
+import zod from 'zod';
 import type { GlobImportedWithMetas } from 'babel-plugin-glob-import';
 
 // Core
@@ -113,7 +114,7 @@ export type Hooks = {
 
 export type TControllerDefinition = {
     path?: string,
-    validate?: (schema: any) => any,
+    schema?: zod.ZodSchema,
     controller: TServerController<ServerRouter>,
 }
 

package/types/icons.d.ts

@@ -1 +1 @@
-export type TIcones = "long-arrow-right"|"times"|"solid/spinner-third"|"sack-dollar"|"bell"|"bullseye"|"project-diagram"|"user-friends"|"eye"|"lock"|"comments"|"phone"|"chalkboard-teacher"|"rocket"|"planet-ringed"|"brands/linkedin"|"chart-bar"|"user-circle"|"at"|"arrow-right"|"calendar-alt"|"paper-plane"|"crosshairs"|"plus-circle"|"comments-alt"|"user-shield"|"shield-alt"|"chart-line"|"money-bill-wave"|"star"|"link"|"file-alt"|"long-arrow-left"|"search"|"lightbulb"|"magnet"|"key"|"user"|"user-plus"|"mouse-pointer"|"thumbs-up"|"dollar-sign"|"times-circle"|"angle-up"|"angle-down"|"solid/crown"|"brands/discord"|"pen"|"plus"|"file"|"envelope"|"binoculars"|"check"|"arrow-left"|"info-circle"|"check-circle"|"exclamation-circle"|"meh-rolling-eyes"|"trash"|"solid/star"|"solid/star-half-alt"|"regular/star"|"chevron-left"|"cog"|"power-off"|"bars"|"usd-circle"|"users"|"home-alt"|"trophy"|"play"|"minus-circle"|"plane-departure"|"wind"|"question-circle"|"external-link"|"map-marker-alt"|"clock"|"arrow-to-bottom"|"ellipsis-h"|"building"|"unlink"|"bold"|"italic"|"underline"|"strikethrough"|"subscript"|"superscript"|"code"|"font"|"empty-set"|"horizontal-rule"|"page-break"|"image"|"table"|"poll"|"columns"|"sticky-note"|"caret-right"|"align-left"|"align-center"|"align-right"|"align-justify"|"indent"|"outdent"|"list-ul"|"check-square"|"h1"|"h2"|"h3"|"h4"|"list-ol"|"paragraph"|"quote-left"
+export type TIcones = "times"|"solid/spinner-third"|"long-arrow-right"|"sack-dollar"|"bell"|"bullseye"|"project-diagram"|"user-friends"|"eye"|"lock"|"comments"|"phone"|"chalkboard-teacher"|"planet-ringed"|"brands/linkedin"|"rocket"|"user-circle"|"chart-bar"|"arrow-right"|"at"|"calendar-alt"|"paper-plane"|"crosshairs"|"plus-circle"|"comments-alt"|"user-shield"|"shield-alt"|"chart-line"|"money-bill-wave"|"star"|"link"|"file-alt"|"long-arrow-left"|"search"|"lightbulb"|"magnet"|"key"|"user"|"user-plus"|"mouse-pointer"|"thumbs-up"|"dollar-sign"|"times-circle"|"solid/crown"|"brands/discord"|"pen"|"plus"|"file"|"envelope"|"angle-up"|"angle-down"|"check-circle"|"magic"|"globe"|"industry"|"map-marker-alt"|"users"|"briefcase"|"solid/magic"|"angle-right"|"save"|"binoculars"|"info-circle"|"exclamation-circle"|"check"|"meh-rolling-eyes"|"trash"|"arrow-left"|"usd-circle"|"stream"|"home-alt"|"trophy"|"solid/star"|"solid/star-half-alt"|"regular/star"|"chevron-left"|"cog"|"power-off"|"bars"|"play"|"minus-circle"|"external-link"|"plane-departure"|"brands/whatsapp"|"wind"|"question-circle"|"arrow-to-bottom"|"clock"|"ellipsis-h"|"map-marker"|"language"|"calendar"|"fire"|"redo"|"building"|"bold"|"italic"|"underline"|"strikethrough"|"subscript"|"superscript"|"code"|"unlink"|"font"|"empty-set"|"horizontal-rule"|"page-break"|"image"|"table"|"poll"|"columns"|"sticky-note"|"caret-right"|"list-ul"|"check-square"|"h1"|"h2"|"h3"|"h4"|"list-ol"|"paragraph"|"quote-left"|"align-left"|"align-center"|"align-right"|"align-justify"|"indent"|"outdent"