5htp-core 0.5.9 → 0.6.0

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/colors.less

@@ -0,0 +1,244 @@
+@import (reference) '@/client/assets/vars.less';
+
+/*----------------------------------
+- BASIC THEMES
+----------------------------------*/
+
+@whiteTheme: {
+    alpha: false;
+    background: #FFF;
+    foreground: #555;
+    accent1: @c1;
+    accent2: @c2;
+}
+
+@greyTheme: {
+    alpha: false;
+    background: #F3F3F3;
+    foreground: #4D4D4D;
+    accent1: @c1;
+    accent2: @c2;
+}
+
+@silverTheme: {
+    alpha: false;
+    background: @cBgPage - #080808;
+    foreground: #777;
+    accent1: @c1;
+    accent2: @c2;
+}
+
+@darkTheme: {
+    alpha: false;
+    background: #000;
+    foreground: #DDD;
+    accent1: #83B2FF;
+    accent2: @c2;
+}
+
+@darkerTheme: {
+    alpha: false;
+    background: #181818;
+    foreground: #bbb;
+    accent1: #fff;
+    accent2: @c2;
+}
+
+@darkestTheme: {
+    alpha: false;
+    background: #242424;
+    foreground: #ddd;
+    accent1: #fff;
+    accent2: @c2;
+}
+
+/*----------------------------------
+- COLOR THEMES
+----------------------------------*/
+
+@primaryTheme: {
+    alpha: false;
+    background: #111;
+    foreground: #fff;
+    accent1: #FFF;
+    accent2: #FFF;
+}
+
+/*@accentTheme: {
+    alpha: false;
+    background: @c1;
+    foreground: #fff;
+    accent1: #fff;
+    accent2: #fff;;
+}*/
+
+
+
+@accentTheme: {
+    alpha: false;
+    background: #EAE8F9;
+    foreground: @c1 - #444;
+    accent1: #fff;
+    accent2: #fff;;
+}
+
+.bg.primary {
+
+    .apply-theme(@primaryTheme);
+}
+
+.bg.accent,
+.btn.bg.col.active {
+    .apply-theme(@accentTheme); 
+}
+
+.bg.grey {
+    .apply-theme(@greyTheme, @whiteTheme);
+}
+
+.card,
+.bg.white {
+    .apply-theme(@whiteTheme, @greyTheme);
+}
+
+.bg.silver {
+    .apply-theme(@silverTheme, @whiteTheme);
+
+    box-shadow: inset 0 0 20px fade(#000, 5%)
+}
+
+.bg.dark {
+    .apply-theme(@darkTheme, @darkerTheme);
+}
+
+.bg.darker {
+    .apply-theme(@darkerTheme, @darkestTheme);
+}
+
+/*----------------------------------
+- GRADIENT & IMG THEMES
+----------------------------------*/
+
+.bg.img {
+    
+    .apply-theme({
+        alpha: true;
+        background: #000;
+        foreground: fade(#fff, 60%);
+        accent1: #fff;
+        accent2: green;
+    }, @whiteTheme);
+}
+
+.card:not(.bg), .card.bg.white {
+    border: 1px solid var(--cLine);
+}
+
+.bg.color1 { .color-theme(#0066ff ); }
+.bg.color2 { .color-theme(#00e6da ); }
+.bg.color3 { .color-theme(#00e417 ); }
+.bg.color4 { .color-theme(#ffb700 ); }
+.bg.color5 { .color-theme(#eb4a00 ); }
+.bg.color6 { .color-theme(#e500ac ); }
+.bg.color7 { .color-theme(#6200ff ); }
+
+.bg.light1 { .color-theme(#cce0fe ); }
+.bg.light2 { .color-theme(#c7f0ee ); }
+.bg.light3 { .color-theme(#cef5d2 ); }
+.bg.light4 { .color-theme(#feeab6 ); }
+.bg.light5 { .color-theme(#ffdccc ); }
+.bg.light6 { .color-theme(#fcccf0 ); }
+.bg.light7 { .color-theme(#e2d5f7 ); }
+
+.bg.success {
+    box-shadow: none;
+    border: none;
+
+    .apply-theme({ 
+        alpha: false;
+        background: #D7FEEE; 
+        foreground: darken( #D7FEEE, 80% );
+        accent1: #111;
+        accent2: #111;
+    });
+
+    &.light {
+        .apply-theme({ 
+            alpha: false;
+            background: lighten( @cSuccess, 40% ); 
+            foreground: darken( @cSuccess, 50% );
+            accent1: #111;
+            accent2: #111;
+        });
+    }
+}
+
+.bg.error {
+    box-shadow: none;
+    border: none;
+
+    .apply-theme({ 
+        alpha: false;
+        background: lighten( @cError, 20% ); 
+        foreground: darken( @cError, 50% );
+        accent1: #111;
+        accent2: #111;
+    });
+}
+
+.bg.warn { 
+    box-shadow: none;
+    border: none;
+
+    .apply-theme({ 
+        alpha: false;
+        background: lighten( @cWarn, 20% ); 
+        foreground: darken( @cWarn, 50% );
+        accent1: #111;
+        accent2: #111;
+    });
+
+    &.light {
+        .apply-theme({ 
+            alpha: false;
+            background: lighten( @cWarn, 20% ); 
+            foreground: darken( @cWarn, 50% );
+            accent1: #111;
+            accent2: #111;
+        });
+    }
+}
+
+.bg.info {
+    box-shadow: none;
+    border: none;
+    
+    .apply-theme({ 
+        alpha: false;
+        background: lighten( @cInfo, 50% ); 
+        foreground: darken( @cInfo, 50% );
+        accent1: #111;
+        accent2: #111;
+    });
+
+    &.light {
+        .apply-theme({ 
+            alpha: false;
+            background: lighten( @cInfo, 35% ); 
+            foreground: darken( @cInfo, 50% );
+            accent1: #111;
+            accent2: #111;
+        });
+    }
+}
+
+.fg {
+
+    &.primary { .build-theme-fg(@c1, #fff); }
+
+    &.desc { color: var(--cTxtDesc); }
+
+    &.success { .build-theme-fg( @cSuccess ); }
+    &.error { .build-theme-fg( @cError ); }
+    &.warn { .build-theme-fg( @cWarn ); }
+}

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;
@@ -159,19 +160,20 @@
         color: var(--cTxtAccent);
     }
 
+    &.secondary {
+        border: 1px solid var(--cLine);
+
+        &:hover {
+            border-color: var(--cLine2);
+        }
+    }
+
     /*----------------------------------
     - STATE
     ----------------------------------*/
 
     cursor: pointer;
 
-    &:not(.primary).active {
-
-        &.col {
-            box-shadow: 0 0 0 0.2em @c2;
-        }
-    }
-
     &[disabled] {
         cursor: default;
         opacity: 0.5;
@@ -278,7 +280,7 @@
     &.menu > .btn, 
     &.menu > li > .btn {
 
-        > .label {
+        &:not(.col) > .label {
             // All the list items label must be aligned
             justify-content: flex-start;
             // Since they're all horizontally aligned,
@@ -288,6 +290,20 @@
     }
 }
 
+.submenu.card {
+    animation: aff-submenu 0.1s ease;
+    @keyframes aff-submenu {
+        0% {
+            opacity: 0;
+            transform: scale(0.8);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+}
+
 ul.col,
 ul.row {
 
@@ -322,7 +338,9 @@ ul.col {
     &.menu > li > .btn {
         
         // Align items ver sla gauche
-        justify-content: flex-start;
+        &:not(.col) {
+            justify-content: flex-start;
+        }
         
         // Align all icons by giveing them the same width
         > i {

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

@@ -17,6 +17,17 @@
 
     background-color: var(--cBg);
     padding: @cardPadding;
+    box-shadow: 0 3px 2px fade(#000, 10%);
+    border: 1px solid fade(#000, 10%);
+
+    &.floating {
+        box-shadow: 0 10px 50px fade(black, 15%);
+        z-index: 10;
+    }
+
+    &.minimal {
+        box-shadow: none;
+    }
 
     &.row {
         padding: @cardPadding @cardPaddingLong;
@@ -48,6 +59,15 @@
         }
     }
 
+    a&,
+    &.clickable {
+        text-decoration: none; // Remove a underline
+
+        &:hover {
+            border-color: #aaa;
+        }
+    }
+
     &.col {
         padding: @cardPadding @cardPaddingLong;
 
@@ -92,6 +112,10 @@
 
     &.menu {
         padding: @cardPaddingLong;
+
+        &.popover {
+            padding: @cardPaddingMini;
+        }
     }
 
     /*----------------------------------

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

@@ -24,6 +24,17 @@
     --number-input-height-md: @sizeComponent;
 }
 
+.mantine-SegmentedControl-root {
+    --segmented-control-height-md: @sizeComponent;
+    --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/components/progressbar.less

@@ -0,0 +1,45 @@
+@import (reference) "@/client/assets/vars.less";
+
+div.progressbar {
+
+    background: var(--cLine);
+    position: relative;
+
+    @hProgress: 0.5rem;
+    
+    &,
+    > .progress {
+        border-radius: @hProgress / 2rem;
+        height: @hProgress;
+    }
+
+    > .progress {
+        --cBg: var(--cTxtAccent);
+        background: var(--cBg);
+        width: 0%;
+        max-width: 100%;
+        transition: width .25s ease-in;
+    }
+
+    &.col {
+
+        width: @hProgress * 2rem;
+        
+        &,
+        > .progress {
+            border-radius: @hProgress;
+        }
+
+        > .progress {
+
+            width: auto;
+            height: 0%;
+            max-height: 100%;
+
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+    }
+}

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

@@ -1,6 +1,10 @@
 .table {
+
     overflow: auto;
-    max-height: 90vh;
+
+    &.scrollable {
+        max-height: 90vh;
+    }
 
     > table {
         border-collapse: collapse;
@@ -27,7 +31,6 @@ table {
 
     // By default, chrome disables text inherits
     line-height: inherit;
-    font-size: 0.9em;
 
     th {
         font-weight: 500;
@@ -37,7 +40,8 @@ table {
 
     td, th {
 
-        padding: 1em 1em;
+        padding: 0.6em 1em;
+        font-size: 1rem;
         text-align: left;
 
         &:not(:last-child) {
@@ -74,7 +78,7 @@ table {
         top: 0;
         background: var(--cBg);
         white-space: break-spaces;
-        z-index: 5;
+        z-index: 2;
     }
 
     tbody {
@@ -126,14 +130,6 @@ table {
         }
     }
 
-    // Size
-    &.s, .table.s & {
-        td, th {
-            padding: 0.7em 1em;
-            font-size: 1rem;
-        }
-    }
-
     // Tableua responsive
     //  Utilisation déconseillée (lauvaise utilisation de l'espace, ergonomie horrible
     /*@media (max-width: @responsive2) {

package/client/assets/css/components.less

@@ -13,6 +13,7 @@
 @import './components/card.less';
 @import './components/logo.less';
 @import './components/table.less';
+@import './components/progressbar.less';
 @import './components/other.less';
 @import './components/mantine.less';
 

package/client/assets/css/core.less

@@ -2,8 +2,8 @@
 @import '@mantine/core/styles.css';
 
 // Utils
+@import './colors.less';
 @import (reference) "./theme.less";
-
 // Apply the theme class
 .bg {
     background-color: var(--cBg);
@@ -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/theme.less

@@ -118,4 +118,14 @@
     --cTxtAccent: @cAccent;
 
     color: var(--cTxtBase);
+}
+
+.color-theme( @color ) {
+    .apply-theme({ 
+        alpha: false;
+        background: @color; 
+        foreground: #111;
+        accent1: #111;
+        accent2: #111;
+    });
 }

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

@@ -134,10 +134,9 @@
     display: flex;
     flex-direction: column;
 
-    &.scrollable {
-        > * {
-            min-height: fit-content;
-        }
+    // Not too precice as it culd override important heights (ex: btn)
+    :where(& > *) {
+        min-height: fit-content;
     }
 
     // Put this one at first because high possibilities we need to override
@@ -177,6 +176,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/assets/css/utils/sizing.less

@@ -48,6 +48,8 @@
     // Fixes
     .w-@{taille1} { 
         width: @taille1 * @sizingUnit !important; 
+        // Override .scrollable > *, which has a min-width: fit-content
+        min-width: 0!important;
     }
     .h-@{taille1} { 
         height: @taille1 * @sizingUnit !important; 

package/client/components/Card/index.tsx

@@ -7,8 +7,7 @@ import React from 'react';
 import type { ComponentChild } from 'preact';
 
 // Core components
-import { Logo } from '@client/components';
-import { Link } from '@client/services/router';
+import { Logo, Link } from '@client/components';
 
 // Resources
 import './index.less';

package/client/components/Checkbox.tsx

@@ -26,7 +26,7 @@ export default (initProps: Props) => {
     - INIT
     ----------------------------------*/
 
-    const [{ title }, { errors, required, ...props }] = useMantineInput<Props>(initProps);
+    const [{ title, onChange }, { errors, required, ...props }] = useMantineInput<Props>(initProps);
 
     /*----------------------------------
     - RENDER
@@ -37,6 +37,7 @@ export default (initProps: Props) => {
             error={errors?.join(', ')}
             required={required}
             {...props}
+            onChange={e => onChange?.(e.target.checked)}
         />
     )
 }

package/client/components/DropDown.tsx

@@ -5,8 +5,8 @@
 // Npm
 import React from 'react';
 import { JSX, ComponentChild } from 'preact';
-import { Menu, MenuProps } from '@mantine/core';
-import Button, { Props as ButtonProps } from './Button';
+import { Button, Menu, MenuProps } from '@mantine/core';
+import { Props as ButtonProps } from './Button';
 
 // Core libs
 import { useMantineInput, InputBaseProps } from './utils';
@@ -24,12 +24,18 @@ export type Props = ButtonProps & {
 ----------------------------------*/
 export default ({ 
     label, children, 
-    menuProps = {}, ...btnProps 
+    menuProps = {}, size, icon, ...btnProps 
 }: Props) => {
     return (
-        <Menu {...menuProps}>
+        <Menu {...menuProps} size={size}>
             <Menu.Target>
-                <Button {...btnProps}>{label}</Button>
+                <Button {...btnProps} 
+                    rightSection={<i src="angle-down" />}
+                    variant="subtle"
+                >
+                    {icon && <i src={icon} />}
+                    {label}
+                </Button>
             </Menu.Target>
             <Menu.Dropdown>
                 {children}

package/client/components/Input.tsx

@@ -58,6 +58,7 @@ export default (initProps: Props) => {
     let Component: typeof TextInput | typeof NumberInput | typeof Textarea;
     if (props.type === 'number') {
         Component = NumberInput;
+        props.min = props.min ?? 0;
     } else if (props.type === 'longtext' && typeof document !== 'undefined') {
         Component = Textarea;
         props.autosize = true;