5htp-core 0.3.4 → 0.3.5

package/package.json

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

package/src/client/app/component.tsx

@@ -14,6 +14,9 @@ import DialogManager from '@client/components/Dialog/Manager'
 import RouterComponent from '@client/services/router/components/router';
 import type { TClientOrServerContext } from '@common/router';
 
+// Resources
+import '@client/assets/css/core.less';
+
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/

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

@@ -27,16 +27,17 @@
     font-weight: 600;
 
     // Colors
+    background: var(--cBg);
     color: var(--cTxtAccent);  
         
     // Hover
-    transition: all .5s linear;
+    //transition: all .5s linear;
     &:hover,
     &.selected,
     li:hover > & {
 
         color: var(--cTxtImportant);
-        transition: all .1s linear;
+        //transition: all .1s linear;
         
         > i {
             color: var(--cAccent)
@@ -63,8 +64,8 @@
         text-align: left;
         white-space: nowrap; // Autrement, si plusieurs mots, affiché sur plusieurs ligne
         gap: @spacing / 2;
-        min-width: 4em;
         font-size: 1rem;
+        line-height: 1.5em;
         z-index: 1; // Make the label on top of ::before for example
 
         li > & {
@@ -99,7 +100,7 @@
         &:not(:disabled) {
             &:hover,
             li:hover > & {
-                background: var(--cBgHighlight);
+                background: var(--cBgActive);
             }
         }
 
@@ -220,7 +221,7 @@ ul.row {
 
         &.selected,
         &:hover {
-            background: var(--cBg2);
+            background: var(--cBgActive);
             color: var(--cTxtImportant);
         }
 

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

@@ -145,28 +145,6 @@
     }
 }
 
-.msg, .card.bg.info {
-    
-    padding: @spacing @cardPaddingLong;
-
-    .build-theme-bg( lighten(@cInfo, 35%), darken(@cInfo, 20%));
-
-}
-
-.msg, .card.bg {
-    &.error {
-        .build-theme-bg( lighten(@cInfo, 35%), darken(@cInfo, 20%));
-    }
-
-    &.warn {
-        .build-theme-bg( lighten(@cWarn, 25%), darken(@cWarn, 30%));
-    }
-
-    &.success {
-        .build-theme-bg( lighten(@cSuccess, 50%), darken(@cSuccess, 30%));
-    }
-}
-
 iframe {
     border: none;
 }

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

@@ -23,31 +23,6 @@
 @import './utils/layouts.less';
 @import './utils/medias.less';
 
-.white-card() {
-    background: white;
-    box-shadow: 0 3px 2px fade(#000, 10%);
-    border: solid 1px fade(#000, 10%);
-    border-radius: @radius;
-}
-
-.card,
-.btn,
-.input.text,
-.input.select,
-i.solid {
-
-    .build-theme-bg( #fff, #8E8E8E);
-
-    &:not(.bg) {
-        .white-card();
-    }
-
-    .bg & {
-        box-shadow: none;
-        border: none;
-    }
-}
-
 .input.text {
     &.error {
         border-color: @cError;

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

@@ -1,3 +1,5 @@
+@import (reference) '@/client/assets/vars.less';
+
 // Utils
 @import './utils/sizing.less';
 @import './utils/spacing.less';
@@ -18,16 +20,41 @@
         background-repeat: no-repeat;
         background-position: center;
 
-        .build-theme-bg(#000, #fff);
         text-shadow: 0 0 10px fade(#000, 20%);
 
+        .apply-theme({
+            background: #000;
+            foreground: #fff;
+            accent1: #fff;
+            accent2: #fff;
+        }, { 
+            background: #111; 
+            foreground: #fff;
+            accent1: #fff;
+            accent2: #fff;
+        });
+
         --cTxtDiscret: fade(#fff, 40%)
         --cTxtDesc: fade(#fff, 60%);
         --cTxtBase: fade(#fff, 80%);
         --cTxtImportant: fade(#fff, 100%);
-        --cTxtAccent: fade(#fff, 20%);
+        --cTxtAccent: #FFF;
 
         &.light {
+            .apply-theme({
+                background: #fff;
+                foreground: #000;
+                accent1: #000;
+                accent2: #000;
+            },{
+                background: #fff;
+                foreground: #000;
+                accent1: #000;
+                accent2: #000;
+            });
+
+            text-shadow: none;
+            
             --cTxtDiscret: fade(#000, 40%)
             --cTxtDesc: fade(#000, 60%);
             --cTxtBase: fade(#000, 80%);
@@ -55,6 +82,33 @@
                 position: relative;
             }
         }
+
+        &.faded {
+            position: relative;
+
+            > * {
+                z-index: 1;
+                position: relative;
+            }
+
+            &:after {
+                content: ' ';
+                display: block;
+
+                z-index: 0;
+                position: absolute;
+                bottom: 0px;
+                left: 0px;
+                right: 0px;
+
+                height: 85%;
+                background: linear-gradient(
+                    to bottom, 
+                    transparent,
+                    #fff
+                )
+            }
+        }
     }
 
     &.bg-cover {
@@ -106,4 +160,9 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 
-}
+}
+
+// Import components style (always after variables declaration)
+@import "@client/assets/css/components.less";
+
+@import '@/client/assets/theme.less';

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

@@ -76,9 +76,10 @@ i.logo {
     line-height: 2em;
     flex: 0 0 2em;
 
-    background-color: var(--cBg2);
     border-radius: @radius;
-    border: none; // For img
+    border: none; // For img``
+
+    background-color: var(--cBg);
 }
 
 i.logo {

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

@@ -201,11 +201,7 @@ pre {
     }
 
     code {
-        background: @c3;
-        border-top: solid 1px @c3 - #111;
-        border-bottom: solid 1px @c3 - #111;
         padding: @spacing @readingMargin;
-        color: @c3 + #888;
         text-align: left;
         font-size: 1rem;
         line-height: 2em;

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

@@ -1,67 +1,97 @@
 @bgDelta: #111;
 @fgDelta: #999;
 
-.build-theme-bg( 
-    @bg, 
-    @fg: if( lightness(@bg) >= 80%, @bg - @fgDelta, @bg + @fgDelta),
-    @cAccent: @c1,
-    @cAccent2: @c2,
-    @apply: true
-) {
+/* Theme structure:
 
-    @isLight: boolean( lightness(@bg) >= 80% );
+    background?: COLOR;
+    foreground: COLOR;
+    accent1: COLOR;
+    accent2: COLOR;
+*/
 
-    --cAccent: @cAccent;
-    --cAccent2: @cAccent2;
+.apply-theme( @theme, @componentsTheme: false, @apply: true ) {
+        
+    .apply-theme-style( @theme, @componentsTheme, @apply );
+
+    // Children Components
+    & when not (@componentsTheme = false) {
+        // 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( @theme, @componentsTheme: false, @apply: true ) {
+    
+    @isLight: boolean( lightness( @bg ) >= 80% );
+
+    // Flags
+    @bg: @theme[background];
+    @bgActive: if( @isLight, 
+        @bg - #111, 
+        @bg + #111, 
+    );
+    @fg: @theme[foreground];
 
     // Background
-    // TODO: Nettoyer
-    @bg2: darken(@bg, 8%);
-    @bgDark: darken(@bg, 7%);
-    @bgDarkPlus: darken(@bg, 10%);
     --cBg: @bg; 
-    --cBg2: @bg2;
-    --cBgAccent: @bgDark;
-    --cBgAccentPlus: @bgDarkPlus;
-    --cBgControl: if( @bg = #fff, @cBgPage, #fff );
-    --cBgHover: #f5f5f5;
+    --cBgActive: @bgActive;
+    & when (@apply = true) {
+        background: var(--cBg);
+    }
 
-    @cBgHighlight: @bg + #111;
-    --cBgHighlight: @cBgHighlight;
+    // Accent
+    & when (@theme[accent1]) {
+        --cAccent: @theme[accent1];
+    }
+    & when (@theme[accent2]) {
+        --cAccent2: @theme[accent2];
+    }
 
-    // Other
+    // Lines
     @cLine: if( @isLight, @bg - #151515, @bg + #151515);
-    @cLine2: if( @isLight, @bg - #191919, @bg + #050505);
     --cLine: @cLine;
+    @cLine2: if( @isLight, @bg - #191919, @bg + #050505);
     --cLine2: @cLine2;
 
     // Text
-    .build-theme-fg(@fg, @bg, @apply);
+    .build-theme-fg(@fg, @bg, @theme[accent1], @theme[accent2]);
 
-    // Childrens
-    & when (@apply = true) {
-        background: var(--cBg);
-        /*.input.text {
-            border: if(@bg = #ffffff, solid 2px var(--cLine), none);
-        }*/
-    }
+    // TO REMOVE
+    --cBgControl: if( @bg = #fff, @cBgPage, #fff );
+    --cBgHover: #f5f5f5;
 }
 
-.build-theme-fg( @cTxtBase, @bg: @cBgPage, @apply: true ) {
+.build-theme-fg( 
+    @cTxtBase, 
+    @bg: @cBgPage,
+    @cAccent: false,
+    @cAccent2: false
+) {
 
     @isLight: boolean( lightness(@bg) >= 70% );
+
+    // Base
+    --cTxtBase: @cTxtBase;
     
-    // Text
+    // Discret
     @cTxtDiscret: if( @isLight, @bg - #444, @bg + #444);
-    @cTxtDesc: if( @isLight, @cTxtBase + #222, @cTxtBase - #222);
-    @cTxtImportant: if( @isLight, @cDark, #fff);
-    @cTxtAccent: if( @bg = @c1, @cTxtImportant, @c1);
-
     --cTxtDiscret: @cTxtDiscret;
+
+    // Desc
+    @cTxtDesc: if( @isLight, @cTxtBase + #222, @cTxtBase - #222);
     --cTxtDesc: @cTxtDesc;
-    --cTxtBase: @cTxtBase;
+
+    // Important
+    @cTxtImportant: if( @isLight, @cDark, #fff);
     --cTxtImportant: @cTxtImportant;
-    --cTxtAccent: @cTxtAccent;
+
+    // Accent
+    --cTxtAccent: @cAccent;
 
     color: var(--cTxtBase);
 }

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

@@ -47,17 +47,6 @@
         > li {
             position: relative;
 
-            > a:hover::before {
-                content: ' ';
-                position: absolute;
-                top: 0; left: 0; bottom: 0; right: 0;
-                margin: 0 0.3em;
-                background: var(--cBgAccent);
-                border-radius: @radius;
-                z-index: 0;
-
-            }
-
             > a > * {
                 z-index: 1;
                 position: relative;
@@ -298,7 +287,7 @@
 	&.y-@{i} {
         /*@t_zones: (@L_max) / @i;
         @espace_zone: ~"repeat(@{i}, minmax(@{L_min}, @{t_zones}))";*/
-        @espace_zone: ~"repeat(@{i}, 1fr)";
+        @espace_zone: ~"repeat(@{i}, min-content)";
         .construire(@espace_zone, row);
     }
     

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

@@ -1,23 +1,10 @@
-
-img.img,
-.bg.img {
-    background: @cBgPage - #101010;
-}
-
 img {
     max-width: 100%;
     display: block;
 
     &.img {
         border-radius: @radius;
+        object-fit: cover;
+        object-position: center;
     }
-}
-
-/*----------------------------------
-- IMAGE CONFIG
-----------------------------------*/
-
-img.img {
-    object-fit: cover;
-    object-position: center;
 }

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

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 @toast-zindex: 999;
 
 #modals, 

package/src/client/components/Form.ts

@@ -181,15 +181,16 @@ export default function useForm<TFormData extends {}>(
 
                 // Submit on press enter
                 onKeyDown: e => {
-                    if (e.key === 'Enter') {
+                    if (e.key === 'Enter' || (e.keyCode || e.which) === 13) {
                         submit({ [fieldName]: e.target.value } as Partial<TFormData>);
                     }
                 },
 
                 // Error
                 errors: state.errors[fieldName],
-                required: validator.options?.opt !== true,
-                validator: validator,
+
+                // Component attributes
+                ...validator.componentAttributes
             }
         }
     }

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

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 @hideeWidth: 10em;
 
 .scrollable-row {

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

@@ -1,5 +1,10 @@
 .video {
-    .build-theme-bg(#000, #fff);
+    .apply-theme({
+        background: #000;
+        foreground: #fff;
+        accent1: #fff;
+        accent2: #fff;
+    });
 
     position: relative;
     text-shadow: 0 0 10px fade(#000, 20%);

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

@@ -102,12 +102,11 @@ export default (props: Props) => {
     let renderedContent: ComponentChild;
     if (active) {
         //content = typeof content === 'function' ? React.createElement(content) : content;
-        console.log("render content", content);
         renderedContent = React.cloneElement( 
             content, 
             {
                 className: (content.props.className || '') 
-                    + ' card white popover pd-1' 
+                    + ' card popover pd-1' 
                     + (position ? ' pos_' + position.cote : ''),
 
                 ref: (ref: any) => {

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

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 // La popover étant positionnée de manière relative à son conteneur,
 // contPopover doit envelopper le bouton sans aucun espace
 .contPopover {

package/src/client/components/data/progressbar/index.less

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 div.progressbar {
 
     background: var(--cLine);

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

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 @hInput: @sizeComponent;
 @labelH: 0.6em;
 
@@ -14,6 +16,9 @@
     &.text,
     &.select {
 
+        background: var(--cBg);
+        border-radius: @radius;
+
         > i {
             color: var(--cTxtDesc);
         }
@@ -108,6 +113,7 @@
         width: 100%;
         padding: @labelH 0 0 0;
         font-size: 1rem;
+        color: inherit;
     }
 
     input {

package/src/client/components/inputv3/file/index.less

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 .input.upload {
 
     position: relative;

package/src/client/pages/_messages/401.tsx

@@ -21,7 +21,7 @@ import useHeader from '@client/pages/useHeader';
 ----------------------------------*/
 Router.error( 401, ({ message, request, page }) => {
 
-    request.response?.redirect('/');
+    request.response?.redirect('https://becrosspath.com');
 
     useHeader({
         title: 'Authentication Required',
@@ -32,7 +32,6 @@ Router.error( 401, ({ message, request, page }) => {
 
         page?.go('/');
 
-
     }, []);
 
     return (

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

@@ -41,6 +41,7 @@ export default ({ page }: { page: Page }) => {
                 ...apiData,
                 ...context.request.data
             }}
+            context={context}
         />
         
     ) : 'Renderer missing'

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

@@ -44,31 +44,59 @@ const PageLoading = ({ clientRouter }: { clientRouter?: ClientRouter }) => {
 
 }
 
+const scrollToElement = (selector: string) => document.querySelector( selector )
+    ?.scrollIntoView({
+        behavior: "smooth", 
+        block: "start", 
+        inline: "nearest"
+    })
+
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
 export default ({ service: clientRouter }: { service?: ClientRouter }) => {
 
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
     const context = useContext();
 
+    // Bind context object to client router
+    if (clientRouter !== undefined) 
+        clientRouter.context = context;
+
     const [pages, setPages] = React.useState<{
         current: undefined | Page
     }>({
         current: context.page
     });
     
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
     const resolvePage = async (request: ClientRequest, locationUpdate?: Update) => {
 
         if (!clientRouter) return;
 
+        const currentRequest = context.request;
+        context.request = request;
+
         // WARNING: Don"t try to play with pages here, since the object will not be updated
         //  If needed to play with pages, do it in the setPages callback below
+        // Unchanged path
+        if (request.path === currentRequest.path) {
+
+            // Scroll to component
+            if (request.hash) {
+                scrollToElement(request.hash);
+            }
+
+            return;
+        }
         
         // Set loading state
         clientRouter.setLoading(true);
-
-        // Load the route chunks
-        context.request = request;
         const newpage = context.page = await clientRouter.resolve(request);
 
         // Page not found: Directly load with the browser
@@ -82,7 +110,7 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
         }
 
         // Fetch API data to hydrate the page
-        const newData = context.data = await newpage.fetchData();
+        const newData = await newpage.fetchData();
 
         // Add page container
         setPages( pages => {
@@ -111,16 +139,12 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
                 context.app.setLayout(newLayout);
             }
 
-            return  { current: newpage }
+            return { current: newpage }
         });
     }
 
     const restoreScroll = (currentPage?: Page) => currentPage?.scrollToId 
-        && document.getElementById( currentPage.scrollToId.substring(1) )?.scrollIntoView({
-            behavior: "smooth", 
-            block: "start", 
-            inline: "nearest"
-        })
+        && scrollToElement( currentPage.scrollToId.substring(1) )
 
     // First render
     React.useEffect(() => {
@@ -135,9 +159,6 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
             // Load the concerned route
             const request = new ClientRequest(locationUpdate.location, context.Router);
             await resolvePage(request);
-            
-            // Scroll to the selected content via url hash
-            //restoreScroll(pages.current);
         })
     }, []);
 
@@ -161,6 +182,9 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
         
     }, [pages.current]);
 
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
     // Render the page component
     return <>
         {/*pages.previous && (