5htp-core 0.1.0 → 0.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "5-HTP, scientifically called 5-Hydroxytryptophan, is the precursor of happiness neurotransmitter.",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -72,9 +72,7 @@
 		"uuid-by-string": "^3.0.4",
 		"validator": "^13.7.0",
 		"ws": "^8.2.2",
-		"yaml": "^1.10.2",
-        "preact": "^10.5.15",
-		"preact-render-to-string": "^5.1.19"
+		"yaml": "^1.10.2"
 	},
 	"devDependencies": {
 		"@types/cookie": "^0.4.1",
@@ -85,5 +83,9 @@
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7"
-	}
+	},
+    "peerDependencies": {
+        "preact": "^10.5.15",
+		"preact-render-to-string": "^5.1.19"
+    }
 }

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

@@ -194,6 +194,12 @@
         height: auto;
         width: auto;
         padding: 0;
+
+        &, 
+        &:hover {
+            background: none;
+            box-shadow: none;
+        }
     }
 }
 
@@ -211,7 +217,7 @@ ul.row {
         color: var(--cTxtBase);  
         box-shadow: none;
         border: none;
-        width: 100%;
+        //width: 100%;
         background: transparent;
 
         &.selected,

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

@@ -1,5 +1,14 @@
+/*----------------------------------
+- CONFIG
+----------------------------------*/
 @import (reference) "../theme.less";
 
+@cardPadding: @spacing * 1.5;
+@cardPaddingLong: @spacing * 2;
+
+/*----------------------------------
+- COMPONENTS
+----------------------------------*/
 .card,
 .msg {
     position: relative; // For .overlay
@@ -10,7 +19,15 @@
 .card {
 
     background-color: var(--cBg);
-    padding: @spacing;
+    padding: @cardPadding;
+
+    &.row {
+        padding: @cardPadding @cardPaddingLong;
+    }
+
+    &.col {
+        padding: @cardPaddingLong @cardPadding;
+    }
 
     &.bg {
         --cBg: difference(@cBgPage, #0a0a0a);
@@ -43,7 +60,7 @@
     ----------------------------------*/
 
     &.menu {
-        padding: @spacing * 2;
+        padding: @cardPaddingLong;
     }
 
     /*----------------------------------
@@ -59,25 +76,28 @@
 
     > .cov-t {
 
-        margin-top: calc( -1 * @spacing );
+        margin-top: -1 * @spacing;
     }
 
-    > .cover,
-    > .table {
+    &.col > .cover {
 
-        margin-left: calc( -1 * @spacing );
-        margin-right: calc( -1 * @spacing );
+        margin-left: -1 * @cardPadding;
+        margin-right: -1 * @cardPadding;
+        padding-left: @cardPadding;
+        padding-right: @cardPadding;
 
         &:first-child {
             border-top-left-radius: @radius;
             border-top-right-radius: @radius;
-            margin-top: calc( -1 * @spacing );
+            margin-top: -1 * @cardPaddingLong;
+            padding-top: @cardPaddingLong;
         }
 
         &:last-child {
             border-bottom-left-radius: @radius;
             border-bottom-right-radius: @radius;
-            margin-bottom: calc( -1 * @spacing );
+            margin-bottom: -1 * @cardPaddingLong;
+            padding-bottom: @cardPaddingLong;
         }
     }
 
@@ -90,23 +110,23 @@
 
 .msg, .card.bg.info {
     
-    padding: @spacing @spacing * 2;
+    padding: @spacing @cardPaddingLong;
 
-    .build-theme( lighten(@cInfo, 35%), darken(@cInfo, 20%));
+    .build-theme-bg( lighten(@cInfo, 35%), darken(@cInfo, 20%));
 
 }
 
 .msg, .card.bg {
     &.error {
-        .build-theme( lighten(@cInfo, 35%), darken(@cInfo, 20%));
+        .build-theme-bg( lighten(@cInfo, 35%), darken(@cInfo, 20%));
     }
 
     &.warn {
-        .build-theme( lighten(@cWarn, 25%), darken(@cWarn, 30%));
+        .build-theme-bg( lighten(@cWarn, 25%), darken(@cWarn, 30%));
     }
 
     &.success {
-        .build-theme( lighten(@cSuccess, 50%), darken(@cSuccess, 30%));
+        .build-theme-bg( lighten(@cSuccess, 50%), darken(@cSuccess, 30%));
     }
 }
 

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

@@ -1,13 +1,14 @@
 .card,
 .input.text,
 .btn,
+.table,
 i.solid {
 
-    .build-theme( #fff, #8E8E8E);
+    .build-theme-bg( #fff, #8E8E8E);
 
     &:not(.bg) {
         background: white;
-        box-shadow: 0 10px 20px fade(#000, 10%);
+        box-shadow: 0 3px 2px fade(#000, 10%);
         border: solid 1px fade(#000, 10%);
         border-radius: @radius;
     }
@@ -18,6 +19,7 @@ i.solid {
     }
 }
 
+//.card.clickable:hover,
 .btn:hover,
 .input.text.focus {
     z-index: 5;

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

@@ -1,8 +1,9 @@
 table {
 
     width: 100%;
-    border-collapse: separate; 
     padding: 0;
+    border-collapse: separate; 
+    border-spacing: 0 0.5em;
 
     // By default, chrome disables text inherits
     line-height: inherit;

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

@@ -1,13 +1,36 @@
 @import (reference) "~@/client/assets/theme.less";
 
+img.img,
+.bg.img {
+    background: @cBgPage - #101010;
+}
+
+.bg.img {
+    .build-theme-bg(#000, #fff);
+    text-shadow: 0 0 10px fade(#000, 20%);
+}
+
 img {
     max-width: 100%;
     display: block;
 
     &.img {
         border-radius: @radius;
-        background: @cBgPage - #101010;
-        object-fit: cover;
-        object-position: center;
     }
+}
+
+/*----------------------------------
+- IMAGE CONFIG
+----------------------------------*/
+
+// Default: cover
+.bg.img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+img.img {
+    object-fit: cover;
+    object-position: center;
 }

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

@@ -2,7 +2,6 @@ h1, .h1,
 h2, 
 h3 {
 
-    font-family: "Rubik";
     font-weight: 600;
     text-align: inherit;
     color: var(--cTxtImportant);
@@ -23,6 +22,11 @@ h3 {
     }
 }
 
+h1,
+h2 {
+    font-family: "Rubik";
+}
+
 // sans input.h1, .h1 seul ne peut pas override le style par défaut des champs
 h1, .h1 {
     font-size: @h1Size;
@@ -37,5 +41,5 @@ h2, .h2 {
 h3, 
 fieldset > legend {
     font-size: @h3Size;
-    line-height: 2em;
+    line-height: 1.5em;
 }

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

@@ -1,7 +1,7 @@
 @bgDelta: #111;
 @fgDelta: #999;
 
-.build-theme( 
+.build-theme-bg( 
     @bg, 
     @fg: if( lightness(@bg) >= 80%, @bg - @fgDelta, @bg + @fgDelta),
     @cAccent: @c1,
@@ -16,7 +16,7 @@
 
     // Background
     // TODO: Nettoyer
-    @bg2: @bg - #121212;
+    @bg2: darken(@bg, 8%);
     @bgDark: darken(@bg, 5%);
     @bgDarkPlus: darken(@bg, 10%);
     --cBg: @bg; 
@@ -36,7 +36,7 @@
     --cLine2: @cLine2;
 
     // Text
-    .build-theme-txt(@fg, @bg, @apply);
+    .build-theme-fg(@fg, @bg, @apply);
 
     // Childrens
     & when (@apply = true) {
@@ -51,7 +51,7 @@
     }
 }
 
-.build-theme-txt( @cTxtBase, @bg, @apply: true ) {
+.build-theme-fg( @cTxtBase, @bg: @cBgPage, @apply: true ) {
 
     @isLight: boolean( lightness(@bg) >= 70% );
     
@@ -66,4 +66,6 @@
     --cTxtBase: @cTxtBase;
     --cTxtImportant: @cTxtImportant;
     --cTxtAccent: @cTxtAccent;
+
+    color: var(--cTxtBase);
 }

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

@@ -0,0 +1,87 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+// Core components
+import Button from '@client/components/button';
+import { Link } from '@client/router';
+
+// Resources
+import './index.less';
+
+/*----------------------------------
+- TYPE
+----------------------------------*/
+
+type TMeta = {
+    label: ComponentChild,
+    class?: string,
+    value: ComponentChild,
+}
+
+export type Props = {
+    title: string,
+    link?: string,
+    cover?: {
+        color?: string,
+        title?: string,
+        logo?: string
+    },
+    metas: TMeta[],
+    class?: string,
+}
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+export default ({ title, link, cover, metas, class: className = '' }: Props) => {
+
+    if (link)
+        className += ' clickable';
+
+    return (
+
+        <article class={"card col " + className}>
+    
+            {cover && (
+                <header class="bg img row al-left cover pdb-1" style={{
+                    backgroundColor: cover.color
+                }}>
+        
+                    {cover?.logo}
+        
+                    {cover.title && (
+                        <strong>
+                            {cover?.title}
+                        </strong>
+                    )}
+                    
+                </header>
+            )}
+    
+            {link ? (
+                <Link to={link} class="txt-left super">
+                    <h3>{title}</h3>
+                </Link>
+            ) : (
+                <h3>{title}</h3>
+            )}
+    
+            {metas && (
+                <ul class="row fill">
+                    {metas.map(({ label, value, class: className }) => (
+                        <li class={"col al-left sp-05"}>
+                            {label}
+                            <strong class={className}>{value}</strong>
+                        </li>
+                    ))}
+                </ul>
+            )}
+    
+        </article>
+    )
+}

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

@@ -0,0 +1,65 @@
+@import (reference) "~@/client/assets/theme.less";
+
+@hideeWidth: 10em;
+
+.scrollable-row {
+    
+    position: relative;
+
+    > .container {
+        padding: @spacing 0;
+        overflow: hidden;
+        position: relative;
+        left: 0;
+
+        > .row {
+            justify-content: flex-start;
+            padding: 0 @spacing;
+        }
+    }
+
+    > .btn {
+        position: absolute;
+        top: 50%;
+        margin-top: 0 - (@sizeComponent / 2);
+        z-index: 1;
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 0;
+        }
+    }
+
+    &::before,
+    &::after {
+        content: ' ';
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: @hideeWidth;
+    }
+
+    &::before {
+        left: 0;
+        background: linear-gradient(to right, fade(@cBgPage, 100%), fade(@cBgPage, 0%));
+    }
+
+    &::after {
+        background: linear-gradient(to left, fade(@cBgPage, 100%), fade(@cBgPage, 0%));
+        right: 0;
+    }
+
+    &.stopLeft {
+        > .btn.left { display: none; }
+        &::before { display: none; }
+    }
+
+    &.stopRight {
+        > .btn.right { display: none; }
+        &::after { display: none; }
+    }
+}

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

@@ -0,0 +1,72 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+// Core components
+import Button from '@client/components/button';
+
+// Resources
+import './index.less';
+
+/*----------------------------------
+- TYPE
+----------------------------------*/
+
+export type Props = {
+    children: ComponentChild
+}
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+export default ({ children }: Props) => {
+
+    const containerRef = React.useRef<HTMLDivElement>();
+    const [leftPos, setLeftPos] = React.useState<number>(0);
+
+    const moveTo = (sens: number) => {
+
+        const container = containerRef.current;
+        if (container === null)
+            return console.error(`Unable to scroll: container not defined`);
+
+        const row = container.children[0];
+        if (!row)
+            return console.error(`No row found`);
+
+        const containerWidth = container.getBoundingClientRect().width;
+        const rowWidth = row.getBoundingClientRect().width;
+
+        console.log({ containerWidth, rowWidth });
+
+    }
+
+    React.useEffect(() => {
+
+        // If row oveflow, show horizontal arroxs
+        console.log({ containerRef });
+
+
+    }, []);
+
+    return (
+        <div class="scrollable-row stopLeft">
+
+            <Button class="left" shape="pill" icon="arrow-left" onClick={() => moveTo(-1)} />
+
+            <div class="container" ref={containerRef}>
+                <div class="row" style={{ left: leftPos + 'px' }}>
+                    {children}
+                </div>
+            </div>
+
+            <Button class="right" shape="pill" icon="arrow-right" onClick={() => moveTo(1)} />
+
+        </div>
+    )
+
+}

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

@@ -16,18 +16,19 @@ import Dropdown from '@client/components/dropdown.old';
 
 export type TDonneeInconnue = {[cle: string]: any};
 
-export type Props<TDonnee> = {
-    data: TDonnee[],
-    columns: (donnee: TDonnee, data: TDonnee[], index: number) => TColonne[];
+export type Props<TRow> = {
+    
+    data: TRow[],
+    columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
 
-    setDonnees?: (data: TDonnee[]) => void,
+    setData?: (rows: TRow[]) => void,
     vide?: ComponentChild,
     className?: string,
 
-    actions?: TAction<TDonnee>[]
+    actions?: TAction<TRow>[]
 }
 
-export type TColonne = {
+export type TColumn = {
     label: ComponentChild,
     cell: ComponentChild,
     raw?: number | string | boolean,
@@ -37,33 +38,33 @@ export type TColonne = {
 /*----------------------------------
 - COMPOSANTS
 ----------------------------------*/
-export default function Liste<TDonnee extends TDonneeInconnue>({
-    data, setDonnees, vide ,
+export default function Liste<TRow extends TDonneeInconnue>({
+    data: rows, setData, vide ,
     columns, actions, ...props
-}: Props<TDonnee>) {
+}: Props<TRow>) {
 
-    if (data.length === 0)
+    if (rows.length === 0)
         return (
             <div class="card pd-2 col al-center">
                 <i src="meh-rolling-eyes" class="xl" />
-                Uh ... No data here.
+                Uh ... No rows here.
             </div>
         );
 
     const [selection, setSelection] = React.useState<number[]>([]);
     const [sort, setSort] = React.useState<{ col: number, dir: 1 | -1 } | null>(null);
 
-    const trier = (colonne: TColonne, iColonne: number) => {
+    const trier = (colonne: TColumn, iColonne: number) => {
 
-        if (!setDonnees)
-            throw new Error(`setDonnees dit être renseigné pour pouvoir trier les données.`);
+        if (!setData) 
+            return console.warn(`[ui][table] Please specify a setData function to enable sorting features.`);
 
         const ordre = sort && iColonne === sort.col
             ? -1 * sort.dir as (1 | -1) // Inversement ordre
             : 1;
             
-        setDonnees([
-            ...data.sort((a: TDonnee, b: TDonnee) => {
+        setData([
+            ...rows.sort((a: TRow, b: TRow) => {
 
                 const valA = colonne.valeur(a);
                 const valB = colonne.valeur(b);
@@ -94,7 +95,7 @@ export default function Liste<TDonnee extends TDonneeInconnue>({
     ----------------------------------*/
     let renduColonnes: ComponentChild[] = [];
     
-    const renduLignes = data.map((donnee: TDonnee, iDonnee: number) => (
+    const renduLignes = rows.map((row: TRow, iDonnee: number) => (
         <tr>
             {/*selectionMultiple && (
                 <td>
@@ -113,7 +114,7 @@ export default function Liste<TDonnee extends TDonneeInconnue>({
                 </td>
                     )*/}
 
-            {columns(donnee, data, iDonnee).map((colonne, iColonne) => {
+            {columns(row, rows, iDonnee).map((colonne, iColonne) => {
 
                 const triable = colonne.raw !== undefined;
 
@@ -141,7 +142,7 @@ export default function Liste<TDonnee extends TDonneeInconnue>({
 
             {/*actions !== undefined && (
                 <td>
-                    <Popover menu={{ actions, data: donnee }}>
+                    <Popover menu={{ actions, rows: row }}>
                         <Button taille="s" icone="solid/ellipsis-h" />
                     </Popover>
                 </td>
@@ -168,9 +169,9 @@ export default function Liste<TDonnee extends TDonneeInconnue>({
                                 <Checkbox
                                     nom="toutSelectionner"
                                     label={false}
-                                    valeur={selection.length >= data.length}
+                                    valeur={selection.length >= rows.length}
                                     onChange={(status: boolean) => {
-                                        setSelection(status ? Object.keys(data) : []);
+                                        setSelection(status ? Object.keys(rows) : []);
                                     }}
                                 />
                             </th>
@@ -193,18 +194,18 @@ export default function Liste<TDonnee extends TDonneeInconnue>({
                     <div className="card pdv-05 row inline pos_bottom">
                         <strong>{selection.length} selected items</strong>
 
-                        {actions.map((action: TAction<TDonnee>) => {
+                        {actions.map((action: TAction<TRow>) => {
 
                             if (!action.multi)
                                 return;
 
-                            const donneesSelection = selection.map((index: number) => data[index]);
+                            const donneesSelection = selection.map((index: number) => rows[index]);
 
                             return (
                                 <Button
                                     {...(action.bouton ? (action.multi
-                                        ? action.bouton([donnee], [iDonnee])
-                                        : action.bouton(donnee, iDonnee)
+                                        ? action.bouton([row], [iDonnee])
+                                        : action.bouton(row, iDonnee)
                                     ) : {})}
                                     icone={action.icone}
                                     onClick={() => action.onClick && action.onClick(donneesSelection, selection)}

package/src/client/components/button.tsx

@@ -135,7 +135,7 @@ export default ({
         className += ' ' + size;
 
     if (type !== undefined)
-        className += ' bg ' + type;
+        className += type === 'link' ? type : (' bg ' + type);
 
     if (icon) {
         if (children === undefined)

package/src/server/routes/auth.ts

@@ -107,7 +107,7 @@ route.get('/invite', async ({ auth, schema }) => {
             meet,
             activity
         FROM User u
-        WHERE referrer = ${user.name}
+        WHERE referrer = ${user.email}
     `.all();
 
     const stats = await getStats('UserStats', [
@@ -118,9 +118,9 @@ route.get('/invite', async ({ auth, schema }) => {
         relative: true,
         period: '12 hours', 
         interval: '1 hour',
-        where: user ? (`user = ` + app.services.sql.esc(user.name)) : '0',
+        where: user ? (`user = ` + app.services.sql.esc(user.email)) : '0',
         cache: user ? { 
-            id: 'user.' + user.name + '.referrals' 
+            id: 'user.' + user.email + '.referrals' 
         } : undefined
     });