5htp-core 0.6.0 → 0.6.1

package/client/app/component.tsx

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

package/client/assets/css/colors.less

@@ -14,7 +14,7 @@
 
 @greyTheme: {
     alpha: false;
-    background: #F3F3F3;
+    background: #F9F9F9;
     foreground: #4D4D4D;
     accent1: @c1;
     accent2: @c2;
@@ -75,6 +75,14 @@
 
 
 @accentTheme: {
+    alpha: false;
+    background: @c1;
+    foreground: #fff;
+    accent1: #fff;
+    accent2: #fff;;
+}
+
+@accentLightTheme: {
     alpha: false;
     background: #EAE8F9;
     foreground: @c1 - #444;
@@ -87,11 +95,15 @@
     .apply-theme(@primaryTheme);
 }
 
-.bg.accent,
-.btn.bg.col.active {
+.bg.accent {
     .apply-theme(@accentTheme); 
 }
 
+.bg.accent.light,
+.btn.bg.col.active {
+    .apply-theme(@accentLightTheme); 
+}
+
 .bg.grey {
     .apply-theme(@greyTheme, @whiteTheme);
 }
@@ -134,21 +146,30 @@
     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 ); }
+/* --- vivid swatches --- */
+.bg.color1  { .color-theme(#1fb4ff ); }   // bright cyan
+.bg.color2  { .color-theme(#ff6a1a ); }   // vivid orange
+.bg.color3  { .color-theme(#f52ff9 ); }   // hot magenta
+.bg.color4  { .color-theme(#962eff ); }   // electric violet
+.bg.color5  { .color-theme(#23ff6e ); }   // neon green
+.bg.color6  { .color-theme(#ffde1f ); }   // vibrant yellow
+.bg.color7  { .color-theme(#ff145d ); }   // punch‑red
+.bg.color8  { .color-theme(#12fff9 ); }   // aqua glow
+.bg.color9  { .color-theme(#ffba1f ); }   // golden amber
+.bg.color10 { .color-theme(#1eff5e ); }   // lime burst
+
+/* --- matching light versions (≈20 % tint of base) --- */
+.bg.light1  { .color-theme(#d2f0ff ); }
+.bg.light2  { .color-theme(#ffe1d1 ); }
+.bg.light3  { .color-theme(#fdd5fe ); }
+.bg.light4  { .color-theme(#ead5ff ); }
+.bg.light5  { .color-theme(#d3ffe2 ); }
+.bg.light6  { .color-theme(#fff8d2 ); }
+.bg.light7  { .color-theme(#ffd0df ); }
+.bg.light8  { .color-theme(#d0fffe ); }
+.bg.light9  { .color-theme(#fff1d2 ); }
+.bg.light10 { .color-theme(#d2ffdf ); }
 
-.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;
@@ -156,10 +177,10 @@
 
     .apply-theme({ 
         alpha: false;
-        background: #D7FEEE; 
-        foreground: darken( #D7FEEE, 80% );
-        accent1: #111;
-        accent2: #111;
+        background: #179e50; 
+        foreground: #fff;
+        accent1: #fff;
+        accent2: #fff;
     });
 
     &.light {
@@ -215,10 +236,10 @@
     
     .apply-theme({ 
         alpha: false;
-        background: lighten( @cInfo, 50% ); 
-        foreground: darken( @cInfo, 50% );
-        accent1: #111;
-        accent2: #111;
+        background: #6C5DD3; 
+        foreground: #fff;
+        accent1: #fff;
+        accent2: #fff;
     });
 
     &.light {

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

@@ -21,7 +21,7 @@
     min-height: @sizeComponent;
 
     // Shape
-    border-radius: @radius;
+    border-radius: @sizeComponent / 2; // Default = pill
     border: none;
 
     // Text
@@ -117,7 +117,7 @@
     }
 
     > i {
-        font-size: 1.2em;
+        font-size: 1.1em;
         color: inherit;
     }
 
@@ -208,8 +208,11 @@
         }
     }
 
-    &.pill {
-        border-radius: @sizeComponent / 2;
+    &.rect,
+    &.col,
+    .col.menu > &,
+    .col.menu > li > & {
+        border-radius: @radius;
     }
 
     &.link {
@@ -242,7 +245,6 @@
 
     // Give less imortance to buttons which are in lists
     color: var(--cTxtBase);  
-    padding: 0 1em; // Row display = more condensed
 
     &.active,
     &:hover {
@@ -290,6 +292,13 @@
     }
 }
 
+.row {
+    &.menu > .btn:not(.col), 
+    &.menu > li > .btn:not(.col) {
+        padding: 0 1em; // Row display = more condensed
+    }
+}
+
 .submenu.card {
     animation: aff-submenu 0.1s ease;
     @keyframes aff-submenu {

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

@@ -25,10 +25,14 @@
         z-index: 10;
     }
 
-    &.minimal {
+    &.minimal, &.flat {
         box-shadow: none;
     }
 
+    &.flat {
+        border: none;
+    }
+
     &.row {
         padding: @cardPadding @cardPaddingLong;
 
@@ -97,15 +101,6 @@
         }
     }
 
-    &.active {
-
-        box-shadow: 0 0 0 3px @c1;
-
-        > * {
-            --cTxtImportant: @c1;
-        }
-    }
-
     /*----------------------------------
     - VARIANTS
     ----------------------------------*/

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

@@ -63,13 +63,14 @@
 
 .mantine-TextInput-input,
 .mantine-Input-input {
-
     border: solid 1px var(--cLine) !important;
+}
 
-    &:focus {
-        border-color: @c1 !important;
-        box-shadow: 0 0 0 4px fade(@c1, 20%) !important;
-    }
+.card.active,
+.mantine-TextInput-input:focus,
+.mantine-Input-input:focus {
+    border: solid 1px @c1 !important;
+    box-shadow: 0 0 0 4px fade(@c1, 20%) !important;
 }
 
 .mantine-MultiSelect-pill {

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

@@ -61,7 +61,7 @@ table {
             position: sticky;
             background: var(--cBg);
             white-space: break-spaces;
-            z-index: 1;
+            z-index: 2;
 
             &:first-child {
                 left: 0;

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

@@ -39,7 +39,7 @@ i {
     &.solid {
         color: var(--cTxtAccent2);
         background: var(--cBg);
-        border-radius: @radius;
+        border-radius: 50%;
 
         // Normla size must fit inside a normal fit element
         width: @sizeComponent * 0.75;

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

@@ -105,6 +105,10 @@ strong.number {
     line-height: 1em;
 }
 
+.nowrap {
+    white-space: nowrap;
+}
+
 em {
     /*font-style: normal;
     position: relative;

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

@@ -12,4 +12,4 @@
 .bl-2, .bh-2 { border-left: solid 1px var(--cLine); }
 
 .b-0 { border: none; }
-.b-1 { border-top: solid 1px var(--cLine); }
+.b-1 { border: solid 1px var(--cLine); }

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

@@ -31,6 +31,9 @@
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
 
+    // Don't fit scrollable containers to their content
+    min-height: 0;
+
     /* For Chrome, Safari, and other WebKit-based browsers */
     &::-webkit-scrollbar {
         display: none;
@@ -42,6 +45,11 @@
     display: flex;
     flex-wrap: nowrap;
 
+    > * {
+        // Avoids flexbox childrens to overflw parent
+        min-width: 0;
+    }
+
     &.scrollable {
         > * {
             min-width: fit-content;
@@ -176,11 +184,6 @@
 .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/Button.tsx

@@ -28,7 +28,7 @@ export type Props = {
     
     tag?: "a" | "button",
     type?: 'guide' | 'primary' | 'secondary' | 'link',
-    shape?: 'default' | 'icon' | 'tile' | 'pill',
+    shape?: 'default' | 'icon' | 'tile' | 'pill' | 'custom',
     size?: TComponentSize,
     class?: string,
 
@@ -236,9 +236,19 @@ export default ({
             if (disabled)
                 return false;
 
+            // Custom event
+            if (props.onClick !== undefined) {
+
+                const returned = props.onClick(e);
+                if (async && returned?.then) {
+                    setLoading(true);
+                    returned.finally(() => setLoading(false));
+                }
+            }
+
             // Link
             let nativeEvent: boolean = false;
-            if ('link' in props) {
+            if (('link' in props) && !e.defaultPrevented) {
 
                 // Nouvelle fenetre = event par defaut
                 if (props.target === '_blank') {
@@ -257,27 +267,20 @@ export default ({
                 }
             }
 
-            // Custom event
-            if (props.onClick !== undefined) {
-
-                const returned = props.onClick(e);
-                if (async && returned?.then) {
-                    setLoading(true);
-                    returned.finally(() => setLoading(false));
-                }
-            }
-
             if (!nativeEvent) {
                 e.preventDefault();
                 return false;
             }       
         }}>
             {prefix}
-            {children && (
-                <span class={"label"}>
-                    {children}
-                </span>
-            )}
+            {children === undefined 
+                ? null 
+                : shape === 'custom' 
+                ? children : (
+                    <span class={"label"}>
+                        {children}
+                    </span>
+                )}
             {suffix}
         </Tag>
     )

package/client/components/Checkbox.tsx

@@ -26,7 +26,11 @@ export default (initProps: Props) => {
     - INIT
     ----------------------------------*/
 
-    const [{ title, onChange }, { errors, required, ...props }] = useMantineInput<Props>(initProps);
+    const [{ title, onChange, value }, { errors, required, ...props }] = useMantineInput<Props>(initProps);
+
+    if (initProps.title === 'Exact match')
+    console.log("Checkbox", initProps, props);
+    
 
     /*----------------------------------
     - RENDER
@@ -36,6 +40,7 @@ export default (initProps: Props) => {
             label={title}
             error={errors?.join(', ')}
             required={required}
+            checked={value}
             {...props}
             onChange={e => onChange?.(e.target.checked)}
         />

package/client/components/ConnectedInput.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import type { Choice } from '@client/components/Select';
+
+const ConnectedInput = <TComponent extends React.ComponentType<any>>({ 
+    component: Component, data: dataInit, ...props 
+}: {
+    component: TComponent,
+    data?: Choice[] | ((search?: string) => Promise<Choice[]>),
+} & Omit<React.ComponentProps<TComponent>, 'data' | 'onSearchChange'>) => {
+
+    const [data, setData] = React.useState<Choice[]>([]);
+    const [search, setSearch] = React.useState<string>('');
+
+    React.useEffect(() => {
+
+        if (!dataInit) return;
+        if (Array.isArray(dataInit))
+            setData(dataInit);
+        else
+            dataInit(search).then(setData);
+
+    }, [dataInit, search]);
+
+    return (
+        <Component 
+            {...props} 
+           data={data}
+           onSearchChange={setSearch}
+        />
+    )
+}
+
+export default ConnectedInput;

package/client/components/DropDown.tsx

@@ -5,8 +5,9 @@
 // Npm
 import React from 'react';
 import { JSX, ComponentChild } from 'preact';
-import { Button, Menu, MenuProps } from '@mantine/core';
-import { Props as ButtonProps } from './Button';
+import { Menu, MenuProps } from '@mantine/core';
+import Button, { Props as ButtonProps } from './Button';
+import Popover, { Props as PopoverProps } from './containers/Popover';
 
 // Core libs
 import { useMantineInput, InputBaseProps } from './utils';
@@ -16,16 +17,32 @@ import { useMantineInput, InputBaseProps } from './utils';
 ----------------------------------*/
 export type Props = ButtonProps & {
     menuProps?: MenuProps,
-  label: ComponentChild,
+    label: ComponentChild,
+    popover?: PopoverProps,
 }
 
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
 export default ({ 
-    label, children, 
+    label, children, popover = {},
     menuProps = {}, size, icon, ...btnProps 
 }: Props) => {
+    return (
+        <Popover {...popover} content={(
+            <div class="card bg white col menu">
+                {children}
+            </div>
+        )}>
+            <Button {...btnProps} 
+                size={size}
+                suffix={<i src="angle-down" />}
+                icon={icon}
+            >
+                {label}
+            </Button>
+        </Popover>
+    )
     return (
         <Menu {...menuProps} size={size}>
             <Menu.Target>

package/client/components/Input.tsx

@@ -61,8 +61,8 @@ export default (initProps: Props) => {
         props.min = props.min ?? 0;
     } else if (props.type === 'longtext' && typeof document !== 'undefined') {
         Component = Textarea;
-        props.autosize = true;
-        props.minRows = 2;
+        props.autosize = props.autosize || true;
+        props.minRows = props.minRows || 2;
     } else {
         Component = TextInput;
     }

package/client/components/Rte/Editor.tsx

@@ -73,6 +73,7 @@ import YouTubePlugin from './plugins/YouTubePlugin';
 // Core libs
 import editorNodes from '@common/data/rte/nodes';
 import type { Props as TRteProps } from '.';
+import type { LexicalState } from '@common/utils/rte';
 
 // Special componets
 import ExampleTheme from './themes/PlaygroundEditorTheme';
@@ -111,6 +112,8 @@ export default ({ value, setValue, props }: {
     let {
         // Decoration
         title,
+        toolbar,
+        decorateText = true,
         // Actions
         preview = true
     } = props;
@@ -145,7 +148,7 @@ export default ({ value, setValue, props }: {
         }
     }, [isPreview]);
 
-    const renderPreview = async (value: {} | undefined) => {
+    const renderPreview = async (value: LexicalState | undefined) => {
 
         if (!value)
             return '';
@@ -165,7 +168,7 @@ export default ({ value, setValue, props }: {
                     <i src="spin" />
                 </div>
             ) : (
-                <div class="preview reading h-1-4 scrollable col clickable" 
+                <div class={"preview h-1-4 scrollable clickable" + (decorateText ? ' reading col' : '')} 
                     onClick={() => setIsPreview(false)}
                     dangerouslySetInnerHTML={{ __html: html }} />
             )
@@ -240,13 +243,13 @@ export default ({ value, setValue, props }: {
             theme: ExampleTheme,
         }}>
             <div className="editor-container">
-                <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
+                <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} display={toolbar} />
                 <div className="editor-inner">
                     <RichTextPlugin
                         contentEditable={
                             <div className="editor" ref={onRef}>
                                 <ContentEditable
-                                    className="editor-input reading col"
+                                    className={"editor-input" + (decorateText ? ' reading col' : '')}
                                     aria-placeholder={"Type text here ..."}
                                     placeholder={
                                         <div className="editor-placeholder">Type text here ...</div>
@@ -277,7 +280,15 @@ export default ({ value, setValue, props }: {
                     <SpeechToTextPlugin />
                     <AutoLinkPlugin />
                     <CodeHighlightPlugin />
-                    <ListPlugin />
+
+                    {toolbar?.insert !== false && <>
+
+                        {(toolbar?.insert === true || toolbar?.insert?.list !== false) && (
+                            <ListPlugin />
+                        )}
+                    
+                    </>}
+
                     <CheckListPlugin />
                     <ListMaxIndentLevelPlugin maxDepth={7} />
                     <TablePlugin
@@ -317,10 +328,13 @@ export default ({ value, setValue, props }: {
                                 cellMerge={true}
                             />
                             <TableHoverActionsPlugin anchorElem={floatingAnchorElem} />
-                            <FloatingTextFormatToolbarPlugin
-                                anchorElem={floatingAnchorElem}
-                                setIsLinkEditMode={setIsLinkEditMode}
-                            />
+
+                            {toolbar?.formatting !== false && (
+                                <FloatingTextFormatToolbarPlugin
+                                    anchorElem={floatingAnchorElem}
+                                    setIsLinkEditMode={setIsLinkEditMode}
+                                />
+                            )}
                         </>
                     )}
 

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

@@ -92,7 +92,7 @@ export default function ElementFormatDropdown({
             popover={{ tag: 'li' }}
         >
             {FormatOptions.map((option) => (
-                <Button icon={isRTL ? option.iconRTL : option.icon}
+                <Button size="s" icon={isRTL ? option.iconRTL : option.icon}
                     onClick={() => {
                         if (option.value === 'indent')
                             editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);